diff --git a/AGENTS.md b/AGENTS.md
index 93930038..ba606920 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -8,14 +8,14 @@ This guide tells AI agents how to keep Bitvid aligned with the current product d
 
 * **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.
+* **Emergency response:** If a change regresses URL-first playback or breaks magnet parsing, revert immediately, call this out in the PR, and annotate the AGENTS.md changelog with remediation tips. **Note:** These regressions usually surface in dev logs and tests around playback/magnet helpers—reference them when triaging so future agents don’t 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.
+* **Runtime behavior:** Call `bitvidApp.playVideoWithFallback({ url, magnet })` in `js/app.js`. This function orchestrates URL probing and magnet fallback, delegating low-level stream handling to `js/services/playbackService.js`. `js/playbackUtils.js` now provides magnet/session helper utilities rather than the playback entry point itself.
 * **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.
 
 ---
@@ -24,9 +24,10 @@ This guide tells AI agents how to keep Bitvid aligned with the current product d
 
 * **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.
+* **Never call `new URL()` on magnets:** URL constructors/`URLSearchParams` percent-encode the `xt` payload and can 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.
+* **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. (If you introduce a new tracker set or feature flag, update `js/constants.js` and mention it here.)
+* **Validation reference:** When in doubt about legacy infohash handling or normalization, consult the existing tests that cover legacy/bare infohash inputs and magnet normalization. If you extend helper behavior, extend those tests alongside the code.
 
 ---
 
@@ -46,29 +47,41 @@ This guide tells AI agents how to keep Bitvid aligned with the current product d
 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
+## 6. Moderation Quickstart (Bitvid)
 
-* **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.
+The moderation and admin list tooling remain active in Bitvid and must follow Nostr moderation policies and QA steps. Review `docs/moderation/README.md` and these key expectations:
+
+1. **Report thresholds:** Parse NIP-56 reports and compute `trustedReportCount` using **only F1 followers**.
+2. **Default behaviors:** Blur thumbnails at ≥3 F1 `nudity` reports and block autoplay at ≥2.
+3. **Admin lists:** Use NIP‑51 lists — `10000` for mute/downrank and `30000` for admin hard-hide/whitelist. Ensure these list IDs are correctly handled in the profile modal.
+4. **Profile Modal Integration:** Admin list toggles and moderation controls in `ProfileModalController` must trigger local state changes and reflect mutations visually without breaking cached profiles.
+5. **User overrides:** Add a “show anyway” option to any blurred or blocked content.
+6. **Testing:** Run all cases from `docs/moderation/testing.md` before shipping changes. Confirm blur, hide, and override flows function correctly across sessions.
+7. **Telemetry and privacy:** Log moderation decisions locally for debugging without leaking PII.
+8. **QA demo:** Record a ≤90 s screen demo showing blur/hide/override flows when submitting major moderation work.
 
 ---
 
@@ -78,16 +91,70 @@ Document the run in PR descriptions so QA can cross-reference results.
   `{ "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.
+* **Playback orchestration:** `bitvidApp.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.
 
+---
+
+## 8. Architectural Guide: `bitvidApp` vs. UI Controllers
+
+To keep the codebase maintainable, we are moving complex UI logic from `js/app.js` into dedicated controller classes (e.g., `ProfileModalController`, `UploadModal`). **This is an architectural direction for `unstable`**—some controllers may not exist yet. When working on these components, follow these core principles:
+
+#### **Principle: Separation of Concerns**
+
+* **`bitvidApp` (js/app.js): The Orchestrator.** Its main job is to manage application-wide state, wire up services, and orchestrate high-level actions. It should **not** directly manipulate the DOM elements of complex components like modals. Instead, it should instantiate their controllers and communicate with them through a clean API.
+
+* **UI Controllers (e.g., `js/ui/profileModalController.js`): The Specialists.** A controller is responsible for a specific piece of the UI. It manages its own DOM elements, handles user interactions within its scope, and uses services and callbacks provided by `bitvidApp` to perform actions.
+
+#### **State Management: The Source of Truth**
+
+The single source of truth for shared application state (like saved profiles, relay lists, and block lists) lives in modules like `js/state/cache.js` and services like `relayManager`.
+
+1. **`bitvidApp` Writes State:** `bitvidApp` is responsible for calling the functions that mutate this central state (e.g., `setSavedProfiles`, `userBlocks.addBlock`).
+2. **`bitvidApp` Notifies the Controller:** After updating the state, `bitvidApp` must call a method on the controller to tell it that its data is stale and it needs to re-render.
+
+   * **Example:** When a user logs in, `bitvidApp` updates the active user and saved profiles, then calls `this.profileModalController.handleAuthLogin(detail)` so the modal can update its own display.
+3. **Controller Reads State:** The controller receives functions to *read* this state in its constructor (via the `state` and `services` objects). It should **always** use these functions (e.g., `this.state.getSavedProfiles()`, `this.services.userBlocks.getBlocked()`) to get the data it needs to render.
+
+#### **Execution Flow: Callbacks**
+
+When a user performs an action inside a modal that needs to affect the whole application (like switching a profile or updating relays), the flow is:
+
+1. **User Action:** A user clicks a "Switch Profile" button inside the modal.
+2. **Controller Event Handler:** The controller's internal event listener fires.
+3. **Controller Invokes Callback:** The controller calls a callback function passed to it by `bitvidApp` (e.g., `this.callbacks.onRequestSwitchProfile({ pubkey })`). It does *not* contain the logic for switching profiles itself.
+4. **`bitvidApp` Executes the Logic:** `bitvidApp` provides the implementation for that callback (e.g., `handleProfileSwitchRequest`). This method contains the actual logic to call the auth service, reload videos, and update the application state.
+
+#### **Checklist for Refactoring from `bitvidApp` to a Controller:**
+
+When moving a feature to a controller, follow these steps:
+
+1. **Identify Logic:** Find the methods in `js/app.js` that directly read from or write to the modal's DOM (e.g., old `renderSavedProfiles` or `populateBlockedList` logic).
+2. **Create Controller Method:** Implement the new logic inside the controller. Ensure it gets its data from `this.services.*` or `this.state.*`.
+3. **Create `bitvidApp` Wrapper:** In `js/app.js`, replace the old logic with a new, thin wrapper method. This wrapper should:
+
+   * a. Update any central application state if needed.
+   * b. Call the new method on the controller instance (e.g., `this.profileModalController.populateBlockedList()`).
+4. **Wire Up Callbacks:** If the controller needs to trigger an app-wide action, ensure a callback is defined in the controller's constructor and provided by `bitvidApp` during instantiation.
+5. **Remove Old Code:** Once fully replaced, delete the old DOM manipulation logic and direct event listeners from `js/app.js`. All interactions should be routed through the controller.
+
+#### **File Map (quick reference)**
+
+* `js/app.js` — **`bitvidApp`** (orchestrator; owns high-level flows like `playVideoWithFallback` wiring)
+* `js/services/playbackService.js` — Lower-level playback stream handling
+* `js/playbackUtils.js` — Magnet/session helper utilities
+* `js/magnetUtils.js` — `safeDecodeMagnet`, `normalizeAndAugmentMagnet` (WSS trackers, `ws=`/`xs=` hints)
+* `js/constants.js` — Feature flags, canonical WSS tracker list
+
+---
+
 ## Next
 
-Please read these documents next. 
+Please read these documents next.
 
-docs/nostr-event-schemas.md 
-js/nostrEventSchemas.js
+* `docs/nostr-event-schemas.md`
+* `js/nostrEventSchemas.js`
 
-And if you need to create new nostr kinds please keep the logic centralized there in nostrEventSchemas.js and the nostr-event-schemas.md up to date. 
+And if you need to create new nostr kinds please keep the logic centralized there in `nostrEventSchemas.js` and the `nostr-event-schemas.md` up to date.
 
 **End of AGENTS.md**
diff --git a/README.md b/README.md
index efba1995..39ac9146 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 ## Features
 
 - **Decentralized Sharing**: Video sharing without central servers.
-- **Private Video Listings**: Share encrypted videos for added privacy.
+- **Private Video Listings**: Hide cards from shared grids so only the owner sees them.
 - **Nostr Integration**: Use Nostr keys for login and interaction.
 - **WebTorrent Streaming**: Stream videos directly through torrent technology.
 - **Developer-Friendly**: Open source and customizable for your needs.
@@ -37,7 +37,7 @@ The upload modal enforces **Title + (URL or Magnet)**. Hosted URLs are strongly
 - **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.
+- **Private toggle**: Hides the card from shared grids so only you see it and adds a purple accent so the private state stands out.
 
 ### How playback works
 
@@ -62,7 +62,6 @@ To run **bitvid** locally:
    ```
 
 2. Start a local server:
-
    - Using Python:
      ```bash
      python -m http.server 8000
@@ -73,24 +72,28 @@ To run **bitvid** locally:
      ```
 
 3. Open the site in your browser:
-  ```
-  http://localhost:8000
-  ```
+
+```
+http://localhost:8000
+```
 
 ### CSS build pipeline
 
-Tailwind utilities are generated from `css/tailwind.source.css` using the build
-script below. Run this whenever you add or remove classes in HTML or JavaScript
-so the purged output stays in sync:
+Tailwind utilities are generated from `css/tailwind.source.css` and themed via
+the shared tokens in `css/tokens.css`. Install dependencies once and lean on the
+package scripts to keep formatting, linting, and generated output consistent:
 
 ```bash
-npm install         # first run only
-npm run build:css
+npm install          # install Prettier, Stylelint, and Tailwind toolchain
+npm run format       # format CSS/HTML/JS/MD with Prettier + tailwindcss plugin
+npm run lint:css     # enforce token usage and forbid raw hex colors
+npm run build:css    # rebuild css/tailwind.generated.css from tailwind.source.css
+npm run check:css    # CI-friendly guard that fails if tailwind.generated.css is dirty
 ```
 
-The command compiles Tailwind with `tailwind.config.cjs`, runs it through the
-PostCSS pipeline defined in `postcss.config.cjs` (for autoprefixing), and emits
-the purged, minified stylesheet at `css/tailwind.generated.css`. Commit the
+The build command compiles Tailwind with `tailwind.config.cjs`, runs it through
+the PostCSS pipeline defined in `postcss.config.cjs` (for autoprefixing), and
+emits the purged, minified stylesheet at `css/tailwind.generated.css`. Commit the
 regenerated file alongside any template changes so deployments pick up the
 latest styles.
 
@@ -100,6 +103,13 @@ latest styles.
   - Central place for instance-specific values like the Super Admin npub and the
     default whitelist-only mode setting. Update the documented exports here when
     preparing a new deployment.
+  - Tune `PLATFORM_FEE_PERCENT` (0–100) to keep a percentage of Lightning tips.
+    When the fee is positive, BitVid routes the platform’s split to
+    `PLATFORM_LUD16_OVERRIDE`, so set it to the Lightning address that should
+    receive the sats (or publish a `lud16` on the Super Admin profile). Leave
+    the fee at `0` to pass through every satoshi.
+  - Populate `DEFAULT_RELAY_URLS_OVERRIDE` with WSS URLs to replace the bundled
+    relay bootstrap list. Keep it empty to stick with the upstream defaults.
 - **`config.js`**:
   - Toggle `isDevMode` for development (`true`) or production (`false`).
 - **`js/constants.js`**:
@@ -163,6 +173,12 @@ Use the manual QA checklist before releases or when altering upload/playback flo
 
 See [`docs/qa.md`](docs/qa.md) for the copy/paste-friendly checklist we share with QA.
 
+For automated DOM-focused regression coverage, run the Node-based test suite:
+
+```bash
+node tests/profile-modal-controller.test.mjs
+```
+
 ---
 
 ## Acknowledgments
diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index a3541d9c..fa6d9519 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -73,6 +73,572 @@
             </div>
           </div>
 
+          <!-- NOTE: Keep this NIP-71 markup in sync with the upload and revert modals. -->
+          <div
+            class="space-y-4 rounded-lg border border-gray-800 bg-black/30 p-4"
+            id="editNip71EventDetails"
+            data-nip71-section="event-details"
+          >
+            <fieldset
+              id="editNip71KindFieldset"
+              class="space-y-2"
+              data-nip71-fieldset="kind"
+            >
+              <legend class="text-sm font-semibold text-gray-200">
+                NIP-71 event type
+              </legend>
+              <p class="text-xs text-gray-400">
+                Choose the video format. <span class="font-medium text-gray-300">Kind 21</span> is a full video, while
+                <span class="font-medium text-gray-300">Kind 22</span> is a short.
+              </p>
+              <div
+                class="flex flex-wrap gap-4"
+                role="radiogroup"
+                aria-labelledby="editNip71KindFieldset"
+              >
+                <label class="flex items-center gap-2 text-sm text-gray-200">
+                  <input
+                    type="radio"
+                    name="editNip71Kind"
+                    id="editNip71KindLong"
+                    value="21"
+                    checked
+                    data-nip71-input="kind"
+                    class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  />
+                  Normal video (kind 21)
+                </label>
+                <label class="flex items-center gap-2 text-sm text-gray-200">
+                  <input
+                    type="radio"
+                    name="editNip71Kind"
+                    id="editNip71KindShort"
+                    value="22"
+                    data-nip71-input="kind"
+                    class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  />
+                  Short video (kind 22)
+                </label>
+              </div>
+            </fieldset>
+
+            <div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
+              <div>
+                <label for="editNip71PublishedAt" class="block text-sm font-medium text-gray-200">
+                  Published at
+                </label>
+                <input
+                  type="datetime-local"
+                  id="editNip71PublishedAt"
+                  data-nip71-input="published_at"
+                  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"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Set the canonical publish time for cross-client ordering.
+                </p>
+              </div>
+              <div>
+                <label for="editNip71AltText" class="block text-sm font-medium text-gray-200">
+                  Alt text
+                </label>
+                <input
+                  type="text"
+                  id="editNip71AltText"
+                  data-nip71-input="alt"
+                  placeholder="Describe the visuals for screen readers"
+                  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"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Plain-language fallback shown when the media cannot load.
+                </p>
+              </div>
+              <div>
+                <label for="editNip71Duration" class="block text-sm font-medium text-gray-200">
+                  Duration (seconds)
+                </label>
+                <input
+                  type="number"
+                  id="editNip71Duration"
+                  min="0"
+                  step="1"
+                  data-nip71-input="duration"
+                  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"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Provide the runtime in whole seconds for timeline scrubbing.
+                </p>
+              </div>
+              <div>
+                <label for="editNip71ContentWarning" class="block text-sm font-medium text-gray-200">
+                  Content warning
+                </label>
+                <input
+                  type="text"
+                  id="editNip71ContentWarning"
+                  data-nip71-input="content-warning"
+                  placeholder="e.g., Flashing lights"
+                  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"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Leave blank if the video is safe for all audiences.
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <label for="editNip71Summary" class="block text-sm font-medium text-gray-200">
+                Summary
+              </label>
+              <textarea
+                id="editNip71Summary"
+                rows="3"
+                data-nip71-input="summary"
+                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="Short synopsis used as the Nostr content field"
+              ></textarea>
+              <p class="mt-1 text-xs text-gray-400">
+                This becomes the event content. Keep it concise for Nostr readers.
+              </p>
+            </div>
+          </div>
+
+          <fieldset
+            id="editNip71TagsFieldset"
+            class="space-y-6 rounded-lg border border-gray-800 bg-black/30 p-4"
+            data-nip71-section="tags"
+          >
+            <legend class="relative text-sm font-semibold text-gray-200">
+              <span class="inline-block -ml-2 rounded px-2 bg-black/30">NIP-71 tags</span>
+            </legend>
+            <p class="text-xs text-gray-400">
+              Use the controls below to describe media variants, captions, chapters, participants, and references.
+            </p>
+
+            <section class="space-y-4" aria-labelledby="editNip71ImetaLabel" data-nip71-repeater="imeta">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="imeta"
+                  aria-describedby="editNip71ImetaHelp"
+                >
+                  Add variant
+                </button>
+              </div>
+              <p id="editNip71ImetaHelp" class="text-xs text-gray-400">
+                Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
+                <code>image</code>, <code>fallback</code>, or <code>service</code> values.
+              </p>
+              <div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
+              <template id="editNip71ImetaTemplate" data-nip71-template="imeta">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="imeta">
+                  <div class="grid gap-3 md:grid-cols-2">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        MIME type (<code>m</code>)
+                      </label>
+                      <input
+                        type="text"
+                        data-nip71-field="m"
+                        placeholder="video/mp4"
+                        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"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        Pixel dimensions (<code>dim</code>)
+                      </label>
+                      <input
+                        type="text"
+                        data-nip71-field="dim"
+                        placeholder="1920x1080"
+                        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"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        Streaming URL (<code>url</code>)
+                      </label>
+                      <input
+                        type="url"
+                        data-nip71-field="url"
+                        placeholder="https://cdn.example.com/variant.m3u8"
+                        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"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        Magnet (<code>x</code>)
+                      </label>
+                      <input
+                        type="text"
+                        data-nip71-field="x"
+                        placeholder="magnet:?xt=urn:btih:..."
+                        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"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
+                    </div>
+                  </div>
+
+                  <div class="space-y-3" data-nip71-nested="image">
+                    <div class="flex items-center justify-between">
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
+                      <button
+                        type="button"
+                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-nested-add="image"
+                      >
+                        Add image URL
+                      </button>
+                    </div>
+                    <div class="space-y-2" data-nip71-nested-list="image"></div>
+                    <template data-nip71-nested-template="image">
+                      <div class="flex items-center gap-2" data-nip71-nested-entry="image">
+                        <input
+                          type="url"
+                          placeholder="https://cdn.example.com/poster.jpg"
+                          data-nip71-nested-field="image"
+                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        />
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          data-nip71-remove="nested"
+                          aria-label="Remove image URL"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+                  <div class="space-y-3" data-nip71-nested="fallback">
+                    <div class="flex items-center justify-between">
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
+                      <button
+                        type="button"
+                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-nested-add="fallback"
+                      >
+                        Add fallback
+                      </button>
+                    </div>
+                    <div class="space-y-2" data-nip71-nested-list="fallback"></div>
+                    <template data-nip71-nested-template="fallback">
+                      <div class="flex items-center gap-2" data-nip71-nested-entry="fallback">
+                        <input
+                          type="url"
+                          placeholder="https://cdn.backup.net/video.mp4"
+                          data-nip71-nested-field="fallback"
+                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        />
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          data-nip71-remove="nested"
+                          aria-label="Remove fallback URL"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+                  <div class="space-y-3" data-nip71-nested="service">
+                    <div class="flex items-center justify-between">
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
+                      <button
+                        type="button"
+                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-nested-add="service"
+                      >
+                        Add service
+                      </button>
+                    </div>
+                    <div class="space-y-2" data-nip71-nested-list="service"></div>
+                    <template data-nip71-nested-template="service">
+                      <div class="flex items-center gap-2" data-nip71-nested-entry="service">
+                        <input
+                          type="text"
+                          placeholder="https://api.example.com"
+                          data-nip71-nested-field="service"
+                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        />
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          data-nip71-remove="nested"
+                          aria-label="Remove service entry"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="imeta"
+                    >
+                      Remove variant
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71TextTracksLabel" data-nip71-repeater="text-track">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-gray-200">
+                  Caption &amp; subtitle tracks (text-track)
+                </h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="text-track"
+                  aria-describedby="editNip71TextTracksHelp"
+                >
+                  Add track
+                </button>
+              </div>
+              <p id="editNip71TextTracksHelp" class="text-xs text-gray-400">
+                Supply caption or subtitle URLs along with file type and language so players can surface accessibility features.
+              </p>
+              <div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
+              <template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="text-track">
+                  <div class="grid gap-3 md:grid-cols-3">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Track URL</label>
+                      <input
+                        type="url"
+                        data-nip71-field="url"
+                        placeholder="https://cdn.example.com/subs.vtt"
+                        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"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Type</label>
+                      <input
+                        type="text"
+                        data-nip71-field="type"
+                        placeholder="text/vtt"
+                        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"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Language</label>
+                      <input
+                        type="text"
+                        data-nip71-field="language"
+                        placeholder="en"
+                        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"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="text-track"
+                    >
+                      Remove track
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71SegmentsLabel" data-nip71-repeater="segment">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters &amp; segments (segment)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="segment"
+                  aria-describedby="editNip71SegmentsHelp"
+                >
+                  Add segment
+                </button>
+              </div>
+              <p id="editNip71SegmentsHelp" class="text-xs text-gray-400">
+                Outline chapters with start and end times, titles, and optional thumbnails.
+              </p>
+              <div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
+              <template id="editNip71SegmentTemplate" data-nip71-template="segment">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="segment">
+                  <div class="grid gap-3 md:grid-cols-2">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Start (seconds)</label>
+                      <input
+                        type="number"
+                        data-nip71-field="start"
+                        min="0"
+                        step="1"
+                        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"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">End (seconds)</label>
+                      <input
+                        type="number"
+                        data-nip71-field="end"
+                        min="0"
+                        step="1"
+                        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"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Title</label>
+                      <input
+                        type="text"
+                        data-nip71-field="title"
+                        placeholder="Chapter title"
+                        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"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Thumbnail URL</label>
+                      <input
+                        type="url"
+                        data-nip71-field="thumbnail"
+                        placeholder="https://cdn.example.com/frame.jpg"
+                        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"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="segment"
+                    >
+                      Remove segment
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71HashtagsLabel" data-nip71-repeater="t">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="t"
+                >
+                  Add hashtag
+                </button>
+              </div>
+              <p class="text-xs text-gray-400">
+                Enter keywords; leading <code>#</code> characters are stripped automatically when saving.
+              </p>
+              <div id="editNip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
+              <template id="editNip71HashtagTemplate" data-nip71-template="t">
+                <div class="flex items-center gap-2" data-nip71-entry="t">
+                  <input
+                    type="text"
+                    data-nip71-field="value"
+                    placeholder="#nostr"
+                    class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  />
+                  <button
+                    type="button"
+                    class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                    data-nip71-remove="t"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71ParticipantsLabel" data-nip71-repeater="p">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="p"
+                >
+                  Add participant
+                </button>
+              </div>
+              <div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
+              <template id="editNip71ParticipantTemplate" data-nip71-template="p">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="p">
+                  <div class="grid gap-3 md:grid-cols-2">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Participant pubkey</label>
+                      <input
+                        type="text"
+                        data-nip71-field="pubkey"
+                        placeholder="npub1... or hex"
+                        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"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Relay hint</label>
+                      <input
+                        type="text"
+                        data-nip71-field="relay"
+                        placeholder="wss://relay.example.com"
+                        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"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="p"
+                    >
+                      Remove participant
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71ReferencesLabel" data-nip71-repeater="r">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="r"
+                >
+                  Add reference
+                </button>
+              </div>
+              <div id="editNip71ReferenceList" class="space-y-2" data-nip71-list="r"></div>
+              <template id="editNip71ReferenceTemplate" data-nip71-template="r">
+                <div class="flex items-center gap-2" data-nip71-entry="r">
+                  <input
+                    type="url"
+                    data-nip71-field="url"
+                    placeholder="https://example.com/context"
+                    class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  />
+                  <button
+                    type="button"
+                    class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                    data-nip71-remove="r"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </template>
+            </section>
+          </fieldset>
+
           <div class="space-y-1">
             <label for="editVideoUrl" class="block text-sm font-medium text-gray-200">
               Hosted video URL (https)
@@ -199,6 +765,59 @@
             </div>
           </div>
 
+          <div class="space-y-1">
+            <span id="editVideoVisibilityLabel" class="block text-sm font-medium text-gray-200">
+              Visibility
+            </span>
+            <div
+              class="space-y-3 rounded-md border border-gray-800 bg-black/30 p-3"
+              role="group"
+              aria-labelledby="editVideoVisibilityLabel"
+              data-visibility-toggle
+            >
+              <div class="flex flex-wrap items-center gap-2 sm:justify-between">
+                <div
+                  class="video-visibility-toggle"
+                  data-visibility-options
+                >
+                  <button
+                    type="button"
+                    class="video-visibility-toggle__option"
+                    data-visibility-option="public"
+                    aria-pressed="false"
+                  >
+                    Public
+                  </button>
+                  <button
+                    type="button"
+                    class="video-visibility-toggle__option"
+                    data-visibility-option="private"
+                    aria-pressed="false"
+                  >
+                    Private
+                  </button>
+                </div>
+                <input
+                  type="checkbox"
+                  id="editVideoIsPrivate"
+                  class="hidden"
+                  data-default-checked="false"
+                  aria-hidden="true"
+                />
+              </div>
+              <p class="text-xs text-gray-400" data-visibility-helper>
+                Private notes stay visible only to you. Switch back to public when you're ready to share.
+              </p>
+              <button
+                type="button"
+                class="edit-field-button hidden"
+                data-edit-target="editVideoIsPrivate"
+              >
+                Edit field
+              </button>
+            </div>
+          </div>
+
           <div class="space-y-1">
             <label for="editEnableComments" class="block text-sm font-medium text-gray-200">
               Enable comments
@@ -211,6 +830,8 @@
                   type="checkbox"
                   id="editEnableComments"
                   class="h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  data-default-checked="true"
+                  checked
                 />
                 <span class="text-sm text-gray-300">
                   Allow replies once comment threads are available.
diff --git a/components/iframe_forms/iframe-application-form.html b/components/iframe_forms/iframe-application-form.html
index cfe91fa9..b08f2221 100644
--- a/components/iframe_forms/iframe-application-form.html
+++ b/components/iframe_forms/iframe-application-form.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <title>bitvid Whitelist Application Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css" />
+
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
+
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-bug-fix-form.html b/components/iframe_forms/iframe-bug-fix-form.html
index 017d7b84..04ba2552 100644
--- a/components/iframe_forms/iframe-bug-fix-form.html
+++ b/components/iframe_forms/iframe-bug-fix-form.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <title>bitvid Bug Report Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css" />
+
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
+
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-content-appeals-form.html b/components/iframe_forms/iframe-content-appeals-form.html
index c7f94194..8ebe7077 100644
--- a/components/iframe_forms/iframe-content-appeals-form.html
+++ b/components/iframe_forms/iframe-content-appeals-form.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <title>bitvid Content Appeals Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css" />
+
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
+
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-feedback-form.html b/components/iframe_forms/iframe-feedback-form.html
index 8bc564c9..c0e14625 100644
--- a/components/iframe_forms/iframe-feedback-form.html
+++ b/components/iframe_forms/iframe-feedback-form.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <title>bitvid General Feedback Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css" />
+
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
+
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-request-form.html b/components/iframe_forms/iframe-request-form.html
index 23ce8ff4..efa83470 100644
--- a/components/iframe_forms/iframe-request-form.html
+++ b/components/iframe_forms/iframe-request-form.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Feature Request Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/profile-modal.html b/components/profile-modal.html
index b7e0081f..68eb68c2 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -79,6 +79,15 @@
             >
               Relays
             </button>
+            <button
+              id="profileNavWallet"
+              type="button"
+              class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+              aria-controls="profilePaneWallet"
+              aria-selected="false"
+            >
+              Wallet
+            </button>
             <button
               id="profileNavBlocked"
               type="button"
@@ -243,6 +252,71 @@
               <ul id="relayList" class="space-y-3"></ul>
             </section>
 
+            <section
+              id="profilePaneWallet"
+              class="profile-pane hidden space-y-6"
+              role="tabpanel"
+              aria-labelledby="profileNavWallet"
+            >
+              <div class="space-y-4">
+                <p class="text-sm text-gray-400">
+                  Connect a Nostr Wallet Connect (NWC) compatible wallet to zap creators directly from BitVid.
+                </p>
+                <div class="space-y-4">
+                  <label class="block text-sm text-gray-300" for="profileWalletUri">
+                    <span class="mb-2 block font-medium">Wallet Connect URI</span>
+                    <input
+                      id="profileWalletUri"
+                      type="url"
+                      placeholder="nostr+walletconnect://<public-key>?relay=wss://relay.example.com"
+                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </label>
+                  <label class="block text-sm text-gray-300" for="profileWalletDefaultZap">
+                    <span class="mb-2 block font-medium">Default zap amount (sats)</span>
+                    <input
+                      id="profileWalletDefaultZap"
+                      type="number"
+                      inputmode="numeric"
+                      min="0"
+                      step="1"
+                      placeholder="500"
+                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  </label>
+                </div>
+                <div class="flex flex-wrap items-center gap-3">
+                  <button
+                    id="profileWalletSave"
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  >
+                    Save wallet
+                  </button>
+                  <button
+                    id="profileWalletTest"
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200 transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  >
+                    Test connection
+                  </button>
+                  <button
+                    id="profileWalletDisconnect"
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                  >
+                    Disconnect wallet
+                  </button>
+                </div>
+                <p
+                  id="profileWalletStatus"
+                  class="text-sm text-gray-400"
+                  role="status"
+                  aria-live="polite"
+                ></p>
+              </div>
+            </section>
+
             <section
               id="profilePaneBlocked"
               class="profile-pane hidden space-y-4"
diff --git a/components/revert-video-modal.html b/components/revert-video-modal.html
index 87f2e6d7..cedd0daa 100644
--- a/components/revert-video-modal.html
+++ b/components/revert-video-modal.html
@@ -87,8 +87,64 @@
             class="rounded-lg border border-gray-800 bg-gray-900/70 p-4 text-sm text-gray-200"
             aria-live="polite"
           >
-            <div id="revertVersionPlaceholder" class="flex h-full items-center justify-center text-center text-gray-500">
-              Select an earlier revision to inspect its metadata.
+            <!-- NOTE: Keep Upload/Edit metadata fields mirrored when adjusting these sections. -->
+            <div class="space-y-6" aria-labelledby="revertVersionPlaceholderHeading">
+              <div class="space-y-2 text-center">
+                <h3 id="revertVersionPlaceholderHeading" class="text-sm font-semibold text-gray-200">
+                  Revision metadata
+                </h3>
+                <p
+                  id="revertVersionPlaceholder"
+                  class="text-sm text-gray-500"
+                >
+                  Select an earlier revision to inspect its metadata.
+                </p>
+              </div>
+
+              <section class="space-y-2">
+                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">
+                  Playback sources
+                </h4>
+                <dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
+                  <div>
+                    <dt class="font-semibold text-gray-300">Hosted URL</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                  <div>
+                    <dt class="font-semibold text-gray-300">Magnet</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                </dl>
+              </section>
+
+              <section class="space-y-2">
+                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">
+                  NIP-71 event metadata
+                </h4>
+                <dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
+                  <div>
+                    <dt class="font-semibold text-gray-300">Kind</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                  <div>
+                    <dt class="font-semibold text-gray-300">Duration</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                  <div class="sm:col-span-2">
+                    <dt class="font-semibold text-gray-300">Summary</dt>
+                    <dd class="mt-1 text-gray-500">Awaiting selection</dd>
+                  </div>
+                </dl>
+              </section>
+
+              <section class="space-y-2">
+                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">
+                  NIP-71 media metadata
+                </h4>
+                <p class="text-xs text-gray-500">
+                  Media variants, text tracks, chapters, hashtags, participants, and references will appear once a revision is selected.
+                </p>
+              </section>
             </div>
           </section>
         </div>
diff --git a/components/sidebar.html b/components/sidebar.html
index dd133e69..c1200a34 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -5,150 +5,174 @@
 -->
 <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 fade-in fade-in-delay-100"
+  class="fade-in fade-in-delay-100 sidebar-collapsed"
+  data-state="collapsed"
 >
-  <div class="flex flex-col h-full">
-    <!-- Top Navigation Links -->
-    <div class="flex-1 overflow-y-auto px-4">
-      <div class="bg-gray-800 rounded-lg shadow-md mt-4 p-4">
-        <nav class="flex flex-col space-y-2">
-          <a
-            href="#view=most-recent-videos"
-            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+  <div class="sidebar__inner">
+    <div class="sidebar-scroll">
+      <!-- Primary navigation -->
+      <section class="sidebar-panel sidebar-panel--primary">
+        <div class="sidebar-panel__header">
+          <button
+            id="sidebarCollapseToggle"
+            type="button"
+            class="sidebar-collapse-toggle"
+            aria-controls="sidebar"
+            aria-expanded="false"
+            aria-label="Expand sidebar"
+            title="Expand sidebar"
           >
+            <svg
+              data-sidebar-chevron
+              class="sidebar-collapse-toggle__icon sidebar-toggle-icon--rotated"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M10 6l6 6-6 6" />
+            </svg>
+          </button>
+        </div>
+        <nav class="sidebar-nav" aria-label="Primary">
+          <a href="#view=most-recent-videos" class="sidebar-nav-link" title="Recent">
             <img
               src="assets/svg/recent-icon.svg"
-              alt="Recent"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
             />
             <span class="sidebar-text">Recent</span>
           </a>
-          <a
-            href="#view=explore"
-            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
-          >
+          <a href="#view=explore" class="sidebar-nav-link" title="Explore">
             <img
               src="assets/svg/explore-icon.svg"
-              alt="Explore"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
             />
             <span class="sidebar-text">Explore</span>
           </a>
-          <a
-            href="#view=history"
-            class="flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
-          >
+          <a href="#view=history" class="sidebar-nav-link" title="History">
             <img
               src="assets/svg/history-icon.svg"
-              alt="History"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
             />
             <span class="sidebar-text">History</span>
           </a>
           <a
             id="subscriptionsLink"
             href="#view=subscriptions"
-            class="hidden flex items-center py-2 px-4 hover:bg-gray-700 rounded font-semibold"
+            class="sidebar-nav-link hidden"
+            title="Subscriptions"
           >
             <img
               src="assets/svg/subscriptions-icon.svg"
-              alt="Subscriptions"
-              class="w-6 h-6 mr-3 flex-shrink-0"
+              alt=""
+              aria-hidden="true"
+              class="sidebar-icon"
             />
             <span class="sidebar-text">Subscriptions</span>
           </a>
         </nav>
-      </div>
-    </div>
+      </section>
 
-    <!-- Footer Links Toggle -->
-    <div class="md:mt-auto">
-      <div class="p-4">
+      <!-- Footer Links Toggle -->
+      <footer class="sidebar-footer" data-footer-state="collapsed">
         <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"
+          class="sidebar-dropup-trigger"
           aria-expanded="false"
           aria-controls="footerLinksContainer"
         >
-          <!-- Arrow on the left side -->
+          <img
+            src="assets/svg/ellipsis.svg"
+            alt=""
+            aria-hidden="true"
+            class="sidebar-icon sidebar-dropup-trigger__glyph"
+          />
+          <span id="footerDropdownText" class="sidebar-text">More</span>
           <svg
             id="footerDropdownIcon"
-            class="w-4 h-4 mr-2 transform transition-transform duration-300"
+            class="sidebar-dropup-trigger__chevron"
+            aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
-            fill="none"
             viewBox="0 0 24 24"
+            fill="none"
             stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M19 9l-7 7-7-7"
-            />
-
+            <path d="M6 9l6 6 6-6" />
           </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"
-            >
+        <!-- Footer Links Container -->
+        <div
+          id="footerLinksContainer"
+          class="sidebar-dropup-panel"
+          aria-hidden="true"
+          data-state="collapsed"
+        >
+          <nav class="sidebar-dropup-panel__inner" aria-label="Secondary">
+            <a href="#view=about" class="sidebar-nav-link sidebar-nav-link--sub" title="About">
               <img
                 src="assets/svg/about-icon.svg"
-                alt="About"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <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"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="Community Guidelines"
             >
               <img
                 src="assets/svg/guidelines-icon.svg"
-                alt="Guidelines"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <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"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="Getting Started"
             >
               <img
                 src="assets/svg/getting-started-icon.svg"
-                alt="Getting Started"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <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"
-            >
+            <a href="#view=roadmap" class="sidebar-nav-link sidebar-nav-link--sub" title="Roadmap">
               <img
                 src="assets/svg/roadmap-icon.svg"
-                alt="Roadmap"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">Roadmap</span>
             </a>
-            <a
-              href="#view=blog"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-            >
+            <a href="#view=blog" class="sidebar-nav-link sidebar-nav-link--sub" title="Blog">
               <img
                 src="assets/svg/blog-icon.svg"
-                alt="Blog"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">Blog</span>
             </a>
@@ -156,12 +180,14 @@
               href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="Nostr"
             >
               <img
                 src="assets/svg/nostr-icon.svg"
-                alt="Nostr"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">Nostr</span>
             </a>
@@ -169,12 +195,14 @@
               href="https://github.com/PR0M3TH3AN/bitvid"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="GitHub"
             >
               <img
                 src="assets/svg/github-icon.svg"
-                alt="GitHub"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">GitHub</span>
             </a>
@@ -182,12 +210,14 @@
               href="torrent/beacon.html"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="βeacon"
             >
               <img
                 src="assets/svg/beacon-icon.svg"
-                alt="βeacon"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">βeacon</span>
             </a>
@@ -195,34 +225,32 @@
               href="https://beta.bitvid.network/"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="Beta"
             >
               <img
                 src="assets/svg/beta-icon.svg"
-                alt="Beta"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">Beta</span>
             </a>
-            <a
-              href="#view=links"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-            >
+            <a href="#view=links" class="sidebar-nav-link sidebar-nav-link--sub" title="Links">
               <img
                 src="assets/svg/links-icon.svg"
-                alt="Links"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">Links</span>
             </a>
-            <a
-              href="#view=ipns"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-            >
+            <a href="#view=ipns" class="sidebar-nav-link sidebar-nav-link--sub" title="IPNS">
               <img
                 src="assets/svg/ipns-icon.svg"
-                alt="IPNS"
-                class="w-5 h-5 mr-3"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
               />
               <span class="sidebar-text">IPNS</span>
             </a>
@@ -230,36 +258,20 @@
               href="https://bitvid.network/"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+              class="sidebar-nav-link sidebar-nav-link--sub"
+              title="DNS"
             >
-              <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
+              <img
+                src="assets/svg/dns-icon.svg"
+                alt=""
+                aria-hidden="true"
+                class="sidebar-icon"
+              />
               <span class="sidebar-text">DNS</span>
             </a>
           </nav>
         </div>
-      </div>
+      </footer>
     </div>
   </div>
-
-  <script>
-    (function () {
-      var btn = document.getElementById("footerDropdownButton");
-      var footerLinks = document.getElementById("footerLinksContainer");
-      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 (textSpan) {
-            textSpan.textContent = isHidden ? "More" : "Less";
-          }
-          if (icon) {
-            icon.classList.toggle("rotate-180", !isHidden);
-          }
-        });
-      }
-    })();
-  </script>
 </aside>
diff --git a/components/upload-modal.html b/components/upload-modal.html
index 17aa8613..d44f7976 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -77,137 +77,669 @@
         </div>
 
         <div id="customUploadSection">
-          <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"
-              class="block text-sm font-medium text-gray-200"
-              >Title</label
-            >
-            <input
-              type="text"
-              id="uploadTitle"
-              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"
-            />
-          </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 (optional if URL provided)</label
-            >
-            <input
-              type="text"
-              id="uploadMagnet"
-              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.
+          <form id="uploadForm" class="space-y-6">
+            <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>
-          <div>
-            <label
-              for="uploadThumbnail"
-              class="block text-sm font-medium text-gray-200"
-              >Thumbnail URL (optional)</label
-            >
-            <input
-              type="url"
-              id="uploadThumbnail"
-              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"
-            />
-          </div>
-
-          <div>
-            <label
-              for="uploadDescription"
-              class="block text-sm font-medium text-gray-200"
-              >Description (optional)</label
-            >
-            <textarea
-              id="uploadDescription"
-              rows="3"
-              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"
-            ></textarea>
-          </div>
-
-          <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
-            <input
-              type="checkbox"
-              id="uploadEnableComments"
-              class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
-              checked
-            />
             <div>
-              <label for="uploadEnableComments" class="text-sm font-medium text-gray-200"
-                >Enable comments</label
+              <label
+                for="uploadTitle"
+                class="block text-sm font-medium text-gray-200"
+                >Title</label
               >
+              <input
+                type="text"
+                id="uploadTitle"
+                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"
+              />
+            </div>
+
+            <div class="space-y-4 rounded-lg border border-gray-800 bg-black/30 p-4" id="nip71EventDetails" data-nip71-section="event-details">
+              <fieldset id="nip71KindFieldset" class="space-y-2" data-nip71-fieldset="kind">
+                <legend class="text-sm font-semibold text-gray-200">NIP-71 event type</legend>
+                <p class="text-xs text-gray-400">
+                  Choose the video format. <span class="font-medium text-gray-300">Kind 21</span> is a full video, while
+                  <span class="font-medium text-gray-300">Kind 22</span> is a short.
+                </p>
+                <div class="flex flex-wrap gap-4" role="radiogroup" aria-labelledby="nip71KindFieldset">
+                  <label class="flex items-center gap-2 text-sm text-gray-200">
+                    <input
+                      type="radio"
+                      name="nip71Kind"
+                      id="nip71KindLong"
+                      value="21"
+                      checked
+                      data-nip71-input="kind"
+                      class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                    />
+                    Normal video (kind 21)
+                  </label>
+                  <label class="flex items-center gap-2 text-sm text-gray-200">
+                    <input
+                      type="radio"
+                      name="nip71Kind"
+                      id="nip71KindShort"
+                      value="22"
+                      data-nip71-input="kind"
+                      class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                    />
+                    Short video (kind 22)
+                  </label>
+                </div>
+              </fieldset>
+
+              <div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
+                <div>
+                  <label for="nip71PublishedAt" class="block text-sm font-medium text-gray-200">Published at</label>
+                  <input
+                    type="datetime-local"
+                    id="nip71PublishedAt"
+                    data-nip71-input="published_at"
+                    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"
+                  />
+                  <p class="mt-1 text-xs text-gray-400">Set the canonical publish time for cross-client ordering.</p>
+                </div>
+                <div>
+                  <label for="nip71AltText" class="block text-sm font-medium text-gray-200">Alt text</label>
+                  <input
+                    type="text"
+                    id="nip71AltText"
+                    data-nip71-input="alt"
+                    placeholder="Describe the visuals for screen readers"
+                    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"
+                  />
+                  <p class="mt-1 text-xs text-gray-400">Plain-language fallback shown when the media cannot load.</p>
+                </div>
+                <div>
+                  <label for="nip71Duration" class="block text-sm font-medium text-gray-200">Duration (seconds)</label>
+                  <input
+                    type="number"
+                    id="nip71Duration"
+                    min="0"
+                    step="1"
+                    data-nip71-input="duration"
+                    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"
+                  />
+                  <p class="mt-1 text-xs text-gray-400">Provide the runtime in whole seconds for timeline scrubbing.</p>
+                </div>
+                <div>
+                  <label for="nip71ContentWarning" class="block text-sm font-medium text-gray-200">Content warning</label>
+                  <input
+                    type="text"
+                    id="nip71ContentWarning"
+                    data-nip71-input="content-warning"
+                    placeholder="e.g., Flashing lights"
+                    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"
+                  />
+                  <p class="mt-1 text-xs text-gray-400">Leave blank if the video is safe for all audiences.</p>
+                </div>
+              </div>
+
+              <div>
+                <label for="nip71Summary" class="block text-sm font-medium text-gray-200">Summary</label>
+                <textarea
+                  id="nip71Summary"
+                  rows="3"
+                  data-nip71-input="summary"
+                  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="Short synopsis used as the Nostr content field"
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-400">This becomes the event content. Keep it concise for Nostr readers.</p>
+              </div>
+            </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 (optional if URL provided)</label
+              >
+              <input
+                type="text"
+                id="uploadMagnet"
+                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">
-                Keep this on to let viewers discuss the video once comment threads launch.
+                Provide a hosted URL for instant playback. Add a magnet for P2P
+                cost control.
               </p>
             </div>
-          </div>
-          <!--
-          <div class="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="uploadIsPrivate"
-              class="form-checkbox h-5 w-5 text-blue-500"
-            />
-            <span class="text-sm font-medium text-gray-200"
-              >Private Listing (Encrypt Magnet)</span
+            <div>
+              <label
+                for="uploadThumbnail"
+                class="block text-sm font-medium text-gray-200"
+                >Thumbnail URL (optional)</label
+              >
+              <input
+                type="url"
+                id="uploadThumbnail"
+                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"
+              />
+            </div>
+
+            <div>
+              <label
+                for="uploadDescription"
+                class="block text-sm font-medium text-gray-200"
+                >Legacy description (optional)</label
+              >
+              <textarea
+                id="uploadDescription"
+                rows="3"
+                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"
+              ></textarea>
+              <p class="mt-1 text-xs text-gray-400">Kept for older clients that rely on the legacy description tag.</p>
+            </div>
+
+            <fieldset
+              id="nip71TagsFieldset"
+              class="space-y-6 rounded-lg border border-gray-800 bg-black/30 p-4"
+              data-nip71-section="tags"
             >
-          </div>
-          -->
-          <button
-            type="submit"
-            class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-          >
-            Publish
-          </button>
-        </form>
+              <legend class="relative text-sm font-semibold text-gray-200">
+                <span class="inline-block -ml-2 rounded px-2 bg-black/30">NIP-71 tags</span>
+              </legend>
+              <p class="text-xs text-gray-400">
+                Use the controls below to describe media variants, captions, chapters, participants, and references.
+              </p>
+
+              <section class="space-y-4" aria-labelledby="nip71ImetaLabel" data-nip71-repeater="imeta">
+                <div class="flex items-center justify-between">
+                  <h3 id="nip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    data-nip71-add="imeta"
+                    aria-describedby="nip71ImetaHelp"
+                  >
+                    Add variant
+                  </button>
+                </div>
+                <p id="nip71ImetaHelp" class="text-xs text-gray-400">
+                  Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
+                  <code>image</code>, <code>fallback</code>, or <code>service</code> values.
+                </p>
+                <div id="nip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
+                <template id="nip71ImetaTemplate" data-nip71-template="imeta">
+                  <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="imeta">
+                    <div class="grid gap-3 md:grid-cols-2">
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">
+                          MIME type (<code>m</code>)
+                        </label>
+                        <input
+                          type="text"
+                          data-nip71-field="m"
+                          placeholder="video/mp4"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">
+                          Pixel dimensions (<code>dim</code>)
+                        </label>
+                        <input
+                          type="text"
+                          data-nip71-field="dim"
+                          placeholder="1920x1080"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">
+                          Streaming URL (<code>url</code>)
+                        </label>
+                        <input
+                          type="url"
+                          data-nip71-field="url"
+                          placeholder="https://cdn.example.com/variant.m3u8"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">
+                          Magnet (<code>x</code>)
+                        </label>
+                        <input
+                          type="text"
+                          data-nip71-field="x"
+                          placeholder="magnet:?xt=urn:btih:..."
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
+                      </div>
+                    </div>
+
+                    <div class="space-y-3" data-nip71-nested="image">
+                      <div class="flex items-center justify-between">
+                        <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                          data-nip71-nested-add="image"
+                        >
+                          Add image URL
+                        </button>
+                      </div>
+                      <div class="space-y-2" data-nip71-nested-list="image"></div>
+                      <template data-nip71-nested-template="image">
+                        <div class="flex items-center gap-2" data-nip71-nested-entry="image">
+                          <input
+                            type="url"
+                            placeholder="https://cdn.example.com/poster.jpg"
+                            data-nip71-nested-field="image"
+                            class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          />
+                          <button
+                            type="button"
+                            class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                            data-nip71-remove="nested"
+                            aria-label="Remove image URL"
+                          >
+                            Remove
+                          </button>
+                        </div>
+                      </template>
+                    </div>
+
+                    <div class="space-y-3" data-nip71-nested="fallback">
+                      <div class="flex items-center justify-between">
+                        <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                          data-nip71-nested-add="fallback"
+                        >
+                          Add fallback
+                        </button>
+                      </div>
+                      <div class="space-y-2" data-nip71-nested-list="fallback"></div>
+                      <template data-nip71-nested-template="fallback">
+                        <div class="flex items-center gap-2" data-nip71-nested-entry="fallback">
+                          <input
+                            type="url"
+                            placeholder="https://cdn.backup.net/video.mp4"
+                            data-nip71-nested-field="fallback"
+                            class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          />
+                          <button
+                            type="button"
+                            class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                            data-nip71-remove="nested"
+                            aria-label="Remove fallback URL"
+                          >
+                            Remove
+                          </button>
+                        </div>
+                      </template>
+                    </div>
+
+                    <div class="space-y-3" data-nip71-nested="service">
+                      <div class="flex items-center justify-between">
+                        <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                          data-nip71-nested-add="service"
+                        >
+                          Add service hint
+                        </button>
+                      </div>
+                      <div class="space-y-2" data-nip71-nested-list="service"></div>
+                      <template data-nip71-nested-template="service">
+                        <div class="flex items-center gap-2" data-nip71-nested-entry="service">
+                          <input
+                            type="text"
+                            placeholder="streaming-provider-id"
+                            data-nip71-nested-field="service"
+                            class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          />
+                          <button
+                            type="button"
+                            class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                            data-nip71-remove="nested"
+                            aria-label="Remove service hint"
+                          >
+                            Remove
+                          </button>
+                        </div>
+                      </template>
+                    </div>
+
+                    <button
+                      type="button"
+                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      data-nip71-remove="imeta"
+                    >
+                      Remove variant
+                    </button>
+                  </article>
+                </template>
+              </section>
+
+              <section class="space-y-4" aria-labelledby="nip71TextTracksLabel" data-nip71-repeater="text-track">
+                <div class="flex items-center justify-between">
+                  <h3 id="nip71TextTracksLabel" class="text-sm font-medium text-gray-200">Caption &amp; subtitle tracks (text-track)</h3>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    data-nip71-add="text-track"
+                    aria-describedby="nip71TextTracksHelp"
+                  >
+                    Add track
+                  </button>
+                </div>
+                <p id="nip71TextTracksHelp" class="text-xs text-gray-400">
+                  Point to VTT/SRT caption files and optionally declare the language code (BCP-47).
+                </p>
+                <div id="nip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
+                <template id="nip71TextTrackTemplate" data-nip71-template="text-track">
+                  <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="text-track">
+                    <div class="grid gap-3 md:grid-cols-3">
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">Resource URL</label>
+                        <input
+                          type="url"
+                          data-nip71-field="url"
+                          placeholder="https://cdn.example.com/captions.en.vtt"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Direct link to the caption file.</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">Track type</label>
+                        <input
+                          type="text"
+                          data-nip71-field="type"
+                          placeholder="subtitles"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Use values like captions, subtitles, or descriptions.</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">Language (optional)</label>
+                        <input
+                          type="text"
+                          data-nip71-field="language"
+                          placeholder="en-US"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">BCP-47 locale code.</p>
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      data-nip71-remove="text-track"
+                    >
+                      Remove track
+                    </button>
+                  </article>
+                </template>
+              </section>
+
+              <section class="space-y-4" aria-labelledby="nip71SegmentsLabel" data-nip71-repeater="segment">
+                <div class="flex items-center justify-between">
+                  <h3 id="nip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters &amp; segments (segment)</h3>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    data-nip71-add="segment"
+                    aria-describedby="nip71SegmentsHelp"
+                  >
+                    Add segment
+                  </button>
+                </div>
+                <p id="nip71SegmentsHelp" class="text-xs text-gray-400">
+                  Outline the timeline using HH:MM:SS timestamps. Thumbnail URLs are optional.
+                </p>
+                <div id="nip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
+                <template id="nip71SegmentTemplate" data-nip71-template="segment">
+                  <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="segment">
+                    <div class="grid gap-3 md:grid-cols-4">
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">Start</label>
+                        <input
+                          type="text"
+                          data-nip71-field="start"
+                          placeholder="00:00:00"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">HH:MM:SS</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">End</label>
+                        <input
+                          type="text"
+                          data-nip71-field="end"
+                          placeholder="00:03:30"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Leave blank for open-ended segments.</p>
+                      </div>
+                      <div class="md:col-span-2">
+                        <label class="block text-xs font-medium text-gray-300">Chapter title</label>
+                        <input
+                          type="text"
+                          data-nip71-field="title"
+                          placeholder="Introduction"
+                          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"
+                        />
+                      </div>
+                      <div class="md:col-span-2">
+                        <label class="block text-xs font-medium text-gray-300">Thumbnail URL</label>
+                        <input
+                          type="url"
+                          data-nip71-field="thumbnail"
+                          placeholder="https://cdn.example.com/segment.jpg"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Optional still image for this moment.</p>
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      data-nip71-remove="segment"
+                    >
+                      Remove segment
+                    </button>
+                  </article>
+                </template>
+              </section>
+
+              <section class="space-y-4" aria-labelledby="nip71HashtagsLabel" data-nip71-repeater="t">
+                <div class="flex items-center justify-between">
+                  <h3 id="nip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    data-nip71-add="t"
+                  >
+                    Add hashtag
+                  </button>
+                </div>
+                <p class="text-xs text-gray-400">
+                  Enter keywords; leading <code>#</code> characters are stripped automatically when saving.
+                </p>
+                <div id="nip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
+                <template id="nip71HashtagTemplate" data-nip71-template="t">
+                  <div class="flex items-center gap-2" data-nip71-entry="t">
+                    <input
+                      type="text"
+                      data-nip71-field="value"
+                      placeholder="#nostr"
+                      class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    />
+                    <button
+                      type="button"
+                      class="rounded border border-red-500/50 px-2 py-1 text-[11px] text-red-300 hover:border-red-400 hover:text-red-200"
+                      data-nip71-remove="t"
+                      aria-label="Remove hashtag"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </template>
+              </section>
+
+              <section class="space-y-4" aria-labelledby="nip71ParticipantsLabel" data-nip71-repeater="p">
+                <div class="flex items-center justify-between">
+                  <h3 id="nip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    data-nip71-add="p"
+                  >
+                    Add participant
+                  </button>
+                </div>
+                <p class="text-xs text-gray-400">Paste the participant npub or hex pubkey. Optionally provide a preferred relay URL.</p>
+                <div id="nip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
+                <template id="nip71ParticipantTemplate" data-nip71-template="p">
+                  <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="p">
+                    <div class="grid gap-3 md:grid-cols-2">
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">Pubkey</label>
+                        <input
+                          type="text"
+                          data-nip71-field="pubkey"
+                          placeholder="npub1..."
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Accepts npub or hex.</p>
+                      </div>
+                      <div>
+                        <label class="block text-xs font-medium text-gray-300">Relay URL (optional)</label>
+                        <input
+                          type="url"
+                          data-nip71-field="relay"
+                          placeholder="wss://relay.example.com"
+                          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"
+                        />
+                        <p class="mt-1 text-[11px] text-gray-500">Relay hint for discovering the participant.</p>
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      data-nip71-remove="p"
+                    >
+                      Remove participant
+                    </button>
+                  </article>
+                </template>
+              </section>
+
+              <section class="space-y-4" aria-labelledby="nip71ReferencesLabel" data-nip71-repeater="r">
+                <div class="flex items-center justify-between">
+                  <h3 id="nip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    data-nip71-add="r"
+                  >
+                    Add reference
+                  </button>
+                </div>
+                <p class="text-xs text-gray-400">Link to transcripts, source repositories, or related resources.</p>
+                <div id="nip71ReferenceList" class="space-y-2" data-nip71-list="r"></div>
+                <template id="nip71ReferenceTemplate" data-nip71-template="r">
+                  <div class="flex items-center gap-2" data-nip71-entry="r">
+                    <input
+                      type="url"
+                      data-nip71-field="url"
+                      placeholder="https://example.com/article"
+                      class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    />
+                    <button
+                      type="button"
+                      class="rounded border border-red-500/50 px-2 py-1 text-[11px] text-red-300 hover:border-red-400 hover:text-red-200"
+                      data-nip71-remove="r"
+                      aria-label="Remove reference"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </template>
+              </section>
+            </fieldset>
+
+            <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
+              <input
+                type="checkbox"
+                id="uploadEnableComments"
+                class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                checked
+              />
+              <div>
+                <label for="uploadEnableComments" class="text-sm font-medium text-gray-200"
+                  >Enable comments</label
+                >
+                <p class="mt-1 text-xs text-gray-400">
+                  Keep this on to let viewers discuss the video once comment threads launch.
+                </p>
+              </div>
+            </div>
+            <!--
+            <div class="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                id="uploadIsPrivate"
+                class="form-checkbox h-5 w-5 text-blue-500"
+              />
+              <span class="text-sm font-medium text-gray-200"
+                >Private Listing (Hide from shared grids)</span
+              >
+            </div>
+            -->
+            <button
+              type="submit"
+              class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              Publish
+            </button>
+          </form>
         </div>
 
         <div id="cloudflareUploadSection" class="hidden">
@@ -389,6 +921,119 @@
                     class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
+                <div
+                  class="space-y-4 rounded-lg border border-gray-800 bg-black/30 p-4"
+                  id="cloudflareNip71EventDetails"
+                  data-nip71-section="event-details"
+                >
+                  <fieldset
+                    id="cloudflareNip71KindFieldset"
+                    class="space-y-2"
+                    data-nip71-fieldset="kind"
+                  >
+                    <legend class="text-sm font-semibold text-gray-200">
+                      NIP-71 event type
+                    </legend>
+                    <p class="text-xs text-gray-400">
+                      Choose the video format. <span class="font-medium text-gray-300">Kind 21</span> is a full video, while
+                      <span class="font-medium text-gray-300">Kind 22</span> is a short.
+                    </p>
+                    <div
+                      class="flex flex-wrap gap-4"
+                      role="radiogroup"
+                      aria-labelledby="cloudflareNip71KindFieldset"
+                    >
+                      <label class="flex items-center gap-2 text-sm text-gray-200">
+                        <input
+                          type="radio"
+                          name="cloudflareNip71Kind"
+                          id="cloudflareNip71KindLong"
+                          value="21"
+                          checked
+                          data-nip71-input="kind"
+                          class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                        />
+                        Normal video (kind 21)
+                      </label>
+                      <label class="flex items-center gap-2 text-sm text-gray-200">
+                        <input
+                          type="radio"
+                          name="cloudflareNip71Kind"
+                          id="cloudflareNip71KindShort"
+                          value="22"
+                          data-nip71-input="kind"
+                          class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                        />
+                        Short video (kind 22)
+                      </label>
+                    </div>
+                  </fieldset>
+
+                  <div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
+                    <div>
+                      <label for="cloudflareNip71PublishedAt" class="block text-sm font-medium text-gray-200">
+                        Published at
+                      </label>
+                      <input
+                        type="datetime-local"
+                        id="cloudflareNip71PublishedAt"
+                        data-nip71-input="published_at"
+                        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"
+                      />
+                      <p class="mt-1 text-xs text-gray-400">Set the canonical publish time for cross-client ordering.</p>
+                    </div>
+                    <div>
+                      <label for="cloudflareNip71AltText" class="block text-sm font-medium text-gray-200">Alt text</label>
+                      <input
+                        type="text"
+                        id="cloudflareNip71AltText"
+                        data-nip71-input="alt"
+                        placeholder="Describe the visuals for screen readers"
+                        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"
+                      />
+                      <p class="mt-1 text-xs text-gray-400">Plain-language fallback shown when the media cannot load.</p>
+                    </div>
+                    <div>
+                      <label for="cloudflareNip71Duration" class="block text-sm font-medium text-gray-200">
+                        Duration (seconds)
+                      </label>
+                      <input
+                        type="number"
+                        id="cloudflareNip71Duration"
+                        min="0"
+                        step="1"
+                        data-nip71-input="duration"
+                        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"
+                      />
+                      <p class="mt-1 text-xs text-gray-400">Provide the runtime in whole seconds for timeline scrubbing.</p>
+                    </div>
+                    <div>
+                      <label for="cloudflareNip71ContentWarning" class="block text-sm font-medium text-gray-200">
+                        Content warning
+                      </label>
+                      <input
+                        type="text"
+                        id="cloudflareNip71ContentWarning"
+                        data-nip71-input="content-warning"
+                        placeholder="e.g., Flashing lights"
+                        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"
+                      />
+                      <p class="mt-1 text-xs text-gray-400">Leave blank if the video is safe for all audiences.</p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label for="cloudflareNip71Summary" class="block text-sm font-medium text-gray-200">Summary</label>
+                    <textarea
+                      id="cloudflareNip71Summary"
+                      rows="3"
+                      data-nip71-input="summary"
+                      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="Short synopsis used as the Nostr content field"
+                    ></textarea>
+                    <p class="mt-1 text-xs text-gray-400">This becomes the event content. Keep it concise for Nostr readers.</p>
+                  </div>
+                </div>
                 <div>
                   <label for="cloudflareDescription" class="block text-sm font-medium text-gray-200"
                     >Description (optional)</label
@@ -436,6 +1081,304 @@
                     class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
+                <fieldset
+                  id="cloudflareNip71TagsFieldset"
+                  class="space-y-6 rounded-lg border border-gray-800 bg-black/30 p-4"
+                  data-nip71-section="tags"
+                >
+                  <legend class="text-sm font-semibold text-gray-200">NIP-71 tags</legend>
+                  <p class="text-xs text-gray-400">
+                    Use the controls below to describe media variants, captions, chapters, participants, and references.
+                  </p>
+
+                  <section class="space-y-4" aria-labelledby="cloudflareNip71ImetaLabel" data-nip71-repeater="imeta">
+                    <div class="flex items-center justify-between">
+                      <h3 id="cloudflareNip71ImetaLabel" class="text-sm font-medium text-gray-200">
+                        Image metadata (imeta)
+                      </h3>
+                      <button
+                        type="button"
+                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-add="imeta"
+                        aria-describedby="cloudflareNip71ImetaHelp"
+                      >
+                        Add variant
+                      </button>
+                    </div>
+                    <p id="cloudflareNip71ImetaHelp" class="text-xs text-gray-400">
+                      Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
+                      <code>image</code>, <code>fallback</code>, or <code>service</code> values.
+                    </p>
+                    <div
+                      id="cloudflareNip71ImetaList"
+                      class="space-y-4"
+                      data-nip71-list="imeta"
+                    >
+                      <article
+                        class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4"
+                        data-nip71-entry="imeta"
+                        data-nip71-primary="true"
+                      >
+                        <div class="grid gap-3 md:grid-cols-2">
+                          <div>
+                            <label class="block text-xs font-medium text-gray-300">
+                              MIME type (<code>m</code>)
+                            </label>
+                            <input
+                              type="text"
+                              data-nip71-field="m"
+                              placeholder="Auto-filled after upload (e.g., video/mp4)"
+                              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"
+                            />
+                            <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
+                          </div>
+                          <div>
+                            <label class="block text-xs font-medium text-gray-300">
+                              Pixel dimensions (<code>dim</code>)
+                            </label>
+                            <input
+                              type="text"
+                              data-nip71-field="dim"
+                              placeholder="Auto-filled if detected (e.g., 1920x1080)"
+                              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"
+                            />
+                            <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
+                          </div>
+                          <div>
+                            <label class="block text-xs font-medium text-gray-300">
+                              Streaming URL (<code>url</code>)
+                            </label>
+                            <input
+                              type="url"
+                              data-nip71-field="url"
+                              placeholder="Auto-filled after upload with the public HTTPS 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"
+                            />
+                            <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
+                          </div>
+                          <div>
+                            <label class="block text-xs font-medium text-gray-300">
+                              Magnet (<code>x</code>)
+                            </label>
+                            <input
+                              type="text"
+                              data-nip71-field="x"
+                              placeholder="Optional magnet pointer if seeding via P2P"
+                              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"
+                            />
+                            <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
+                          </div>
+                        </div>
+
+                        <div class="space-y-3" data-nip71-nested="image">
+                          <div class="flex items-center justify-between">
+                            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
+                            <button
+                              type="button"
+                              class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                              data-nip71-nested-add="image"
+                            >
+                              Add image URL
+                            </button>
+                          </div>
+                          <div class="space-y-2" data-nip71-nested-list="image"></div>
+                          <template data-nip71-nested-template="image">
+                            <div class="flex items-center gap-2" data-nip71-nested-entry="image">
+                              <input
+                                type="url"
+                                placeholder="https://cdn.example.com/poster.jpg"
+                                data-nip71-nested-field="image"
+                                class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              />
+                              <button
+                                type="button"
+                                class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                                data-nip71-remove="nested"
+                                aria-label="Remove image URL"
+                              >
+                                Remove
+                              </button>
+                            </div>
+                          </template>
+                        </div>
+
+                        <div class="space-y-3" data-nip71-nested="fallback">
+                          <div class="flex items-center justify-between">
+                            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
+                            <button
+                              type="button"
+                              class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                              data-nip71-nested-add="fallback"
+                            >
+                              Add fallback
+                            </button>
+                          </div>
+                          <div class="space-y-2" data-nip71-nested-list="fallback"></div>
+                          <template data-nip71-nested-template="fallback">
+                            <div class="flex items-center gap-2" data-nip71-nested-entry="fallback">
+                              <input
+                                type="url"
+                                placeholder="https://cdn.backup.net/video.mp4"
+                                data-nip71-nested-field="fallback"
+                                class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              />
+                              <button
+                                type="button"
+                                class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                                data-nip71-remove="nested"
+                                aria-label="Remove fallback URL"
+                              >
+                                Remove
+                              </button>
+                            </div>
+                          </template>
+                        </div>
+
+                        <div class="space-y-3" data-nip71-nested="service">
+                          <div class="flex items-center justify-between">
+                            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
+                            <button
+                              type="button"
+                              class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                              data-nip71-nested-add="service"
+                            >
+                              Add service hint
+                            </button>
+                          </div>
+                          <div class="space-y-2" data-nip71-nested-list="service"></div>
+                          <template data-nip71-nested-template="service">
+                            <div class="flex items-center gap-2" data-nip71-nested-entry="service">
+                              <input
+                                type="text"
+                                placeholder="streaming-provider-id"
+                                data-nip71-nested-field="service"
+                                class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              />
+                              <button
+                                type="button"
+                                class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                                data-nip71-remove="nested"
+                                aria-label="Remove service hint"
+                              >
+                                Remove
+                              </button>
+                            </div>
+                          </template>
+                        </div>
+
+                        <button
+                          type="button"
+                          class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                          data-nip71-remove="imeta"
+                        >
+                          Remove variant
+                        </button>
+                      </article>
+                    </div>
+                  </section>
+
+                  <section
+                    class="space-y-4"
+                    aria-labelledby="cloudflareNip71TextTracksLabel"
+                    data-nip71-repeater="text-track"
+                  >
+                    <div class="flex items-center justify-between">
+                      <h3 id="cloudflareNip71TextTracksLabel" class="text-sm font-medium text-gray-200">
+                        Caption &amp; subtitle tracks (text-track)
+                      </h3>
+                      <button
+                        type="button"
+                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-add="text-track"
+                        aria-describedby="cloudflareNip71TextTracksHelp"
+                      >
+                        Add track
+                      </button>
+                    </div>
+                    <p id="cloudflareNip71TextTracksHelp" class="text-xs text-gray-400">
+                      Point to VTT/SRT caption files and optionally declare the language code (BCP-47).
+                    </p>
+                    <div id="cloudflareNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
+                  </section>
+
+                  <section class="space-y-4" aria-labelledby="cloudflareNip71SegmentsLabel" data-nip71-repeater="segment">
+                    <div class="flex items-center justify-between">
+                      <h3 id="cloudflareNip71SegmentsLabel" class="text-sm font-medium text-gray-200">
+                        Timeline segments (segment)
+                      </h3>
+                      <button
+                        type="button"
+                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-add="segment"
+                        aria-describedby="cloudflareNip71SegmentsHelp"
+                      >
+                        Add chapter
+                      </button>
+                    </div>
+                    <p id="cloudflareNip71SegmentsHelp" class="text-xs text-gray-400">
+                      Define chapters by timestamp so clients can build jump lists.
+                    </p>
+                    <div id="cloudflareNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
+                  </section>
+
+                  <section class="space-y-4" aria-labelledby="cloudflareNip71HashtagsLabel" data-nip71-repeater="t">
+                    <div class="flex items-center justify-between">
+                      <h3 id="cloudflareNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (t)</h3>
+                      <button
+                        type="button"
+                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-add="t"
+                        aria-describedby="cloudflareNip71HashtagsHelp"
+                      >
+                        Add hashtag
+                      </button>
+                    </div>
+                    <p id="cloudflareNip71HashtagsHelp" class="text-xs text-gray-400">
+                      Label the video with keywords to boost discovery across clients.
+                    </p>
+                    <div id="cloudflareNip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
+                  </section>
+
+                  <section class="space-y-4" aria-labelledby="cloudflareNip71ParticipantsLabel" data-nip71-repeater="p">
+                    <div class="flex items-center justify-between">
+                      <h3 id="cloudflareNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">
+                        Participants (p)
+                      </h3>
+                      <button
+                        type="button"
+                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-add="p"
+                        aria-describedby="cloudflareNip71ParticipantsHelp"
+                      >
+                        Add participant
+                      </button>
+                    </div>
+                    <p id="cloudflareNip71ParticipantsHelp" class="text-xs text-gray-400">
+                      Credit guests, hosts, or collaborators with their npubs and preferred relay hints.
+                    </p>
+                    <div id="cloudflareNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
+                  </section>
+
+                  <section class="space-y-4" aria-labelledby="cloudflareNip71ReferencesLabel" data-nip71-repeater="r">
+                    <div class="flex items-center justify-between">
+                      <h3 id="cloudflareNip71ReferencesLabel" class="text-sm font-medium text-gray-200">
+                        References (r)
+                      </h3>
+                      <button
+                        type="button"
+                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-add="r"
+                        aria-describedby="cloudflareNip71ReferencesHelp"
+                      >
+                        Add reference
+                      </button>
+                    </div>
+                    <p id="cloudflareNip71ReferencesHelp" class="text-xs text-gray-400">
+                      Link to companion articles, source material, or announcements that contextualize the upload.
+                    </p>
+                    <div id="cloudflareNip71ReferenceList" class="space-y-2" data-nip71-list="r"></div>
+                  </section>
+                </fieldset>
                 <div class="flex items-start gap-3 rounded-md border border-gray-800 bg-black/30 p-3">
                   <input
                     type="checkbox"
diff --git a/components/video-modal.html b/components/video-modal.html
index 5b63b7c3..af1a85ba 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -35,18 +35,124 @@
                 class="icon-image"
               />
             </button>
-            <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>
+            <div class="relative" data-modal-zap-wrapper>
+              <button
+                id="modalZapBtn"
+                type="button"
+                class="icon-button"
+                aria-label="Send a zap"
+                aria-haspopup="dialog"
+                aria-expanded="false"
+                aria-controls="modalZapDialog"
+              >
+                <img
+                  src="assets/svg/lightning-bolt.svg"
+                  alt="Zap"
+                  class="icon-image"
+                />
+              </button>
+              <div
+                id="modalZapDialog"
+                class="zap-popover hidden"
+                role="dialog"
+                aria-hidden="true"
+              >
+                <div
+                class="zap-popover__content w-72 max-w-[calc(100vw-2rem)] rounded-lg p-4 shadow-lg"
+                >
+                  <div class="mb-3 flex items-center justify-between gap-4">
+                    <h3
+                      class="text-xs font-semibold uppercase tracking-wide text-gray-300"
+                    >
+                      Send a zap
+                    </h3>
+                    <button
+                      type="button"
+                      id="modalZapCloseBtn"
+                      class="text-gray-400 transition-colors hover:text-gray-200"
+                      aria-label="Close zap dialog"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                  <p
+                    id="modalZapWalletPrompt"
+                    class="mb-3 hidden text-sm text-gray-200"
+                    aria-hidden="true"
+                  >
+                    Connect a wallet in
+                    <button
+                      type="button"
+                      id="modalZapWalletLink"
+                      class="font-semibold text-blue-300 underline decoration-dotted transition-colors hover:text-blue-200"
+                    >
+                      Wallet Connect settings
+                    </button>
+                    to send zaps.
+                  </p>
+                  <form id="modalZapForm" class="space-y-3">
+                    <div>
+                      <label
+                        for="modalZapAmountInput"
+                        class="mb-2 block text-xs font-semibold uppercase tracking-wide text-gray-300"
+                      >
+                        Zap amount (sats)
+                      </label>
+                      <input
+                        id="modalZapAmountInput"
+                        type="number"
+                        min="1"
+                        step="1"
+                        inputmode="numeric"
+                        class="w-full rounded border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                        placeholder="Enter sats"
+                      />
+                    </div>
+                    <div>
+                      <label
+                        for="modalZapCommentInput"
+                        class="mb-2 block text-xs font-semibold uppercase tracking-wide text-gray-300"
+                      >
+                        Comment (optional)
+                      </label>
+                      <textarea
+                        id="modalZapCommentInput"
+                        rows="2"
+                        maxlength="280"
+                        class="w-full resize-y rounded border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                        placeholder="Include a note with your zap"
+                      ></textarea>
+                    </div>
+                    <p
+                      id="modalZapSplitSummary"
+                      class="text-sm text-gray-300"
+                      aria-live="polite"
+                    >
+                      Enter an amount to view the split.
+                    </p>
+                    <p
+                      id="modalZapStatus"
+                      class="text-xs text-gray-400"
+                      role="status"
+                      aria-live="polite"
+                    ></p>
+                    <ul
+                      id="modalZapReceipts"
+                      class="space-y-2 text-xs text-gray-300"
+                    ></ul>
+                    <div class="flex items-center justify-end gap-2">
+                      <button
+                        type="submit"
+                        id="modalZapSendBtn"
+                        class="rounded bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      >
+                        Send
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
             <button id="shareBtn" class="icon-button">
               <img
                 src="assets/svg/share-video.svg"
@@ -90,6 +196,33 @@
                   >
                     Copy link
                   </button>
+                  <div
+                    class="px-4 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-400"
+                  >
+                    Boost on Nostr…
+                  </div>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="repost-event"
+                    data-context="modal"
+                  >
+                    Repost (kind 6)
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="mirror-video"
+                    data-context="modal"
+                  >
+                    Mirror (kind 1063)
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="ensure-presence"
+                    data-context="modal"
+                  >
+                    Rebroadcast
+                  </button>
+                  <div class="my-1 border-t border-gray-700 opacity-70"></div>
                   <button
                     class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                     data-action="blacklist-author"
@@ -131,10 +264,14 @@
 
         <!-- Video Timestamp -->
         <div
-          class="flex items-center justify-between text-sm text-gray-400 mb-4"
+          class="flex items-start justify-between text-sm text-gray-400 mb-4"
         >
-          <div class="flex items-center gap-2 modal-meta">
-            <span id="videoTimestamp">just now</span>
+          <div class="flex flex-wrap items-center gap-2 modal-meta">
+            <span id="videoTimestamp">Posted just now</span>
+            <span
+              id="videoEditedTimestamp"
+              class="hidden"
+            >Last edited just now</span>
             <span id="videoViewCount" class="modal-view-count">– views</span>
           </div>
           <div id="modalStatus" class="text-gray-300">
diff --git a/config/asset-version.js b/config/asset-version.js
new file mode 100644
index 00000000..a8e5cb8c
--- /dev/null
+++ b/config/asset-version.js
@@ -0,0 +1 @@
+export const ASSET_VERSION = "2024.10.29";
diff --git a/config/instance-config.js b/config/instance-config.js
index 6a1e86d4..3773da10 100644
--- a/config/instance-config.js
+++ b/config/instance-config.js
@@ -25,6 +25,67 @@
 export const ADMIN_SUPER_NPUB =
   "npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx";
 
+/**
+ * Canonical URL for the public BitVid site.
+ *
+ * Surfaces in admin outreach copy and moderation DMs so that recipients can
+ * quickly jump back to the primary destination. Update this if your
+ * deployment relies on a different canonical hostname.
+ */
+export const BITVID_WEBSITE_URL = "https://bitvid.network/";
+
+/**
+ * Default image included in automated moderation DMs.
+ *
+ * BitVid embeds this media asset at the top of notification messages so the
+ * payload renders with a recognizable preview. Provide a fully qualified URL
+ * that points to a hosted image accessible by the intended recipients.
+ */
+export const ADMIN_DM_IMAGE_URL =
+  "https://beta.bitvid.network/assets/jpg/video-thumbnail-fallback.jpg";
+
+/**
+ * Maximum satoshi value allowed when storing the default zap amount.
+ *
+ * Wallet settings clamp user input to this value before persistence to guard
+ * against accidental overpayment. Tune the ceiling to match your instance's
+ * risk tolerance.
+ */
+export const MAX_WALLET_DEFAULT_ZAP = 100000000;
+
+/**
+ * Percentage of every Lightning payment the platform retains as a fee.
+ *
+ * Accepts numbers between 0 and 100 (inclusive). Decimals are supported when
+ * you want to keep a fractional cut—e.g., `2.5` represents a 2.5% fee. The
+ * default of `0` disables the fee so creators receive the full payment.
+ */
+export const PLATFORM_FEE_PERCENT = 30;
+
+/**
+ * Lightning address to fall back to when authors omit their own `lud16`.
+ *
+ * Supply a string like `"tips@example.com"` to force a deployment-wide
+ * fallback Lightning address. When `PLATFORM_FEE_PERCENT` is greater than 0,
+ * this override also acts as the Lightning target for the platform’s split.
+ * Leave the value as `null` to respect the creator’s metadata and rely on the
+ * Super Admin profile publishing a `lud16` so BitVid still knows where to route
+ * fees when they are enabled.
+ */
+export const PLATFORM_LUD16_OVERRIDE = "adammalin@strike.me";
+
+/**
+ * Optional list of relays to seed new sessions with instead of the defaults.
+ *
+ * Provide WSS URLs (e.g., `"wss://relay.example.com"`). Leave the array empty
+ * to keep BitVid’s bundled defaults. Operators that need a custom bootstrap set
+ * should list the relays in priority order; entries later in the list are used
+ * as fallbacks when earlier relays fail.
+ */
+export const DEFAULT_RELAY_URLS_OVERRIDE = Object.freeze([
+  // "wss://relay.example.com",
+]);
+
 /**
  * Storage key used to persist whitelist-only mode in the browser.
  *
@@ -115,7 +176,7 @@ export const WATCH_HISTORY_BATCH_RESOLVE = true;
  * that page through histories in smaller slices can set a positive integer to
  * cap the resolver output so pagination and API responses stay aligned.
  */
-export const WATCH_HISTORY_BATCH_PAGE_SIZE = null;
+export const WATCH_HISTORY_BATCH_PAGE_SIZE = 10;
 
 /**
  * Maximum size of the JSON payload for each watch-history chunk, measured
@@ -177,3 +238,13 @@ export const VIEW_COUNT_BACKFILL_MAX_DAYS = 90;
  * fresher dashboards or raise it if your analytics traffic is heavy.
  */
 export const VIEW_COUNT_CACHE_TTL_MS = 5 * 60 * 1000;
+
+/**
+ * Cooldown window (in seconds) between manual "Rebroadcast" attempts.
+ *
+ * Rebroadcasting is an escape hatch for creators to nudge stale relays. A
+ * short cooldown keeps this safeguard from turning into an accidental DDoS.
+ * Five minutes provides enough breathing room for relays to catch up while
+ * still letting operators retry if a publish genuinely failed.
+ */
+export const ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS = 5 * 60;
diff --git a/config/validate-config.js b/config/validate-config.js
new file mode 100644
index 00000000..8d06219e
--- /dev/null
+++ b/config/validate-config.js
@@ -0,0 +1,85 @@
+// config/validate-config.js
+// -----------------------------------------------------------------------------
+// Runtime validation helpers for instance-level configuration
+// -----------------------------------------------------------------------------
+
+import {
+  ADMIN_SUPER_NPUB,
+  PLATFORM_FEE_PERCENT,
+  PLATFORM_LUD16_OVERRIDE,
+} from "./instance-config.js";
+
+function assertSuperAdminConfigured(value) {
+  if (typeof value !== "string") {
+    throw new Error(
+      "ADMIN_SUPER_NPUB must be a string exported from config/instance-config.js."
+    );
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    throw new Error(
+      "ADMIN_SUPER_NPUB is required. Populate it with the Super Admin npub in config/instance-config.js."
+    );
+  }
+
+  if (!trimmed.startsWith("npub")) {
+    throw new Error(
+      "ADMIN_SUPER_NPUB should be a bech32 npub (e.g., starting with 'npub')."
+    );
+  }
+  return trimmed;
+}
+
+function assertPlatformFeeInRange(value) {
+  const numericValue =
+    typeof value === "number" ? value : Number.parseFloat(value);
+
+  if (!Number.isFinite(numericValue)) {
+    throw new Error(
+      "PLATFORM_FEE_PERCENT must be a finite number between 0 and 100."
+    );
+  }
+
+  if (numericValue < 0 || numericValue > 100) {
+    throw new Error("PLATFORM_FEE_PERCENT must be between 0 and 100 inclusive.");
+  }
+
+  return numericValue;
+}
+
+function getPlatformLud16Override(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  return value.trim();
+}
+
+function resolveConfig(overrides = {}) {
+  return {
+    adminSuperNpub:
+      overrides.ADMIN_SUPER_NPUB ?? ADMIN_SUPER_NPUB,
+    platformFeePercent:
+      overrides.PLATFORM_FEE_PERCENT ?? PLATFORM_FEE_PERCENT,
+    platformLud16Override:
+      overrides.PLATFORM_LUD16_OVERRIDE ?? PLATFORM_LUD16_OVERRIDE,
+  };
+}
+
+export function validateInstanceConfig(overrides) {
+  const config = resolveConfig(overrides);
+  assertSuperAdminConfigured(config.adminSuperNpub);
+  const platformFeePercent = assertPlatformFeeInRange(
+    config.platformFeePercent
+  );
+  const trimmedOverride = getPlatformLud16Override(
+    config.platformLud16Override
+  );
+
+  if (platformFeePercent > 0 && !trimmedOverride) {
+    throw new Error(
+      "PLATFORM_FEE_PERCENT is positive but PLATFORM_LUD16_OVERRIDE is empty. Set PLATFORM_LUD16_OVERRIDE to the Lightning address that should receive the platform's split, or publish a lud16 value on the Super Admin profile so BitVid can route platform fees."
+    );
+  }
+}
diff --git a/content/roadmap.md b/content/roadmap.md
index a8a4fdd6..7d1f8a5e 100644
--- a/content/roadmap.md
+++ b/content/roadmap.md
@@ -6,7 +6,7 @@
 - Fix "Dev Mode" publishing "Live Mode" notes—add a flag for dev mode posts.
 - Fix issue with video post set to private.
 - Disable "private video" until I can make it work better.
-- Make "private video" work better using nip-04 encryption for magnet field.
+- Make "private video" work better by hiding cards from shared grids while keeping an owner-only view.
 - Fix slow back button issues on Firefox.
 - Add Amber login support for mobile.
 - Add settings (three dots) button for all videos, not the same as gear menu. Only show delete and edit gear for logged-in users videos.
diff --git a/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md b/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md
index 18e9af13..32ad29c9 100644
--- a/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md
+++ b/content/roadmap/02_bitvid_Enhanced_Migration_of_Note_Spec_Logic.md
@@ -31,7 +31,7 @@ This new file could export:
    - `buildNewNote(data, pubkey)`: Takes basic form data and returns a fully structured Nostr note (an object) ready to be signed.
    - `buildEditNote(originalEvent, updatedData)`: Merges old note content with new fields.
    - `softDeleteNote(originalEvent)`: Constructs a note with `deleted = true`.
-   - `encryptMagnet(magnet)`, `decryptMagnet(magnet)`: Real or placeholder encryption functions.
+   - `encryptMagnet(magnet)`, `decryptMagnet(magnet)`: Legacy pass-through helpers kept in case encryption returns; private listings now hide rather than encrypt.
    - `validateNoteContent(content)`: Ensures essential fields (title, magnet, mode, etc.) are present and valid.
 
 Because you’re not implementing Version 3 yet, keep your existing version logic. If you do plan to adopt Version 3 later, the new file is where you’d add or change fields without scattering edits across multiple files.
@@ -53,7 +53,7 @@ export function prepareNewNote(formInput, pubkey) {
   // Combine user inputs with defaults
   const isPrivate = formInput.isPrivate === true;
   const finalMagnet = isPrivate
-    ? encryptMagnet(formInput.magnet)
+    ? encryptMagnet(formInput.magnet) // currently a pass-through; hiding happens at the feed layer
     : formInput.magnet;
 
   return {
@@ -178,7 +178,7 @@ By delegating the actual note-building to `buildEditNote` and `buildDeleteNote`,
 
 6. **Test Thoroughly:**  
    - Create, edit, and delete events to ensure everything behaves the same.  
-   - Confirm that private videos are still encrypted as expected.
+   - Confirm that private videos stay hidden from shared grids as expected.
 
 ---
 
@@ -189,13 +189,13 @@ Below is a small outline showing how you might organize the new file. The actual
 ```js
 // bitvidNoteSpec.js
 
-// A placeholder or real encryption method
+// Legacy placeholder kept for future encryption experiments (currently returns the raw magnet)
 export function encryptMagnet(magnet) {
-  return magnet.split("").reverse().join("");
+  return magnet; // private cards are hidden instead of encrypted
 }
 
 export function decryptMagnet(magnet) {
-  return magnet.split("").reverse().join("");
+  return magnet; // private cards are hidden instead of encrypted
 }
 
 function generateUniqueDTag() {
@@ -206,7 +206,7 @@ function generateUniqueDTag() {
 export function prepareNewNote(formInput, pubkey) {
   const isPrivate = formInput.isPrivate === true;
   const finalMagnet = isPrivate
-    ? encryptMagnet(formInput.magnet)
+    ? encryptMagnet(formInput.magnet) // currently a pass-through; hiding happens at the feed layer
     : formInput.magnet;
 
   return {
@@ -234,7 +234,7 @@ export function prepareNewNote(formInput, pubkey) {
 export function buildEditNote(originalEvent, updatedData) {
   // parse old content
   // combine with new fields
-  // handle old vs new encryption
+  // handle legacy visibility toggles / future encryption experiments
   // return the final event object
 }
 
diff --git a/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md b/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md
index 9603d47b..1ab6400a 100644
--- a/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md	
+++ b/content/roadmap/03_bitvid_Enhanced_Nostr_Video_&_Audio_Note_Specification_Version 3.md	
@@ -43,19 +43,19 @@ A typical event:
 | `videoRootId`                     | String (optional)  | A stable root ID used to link multiple versions (edits) and a delete event together. **Recommended** for overshadow logic. |
 | `version`                         | Integer            | Now set to `3`.                                                                                                            |
 | `deleted`                         | Boolean            | `true` marks the post as “soft deleted.”                                                                                   |
-| `isPrivate`                       | Boolean            | Indicates if `magnet` (and possibly other fields) are encrypted.                                                           |
+| `isPrivate`                       | Boolean            | Indicates the card should stay off shared grids and remain visible only to its owner; payloads stay plaintext. |
 | `title`                           | String             | Display title for the media.                                                                                               |
-| `magnet`                          | String             | Magnet link for primary media (encrypted if `isPrivate = true`).                                                           |
+| `magnet`                          | String             | Magnet link for primary media (still stored in plaintext even when `isPrivate = true`). |
 | `extraMagnets`                    | Array (optional)   | Additional magnet links (e.g., multiple resolutions).                                                                      |
-| `thumbnail`                       | String (optional)  | URL or magnet link to a thumbnail image (encrypted if `isPrivate = true` and `encryptedMeta = true`).                      |
-| `description`                     | String (optional)  | A textual description (encrypted if `isPrivate = true` and `encryptedMeta = true`).                                        |
+| `thumbnail`                       | String (optional)  | URL or magnet link to a thumbnail image. |
+| `description`                     | String (optional)  | A textual description. |
 | `mode`                            | String             | Typically `live` or `dev`.                                                                                                 |
 | `adult`                           | Boolean (optional) | `true` if content is adult-only. Default: `false` or omitted.                                                              |
 | `categories`                      | Array (optional)   | Array of categories, e.g. `["comedy", "music"]`.                                                                           |
 | `language`                        | String (optional)  | Language code (e.g. `"en"`, `"es"`).                                                                                       |
 | `payment`                         | String (optional)  | Monetization field (e.g. a Lightning address).                                                                             |
 | `i18n`                            | Object (optional)  | Internationalization map (e.g. `{"title_en": "...", "description_es": "..."}`).                                            |
-| `encryptedMeta`                   | Boolean (optional) | Indicates if fields like `description` or `thumbnail` are encrypted.                                                       |
+| `encryptedMeta`                   | Boolean (optional) | Legacy flag from earlier encryption experiments; leave `false` unless a future spec revives encrypted metadata. |
 | **Audio/Podcast-Specific Fields** |                    |                                                                                                                            |
 | `contentType`                     | String (optional)  | E.g., `"video"`, `"music"`, `"podcast"`, `"audiobook"`.                                                                    |
 | `albumName`                       | String (optional)  | Name of the album (for music).                                                                                             |
@@ -194,7 +194,7 @@ A typical event:
 ### **8.2 Deletion**
 
 1. **deleted = true**: Mark the item as deleted in the `content` JSON.
-2. **Remove or encrypt** sensitive fields (`magnet`, `description`, etc.).
+2. **Clear** sensitive fields (`magnet`, `description`, etc.) if you do not want them mirrored in older clients.
 3. **videoRootId**: Must remain the same as the original so clients remove/overshadow the old item.
 4. **subscribeVideos** Logic:
    ```js
@@ -217,7 +217,7 @@ A typical event:
 1. **Adult Content**: If `adult = true`, clients typically hide the post unless the user enables adult content in settings.
 2. **Categories**: Provide optional grouping or searching by `categories`.
 3. **Language**: If specified, clients can filter by language.
-4. **Encryption**: If `isPrivate = true`, some fields (e.g., `magnet`) may need client-side decryption.
+4. **Privacy handling**: If `isPrivate = true`, clients should hide the card from shared grids instead of attempting client-side decryption.
 
 ---
 
diff --git a/css/style.css b/css/style.css
index 456ca6c6..be48f4c6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,22 @@
+@import "./tokens.css";
+
 :root {
-  --color-bg: #0f172a;
-  --color-card: #1e293b;
-  --color-primary: #fe0032;
-  --color-secondary: #ff93a5;
-  --color-card-critical: #3f0b13;
-  --color-text: #f8fafc;
-  --color-muted: #94a3b8;
-  --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1);
-  --modal-motion-duration: 160ms;
   --scrollbar-width: 0.5rem;
   --scrollbar-track: rgba(255, 255, 255, 0.1);
   --scrollbar-thumb: rgba(255, 255, 255, 0.3);
   --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
+  /* Sidebar stack must remain below modal overlays. */
+  --z-sidebar-overlay: 10;
+  --z-sidebar: 20;
+  --z-modal-root: 100;
+  --z-modal-overlay: 110;
+  --z-modal-content: 120;
+  --z-modal-player: 130;
+  --sidebar-width-expanded: 16rem;
+  --sidebar-width-collapsed: 4rem;
+  --sidebar-width: var(--sidebar-width-expanded);
+  --sidebar-control-size: 2.75rem;
+  --sidebar-content-gap: 1rem;
 }
 
 html {
@@ -52,15 +55,30 @@ html {
 
 /* Core Styles */
 body {
-  font-family: system-ui, -apple-system, sans-serif;
-  background-color: var(--color-bg);
-  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  background-color: var(--color-page);
+  color: var(--color-text-strong);
   line-height: 1.5;
   margin: 0;
   padding: 0;
   overflow-x: hidden; /* Disable horizontal scrolling */
 }
 
+#nip71TagsFieldset > legend,
+#editNip71TagsFieldset > legend {
+  margin-left: 0;
+  padding: 0;
+}
+
+#app {
+  /*
+    Keep the primary content surface aligned with the page background so the
+    sidebar styling does not bleed into the video grid.
+  */
+  background-color: var(--color-page);
+  color: inherit;
+}
+
 header {
   margin-bottom: 2rem;
   padding: 1rem 0;
@@ -133,22 +151,99 @@ header img {
 .video-card {
   background-color: var(--color-card);
   border-radius: 0.75rem;
-  overflow: hidden;
+  overflow: visible;
   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: var(--shadow-md);
 }
 
+.video-card.video-card--owner-private {
+  background-color: var(--color-card-private) !important;
+  box-shadow:
+    0 0 0 0.125rem rgba(168, 85, 247, 0.55),
+    var(--shadow-md);
+}
+
+.video-card.video-card--owner-private:hover {
+  box-shadow:
+    0 0 0 0.125rem rgba(192, 132, 252, 0.65),
+    var(--shadow-lg);
+}
+
+.video-visibility-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(30, 41, 59, 0.7);
+  background-color: rgba(15, 23, 42, 0.55);
+  padding: 0.35rem;
+}
+
+.video-visibility-toggle__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-color: rgba(15, 23, 42, 0.6);
+  color: rgba(203, 213, 225, 0.78);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  min-width: 5.5rem;
+  padding: 0.4rem 0.95rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background-color 0.18s ease,
+    color 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    opacity 0.18s ease;
+}
+
+.video-visibility-toggle__option:not(.is-disabled):hover {
+  background-color: rgba(148, 163, 184, 0.16);
+  color: rgba(226, 232, 240, 0.88);
+}
+
+.video-visibility-toggle__option[data-active="true"] {
+  background: linear-gradient(
+    135deg,
+    rgba(129, 140, 248, 0.4),
+    rgba(192, 132, 252, 0.32)
+  );
+  color: var(--color-text);
+  border-color: rgba(129, 140, 248, 0.6);
+  box-shadow:
+    0 0 0 1px rgba(129, 140, 248, 0.4) inset,
+    0 6px 14px -6px rgba(129, 140, 248, 0.55);
+}
+
+.video-visibility-toggle__option.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.video-visibility-toggle__option.is-disabled[data-active="true"] {
+  opacity: 0.65;
+}
+
 .video-card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   display: none;
 }
 
 .video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   background-color: var(--color-card-critical);
-  box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.35), var(--shadow-md);
+  box-shadow:
+    0 0 0 0.0625rem rgba(239, 68, 68, 0.35),
+    var(--shadow-md);
 }
 
 .video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
-  box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.45), var(--shadow-lg);
+  box-shadow:
+    0 0 0 0.0625rem rgba(239, 68, 68, 0.45),
+    var(--shadow-lg);
 }
 
 .video-card--enter {
@@ -167,7 +262,9 @@ header img {
   padding: 1rem 1.25rem;
   border: 0.0625rem solid transparent;
   box-shadow: var(--shadow-md);
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 .watch-history-card:hover {
@@ -198,7 +295,7 @@ header img {
   height: 100%;
   border-radius: 0.5rem;
   overflow: hidden;
-  background-color: #0f172a;
+  background-color: var(--color-surface);
 }
 
 .watch-history-card__thumbnailInner img {
@@ -220,7 +317,7 @@ header img {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
-  color: #ffffff;
+  color: var(--color-white);
   line-height: 1.4;
   cursor: pointer;
   display: -webkit-box;
@@ -231,13 +328,13 @@ header img {
 
 .watch-history-card__title:hover,
 .watch-history-card__title:focus {
-  color: #60a5fa;
+  color: var(--color-info);
 }
 
 .watch-history-card__created {
   margin: 0;
   font-size: 0.875rem;
-  color: #9ca3af;
+  color: var(--color-muted-alt);
 }
 
 .watch-history-card__meta {
@@ -252,7 +349,7 @@ header img {
 .watch-history-card__watched {
   margin: 0;
   font-size: 0.875rem;
-  color: #d1d5db;
+  color: var(--color-border-subtle);
 }
 
 .watch-history-card__creator {
@@ -270,9 +367,11 @@ header img {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #1f2937;
+  background-color: var(--color-panel);
   cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .watch-history-card__creatorAvatar:hover,
@@ -295,14 +394,14 @@ header img {
   margin: 0;
   font-size: 0.95rem;
   font-weight: 500;
-  color: #e5e7eb;
+  color: var(--color-subtle);
   text-align: left;
   cursor: pointer;
 }
 
 .watch-history-card__creatorName:hover,
 .watch-history-card__creatorName:focus {
-  color: #60a5fa;
+  color: var(--color-info);
   outline: none;
 }
 
@@ -322,42 +421,45 @@ header img {
   font-size: 0.875rem;
   font-weight: 500;
   border: 0.0625rem solid transparent;
-  background-color: #1f2937;
-  color: #e5e7eb;
+  background-color: var(--color-panel);
+  color: var(--color-subtle);
   cursor: pointer;
   text-decoration: none;
-  transition: background-color 0.2s ease, color 0.2s ease,
-    border-color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .watch-history-card__action:hover,
 .watch-history-card__action:focus {
-  background-color: #111827;
-  color: #ffffff;
-  border-color: #374151;
+  background-color: var(--color-surface-alt);
+  color: var(--color-white);
+  border-color: var(--color-border);
   outline: none;
 }
 
 .watch-history-card__action--primary {
-  background-color: #2563eb;
-  color: #ffffff;
+  background-color: var(--color-info-strong);
+  color: var(--color-white);
 }
 
 .watch-history-card__action--primary:hover,
 .watch-history-card__action--primary:focus {
-  background-color: #1d4ed8;
-  border-color: #1d4ed8;
+  background-color: var(--color-info-pressed);
+  border-color: var(--color-info-pressed);
 }
 
 .watch-history-card__action--danger {
-  background-color: #7f1d1d;
-  color: #ffffff;
+  background-color: var(--color-critical);
+  color: var(--color-white);
 }
 
 .watch-history-card__action--danger:hover,
 .watch-history-card__action--danger:focus {
-  background-color: #991b1b;
-  border-color: #991b1b;
+  background-color: var(--color-critical-strong);
+  border-color: var(--color-critical-strong);
 }
 
 @media (max-width: 1024px) {
@@ -488,7 +590,10 @@ header img {
 .video-card .thumbnail-container {
   position: relative;
   padding-top: 56.25%;
-  background-color: #0f172a;
+  background-color: var(--color-surface);
+  overflow: hidden;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 .video-card img.thumbnail {
@@ -511,19 +616,54 @@ header img {
   margin-bottom: 0.75rem;
 }
 
+/* Ensure modal portals always sit above the sidebar stack */
+#modalContainer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal-root);
+  pointer-events: none;
+  isolation: isolate;
+}
+
+#modalContainer > * {
+  pointer-events: auto;
+}
+
+#modalContainer > [id$="Modal"]:not(#playerModal) {
+  z-index: var(--z-modal-root);
+}
+
+#modalContainer > [id$="Modal"]:not(#playerModal) > .absolute {
+  z-index: var(--z-modal-overlay);
+}
+
+#modalContainer > [id$="Modal"]:not(#playerModal) .modal-container,
+#modalContainer > [id$="Modal"]:not(#playerModal) .modal-content {
+  z-index: var(--z-modal-content);
+}
+
+#modalContainer > #playerModal {
+  z-index: var(--z-modal-player);
+}
+
+#modalContainer > #playerModal .player-modal__container,
+#modalContainer > #playerModal .player-modal__content {
+  z-index: var(--z-modal-content);
+}
+
 /* Modal Player */
 #playerModal {
   position: fixed;
   inset: 0;
-  z-index: 100;
+  z-index: var(--z-modal-player);
   display: none;
   flex-direction: column;
   align-items: stretch;
   justify-content: stretch;
   width: 100vw;
   height: 100vh;
-  background-color: #0f172a;
-  color: #e2e8f0;
+  background-color: var(--color-surface);
+  color: var(--color-subtle-text);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -570,7 +710,11 @@ header img {
   padding: clamp(1.25rem, 2vw, 1.5rem);
   border-radius: 1.25rem;
   border: 0.0625rem solid rgba(148, 163, 184, 0.28);
-  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.72));
+  background: linear-gradient(
+    145deg,
+    rgba(15, 23, 42, 0.94),
+    rgba(15, 23, 42, 0.72)
+  );
   box-shadow: 0 1.75rem 3.5rem rgba(8, 11, 30, 0.45);
 }
 
@@ -627,7 +771,10 @@ header img {
   box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
   color: var(--color-text);
   cursor: pointer;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease;
   outline: none;
 }
 
@@ -642,7 +789,11 @@ header img {
 
 #profileModal .profile-card--active {
   border-color: rgba(59, 130, 246, 0.55);
-  background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.78));
+  background: linear-gradient(
+    160deg,
+    rgba(37, 99, 235, 0.22),
+    rgba(15, 23, 42, 0.78)
+  );
   box-shadow: 0 1.35rem 2.8rem rgba(37, 99, 235, 0.22);
 }
 
@@ -707,14 +858,17 @@ header img {
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-decoration: none;
-  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
 }
 
 #profileModal .profile-card__action:hover,
 #profileModal .profile-card__action:focus-visible {
   background: rgba(59, 130, 246, 0.24);
   border-color: rgba(59, 130, 246, 0.6);
-  color: #ffffff;
+  color: var(--color-white);
 }
 
 #profileModal .profile-card__name {
@@ -728,7 +882,9 @@ header img {
 
 #profileModal .profile-card__npub {
   font-size: 0.75rem;
-  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family:
+    "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
   color: rgba(148, 163, 184, 0.85);
   word-break: break-all;
 }
@@ -750,14 +906,17 @@ header img {
   color: rgba(226, 232, 240, 0.85);
   text-align: left;
   cursor: pointer;
-  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease,
+    color 0.2s ease;
 }
 
 #profileModal .profile-switcher__add:hover,
 #profileModal .profile-switcher__add:focus-visible {
   border-color: rgba(96, 165, 250, 0.65);
   background: rgba(59, 130, 246, 0.18);
-  color: #ffffff;
+  color: var(--color-white);
   outline: none;
 }
 
@@ -845,7 +1004,7 @@ header img {
   width: 100%;
   min-height: 100%;
   max-width: none;
-  background-color: #0f172a;
+  background-color: var(--color-surface);
   overflow: visible;
   box-shadow: none;
   animation: fadeIn var(--modal-motion-duration) ease-out;
@@ -868,7 +1027,7 @@ header img {
 #playerModal .player-modal__video video {
   width: 100%;
   aspect-ratio: 16 / 9;
-  background-color: #000;
+  background-color: var(--color-black);
   border-radius: 0.75rem;
   display: block;
   box-shadow: 0 1.125rem 2.75rem rgba(8, 11, 30, 0.55);
@@ -897,13 +1056,13 @@ header img {
   gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: #9ca3af;
+  color: var(--color-muted-alt);
   white-space: nowrap;
 }
 
 .view-count-text {
   white-space: nowrap;
-  color: #6b7280;
+  color: var(--color-muted-strong);
 }
 
 html.modal-open {
@@ -923,13 +1082,35 @@ body.modal-open #app {
   overflow: hidden;
 }
 
+body.modal-open #sidebar,
+body.modal-open #sidebarOverlay {
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+body.modal-open #sidebar {
+  z-index: var(--z-sidebar-overlay);
+}
+
+body.modal-open #sidebarOverlay {
+  z-index: calc(var(--z-sidebar-overlay) - 1);
+}
+
+#sidebar.is-modal-hidden,
+#sidebarOverlay.is-modal-hidden {
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
 /* Modal Content Container */
 .modal-content {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #0f172a;
+  background-color: var(--color-surface);
   animation: fadeIn var(--modal-motion-duration) ease-out;
 }
 
@@ -987,7 +1168,7 @@ body.modal-open #app {
 .modal-nav .icon-button {
   background-color: rgba(30, 41, 59, 0.85);
   border: 0.0625rem solid rgba(148, 163, 184, 0.4);
-  color: #f8fafc;
+  color: var(--color-text);
   box-shadow: none;
 }
 
@@ -1016,6 +1197,25 @@ body.modal-open #app {
   flex-wrap: nowrap;
 }
 
+.zap-popover {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  z-index: 80;
+  width: max-content;
+}
+
+.zap-popover__content {
+  width: 18rem;
+  max-width: calc(100vw - 2rem);
+  background: rgba(11, 17, 32, 0.96);
+  color: var(--color-subtle);
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  box-shadow: 0 22px 48px -18px rgba(8, 14, 28, 0.7);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
 .modal-actions__overflow {
   position: relative;
   overflow: visible;
@@ -1148,7 +1348,7 @@ button:not(.icon-button):focus {
   animation: spin 1s linear infinite;
   border: 0.125rem solid rgba(96, 165, 250, 0.35);
   border-radius: 9999px;
-  border-top-color: #60a5fa;
+  border-top-color: var(--color-info);
   display: inline-block;
   height: 1rem;
   width: 1rem;
@@ -1167,7 +1367,7 @@ button:not(.icon-button):focus {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
-  color: #6b7280;
+  color: var(--color-muted-strong);
   font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: 0.01em;
@@ -1181,7 +1381,7 @@ button:not(.icon-button):focus {
   align-items: center;
   background-color: rgba(31, 41, 55, 0.9);
   border-radius: 0.5rem;
-  color: #e5e7eb;
+  color: var(--color-subtle);
   display: flex;
   gap: 0.75rem;
   margin-bottom: 1rem;
@@ -1192,7 +1392,7 @@ button:not(.icon-button):focus {
   animation: spin 1s linear infinite;
   border: 0.125rem solid rgba(229, 231, 235, 0.35);
   border-radius: 9999px;
-  border-top-color: #f9fafb;
+  border-top-color: var(--color-page-alt);
   height: 1.25rem;
   width: 1.25rem;
 }
@@ -1234,7 +1434,7 @@ footer a:hover {
   position: fixed;
   inset: 0;
   background-color: rgb(0 0 0 / 0.9);
-  z-index: 50;
+  z-index: var(--z-modal-root);
   /* remove display: none; */
   display: flex;
   flex-direction: column;
@@ -1242,6 +1442,15 @@ footer a:hover {
   overscroll-behavior: contain;
 }
 
+#disclaimerModal > .absolute {
+  z-index: var(--z-modal-overlay);
+}
+
+#disclaimerModal .modal-container,
+#disclaimerModal .modal-content {
+  z-index: var(--z-modal-content);
+}
+
 #disclaimerModal.hidden {
   display: none !important;
 }
@@ -1267,7 +1476,7 @@ footer a:hover {
 
 #disclaimerModal .modal-footer {
   padding: 1.25rem 1.5rem 1.75rem;
-  background-color: #1a2234;
+  background-color: var(--color-overlay);
   border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
 }
 
@@ -1353,16 +1562,18 @@ footer a:hover {
   width: 2.5rem; /* 40px */
   height: 2.5rem; /* 40px */
   line-height: 0;
-  background-color: #3f3f46; /* Gray 700 */
-  color: #fff;
+  background-color: var(--color-neutral-700); /* Gray 700 */
+  color: var(--color-white);
   border: none;
   border-radius: 9999px;
   cursor: pointer;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s;
 }
 
 .icon-button:hover {
-  background-color: #52525b; /* Gray 600 */
+  background-color: var(--color-neutral-600); /* Gray 600 */
 }
 
 .icon-button:focus,
@@ -1382,7 +1593,7 @@ footer a:hover {
   position: relative;
   width: 100%;
   padding-top: 56.25%;
-  background-color: #1e293b;
+  background-color: var(--color-card);
 }
 .ratio-16-9 > img {
   position: absolute;
@@ -1393,139 +1604,516 @@ footer a:hover {
   object-fit: cover;
 }
 
+.video-card .ratio-16-9 {
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.video-card .ratio-16-9 > [data-video-thumbnail] {
+  border-radius: inherit;
+}
+
 /* Sidebar default states */
+#sidebarContainer {
+  position: relative;
+  overflow: visible;
+}
+
 #sidebar {
   position: fixed;
   top: 0;
   left: 0;
-  width: 16rem; /* Tailwind's w-64 */
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
   height: 100vh;
-  background-color: #0f172a;
+  height: 100dvh;
+  background-color: transparent;
+  color: var(--color-text);
+  overflow-x: visible;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  transition: transform 0.3s ease;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
+  transition:
+    width 200ms ease,
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  /* Keep below modal stacks so dialogs overlay the drawer. */
+  z-index: var(--z-sidebar);
+  box-shadow: none;
+}
+
+#sidebar .sidebar__inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1.5rem 1.25rem 1.75rem;
+  position: relative;
+  width: 100%;
+  /*
+    Allow the gradient panel shadow to breathe outside the rail while a nested
+    scroll container handles overflow.
+  */
+  overflow: visible;
+}
+
+/*
+  The scroll wrapper keeps nav + footer together while leaving overflow
+  visible so the gradient card shadow is never clipped.
+*/
+.sidebar-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: visible;
+}
+
+.sidebar-panel {
+  background: linear-gradient(
+    160deg,
+    rgba(30, 41, 59, 0.92) 0%,
+    rgba(15, 23, 42, 0.92) 100%
+  );
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 1rem;
+  box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.35);
+  padding: 1.25rem 1rem;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.sidebar-panel--primary {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.sidebar-panel__header {
+  display: none;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
+
+.sidebar-collapse-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--sidebar-control-size);
+  height: var(--sidebar-control-size);
+  border-radius: 9999px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: rgba(148, 163, 184, 0.08);
+  color: inherit;
+  cursor: pointer;
+  transition:
+    background 180ms ease,
+    color 180ms ease,
+    border-color 180ms ease;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.sidebar-collapse-toggle:hover {
+  background: rgba(148, 163, 184, 0.18);
+  border-color: rgba(148, 163, 184, 0.35);
+  color: var(--color-text);
+}
+
+.sidebar-collapse-toggle:focus-visible {
+  outline: 0.125rem solid var(--color-secondary);
+  outline-offset: 0.25rem;
+}
+
+.sidebar-collapse-toggle__icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform 200ms ease;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  opacity: 1;
+  transition: opacity 160ms ease;
+  width: 100%;
+}
+
+.sidebar-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  min-height: var(--sidebar-control-size);
+  border-radius: 0.875rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: rgba(226, 232, 240, 0.94);
+  text-decoration: none;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sidebar-nav-link:hover {
+  background: rgba(148, 163, 184, 0.18);
+  color: var(--color-text);
+}
+
+.sidebar-nav-link:focus-visible {
+  outline: 0.125rem solid var(--color-secondary);
+  outline-offset: 0.25rem;
+}
+
+.sidebar-nav-link--sub {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: rgba(226, 232, 240, 0.82);
+  padding-block: 0.55rem;
+}
+
+.sidebar-icon {
+  /* Lock icon sizing so the glyphs remain steady during collapse/expand. */
+  width: 1.5rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  flex-shrink: 0;
+  display: block;
+}
+
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: auto;
+  position: relative;
+  z-index: 2;
+}
+
+.sidebar-dropup-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem 0.875rem;
+  min-height: var(--sidebar-control-size);
+  border-radius: 0.875rem;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(30, 41, 59, 0.85);
+  color: rgba(226, 232, 240, 0.9);
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.sidebar-dropup-trigger:hover {
+  background: rgba(51, 65, 85, 0.95);
+  border-color: rgba(148, 163, 184, 0.32);
+  color: var(--color-text);
+}
+
+.sidebar-dropup-trigger:focus-visible {
+  outline: 0.125rem solid var(--color-secondary);
+  outline-offset: 0.25rem;
+}
+
+.sidebar-dropup-trigger__glyph {
+  width: 1.25rem;
+  height: 1.25rem;
+  opacity: 0.9;
+}
+
+.sidebar-dropup-trigger__chevron {
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform 180ms ease;
+}
+
+.sidebar-dropup-trigger__chevron.is-rotated,
+.sidebar-dropup-trigger[aria-expanded="true"] .sidebar-dropup-trigger__chevron {
+  transform: rotate(180deg);
+}
+
+.sidebar-dropup-panel {
+  background: rgba(15, 23, 42, 0.88);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 0.875rem;
+  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.4);
+  padding: 0.75rem 0.5rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 0.75rem);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(0.5rem);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease,
+    visibility 160ms ease;
+  z-index: 5;
+}
+
+.sidebar-dropup-panel[data-state="expanded"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.sidebar-dropup-panel__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+#sidebar[data-footer-state="expanded"] .sidebar-nav {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#sidebar[data-footer-state="collapsed"] .sidebar-nav {
+  opacity: 1;
+}
+
+#sidebar.sidebar-open {
+  box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.45);
+}
+
+#sidebarOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.55);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  /* Sits above page chrome but below modals and the sidebar itself. */
+  z-index: var(--z-sidebar-overlay);
+}
+
+body.sidebar-open #sidebarOverlay {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 /* Mobile (max-width: 767px): Hide sidebar by default */
 @media (max-width: 767px) {
   #sidebar {
-    transform: translateX(-100%);
+    transform: translate3d(-100%, 0, 0);
+    width: min(var(--sidebar-width-expanded), calc(100vw - 3rem));
   }
   /* When the sidebar-open class is added, slide the sidebar in */
   #sidebar.sidebar-open {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
 
-  /* Optionally shift main content when sidebar is open */
-  #app.sidebar-open {
-    transform: translateX(16rem);
-    transition: transform 0.3s ease;
+  body.sidebar-open {
+    overflow: hidden;
   }
 }
 
 /* Desktop (min-width: 768px): Always show the sidebar */
 @media (min-width: 768px) {
+  .sidebar-panel__header {
+    display: flex;
+  }
+
+  .sidebar-collapse-toggle {
+    display: inline-flex;
+  }
+
   #sidebar {
     transform: translateX(0) !important;
+    width: var(--sidebar-width);
+    overflow: visible;
+  }
+
+  #sidebar.sidebar-open {
+    box-shadow: none;
+  }
+
+  #sidebarOverlay {
+    display: none;
+  }
+
+  #app {
+    box-sizing: border-box;
+    transition:
+      margin-left 200ms ease,
+      width 200ms ease,
+      max-width 200ms ease;
+  }
+
+  #app[data-sidebar-state="collapsed"] {
+    margin-left: calc(
+      var(--sidebar-width-collapsed) + var(--sidebar-content-gap)
+    );
+    width: calc(
+      100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
+    );
+    max-width: calc(
+      100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
+    );
+  }
+
+  #app[data-sidebar-state="expanded"] {
+    margin-left: calc(
+      var(--sidebar-width-expanded) + var(--sidebar-content-gap)
+    );
+    width: calc(
+      100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
+    );
+    max-width: calc(
+      100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
+    );
+  }
+
+  body.sidebar-collapsed,
+  #sidebar.sidebar-collapsed {
+    --sidebar-width: var(--sidebar-width-collapsed);
+  }
+
+  body.sidebar-expanded,
+  #sidebar.sidebar-expanded {
+    --sidebar-width: var(--sidebar-width-expanded);
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-nav-link,
+  #sidebar.sidebar-collapsed .sidebar-nav-link {
+    /*
+      Keep icons centered in the collapsed rail without resizing them.
+    */
+    justify-content: center;
+    width: var(--sidebar-control-size);
+    padding: 0;
+    margin-inline: auto;
+    border-radius: 9999px;
+  }
+
+  body.sidebar-expanded #sidebar .sidebar-nav-link,
+  #sidebar.sidebar-expanded .sidebar-nav-link {
+    justify-content: flex-start;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-text,
+  #sidebar.sidebar-collapsed .sidebar-text {
+    display: none;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar__inner,
+  #sidebar.sidebar-collapsed .sidebar__inner {
+    /*
+      Keep enough breathing room for the panel shadow while widening the
+      interior track so var(--sidebar-control-size) controls stay perfectly
+      round.
+    */
+    padding-inline: 0.25rem;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-panel,
+  #sidebar.sidebar-collapsed .sidebar-panel {
+    /*
+      Mirror the outer adjustment so the gradient card retains its rounded
+      edges without squeezing the icon rail or clipping the control diameter.
+    */
+    padding-inline: 0.375rem;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-panel__header,
+  #sidebar.sidebar-collapsed .sidebar-panel__header {
+    justify-content: center;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-collapse-toggle,
+  #sidebar.sidebar-collapsed .sidebar-collapse-toggle {
+    margin-inline: auto;
+  }
+
+  #sidebar .sidebar-toggle-icon--rotated {
+    transform: rotate(180deg);
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
+  #sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
+    transform: rotate(0deg);
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger {
+    /*
+      Align the "More" control with the centered icon rail while keeping its
+      padding consistent so the glyph does not scale between states.
+    */
+    justify-content: center;
+    width: var(--sidebar-control-size);
+    height: var(--sidebar-control-size);
+    padding: 0;
+    margin-inline: auto;
+    border-radius: 9999px;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text,
+  #sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text {
+    display: none;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron {
+    display: none;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph,
+  #sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph {
+    margin: 0;
   }
 }
 
-/* Collapsed/expanded classes if needed on desktop */
-.sidebar-collapsed {
-  width: 4rem;
-}
-.sidebar-expanded {
-  width: 16rem;
-}
-.sidebar-collapsed .sidebar-text {
-  display: none;
-}
-
-/* Example: customizing the border & background in the sidebar */
-#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: 0.0625rem solid rgba(148, 163, 184, 0.25);
-  border-radius: 0.75rem;
-  box-shadow: 0 1.125rem 2.1875rem rgba(15, 23, 42, 0.45);
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-  transform: translateY(1rem);
-  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: 40rem;
-  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: 0.0625rem 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 0.75rem 1.875rem rgba(37, 99, 235, 0.25);
-  outline: none;
-  transform: translateY(-0.0625rem);
-}
-
-.sidebar-dropup-trigger__content {
-  align-items: center;
-  display: flex;
-}
 .edit-field-button {
   align-items: center;
-  background-color: #1f2937;
+  background-color: var(--color-panel);
   border-radius: 0.5rem;
-  color: #e2e8f0;
+  color: var(--color-subtle-text);
   display: inline-flex;
   font-size: 0.75rem;
   font-weight: 600;
   justify-content: center;
   padding: 0.5rem 0.85rem;
-  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
 }
 
 .edit-field-button:hover,
 .edit-field-button:focus {
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: var(--color-panel-hover);
+  color: var(--color-text);
   transform: translateY(-0.0625rem);
 }
 
 .locked-input {
   background-color: rgba(31, 41, 55, 0.75) !important;
   border-color: rgba(55, 65, 81, 0.9) !important;
-  color: #94a3b8 !important;
+  color: var(--color-muted) !important;
   cursor: default;
 }
 
diff --git a/css/tailwind.generated.css b/css/tailwind.generated.css
index d45f4879..4d6ae5d2 100644
--- a/css/tailwind.generated.css
+++ b/css/tailwind.generated.css
@@ -1 +1,3 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-1{bottom:.25rem}.bottom-4{bottom:1rem}.bottom-full{bottom:100%}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-12{top:3rem}.top-14{top:3.5rem}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[60\]{z-index:60}.m-auto{margin:auto}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-0{margin-top:0;margin-bottom:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.box-border{box-sizing:border-box}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.min-h-\[320px\]{min-height:320px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-56{max-width:14rem}.max-w-\[90\%\]{max-width:90%}.max-w-\[95\%\]{max-width:95%}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-amber-500\/40{border-color:rgba(245,158,11,.4)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-green-500\/60{border-color:rgba(34,197,94,.6)}.border-purple-600\/60{border-color:rgba(147,51,234,.6)}.border-red-700\/70{border-color:rgba(185,28,28,.7)}.border-red-800\/70{border-color:rgba(153,27,27,.7)}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.border-yellow-700\/50{border-color:rgba(161,98,7,.5)}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-900{--tw-bg-opacity:1;background-color:rgb(120 53 15/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/20{background-color:rgba(59,130,246,.2)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity,1))}.bg-cyan-800{--tw-bg-opacity:1;background-color:rgb(21 94 117/var(--tw-bg-opacity,1))}.bg-cyan-900{--tw-bg-opacity:1;background-color:rgb(22 78 99/var(--tw-bg-opacity,1))}.bg-cyan-950{--tw-bg-opacity:1;background-color:rgb(8 51 68/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.bg-gray-800\/60{background-color:rgba(31,41,55,.6)}.bg-gray-800\/80{background-color:rgba(31,41,55,.8)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-gray-900\/60{background-color:rgba(17,24,39,.6)}.bg-gray-900\/70{background-color:rgba(17,24,39,.7)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.bg-green-900{--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1))}.bg-green-950{--tw-bg-opacity:1;background-color:rgb(5 46 22/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-neutral-700{--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity,1))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-orange-700{--tw-bg-opacity:1;background-color:rgb(194 65 12/var(--tw-bg-opacity,1))}.bg-orange-800{--tw-bg-opacity:1;background-color:rgb(154 52 18/var(--tw-bg-opacity,1))}.bg-orange-900{--tw-bg-opacity:1;background-color:rgb(124 45 18/var(--tw-bg-opacity,1))}.bg-orange-950{--tw-bg-opacity:1;background-color:rgb(67 20 7/var(--tw-bg-opacity,1))}.bg-purple-700{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.bg-purple-800{--tw-bg-opacity:1;background-color:rgb(107 33 168/var(--tw-bg-opacity,1))}.bg-purple-900{--tw-bg-opacity:1;background-color:rgb(88 28 135/var(--tw-bg-opacity,1))}.bg-purple-900\/40{background-color:rgba(88,28,135,.4)}.bg-purple-950{--tw-bg-opacity:1;background-color:rgb(59 7 100/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.bg-red-900\/30{background-color:rgba(127,29,29,.3)}.bg-red-900\/40{background-color:rgba(127,29,29,.4)}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10/var(--tw-bg-opacity,1))}.bg-stone-700{--tw-bg-opacity:1;background-color:rgb(68 64 60/var(--tw-bg-opacity,1))}.bg-stone-800{--tw-bg-opacity:1;background-color:rgb(41 37 36/var(--tw-bg-opacity,1))}.bg-stone-900{--tw-bg-opacity:1;background-color:rgb(28 25 23/var(--tw-bg-opacity,1))}.bg-stone-950{--tw-bg-opacity:1;background-color:rgb(12 10 9/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-900\/20{background-color:rgba(113,63,18,.2)}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-black\/80{--tw-gradient-from:rgba(0,0,0,.8) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-900{--tw-gradient-from:#164e63 var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,78,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-900{--tw-gradient-from:#14532d var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neutral-900{--tw-gradient-from:#171717 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,9%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-900{--tw-gradient-from:#7c2d12 var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-900{--tw-gradient-from:#581c87 var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-900{--tw-gradient-from:#7f1d1d var(--tw-gradient-from-position);--tw-gradient-to:rgba(127,29,29,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-stone-900{--tw-gradient-from:#1c1917 var(--tw-gradient-from-position);--tw-gradient-to:rgba(28,25,23,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-700{--tw-gradient-to:#0e7490 var(--tw-gradient-to-position)}.to-green-700{--tw-gradient-to:#15803d var(--tw-gradient-to-position)}.to-neutral-700{--tw-gradient-to:#404040 var(--tw-gradient-to-position)}.to-orange-700{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}.to-purple-700{--tw-gradient-to:#7e22ce var(--tw-gradient-to-position)}.to-red-700{--tw-gradient-to:#b91c1c var(--tw-gradient-to-position)}.to-stone-700{--tw-gradient-to:#44403c var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pr-1{padding-right:.25rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[0\.7rem\]{font-size:.7rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-100{--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity,1))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity,1))}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity,1))}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-purple-200\/90{color:rgba(233,213,255,.9)}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-200\/80{color:hsla(0,96%,89%,.8)}.text-red-200\/90{color:hsla(0,96%,89%,.9)}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 0px 10px 0px rgba(0,0,0,.3);--tw-shadow-colored:0 0px 10px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{--tw-shadow:0 0px 30px 0px rgba(0,0,0,.6);--tw-shadow-colored:0 0px 30px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-dashed{outline-style:dashed}.outline-1{outline-width:1px}.outline-offset-4{outline-offset:4px}.outline-cyan-500{outline-color:#06b6d4}.outline-green-500{outline-color:#22c55e}.outline-neutral-500{outline-color:#737373}.outline-orange-500{outline-color:#f97316}.outline-purple-500{outline-color:#a855f7}.outline-red-500{outline-color:#ef4444}.outline-stone-500{outline-color:#78716c}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-gray-500:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity,1))}.hover\:bg-\[\#e6002c\]:hover{--tw-bg-opacity:1;background-color:rgb(230 0 44/var(--tw-bg-opacity,1))}.hover\:bg-black\/70:hover{background-color:rgba(0,0,0,.7)}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\:bg-gray-700\/70:hover{background-color:rgba(55,65,81,.7)}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.hover\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:bg-red-500:hover{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-red-900\/40:hover{background-color:rgba(127,29,29,.4)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-\[\#0f172a\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(15 23 42/var(--tw-ring-opacity,1))}.focus\:ring-black:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity,1))}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\:ring-green-500\/80:focus{--tw-ring-color:rgba(34,197,94,.8)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-black:focus{--tw-ring-offset-color:#000}.focus\:ring-offset-gray-900:focus{--tw-ring-offset-color:#111827}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-blue-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-gray-900:focus-visible{--tw-ring-offset-color:#111827}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-900:disabled{--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.disabled\:bg-neutral-400:disabled{--tw-bg-opacity:1;background-color:rgb(163 163 163/var(--tw-bg-opacity,1))}.disabled\:text-neutral-200:disabled{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:underline{text-decoration-line:underline}@media (min-width:640px){.sm\:w-96{width:24rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:self-end{align-self:flex-end}}@media (min-width:768px){.md\:ml-64{margin-left:16rem}.md\:mt-auto{margin-top:auto}.md\:hidden{display:none}.md\:h-64{height:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-5xl{max-width:64rem}.lg\:max-w-6xl{max-width:72rem}.lg\:grid-cols-\[minmax\(240px\2c 280px\)_1fr\]{grid-template-columns:minmax(240px,280px) 1fr}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
\ No newline at end of file
+:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 1.25rem 2.5rem -0.375rem rgba(15,23,42,.55);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--line-height-tight:1.1;--line-height-snug:1.25;--line-height-base:1.5;--line-height-relaxed:1.75;--motion-duration-fast:120ms;--motion-duration-base:160ms;--motion-duration-slow:280ms;--motion-ease-out:cubic-bezier(0.16,1,0.3,1);--motion-ease-in-out:cubic-bezier(0.4,0,0.2,1);--modal-motion-duration:var(--motion-duration-base)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-1{bottom:.25rem}.bottom-4{bottom:1rem}.bottom-full{bottom:100%}.left-4{left:1rem}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-12{top:3rem}.top-14{top:3.5rem}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[60\]{z-index:60}.m-auto{margin:auto}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.-ml-2{margin-left:-.5rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.box-border{box-sizing:border-box}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.max-h-\[420px\]{max-height:420px}.min-h-\[320px\]{min-height:320px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-56{max-width:14rem}.max-w-\[90\%\]{max-width:90%}.max-w-\[95\%\]{max-width:95%}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize-y{resize:vertical}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-amber-500\/40{border-color:rgba(245,158,11,.4)}.border-amber-500\/50{border-color:rgba(245,158,11,.5)}.border-amber-600\/70{border-color:rgba(217,119,6,.7)}.border-amber-700\/70{border-color:rgba(180,83,9,.7)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-blue-500\/40{border-color:rgba(59,130,246,.4)}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-gray-800\/70{border-color:rgba(31,41,55,.7)}.border-green-500\/60{border-color:rgba(34,197,94,.6)}.border-purple-600\/60{border-color:rgba(147,51,234,.6)}.border-red-500\/40{border-color:rgba(239,68,68,.4)}.border-red-500\/50{border-color:rgba(239,68,68,.5)}.border-red-700\/70{border-color:rgba(185,28,28,.7)}.border-red-800\/70{border-color:rgba(153,27,27,.7)}.border-transparent{border-color:transparent}.border-white{border-color:var(--color-white)}.border-yellow-700\/50{border-color:rgba(161,98,7,.5)}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-900{--tw-bg-opacity:1;background-color:rgb(120 53 15/var(--tw-bg-opacity,1))}.bg-amber-900\/30{background-color:rgba(120,53,15,.3)}.bg-amber-900\/40{background-color:rgba(120,53,15,.4)}.bg-black{background-color:var(--color-black)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}.bg-blue-500\/20{background-color:rgba(59,130,246,.2)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-blue-900\/30{background-color:rgba(30,58,138,.3)}.bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity,1))}.bg-cyan-800{--tw-bg-opacity:1;background-color:rgb(21 94 117/var(--tw-bg-opacity,1))}.bg-cyan-900{--tw-bg-opacity:1;background-color:rgb(22 78 99/var(--tw-bg-opacity,1))}.bg-cyan-950{--tw-bg-opacity:1;background-color:rgb(8 51 68/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.bg-gray-800\/60{background-color:rgba(31,41,55,.6)}.bg-gray-800\/70{background-color:rgba(31,41,55,.7)}.bg-gray-800\/80{background-color:rgba(31,41,55,.8)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-gray-900\/60{background-color:rgba(17,24,39,.6)}.bg-gray-900\/70{background-color:rgba(17,24,39,.7)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.bg-green-900{--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1))}.bg-green-950{--tw-bg-opacity:1;background-color:rgb(5 46 22/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-neutral-700{background-color:var(--color-neutral-700)}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-orange-700{--tw-bg-opacity:1;background-color:rgb(194 65 12/var(--tw-bg-opacity,1))}.bg-orange-800{--tw-bg-opacity:1;background-color:rgb(154 52 18/var(--tw-bg-opacity,1))}.bg-orange-900{--tw-bg-opacity:1;background-color:rgb(124 45 18/var(--tw-bg-opacity,1))}.bg-orange-950{--tw-bg-opacity:1;background-color:rgb(67 20 7/var(--tw-bg-opacity,1))}.bg-purple-700{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.bg-purple-800{--tw-bg-opacity:1;background-color:rgb(107 33 168/var(--tw-bg-opacity,1))}.bg-purple-900{--tw-bg-opacity:1;background-color:rgb(88 28 135/var(--tw-bg-opacity,1))}.bg-purple-900\/40{background-color:rgba(88,28,135,.4)}.bg-purple-950{--tw-bg-opacity:1;background-color:rgb(59 7 100/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.bg-red-900\/30{background-color:rgba(127,29,29,.3)}.bg-red-900\/40{background-color:rgba(127,29,29,.4)}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10/var(--tw-bg-opacity,1))}.bg-stone-700{--tw-bg-opacity:1;background-color:rgb(68 64 60/var(--tw-bg-opacity,1))}.bg-stone-800{--tw-bg-opacity:1;background-color:rgb(41 37 36/var(--tw-bg-opacity,1))}.bg-stone-900{--tw-bg-opacity:1;background-color:rgb(28 25 23/var(--tw-bg-opacity,1))}.bg-stone-950{--tw-bg-opacity:1;background-color:rgb(12 10 9/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-900\/20{background-color:rgba(113,63,18,.2)}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-cyan-900{--tw-gradient-from:#164e63 var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,78,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-900{--tw-gradient-from:#14532d var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neutral-900{--tw-gradient-from:#171717 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,9%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-900{--tw-gradient-from:#7c2d12 var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-900{--tw-gradient-from:#581c87 var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-900{--tw-gradient-from:#7f1d1d var(--tw-gradient-from-position);--tw-gradient-to:rgba(127,29,29,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-stone-900{--tw-gradient-from:#1c1917 var(--tw-gradient-from-position);--tw-gradient-to:rgba(28,25,23,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-700{--tw-gradient-to:#0e7490 var(--tw-gradient-to-position)}.to-green-700{--tw-gradient-to:#15803d var(--tw-gradient-to-position)}.to-neutral-700{--tw-gradient-to:var(--color-neutral-700) var(--tw-gradient-to-position)}.to-orange-700{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}.to-purple-700{--tw-gradient-to:#7e22ce var(--tw-gradient-to-position)}.to-red-700{--tw-gradient-to:#b91c1c var(--tw-gradient-to-position)}.to-stone-700{--tw-gradient-to:#44403c var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pr-1{padding-right:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:var(--font-family-sans)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-relaxed)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[11px\]{font-size:11px}.text-base{font-size:var(--font-size-base)}.text-base,.text-lg{line-height:var(--line-height-base)}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-relaxed)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.text-amber-100{--tw-text-opacity:1;color:rgb(254 243 199/var(--tw-text-opacity,1))}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-200\/90{color:hsla(48,97%,77%,.9)}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-100{--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity,1))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity,1))}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-purple-200\/90{color:rgba(233,213,255,.9)}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-100{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-200\/80{color:hsla(0,96%,89%,.8)}.text-red-200\/90{color:hsla(0,96%,89%,.9)}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity,1))}.text-white{color:var(--color-white)}.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.decoration-dotted{text-decoration-style:dotted}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 0px 10px 0px rgba(0,0,0,.3);--tw-shadow-colored:0 0px 10px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{--tw-shadow:0 0px 30px 0px rgba(0,0,0,.6);--tw-shadow-colored:0 0px 30px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-dashed{outline-style:dashed}.outline-1{outline-width:1px}.outline-offset-4{outline-offset:4px}.outline-cyan-500{outline-color:#06b6d4}.outline-green-500{outline-color:#22c55e}.outline-neutral-500{outline-color:#737373}.outline-orange-500{outline-color:#f97316}.outline-purple-500{outline-color:#a855f7}.outline-red-500{outline-color:#ef4444}.outline-stone-500{outline-color:#78716c}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-color:var(--color-black)}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-gray-500:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity,1))}.hover\:border-red-400:hover{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.hover\:bg-\[\#e6002c\]:hover{--tw-bg-opacity:1;background-color:rgb(230 0 44/var(--tw-bg-opacity,1))}.hover\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-800\/40:hover{background-color:rgba(30,64,175,.4)}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\:bg-gray-700\/70:hover{background-color:rgba(55,65,81,.7)}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.hover\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:bg-red-500:hover{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-red-900\/40:hover{background-color:rgba(127,29,29,.4)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.hover\:text-red-200:hover{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-blue-400:focus{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-\[\#0f172a\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(15 23 42/var(--tw-ring-opacity,1))}.focus\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\:ring-blue-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.focus\:ring-blue-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253/var(--tw-ring-opacity,1))}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\:ring-green-500\/80:focus{--tw-ring-color:rgba(34,197,94,.8)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))}.focus\:ring-red-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(248 113 113/var(--tw-ring-opacity,1))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-black:focus{--tw-ring-offset-color:var(--color-black)}.focus\:ring-offset-gray-900:focus{--tw-ring-offset-color:#111827}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-blue-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-gray-900:focus-visible{--tw-ring-offset-color:#111827}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-900:disabled{--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.disabled\:bg-neutral-400:disabled{--tw-bg-opacity:1;background-color:rgb(163 163 163/var(--tw-bg-opacity,1))}.disabled\:text-neutral-200:disabled{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:underline{text-decoration-line:underline}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-96{width:24rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:self-end{align-self:flex-end}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:hidden{display:none}.md\:h-64{height:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-5xl{max-width:64rem}.lg\:max-w-6xl{max-width:72rem}.lg\:grid-cols-\[minmax\(240px\2c 280px\)_1fr\]{grid-template-columns:minmax(240px,280px) 1fr}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
\ No newline at end of file
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index b5c61c95..8b5d48d8 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -1,3 +1,5 @@
+@import "./tokens.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/css/tokens.css b/css/tokens.css
new file mode 100644
index 00000000..8697e0a9
--- /dev/null
+++ b/css/tokens.css
@@ -0,0 +1,78 @@
+:root {
+  /* Color tokens */
+  --color-page: rgb(255 255 255);
+  --color-page-alt: rgb(249 250 251);
+  --color-surface: rgb(15 23 42);
+  --color-surface-alt: rgb(17 24 39);
+  --color-bg: var(--color-surface);
+  --color-card: rgb(30 41 59);
+  --color-card-private: rgb(59 29 116);
+  --color-card-critical: rgb(63 11 19);
+  --color-panel: rgb(31 41 55);
+  --color-panel-hover: rgb(51 65 85);
+  --color-border: rgb(55 65 81);
+  --color-border-subtle: rgb(209 213 219);
+  --color-primary: rgb(254 0 50);
+  --color-secondary: rgb(255 147 165);
+  --color-info: rgb(96 165 250);
+  --color-info-strong: rgb(37 99 235);
+  --color-info-pressed: rgb(29 78 216);
+  --color-muted-strong: rgb(107 114 128);
+  --color-text: rgb(248 250 252);
+  --color-text-strong: rgb(15 23 42);
+  --color-muted: rgb(148 163 184);
+  --color-muted-alt: rgb(156 163 175);
+  --color-subtle-text: rgb(226 232 240);
+  --color-subtle: rgb(229 231 235);
+  --color-critical: rgb(127 29 29);
+  --color-critical-strong: rgb(153 27 27);
+  --color-neutral-700: rgb(63 63 70);
+  --color-neutral-600: rgb(82 82 91);
+  --color-white: rgb(255 255 255);
+  --color-black: rgb(0 0 0);
+  --color-overlay: rgb(26 34 52);
+
+  /* Spacing scale */
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+
+  /* Border radii */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%);
+  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%);
+  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);
+  --shadow-modal: 0 1.25rem 2.5rem -0.375rem rgb(15 23 42 / 55%);
+
+  /* Typography */
+  --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.25;
+  --line-height-base: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Motion */
+  --motion-duration-fast: 120ms;
+  --motion-duration-base: 160ms;
+  --motion-duration-slow: 280ms;
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --modal-motion-duration: var(--motion-duration-base);
+}
diff --git a/docs/bitvid-app-audit.md b/docs/bitvid-app-audit.md
new file mode 100644
index 00000000..1268de50
--- /dev/null
+++ b/docs/bitvid-app-audit.md
@@ -0,0 +1,25 @@
+# Application Responsibility Audit
+
+This document catalogs the major responsibilities still implemented inside `Application` (formerly `bitvidApp`). Each area is a candidate for future extraction into dedicated service or UI modules.
+
+## Auth & Profile Coordination
+- Instantiates `AuthService`, wires login/logout/profile listeners, and exposes helper methods for cached profile state management.【F:js/app.js†L221-L314】【F:js/app.js†L620-L772】
+- Manages profile modal lifecycle, navigation between panes, and account switching UI state.【F:js/app.js†L283-L420】【F:js/app.js†L1328-L1822】
+
+## Playback Orchestration
+- Configures `PlaybackService`, logs telemetry callbacks, and tracks the active playback session lifecycle.【F:js/app.js†L224-L323】【F:js/app.js†L2805-L3352】
+- Coordinates view logging, cooldown keys, and watch-count subscriptions for the primary player and modal overlays.【F:js/app.js†L4305-L4592】【F:js/app.js†L4972-L5332】
+
+## Modal & UI Composition
+- Constructs upload, edit, revert, and video modals; registers their event listeners; and bridges UI events back into application logic.【F:js/app.js†L340-L615】【F:js/app.js†L2382-L2799】
+- Builds and manages the `VideoListView` component, injecting helpers for health badges, share links, and context menu actions.【F:js/app.js†L516-L744】【F:js/app.js†L2149-L2376】
+
+## Routing & View Bootstrapping
+- Handles initial view loading, hash-based navigation, and video list mounting during application startup.【F:js/app.js†L903-L959】【F:js/app.js†L1932-L2124】
+- Provides navigation helpers for channel/profile transitions tied to hash routing.【F:js/app.js†L934-L968】
+
+## State & Watch History Management
+- Synchronizes watch-history preferences, local metadata caching, and publication of watch history events to services.【F:js/app.js†L1975-L2093】【F:js/app.js†L4087-L4478】
+- Tracks app-level state such as active intervals, cleanup routines, view counters, and URL/magnet health caches.【F:js/app.js†L200-L323】【F:js/app.js†L3354-L4075】
+
+These clusters outline the remaining cross-cutting responsibilities that can be incrementally migrated into focused modules under `js/services` and `js/ui`.
diff --git a/docs/feed-engine.md b/docs/feed-engine.md
new file mode 100644
index 00000000..9c5a4d29
--- /dev/null
+++ b/docs/feed-engine.md
@@ -0,0 +1,111 @@
+# Feed Engine Architecture
+
+The feed engine is a lightweight pipeline for composing Bitvid feeds from one
+or more data sources. It lives in `js/feedEngine/` and exposes factories for
+sources, stages, sorters, and the engine itself. The goal is to make it easy to
+register new feeds today while leaving room for future "open algorithm" work
+that surfaces optional "why this video" metadata.
+
+## Core Concepts
+
+- **Feed definition** – A feed consists of a source, zero or more pipeline
+  stages, an optional sorter, and optional decorators. Each feed can expose its
+  own hooks and configuration defaults.
+- **Feed items** – The engine normalizes everything into a `{ video, pointer?,
+  metadata }` DTO so stages can reason about inputs without caring about the
+  original source.
+- **Context** – Every source and stage receives a context object containing the
+  feed configuration, runtime helpers, registered hooks, and a `addWhy()`
+  method for collecting metadata about why an item was filtered or prioritised.
+
+## Getting Started
+
+```js
+import {
+  createFeedEngine,
+  createActiveNostrSource,
+  createDedupeByRootStage,
+  createBlacklistFilterStage,
+  createChronologicalSorter,
+} from "../js/feedEngine/index.js";
+
+const engine = createFeedEngine();
+
+engine.registerFeed("recent", {
+  source: createActiveNostrSource(),
+  stages: [
+    createBlacklistFilterStage(),
+    createDedupeByRootStage(),
+  ],
+  sorter: createChronologicalSorter(),
+});
+
+const { videos, metadata } = await engine.runFeed("recent", {
+  runtime: {
+    blacklistedEventIds: new Set(["..."]),
+    isAuthorBlocked: (pubkey) => false,
+  },
+});
+```
+
+`metadata.why` collects the audit trail from each stage so later phases of the
+open algorithm project can surface transparency UI.
+
+## Sources
+
+| Factory | Description |
+| --- | --- |
+| `createActiveNostrSource` | Wraps `nostrService.getFilteredActiveVideos(...)` and emits DTOs with a `metadata.source` of `nostr:active`. |
+| `createSubscriptionAuthorsSource` | Filters the active video list down to subscribed authors using runtime hooks or `config.actorFilters`. |
+| `createWatchHistoryPointerSource` | Loads pointer DTOs from `watchHistoryService.getQueuedPointers(...)`. Optional hooks can resolve the backing video if a pointer is missing it. |
+
+Every source resolves blacklist and author-block runtime helpers so feeds
+constructed today behave exactly like the existing UI.
+
+## Stages
+
+| Stage | Behavior |
+| --- | --- |
+| `createDedupeByRootStage` | Reuses the application’s `dedupeVideosByRoot` helper (falling back to `dedupeToNewestByRoot`) to drop older versions of the same videoRoot. Adds "why" metadata for removed entries. |
+| `createBlacklistFilterStage` | Calls `nostrService.shouldIncludeVideo(...)` so moderators and block lists stay enforced. Each rejection logs a "blacklist" reason in the why-trail. |
+| `createWatchHistorySuppressionStage` | Invokes feed-provided hooks to optionally suppress watched items. Useful for per-feed watch history preferences. |
+
+Stages receive `(items, context)` and should return the transformed list. They
+can rely on `context.addWhy(...)` to annotate decisions without mutating the
+items in place.
+
+## Sorting & Decorators
+
+`createChronologicalSorter` is the baseline sorter that orders DTOs by
+`video.created_at` (newest first by default). Additional decorators can run
+after sorting to attach extra metadata or inject presentation hints.
+
+## Configuration Hooks
+
+Every feed inherits the default config contract:
+
+```json
+{
+  "timeWindow": null,
+  "actorFilters": [],
+  "tagFilters": [],
+  "sortOrder": "recent"
+}
+```
+
+Feeds can override defaults or expose richer schemas through
+`definition.defaultConfig` and `definition.configSchema`. At execution time the
+engine merges `options.config` with those defaults and passes them to the
+pipeline via `context.config`.
+
+Hooks can be provided globally when registering the feed or per-execution via
+`engine.runFeed(name, { hooks: { ... } })`. The watch-history suppression stage
+uses this mechanism so Phase 1 feeds can plug in actor-specific suppression
+logic later without changing the core pipeline.
+
+## Why-Metadata
+
+`context.addWhy()` records structured audit entries. All built-in stages use it
+for dedupe drops, blacklist filtering, and watch-history suppression. The
+engine returns these records alongside the final video list so UI components can
+render transparency affordances when the open algorithm effort ships.
diff --git a/docs/kitchen-sink.html b/docs/kitchen-sink.html
new file mode 100644
index 00000000..f9c8abcd
--- /dev/null
+++ b/docs/kitchen-sink.html
@@ -0,0 +1,177 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bitvid Tailwind Kitchen Sink</title>
+    <link rel="stylesheet" href="../css/tailwind.generated.css" />
+  </head>
+  <body class="bg-page font-sans text-text-strong">
+    <div class="min-h-screen bg-page-alt">
+      <header class="bg-surface text-text shadow-modal">
+        <div
+          class="mx-auto flex max-w-6xl items-center justify-between px-md py-sm"
+        >
+          <h1 class="text-2xl font-semibold">Bitvid UI Kitchen Sink</h1>
+          <button
+            class="rounded-lg bg-primary px-sm py-2 text-white shadow-md transition duration-fast ease-out hover:bg-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          >
+            Primary Action
+          </button>
+        </div>
+      </header>
+
+      <main class="mx-auto flex max-w-6xl flex-col gap-lg px-md py-lg">
+        <section class="space-y-md">
+          <h2 class="text-xl font-semibold text-text-strong">Buttons</h2>
+          <div class="flex flex-wrap gap-sm">
+            <button
+              class="rounded-md bg-primary px-sm py-2 text-white shadow-md transition duration-fast ease-out hover:bg-secondary"
+            >
+              Primary
+            </button>
+            <button
+              class="rounded-md bg-info px-sm py-2 text-surface shadow-sm transition duration-fast ease-out hover:bg-info-strong"
+            >
+              Informational
+            </button>
+            <button
+              class="rounded-md bg-critical px-sm py-2 text-white shadow-sm transition duration-fast ease-out hover:bg-critical-strong"
+            >
+              Destructive
+            </button>
+            <button
+              class="rounded-md border border-border-subtle px-sm py-2 text-text-muted shadow-none transition duration-fast ease-out hover:bg-panel-hover hover:text-text"
+            >
+              Ghost
+            </button>
+          </div>
+        </section>
+
+        <section class="space-y-md">
+          <h2 class="text-xl font-semibold text-text-strong">Cards</h2>
+          <div class="grid gap-md md:grid-cols-3">
+            <article class="rounded-lg bg-card p-md text-text shadow-lg">
+              <h3 class="text-lg font-semibold">Default Card</h3>
+              <p class="mt-xs text-text-muted">
+                Uses
+                <code class="font-mono text-sm text-info">bg-card</code> and
+                tokenized shadows.
+              </p>
+              <button
+                class="mt-sm rounded-md bg-info px-sm py-2 text-surface shadow-sm transition duration-base ease-in-out hover:bg-info-strong"
+              >
+                Watch Now
+              </button>
+            </article>
+            <article
+              class="rounded-lg bg-card-private p-md text-text shadow-lg"
+            >
+              <h3 class="text-lg font-semibold">Private Card</h3>
+              <p class="mt-xs text-text-muted">
+                Emphasizes restricted content with
+                <code class="font-mono text-sm text-info">bg-card-private</code
+                >.
+              </p>
+            </article>
+            <article
+              class="rounded-lg bg-card-critical p-md text-text shadow-lg"
+            >
+              <h3 class="text-lg font-semibold">Critical Card</h3>
+              <p class="mt-xs text-text-muted">
+                Use for outage or abuse states.
+              </p>
+            </article>
+          </div>
+        </section>
+
+        <section class="space-y-md">
+          <h2 class="text-xl font-semibold text-text-strong">Form Inputs</h2>
+          <form class="grid gap-md md:grid-cols-2">
+            <label class="flex flex-col gap-xs">
+              <span class="text-sm font-medium text-text-muted"
+                >Display Name</span
+              >
+              <input
+                class="rounded-md border border-border-subtle bg-white px-sm py-xs text-text-strong shadow-sm focus:border-info focus:ring-2 focus:ring-info-strong"
+                type="text"
+                placeholder="Satoshi Stack"
+              />
+            </label>
+            <label class="flex flex-col gap-xs">
+              <span class="text-sm font-medium text-text-muted">Video URL</span>
+              <input
+                class="rounded-md border border-border-subtle bg-white px-sm py-xs text-text-strong shadow-sm focus:border-info focus:ring-2 focus:ring-info-strong"
+                type="url"
+                placeholder="https://example.com/video.mp4"
+              />
+            </label>
+            <label class="flex flex-col gap-xs md:col-span-2">
+              <span class="text-sm font-medium text-text-muted"
+                >Description</span
+              >
+              <textarea
+                class="rounded-md border border-border-subtle bg-white px-sm py-xs text-text-strong shadow-sm focus:border-info focus:ring-2 focus:ring-info-strong"
+                rows="3"
+                placeholder="Describe what viewers should expect..."
+              ></textarea>
+            </label>
+          </form>
+        </section>
+
+        <section class="space-y-md">
+          <h2 class="text-xl font-semibold text-text-strong">Modal Preview</h2>
+          <div
+            class="relative overflow-hidden rounded-xl bg-overlay p-lg text-text shadow-modal"
+          >
+            <div class="space-y-sm">
+              <h3 class="text-lg font-semibold">Upload Video</h3>
+              <p class="text-text-muted">
+                Motion tokens control the fade via
+                <code class="font-mono text-sm text-info">duration-base</code>
+                and
+                <code class="font-mono text-sm text-info">ease-out</code>
+                utilities.
+              </p>
+            </div>
+            <div class="mt-md flex flex-col gap-sm">
+              <input
+                class="rounded-md border border-border-subtle bg-white px-sm py-xs text-text-strong focus:border-info focus:ring-2 focus:ring-info"
+                type="text"
+                placeholder="Magnet URI"
+              />
+              <div class="flex justify-end gap-sm">
+                <button
+                  class="rounded-md border border-border px-sm py-2 text-text-muted transition duration-fast ease-out hover:text-text"
+                >
+                  Cancel
+                </button>
+                <button
+                  class="rounded-md bg-primary px-sm py-2 text-white shadow-md transition duration-fast ease-out hover:bg-secondary"
+                >
+                  Publish
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="space-y-md">
+          <h2 class="text-xl font-semibold text-text-strong">
+            Typography Scale
+          </h2>
+          <div class="space-y-xs">
+            <p class="text-2xl font-semibold">Display / 2xl</p>
+            <p class="text-xl font-semibold">Headline / xl</p>
+            <p class="text-lg font-medium">Title / lg</p>
+            <p class="text-base">Body / base</p>
+            <p class="text-sm text-text-muted">Caption / sm</p>
+            <p class="text-xs uppercase tracking-wide text-text-muted">
+              Meta / xs
+            </p>
+          </div>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/manual-qa-2024-05-10.md b/docs/manual-qa-2024-05-10.md
new file mode 100644
index 00000000..f6947f4d
--- /dev/null
+++ b/docs/manual-qa-2024-05-10.md
@@ -0,0 +1,29 @@
+# Manual QA — 2024-05-10
+
+## Scope
+* Login/logout state transitions via `authService`
+* Video list rendering and playback fallback via `playbackService`
+* Upload submissions (URL only, magnet only, combined) via `publishVideoNote`
+
+## Environment
+* Local static server: `python -m http.server 5173`
+* Browser automation: Playwright (Chromium) via sandboxed runner
+* Stubbed `window.nostr` for extension-less login flows
+
+## Results
+### Authentication
+* Pre-login upload button hidden (`False`).
+* Post-login upload button visible (`True`); profile button also visible.
+* Post-logout upload button hidden again (`False`).
+
+### Playback
+* Hosted URL attempt emitted `session-start` analytics event. Hosted playback errored in sandbox (no magnet fallback available for URL-only sample).
+* Second sample (URL + magnet) emitted `session-start`, `fallback`, `playViaWebTorrent`, and `sourcechange: torrent` events confirming magnet fallback wiring.
+
+### Upload flows
+* URL-only submission succeeded (normalized payload kept empty magnet and blank hints).
+* Magnet-only submission appended WSS tracker hints plus provided `ws`/`xs` values.
+* Combined submission retained HTTPS URL and normalized magnet with tracker hints.
+
+## Notes
+Automation invoked `app.authService.login`/`handleAuthLogin` and `app.publishVideoNote` directly to simulate modal interactions. Playback checks observed console analytics, not media rendering (hosted stream blocked by sandbox security).
diff --git a/docs/moderation/README.md b/docs/moderation/README.md
new file mode 100644
index 00000000..dc0b0629
--- /dev/null
+++ b/docs/moderation/README.md
@@ -0,0 +1,33 @@
+# Bitvid Moderation Overview
+
+## What we’re building
+Bitvid is follow-centric. Your Home feed comes from people you follow (F1). Discovery can optionally expand to friends-of-friends (F2) and ranked sources. Moderation is **client-side** and **user-controlled** with optional admin lists.
+
+## Core principles
+- **Freedom to choose**: User picks filters. Defaults are safe but reversible.
+- **Explain decisions**: Every blur/hide shows a “why” badge and a “show anyway” control.
+- **Whitelist > blacklist**: Prefer showing content from trusted networks over fighting global spam.
+- **Minimal central power**: Admin lists are opt-in; users can unsubscribe.
+
+## Threat model (short)
+- Spam/bots, impersonation, malware, NSFW thumbnails, illegal content, brigading/dogpiles, Sybil report attacks.
+
+## Building blocks (Nostr)
+- **Reports**: NIP-56 (`kind 1984`) with types like `nudity`, `spam`, `illegal`, `impersonation`, etc.
+- **Lists**: NIP-51 (mute list 10000, categorized people 30000, bookmarks 30001).
+- **Replies/threads**: NIP-10 (comments).
+- **Counts**: NIP-45 (relay COUNT; optional fallbacks).
+
+## Defaults (policy)
+- Blur video thumbnails if **≥ 3** F1 friends report `nudity`.
+- Disable autoplay preview if **≥ 2** F1 friends report `nudity`.
+- Downrank author when any F1 has them in mute list (10000).
+- Opt-in admin lists (30000 with `d=bitvid:admin:*`) can hard-hide content.
+
+> You can override all defaults in **Settings → Safety & Moderation**.
+
+## Files in this folder
+- `web-of-trust.md` — how we compute trust signals and thresholds
+- `nips.md` — exact NIPs and kinds Bitvid uses
+- `relays.md` — relay compatibility and COUNT fallbacks
+- `testing.md` — QA checklist + test vectors
diff --git a/docs/moderation/nips.md b/docs/moderation/nips.md
new file mode 100644
index 00000000..6907e195
--- /dev/null
+++ b/docs/moderation/nips.md
@@ -0,0 +1,22 @@
+# NIPs Bitvid uses (Moderation-Relevant)
+
+## Required
+- **NIP-56 — Reporting**  
+  `kind 1984` events with a `type` tag such as `nudity`, `spam`, `illegal`, `impersonation`, `malware`, `profanity`, `other`.  
+  Client may act on **reports from friends** (our trusted set).
+
+- **NIP-51 — Lists**  
+  - `10000` mute list (authors to mute).  
+  - `30000` categorized people (used for admin/curation lists).  
+  - `30001` bookmarks (not moderation, but used elsewhere).
+
+- **NIP-10 — Replies & Mentions**  
+  Threading for comments; moderation badges appear in the thread UI.
+
+## Recommended
+- **NIP-45 — COUNT**  
+  Event counts; we use it opportunistically for faster totals with graceful fallback.
+
+## Nice-to-have
+- **NIP-36 — Sensitive Content / Content Warning**  
+  If present, we pre-blur content even without reports; user can “show anyway”.
diff --git a/docs/moderation/relays.md b/docs/moderation/relays.md
new file mode 100644
index 00000000..78931f4a
--- /dev/null
+++ b/docs/moderation/relays.md
@@ -0,0 +1,25 @@
+# Relay Compatibility & Fallbacks
+
+## COUNT (NIP-45)
+- Use COUNT when available to fetch totals efficiently.
+- If a relay doesn’t support COUNT:
+  - Show “—” placeholder.
+  - Fall back to client-side counting when cheap (narrow queries only).
+  - Avoid heavy per-relay scans; cap by time window and result size.
+
+## Query hygiene
+- Prefer specific filters: `authors`, `kinds`, `#e`, `#p`, `since/until`.
+- Batch requests across relays; debounce UI updates.
+- Cache viewer’s F1 set (pubkeys you follow) and their report summaries.
+
+## Media/thumbnail considerations
+- Never block media fetch solely on relay count results.
+- Thumbnails respect blur rules locally; “show anyway” toggles do not re-query relays.
+
+## Timeouts & errors
+- Per-relay timeout (e.g., 1500–2500 ms); proceed with partial results.
+- Surface a subtle “partial results” indicator when some relays fail.
+
+## Privacy notes
+- Do not leak the viewer’s F1 set to third-party endpoints.
+- If using a reputation provider, pass pubkeys in batches; avoid attaching viewer identity unless needed.
diff --git a/docs/moderation/testing.md b/docs/moderation/testing.md
new file mode 100644
index 00000000..ebf42d84
--- /dev/null
+++ b/docs/moderation/testing.md
@@ -0,0 +1,71 @@
+# QA & Test Vectors (Moderation)
+
+## Quick checklist
+- [ ] F1 set cached and used for “trusted reports”.
+- [ ] Blur at ≥3 F1 reports of `nudity`; autoplay blocked at ≥2.
+- [ ] “Show anyway” works and records only local pref.
+- [ ] Mute list (10000) downranks/hides consistently.
+- [ ] Admin lists (30000) take effect only when subscribed.
+- [ ] COUNT fallback shows placeholders and doesn’t crash UI.
+- [ ] Comment threads render with NIP-10; moderation badges show in context.
+- [ ] Reports from muted reporters are ignored.
+
+## Fixtures (create on test relays)
+
+### A) NIP-56 report events
+Create three distinct F1 reporter keys; each sends:
+
+```json
+{
+  "kind": 1984,
+  "tags": [
+    ["e", "<VIDEO_EVENT_ID>", "nudity"],
+    ["p", "<AUTHOR_PUBKEY>"]
+  ],
+  "content": "test: thumbnail too revealing"
+}
+```
+
+Expected:
+
+* After 1 report → no blur; autoplay allowed.
+* After 2 reports → autoplay blocked.
+* After 3 reports → thumbnail blurred; reason chip shown.
+
+### B) Mute list (10000)
+
+```json
+{
+  "kind": 10000,
+  "tags": [
+    ["p", "<AUTHOR_PUBKEY>"]
+  ]
+}
+```
+
+Expected: author’s items are downranked/hidden for this viewer.
+
+### C) Admin blacklist (30000)
+
+```json
+{
+  "kind": 30000,
+  "tags": [
+    ["d", "bitvid:admin:blacklist"],
+    ["p", "<AUTHOR_PUBKEY>"]
+  ]
+}
+```
+
+Expected: when viewer subscribes to this list, author is hard-hidden.
+
+### D) COUNT fallback
+
+* Use a relay that doesn’t support COUNT.
+* Verify “—” placeholders; no spinner loops; no crashes.
+
+## Automated checks (suggested)
+
+* Unit test `trustedReportCount`.
+* Integration test: emit events over a local relay; assert UI state.
+* Regression test: ensure Home feed ignores reputation gating.
diff --git a/docs/moderation/web-of-trust.md b/docs/moderation/web-of-trust.md
new file mode 100644
index 00000000..4a0902e3
--- /dev/null
+++ b/docs/moderation/web-of-trust.md
@@ -0,0 +1,79 @@
+# Web-of-Trust Policy (Bitvid)
+
+## Graph terms
+- **F1 (friends)**: pubkeys you follow.
+- **F2**: friends-of-friends (off by default for Home; allowed for Discovery).
+- **Trusted report**: a NIP-56 report from an F1 account.
+
+## Signals we use
+- NIP-56 reports by type (`nudity`, `spam`, `illegal`, `impersonation`, etc.).
+- NIP-51 lists:
+  - 10000 mute list → downrank/hide author content.
+  - 30000 categorized people → optional admin lists (see below).
+- (Optional) reputation score from a reputation source (e.g., PageRank/DVM) for **Discovery** only.
+
+## Default thresholds (can be tuned)
+- `blurThumbnail = trustedReportCount(event,'nudity') >= 3`
+- `hideAutoplay = trustedReportCount(event,'nudity') >= 2`
+- `downrankIfMutedByF1 = true`
+
+### Why these numbers?
+- F1-only reports resist Sybil attacks.
+- Blur is reversible; hiding autoplay reduces accidental exposure.
+
+## Admin lists (opt-in)
+- We recognize curated lists using `30000` events:
+  - `['d','bitvid:admin:blacklist']` → hard-hide when subscribed.
+  - `['d','bitvid:admin:whitelist']` → always show in Discovery.
+  - `['d','bitvid:admin:editors']` → trusted channel editors.
+- Users can subscribe/unsubscribe any time.
+
+## Pseudocode
+
+```ts
+type Hex = string;
+
+interface Report {
+  reporter: Hex; // F1 must include this key
+  type: 'nudity'|'spam'|'illegal'|'impersonation'|'malware'|'profanity'|'other';
+  targetEvent: string;
+}
+
+function trustedReportCount(eventId: string, type: Report['type'], viewerFollows: Set<Hex>, reports: Report[]): number {
+  return reports.filter(r => r.targetEvent === eventId && r.type === type && viewerFollows.has(r.reporter)).length;
+}
+
+function shouldBlurThumb(eventId: string, ctx: Ctx): boolean {
+  return trustedReportCount(eventId, 'nudity', ctx.viewerFollows, ctx.reports) >= 3;
+}
+
+function shouldHideAutoplay(eventId: string, ctx: Ctx): boolean {
+  return trustedReportCount(eventId, 'nudity', ctx.viewerFollows, ctx.reports) >= 2;
+}
+```
+
+## UI rules
+
+* Always show a reason chip: e.g., `Blurred · 3 friends reported “nudity” · Show anyway`.
+* Respect per-viewer choices (global off, per-channel off).
+* Never bury the override.
+
+## Discovery (optional reputation)
+
+* Home feed: **never** gated by reputation.
+* Discovery/Trending: may require a minimum score (pluggable `ReputationSource`).
+* Keep a toggle in Settings to disable reputation gating.
+
+```ts
+interface ReputationSource {
+  // returns 0..1 rank per pubkey for a given perspective
+  rank(pubkeys: Hex[], perspective?: Hex): Promise<Record<Hex, number>>;
+}
+```
+
+## Anti-abuse hardening
+
+* Count unique F1 reporters only (dedupe by pubkey).
+* Minimum account age or minimum “being-followed” count for reporters (optional).
+* Rate-limit rapid report bursts per reporter.
+* Ignore reports from muted or blocked reporters.
diff --git a/docs/nostr-event-schemas.md b/docs/nostr-event-schemas.md
index a52e034b..f711caac 100644
--- a/docs/nostr-event-schemas.md
+++ b/docs/nostr-event-schemas.md
@@ -15,6 +15,7 @@ import {
   getNostrEventSchema,
   setNostrEventSchemaOverrides,
   buildVideoPostEvent,
+  buildRepostEvent,
 } from "./nostrEventSchemas.js";
 
 // Inspect the current schema
@@ -41,12 +42,41 @@ When managing relay metadata, use `buildRelayListEvent` so the resulting
 replaceable event follows NIP-65 (`kind:10002`) with `"r"` tags describing the
 read/write split.
 
+### Accessing raw events
+
+`NostrClient` now keeps a lightweight cache of parsed videos alongside a
+separate cache of the untouched event payloads. Call
+`nostrClient.fetchRawEventById(eventId)` when you need the original JSON that
+was received from the relay. For convenience,
+`nostrClient.getEventById(eventId, { includeRaw: true })` returns both shapes at
+once:
+
+```js
+const { video, rawEvent } = await nostrClient.getEventById(eventId, {
+  includeRaw: true,
+});
+
+// `video` is the normalized BitVid object and `rawEvent` is the original
+// Nostr event with `sig`, `id`, and relay metadata intact.
+```
+
+In DevTools the active client lives at `window.bitvidApp?.nostrClient`.
+
+Use the `rawEvent` blob when implementing “Rebroadcast” style flows so the
+client can republish exactly what was signed, including the original
+`sig`. Republishers should prefer `rawEvent.sig` over re-signing unless the
+payload actually changes; this avoids accidental drift in dedupe tags or
+timestamps.
+
 ## Event catalogue
 
 | Note | Kind (default) | Tags | Content format |
 | --- | --- | --- | --- |
 | Video post (`NOTE_TYPES.VIDEO_POST`) | `30078` | `['t','video']`, `['d', <stable video identifier>]` plus optional schema append tags | JSON payload using Content Schema v3 (`version`, `title`, optional `url`, `magnet`, `thumbnail`, `description`, `mode`, `videoRootId`, `deleted`, `isPrivate`, `enableComments`, `ws`, `xs`) |
 | NIP-94 mirror (`NOTE_TYPES.VIDEO_MIRROR`) | `1063` | Tags forwarded from `publishVideo` (URL, mime type, thumbnail, alt text, magnet) | Plain text alt description |
+| Repost (`NOTE_TYPES.REPOST`) | `6` | `['e', <event id>, <relay?>]` with optional address pointer `['a', <kind:pubkey:identifier>, <relay?>]`, and `['p', <pubkey>]` when the origin author is known; inherits schema append tags | Empty content |
+| NIP-71 video (`NOTE_TYPES.NIP71_VIDEO`) | `21` | `['title', <title>]`, optional `['published_at', <unix seconds>]`, optional `['alt', <text>]`, repeated `['imeta', ...]` entries describing NIP-92 media variants, optional `['duration', <seconds>]`, repeated `['text-track', <url>, <kind>, <language>]`, optional `['content-warning', <reason>]`, repeated `['segment', <start>, <end>, <title>, <thumbnail>]`, repeated hashtags `['t', <tag>]`, repeated participants `['p', <pubkey>, <relay?>]`, repeated references `['r', <url>]` | Plain text summary carried in the content field. Publishing is gated by the `FEATURE_PUBLISH_NIP71` runtime flag while the rollout stabilizes. |
+| NIP-71 short video (`NOTE_TYPES.NIP71_SHORT_VIDEO`) | `22` | Same as `NOTE_TYPES.NIP71_VIDEO`; the kind differentiates short-form presentations. | Plain text summary; gated by `FEATURE_PUBLISH_NIP71`. |
 | Relay list (`NOTE_TYPES.RELAY_LIST`) | `10002` | Repeating `['r', <relay url>]` tags, optionally with a marker of `'read'` or `'write'` to scope the relay; marker omitted for read/write relays | Empty content |
 | View counter (`NOTE_TYPES.VIEW_EVENT`) | `WATCH_HISTORY_KIND` (default `30079`, clients also read legacy `30078`) | Canonical tag set: `['t','view']`, a pointer tag (`['e', <eventId>]` or `['a', <address>]`), and a stable dedupe tag `['d', <view identifier>]`, with optional `['session','true']` when a session actor signs; schema overrides may append extra tags. `['video', ...]` is supported for legacy overrides only. | Optional plaintext message |
 | Watch history index (`NOTE_TYPES.WATCH_HISTORY_INDEX`) | `WATCH_HISTORY_KIND` (default `30079`, clients also read legacy `30078`) | `['d', WATCH_HISTORY_LIST_IDENTIFIER]`, `['snapshot', <id>]`, `['chunks', <total>]`, repeated `['a', <chunk address>]` pointers plus schema append tags | JSON payload `{ snapshot, totalChunks }` (may be empty when using tags only) |
@@ -57,10 +87,22 @@ read/write split.
 | Admin blacklist (`NOTE_TYPES.ADMIN_BLACKLIST`) | `30000` | `['d', 'bitvid:admin:blacklist']`, repeated `['p', <pubkey>]` entries | Empty content |
 | Admin whitelist (`NOTE_TYPES.ADMIN_WHITELIST`) | `30000` | `['d', 'bitvid:admin:whitelist']`, repeated `['p', <pubkey>]` entries | Empty content |
 
+The `isPrivate` flag in Content Schema v3 marks cards that should stay off shared or public grids. Clients should suppress these events for everyone except the owner, even though the payload stays in clear text for compatibility.
+
 If you introduce a new Nostr feature, add its schema to
 `js/nostrEventSchemas.js` so that the catalogue stays complete and so existing
 builders inherit the same debugging knobs.
 
+### NIP-71 rollout
+
+BitVid now emits a paired NIP-71 event (kind `21` for long-form, `22` for short
+form) whenever the `FEATURE_PUBLISH_NIP71` flag is enabled. The builder converts
+structured upload metadata—image variants, captions, segments, hashtags, and
+participant pointers—into canonical tags so other clients can discover the same
+video. The legacy kind `30078` post remains the source of truth during the
+transition, and schema overrides can adjust either kind if relays need
+experimentation.
+
 ### Watch history identifiers
 
 The encrypted watch history pipeline is gated by the `FEATURE_WATCH_HISTORY_V2`
diff --git a/docs/nwc-compliance.md b/docs/nwc-compliance.md
new file mode 100644
index 00000000..fc0f0512
--- /dev/null
+++ b/docs/nwc-compliance.md
@@ -0,0 +1,53 @@
+# Nostr Wallet Connect Coverage
+
+This note cross-references Bitvid's current Nostr Wallet Connect (NIP-47) implementation with the official
+specification so we can quickly spot regressions or missing features.
+
+## URI handling
+
+* `parseNwcUri()` accepts all aliases we see in the wild (`nostr+walletconnect://`, `walletconnect://`, and `nwc://`)
+  and rejects unknown schemes before continuing. It extracts the wallet pubkey, all relay query parameters, and the
+  32-byte secret required for signing. The helper lowercases the secret, reserializes the URI in canonical form, and
+  derives the client public key from the secret so downstream calls can sign events without leaking user keys.
+
+## Connection lifecycle
+
+* `ensureActiveState()` caches the parsed connection and keeps WebSocket state so repeated actions reuse the same
+  subscription. When a new URI is supplied we tear down the previous socket, update the relay list, and reset
+  encryption state before reconnecting.
+* `connectSocket()` opens a WebSocket to the relay, subscribes to kind `23195` responses authored by the wallet and
+  addressed to the client pubkey, and hooks message/error/close callbacks so we can retry or surface failures.
+
+## Request flow
+
+* `ensureWallet()` validates that the user configured an NWC URI, connects to the relay if needed, and negotiates an
+  encryption scheme before returning the active context.
+* `encryptRequestPayload()` serializes the JSON-RPC payload, encrypts it with the selected scheme, and creates the
+  Nostr event with kind `23194`, `pubkey` set to the client key, a `p` tag pointing at the wallet, and an
+  `encryption` tag mirroring the algorithm that was used. Events are signed with the secret from the connection URI
+  so relays will accept them.
+* `sendPayment()` constructs the `pay_invoice` request, attaches a unique `id`, and dispatches it over the relay.
+
+## Response flow
+
+* `subscribeToResponses()` issues a `REQ` for kind `23195` events authored by the wallet and tagged for the client.
+* `handleSocketMessage()` decrypts responses, matches them against pending `id`s (or the `e` tag), clears pending
+  timeouts, and surfaces either the `result` or `error.code`/`error.message` back to callers.
+
+## Encryption negotiation
+
+* `requestInfoEvent()` fetches the wallet's replaceable kind `13194` info note and passes the result to
+  `getWalletSupportedEncryption()` so we only pick schemes advertised by the wallet service.
+* `getEncryptionCandidates()` prefers NIP-44 (`nip44_v2`) when both sides support it and falls back to NIP-04 when
+  necessary. We also remember schemes that failed so future retries skip them.
+
+## Current gaps
+
+* We only connect to the first relay supplied by the URI. If a wallet publishes multiple relays we should consider
+  retrying additional ones when the primary is offline.
+* The client currently implements the `pay_invoice` command. Other optional commands (`make_invoice`,
+  `get_balance`, `multi_pay_invoice`, etc.) and notification handling (kinds `23196`/`23197`) would require follow-up
+  work.
+* Wallet responses that signal `UNSUPPORTED_ENCRYPTION` as an error today bubble straight back to the caller. The
+  transport already retries once when we encounter that error during submission, but we could add richer UX (e.g.
+  prompting the user to reconnect) in the future.
diff --git a/index.html b/index.html
index fba2d26a..af6af67e 100644
--- a/index.html
+++ b/index.html
@@ -45,25 +45,33 @@
     <meta name="theme-color" content="#0f172a" />
 
     <!-- Styles -->
-    <script src="js/tracking.js" defer></script>
-    <link href="css/tailwind.generated.css" rel="stylesheet" />
-    <link href="css/style.css" rel="stylesheet" />
-    <link href="css/markdown.css" rel="stylesheet" />
+    <!--
+      Cache busting: keep these query strings in sync with config/asset-version.js
+      so browsers pick up the latest sidebar markup and styling without
+      hard-refreshing around CDN caches.
+    -->
+    <script src="js/tracking.js?v=2024.10.29" defer></script>
+    <link href="css/tailwind.generated.css?v=2024.10.29" rel="stylesheet" />
+    <link href="css/style.css?v=2024.10.29" rel="stylesheet" />
+    <link href="css/markdown.css?v=2024.10.29" rel="stylesheet" />
   </head>
-  <body class="bg-gray-100">
-    <!-- 
+  <body class="sidebar-collapsed">
+    <!--
       SIDEBAR CONTAINER:
-      The <aside id="sidebar"> inside handles visibility. 
+      The <aside id="sidebar"> inside handles visibility.
       By default, no special position or z-index on #sidebarContainer.
     -->
     <div id="sidebarContainer">
       <!-- components/sidebar.html gets injected here -->
     </div>
 
-    <!-- 
+    <div id="sidebarOverlay" class="md:hidden" aria-hidden="true"></div>
+
+    <!--
       MAIN CONTENT:
-      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.
+      Desktop spacing now follows the --sidebar-width custom property so the layout stays in
+      sync with the collapsible rail. On mobile we float the sidebar over the content and dim
+      the background overlay.
     -->
     <!--
       `fade-in` is scrubbed by js/index.js after the first animation so that
@@ -71,7 +79,11 @@
       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">
+    <div
+      id="app"
+      class="px-4 py-8 min-h-screen flex flex-col fade-in"
+      data-sidebar-state="collapsed"
+    >
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
@@ -84,6 +96,10 @@
         <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] fade-in"
+          type="button"
+          aria-expanded="false"
+          aria-controls="sidebar"
+          aria-label="Toggle navigation menu"
         >
           <img
             src="assets/svg/mobile-sidebar-menu-icon.svg"
@@ -198,38 +214,17 @@
     </div>
 
     <!-- Additional Scripts -->
-    <script type="module">
-      import * as nostrTools from "https://esm.sh/nostr-tools@1.8.3";
-
-      const normalizedGeneratePrivateKey =
-        typeof nostrTools.generatePrivateKey === "function"
-          ? nostrTools.generatePrivateKey
-          : typeof nostrTools.generateSecretKey === "function"
-          ? nostrTools.generateSecretKey
-          : undefined;
-
-      const normalizedGenerateSecretKey =
-        typeof nostrTools.generateSecretKey === "function"
-          ? nostrTools.generateSecretKey
-          : typeof nostrTools.generatePrivateKey === "function"
-          ? nostrTools.generatePrivateKey
-          : undefined;
-
-      window.NostrTools = {
-        ...nostrTools,
-        generatePrivateKey: normalizedGeneratePrivateKey,
-        generateSecretKey: normalizedGenerateSecretKey,
-      };
-    </script>
-    <script type="module" src="js/config.js"></script>
-    <script type="module" src="js/lists.js"></script>
-    <script type="module" src="js/accessControl.js"></script>
-    <script type="module" src="js/webtorrent.js"></script>
-    <script type="module" src="js/nostr.js"></script>
-    <script type="module" src="js/viewManager.js"></script>
-    <script type="module" src="js/app.js"></script>
-    <script type="module" src="js/disclaimer.js"></script>
-    <script type="module" src="js/index.js"></script>
+    <!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
+      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.29"></script>
+      <script type="module" src="js/config.js?v=2024.10.29"></script>
+      <script type="module" src="js/lists.js?v=2024.10.29"></script>
+      <script type="module" src="js/accessControl.js?v=2024.10.29"></script>
+      <script type="module" src="js/webtorrent.js?v=2024.10.29"></script>
+      <script type="module" src="js/nostr.js?v=2024.10.29"></script>
+    <script type="module" src="js/viewManager.js?v=2024.10.29"></script>
+    <script type="module" src="js/bootstrap.js?v=2024.10.29"></script>
+    <script type="module" src="js/disclaimer.js?v=2024.10.29"></script>
+    <script type="module" src="js/index.js?v=2024.10.29"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
   </body>
diff --git a/js/adminListStore.js b/js/adminListStore.js
index 1abb14bc..f46ff07f 100644
--- a/js/adminListStore.js
+++ b/js/adminListStore.js
@@ -36,6 +36,19 @@ function normalizeNpub(value) {
   return typeof value === "string" ? value.trim() : "";
 }
 
+const HEX_PUBKEY_REGEX = /^[0-9a-f]{64}$/i;
+
+function isHexPubkey(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return false;
+  }
+  return HEX_PUBKEY_REGEX.test(trimmed);
+}
+
 function dedupeNpubs(values) {
   const normalized = Array.isArray(values) ? values.map(normalizeNpub) : [];
   return Array.from(
@@ -238,17 +251,67 @@ function encodeHexToNpub(hex) {
   }
 }
 
+function normalizeParticipantTagValue(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+
+  const nip19 = window?.NostrTools?.nip19;
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("npub")) {
+    if (nip19?.decode) {
+      try {
+        const decoded = nip19.decode(trimmed);
+        if (decoded?.type === "npub") {
+          return trimmed;
+        }
+      } catch (error) {
+        // Swallow decode errors so we can still fall back to the raw npub string.
+      }
+    }
+    return trimmed;
+  }
+
+  if (isHexPubkey(trimmed)) {
+    const encoded = encodeHexToNpub(trimmed);
+    if (encoded) {
+      return encoded;
+    }
+    if (!canDecodeNpub()) {
+      return trimmed;
+    }
+  }
+
+  if (nip19?.decode) {
+    try {
+      const decoded = nip19.decode(trimmed);
+      if (decoded?.type === "npub") {
+        return trimmed;
+      }
+    } catch (error) {
+      // Ignore decode failures; values that cannot be interpreted as npubs are dropped.
+    }
+  }
+
+  return "";
+}
+
 function extractNpubsFromEvent(event) {
   if (!event || !Array.isArray(event.tags)) {
     return [];
   }
 
-  const hexKeys = event.tags
+  const candidates = event.tags
     .filter((tag) => Array.isArray(tag) && tag[0] === "p" && tag[1])
     .map((tag) => tag[1]);
 
-  const npubs = hexKeys
-    .map((hex) => encodeHexToNpub(hex))
+  const npubs = candidates
+    .map((value) => normalizeParticipantTagValue(value))
     .filter((npub) => typeof npub === "string" && npub);
 
   return dedupeNpubs(npubs);
@@ -570,3 +633,8 @@ export async function persistAdminState(actorNpub, updates) {
 
   return persistNostrState(actorNpub, updates);
 }
+
+export const __adminListStoreTestHooks = Object.freeze({
+  extractNpubsFromEvent,
+  normalizeParticipantTagValue,
+});
diff --git a/js/app.js b/js/app.js
index f33c9653..a6b4bd32 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,14 +1,15 @@
 // js/app.js
 
-import { loadView } from "./viewManager.js";
-import {
-  nostrClient,
-  normalizePointerInput,
-  pointerKey as derivePointerKey,
-} from "./nostr.js";
+import { nostrClient } from "./nostr.js";
 import { torrentClient } from "./webtorrent.js";
-import { isDevMode, ADMIN_SUPER_NPUB } from "./config.js";
-import { accessControl, normalizeNpub } from "./accessControl.js";
+import {
+  isDevMode,
+  ADMIN_SUPER_NPUB,
+  ADMIN_DM_IMAGE_URL,
+  BITVID_WEBSITE_URL,
+  MAX_WALLET_DEFAULT_ZAP,
+} from "./config.js";
+import { accessControl } from "./accessControl.js";
 import { safeDecodeMagnet } from "./magnetUtils.js";
 import { extractMagnetHints, normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
@@ -19,32 +20,29 @@ import { attachUrlHealthBadges } from "./urlHealthObserver.js";
 import { ADMIN_INITIAL_EVENT_BLACKLIST } from "./lists.js";
 import { userBlocks } from "./userBlocks.js";
 import { relayManager } from "./relayManager.js";
+import {
+  createFeedEngine,
+  createActiveNostrSource,
+  createBlacklistFilterStage,
+  createDedupeByRootStage,
+  createChronologicalSorter,
+  createSubscriptionAuthorsSource,
+  registerWatchHistoryFeed,
+} from "./feedEngine/index.js";
 import watchHistoryService from "./watchHistoryService.js";
-import {
-  loadR2Settings,
-  saveR2Settings,
-  clearR2Settings,
-  buildR2Key,
-  buildPublicUrl,
-  mergeBucketEntry,
-  sanitizeBaseDomain,
-} from "./r2.js";
-import {
-  sanitizeBucketName,
-  ensureBucket,
-  putCors,
-  attachCustomDomainAndWait,
-  setManagedDomain,
-  deriveShortSubdomain,
-} from "./storage/r2-mgmt.js";
-import {
-  makeR2Client,
-  multipartUpload,
-  ensureBucketCors,
-} from "./storage/r2-s3.js";
+import r2Service from "./services/r2Service.js";
+import PlaybackService from "./services/playbackService.js";
+import AuthService from "./services/authService.js";
+import NwcSettingsService from "./services/nwcSettingsService.js";
+import nostrService from "./services/nostrService.js";
+import DiscussionCountService from "./services/discussionCountService.js";
 import { initQuickR2Upload } from "./r2-quick.js";
 import { createWatchHistoryRenderer } from "./historyView.js";
+import WatchHistoryController from "./ui/watchHistoryController.js";
+import WatchHistoryTelemetry from "./services/watchHistoryTelemetry.js";
 import { getSidebarLoadingMarkup } from "./sidebarLoading.js";
+import { subscriptions } from "./subscriptions.js";
+import { isWatchHistoryDebugEnabled } from "./watchHistoryDebug.js";
 import {
   initViewCounter,
   subscribeToVideoViewCount,
@@ -52,334 +50,65 @@ import {
   formatViewCount,
   ingestLocalViewEvent,
 } from "./viewCounter.js";
-
-function truncateMiddle(text, maxLength = 72) {
-  if (!text || typeof text !== "string") {
-    return "";
-  }
-
-  if (text.length <= maxLength) {
-    return text;
-  }
-
-  const ellipsis = "…";
-  const charsToShow = maxLength - ellipsis.length;
-  const front = Math.ceil(charsToShow / 2);
-  const back = Math.floor(charsToShow / 2);
-  return `${text.slice(0, front)}${ellipsis}${text.slice(text.length - back)}`;
-}
-
-function pointerArrayToKey(pointer) {
-  if (!Array.isArray(pointer) || pointer.length < 2) {
-    return "";
-  }
-
-  const type = pointer[0] === "a" ? "a" : pointer[0] === "e" ? "e" : "";
-  if (!type) {
-    return "";
-  }
-
-  const value =
-    typeof pointer[1] === "string" ? pointer[1].trim().toLowerCase() : "";
-  if (!value) {
-    return "";
-  }
-
-  const relay =
-    pointer.length > 2 && typeof pointer[2] === "string"
-      ? pointer[2].trim()
-      : "";
-
-  return relay ? `${type}:${value}:${relay}` : `${type}:${value}`;
-}
-
-/**
- * Simple "decryption" placeholder for private videos.
- */
-function fakeDecrypt(str) {
-  return str.split("").reverse().join("");
-}
+import { splitAndZap as splitAndZapDefault } from "./payments/zapSplit.js";
+import {
+  formatAbsoluteTimestamp as formatAbsoluteTimestampUtil,
+  formatTimeAgo as formatTimeAgoUtil,
+  truncateMiddle,
+} from "./utils/formatters.js";
+import {
+  escapeHTML as escapeHtml,
+  removeTrackingScripts,
+} from "./utils/domUtils.js";
+import { VideoModal } from "./ui/components/VideoModal.js";
+import { UploadModal } from "./ui/components/UploadModal.js";
+import { EditModal } from "./ui/components/EditModal.js";
+import { RevertModal } from "./ui/components/RevertModal.js";
+import { VideoListView } from "./ui/views/VideoListView.js";
+import MoreMenuController from "./ui/moreMenuController.js";
+import ProfileModalController from "./ui/profileModalController.js";
+import ZapController from "./ui/zapController.js";
+import { MediaLoader } from "./utils/mediaLoader.js";
+import { pointerArrayToKey } from "./utils/pointer.js";
+import { resolveVideoPointer } from "./utils/videoPointer.js";
+import { isValidMagnetUri } from "./utils/magnetValidators.js";
+import { dedupeToNewestByRoot } from "./utils/videoDeduper.js";
+import {
+  getVideoRootIdentifier,
+  applyRootTimestampToVideosMap,
+  syncActiveVideoRootTimestamp,
+} from "./utils/videoTimestamps.js";
+import {
+  getPubkey as getStoredPubkey,
+  setPubkey as setStoredPubkey,
+  getCurrentUserNpub as getStoredCurrentUserNpub,
+  setCurrentUserNpub as setStoredCurrentUserNpub,
+  getCurrentVideo as getStoredCurrentVideo,
+  setCurrentVideo as setStoredCurrentVideo,
+  setModalState as setGlobalModalState,
+  subscribeToAppStateKey,
+} from "./state/appState.js";
+import {
+  getSavedProfiles,
+  getActiveProfilePubkey,
+  setActiveProfilePubkey as setStoredActiveProfilePubkey,
+  setSavedProfiles,
+  persistSavedProfiles,
+  getProfileCacheMap,
+  getCachedUrlHealth as readCachedUrlHealth,
+  storeUrlHealth as persistUrlHealth,
+  setInFlightUrlProbe,
+  getInFlightUrlProbe,
+  URL_PROBE_TIMEOUT_MS,
+  urlHealthConstants,
+} from "./state/cache.js";
 
 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 ADMIN_DM_IMAGE_URL =
-  "https://beta.bitvid.network/assets/jpg/video-thumbnail-fallback.jpg";
-const BITVID_WEBSITE_URL = "https://bitvid.network/";
-const MAX_DISCUSSION_COUNT_VIDEOS = 24;
 const VIDEO_EVENT_KIND = 30078;
-const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
-const EMPTY_VIDEO_LIST_SIGNATURE = "__EMPTY__";
-/**
- * Local storage keys for cached profile metadata and saved authentication
- * sessions. `SAVED_PROFILES_STORAGE_KEY` stores objects shaped like
- * `{ version: 1, entries: [{ pubkey, npub, name, picture, authType }],
- *   activePubkey?: string | null }`. `authType` currently supports `"nip07"`
- * and reserves `"nsec"` for future direct key flows. See docs/nostr-auth.md
- * for extension guidance.
- */
-const PROFILE_CACHE_STORAGE_KEY = "bitvid:profileCache:v1";
-const SAVED_PROFILES_STORAGE_KEY = "bitvid:savedProfiles:v1";
-const SAVED_PROFILES_STORAGE_VERSION = 1;
 const HEX64_REGEX = /^[0-9a-f]{64}$/i;
-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_HEALTH_TIMEOUT_RETRY_MS = 5 * 60 * 1000; // 5 minutes
-const URL_PROBE_TIMEOUT_MS = 8 * 1000; // 8 seconds
-const URL_PROBE_TIMEOUT_RETRY_MS = 15 * 1000; // 15 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 buildUrlProbeKey(url, options = {}) {
-  const trimmed = typeof url === "string" ? url : "";
-  const mode = options?.confirmPlayable ? "playable" : "basic";
-  return `${trimmed}::${mode}`;
-}
-
-function setInFlightUrlProbe(eventId, url, promise, options = {}) {
-  if (!eventId || !promise) {
-    return;
-  }
-
-  const key = buildUrlProbeKey(url, options);
-  urlHealthInFlight.set(eventId, { promise, key });
-  promise.finally(() => {
-    const current = urlHealthInFlight.get(eventId);
-    if (current && current.promise === promise) {
-      urlHealthInFlight.delete(eventId);
-    }
-  });
-}
-
-function getInFlightUrlProbe(eventId, url, options = {}) {
-  if (!eventId) {
-    return null;
-  }
-
-  const entry = urlHealthInFlight.get(eventId);
-  if (!entry) {
-    return null;
-  }
-
-  const key = buildUrlProbeKey(url, options);
-  if (entry.key && entry.key !== key) {
-    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).
  *
@@ -390,292 +119,439 @@ function isValidMagnetUri(magnet) {
  * This will load the real image source from `imgElement.dataset.lazy`
  * once the image enters the viewport.
  */
-class MediaLoader {
-  constructor(rootMargin = "50px") {
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            const el = entry.target;
-            const lazySrc =
-              typeof el.dataset.lazy === "string"
-                ? el.dataset.lazy.trim()
-                : "";
-
-            if (lazySrc) {
-              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);
-          }
-        }
-      },
-      { rootMargin }
-    );
+class Application {
+  get pubkey() {
+    return getStoredPubkey();
   }
 
-  observe(el) {
-    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);
-    }
+  set pubkey(value) {
+    setStoredPubkey(value ?? null);
   }
 
-  disconnect() {
-    this.observer.disconnect();
+  get currentUserNpub() {
+    return getStoredCurrentUserNpub();
   }
-}
 
-class bitvidApp {
-  constructor() {
+  set currentUserNpub(value) {
+    setStoredCurrentUserNpub(value ?? null);
+  }
+
+  get currentVideo() {
+    return getStoredCurrentVideo();
+  }
+
+  set currentVideo(value) {
+    setStoredCurrentVideo(value ?? null);
+  }
+
+  constructor({ services = {}, ui = {}, helpers = {}, loadView: viewLoader } = {}) {
+    this.loadView = typeof viewLoader === "function" ? viewLoader : null;
+
     // Basic auth/display elements
     this.loginButton = document.getElementById("loginButton") || null;
     this.logoutButton = document.getElementById("logoutButton") || null;
     this.userStatus = document.getElementById("userStatus") || null;
     this.userPubKey = document.getElementById("userPubKey") || null;
 
-    // Lazy-loading helper for images
-    this.mediaLoader = new MediaLoader();
+    const mediaLoaderFactory =
+      typeof helpers.mediaLoaderFactory === "function"
+        ? helpers.mediaLoaderFactory
+        : () => new MediaLoader();
+    this.mediaLoader =
+      helpers.mediaLoader instanceof MediaLoader
+        ? helpers.mediaLoader
+        : mediaLoaderFactory();
     this.loadedThumbnails = new Map();
-    this.videoDiscussionCountCache = new Map();
-    this.inFlightDiscussionCounts = new Map();
+    this.urlHealthSnapshots = new Map();
+    this.streamHealthSnapshots = new Map();
+    this.boundStreamHealthBadgeHandler = (detail) =>
+      this.handleStreamHealthBadgeUpdate(detail);
+    this.attachHealthBadgesWithCache = (container) => {
+      attachHealthBadges(container, {
+        onUpdate: this.boundStreamHealthBadgeHandler,
+      });
+    };
+    this.relayManager = relayManager;
     this.activeIntervals = [];
-    this.urlPlaybackWatchdogCleanup = null;
-    this.watchHistoryMetadataEnabled = null;
-    this.watchHistoryPreferenceUnsubscribe = null;
+    this.watchHistoryTelemetry = null;
+    this.authEventUnsubscribes = [];
+    this.unsubscribeFromNostrService = null;
+    this.videoModalReadyPromise = null;
+    this.boundUploadSubmitHandler = null;
+    this.boundEditModalSubmitHandler = null;
+    this.boundEditModalCancelHandler = null;
+    this.boundRevertConfirmHandler = null;
+    this.boundVideoModalCloseHandler = null;
+    this.boundVideoModalCopyHandler = null;
+    this.boundVideoModalShareHandler = null;
+    this.boundVideoModalCreatorHandler = null;
+    this.boundVideoModalZapHandler = null;
+    this.boundVideoModalZapWalletHandler = null;
+    this.videoListViewPlaybackHandler = null;
+    this.videoListViewEditHandler = null;
+    this.videoListViewRevertHandler = null;
+    this.videoListViewDeleteHandler = null;
+    this.moreMenuController = null;
+    this.latestFeedMetadata = null;
+
+    this.nostrService = services.nostrService || nostrService;
+    this.r2Service = services.r2Service || r2Service;
+
+    const feedEngineLogger = (...args) => {
+      if (!isWatchHistoryDebugEnabled()) {
+        return;
+      }
+      if (!Array.isArray(args) || args.length === 0) {
+        return;
+      }
+      const [prefix, ...rest] = args;
+      if (typeof prefix === "string" && !prefix.includes("watch-history")) {
+        return;
+      }
+      try {
+        if (rest.length) {
+          console.info(prefix, ...rest);
+        } else {
+          console.info(prefix);
+        }
+      } catch (error) {
+        if (rest.length) {
+          console.log(prefix, ...rest);
+        } else {
+          console.log(prefix);
+        }
+      }
+    };
+
+    this.feedEngine =
+      services.feedEngine ||
+      createFeedEngine({
+        logger: feedEngineLogger,
+      });
+    this.payments = services.payments || null;
+    this.splitAndZap =
+      (services.payments && services.payments.splitAndZap) ||
+      splitAndZapDefault;
+
+    this.discussionCountService =
+      services.discussionCountService || new DiscussionCountService();
+
+    this.nwcSettingsService =
+      services.nwcSettingsService ||
+      new NwcSettingsService({
+        normalizeHexPubkey: (value) => this.normalizeHexPubkey(value),
+        getActivePubkey: () => this.pubkey,
+        payments: this.payments,
+        logger: {
+          warn: (...args) => console.warn(...args),
+        },
+        notifyError: (message) => this.showError(message),
+        maxWalletDefaultZap: MAX_WALLET_DEFAULT_ZAP,
+      });
+    if (
+      this.nwcSettingsService &&
+      typeof this.nwcSettingsService.setActivePubkeyGetter === "function"
+    ) {
+      this.nwcSettingsService.setActivePubkeyGetter(() => this.pubkey);
+    }
+    if (
+      this.nwcSettingsService &&
+      typeof this.nwcSettingsService.setPayments === "function"
+    ) {
+      this.nwcSettingsService.setPayments(this.payments);
+    }
+    if (
+      this.feedEngine &&
+      typeof this.feedEngine.run !== "function" &&
+      typeof this.feedEngine.runFeed === "function"
+    ) {
+      this.feedEngine.run = (...args) => this.feedEngine.runFeed(...args);
+    }
+    this.registerRecentFeed();
+    this.registerSubscriptionsFeed();
+    this.registerWatchHistoryFeed();
+
+    this.watchHistoryController = new WatchHistoryController({
+      watchHistoryService,
+      nostrClient,
+      showError: (message) => this.showError(message),
+      showSuccess: (message) => this.showSuccess(message),
+      dropWatchHistoryMetadata: (pointerKey) =>
+        this.dropWatchHistoryMetadata(pointerKey),
+      getActivePubkey: () =>
+        typeof this.pubkey === "string" && this.pubkey ? this.pubkey : "",
+    });
+
+    this.watchHistoryTelemetry = new WatchHistoryTelemetry({
+      watchHistoryService,
+      watchHistoryController: this.watchHistoryController,
+      nostrClient,
+      log: (message, ...args) => this.log(message, ...args),
+      normalizeHexPubkey: (value) => this.normalizeHexPubkey(value),
+      getActiveUserPubkey: () => this.pubkey,
+      ingestLocalViewEvent,
+    });
+
+    this.playbackService =
+      services.playbackService ||
+      new PlaybackService({
+        logger: (message, ...args) => this.log(message, ...args),
+        torrentClient,
+        deriveTorrentPlaybackConfig,
+        isValidMagnetUri,
+        urlFirstEnabled: URL_FIRST_ENABLED,
+        analyticsCallbacks: {
+          "session-start": (detail) => {
+            const urlProvided = detail?.urlProvided ? "true" : "false";
+            const magnetProvided = detail?.magnetProvided ? "true" : "false";
+            const magnetUsable = detail?.magnetUsable ? "true" : "false";
+            this.log(
+              `[playVideoWithFallback] Session start urlProvided=${urlProvided} magnetProvided=${magnetProvided} magnetUsable=${magnetUsable}`
+            );
+          },
+          fallback: (detail) => {
+            if (detail?.reason) {
+              this.log(
+                `[playVideoWithFallback] Falling back to WebTorrent (${detail.reason}).`
+              );
+            }
+          },
+          error: (detail) => {
+            if (detail?.error) {
+              this.log("[playVideoWithFallback] Playback error observed", detail.error);
+            }
+          },
+        },
+      });
+    this.activePlaybackResultPromise = null;
+    this.activePlaybackSession = null;
+
+    this.authService =
+      services.authService ||
+      new AuthService({
+        nostrClient,
+        userBlocks,
+        relayManager,
+        logger: (message, ...args) => this.log(message, ...args),
+      });
+    this.authEventUnsubscribes.push(
+      this.authService.on("auth:login", (detail) => this.handleAuthLogin(detail))
+    );
+    this.authEventUnsubscribes.push(
+      this.authService.on("auth:logout", (detail) =>
+        this.handleAuthLogout(detail)
+      )
+    );
+    this.authEventUnsubscribes.push(
+      this.authService.on("profile:updated", (detail) =>
+        this.handleProfileUpdated(detail)
+      )
+    );
 
     // Optional: a "profile" button or avatar (if used)
     this.profileButton = document.getElementById("profileButton") || null;
     this.profileAvatar = document.getElementById("profileAvatar") || null;
 
-    // Profile modal references (if used in profile-modal.html)
-    this.profileModal = null;
-    this.closeProfileModal = null;
-    this.profileLogoutBtn = null;
-    this.profileModalAvatar = null;
-    this.profileModalName = null;
-    this.profileModalNpub = null;
-    this.profileChannelLink = null;
-    this.profileNavButtons = {
-      account: null,
-      relays: null,
-      blocked: null,
-      history: null,
-      admin: null,
-    };
-    this.profilePaneElements = {
-      account: null,
-      relays: null,
-      blocked: null,
-      history: null,
-      admin: null,
-    };
-    this.profileRelayList = null;
-    this.profileBlockedList = null;
-    this.profileBlockedEmpty = null;
-    this.profileBlockedInput = null;
-    this.profileAddBlockedBtn = null;
-    this.profileRelayInput = null;
-    this.profileAddRelayBtn = null;
-    this.profileRestoreRelaysBtn = null;
-    this.profileHistoryRenderer = null;
-    this.activeProfilePane = null;
-    this.adminModeratorInput = null;
-    this.adminAddModeratorBtn = null;
-    this.adminModeratorList = null;
-    this.adminModeratorsEmpty = null;
-    this.adminModeratorsSection = null;
-    this.adminWhitelistInput = null;
-    this.adminAddWhitelistBtn = null;
-    this.adminWhitelistList = null;
-    this.adminWhitelistEmpty = null;
-    this.adminWhitelistSection = null;
-    this.adminBlacklistInput = null;
-    this.adminAddBlacklistBtn = null;
-    this.adminBlacklistList = null;
-    this.adminBlacklistEmpty = null;
-    this.adminBlacklistSection = null;
-    this.lastFocusedBeforeProfileModal = null;
-    this.boundProfileModalKeydown = null;
-    this.boundProfileModalFocusIn = null;
-    this.boundProfileHistoryVisibility = null;
-    this.profileModalFocusables = [];
-    this.profileSwitcherList = null;
-    this.profileAddAccountBtn = null;
-    this.profileSwitcherSelectionPubkey = null;
+    // Profile modal controller state
+    this.profileController = null;
     this.currentUserNpub = null;
 
-    // Upload modal elements
+    // Upload modal component
     this.uploadButton = document.getElementById("uploadButton") || null;
-    this.uploadModal = document.getElementById("uploadModal") || null;
-    this.closeUploadModalBtn =
-      document.getElementById("closeUploadModal") || null;
-    this.uploadForm = document.getElementById("uploadForm") || null;
-    this.uploadEnableCommentsInput = null;
-    this.uploadModeToggleButtons = [];
-    this.customUploadSection = null;
-    this.cloudflareUploadSection = null;
-    this.activeUploadMode = "custom";
-    this.cloudflareSettings = null;
-    this.cloudflareSettingsForm = null;
-    this.cloudflareClearSettingsButton = null;
-    this.cloudflareSettingsStatus = null;
-    this.cloudflareBucketPreview = null;
-    this.cloudflareUploadForm = null;
-    this.cloudflareFileInput = null;
-    this.cloudflareUploadButton = null;
-    this.cloudflareUploadStatus = null;
-    this.cloudflareProgressBar = null;
-    this.cloudflareProgressFill = null;
-    this.cloudflareTitleInput = null;
-    this.cloudflareDescriptionInput = null;
-    this.cloudflareThumbnailInput = null;
-    this.cloudflareMagnetInput = null;
-    this.cloudflareWsInput = null;
-    this.cloudflareXsInput = null;
-    this.cloudflareEnableCommentsInput = null;
-    this.cloudflareAdvancedToggle = null;
-    this.cloudflareAdvancedToggleLabel = null;
-    this.cloudflareAdvancedToggleIcon = null;
-    this.cloudflareAdvancedFields = null;
-    this.cloudflareAdvancedVisible = false;
-    this.r2AccountIdInput = null;
-    this.r2AccessKeyIdInput = null;
-    this.r2SecretAccessKeyInput = null;
-    this.r2ApiTokenInput = null;
-    this.r2ZoneIdInput = null;
-    this.r2BaseDomainInput = null;
+    const uploadModalEvents = new EventTarget();
+    this.uploadModal =
+      (typeof ui.uploadModal === "function"
+        ? ui.uploadModal({ app: this, eventTarget: uploadModalEvents })
+        : ui.uploadModal) ||
+      new UploadModal({
+        authService: this.authService,
+        r2Service: this.r2Service,
+        publishVideoNote: (payload, options) =>
+          this.publishVideoNote(payload, options),
+        removeTrackingScripts,
+        setGlobalModalState,
+        showError: (message) => this.showError(message),
+        showSuccess: (message) => this.showSuccess(message),
+        getCurrentPubkey: () => this.pubkey,
+        safeEncodeNpub: (pubkey) => this.safeEncodeNpub(pubkey),
+        eventTarget: uploadModalEvents,
+        container: document.getElementById("modalContainer") || null,
+      });
+    this.boundUploadSubmitHandler = (event) => {
+      this.handleUploadSubmitEvent(event);
+    };
+    this.uploadModal.addEventListener(
+      "upload:submit",
+      this.boundUploadSubmitHandler
+    );
 
-    // Edit video modal elements
-    this.editVideoModal = null;
-    this.editVideoOverlay = null;
-    this.editVideoForm = null;
-    this.closeEditVideoModalBtn = null;
-    this.cancelEditVideoBtn = null;
-    this.editVideoSubmitBtn = null;
-    this.editVideoFieldButtons = [];
-    this.activeEditVideo = null;
+    const editModalEvents = new EventTarget();
+    this.editModal =
+      (typeof ui.editModal === "function"
+        ? ui.editModal({ app: this, eventTarget: editModalEvents })
+        : ui.editModal) ||
+      new EditModal({
+        removeTrackingScripts,
+        setGlobalModalState,
+        showError: (message) => this.showError(message),
+        getMode: () => (isDevMode ? "dev" : "live"),
+        sanitizers: {
+          text: (value) => (typeof value === "string" ? value.trim() : ""),
+          url: (value) => (typeof value === "string" ? value.trim() : ""),
+          magnet: (value) => (typeof value === "string" ? value.trim() : ""),
+          checkbox: (value) => !!value,
+        },
+        escapeHtml: (value) => escapeHtml(value),
+        eventTarget: editModalEvents,
+        container: document.getElementById("modalContainer") || null,
+      });
+
+    this.boundEditModalSubmitHandler = (event) => {
+      this.handleEditModalSubmit(event);
+    };
+    this.editModal.addEventListener(
+      "video:edit-submit",
+      this.boundEditModalSubmitHandler
+    );
+
+    this.boundEditModalCancelHandler = () => {
+      this.showError("");
+    };
+    this.editModal.addEventListener(
+      "video:edit-cancel",
+      this.boundEditModalCancelHandler
+    );
+
+    this.revertModal =
+      (typeof ui.revertModal === "function"
+        ? ui.revertModal({ app: this })
+        : ui.revertModal) ||
+      new RevertModal({
+        removeTrackingScripts,
+        setGlobalModalState,
+        formatAbsoluteTimestamp: (timestamp) =>
+          this.formatAbsoluteTimestamp(timestamp),
+        formatTimeAgo: (timestamp) => this.formatTimeAgo(timestamp),
+        escapeHTML: (value) => this.escapeHTML(value),
+        truncateMiddle,
+        fallbackThumbnailSrc: FALLBACK_THUMBNAIL_SRC,
+        container: document.getElementById("modalContainer") || null,
+      });
+
+    this.boundRevertConfirmHandler = (event) => {
+      this.handleRevertModalConfirm(event);
+    };
+    this.revertModal.addEventListener(
+      "video:revert-confirm",
+      this.boundRevertConfirmHandler
+    );
+
+    try {
+      const profileModalContainer = document.getElementById("modalContainer") || null;
+      if (profileModalContainer) {
+        const profileModalServices = {
+          normalizeHexPubkey: (value) => this.normalizeHexPubkey(value),
+          safeEncodeNpub: (pubkey) => this.safeEncodeNpub(pubkey),
+          safeDecodeNpub: (npub) => this.safeDecodeNpub(npub),
+          truncateMiddle: (value, maxLength) => truncateMiddle(value, maxLength),
+          getProfileCacheEntry: (pubkey) => this.getProfileCacheEntry(pubkey),
+          batchFetchProfiles: (authorSet) => this.batchFetchProfiles(authorSet),
+          switchProfile: (pubkey) => this.authService.switchProfile(pubkey),
+          removeSavedProfile: (pubkey) =>
+            this.authService.removeSavedProfile(pubkey),
+          relayManager,
+          userBlocks,
+          nostrClient,
+          accessControl,
+          getCurrentUserNpub: () => this.getCurrentUserNpub(),
+          nwcSettings: this.nwcSettingsService,
+          loadVideos: (forceFetch, context) =>
+            this.loadVideos(forceFetch, context),
+          onVideosShouldRefresh: (context) =>
+            this.onVideosShouldRefresh(context),
+          describeAdminError: (code) => this.describeAdminError(code),
+          describeNotificationError: (code) =>
+            this.describeNotificationError(code),
+          onAccessControlUpdated: () => this.onAccessControlUpdated(),
+          persistSavedProfiles: (options) => persistSavedProfiles(options),
+          watchHistoryService,
+          authService: this.authService,
+          log: (...args) => this.log(...args),
+          closeAllMoreMenus: () => this.closeAllMoreMenus(),
+        };
+
+        const profileModalState = {
+          getSavedProfiles: () => getSavedProfiles(),
+          setSavedProfiles: (profiles, options) =>
+            setSavedProfiles(Array.isArray(profiles) ? profiles : [], options),
+          persistSavedProfiles: (options) => persistSavedProfiles(options),
+          getActivePubkey: () => getActiveProfilePubkey(),
+          setActivePubkey: (pubkey, options) => {
+            const normalized =
+              typeof pubkey === "string" && pubkey.trim()
+                ? pubkey.trim()
+                : null;
+            setStoredActiveProfilePubkey(normalized, options);
+            return getActiveProfilePubkey();
+          },
+        };
+
+        const profileModalCallbacks = {
+          onClose: () => this.handleProfileModalClosed(),
+          onLogout: async () => this.authService.logout(),
+          onChannelLink: (element) => this.handleProfileChannelLink(element),
+          onAddAccount: (controller) => this.handleAddProfile(controller),
+          onRequestSwitchProfile: (payload) =>
+            this.handleProfileSwitchRequest(payload),
+          onRelayOperation: (payload) =>
+            this.handleProfileRelayOperation(payload),
+          onRelayModeToggle: (payload) =>
+            this.handleProfileRelayModeToggle(payload),
+          onRelayRestore: (payload) =>
+            this.handleProfileRelayRestore(payload),
+          onBlocklistMutation: (payload) =>
+            this.handleProfileBlocklistMutation(payload),
+          onWalletPersist: (payload) =>
+            this.handleProfileWalletPersist(payload),
+          onWalletTestRequest: (payload) =>
+            this.handleProfileWalletTest(payload),
+          onWalletDisconnectRequest: (payload) =>
+            this.handleProfileWalletDisconnect(payload),
+          onAdminMutation: (payload) =>
+            this.handleProfileAdminMutation(payload),
+          onAdminNotifyError: (payload) =>
+            this.handleProfileAdminNotifyError(payload),
+          onHistoryReady: (payload) =>
+            this.handleProfileHistoryEvent(payload),
+        };
+
+        this.profileController = new ProfileModalController({
+          modalContainer: profileModalContainer,
+          removeTrackingScripts,
+          createWatchHistoryRenderer,
+          setGlobalModalState,
+          showError: (message) => this.showError(message),
+          showSuccess: (message) => this.showSuccess(message),
+          showStatus: (message) => this.showStatus(message),
+          constants: {
+            MAX_WALLET_DEFAULT_ZAP,
+            ADMIN_SUPER_NPUB,
+            ADMIN_DM_IMAGE_URL,
+            BITVID_WEBSITE_URL,
+          },
+          services: profileModalServices,
+          state: profileModalState,
+          callbacks: profileModalCallbacks,
+        });
+      } else {
+        console.warn(
+          "[Application] Profile modal controller disabled: modal container not found.",
+        );
+      }
+    } catch (error) {
+      console.error("Failed to initialize profile modal controller:", error);
+    }
 
-    // Revert video modal elements
-    this.revertVideoModal = null;
-    this.revertVideoOverlay = null;
-    this.revertVersionsList = null;
-    this.revertVersionDetails = null;
-    this.revertVersionPlaceholder = null;
-    this.revertVersionDetailsDefaultHTML = "";
-    this.revertHistoryCount = null;
-    this.revertSelectionStatus = null;
-    this.revertModalTitle = null;
-    this.revertModalSubtitle = null;
-    this.closeRevertVideoModalBtn = null;
-    this.cancelRevertVideoBtn = null;
-    this.confirmRevertVideoBtn = null;
-    this.activeRevertVideo = null;
-    this.revertHistory = [];
-    this.selectedRevertTarget = null;
-    this.revertModalBusy = false;
-    this.revertConfirmDefaultLabel = "Revert to selected version";
-    this.pendingRevertEntries = [];
 
     // Optional small inline player stats
     this.status = document.getElementById("status") || null;
@@ -684,28 +560,152 @@ class bitvidApp {
     this.speed = document.getElementById("speed") || null;
     this.downloaded = document.getElementById("downloaded") || null;
 
-    // Video player modal references (loaded via video-modal.html)
-    this.playerModal = null;
-    this.modalVideo = null;
-    this.modalStatus = null;
-    this.modalProgress = null;
-    this.modalPeers = null;
-    this.modalSpeed = null;
-    this.modalDownloaded = null;
-    this.closePlayerBtn = null;
-    this.videoTitle = null;
-    this.videoDescription = null;
-    this.videoTimestamp = null;
-    this.creatorAvatar = null;
-    this.creatorName = null;
-    this.creatorNpub = null;
-    this.copyMagnetBtn = null;
-    this.shareBtn = null;
-    this.modalZapBtn = null;
-    this.modalMoreBtn = null;
-    this.modalMoreMenu = null;
-    this.modalPosterCleanup = null;
     this.cleanupPromise = null;
+    this.zapController = null;
+
+    this.videoModal =
+      (typeof ui.videoModal === "function"
+        ? ui.videoModal({ app: this })
+        : ui.videoModal) ||
+      new VideoModal({
+        removeTrackingScripts,
+        setGlobalModalState,
+        document,
+        logger: {
+          log: (message, ...args) => this.log(message, ...args),
+        },
+      });
+    this.zapController = new ZapController({
+      videoModal: this.videoModal,
+      getCurrentVideo: () => this.currentVideo,
+      nwcSettings: this.nwcSettingsService,
+      isUserLoggedIn: () => this.isUserLoggedIn(),
+      splitAndZap: (...args) => this.splitAndZap(...args),
+      payments: this.payments,
+      callbacks: {
+        onSuccess: (message) => this.showSuccess(message),
+        onError: (message) => this.showError(message),
+      },
+      requestWalletPane: () =>
+        this.profileController?.showWalletPane?.(),
+    });
+    this.boundVideoModalCloseHandler = () => {
+      this.hideModal();
+    };
+    this.videoModal.addEventListener(
+      "modal:close",
+      this.boundVideoModalCloseHandler
+    );
+    this.boundVideoModalCopyHandler = () => {
+      this.handleCopyMagnet();
+    };
+    this.videoModal.addEventListener(
+      "video:copy-magnet",
+      this.boundVideoModalCopyHandler
+    );
+    this.boundVideoModalShareHandler = () => {
+      this.shareActiveVideo();
+    };
+    this.videoModal.addEventListener(
+      "video:share",
+      this.boundVideoModalShareHandler
+    );
+    this.boundVideoModalCreatorHandler = () => {
+      this.openCreatorChannel();
+    };
+    this.videoModal.addEventListener(
+      "creator:navigate",
+      this.boundVideoModalCreatorHandler
+    );
+    this.boundVideoModalZapHandler = (event) => {
+      this.zapController?.sendZap(event?.detail || {});
+    };
+    this.boundVideoModalZapOpenHandler = () => {
+      this.zapController?.open();
+    };
+    this.boundVideoModalZapCloseHandler = () => {
+      this.zapController?.close();
+    };
+    this.boundVideoModalZapAmountHandler = (event) => {
+      this.zapController?.setAmount(event?.detail?.amount);
+    };
+    this.boundVideoModalZapCommentHandler = (event) => {
+      this.zapController?.setComment(event?.detail?.comment);
+    };
+    this.videoModal.addEventListener(
+      "video:zap",
+      this.boundVideoModalZapHandler
+    );
+    this.videoModal.addEventListener(
+      "zap:open",
+      this.boundVideoModalZapOpenHandler
+    );
+    this.videoModal.addEventListener(
+      "zap:close",
+      this.boundVideoModalZapCloseHandler
+    );
+    this.videoModal.addEventListener(
+      "zap:amount-change",
+      this.boundVideoModalZapAmountHandler
+    );
+    this.videoModal.addEventListener(
+      "zap:comment-change",
+      this.boundVideoModalZapCommentHandler
+    );
+    this.boundVideoModalZapWalletHandler = () => {
+      this.zapController?.handleWalletLink();
+    };
+    this.videoModal.addEventListener(
+      "zap:wallet-link",
+      this.boundVideoModalZapWalletHandler
+    );
+
+    this.moreMenuController = new MoreMenuController({
+      document,
+      accessControl,
+      userBlocks,
+      subscriptions,
+      clipboard:
+        typeof navigator !== "undefined" && navigator?.clipboard
+          ? navigator.clipboard
+          : null,
+      isDevMode,
+      callbacks: {
+        getCurrentVideo: () => this.currentVideo,
+        getCurrentUserNpub: () => this.getCurrentUserNpub(),
+        getCurrentUserPubkey: () => this.pubkey,
+        canCurrentUserManageBlacklist: () =>
+          this.canCurrentUserManageBlacklist(),
+        openCreatorChannel: () => this.openCreatorChannel(),
+        goToProfile: (author) => this.goToProfile(author),
+        showError: (message) => this.showError(message),
+        showSuccess: (message) => this.showSuccess(message),
+        safeEncodeNpub: (pubkey) => this.safeEncodeNpub(pubkey),
+        safeDecodeNpub: (npub) => this.safeDecodeNpub(npub),
+        buildShareUrlFromEventId: (eventId) =>
+          this.buildShareUrlFromEventId(eventId),
+        handleRemoveHistoryAction: (payload) =>
+          this.handleRemoveHistoryAction(payload),
+        handleRepostAction: (payload) => this.handleRepostAction(payload),
+        handleMirrorAction: (payload) => this.handleMirrorAction(payload),
+        handleEnsurePresenceAction: (payload) =>
+          this.handleEnsurePresenceAction(payload),
+        loadVideos: () => this.loadVideos(),
+        onUserBlocksUpdated: () => {
+          if (this.profileController) {
+            try {
+              this.profileController.populateBlockedList();
+            } catch (error) {
+              console.warn(
+                "[profileModal] Failed to refresh blocked list after update:",
+                error,
+              );
+            }
+          }
+        },
+      },
+    });
+    this.moreMenuController.setVideoModal(this.videoModal);
 
     // Hide/Show Subscriptions Link
     this.subscriptionsLink = null;
@@ -723,141 +723,192 @@ class bitvidApp {
     this.currentVideo = null;
     this.currentVideoPointer = null;
     this.currentVideoPointerKey = null;
-    this.playbackTelemetryState = null;
-    this.loggedViewPointerKeys = new Set();
-    this.videoSubscription = null;
+    this.videoSubscription = this.nostrService.getVideoSubscription() || null;
     this.videoList = null;
-    this._videoListElement = null;
-    this._videoListClickHandler = null;
-    this.viewCountSubscriptions = new Map();
     this.modalViewCountUnsub = null;
-    this.videoViewCountEl = null;
 
     // Videos stored as a Map (key=event.id)
-    this.videosMap = new Map();
-    this.moreMenuGlobalHandlerBound = false;
-    this.boundMoreMenuDocumentClick = null;
-    this.boundMoreMenuDocumentKeydown = null;
-    // Simple cache for user profiles
-    this.profileCache = new Map();
-    this.savedProfiles = [];
-    this.activeProfilePubkey = null;
-    this.readSavedProfilesPayloadFromStorage = () => {
-      if (typeof localStorage === "undefined") {
-        return null;
+    this.videosMap = this.nostrService.getVideosMap();
+    this.unsubscribeFromNostrService = this.nostrService.on(
+      "subscription:changed",
+      ({ subscription }) => {
+        this.videoSubscription = subscription || null;
       }
+    );
+    this.boundNwcSettingsToastHandler = null;
+    Object.defineProperty(this, "savedProfiles", {
+      configurable: false,
+      enumerable: false,
+      get() {
+        return getSavedProfiles();
+      },
+      set(next) {
+        setSavedProfiles(Array.isArray(next) ? next : [], {
+          persist: false,
+          persistActive: false,
+        });
+      },
+    });
 
-      const raw = localStorage.getItem(SAVED_PROFILES_STORAGE_KEY);
-      if (!raw) {
-        return null;
-      }
+    Object.defineProperty(this, "activeProfilePubkey", {
+      configurable: false,
+      enumerable: false,
+      get() {
+        return getActiveProfilePubkey();
+      },
+      set(value) {
+        setStoredActiveProfilePubkey(value, { persist: false });
+      },
+    });
 
-      try {
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== "object") {
-          return null;
+    Object.defineProperty(this, "profileCache", {
+      configurable: false,
+      enumerable: false,
+      get() {
+        return getProfileCacheMap();
+      },
+    });
+
+    if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+      this.boundNwcSettingsToastHandler = (event) => {
+        const detail = event?.detail || {};
+        if (detail.source !== "nwc-settings") {
+          return;
         }
-        return parsed;
-      } catch (err) {
-        console.warn("[readSavedProfilesPayloadFromStorage] Failed to parse payload:", err);
-        return null;
-      }
-    };
-    this.writeSavedProfilesPayloadToStorage = (payload) => {
-      if (typeof localStorage === "undefined") {
-        return;
-      }
-
-      try {
-        localStorage.setItem(
-          SAVED_PROFILES_STORAGE_KEY,
-          JSON.stringify(payload)
-        );
-      } catch (err) {
-        const isQuotaError =
-          err &&
-          (err.name === "QuotaExceededError" ||
-            err.name === "NS_ERROR_DOM_QUOTA_REACHED" ||
-            err.code === 22 ||
-            err.code === 1014);
-        if (isQuotaError) {
-          console.warn(
-            "[writeSavedProfilesPayloadToStorage] Storage quota exceeded while saving profiles; keeping in-memory copy only.",
-            err
-          );
-        } else {
-          console.warn(
-            "[writeSavedProfilesPayloadToStorage] Failed to persist saved profiles:",
-            err
-          );
-        }
-      }
-    };
-    this.persistSavedProfiles = ({ persistActive = true } = {}) => {
-      if (typeof localStorage === "undefined") {
-        return;
-      }
-
-      if (!this.savedProfiles.length && !this.activeProfilePubkey) {
-        try {
-          localStorage.removeItem(SAVED_PROFILES_STORAGE_KEY);
-        } catch (err) {
-          console.warn("[persistSavedProfiles] Failed to remove empty payload:", err);
-        }
-        return;
-      }
-
-      let activePubkeyToPersist = this.activeProfilePubkey || null;
-      if (!persistActive) {
-        const storedPayload = this.readSavedProfilesPayloadFromStorage();
-        if (storedPayload && typeof storedPayload === "object") {
-          const candidate =
-            typeof storedPayload.activePubkey === "string"
-              ? storedPayload.activePubkey
-              : typeof storedPayload.activePubKey === "string"
-              ? storedPayload.activePubKey
-              : null;
-          const normalizedStored = this.normalizeHexPubkey(candidate);
-          if (normalizedStored) {
-            activePubkeyToPersist = normalizedStored;
-          } else if (candidate === null) {
-            activePubkeyToPersist = null;
+        const rawMessage =
+          typeof detail.message === "string" ? detail.message.trim() : "";
+        const message = rawMessage || "Wallet settings storage issue detected.";
+        this.log(`[nwcSettings] ${message}`);
+        if (detail.variant === "warning") {
+          this.showStatus(message);
+          if (typeof window !== "undefined" && typeof window.setTimeout === "function") {
+            window.setTimeout(() => {
+              this.showStatus("");
+            }, 5000);
           }
+        } else {
+          this.showError(message);
         }
-      }
-
-      const payload = {
-        version: SAVED_PROFILES_STORAGE_VERSION,
-        entries: this.savedProfiles.map((entry) => ({
-          pubkey: entry.pubkey,
-          npub:
-            typeof entry.npub === "string" && entry.npub.trim()
-              ? entry.npub.trim()
-              : null,
-          name: typeof entry.name === "string" ? entry.name : "",
-          picture:
-            typeof entry.picture === "string" ? entry.picture : "",
-          authType: entry.authType === "nsec" ? "nsec" : "nip07",
-        })),
-        activePubkey: activePubkeyToPersist,
       };
+      window.addEventListener("bitvid:toast", this.boundNwcSettingsToastHandler);
+    }
 
-      this.writeSavedProfilesPayloadToStorage(payload);
+    const videoListViewConfig = {
+      document,
+      mediaLoader: this.mediaLoader,
+      badgeHelpers: {
+        attachHealthBadges: this.attachHealthBadgesWithCache,
+        attachUrlHealthBadges: (container, onCheck) =>
+          attachUrlHealthBadges(container, onCheck),
+      },
+      formatters: {
+        formatTimeAgo: (timestamp) => this.formatTimeAgo(timestamp),
+        formatViewCountLabel: (total) => this.formatViewCountLabel(total),
+      },
+      helpers: {
+        escapeHtml: (value) => this.escapeHTML(value),
+        isMagnetSupported: (magnet) => isValidMagnetUri(magnet),
+        toLocaleString: (value) =>
+          typeof value === "number" ? value.toLocaleString() : value,
+      },
+      assets: {
+        fallbackThumbnailSrc: FALLBACK_THUMBNAIL_SRC,
+        unsupportedBtihMessage: UNSUPPORTED_BTITH_MESSAGE,
+      },
+      state: {
+        loadedThumbnails: this.loadedThumbnails,
+        videosMap: this.videosMap,
+        urlHealthByVideoId: this.urlHealthSnapshots,
+        streamHealthByVideoId: this.streamHealthSnapshots,
+      },
+      utils: {
+        dedupeVideos: (videos) => this.dedupeVideosByRoot(videos),
+        getAllEvents: () => Array.from(nostrClient.allEvents.values()),
+        hasOlderVersion: (video, events) => this.hasOlderVersion(video, events),
+        derivePointerInfo: (video) => this.deriveVideoPointerInfo(video),
+        persistWatchHistoryMetadata: (video, pointerInfo) =>
+          this.persistWatchHistoryMetadataForVideo(video, pointerInfo),
+        getShareUrlBase: () => this.getShareUrlBase(),
+        buildShareUrlFromNevent: (nevent) => this.buildShareUrlFromNevent(nevent),
+        buildShareUrlFromEventId: (eventId) => this.buildShareUrlFromEventId(eventId),
+        getKnownVideoPostedAt: (video) => this.getKnownVideoPostedAt(video),
+        resolveVideoPostedAt: (video) => this.resolveVideoPostedAt(video),
+        canManageBlacklist: () => this.canCurrentUserManageBlacklist(),
+        canEditVideo: (video) => video?.pubkey === this.pubkey,
+        canDeleteVideo: (video) => video?.pubkey === this.pubkey,
+        batchFetchProfiles: (authorSet) => this.batchFetchProfiles(authorSet),
+        bindThumbnailFallbacks: (container) => this.bindThumbnailFallbacks(container),
+        handleUrlHealthBadge: (payload) => this.handleUrlHealthBadge(payload),
+        refreshDiscussionCounts: (videos, { container } = {}) =>
+          this.refreshVideoDiscussionCounts(videos, {
+            videoListRoot: container || this.videoList || null,
+          }),
+        ensureGlobalMoreMenuHandlers: () => this.ensureGlobalMoreMenuHandlers(),
+        closeAllMenus: () => this.closeAllMoreMenus(),
+      },
+      renderers: {
+        getLoadingMarkup: (message) => getSidebarLoadingMarkup(message),
+      },
     };
-    this.persistActiveProfileSelection = (
-      pubkey,
-      { persist = true } = {}
-    ) => {
-      const normalized = this.normalizeHexPubkey(pubkey);
-      this.activeProfilePubkey = normalized;
-      if (persist) {
-        this.persistSavedProfiles({ persistActive: true });
+    this.videoListView =
+      (typeof ui.videoListView === "function"
+        ? ui.videoListView({ app: this, config: videoListViewConfig })
+        : ui.videoListView) ||
+      new VideoListView(videoListViewConfig);
+
+    this.videoListViewPlaybackHandler = ({ videoId, url, magnet }) => {
+      if (videoId) {
+        Promise.resolve(
+          this.playVideoByEventId(videoId, { url, magnet })
+        ).catch((error) => {
+          console.error("[VideoListView] Failed to play by event id:", error);
+        });
+        return;
       }
-      this.renderSavedProfiles();
+      Promise.resolve(this.playVideoWithFallback({ url, magnet })).catch(
+        (error) => {
+          console.error("[VideoListView] Failed to start playback:", error);
+        }
+      );
     };
-    this.lastRenderedVideoSignature = null;
-    this._lastRenderedVideoListElement = null;
-    this.renderedVideoIds = new Set();
+    this.videoListView.setPlaybackHandler(this.videoListViewPlaybackHandler);
+
+    this.videoListViewEditHandler = ({ video, index }) => {
+      if (!video?.id) {
+        return;
+      }
+      this.handleEditVideo({
+        eventId: video.id,
+        index: Number.isFinite(index) ? index : null,
+      });
+    };
+    this.videoListView.setEditHandler(this.videoListViewEditHandler);
+
+    this.videoListViewRevertHandler = ({ video, index }) => {
+      if (!video?.id) {
+        return;
+      }
+      this.handleRevertVideo({
+        eventId: video.id,
+        index: Number.isFinite(index) ? index : null,
+      });
+    };
+    this.videoListView.setRevertHandler(this.videoListViewRevertHandler);
+
+    this.videoListViewDeleteHandler = ({ video, index }) => {
+      if (!video?.id) {
+        return;
+      }
+      this.handleFullDeleteVideo({
+        eventId: video.id,
+        index: Number.isFinite(index) ? index : null,
+      });
+    };
+    this.videoListView.setDeleteHandler(this.videoListViewDeleteHandler);
+
+    if (this.moreMenuController) {
+      this.moreMenuController.attachVideoListView(this.videoListView);
+    }
 
     // NEW: reference to the login modal's close button
     this.closeLoginModalBtn =
@@ -877,338 +928,85 @@ class bitvidApp {
         }
       } catch (err) {
         console.error(
-          "[bitvidApp] Invalid nevent in blacklist:",
+          "[Application] Invalid nevent in blacklist:",
           neventStr,
           err
         );
       }
     }
+
+    this.unsubscribeFromPubkeyState = subscribeToAppStateKey(
+      "pubkey",
+      (next, previous) => {
+        if (next !== previous) {
+          this.renderSavedProfiles();
+        }
+      }
+    );
+
+    this.unsubscribeFromCurrentUserState = subscribeToAppStateKey(
+      "currentUserNpub",
+      (next) => {
+        if (this.userPubKey) {
+          this.userPubKey.textContent = next || "";
+        }
+      }
+    );
+  }
+
+  get modalVideo() {
+    return this.videoModal ? this.videoModal.getVideoElement() : null;
+  }
+
+  set modalVideo(videoElement) {
+    if (this.videoModal) {
+      this.videoModal.setVideoElement(videoElement);
+    }
   }
 
   loadSavedProfilesFromStorage() {
-    this.savedProfiles = [];
-    this.activeProfilePubkey = null;
-
-    if (typeof localStorage === "undefined") {
-      return;
-    }
-
-    const seenPubkeys = new Set();
-    let needsRewrite = false;
-    let parsed = null;
-    const raw = localStorage.getItem(SAVED_PROFILES_STORAGE_KEY);
-    if (raw) {
-      try {
-        parsed = JSON.parse(raw);
-      } catch (err) {
-        console.warn("Failed to parse saved profiles payload:", err);
-        needsRewrite = true;
-      }
-    }
-
-    if (
-      parsed &&
-      typeof parsed === "object" &&
-      parsed.version === SAVED_PROFILES_STORAGE_VERSION &&
-      Array.isArray(parsed.entries)
-    ) {
-      for (const candidate of parsed.entries) {
-        if (!candidate || typeof candidate !== "object") {
-          needsRewrite = true;
-          continue;
-        }
-
-        const normalizedPubkey = this.normalizeHexPubkey(candidate.pubkey);
-        if (!normalizedPubkey) {
-          needsRewrite = true;
-          continue;
-        }
-
-        if (seenPubkeys.has(normalizedPubkey)) {
-          needsRewrite = true;
-          continue;
-        }
-
-        seenPubkeys.add(normalizedPubkey);
-
-        const storedAuthType =
-          candidate.authType === "nsec" ? "nsec" : "nip07";
-        if (candidate.authType !== storedAuthType) {
-          needsRewrite = true;
-        }
-
-        const entry = {
-          pubkey: normalizedPubkey,
-          npub:
-            typeof candidate.npub === "string" && candidate.npub.trim()
-              ? candidate.npub.trim()
-              : this.safeEncodeNpub(normalizedPubkey),
-          name:
-            typeof candidate.name === "string" ? candidate.name : "",
-          picture:
-            typeof candidate.picture === "string" ? candidate.picture : "",
-          authType: storedAuthType,
-        };
-
-        if (
-          typeof candidate.npub === "string" &&
-          candidate.npub.trim() !== candidate.npub
-        ) {
-          needsRewrite = true;
-        }
-
-        if (
-          entry.npub &&
-          typeof candidate.npub !== "string" &&
-          entry.npub !== candidate.npub
-        ) {
-          needsRewrite = true;
-        }
-
-        this.savedProfiles.push(entry);
-      }
-
-      const activeCandidate =
-        typeof parsed.activePubkey === "string"
-          ? parsed.activePubkey
-          : typeof parsed.activePubKey === "string"
-          ? parsed.activePubKey
-          : null;
-      const normalizedActive = this.normalizeHexPubkey(activeCandidate);
-      if (normalizedActive && seenPubkeys.has(normalizedActive)) {
-        this.activeProfilePubkey = normalizedActive;
-      } else if (activeCandidate) {
-        needsRewrite = true;
-      }
-    } else if (raw) {
-      needsRewrite = true;
-    }
-
-    if (!this.activeProfilePubkey && this.savedProfiles.length) {
-      this.activeProfilePubkey = this.savedProfiles[0].pubkey;
-      needsRewrite = true;
-    }
-
-    if (needsRewrite) {
-      this.persistSavedProfiles();
-    }
-
+    const result = this.authService.loadSavedProfilesFromStorage();
     this.renderSavedProfiles();
+    return result;
   }
 
   syncSavedProfileFromCache(pubkey, { persist = false } = {}) {
-    const normalized = this.normalizeHexPubkey(pubkey);
-    if (!normalized) {
-      return false;
+    const updated = this.authService.syncSavedProfileFromCache(pubkey, {
+      persist,
+    });
+    if (updated) {
+      this.renderSavedProfiles();
     }
-
-    const cacheEntry = this.profileCache.get(normalized);
-    if (!cacheEntry || typeof cacheEntry !== "object") {
-      return false;
-    }
-
-    const index = this.savedProfiles.findIndex(
-      (entry) => entry && entry.pubkey === normalized
-    );
-    if (index < 0) {
-      return false;
-    }
-
-    const existing = this.savedProfiles[index] || {};
-    const profile = cacheEntry.profile || {};
-    const nextEntry = {
-      ...existing,
-      name: profile.name || existing.name || "",
-      picture: profile.picture || existing.picture || "",
-    };
-
-    const changed =
-      existing.name !== nextEntry.name || existing.picture !== nextEntry.picture;
-
-    if (!changed) {
-      return false;
-    }
-
-    this.savedProfiles[index] = nextEntry;
-
-    if (persist) {
-      this.persistSavedProfiles({ persistActive: false });
-    }
-
-    this.renderSavedProfiles();
-    return true;
+    return updated;
   }
 
   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);
-    }
+    this.authService.loadProfileCacheFromStorage();
   }
 
   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);
-    }
+    this.authService.persistProfileCache();
   }
 
   getProfileCacheEntry(pubkey) {
-    const normalized = this.normalizeHexPubkey(pubkey);
-    if (!normalized) {
-      return null;
-    }
-
-    const entry = this.profileCache.get(normalized);
-    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(normalized);
-      this.persistProfileCacheToStorage();
-      return null;
-    }
-
-    return entry;
+    return this.authService.getProfileCacheEntry(pubkey);
   }
 
   setProfileCacheEntry(pubkey, profile) {
-    const normalizedPubkey = this.normalizeHexPubkey(pubkey);
-    if (!normalizedPubkey || !profile) {
-      return;
-    }
+    return this.authService.setProfileCacheEntry(pubkey, profile);
+  }
 
-    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(normalizedPubkey, entry);
-    this.persistProfileCacheToStorage();
-    const didUpdateSavedProfile = this.syncSavedProfileFromCache(normalizedPubkey, {
-      persist: true,
-    });
-    if (!didUpdateSavedProfile) {
-      this.renderSavedProfiles();
-    }
-    return entry;
+  persistActiveProfileSelection(pubkey, { persist = true } = {}) {
+    setStoredActiveProfilePubkey(pubkey, { persist });
+    this.renderSavedProfiles();
   }
 
   prepareForViewLoad() {
-    if (this._videoListElement && this._videoListClickHandler) {
-      try {
-        this._videoListElement.removeEventListener(
-          "click",
-          this._videoListClickHandler
-        );
-      } catch (err) {
-        console.warn("[prepareForViewLoad] Failed to detach video list handler:", err);
-      }
-      this._videoListElement = null;
-      this._videoListClickHandler = null;
+    if (this.videoListView) {
+      this.videoListView.destroy();
     }
 
     this.videoList = null;
-    this._lastRenderedVideoListElement = null;
-    this.lastRenderedVideoSignature = null;
-    if (this.renderedVideoIds) {
-      this.renderedVideoIds.clear();
-    }
 
     if (this.mediaLoader && typeof this.mediaLoader.disconnect === "function") {
       this.mediaLoader.disconnect();
@@ -1224,12 +1022,33 @@ class bitvidApp {
 
     // 3) For each author, fetchAndRenderProfile with forceRefresh = true
     for (const authorPubkey of uniqueAuthors) {
-      this.fetchAndRenderProfile(authorPubkey, true);
+      this.authService.fetchAndRenderProfile(authorPubkey, true);
     }
   }
 
+  getCurrentUserNpub() {
+    return this.currentUserNpub;
+  }
+
+  isAuthorBlocked(pubkey) {
+    try {
+      if (userBlocks && typeof userBlocks.isBlocked === "function") {
+        return userBlocks.isBlocked(pubkey);
+      }
+    } catch (error) {
+      console.warn("[Application] Failed to evaluate block status:", error);
+    }
+
+    return false;
+  }
+
   async init() {
     try {
+      if (typeof this.loadView !== "function") {
+        const module = await import("./viewManager.js");
+        this.loadView = module?.loadView || null;
+      }
+
       // Force update of any registered service workers to ensure latest code is used.
       if ("serviceWorker" in navigator) {
         navigator.serviceWorker.getRegistrations().then((registrations) => {
@@ -1237,25 +1056,70 @@ class bitvidApp {
         });
       }
 
-      this.loadProfileCacheFromStorage();
-      this.loadSavedProfilesFromStorage();
+      this.authService.hydrateFromStorage();
+      this.renderSavedProfiles();
 
-      // 1. Initialize the video modal (components/video-modal.html)
-      await this.initModal();
-      this.updateModalElements();
+      const videoModalPromise = this.videoModal.load().then(() => {
+        const modalRoot = this.videoModal.getRoot();
+        if (modalRoot) {
+          this.attachMoreMenuHandlers(modalRoot);
+        }
+      });
 
-      // 2. Initialize the upload modal (components/upload-modal.html)
-      await this.initUploadModal();
-      initQuickR2Upload(this);
+      const uploadModalPromise = this.uploadModal
+        .load()
+        .catch((error) => {
+          console.error("initUploadModal failed:", error);
+          this.showError(`Failed to initialize upload modal: ${error.message}`);
+        })
+        .finally(() => {
+          initQuickR2Upload(this);
+        });
 
-      // 2.5 Initialize the edit modal (components/edit-video-modal.html)
-      await this.initEditVideoModal();
+      const editModalPromise = this.editModal.load().catch((error) => {
+        console.error("Failed to load edit modal:", error);
+        this.showError(`Failed to initialize edit modal: ${error.message}`);
+      });
 
-      // 3. (Optional) Initialize the profile modal (components/profile-modal.html)
-      await this.initProfileModal();
+      const profileModalPromise = this.profileController
+        ? this.profileController
+            .load()
+            .then(() => {
+              try {
+                this.renderSavedProfiles();
+              } catch (error) {
+                console.warn(
+                  "[profileModal] Failed to render saved profiles after load:",
+                  error,
+                );
+              }
 
-      // 4. Connect to Nostr
-      await nostrClient.init();
+              try {
+                this.profileController.refreshWalletPaneState();
+              } catch (error) {
+                console.warn(
+                  "[profileModal] Failed to refresh wallet pane after load:",
+                  error,
+                );
+              }
+              return true;
+            })
+            .catch((error) => {
+              console.error("Failed to load profile modal:", error);
+              return false;
+            })
+        : Promise.resolve(false);
+
+      const modalBootstrapPromise = Promise.all([
+        videoModalPromise,
+        uploadModalPromise,
+        editModalPromise,
+        profileModalPromise,
+      ]);
+
+      const nostrInitPromise = nostrClient.init();
+
+      await Promise.all([modalBootstrapPromise, nostrInitPromise]);
 
       try {
         initViewCounter({ nostrClient });
@@ -1263,67 +1127,88 @@ class bitvidApp {
         console.warn("Failed to initialize view counter:", error);
       }
 
-      try {
-        await accessControl.refresh();
-        console.assert(
-          !accessControl.lastError ||
-            accessControl.lastError?.code !== "nostr-unavailable",
-          "[app.init()] Access control refresh should not run before nostrClient.init()",
-          accessControl.lastError
-        );
-      } catch (error) {
-        console.warn("Failed to refresh admin lists after connecting to Nostr:", error);
-      }
+      const accessControlPromise = accessControl
+        .refresh()
+        .then(() => {
+          console.assert(
+            !accessControl.lastError ||
+              accessControl.lastError?.code !== "nostr-unavailable",
+            "[app.init()] Access control refresh should not run before nostrClient.init()",
+            accessControl.lastError
+          );
+        })
+        .catch((error) => {
+          console.warn(
+            "Failed to refresh admin lists after connecting to Nostr:",
+            error
+          );
+        });
 
-      try {
-        await this.refreshAdminPaneState();
-      } catch (error) {
-        console.warn(
-          "Failed to update admin pane after connecting to Nostr:",
-          error
-        );
-      }
+      const adminPanePromise = this.profileController
+        ? Promise.resolve()
+            .then(() => this.profileController.refreshAdminPaneState())
+            .catch((error) => {
+              console.warn(
+                "Failed to update admin pane after connecting to Nostr:",
+                error,
+              );
+            })
+        : Promise.resolve(null);
+
+      await Promise.all([accessControlPromise, adminPanePromise]);
 
       // Grab the "Subscriptions" link by its id in the sidebar
       this.subscriptionsLink = document.getElementById("subscriptionsLink");
 
+      this.syncAuthUiState();
+
       const savedPubKey = this.activeProfilePubkey;
       if (savedPubKey) {
         // Auto-login if a pubkey was saved
         try {
-          await this.login(savedPubKey, { persistActive: false });
+          await this.authService.login(savedPubKey, { persistActive: false });
         } catch (error) {
           console.error("Auto-login failed:", error);
         }
-
-        // If the user was already logged in, show the Subscriptions link
-        if (this.subscriptionsLink) {
-          this.subscriptionsLink.classList.remove("hidden");
-        }
       }
 
       // 5. Setup general event listeners
       this.setupEventListeners();
 
-      await this.initWatchHistoryMetadataSync();
+      const watchHistoryInitPromise =
+        this.watchHistoryTelemetry?.initPreferenceSync?.().catch((error) => {
+          if (isDevMode) {
+            console.warn(
+              "[app.init()] Failed to initialize watch history metadata sync:",
+              error
+            );
+          }
+        }) || Promise.resolve();
 
       // 6) Load the default view ONLY if there's no #view= already
       if (!window.location.hash || !window.location.hash.startsWith("#view=")) {
         console.log(
           "[app.init()] No #view= in the URL, loading default home view"
         );
-        await loadView("views/most-recent-videos.html");
+        if (typeof this.loadView === "function") {
+          await Promise.all([
+            this.loadView("views/most-recent-videos.html"),
+            watchHistoryInitPromise,
+          ]);
+        } else {
+          await watchHistoryInitPromise;
+        }
       } else {
         console.log(
           "[app.init()] Found hash:",
           window.location.hash,
           "so skipping default load"
         );
+        await watchHistoryInitPromise;
       }
 
       // 7. Once loaded, get a reference to #videoList
-      this.videoList = document.getElementById("videoList");
-      this.attachVideoListHandler();
+      this.mountVideoListView();
 
       // 8. Subscribe or fetch videos
       await this.loadVideos();
@@ -1337,154 +1222,6 @@ class bitvidApp {
     }
   }
 
-  /**
-   * Initialize the main video modal (video-modal.html).
-   */
-  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}`);
-      }
-      const html = await resp.text();
-
-      const modalContainer = document.getElementById("modalContainer");
-      if (!modalContainer) {
-        throw new Error("Modal container element not found!");
-      }
-
-      // 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:
-      const closeButton = document.getElementById("closeModal");
-      if (!closeButton) {
-        throw new Error("Close button not found in video-modal!");
-      }
-      closeButton.addEventListener("click", () => {
-        this.hideModal();
-      });
-
-      // Setup scroll-based nav hide
-      const modalNav = document.getElementById("modalNav");
-      const playerModal = document.getElementById("playerModal");
-      if (!modalNav || !playerModal) {
-        throw new Error("Modal nav (#modalNav) or #playerModal not found!");
-      }
-      const scrollRegion =
-        playerModal.querySelector(".player-modal__content") || playerModal;
-      let lastScrollY = 0;
-      scrollRegion.addEventListener("scroll", () => {
-        const currentScrollY = scrollRegion.scrollTop;
-        const shouldShowNav =
-          currentScrollY <= lastScrollY || currentScrollY < 50;
-        modalNav.style.transform = shouldShowNav
-          ? "translateY(0)"
-          : "translateY(-100%)";
-        lastScrollY = currentScrollY;
-      });
-
-      this.videoViewCountEl =
-        document.getElementById("videoViewCount") || null;
-
-      console.log("Video modal initialization successful");
-      return true;
-    } catch (error) {
-      console.error("initModal failed:", error);
-      this.showError(`Failed to initialize video modal: ${error.message}`);
-      return false;
-    }
-  }
-
-  updateModalElements() {
-    // Existing references
-    this.playerModal = document.getElementById("playerModal") || null;
-    this.modalVideo = document.getElementById("modalVideo") || null;
-    this.modalStatus = document.getElementById("modalStatus") || null;
-    this.modalProgress = document.getElementById("modalProgress") || null;
-    this.modalPeers = document.getElementById("modalPeers") || null;
-    this.modalSpeed = document.getElementById("modalSpeed") || null;
-    this.modalDownloaded = document.getElementById("modalDownloaded") || null;
-    this.closePlayerBtn = document.getElementById("closeModal") || null;
-
-    this.videoTitle = document.getElementById("videoTitle") || null;
-    this.videoDescription = document.getElementById("videoDescription") || null;
-    this.videoTimestamp = document.getElementById("videoTimestamp") || null;
-    this.videoViewCountEl =
-      document.getElementById("videoViewCount") || null;
-
-    // The two elements we want to make clickable
-    this.creatorAvatar = document.getElementById("creatorAvatar") || null;
-    this.creatorName = document.getElementById("creatorName") || null;
-    this.creatorNpub = document.getElementById("creatorNpub") || null;
-
-    // Copy/Share buttons
-    this.copyMagnetBtn = document.getElementById("copyMagnetBtn") || null;
-    this.shareBtn = document.getElementById("shareBtn") || null;
-    this.modalZapBtn = document.getElementById("modalZapBtn") || null;
-    this.modalMoreBtn = document.getElementById("modalMoreBtn") || null;
-    this.modalMoreMenu = document.getElementById("moreDropdown-modal") || null;
-    this.setModalZapVisibility(false);
-
-    // Attach existing event listeners for copy/share
-    if (this.copyMagnetBtn) {
-      this.copyMagnetBtn.addEventListener("click", () => {
-        this.handleCopyMagnet();
-      });
-    }
-    if (this.shareBtn) {
-      this.shareBtn.addEventListener("click", () => {
-        if (!this.currentVideo || !this.currentVideo.id) {
-          this.showError("No shareable video is loaded.");
-          return;
-        }
-        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.");
-      });
-    }
-
-    // Add click handlers for avatar and name => channel profile
-    if (this.creatorAvatar) {
-      this.creatorAvatar.style.cursor = "pointer";
-      this.creatorAvatar.addEventListener("click", () => {
-        this.openCreatorChannel();
-      });
-    }
-    if (this.creatorName) {
-      this.creatorName.style.cursor = "pointer";
-      this.creatorName.addEventListener("click", () => {
-        this.openCreatorChannel();
-      });
-    }
-
-    if (this.playerModal) {
-      this.attachMoreMenuHandlers(this.playerModal);
-    }
-
-    this.syncModalMoreMenuData();
-  }
-
   goToProfile(pubkey) {
     if (!pubkey) {
       this.showError("No creator info available.");
@@ -1524,1149 +1261,132 @@ class bitvidApp {
   /**
    * Show the modal and set the "Please stand by" poster on the video.
    */
-  showModalWithPoster() {
-    if (this.playerModal) {
-      this.playerModal.style.display = "flex";
-      this.playerModal.classList.remove("hidden");
-      document.body.classList.add("modal-open");
-      document.documentElement.classList.add("modal-open");
-      const scrollRegion =
-        this.playerModal.querySelector(".player-modal__content") ||
-        this.playerModal;
-      scrollRegion.scrollTop = 0;
+  async showModalWithPoster(video = this.currentVideo) {
+    if (!this.videoModal) {
+      return null;
+    }
+
+    const targetVideo = video || this.currentVideo;
+
+    try {
+      const { root } = await this.ensureVideoModalReady({
+        ensureVideoElement: true,
+      });
+
+      if (!this.videoModal) {
+        return root || null;
+      }
+
+      this.videoModal.open(targetVideo);
+      this.applyModalLoadingPoster();
+
+      return (
+        root ||
+        (typeof this.videoModal.getRoot === "function"
+          ? this.videoModal.getRoot()
+          : null)
+      );
+    } catch (error) {
+      console.error(
+        "[Application] Failed to open the video modal before playback:",
+        error
+      );
+      this.showError("Could not open the video player. Please try again.");
+      return null;
     }
-    this.applyModalLoadingPoster();
   }
 
   applyModalLoadingPoster() {
-    if (!this.modalVideo) {
+    if (!this.videoModal) {
       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);
-    };
+    this.videoModal.applyLoadingPoster();
   }
 
-  /**
-   * 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) {
+    if (!this.videoModal) {
       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;
+    return this.videoModal.forceRemovePoster(reason);
   }
 
-  /**
-   * Initialize the upload modal (upload-modal.html).
-   */
-  async initUploadModal() {
+  async ensureVideoModalReady({ ensureVideoElement = false } = {}) {
+    if (!this.videoModal) {
+      throw new Error("Video modal instance is not available.");
+    }
+
+    const getRoot = () =>
+      typeof this.videoModal.getRoot === "function"
+        ? this.videoModal.getRoot()
+        : null;
+    const getVideoElement = () =>
+      typeof this.videoModal.getVideoElement === "function"
+        ? this.videoModal.getVideoElement()
+        : null;
+
+    const existingRoot = getRoot();
+    const existingVideoElement = getVideoElement();
+
+    if (existingRoot && existingRoot.isConnected) {
+      if (!existingVideoElement && ensureVideoElement) {
+        if (typeof this.videoModal.load === "function") {
+          await this.videoModal.load();
+        }
+
+        const rehydratedRoot = getRoot();
+        const rehydratedVideoElement = getVideoElement();
+
+        if (!rehydratedVideoElement) {
+          throw new Error("Video modal video element is not ready.");
+        }
+
+        this.modalVideo = rehydratedVideoElement;
+        return {
+          root: rehydratedRoot || existingRoot,
+          videoElement: rehydratedVideoElement,
+        };
+      }
+
+      if (existingVideoElement) {
+        this.modalVideo = existingVideoElement;
+      }
+      return {
+        root: existingRoot,
+        videoElement: existingVideoElement,
+      };
+    }
+
+    if (!this.videoModalReadyPromise) {
+      if (typeof this.videoModal.load !== "function") {
+        throw new Error("Video modal does not expose a load() method.");
+      }
+      this.videoModalReadyPromise = Promise.resolve(this.videoModal.load());
+    }
+
     try {
-      const resp = await fetch("components/upload-modal.html");
-      if (!resp.ok) {
-        throw new Error(`HTTP error! status: ${resp.status}`);
-      }
-      const html = await resp.text();
-
-      const modalContainer = document.getElementById("modalContainer");
-      if (!modalContainer) {
-        throw new Error("Modal container element not found!");
-      }
-      // Append the upload modal markup
-      const wrapper = document.createElement("div");
-      wrapper.innerHTML = html;
-      removeTrackingScripts(wrapper);
-      modalContainer.appendChild(wrapper);
-
-      // Grab references
-      this.uploadModal = document.getElementById("uploadModal") || null;
-      this.closeUploadModalBtn =
-        document.getElementById("closeUploadModal") || null;
-      this.uploadForm = document.getElementById("uploadForm") || null;
-      this.uploadEnableCommentsInput =
-        document.getElementById("uploadEnableComments") || null;
-      this.uploadModeToggleButtons = Array.from(
-        document.querySelectorAll(".upload-mode-toggle[data-upload-mode]")
-      );
-      this.customUploadSection =
-        document.getElementById("customUploadSection") || null;
-      this.cloudflareUploadSection =
-        document.getElementById("cloudflareUploadSection") || null;
-      this.cloudflareSettingsForm =
-        document.getElementById("cloudflareSettingsForm") || null;
-      this.cloudflareClearSettingsButton =
-        document.getElementById("cloudflareClearSettings") || null;
-      this.cloudflareSettingsStatus =
-        document.getElementById("cloudflareSettingsStatus") || null;
-      this.cloudflareBucketPreview =
-        document.getElementById("cloudflareBucketPreview") || null;
-      this.cloudflareUploadForm =
-        document.getElementById("cloudflareUploadForm") || null;
-      this.cloudflareFileInput =
-        document.getElementById("cloudflareFile") || null;
-      this.cloudflareUploadButton =
-        document.getElementById("cloudflareUploadButton") || null;
-      this.cloudflareUploadStatus =
-        document.getElementById("cloudflareUploadStatus") || null;
-      this.cloudflareProgressBar =
-        document.getElementById("cloudflareProgressBar") || null;
-      this.cloudflareProgressFill =
-        document.getElementById("cloudflareProgressFill") || null;
-      this.cloudflareTitleInput =
-        document.getElementById("cloudflareTitle") || null;
-      this.cloudflareDescriptionInput =
-        document.getElementById("cloudflareDescription") || null;
-      this.cloudflareThumbnailInput =
-        document.getElementById("cloudflareThumbnail") || null;
-      this.cloudflareMagnetInput =
-        document.getElementById("cloudflareMagnet") || null;
-      this.cloudflareWsInput =
-        document.getElementById("cloudflareWs") || null;
-      this.cloudflareXsInput =
-        document.getElementById("cloudflareXs") || null;
-      this.cloudflareEnableCommentsInput =
-        document.getElementById("cloudflareEnableComments") || null;
-      this.cloudflareAdvancedToggle =
-        document.getElementById("cloudflareAdvancedToggle") || null;
-      this.cloudflareAdvancedToggleLabel =
-        document.getElementById("cloudflareAdvancedToggleLabel") || null;
-      this.cloudflareAdvancedToggleIcon =
-        document.getElementById("cloudflareAdvancedToggleIcon") || null;
-      this.cloudflareAdvancedFields =
-        document.getElementById("cloudflareAdvancedFields") || null;
-      this.r2AccountIdInput =
-        document.getElementById("r2AccountId") || null;
-      this.r2AccessKeyIdInput =
-        document.getElementById("r2AccessKeyId") || null;
-      this.r2SecretAccessKeyInput =
-        document.getElementById("r2SecretAccessKey") || null;
-      this.r2ApiTokenInput =
-        document.getElementById("r2ApiToken") || null;
-      this.r2ZoneIdInput = document.getElementById("r2ZoneId") || null;
-      this.r2BaseDomainInput =
-        document.getElementById("r2BaseDomain") || null;
-
-      // Optional: if close button found, wire up
-      if (this.closeUploadModalBtn) {
-        this.closeUploadModalBtn.addEventListener("click", () => {
-          if (this.uploadModal) {
-            this.uploadModal.classList.add("hidden");
-          }
-        });
-      }
-      // If the form is found, wire up
-      if (this.uploadForm) {
-        this.uploadForm.addEventListener("submit", (e) => {
-          e.preventDefault();
-          this.handleUploadSubmit();
-        });
-      }
-
-      if (this.cloudflareSettingsForm) {
-        this.cloudflareSettingsForm.addEventListener("submit", (e) => {
-          e.preventDefault();
-          this.handleCloudflareSettingsSubmit();
-        });
-      }
-
-      if (this.cloudflareClearSettingsButton) {
-        this.cloudflareClearSettingsButton.addEventListener("click", () => {
-          this.handleCloudflareClearSettings();
-        });
-      }
-
-      if (this.cloudflareUploadForm) {
-        this.cloudflareUploadForm.addEventListener("submit", (e) => {
-          e.preventDefault();
-          this.handleCloudflareUploadSubmit();
-        });
-      }
-
-      if (this.uploadModeToggleButtons.length > 0) {
-        this.uploadModeToggleButtons.forEach((btn) => {
-          btn.addEventListener("click", () => {
-            const mode = btn.dataset.uploadMode || "custom";
-            this.setUploadMode(mode);
-          });
-        });
-      }
-
-      if (this.cloudflareAdvancedToggle) {
-        this.cloudflareAdvancedToggle.addEventListener("click", () => {
-          this.setCloudflareAdvancedVisibility(
-            !this.cloudflareAdvancedVisible
-          );
-        });
-      }
-
-      this.setCloudflareAdvancedVisibility(this.cloudflareAdvancedVisible);
-
-      await this.loadCloudflareSettingsFromStorage();
-      await this.updateCloudflareBucketPreview();
-
-      this.setUploadMode(this.activeUploadMode);
-
-      console.log("Upload modal initialization successful");
-      return true;
+      await this.videoModalReadyPromise;
     } catch (error) {
-      console.error("initUploadModal failed:", error);
-      this.showError(`Failed to initialize upload modal: ${error.message}`);
-      return false;
-    }
-  }
-
-  async initEditVideoModal() {
-    try {
-      let modal = document.getElementById("editVideoModal");
-      if (!modal) {
-        const resp = await fetch("components/edit-video-modal.html");
-        if (!resp.ok) {
-          throw new Error(`HTTP error! status: ${resp.status}`);
-        }
-        const html = await resp.text();
-        const modalContainer = document.getElementById("modalContainer");
-        if (!modalContainer) {
-          throw new Error("Modal container element not found!");
-        }
-
-        const wrapper = document.createElement("div");
-        wrapper.innerHTML = html;
-        removeTrackingScripts(wrapper);
-        modalContainer.appendChild(wrapper);
-
-        modal = wrapper.querySelector("#editVideoModal");
-      }
-
-      if (!modal) {
-        throw new Error("Edit video modal markup missing after load.");
-      }
-
-      this.editVideoModal = modal;
-      this.editVideoOverlay =
-        modal.querySelector("#editVideoModalOverlay") || null;
-      this.editVideoForm = modal.querySelector("#editVideoForm") || null;
-      this.closeEditVideoModalBtn =
-        modal.querySelector("#closeEditVideoModal") || null;
-      this.cancelEditVideoBtn =
-        modal.querySelector("#cancelEditVideo") || null;
-      this.editVideoSubmitBtn =
-        modal.querySelector("#submitEditVideo") || null;
-      this.editVideoFieldButtons = Array.from(
-        modal.querySelectorAll("[data-edit-target]")
-      );
-
-      if (this.editVideoForm) {
-        this.editVideoForm.addEventListener("submit", (event) => {
-          event.preventDefault();
-          this.handleEditVideoSubmit();
-        });
-      }
-
-      if (this.closeEditVideoModalBtn) {
-        this.closeEditVideoModalBtn.addEventListener("click", () => {
-          this.hideEditVideoModal();
-        });
-      }
-
-      if (this.cancelEditVideoBtn) {
-        this.cancelEditVideoBtn.addEventListener("click", () => {
-          this.hideEditVideoModal();
-        });
-      }
-
-      if (this.editVideoOverlay) {
-        this.editVideoOverlay.addEventListener("click", () => {
-          this.hideEditVideoModal();
-        });
-      }
-
-      if (Array.isArray(this.editVideoFieldButtons)) {
-        this.editVideoFieldButtons.forEach((btn) => {
-          btn.addEventListener("click", (event) => {
-            this.handleEditFieldToggle(event);
-          });
-        });
-      }
-
-      this.resetEditVideoForm();
-
-      return true;
-    } catch (error) {
-      console.error("initEditVideoModal failed:", error);
-      this.showError(`Failed to initialize edit modal: ${error.message}`);
-      return false;
-    }
-  }
-
-  resetEditVideoForm() {
-    if (!this.editVideoModal) {
-      this.activeEditVideo = null;
-      return;
+      this.videoModalReadyPromise = null;
+      throw error;
     }
 
-    const fieldIds = [
-      "editVideoTitle",
-      "editVideoUrl",
-      "editVideoMagnet",
-      "editVideoWs",
-      "editVideoXs",
-      "editVideoThumbnail",
-      "editVideoDescription",
-      "editEnableComments",
-    ];
+    this.videoModalReadyPromise = null;
 
-    fieldIds.forEach((id) => {
-      const input = this.editVideoModal.querySelector(`#${id}`);
-      if (input) {
-        if (input.type === "checkbox") {
-          input.checked = true;
-          input.disabled = false;
-        } else {
-          input.value = "";
-          input.readOnly = false;
-          input.classList.remove("locked-input");
-        }
-        delete input.dataset.originalValue;
-      }
-      const button = this.editVideoModal.querySelector(
-        `[data-edit-target="${id}"]`
-      );
-      if (button) {
-        button.classList.add("hidden");
-        button.dataset.mode = "locked";
-        button.textContent = "Edit field";
-      }
-    });
+    const readyRoot = getRoot();
+    const readyVideoElement = getVideoElement();
 
-    this.activeEditVideo = null;
-  }
-
-  showEditVideoModal() {
-    if (this.editVideoModal) {
-      this.editVideoModal.classList.remove("hidden");
-    }
-  }
-
-  hideEditVideoModal() {
-    if (this.editVideoModal) {
-      this.editVideoModal.classList.add("hidden");
-    }
-    this.resetEditVideoForm();
-  }
-
-  async initRevertVideoModal() {
-    try {
-      let modal = document.getElementById("revertVideoModal");
-      if (!modal) {
-        const response = await fetch("components/revert-video-modal.html");
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const html = await response.text();
-        const modalContainer = document.getElementById("modalContainer");
-        if (!modalContainer) {
-          throw new Error("Modal container element not found!");
-        }
-
-        const wrapper = document.createElement("div");
-        wrapper.innerHTML = html;
-        removeTrackingScripts(wrapper);
-        modalContainer.appendChild(wrapper);
-
-        modal = wrapper.querySelector("#revertVideoModal");
-      }
-
-      if (!modal) {
-        throw new Error("Revert video modal markup missing after load.");
-      }
-
-      this.revertVideoModal = modal;
-      this.revertVideoOverlay =
-        modal.querySelector("#revertVideoModalOverlay") || null;
-      this.revertVersionsList =
-        modal.querySelector("#revertVersionsList") || null;
-      this.revertVersionDetails =
-        modal.querySelector("#revertVersionDetails") || null;
-      this.revertVersionPlaceholder =
-        modal.querySelector("#revertVersionPlaceholder") || null;
-      if (this.revertVersionDetails && !this.revertVersionDetailsDefaultHTML) {
-        this.revertVersionDetailsDefaultHTML = this.revertVersionDetails.innerHTML;
-      }
-      this.revertHistoryCount =
-        modal.querySelector("#revertHistoryCount") || null;
-      this.revertSelectionStatus =
-        modal.querySelector("#revertSelectionStatus") || null;
-      this.revertModalTitle =
-        modal.querySelector("#revertModalTitle") || null;
-      this.revertModalSubtitle =
-        modal.querySelector("#revertModalSubtitle") || null;
-      this.closeRevertVideoModalBtn =
-        modal.querySelector("#closeRevertVideoModal") || null;
-      this.cancelRevertVideoBtn =
-        modal.querySelector("#cancelRevertVideo") || null;
-      this.confirmRevertVideoBtn =
-        modal.querySelector("#confirmRevertVideo") || null;
-
-      if (
-        this.revertVersionsList &&
-        !this.revertVersionsList.dataset.listenerAttached
-      ) {
-        this.revertVersionsList.addEventListener("click", (event) => {
-          this.handleRevertVersionListClick(event);
-        });
-        this.revertVersionsList.dataset.listenerAttached = "true";
-      }
-
-      if (this.closeRevertVideoModalBtn && !this.closeRevertVideoModalBtn.dataset.listenerAttached) {
-        this.closeRevertVideoModalBtn.addEventListener("click", () => {
-          if (!this.revertModalBusy) {
-            this.hideRevertVideoModal();
-          }
-        });
-        this.closeRevertVideoModalBtn.dataset.listenerAttached = "true";
-      }
-
-      if (this.cancelRevertVideoBtn && !this.cancelRevertVideoBtn.dataset.listenerAttached) {
-        this.cancelRevertVideoBtn.addEventListener("click", () => {
-          if (!this.revertModalBusy) {
-            this.hideRevertVideoModal();
-          }
-        });
-        this.cancelRevertVideoBtn.dataset.listenerAttached = "true";
-      }
-
-      if (this.revertVideoOverlay && !this.revertVideoOverlay.dataset.listenerAttached) {
-        this.revertVideoOverlay.addEventListener("click", () => {
-          if (!this.revertModalBusy) {
-            this.hideRevertVideoModal();
-          }
-        });
-        this.revertVideoOverlay.dataset.listenerAttached = "true";
-      }
-
-      if (
-        this.confirmRevertVideoBtn &&
-        !this.confirmRevertVideoBtn.dataset.listenerAttached
-      ) {
-        this.confirmRevertVideoBtn.addEventListener("click", () => {
-          this.handleConfirmRevertSelection();
-        });
-        this.confirmRevertVideoBtn.dataset.listenerAttached = "true";
-      }
-
-      this.resetRevertVideoModal();
-
-      return true;
-    } catch (error) {
-      console.error("initRevertVideoModal failed:", error);
-      this.showError(`Failed to initialize revert modal: ${error.message}`);
-      return false;
-    }
-  }
-
-  resetRevertVideoModal() {
-    this.activeRevertVideo = null;
-    this.revertHistory = [];
-    this.selectedRevertTarget = null;
-    this.revertModalBusy = false;
-    this.pendingRevertEntries = [];
-
-    if (this.revertHistoryCount) {
-      this.revertHistoryCount.textContent = "";
+    if (ensureVideoElement && !readyVideoElement) {
+      throw new Error("Video modal video element is missing after load().");
     }
 
-    if (this.revertSelectionStatus) {
-      this.revertSelectionStatus.textContent =
-        "Select an older revision to inspect its metadata before reverting.";
+    if (readyVideoElement) {
+      this.modalVideo = readyVideoElement;
     }
 
-    if (this.revertModalTitle) {
-      this.revertModalTitle.textContent = "Revert Video Note";
-    }
-
-    if (this.revertModalSubtitle) {
-      this.revertModalSubtitle.textContent =
-        "Review previous versions before restoring an older state.";
-    }
-
-    if (this.revertVersionsList) {
-      this.revertVersionsList.innerHTML = "";
-    }
-
-    if (this.revertVersionDetails && this.revertVersionDetailsDefaultHTML) {
-      this.revertVersionDetails.innerHTML = this.revertVersionDetailsDefaultHTML;
-      this.revertVersionPlaceholder =
-        this.revertVersionDetails.querySelector("#revertVersionPlaceholder");
-    }
-
-    if (this.confirmRevertVideoBtn) {
-      this.confirmRevertVideoBtn.disabled = true;
-      this.confirmRevertVideoBtn.textContent = this.revertConfirmDefaultLabel;
-      this.confirmRevertVideoBtn.classList.remove("cursor-wait");
-    }
-
-    if (this.cancelRevertVideoBtn) {
-      this.cancelRevertVideoBtn.disabled = false;
-      this.cancelRevertVideoBtn.classList.remove("opacity-60", "cursor-not-allowed");
-    }
-
-    if (this.closeRevertVideoModalBtn) {
-      this.closeRevertVideoModalBtn.disabled = false;
-      this.closeRevertVideoModalBtn.classList.remove("opacity-60", "cursor-not-allowed");
-    }
-  }
-
-  showRevertVideoModal() {
-    if (this.revertVideoModal) {
-      this.revertVideoModal.classList.remove("hidden");
-    }
-  }
-
-  hideRevertVideoModal() {
-    if (this.revertVideoModal) {
-      this.revertVideoModal.classList.add("hidden");
-    }
-    this.resetRevertVideoModal();
-  }
-
-  populateRevertVideoModal(video, history = []) {
-    if (!this.revertVideoModal) {
-      return;
-    }
-
-    this.resetRevertVideoModal();
-
-    if (!video || typeof video !== "object") {
-      if (this.revertSelectionStatus) {
-        this.revertSelectionStatus.textContent =
-          "Unable to load revision history for this note.";
-      }
-      return;
-    }
-
-    this.activeRevertVideo = video;
-
-    const merged = Array.isArray(history) ? history.slice() : [];
-    if (video.id && !merged.some((entry) => entry && entry.id === video.id)) {
-      merged.push(video);
-    }
-
-    const deduped = new Map();
-    for (const entry of merged) {
-      if (!entry || typeof entry !== "object" || !entry.id) {
-        continue;
-      }
-      deduped.set(entry.id, entry);
-    }
-
-    this.revertHistory = Array.from(deduped.values()).sort(
-      (a, b) => b.created_at - a.created_at
-    );
-
-    this.selectedRevertTarget = null;
-    if (this.revertHistory.length > 1 && video.created_at) {
-      // Auto-select the newest non-deleted revision that predates the active
-      // event so the confirmation button immediately conveys its effect.
-      const firstOlder = this.revertHistory.find(
-        (entry) =>
-          entry &&
-          entry.id !== video.id &&
-          entry.deleted !== true &&
-          typeof entry.created_at === "number" &&
-          entry.created_at < video.created_at
-      );
-      if (firstOlder) {
-        this.selectedRevertTarget = firstOlder;
-      }
-    }
-
-    if (this.revertHistoryCount) {
-      this.revertHistoryCount.textContent = `${this.revertHistory.length}`;
-    }
-
-    if (this.revertModalTitle) {
-      this.revertModalTitle.textContent = video.title
-        ? `Revert “${video.title}”`
-        : "Revert Video Note";
-    }
-
-    if (this.revertModalSubtitle) {
-      const subtitleParts = [];
-      const dTagValue = this.extractDTagValue(video.tags);
-      if (dTagValue) {
-        subtitleParts.push(`d=${dTagValue}`);
-      }
-      if (video.videoRootId) {
-        subtitleParts.push(`root=${truncateMiddle(video.videoRootId, 40)}`);
-      }
-      this.revertModalSubtitle.textContent = subtitleParts.length
-        ? `History grouped by ${subtitleParts.join(" • ")}`
-        : "Review previous versions before restoring an older state.";
-    }
-
-    this.renderRevertVersionsList();
-
-    if (this.selectedRevertTarget) {
-      this.renderRevertVersionDetails(this.selectedRevertTarget);
-    }
-
-    if (this.revertHistory.length <= 1) {
-      if (this.revertSelectionStatus) {
-        this.revertSelectionStatus.textContent =
-          "No earlier revisions are available for this note.";
-      }
-      this.updateRevertConfirmationState();
-      return;
-    }
-
-    this.updateRevertConfirmationState();
-  }
-
-  renderRevertVersionsList() {
-    if (!this.revertVersionsList) {
-      return;
-    }
-
-    const history = Array.isArray(this.revertHistory)
-      ? this.revertHistory
-      : [];
-    const selectedId = this.selectedRevertTarget?.id || "";
-    const currentId = this.activeRevertVideo?.id || "";
-
-    this.revertVersionsList.innerHTML = "";
-
-    if (!history.length) {
-      this.revertVersionsList.innerHTML =
-        '<p class="text-xs text-gray-500">No revisions found.</p>';
-      return;
-    }
-
-    const fragment = document.createDocumentFragment();
-
-    history.forEach((entry) => {
-      if (!entry || !entry.id) {
-        return;
-      }
-
-      const isCurrent = entry.id === currentId;
-      const isSelected = entry.id === selectedId;
-      const isDeleted = entry.deleted === true;
-
-      const button = document.createElement("button");
-      button.type = "button";
-      button.dataset.revertVersionId = entry.id;
-
-      const classes = [
-        "w-full",
-        "text-left",
-        "rounded-md",
-        "border",
-        "px-3",
-        "py-3",
-        "text-sm",
-        "transition",
-        "duration-150",
-        "focus:outline-none",
-        "focus:ring-2",
-        "focus:ring-offset-2",
-        "focus:ring-offset-gray-900",
-      ];
-
-      if (isSelected) {
-        classes.push(
-          "border-blue-500",
-          "bg-blue-500/20",
-          "text-blue-100",
-          "focus:ring-blue-500"
-        );
-      } else if (isCurrent) {
-        classes.push(
-          "border-green-500/60",
-          "bg-green-500/10",
-          "text-green-100",
-          "focus:ring-green-500/80"
-        );
-      } else if (isDeleted) {
-        classes.push(
-          "border-red-800/70",
-          "bg-red-900/30",
-          "text-red-200/90",
-          "hover:bg-red-900/40"
-        );
-      } else {
-        classes.push(
-          "border-gray-800",
-          "bg-gray-800/60",
-          "hover:bg-gray-700/70",
-          "text-gray-200"
-        );
-      }
-
-      button.className = classes.join(" ");
-      button.setAttribute("aria-pressed", isSelected ? "true" : "false");
-      if (isCurrent) {
-        button.setAttribute("aria-current", "true");
-      }
-
-      const relative = this.formatTimeAgo(entry.created_at);
-      const absolute = this.formatAbsoluteTimestamp(entry.created_at);
-      const versionLabel =
-        entry.version !== undefined ? `v${entry.version}` : "v?";
-
-      const metaParts = [];
-      if (isCurrent) {
-        metaParts.push("Current version");
-      }
-      if (entry.deleted) {
-        metaParts.push("Marked deleted");
-      }
-      if (entry.isPrivate) {
-        metaParts.push("Private");
-      }
-      const meta = metaParts.join(" • ");
-
-      const metaClass = entry.deleted
-        ? "text-red-200/80"
-        : "text-gray-400";
-
-      button.innerHTML = `
-        <div class="flex items-start justify-between gap-3">
-          <div class="space-y-1">
-            <p class="font-semibold">${this.escapeHTML(
-              entry.title || "Untitled"
-            )}</p>
-            <p class="text-xs text-gray-300">${this.escapeHTML(
-              relative
-            )} • ${this.escapeHTML(absolute)}</p>
-            ${
-              meta
-                ? `<p class="text-xs ${metaClass}">${this.escapeHTML(meta)}</p>`
-                : ""
-            }
-          </div>
-          <div class="text-xs uppercase tracking-wide text-gray-400">
-            ${this.escapeHTML(versionLabel)}
-          </div>
-        </div>
-      `;
-
-      fragment.appendChild(button);
-    });
-
-    this.revertVersionsList.appendChild(fragment);
-  }
-
-  handleRevertVersionListClick(event) {
-    const button = event?.target?.closest?.("[data-revert-version-id]");
-    if (!button || !button.dataset) {
-      return;
-    }
-
-    const versionId = button.dataset.revertVersionId;
-    if (!versionId) {
-      return;
-    }
-
-    const match = (this.revertHistory || []).find(
-      (entry) => entry && entry.id === versionId
-    );
-    if (!match) {
-      return;
-    }
-
-    this.selectedRevertTarget = match;
-    this.renderRevertVersionsList();
-    this.renderRevertVersionDetails(match);
-    this.updateRevertConfirmationState();
-  }
-
-  renderRevertVersionDetails(version) {
-    if (!this.revertVersionDetails) {
-      return;
-    }
-
-    if (!version) {
-      if (this.revertVersionDetailsDefaultHTML) {
-        this.revertVersionDetails.innerHTML =
-          this.revertVersionDetailsDefaultHTML;
-        this.revertVersionPlaceholder =
-          this.revertVersionDetails.querySelector("#revertVersionPlaceholder");
-      }
-      return;
-    }
-
-    const absolute = this.formatAbsoluteTimestamp(version.created_at);
-    const relative = this.formatTimeAgo(version.created_at);
-    const description =
-      typeof version.description === "string" ? version.description : "";
-    const thumbnail =
-      typeof version.thumbnail === "string" ? version.thumbnail.trim() : "";
-    const url = typeof version.url === "string" ? version.url.trim() : "";
-    const magnet =
-      typeof version.magnet === "string" ? version.magnet.trim() : "";
-    const rawMagnet =
-      typeof version.rawMagnet === "string" ? version.rawMagnet.trim() : "";
-    const displayMagnet = magnet || rawMagnet;
-    const isPrivate = version.isPrivate === true;
-    const dTagValue = this.extractDTagValue(version.tags);
-
-    const fallbackThumbnail = this.escapeHTML(FALLBACK_THUMBNAIL_SRC);
-    const thumbnailSrc = thumbnail
-      ? this.escapeHTML(thumbnail)
-      : fallbackThumbnail;
-    const thumbnailAlt = thumbnail
-      ? "Revision thumbnail"
-      : "Fallback thumbnail";
-
-    let urlHtml = '<span class="text-gray-500">None</span>';
-    if (url) {
-      const safeUrl = this.escapeHTML(url);
-      const displayUrl = this.escapeHTML(truncateMiddle(url, 72));
-      urlHtml = `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300 break-all">${displayUrl}</a>`;
-    }
-
-    let magnetHtml = '<span class="text-gray-500">None</span>';
-    if (displayMagnet) {
-      const label = this.escapeHTML(truncateMiddle(displayMagnet, 72));
-      const caption = isPrivate
-        ? '<span class="block text-xs text-purple-200/90 mt-1">Encrypted magnet (only decrypted locally for the owner).</span>'
-        : "";
-      magnetHtml = `<div class="break-all">${label}${caption}</div>`;
-    }
-
-    const chips = [];
-    if (version.deleted) {
-      chips.push(
-        '<span class="inline-flex items-center rounded-full border border-red-700/70 bg-red-900/40 px-2 py-0.5 text-xs text-red-200/90">Marked deleted</span>'
-      );
-    }
-    if (isPrivate) {
-      chips.push(
-        '<span class="inline-flex items-center rounded-full border border-purple-600/60 bg-purple-900/40 px-2 py-0.5 text-xs text-purple-200/90">Private</span>'
-      );
-    }
-    if (version.version !== undefined) {
-      chips.push(
-        `<span class="inline-flex items-center rounded-full border border-gray-700 bg-gray-800/80 px-2 py-0.5 text-xs text-gray-200">Schema v${this.escapeHTML(
-          String(version.version)
-        )}</span>`
-      );
-    }
-
-    const descriptionHtml = description
-      ? `<p class="whitespace-pre-wrap text-gray-200">${this.escapeHTML(
-          description
-        )}</p>`
-      : '<p class="text-gray-500">No description provided.</p>';
-
-    const rootId =
-      typeof version.videoRootId === "string" ? version.videoRootId : "";
-    const rootDisplay = rootId
-      ? this.escapeHTML(truncateMiddle(rootId, 64))
-      : "";
-    const eventDisplay = version.id
-      ? this.escapeHTML(truncateMiddle(version.id, 64))
-      : "";
-
-    this.revertVersionDetails.innerHTML = `
-      <div class="space-y-4">
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-start">
-          <div class="overflow-hidden rounded-md border border-gray-800 bg-black/40 w-full max-w-sm">
-            <img
-              src="${thumbnailSrc}"
-              alt="${this.escapeHTML(thumbnailAlt)}"
-              class="w-full h-auto object-cover"
-              loading="lazy"
-            />
-          </div>
-          <div class="flex-1 space-y-3">
-            <div class="space-y-1">
-              <h3 class="text-lg font-semibold text-white">${this.escapeHTML(
-                version.title || "Untitled"
-              )}</h3>
-              <p class="text-xs text-gray-400">${this.escapeHTML(
-                absolute
-              )} (${this.escapeHTML(relative)})</p>
-            </div>
-            ${
-              chips.length
-                ? `<div class="flex flex-wrap gap-2">${chips.join("")}</div>`
-                : ""
-            }
-            <div class="space-y-2 text-sm text-gray-200">
-              <div>
-                <span class="font-medium text-gray-300">Hosted URL:</span>
-                <div class="mt-1">${urlHtml}</div>
-              </div>
-              <div>
-                <span class="font-medium text-gray-300">Magnet:</span>
-                <div class="mt-1">${magnetHtml}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="space-y-2">
-          <h4 class="text-sm font-semibold text-gray-200">Description</h4>
-          ${descriptionHtml}
-        </div>
-
-        <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
-          <div>
-            <dt class="font-semibold text-gray-200">Mode</dt>
-            <dd class="mt-1">${this.escapeHTML(version.mode || "live")}</dd>
-          </div>
-          <div>
-            <dt class="font-semibold text-gray-200">d tag</dt>
-            <dd class="mt-1">
-              ${dTagValue
-                ? `<code class="rounded bg-gray-800/80 px-1.5 py-0.5">${this.escapeHTML(
-                    dTagValue
-                  )}</code>`
-                : '<span class="text-gray-500">Not provided</span>'}
-            </dd>
-          </div>
-          <div>
-            <dt class="font-semibold text-gray-200">videoRootId</dt>
-            <dd class="mt-1">
-              ${rootDisplay
-                ? `<code class="break-all rounded bg-gray-800/80 px-1.5 py-0.5" title="${this.escapeHTML(
-                    rootId
-                  )}">${rootDisplay}</code>`
-                : '<span class="text-gray-500">Not provided</span>'}
-            </dd>
-          </div>
-          <div>
-            <dt class="font-semibold text-gray-200">Event ID</dt>
-            <dd class="mt-1">
-              ${eventDisplay
-                ? `<code class="break-all rounded bg-gray-800/80 px-1.5 py-0.5" title="${this.escapeHTML(
-                    version.id || ""
-                  )}">${eventDisplay}</code>`
-                : '<span class="text-gray-500">Unknown</span>'}
-            </dd>
-          </div>
-        </dl>
-      </div>
-    `;
-  }
-
-  updateRevertConfirmationState() {
-    if (!this.confirmRevertVideoBtn) {
-      return;
-    }
-
-    if (!this.selectedRevertTarget || !this.activeRevertVideo) {
-      this.pendingRevertEntries = [];
-      this.confirmRevertVideoBtn.disabled = true;
-      if (!this.revertModalBusy) {
-        this.confirmRevertVideoBtn.textContent = this.revertConfirmDefaultLabel;
-      }
-      if (this.revertSelectionStatus) {
-        if ((this.revertHistory || []).length > 1) {
-          this.revertSelectionStatus.textContent =
-            "Select an older revision to enable reverting.";
-        }
-      }
-      return;
-    }
-
-    const target = this.selectedRevertTarget;
-    const activePubkey =
-      typeof this.activeRevertVideo.pubkey === "string"
-        ? this.activeRevertVideo.pubkey.toLowerCase()
-        : "";
-
-    const revertCandidates = (this.revertHistory || []).filter((entry) => {
-      if (!entry || entry.id === target.id) {
-        return false;
-      }
-      if (entry.deleted) {
-        return false;
-      }
-      if (typeof entry.created_at !== "number") {
-        return false;
-      }
-      if (entry.created_at <= target.created_at) {
-        return false;
-      }
-      if (!entry.pubkey) {
-        return false;
-      }
-      const entryPubkey =
-        typeof entry.pubkey === "string" ? entry.pubkey.toLowerCase() : "";
-      if (activePubkey && entryPubkey !== activePubkey) {
-        return false;
-      }
-      return true;
-    });
-
-    this.pendingRevertEntries = revertCandidates;
-
-    const disable =
-      this.revertModalBusy ||
-      target.deleted === true ||
-      revertCandidates.length === 0;
-
-    this.confirmRevertVideoBtn.disabled = disable;
-    if (!this.revertModalBusy) {
-      this.confirmRevertVideoBtn.textContent = this.revertConfirmDefaultLabel;
-    }
-
-    if (this.revertSelectionStatus) {
-      if (target.deleted) {
-        this.revertSelectionStatus.textContent =
-          "This revision was previously marked as deleted and cannot become active.";
-      } else if (revertCandidates.length === 0) {
-        this.revertSelectionStatus.textContent =
-          "The selected revision is already the latest active version.";
-      } else {
-        const suffix = revertCandidates.length === 1 ? "revision" : "revisions";
-        this.revertSelectionStatus.textContent = `Reverting will mark ${revertCandidates.length} newer ${suffix} as reverted.`;
-      }
-    }
-  }
-
-  setRevertModalBusy(isBusy, label) {
-    this.revertModalBusy = Boolean(isBusy);
-
-    if (this.confirmRevertVideoBtn) {
-      const disableConfirm =
-        this.revertModalBusy ||
-        !this.selectedRevertTarget ||
-        !this.pendingRevertEntries ||
-        this.pendingRevertEntries.length === 0 ||
-        (this.selectedRevertTarget && this.selectedRevertTarget.deleted === true);
-      this.confirmRevertVideoBtn.disabled = disableConfirm;
-      this.confirmRevertVideoBtn.textContent = this.revertModalBusy
-        ? label || "Reverting…"
-        : this.revertConfirmDefaultLabel;
-      this.confirmRevertVideoBtn.classList.toggle(
-        "cursor-wait",
-        this.revertModalBusy
-      );
-    }
-
-    const toggleDisabledStyles = (button) => {
-      if (!button) {
-        return;
-      }
-      button.disabled = this.revertModalBusy;
-      button.classList.toggle("opacity-60", this.revertModalBusy);
-      button.classList.toggle("cursor-not-allowed", this.revertModalBusy);
+    return {
+      root: readyRoot,
+      videoElement: readyVideoElement,
     };
-
-    toggleDisabledStyles(this.cancelRevertVideoBtn);
-    toggleDisabledStyles(this.closeRevertVideoModalBtn);
-
-    if (!this.revertModalBusy) {
-      this.updateRevertConfirmationState();
-    }
-  }
-
-  async handleConfirmRevertSelection() {
-    if (!this.selectedRevertTarget) {
-      return;
-    }
-    if (!this.pubkey) {
-      this.showError("Please login to revert.");
-      return;
-    }
-
-    const entries = Array.isArray(this.pendingRevertEntries)
-      ? this.pendingRevertEntries.slice()
-      : [];
-    if (!entries.length) {
-      this.updateRevertConfirmationState();
-      return;
-    }
-
-    this.setRevertModalBusy(true, "Reverting…");
-
-    try {
-      for (const entry of entries) {
-        await nostrClient.revertVideo(
-          {
-            id: entry.id,
-            pubkey: entry.pubkey,
-            tags: entry.tags,
-          },
-          this.pubkey
-        );
-      }
-
-      await this.loadVideos();
-
-      const timestampLabel = this.formatAbsoluteTimestamp(
-        this.selectedRevertTarget.created_at
-      );
-      this.showSuccess(`Reverted to revision from ${timestampLabel}.`);
-      this.hideRevertVideoModal();
-      this.forceRefreshAllProfiles();
-    } catch (err) {
-      console.error("Failed to revert video:", err);
-      this.showError("Failed to revert video. Please try again.");
-    } finally {
-      this.setRevertModalBusy(false);
-      this.pendingRevertEntries = [];
-    }
   }
 
   extractDTagValue(tags) {
@@ -2690,34 +1410,14 @@ class bitvidApp {
     }
 
     const dTagValue = (this.extractDTagValue(video.tags) || "").trim();
-    const normalizedPubkey =
-      typeof video.pubkey === "string" ? video.pubkey.trim() : "";
-    const kind =
-      typeof video.kind === "number" && Number.isFinite(video.kind)
-        ? video.kind
-        : VIDEO_EVENT_KIND;
 
-    if (dTagValue && normalizedPubkey) {
-      const pointer = ["a", `${kind}:${normalizedPubkey}:${dTagValue}`];
-      const key = pointerArrayToKey(pointer);
-      if (key) {
-        return { pointer, key };
-      }
-    }
-
-    const fallbackId =
-      typeof video.id === "string" && video.id.trim()
-        ? video.id.trim()
-        : "";
-    if (fallbackId) {
-      const pointer = ["e", fallbackId];
-      const key = pointerArrayToKey(pointer);
-      if (key) {
-        return { pointer, key };
-      }
-    }
-
-    return null;
+    return resolveVideoPointer({
+      kind: video.kind,
+      pubkey: video.pubkey,
+      videoRootId: video.videoRootId,
+      dTag: dTagValue,
+      fallbackEventId: video.id,
+    });
   }
 
   formatViewCountLabel(total) {
@@ -2726,117 +1426,16 @@ class bitvidApp {
     return `${formatViewCount(value)} ${label}`;
   }
 
-  ensureViewCountSubscription(pointerInfo) {
-    if (!pointerInfo || !pointerInfo.key || !pointerInfo.pointer) {
-      return null;
-    }
-
-    const existing = this.viewCountSubscriptions.get(pointerInfo.key);
-    if (existing) {
-      return existing;
-    }
-
-    const entry = {
-      pointer: pointerInfo.pointer,
-      key: pointerInfo.key,
-      token: null,
-      elements: new Set(),
-      lastTotal: null,
-      lastStatus: "idle",
-      lastText: "– views",
-    };
-
-    try {
-      const token = subscribeToVideoViewCount(
-        pointerInfo.pointer,
-        ({ total, status }) => {
-          let text;
-          if (Number.isFinite(total)) {
-            const numeric = Number(total);
-            entry.lastTotal = numeric;
-            text = this.formatViewCountLabel(numeric);
-          } else if (status === "hydrating") {
-            text = "Loading views…";
-          } else {
-            text = "– views";
-          }
-
-          entry.lastStatus = status;
-          entry.lastText = text;
-
-          for (const el of Array.from(entry.elements)) {
-            if (!el || !el.isConnected) {
-              entry.elements.delete(el);
-              continue;
-            }
-            el.textContent = text;
-          }
-        }
-      );
-      entry.token = token;
-      this.viewCountSubscriptions.set(pointerInfo.key, entry);
-      return entry;
-    } catch (error) {
-      console.warn("[viewCount] Failed to subscribe to view counter:", error);
-      return null;
-    }
-  }
-
-  registerVideoViewCountElement(cardEl, pointerInfo) {
-    if (!cardEl || !pointerInfo) {
-      return;
-    }
-
-    const viewCountEl = cardEl.querySelector("[data-view-count]");
-    if (!viewCountEl) {
-      return;
-    }
-
-    if (!viewCountEl.textContent || !viewCountEl.textContent.trim()) {
-      viewCountEl.textContent = "– views";
-    }
-
-    const entry = this.ensureViewCountSubscription(pointerInfo);
-    if (!entry) {
-      return;
-    }
-
-    entry.elements.add(viewCountEl);
-    if (typeof pointerInfo.key === "string") {
-      viewCountEl.dataset.viewPointer = pointerInfo.key;
-    }
-    viewCountEl.textContent = entry.lastText;
-  }
-
   pruneDetachedViewCountElements() {
-    for (const entry of this.viewCountSubscriptions.values()) {
-      if (!entry || !(entry.elements instanceof Set)) {
-        continue;
-      }
-      for (const el of Array.from(entry.elements)) {
-        if (!el || !el.isConnected) {
-          entry.elements.delete(el);
-        }
-      }
+    if (this.videoListView) {
+      this.videoListView.pruneDetachedViewCountElements();
     }
   }
 
   teardownAllViewCountSubscriptions() {
-    const keys = Array.from(this.viewCountSubscriptions.keys());
-    keys.forEach((key) => {
-      const entry = this.viewCountSubscriptions.get(key);
-      if (entry && entry.token && entry.pointer) {
-        try {
-          unsubscribeFromVideoViewCount(entry.pointer, entry.token);
-        } catch (error) {
-          console.warn(
-            `[viewCount] Failed to unsubscribe from pointer ${key}:`,
-            error
-          );
-        }
-      }
-      this.viewCountSubscriptions.delete(key);
-    });
+    if (this.videoListView) {
+      this.videoListView.teardownAllViewCountSubscriptions();
+    }
   }
 
   teardownModalViewCountSubscription() {
@@ -2848,16 +1447,15 @@ class bitvidApp {
       }
     }
     this.modalViewCountUnsub = null;
-    if (this.videoViewCountEl) {
-      this.videoViewCountEl.textContent = "– views";
-      if (this.videoViewCountEl.dataset?.viewPointer) {
-        delete this.videoViewCountEl.dataset.viewPointer;
-      }
+    if (this.videoModal) {
+      this.videoModal.updateViewCountLabel("– views");
+      this.videoModal.setViewCountPointer(null);
     }
   }
 
   subscribeModalViewCount(pointer, pointerKey) {
-    if (!this.videoViewCountEl) {
+    const viewEl = this.videoModal?.getViewCountElement() || null;
+    if (!viewEl) {
       return;
     }
 
@@ -2867,23 +1465,35 @@ class bitvidApp {
       return;
     }
 
-    this.videoViewCountEl.textContent = "Loading views…";
+    if (this.videoModal) {
+      this.videoModal.updateViewCountLabel("Loading views…");
+      this.videoModal.setViewCountPointer(pointerKey);
+    }
     try {
       const token = subscribeToVideoViewCount(pointer, ({ total, status }) => {
-        if (!this.videoViewCountEl) {
+        const latestViewEl = this.videoModal?.getViewCountElement() || null;
+        if (!latestViewEl) {
           return;
         }
 
         if (Number.isFinite(total)) {
           const numeric = Number(total);
-          this.videoViewCountEl.textContent = this.formatViewCountLabel(numeric);
+          if (this.videoModal) {
+            this.videoModal.updateViewCountLabel(
+              this.formatViewCountLabel(numeric)
+            );
+          }
           return;
         }
 
         if (status === "hydrating") {
-          this.videoViewCountEl.textContent = "Loading views…";
+          if (this.videoModal) {
+            this.videoModal.updateViewCountLabel("Loading views…");
+          }
         } else {
-          this.videoViewCountEl.textContent = "– views";
+          if (this.videoModal) {
+            this.videoModal.updateViewCountLabel("– views");
+          }
         }
       });
 
@@ -2899,2223 +1509,105 @@ class bitvidApp {
           this.modalViewCountUnsub = null;
         }
       };
-      this.videoViewCountEl.dataset.viewPointer = pointerKey;
     } catch (error) {
       console.warn("[viewCount] Failed to subscribe modal view counter:", error);
-      this.videoViewCountEl.textContent = "– views";
+      if (this.videoModal) {
+        this.videoModal.updateViewCountLabel("– views");
+        this.videoModal.setViewCountPointer(null);
+      }
     }
   }
 
-  populateEditVideoForm(video) {
-    if (!video || !this.editVideoModal) {
+  syncProfileModalState({
+    includeSavedProfiles = true,
+    includeActivePubkey = true,
+  } = {}) {
+    if (!this.profileController) {
       return;
     }
 
-    this.resetEditVideoForm();
-
-    const magnetSource = video.magnet || video.rawMagnet || "";
-    const magnetHints = extractMagnetHints(magnetSource);
-    const effectiveWs = video.ws || magnetHints.ws || "";
-    const effectiveXs = video.xs || magnetHints.xs || "";
-    const enableCommentsValue =
-      typeof video.enableComments === "boolean"
-        ? video.enableComments
-        : true;
-
-    const editContext = {
-      ...video,
-      ws: effectiveWs,
-      xs: effectiveXs,
-      enableComments: enableCommentsValue,
-    };
-
-    const fieldMap = {
-      editVideoTitle: editContext.title || "",
-      editVideoUrl: editContext.url || "",
-      editVideoMagnet: editContext.magnet || "",
-      editVideoWs: editContext.ws || "",
-      editVideoXs: editContext.xs || "",
-      editVideoThumbnail: editContext.thumbnail || "",
-      editVideoDescription: editContext.description || "",
-      editEnableComments: editContext.enableComments,
-    };
-
-    Object.entries(fieldMap).forEach(([id, rawValue]) => {
-      const input = this.editVideoModal.querySelector(`#${id}`);
-      const button = this.editVideoModal.querySelector(
-        `[data-edit-target="${id}"]`
-      );
-      if (!input) {
-        if (button) {
-          button.classList.add("hidden");
-          button.dataset.mode = "locked";
-          button.textContent = "Edit field";
-        }
-        return;
-      }
-
-      const isCheckbox = input.type === "checkbox";
-      if (isCheckbox) {
-        const hasValue = rawValue !== undefined;
-        const boolValue = rawValue === true;
-        input.checked = boolValue;
-        input.disabled = hasValue;
-        input.dataset.originalValue = boolValue ? "true" : "false";
-        if (button) {
-          if (hasValue) {
-            button.classList.remove("hidden");
-            button.dataset.mode = "locked";
-            button.textContent = "Edit field";
-          } else {
-            button.classList.add("hidden");
-            button.dataset.mode = "locked";
-            button.textContent = "Edit field";
-          }
-        }
-        return;
-      }
-
-      const value = typeof rawValue === "string" ? rawValue : "";
-      const hasValue = value.trim().length > 0;
-
-      input.value = value;
-      input.dataset.originalValue = value;
-      if (hasValue) {
-        input.readOnly = true;
-        input.classList.add("locked-input");
-      } else {
-        input.readOnly = false;
-        input.classList.remove("locked-input");
-      }
-
-      if (button) {
-        if (hasValue) {
-          button.classList.remove("hidden");
-          button.dataset.mode = "locked";
-          button.textContent = "Edit field";
-        } else {
-          button.classList.add("hidden");
-          button.dataset.mode = "locked";
-          button.textContent = "Edit field";
-        }
-      }
-    });
-
-    this.activeEditVideo = editContext;
-  }
-
-  handleEditFieldToggle(event) {
-    const button = event?.currentTarget;
-    if (!button || !this.editVideoModal) {
-      return;
-    }
-
-    const targetId = button.dataset?.editTarget;
-    if (!targetId) {
-      return;
-    }
-
-    const input = this.editVideoModal.querySelector(`#${targetId}`);
-    if (!input) {
-      return;
-    }
-
-    const mode = button.dataset.mode || "locked";
-    const isCheckbox = input.type === "checkbox";
-
-    if (mode === "locked") {
-      if (isCheckbox) {
-        input.disabled = false;
-      } else {
-        input.readOnly = false;
-        input.classList.remove("locked-input");
-      }
-      button.dataset.mode = "editing";
-      button.textContent = "Restore original";
-      if (!isCheckbox && typeof input.focus === "function") {
-        input.focus();
-        if (typeof input.setSelectionRange === "function") {
-          const length = input.value.length;
-          try {
-            input.setSelectionRange(length, length);
-          } catch (err) {
-            // ignore selection errors (e.g. for input types that do not support it)
-          }
-        }
-      }
-      return;
-    }
-
-    const originalValue = input.dataset?.originalValue || "";
-
-    if (isCheckbox) {
-      input.checked = originalValue === "true";
-      input.disabled = true;
-      button.dataset.mode = "locked";
-      button.textContent = "Edit field";
-      return;
-    }
-
-    input.value = originalValue;
-
-    if (originalValue) {
-      input.readOnly = true;
-      input.classList.add("locked-input");
-      button.dataset.mode = "locked";
-      button.textContent = "Edit field";
-    } else {
-      input.readOnly = false;
-      input.classList.remove("locked-input");
-      button.classList.add("hidden");
-      button.dataset.mode = "locked";
-      button.textContent = "Edit field";
-    }
-  }
-
-  setUploadMode(mode) {
-    const normalized = mode === "cloudflare" ? "cloudflare" : "custom";
-    this.activeUploadMode = normalized;
-
-    if (this.customUploadSection) {
-      if (normalized === "custom") {
-        this.customUploadSection.classList.remove("hidden");
-      } else {
-        this.customUploadSection.classList.add("hidden");
-      }
-    }
-
-    if (this.cloudflareUploadSection) {
-      if (normalized === "cloudflare") {
-        this.cloudflareUploadSection.classList.remove("hidden");
-      } else {
-        this.cloudflareUploadSection.classList.add("hidden");
-      }
-    }
-
-    if (Array.isArray(this.uploadModeToggleButtons)) {
-      this.uploadModeToggleButtons.forEach((btn) => {
-        if (!btn || !btn.dataset) {
-          return;
-        }
-
-        const isActive = btn.dataset.uploadMode === normalized;
-        btn.classList.toggle("bg-blue-500", isActive);
-        btn.classList.toggle("text-white", isActive);
-        btn.classList.toggle("shadow", isActive);
-        btn.classList.toggle("text-gray-300", !isActive);
-        btn.setAttribute("aria-pressed", isActive ? "true" : "false");
-      });
-    }
-
-    if (normalized === "cloudflare") {
-      this.updateCloudflareBucketPreview();
-    }
-  }
-
-  setCloudflareAdvancedVisibility(visible) {
-    const isVisible = Boolean(visible);
-    this.cloudflareAdvancedVisible = isVisible;
-
-    if (this.cloudflareAdvancedFields) {
-      if (isVisible) {
-        this.cloudflareAdvancedFields.classList.remove("hidden");
-      } else {
-        this.cloudflareAdvancedFields.classList.add("hidden");
-      }
-    }
-
-    if (this.cloudflareAdvancedToggle) {
-      this.cloudflareAdvancedToggle.setAttribute(
-        "aria-expanded",
-        isVisible ? "true" : "false"
-      );
-    }
-
-    if (this.cloudflareAdvancedToggleLabel) {
-      this.cloudflareAdvancedToggleLabel.textContent = isVisible
-        ? "Hide advanced options"
-        : "Show advanced options";
-    }
-
-    if (this.cloudflareAdvancedToggleIcon) {
-      this.cloudflareAdvancedToggleIcon.classList.toggle("rotate-90", isVisible);
-    }
-  }
-
-  setCloudflareSettingsStatus(message = "", variant = "info") {
-    if (!this.cloudflareSettingsStatus) {
-      return;
-    }
-
-    const el = this.cloudflareSettingsStatus;
-    el.textContent = message || "";
-    el.classList.remove(
-      "text-green-400",
-      "text-red-400",
-      "text-yellow-400",
-      "text-gray-400"
-    );
-    if (!message) {
-      el.classList.add("text-gray-400");
-      return;
-    }
-
-    let cls = "text-gray-400";
-    if (variant === "success") {
-      cls = "text-green-400";
-    } else if (variant === "error") {
-      cls = "text-red-400";
-    } else if (variant === "warning") {
-      cls = "text-yellow-400";
-    }
-    el.classList.add(cls);
-  }
-
-  setCloudflareUploadStatus(message = "", variant = "info") {
-    if (!this.cloudflareUploadStatus) {
-      return;
-    }
-
-    const el = this.cloudflareUploadStatus;
-    el.textContent = message || "";
-    el.classList.remove(
-      "text-green-400",
-      "text-red-400",
-      "text-yellow-400",
-      "text-gray-400"
-    );
-    if (!message) {
-      el.classList.add("text-gray-400");
-      return;
-    }
-
-    let cls = "text-gray-400";
-    if (variant === "success") {
-      cls = "text-green-400";
-    } else if (variant === "error") {
-      cls = "text-red-400";
-    } else if (variant === "warning") {
-      cls = "text-yellow-400";
-    }
-    el.classList.add(cls);
-  }
-
-  setCloudflareUploading(isUploading) {
-    if (this.cloudflareUploadButton) {
-      this.cloudflareUploadButton.disabled = Boolean(isUploading);
-      this.cloudflareUploadButton.textContent = isUploading
-        ? "Uploading…"
-        : "Upload to R2 & publish";
-    }
-
-    if (this.cloudflareFileInput) {
-      this.cloudflareFileInput.disabled = Boolean(isUploading);
-    }
-
-    if (this.cloudflareEnableCommentsInput) {
-      this.cloudflareEnableCommentsInput.disabled = Boolean(isUploading);
-    }
-  }
-
-  updateCloudflareProgress(fraction) {
-    if (!this.cloudflareProgressBar || !this.cloudflareProgressFill) {
-      return;
-    }
-
-    if (typeof fraction !== "number" || Number.isNaN(fraction)) {
-      this.cloudflareProgressBar.classList.add("hidden");
-      this.cloudflareProgressFill.style.width = "0%";
-      return;
-    }
-
-    const clamped = Math.max(0, Math.min(1, fraction));
-    this.cloudflareProgressBar.classList.remove("hidden");
-    this.cloudflareProgressFill.style.width = `${(clamped * 100).toFixed(1)}%`;
-  }
-
-  resetCloudflareUploadForm() {
-    if (this.cloudflareTitleInput) this.cloudflareTitleInput.value = "";
-    if (this.cloudflareDescriptionInput)
-      this.cloudflareDescriptionInput.value = "";
-    if (this.cloudflareThumbnailInput)
-      this.cloudflareThumbnailInput.value = "";
-    if (this.cloudflareMagnetInput) this.cloudflareMagnetInput.value = "";
-    if (this.cloudflareWsInput) this.cloudflareWsInput.value = "";
-    if (this.cloudflareXsInput) this.cloudflareXsInput.value = "";
-    if (this.cloudflareEnableCommentsInput)
-      this.cloudflareEnableCommentsInput.checked = true;
-    if (this.cloudflareFileInput) this.cloudflareFileInput.value = "";
-    this.updateCloudflareProgress(Number.NaN);
-  }
-
-  async loadCloudflareSettingsFromStorage() {
-    try {
-      const settings = await loadR2Settings();
-      this.cloudflareSettings = settings;
-      this.populateCloudflareSettingsInputs(settings);
-    } catch (err) {
-      console.error("Failed to load Cloudflare settings:", err);
-      this.setCloudflareSettingsStatus(
-        "Failed to load saved settings.",
-        "error"
-      );
-      this.cloudflareSettings = {
-        accountId: "",
-        accessKeyId: "",
-        secretAccessKey: "",
-        apiToken: "",
-        zoneId: "",
-        baseDomain: "",
-        buckets: {},
-      };
-      this.populateCloudflareSettingsInputs(this.cloudflareSettings);
-    }
-  }
-
-  populateCloudflareSettingsInputs(settings) {
-    const data =
-      settings || {
-        accountId: "",
-        accessKeyId: "",
-        secretAccessKey: "",
-        apiToken: "",
-        zoneId: "",
-        baseDomain: "",
-      };
-
-    if (this.r2AccountIdInput) {
-      this.r2AccountIdInput.value = data.accountId || "";
-    }
-    if (this.r2AccessKeyIdInput) {
-      this.r2AccessKeyIdInput.value = data.accessKeyId || "";
-    }
-    if (this.r2SecretAccessKeyInput) {
-      this.r2SecretAccessKeyInput.value = data.secretAccessKey || "";
-    }
-    if (this.r2ApiTokenInput) {
-      this.r2ApiTokenInput.value = data.apiToken || "";
-    }
-    if (this.r2ZoneIdInput) {
-      this.r2ZoneIdInput.value = data.zoneId || "";
-    }
-    if (this.r2BaseDomainInput) {
-      this.r2BaseDomainInput.value = data.baseDomain || "";
-    }
-
-    const hasAdvancedValues = Boolean(
-      (data.apiToken && data.apiToken.length > 0) ||
-        (data.zoneId && data.zoneId.length > 0) ||
-        (data.baseDomain && data.baseDomain.length > 0)
-    );
-    if (hasAdvancedValues) {
-      this.setCloudflareAdvancedVisibility(true);
-    } else if (!this.cloudflareAdvancedVisible) {
-      this.setCloudflareAdvancedVisibility(false);
-    }
-
-    this.setCloudflareSettingsStatus("");
-  }
-
-  async handleCloudflareSettingsSubmit({ quiet = false } = {}) {
-    const accountId = (this.r2AccountIdInput?.value || "").trim();
-    const accessKeyId = (this.r2AccessKeyIdInput?.value || "").trim();
-    const secretAccessKey = (this.r2SecretAccessKeyInput?.value || "").trim();
-    const apiToken = (this.r2ApiTokenInput?.value || "").trim();
-    const zoneId = (this.r2ZoneIdInput?.value || "").trim();
-    const baseDomain = sanitizeBaseDomain(
-      this.r2BaseDomainInput?.value || ""
-    );
-
-    if (!accountId || !accessKeyId || !secretAccessKey) {
-      if (!quiet) {
-        this.setCloudflareSettingsStatus(
-          "Account ID, Access Key ID, and Secret are required.",
-          "error"
-        );
-      }
-      return false;
-    }
-
-    let buckets = { ...(this.cloudflareSettings?.buckets || {}) };
-    const previousAccount = this.cloudflareSettings?.accountId || "";
-    const previousBaseDomain = this.cloudflareSettings?.baseDomain || "";
-    const previousZoneId = this.cloudflareSettings?.zoneId || "";
-    if (
-      previousAccount !== accountId ||
-      previousBaseDomain !== baseDomain ||
-      previousZoneId !== zoneId
-    ) {
-      buckets = {};
-    }
-
-    const updatedSettings = {
-      accountId,
-      accessKeyId,
-      secretAccessKey,
-      apiToken,
-      zoneId,
-      baseDomain,
-      buckets,
-    };
-
-    try {
-      this.cloudflareSettings = await saveR2Settings(updatedSettings);
-      this.populateCloudflareSettingsInputs(this.cloudflareSettings);
-      if (!quiet) {
-        this.setCloudflareSettingsStatus("Settings saved locally.", "success");
-      }
-      await this.updateCloudflareBucketPreview();
-      return true;
-    } catch (err) {
-      console.error("Failed to save Cloudflare settings:", err);
-      if (!quiet) {
-        this.setCloudflareSettingsStatus(
-          "Failed to save settings. Check console for details.",
-          "error"
-        );
-      }
-    }
-
-    return false;
-  }
-
-  async handleCloudflareClearSettings() {
-    try {
-      await clearR2Settings();
-      this.cloudflareSettings = await loadR2Settings();
-      this.populateCloudflareSettingsInputs(this.cloudflareSettings);
-      this.setCloudflareAdvancedVisibility(false);
-      this.setCloudflareSettingsStatus("Settings cleared.", "success");
-      await this.updateCloudflareBucketPreview();
-    } catch (err) {
-      console.error("Failed to clear Cloudflare settings:", err);
-      this.setCloudflareSettingsStatus(
-        "Failed to clear settings.",
-        "error"
-      );
-    }
-  }
-
-  getCorsOrigins() {
-    const origins = new Set();
-    if (typeof window !== "undefined" && window.location) {
-      const origin = window.location.origin;
-      if (origin && origin !== "null") {
-        origins.add(origin);
-      }
-      if (origin && origin.startsWith("http://localhost")) {
-        origins.add(origin.replace("http://", "https://"));
-      }
-    }
-    return Array.from(origins);
-  }
-
-  deriveSubdomainForNpub(npub) {
-    try {
-      return deriveShortSubdomain(npub);
-    } catch (err) {
-      console.warn("Failed to derive short subdomain, falling back:", err);
-    }
-
-    const base = String(npub || "user")
-      .toLowerCase()
-      .replace(/[^a-z0-9-]/g, "")
-      .replace(/^-+|[-]+$/g, "");
-    return base.slice(0, 32) || "user";
-  }
-
-  async ensureBucketConfigForNpub(npub) {
-    if (!npub || !this.cloudflareSettings) {
-      return null;
-    }
-
-    const accountId = (this.cloudflareSettings.accountId || "").trim();
-    const apiToken = (this.cloudflareSettings.apiToken || "").trim();
-    const zoneId = (this.cloudflareSettings.zoneId || "").trim();
-    const accessKeyId = (this.cloudflareSettings.accessKeyId || "").trim();
-    const secretAccessKey =
-      (this.cloudflareSettings.secretAccessKey || "").trim();
-    const corsOrigins = this.getCorsOrigins();
-    const baseDomain = this.cloudflareSettings.baseDomain || "";
-
-    if (!accountId) {
-      throw new Error("Cloudflare account ID is missing.");
-    }
-
-    let entry = this.cloudflareSettings.buckets?.[npub] || null;
-
-    if (entry && entry.publicBaseUrl) {
-      if (apiToken) {
-        try {
-          await ensureBucket({
-            accountId,
-            bucket: entry.bucket,
-            token: apiToken,
-          });
-          await putCors({
-            accountId,
-            bucket: entry.bucket,
-            token: apiToken,
-            origins: corsOrigins,
-          });
-        } catch (err) {
-          console.warn("Failed to refresh bucket configuration:", err);
-        }
-      } else if (
-        accessKeyId &&
-        secretAccessKey &&
-        corsOrigins.length > 0
-      ) {
-        try {
-          const s3 = makeR2Client({
-            accountId,
-            accessKeyId,
-            secretAccessKey,
-          });
-          await ensureBucketCors({
-            s3,
-            bucket: entry.bucket,
-            origins: corsOrigins,
-          });
-        } catch (err) {
-          console.warn(
-            "Failed to refresh bucket CORS via access keys:",
-            err
-          );
-        }
-      }
-      return {
-        entry,
-        usedManagedFallback: entry.domainType !== "custom",
-        customDomainStatus: entry.domainType === "custom" ? "active" : "skipped",
-      };
-    }
-
-    if (!apiToken) {
-      const bucketName = entry?.bucket || sanitizeBucketName(npub);
-      const manualCustomDomain = baseDomain
-        ? `https://${this.deriveSubdomainForNpub(npub)}.${baseDomain}`
-        : "";
-
-      let publicBaseUrl = entry?.publicBaseUrl || manualCustomDomain;
-      if (!publicBaseUrl) {
-        publicBaseUrl = `https://${bucketName}.${accountId}.r2.dev`;
-      }
-
-      if (!publicBaseUrl) {
-        throw new Error(
-          "No public bucket domain configured. Add an API token or configure the domain manually."
-        );
-      }
-
-      const manualEntry = {
-        bucket: bucketName,
-        publicBaseUrl,
-        domainType: publicBaseUrl.includes(".r2.dev") ? "managed" : "custom",
-        lastUpdated: Date.now(),
-      };
-
-      if (accessKeyId && secretAccessKey && corsOrigins.length > 0) {
-        try {
-          const s3 = makeR2Client({
-            accountId,
-            accessKeyId,
-            secretAccessKey,
-          });
-          await ensureBucketCors({
-            s3,
-            bucket: bucketName,
-            origins: corsOrigins,
-          });
-        } catch (corsErr) {
-          console.warn(
-            "Failed to ensure R2 CORS rules via access keys. Configure the bucket's CORS policy manually if uploads continue to fail.",
-            corsErr
-          );
-        }
-      }
-
-      let savedEntry = entry;
-      if (
-        !entry ||
-        entry.bucket !== manualEntry.bucket ||
-        entry.publicBaseUrl !== manualEntry.publicBaseUrl ||
-        entry.domainType !== manualEntry.domainType
-      ) {
-        const updatedSettings = await saveR2Settings(
-          mergeBucketEntry(this.cloudflareSettings, npub, manualEntry)
-        );
-        this.cloudflareSettings = updatedSettings;
-        savedEntry = updatedSettings.buckets?.[npub] || manualEntry;
-      }
-
-      return {
-        entry: savedEntry,
-        usedManagedFallback: manualEntry.domainType !== "custom",
-        customDomainStatus:
-          manualEntry.domainType === "custom" ? "manual" : "managed",
-      };
-    }
-
-    const bucketName = entry?.bucket || sanitizeBucketName(npub);
-
-    await ensureBucket({ accountId, bucket: bucketName, token: apiToken });
-
-    try {
-      await putCors({
-        accountId,
-        bucket: bucketName,
-        token: apiToken,
-        origins: corsOrigins,
-      });
-    } catch (err) {
-      console.warn("Failed to apply R2 CORS rules:", err);
-    }
-
-    let publicBaseUrl = entry?.publicBaseUrl || "";
-    let domainType = entry?.domainType || "managed";
-    let usedManagedFallback = false;
-    let customDomainStatus = "skipped";
-
-    if (baseDomain && zoneId) {
-      const domain = `${this.deriveSubdomainForNpub(npub)}.${baseDomain}`;
+    if (includeSavedProfiles) {
       try {
-        const custom = await attachCustomDomainAndWait({
-          accountId,
-          bucket: bucketName,
-          token: apiToken,
-          zoneId,
-          domain,
-          pollInterval: 2500,
-          timeoutMs: 120000,
-        });
-        customDomainStatus = custom?.status || "unknown";
-        if (custom?.active && custom?.url) {
-          publicBaseUrl = custom.url;
-          domainType = "custom";
-          try {
-            await setManagedDomain({
-              accountId,
-              bucket: bucketName,
-              token: apiToken,
-              enabled: false,
-            });
-          } catch (disableErr) {
-            console.warn("Failed to disable managed domain:", disableErr);
-          }
-        } else {
-          usedManagedFallback = true;
+        if (typeof this.profileController.setSavedProfiles === "function") {
+          const entries = Array.isArray(this.savedProfiles)
+            ? this.savedProfiles.slice()
+            : [];
+          this.profileController.setSavedProfiles(entries, {
+            persist: false,
+            persistActive: false,
+          });
         }
-      } catch (err) {
-        if (/already exists/i.test(err.message || "")) {
-          publicBaseUrl = `https://${domain}`;
-          domainType = "custom";
-          customDomainStatus = "active";
-          try {
-            await setManagedDomain({
-              accountId,
-              bucket: bucketName,
-              token: apiToken,
-              enabled: false,
-            });
-          } catch (disableErr) {
-            console.warn("Failed to disable managed domain:", disableErr);
-          }
-        } else {
-          console.warn("Failed to attach custom domain, falling back:", err);
-          usedManagedFallback = true;
-          customDomainStatus = "error";
-        }
+      } catch (error) {
+        console.warn(
+          "[profileModal] Failed to synchronize saved profiles with controller:",
+          error,
+        );
       }
     }
 
-    if (!publicBaseUrl) {
-      const managed = await setManagedDomain({
-        accountId,
-        bucket: bucketName,
-        token: apiToken,
-        enabled: true,
-      });
-      publicBaseUrl = managed?.url || `https://${bucketName}.${accountId}.r2.dev`;
-      domainType = "managed";
-      usedManagedFallback = true;
-      customDomainStatus = customDomainStatus === "skipped" ? "managed" : customDomainStatus;
-    }
-
-    const mergedEntry = {
-      bucket: bucketName,
-      publicBaseUrl,
-      domainType,
-      lastUpdated: Date.now(),
-    };
-    const updatedSettings = await saveR2Settings(
-      mergeBucketEntry(this.cloudflareSettings, npub, mergedEntry)
-    );
-    this.cloudflareSettings = updatedSettings;
-    return { entry: mergedEntry, usedManagedFallback, customDomainStatus };
-  }
-
-  async updateCloudflareBucketPreview() {
-    if (!this.cloudflareBucketPreview) {
-      return;
-    }
-
-    const el = this.cloudflareBucketPreview;
-    if (!this.cloudflareSettings) {
-      el.textContent = "Save your credentials to configure R2.";
-      return;
-    }
-
-    if (!this.pubkey) {
-      el.textContent = "Login to preview your R2 bucket.";
-      return;
-    }
-
-    const npub = this.safeEncodeNpub(this.pubkey);
-    if (!npub) {
-      el.textContent = "Unable to encode npub.";
-      return;
-    }
-
-    const entry = this.cloudflareSettings.buckets?.[npub];
-    if (!entry || !entry.publicBaseUrl) {
-      el.textContent = "Bucket will be auto-created on your next upload.";
-      return;
-    }
-
-    const sampleKey = buildR2Key(npub, { name: "sample.mp4" });
-    const publicUrl = buildPublicUrl(entry.publicBaseUrl, sampleKey);
-    const fullPreview = `${entry.bucket} • ${publicUrl}`;
-
-    let displayHostAndPath = truncateMiddle(publicUrl, 72);
-    try {
-      const parsed = new URL(publicUrl);
-      const cleanPath = parsed.pathname.replace(/^\//, "");
-      const truncatedPath = truncateMiddle(cleanPath || sampleKey, 32);
-      displayHostAndPath = `${truncateMiddle(parsed.host, 32)}/${truncatedPath}`;
-    } catch (err) {
-      // ignore URL parse issues and fall back to the raw string
-    }
-
-    const truncatedBucket = truncateMiddle(entry.bucket, 28);
-    el.textContent = `${truncatedBucket} • ${displayHostAndPath}`;
-    el.setAttribute("title", fullPreview);
-  }
-
-  async handleCloudflareUploadSubmit() {
-    if (!this.pubkey) {
-      this.showError("Please login to post a video.");
-      return;
-    }
-
-    const saved = await this.handleCloudflareSettingsSubmit({ quiet: true });
-    if (!saved) {
-      this.setCloudflareUploadStatus(
-        "Fix your R2 settings before uploading.",
-        "error"
-      );
-      return;
-    }
-
-    const title = (this.cloudflareTitleInput?.value || "").trim();
-    if (!title) {
-      this.setCloudflareUploadStatus("Title is required.", "error");
-      return;
-    }
-
-    const file = this.cloudflareFileInput?.files?.[0] || null;
-    if (!file) {
-      this.setCloudflareUploadStatus(
-        "Select a video or HLS file to upload.",
-        "error"
-      );
-      return;
-    }
-
-    const description = (this.cloudflareDescriptionInput?.value || "").trim();
-    const thumbnail = (this.cloudflareThumbnailInput?.value || "").trim();
-    const magnet = (this.cloudflareMagnetInput?.value || "").trim();
-    const ws = (this.cloudflareWsInput?.value || "").trim();
-    const xs = (this.cloudflareXsInput?.value || "").trim();
-    const enableComments = this.cloudflareEnableCommentsInput
-      ? this.cloudflareEnableCommentsInput.checked
-      : true;
-
-    const accountId = (this.cloudflareSettings?.accountId || "").trim();
-    const accessKeyId = (this.cloudflareSettings?.accessKeyId || "").trim();
-    const secretAccessKey = (
-      this.cloudflareSettings?.secretAccessKey || ""
-    ).trim();
-
-    if (!accountId || !accessKeyId || !secretAccessKey) {
-      this.setCloudflareUploadStatus(
-        "Missing R2 credentials. Save them before uploading.",
-        "error"
-      );
-      return;
-    }
-
-    const npub = this.safeEncodeNpub(this.pubkey);
-    if (!npub) {
-      this.setCloudflareUploadStatus("Unable to encode npub.", "error");
-      return;
-    }
-
-    this.setCloudflareUploadStatus("Preparing Cloudflare R2…", "info");
-    this.updateCloudflareProgress(0);
-    this.setCloudflareUploading(true);
-
-    let bucketResult = null;
-    try {
-      bucketResult = await this.ensureBucketConfigForNpub(npub);
-    } catch (err) {
-      console.error("Failed to prepare R2 bucket:", err);
-      this.setCloudflareUploadStatus(
-        err?.message ? `Bucket setup failed: ${err.message}` : "Bucket setup failed.",
-        "error"
-      );
-      this.setCloudflareUploading(false);
-      this.updateCloudflareProgress(Number.NaN);
-      return;
-    }
-
-    const bucketEntry =
-      bucketResult?.entry || this.cloudflareSettings?.buckets?.[npub];
-
-    if (!bucketEntry || !bucketEntry.publicBaseUrl) {
-      this.setCloudflareUploadStatus(
-        "Bucket is missing a public domain. Check your Cloudflare settings.",
-        "error"
-      );
-      this.setCloudflareUploading(false);
-      this.updateCloudflareProgress(Number.NaN);
-      return;
-    }
-
-    let statusMessage = `Uploading to ${bucketEntry.bucket}…`;
-    if (bucketResult?.usedManagedFallback) {
-      const baseDomain = this.cloudflareSettings?.baseDomain || "";
-      if (baseDomain) {
-        const customStatus = bucketResult?.customDomainStatus
-          ? ` (custom domain status: ${bucketResult.customDomainStatus})`
-          : "";
-        statusMessage = `Using managed r2.dev domain for ${bucketEntry.bucket}. Verify your Cloudflare zone${customStatus}. Uploading…`;
-      } else {
-        statusMessage = `Using managed r2.dev domain for ${bucketEntry.bucket}. Uploading…`;
-      }
-    }
-
-    this.setCloudflareUploadStatus(
-      statusMessage,
-      bucketResult?.usedManagedFallback ? "warning" : "info"
-    );
-
-    const key = buildR2Key(npub, file);
-    const publicUrl = buildPublicUrl(bucketEntry.publicBaseUrl, key);
-
-    try {
-      const s3 = makeR2Client({ accountId, accessKeyId, secretAccessKey });
-
-      await multipartUpload({
-        s3,
-        bucket: bucketEntry.bucket,
-        key,
-        file,
-        contentType: file.type,
-        onProgress: (fraction) => {
-          this.updateCloudflareProgress(fraction);
-        },
-      });
-
-      const payload = {
-        title,
-        url: publicUrl,
-        magnet,
-        thumbnail,
-        description,
-        ws,
-        xs,
-        enableComments,
-      };
-
-      const published = await this.publishVideoNote(payload, {
-        onSuccess: () => {
-          this.resetCloudflareUploadForm();
-        },
-      });
-
-      if (published) {
-        this.setCloudflareUploadStatus(
-          `Published ${publicUrl}`,
-          "success"
+    if (includeActivePubkey) {
+      try {
+        if (typeof this.profileController.setActivePubkey === "function") {
+          this.profileController.setActivePubkey(
+            this.activeProfilePubkey || null,
+            { persist: false },
+          );
+        }
+      } catch (error) {
+        console.warn(
+          "[profileModal] Failed to synchronize active profile with controller:",
+          error,
         );
       }
-    } catch (err) {
-      console.error("Cloudflare upload failed:", err);
-      this.setCloudflareUploadStatus(
-        err?.message ? `Upload failed: ${err.message}` : "Upload failed.",
-        "error"
-      );
-    } finally {
-      this.setCloudflareUploading(false);
-      this.updateCloudflareProgress(Number.NaN);
-      await this.updateCloudflareBucketPreview();
     }
   }
 
   renderSavedProfiles() {
-    const fallbackAvatar = "assets/svg/default-profile.svg";
-    const normalizedActive = this.normalizeHexPubkey(
-      this.activeProfilePubkey
-    );
-    const entriesNeedingFetch = new Set();
-
-    const resolveMeta = (entry) => {
-      if (!entry || typeof entry !== "object") {
-        return {
-          name: "",
-          picture: fallbackAvatar,
-          npub: null,
-        };
-      }
-
-      const normalizedPubkey = this.normalizeHexPubkey(entry.pubkey);
-      let cacheEntry = null;
-      if (normalizedPubkey) {
-        cacheEntry = this.getProfileCacheEntry(normalizedPubkey);
-      }
-      const cachedProfile = cacheEntry?.profile || {};
-
-      const hasStoredName =
-        typeof entry.name === "string" && entry.name.trim().length > 0;
-      const hasStoredPicture =
-        typeof entry.picture === "string" && entry.picture.trim().length > 0;
-
-      if (
-        !cacheEntry &&
-        normalizedPubkey &&
-        (!hasStoredName || !hasStoredPicture)
-      ) {
-        entriesNeedingFetch.add(normalizedPubkey);
-      }
-
-      let resolvedNpub =
-        typeof entry.npub === "string" && entry.npub.trim()
-          ? entry.npub.trim()
-          : null;
-      if (!resolvedNpub && entry.pubkey) {
-        resolvedNpub = this.safeEncodeNpub(entry.pubkey);
-      }
-
-      return {
-        name: cachedProfile.name || entry.name || "",
-        picture: cachedProfile.picture || entry.picture || fallbackAvatar,
-        npub: resolvedNpub,
-      };
-    };
-
-    const savedEntries = Array.isArray(this.savedProfiles)
-      ? this.savedProfiles.filter((entry) => entry && entry.pubkey)
-      : [];
-
-    let activeEntry = null;
-    if (normalizedActive) {
-      activeEntry = savedEntries.find(
-        (entry) => this.normalizeHexPubkey(entry.pubkey) === normalizedActive
-      );
-    }
-    if (!activeEntry && savedEntries.length) {
-      activeEntry = savedEntries[0];
-    }
-
-    const activeMeta = activeEntry ? resolveMeta(activeEntry) : null;
-    const hasActiveProfile = Boolean(activeEntry && activeMeta);
-    const activeNameFallback = activeMeta?.npub
-      ? truncateMiddle(activeMeta.npub, 32)
-      : "Saved profile";
-    const activeDisplayName = hasActiveProfile
-      ? activeMeta.name?.trim() || activeNameFallback
-      : "No active profile";
-    const activeAvatarSrc = hasActiveProfile
-      ? activeMeta.picture || fallbackAvatar
-      : fallbackAvatar;
-
-    if (this.profileModalName) {
-      this.profileModalName.textContent = activeDisplayName;
-    }
-
-    if (this.profileModalAvatar instanceof HTMLImageElement) {
-      if (this.profileModalAvatar.src !== activeAvatarSrc) {
-        this.profileModalAvatar.src = activeAvatarSrc;
-      }
-      this.profileModalAvatar.alt = hasActiveProfile
-        ? `${activeDisplayName} avatar`
-        : "Default profile avatar";
-    } else if (this.profileModalAvatar) {
-      this.profileModalAvatar.setAttribute("data-avatar-src", activeAvatarSrc);
-    }
-
-    if (this.profileModalNpub) {
-      if (hasActiveProfile && activeMeta?.npub) {
-        this.profileModalNpub.textContent = truncateMiddle(activeMeta.npub, 48);
-      } else if (hasActiveProfile) {
-        this.profileModalNpub.textContent = "npub unavailable";
-      } else {
-        this.profileModalNpub.textContent = "Link a profile to get started";
-      }
-    }
-
-    if (this.profileChannelLink) {
-      if (hasActiveProfile && activeMeta?.npub) {
-        const encodedNpub = activeMeta.npub;
-        this.profileChannelLink.href = `#view=channel-profile&npub=${encodeURIComponent(
-          encodedNpub
-        )}`;
-        this.profileChannelLink.dataset.targetNpub = encodedNpub;
-        this.profileChannelLink.classList.remove("hidden");
-        this.profileChannelLink.setAttribute("aria-hidden", "false");
-      } else {
-        this.profileChannelLink.classList.add("hidden");
-        this.profileChannelLink.removeAttribute("href");
-        delete this.profileChannelLink.dataset.targetNpub;
-        this.profileChannelLink.setAttribute("aria-hidden", "true");
-      }
-    }
-
-    if (this.profileAvatar instanceof HTMLImageElement) {
-      if (this.profileAvatar.src !== activeAvatarSrc) {
-        this.profileAvatar.src = activeAvatarSrc;
-      }
-      this.profileAvatar.alt = hasActiveProfile
-        ? `${activeDisplayName} avatar`
-        : this.profileAvatar.alt || "Profile avatar";
-    }
-
-    const listEl = this.profileSwitcherList;
-    if (listEl instanceof HTMLElement) {
-      listEl.innerHTML = "";
-      let normalizedSelection = this.normalizeHexPubkey(
-        this.profileSwitcherSelectionPubkey
-      );
-      if (normalizedSelection && normalizedSelection === normalizedActive) {
-        normalizedSelection = null;
-        this.profileSwitcherSelectionPubkey = null;
-      }
-      const entriesToRender = savedEntries.filter((entry) => {
-        const normalized = this.normalizeHexPubkey(entry.pubkey);
-        return normalized && normalized !== normalizedActive;
-      });
-
-      if (!entriesToRender.length) {
-        listEl.setAttribute("data-profile-switcher-empty", "true");
-        const helper = document.createElement("p");
-        helper.className = "profile-switcher__empty text-sm text-gray-400";
-        helper.textContent = "No other profiles saved yet.";
-        helper.setAttribute("role", "note");
-        listEl.appendChild(helper);
-      } else {
-        listEl.removeAttribute("data-profile-switcher-empty");
-
-        entriesToRender.forEach((entry) => {
-          const meta = resolveMeta(entry);
-          const button = document.createElement("button");
-          button.type = "button";
-          button.classList.add("profile-card");
-          button.dataset.pubkey = entry.pubkey;
-          if (meta.npub) {
-            button.dataset.npub = meta.npub;
-          }
-          if (entry.authType) {
-            button.dataset.authType = entry.authType;
-          }
-
-          const normalizedPubkey = this.normalizeHexPubkey(entry.pubkey);
-          const isSelected =
-            normalizedSelection && normalizedPubkey === normalizedSelection;
-          if (isSelected) {
-            button.classList.add("profile-card--active");
-            button.setAttribute("aria-pressed", "true");
-          } else {
-            button.setAttribute("aria-pressed", "false");
-          }
-
-          const avatarSpan = document.createElement("span");
-          avatarSpan.className = "profile-card__avatar";
-          const avatarImg = document.createElement("img");
-          avatarImg.src = meta.picture || fallbackAvatar;
-          const cardDisplayName =
-            meta.name?.trim() ||
-            (meta.npub ? truncateMiddle(meta.npub, 32) : "Saved profile");
-          avatarImg.alt = `${cardDisplayName} avatar`;
-          avatarSpan.appendChild(avatarImg);
-
-          const metaSpan = document.createElement("span");
-          metaSpan.className = "profile-card__meta";
-
-          const topLine = document.createElement("span");
-          topLine.className = "profile-card__topline";
-
-          const label = document.createElement("span");
-          label.className = "profile-card__label";
-          label.textContent =
-            entry.authType === "nsec" ? "Direct key" : "Saved profile";
-
-          const action = document.createElement("span");
-          action.className = "profile-card__action";
-          action.setAttribute("aria-hidden", "true");
-          action.textContent = isSelected ? "Selected" : "Switch";
-
-          topLine.append(label, action);
-
-          const nameSpan = document.createElement("span");
-          nameSpan.className = "profile-card__name";
-          nameSpan.textContent = cardDisplayName;
-
-          const npubSpan = document.createElement("span");
-          npubSpan.className = "profile-card__npub";
-          npubSpan.textContent = meta.npub
-            ? truncateMiddle(meta.npub, 48)
-            : "npub unavailable";
-
-          metaSpan.append(topLine, nameSpan, npubSpan);
-          button.append(avatarSpan, metaSpan);
-
-          const ariaLabel = isSelected
-            ? `${cardDisplayName} selected`
-            : `Switch to ${cardDisplayName}`;
-          button.setAttribute("aria-label", ariaLabel);
-
-          const activateProfile = async (event) => {
-            if (event) {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-
-            if (button.dataset.loading === "true") {
-              return;
-            }
-
-            button.dataset.loading = "true";
-            button.setAttribute("aria-busy", "true");
-
-            try {
-              await this.switchProfile(entry.pubkey);
-            } catch (error) {
-              console.error("Failed to switch profile:", error);
-            } finally {
-              button.dataset.loading = "false";
-              button.setAttribute("aria-busy", "false");
-            }
-          };
-
-          button.addEventListener("click", activateProfile);
-          button.addEventListener("keydown", (event) => {
-            const key = event?.key;
-            if (key === "Enter" || key === " " || key === "Spacebar") {
-              activateProfile(event);
-            }
-          });
-
-          listEl.appendChild(button);
-        });
-      }
-
-      this.updateProfileModalFocusables();
-    } else {
-      this.updateProfileModalFocusables();
-    }
-
-    if (entriesNeedingFetch.size) {
-      this.batchFetchProfiles(entriesNeedingFetch);
-    }
-  }
-
-  /**
-   * (Optional) Initialize a separate profile modal (profile-modal.html).
-   */
-  async initProfileModal() {
-    try {
-      console.log("Starting profile modal initialization...");
-      const resp = await fetch("components/profile-modal.html");
-      if (!resp.ok) {
-        // If you don't have a profile modal, comment this entire method out.
-        throw new Error(`HTTP error! status: ${resp.status}`);
-      }
-      const html = await resp.text();
-
-      const modalContainer = document.getElementById("modalContainer");
-      if (!modalContainer) {
-        throw new Error("Modal container element not found!");
-      }
-      const wrapper = document.createElement("div");
-      wrapper.innerHTML = html;
-      removeTrackingScripts(wrapper);
-      modalContainer.appendChild(wrapper);
-
-      // Now references
-      this.profileModal = document.getElementById("profileModal") || null;
-      this.closeProfileModal =
-        document.getElementById("closeProfileModal") || null;
-      this.profileLogoutBtn =
-        document.getElementById("profileLogoutBtn") || null;
-      this.profileModalAvatar =
-        document.getElementById("profileModalAvatar") || null;
-      this.profileModalName =
-        document.getElementById("profileModalName") || null;
-      this.profileModalNpub =
-        document.getElementById("profileModalNpub") || null;
-      this.profileChannelLink =
-        document.getElementById("profileChannelLink") || null;
-      this.profileSwitcherList =
-        document.getElementById("profileSwitcherList") || null;
-      this.profileAddAccountBtn =
-        document.getElementById("profileAddAccountBtn") || null;
-      const topLevelProfileAvatar =
-        document.getElementById("profileAvatar") || null;
-      if (topLevelProfileAvatar) {
-        this.profileAvatar = topLevelProfileAvatar;
-      }
-      this.profileNavButtons.account =
-        document.getElementById("profileNavAccount") || null;
-      this.profileNavButtons.relays =
-        document.getElementById("profileNavRelays") || null;
-      this.profileNavButtons.blocked =
-        document.getElementById("profileNavBlocked") || null;
-      this.profileNavButtons.history =
-        document.getElementById("profileNavHistory") || null;
-      this.profileNavButtons.admin =
-        document.getElementById("profileNavAdmin") || null;
-      this.profilePaneElements.account =
-        document.getElementById("profilePaneAccount") || null;
-      this.profilePaneElements.relays =
-        document.getElementById("profilePaneRelays") || null;
-      this.profilePaneElements.blocked =
-        document.getElementById("profilePaneBlocked") || null;
-      this.profilePaneElements.history =
-        document.getElementById("profilePaneHistory") || null;
-      this.profilePaneElements.admin =
-        document.getElementById("profilePaneAdmin") || null;
-      this.profileRelayList = document.getElementById("relayList") || null;
-      this.profileBlockedList = document.getElementById("blockedList") || null;
-      this.profileBlockedEmpty =
-        document.getElementById("blockedEmpty") || null;
-      this.profileBlockedInput =
-        document.getElementById("blockedInput") || null;
-      this.profileAddBlockedBtn =
-        document.getElementById("addBlockedBtn") || null;
-      this.profileRelayInput = document.getElementById("relayInput") || null;
-      this.profileAddRelayBtn = document.getElementById("addRelayBtn") || null;
-      this.profileRestoreRelaysBtn =
-        document.getElementById("restoreRelaysBtn") || null;
-      if (!this.profileHistoryRenderer) {
-        this.profileHistoryRenderer = createWatchHistoryRenderer({
-          viewSelector: "#profilePaneHistory",
-          gridSelector: "#profileHistoryGrid",
-          loadingSelector: "#profileHistoryLoading",
-          statusSelector: "#profileHistoryStatus",
-          emptySelector: "#profileHistoryEmpty",
-          sentinelSelector: "#profileHistorySentinel",
-          scrollContainerSelector: "#profileHistoryScroll",
-          errorBannerSelector: "#profileHistoryError",
-          clearButtonSelector: "#profileHistoryClear",
-          republishButtonSelector: "#profileHistoryRepublish",
-          featureBannerSelector: "#profileHistoryFeatureBanner",
-          toastRegionSelector: "#profileHistoryToastRegion",
-          sessionWarningSelector: "#profileHistorySessionWarning",
-          metadataToggleSelector: "#profileHistoryMetadataToggle",
-          metadataThumbSelector: "#profileHistoryMetadataThumb",
-          metadataLabelSelector: "#profileHistoryMetadataLabel",
-          metadataDescriptionSelector: "#profileHistoryMetadataDescription",
-          emptyCopy: "You haven’t watched any videos yet.",
-          remove: (payload) => this.handleWatchHistoryRemoval(payload),
-          getActor: async () => {
-            if (this.pubkey) {
-              return this.pubkey;
-            }
-            if (
-              typeof nostrClient?.sessionActor?.pubkey === "string" &&
-              nostrClient.sessionActor.pubkey
-            ) {
-              return nostrClient.sessionActor.pubkey;
-            }
-            return window.app?.pubkey || undefined;
-          },
-        });
-      }
-      this.adminModeratorsSection =
-        document.getElementById("adminModeratorsSection") || null;
-      this.adminModeratorsEmpty =
-        document.getElementById("adminModeratorsEmpty") || null;
-      this.adminModeratorList =
-        document.getElementById("adminModeratorList") || null;
-      this.adminModeratorInput =
-        document.getElementById("adminModeratorInput") || null;
-      this.adminAddModeratorBtn =
-        document.getElementById("adminAddModeratorBtn") || null;
-      this.adminWhitelistSection =
-        document.getElementById("adminWhitelistSection") || null;
-      this.adminWhitelistEmpty =
-        document.getElementById("adminWhitelistEmpty") || null;
-      this.adminWhitelistList =
-        document.getElementById("adminWhitelistList") || null;
-      this.adminWhitelistInput =
-        document.getElementById("adminWhitelistInput") || null;
-      this.adminAddWhitelistBtn =
-        document.getElementById("adminAddWhitelistBtn") || null;
-      this.adminBlacklistSection =
-        document.getElementById("adminBlacklistSection") || null;
-      this.adminBlacklistEmpty =
-        document.getElementById("adminBlacklistEmpty") || null;
-      this.adminBlacklistList =
-        document.getElementById("adminBlacklistList") || null;
-      this.adminBlacklistInput =
-        document.getElementById("adminBlacklistInput") || null;
-      this.adminAddBlacklistBtn =
-        document.getElementById("adminAddBlacklistBtn") || null;
-
-      // Wire up
-      if (this.closeProfileModal && !this.closeProfileModal.dataset.bound) {
-        this.closeProfileModal.dataset.bound = "true";
-        this.closeProfileModal.addEventListener("click", () => {
-          this.hideProfileModal();
-        });
-      }
-      if (this.profileLogoutBtn && !this.profileLogoutBtn.dataset.bound) {
-        this.profileLogoutBtn.dataset.bound = "true";
-        this.profileLogoutBtn.addEventListener("click", () => {
-          this.logout();
-          this.hideProfileModal();
-        });
-      }
-
-      if (this.profileChannelLink && !this.profileChannelLink.dataset.bound) {
-        this.profileChannelLink.dataset.bound = "true";
-        this.profileChannelLink.addEventListener("click", (event) => {
-          event.preventDefault();
-          const targetNpub = this.profileChannelLink?.dataset?.targetNpub;
-          if (!targetNpub) {
-            return;
-          }
-          this.hideProfileModal();
-          window.location.hash = `#view=channel-profile&npub=${targetNpub}`;
-        });
-      }
-
-      if (
-        this.profileAddAccountBtn &&
-        this.profileAddAccountBtn.dataset.bound !== "true"
-      ) {
-        this.profileAddAccountBtn.dataset.bound = "true";
-        this.profileAddAccountBtn.addEventListener("click", () => {
-          this.handleAddProfile();
-        });
-      }
-
-      Object.entries(this.profileNavButtons).forEach(([name, button]) => {
-        if (!button || button.dataset.navBound === "true") {
-          return;
-        }
-        button.dataset.navBound = "true";
-        button.addEventListener("click", () => {
-          this.selectProfilePane(name);
-        });
-      });
-
-      if (this.profileAddRelayBtn && !this.profileAddRelayBtn.dataset.bound) {
-        this.profileAddRelayBtn.dataset.bound = "true";
-        this.profileAddRelayBtn.addEventListener("click", () => {
-          this.handleAddRelay();
-        });
-      }
-      if (
-        this.profileRestoreRelaysBtn &&
-        this.profileRestoreRelaysBtn.dataset.bound !== "true"
-      ) {
-        this.profileRestoreRelaysBtn.dataset.bound = "true";
-        this.profileRestoreRelaysBtn.addEventListener("click", () => {
-          this.handleRestoreRelays();
-        });
-      }
-      if (
-        this.profileRelayInput &&
-        this.profileRelayInput.dataset.bound !== "true"
-      ) {
-        this.profileRelayInput.dataset.bound = "true";
-        this.profileRelayInput.addEventListener("keydown", (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            this.handleAddRelay();
-          }
-        });
-      }
-
-      if (
-        this.profileAddBlockedBtn &&
-        this.profileAddBlockedBtn.dataset.bound !== "true"
-      ) {
-        this.profileAddBlockedBtn.dataset.bound = "true";
-        this.profileAddBlockedBtn.addEventListener("click", () => {
-          this.handleAddBlockedCreator();
-        });
-      }
-      if (
-        this.profileBlockedInput &&
-        this.profileBlockedInput.dataset.bound !== "true"
-      ) {
-        this.profileBlockedInput.dataset.bound = "true";
-        this.profileBlockedInput.addEventListener("keydown", (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            this.handleAddBlockedCreator();
-          }
-        });
-      }
-
-      if (
-        this.adminAddModeratorBtn &&
-        this.adminAddModeratorBtn.dataset.bound !== "true"
-      ) {
-        this.adminAddModeratorBtn.dataset.bound = "true";
-        this.adminAddModeratorBtn.addEventListener("click", () => {
-          this.handleAddModerator();
-        });
-      }
-      if (
-        this.adminModeratorInput &&
-        this.adminModeratorInput.dataset.bound !== "true"
-      ) {
-        this.adminModeratorInput.dataset.bound = "true";
-        this.adminModeratorInput.addEventListener("keydown", (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            this.handleAddModerator();
-          }
-        });
-      }
-
-      if (
-        this.adminAddWhitelistBtn &&
-        this.adminAddWhitelistBtn.dataset.bound !== "true"
-      ) {
-        this.adminAddWhitelistBtn.dataset.bound = "true";
-        this.adminAddWhitelistBtn.addEventListener("click", () => {
-          this.handleAdminListMutation("whitelist", "add");
-        });
-      }
-      if (
-        this.adminWhitelistInput &&
-        this.adminWhitelistInput.dataset.bound !== "true"
-      ) {
-        this.adminWhitelistInput.dataset.bound = "true";
-        this.adminWhitelistInput.addEventListener("keydown", (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            this.handleAdminListMutation("whitelist", "add");
-          }
-        });
-      }
-
-      if (
-        this.adminAddBlacklistBtn &&
-        this.adminAddBlacklistBtn.dataset.bound !== "true"
-      ) {
-        this.adminAddBlacklistBtn.dataset.bound = "true";
-        this.adminAddBlacklistBtn.addEventListener("click", () => {
-          this.handleAdminListMutation("blacklist", "add");
-        });
-      }
-      if (
-        this.adminBlacklistInput &&
-        this.adminBlacklistInput.dataset.bound !== "true"
-      ) {
-        this.adminBlacklistInput.dataset.bound = "true";
-        this.adminBlacklistInput.addEventListener("keydown", (event) => {
-          if (event.key === "Enter") {
-            event.preventDefault();
-            this.handleAdminListMutation("blacklist", "add");
-          }
-        });
-      }
-
-      this.selectProfilePane("account");
-      this.populateProfileRelays();
-      this.populateBlockedList();
-      await this.refreshAdminPaneState();
-
-      this.renderSavedProfiles();
-
-      console.log("Profile modal initialization successful");
-      return true;
-    } catch (error) {
-      console.error("initProfileModal failed:", error);
-      // Not critical if missing
-      return false;
-    }
-  }
-
-  selectProfilePane(name = "account") {
-    const normalized = typeof name === "string" ? name.toLowerCase() : "account";
-    const previous = this.activeProfilePane;
-    const availableKeys = Object.keys(this.profilePaneElements).filter((key) => {
-      const pane = this.profilePaneElements[key];
-      if (!(pane instanceof HTMLElement)) {
-        return false;
-      }
-      const button = this.profileNavButtons[key];
-      if (button instanceof HTMLElement && button.classList.contains("hidden")) {
-        return false;
-      }
-      return true;
-    });
-
-    const fallbackTarget = availableKeys.includes("account")
-      ? "account"
-      : availableKeys[0] || "account";
-    const target = availableKeys.includes(normalized)
-      ? normalized
-      : fallbackTarget;
-
-    if (previous === "history" && target !== "history") {
-      try {
-        this.profileHistoryRenderer?.pause();
-      } catch (error) {
-        console.warn("[profileModal] Failed to pause history renderer:", error);
-      }
-    }
-
-    Object.entries(this.profilePaneElements).forEach(([key, pane]) => {
-      if (!(pane instanceof HTMLElement)) {
-        return;
-      }
-      const isActive = key === target;
-      pane.classList.toggle("hidden", !isActive);
-      pane.setAttribute("aria-hidden", (!isActive).toString());
-    });
-
-    Object.entries(this.profileNavButtons).forEach(([key, button]) => {
-      if (!(button instanceof HTMLElement)) {
-        return;
-      }
-      const isActive = key === target;
-      button.setAttribute("aria-selected", isActive ? "true" : "false");
-      button.classList.toggle("bg-gray-800", isActive);
-      button.classList.toggle("text-white", isActive);
-      button.classList.toggle("text-gray-400", !isActive);
-    });
-
-    this.updateProfileModalFocusables();
-    this.activeProfilePane = target;
-
-    if (target === "history") {
-      void this.populateProfileWatchHistory();
-    }
-  }
-
-  updateProfileModalFocusables() {
-    if (!this.profileModal) {
-      this.profileModalFocusables = [];
+    if (!this.profileController) {
       return;
     }
-
-    const focusableSelectors =
-      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
-    const candidates = Array.from(
-      this.profileModal.querySelectorAll(focusableSelectors)
-    );
-
-    this.profileModalFocusables = candidates.filter((el) => {
-      if (!(el instanceof HTMLElement)) {
-        return false;
-      }
-      if (el.hasAttribute("disabled")) {
-        return false;
-      }
-      if (el.getAttribute("aria-hidden") === "true") {
-        return false;
-      }
-      if (el.offsetParent === null && el !== document.activeElement) {
-        return false;
-      }
-      return true;
-    });
-  }
-
-  async openProfileModal() {
-    if (!this.profileModal) {
-      return;
-    }
-
+    this.syncProfileModalState();
     try {
-      await this.refreshAdminPaneState();
-    } catch (error) {
-      console.error("Failed to refresh admin pane while opening profile modal:", error);
-    }
-
-    this.activeProfilePane = null;
-    this.selectProfilePane("account");
-    this.populateProfileRelays();
-    try {
-      await userBlocks.ensureLoaded(this.pubkey);
-    } catch (error) {
-      console.warn("Failed to refresh user block list while opening profile modal:", error);
-    }
-    this.populateBlockedList();
-
-    this.profileModal.classList.remove("hidden");
-    this.profileModal.setAttribute("aria-hidden", "false");
-
-    this.lastFocusedBeforeProfileModal =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-
-    this.updateProfileModalFocusables();
-
-    const initialTarget =
-      this.profileNavButtons.account instanceof HTMLElement
-        ? this.profileNavButtons.account
-        : this.profileModal;
-
-    window.requestAnimationFrame(() => {
-      if (initialTarget && typeof initialTarget.focus === "function") {
-        initialTarget.focus();
-      }
-    });
-
-    if (!this.boundProfileModalKeydown) {
-      this.boundProfileModalKeydown = (event) => {
-        if (!this.profileModal || this.profileModal.classList.contains("hidden")) {
-          return;
-        }
-
-        if (event.key === "Escape") {
-          event.preventDefault();
-          this.hideProfileModal();
-          return;
-        }
-
-        if (event.key !== "Tab") {
-          return;
-        }
-
-        this.updateProfileModalFocusables();
-        if (!this.profileModalFocusables.length) {
-          event.preventDefault();
-          if (typeof this.profileModal.focus === "function") {
-            this.profileModal.focus();
-          }
-          return;
-        }
-
-        const first = this.profileModalFocusables[0];
-        const last = this.profileModalFocusables[this.profileModalFocusables.length - 1];
-        const active = document.activeElement;
-
-        if (event.shiftKey) {
-          if (active === first || !this.profileModal.contains(active)) {
-            event.preventDefault();
-            if (last && typeof last.focus === "function") {
-              last.focus();
-            }
-          }
-          return;
-        }
-
-        if (active === last) {
-          event.preventDefault();
-          if (first && typeof first.focus === "function") {
-            first.focus();
-          }
-        }
-      };
-    }
-
-    if (!this.boundProfileModalFocusIn) {
-      this.boundProfileModalFocusIn = (event) => {
-        if (
-          !this.profileModal ||
-          this.profileModal.classList.contains("hidden") ||
-          this.profileModal.contains(event.target)
-        ) {
-          return;
-        }
-
-        this.updateProfileModalFocusables();
-        const fallback = this.profileModalFocusables[0] || this.profileModal;
-        if (fallback && typeof fallback.focus === "function") {
-          fallback.focus();
-        }
-      };
-    }
-
-    this.profileModal.addEventListener("keydown", this.boundProfileModalKeydown);
-    document.addEventListener("focusin", this.boundProfileModalFocusIn);
-  }
-
-  hideProfileModal() {
-    if (!this.profileModal) {
-      return;
-    }
-
-    if (!this.profileModal.classList.contains("hidden")) {
-      this.profileModal.classList.add("hidden");
-    }
-    this.profileModal.setAttribute("aria-hidden", "true");
-
-    if (this.boundProfileModalKeydown) {
-      this.profileModal.removeEventListener(
-        "keydown",
-        this.boundProfileModalKeydown
-      );
-    }
-    if (this.boundProfileModalFocusIn) {
-      document.removeEventListener("focusin", this.boundProfileModalFocusIn);
-    }
-    if (this.boundProfileHistoryVisibility) {
-      document.removeEventListener(
-        "visibilitychange",
-        this.boundProfileHistoryVisibility
-      );
-      this.boundProfileHistoryVisibility = null;
-    }
-
-    this.closeAllMoreMenus();
-
-    try {
-      this.profileHistoryRenderer?.destroy();
+      this.profileController.renderSavedProfiles();
     } catch (error) {
       console.warn(
-        "[profileModal] Failed to reset watch history renderer on close:",
-        error
+        "[profileModal] Failed to render saved profiles:",
+        error,
       );
     }
-
-    this.activeProfilePane = null;
-
-    if (
-      this.lastFocusedBeforeProfileModal &&
-      typeof this.lastFocusedBeforeProfileModal.focus === "function"
-    ) {
-      this.lastFocusedBeforeProfileModal.focus();
-    }
-    this.lastFocusedBeforeProfileModal = null;
   }
 
-  populateProfileRelays(relayEntries = null) {
-    if (!this.profileRelayList) {
-      return;
-    }
-
-    const sourceEntries = Array.isArray(relayEntries)
-      ? relayEntries
-      : relayManager.getEntries();
-
-    const relays = sourceEntries
-      .map((entry) => {
-        if (typeof entry === "string") {
-          const trimmed = entry.trim();
-          return trimmed ? { url: trimmed, mode: "both" } : null;
-        }
-        if (entry && typeof entry === "object") {
-          const url =
-            typeof entry.url === "string" ? entry.url.trim() : "";
-          if (!url) {
-            return null;
-          }
-          const mode = typeof entry.mode === "string" ? entry.mode : "both";
-          const normalizedMode =
-            mode === "read" || mode === "write" ? mode : "both";
-          return {
-            url,
-            mode: normalizedMode,
-            read: entry.read !== false,
-            write: entry.write !== false,
-          };
-        }
-        return null;
-      })
-      .filter((entry) => entry && typeof entry.url === "string");
-
-    this.profileRelayList.innerHTML = "";
-
-    if (!relays.length) {
-      const emptyState = document.createElement("li");
-      emptyState.className =
-        "rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400";
-      emptyState.textContent = "No relays configured.";
-      this.profileRelayList.appendChild(emptyState);
-      return;
-    }
-
-    relays.forEach((entry) => {
-      const item = document.createElement("li");
-      item.className =
-        "flex items-start justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
-
-      const info = document.createElement("div");
-      info.className = "flex-1 min-w-0";
-
-      const urlEl = document.createElement("p");
-      urlEl.className = "text-sm font-medium text-gray-100 break-all";
-      urlEl.textContent = entry.url;
-
-      const statusEl = document.createElement("p");
-      statusEl.className = "mt-1 text-xs text-gray-400";
-      let modeLabel = "Read & write";
-      if (entry.mode === "read") {
-        modeLabel = "Read only";
-      } else if (entry.mode === "write") {
-        modeLabel = "Write only";
-      }
-      statusEl.textContent = modeLabel;
-
-      info.appendChild(urlEl);
-      info.appendChild(statusEl);
-
-      const actions = document.createElement("div");
-      actions.className = "flex items-center gap-2";
-
-      const editBtn = document.createElement("button");
-      editBtn.type = "button";
-      editBtn.className =
-        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
-      editBtn.textContent = "Change mode";
-      editBtn.title = "Cycle between read-only, write-only, or read/write modes.";
-      editBtn.addEventListener("click", () => {
-        this.handleRelayModeToggle(entry.url);
-      });
-
-      const removeBtn = document.createElement("button");
-      removeBtn.type = "button";
-      removeBtn.className =
-        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
-      removeBtn.textContent = "Remove";
-      removeBtn.addEventListener("click", () => {
-        this.handleRemoveRelay(entry.url);
-      });
-
-      actions.appendChild(editBtn);
-      actions.appendChild(removeBtn);
-
-      item.appendChild(info);
-      item.appendChild(actions);
-
-      this.profileRelayList.appendChild(item);
-    });
+  handleProfileModalClosed() {
+    this.closeAllMoreMenus();
   }
 
-  async handleRelayOperation(operation, {
-    successMessage = "Relay preferences updated.",
-    skipPublishIfUnchanged = true,
-    unchangedMessage = null,
-  } = {}) {
-    if (!this.pubkey) {
-      this.showError("Please login to manage your relays.");
+  handleProfileChannelLink(element) {
+    if (!(element instanceof HTMLElement)) {
       return;
     }
 
-    if (typeof operation !== "function") {
-      return;
-    }
-
-    const previous = relayManager.snapshot();
-    let result;
-    try {
-      result = operation();
-    } catch (error) {
-      const message =
-        error && typeof error.message === "string" && error.message.trim()
-          ? error.message.trim()
-          : "Failed to update relay preferences.";
-      this.showError(message);
-      return;
-    }
-
-    const changed = !!result?.changed;
-    if (!changed && skipPublishIfUnchanged) {
-      if (result?.reason === "duplicate") {
-        this.showSuccess("Relay is already configured.");
-      } else if (typeof unchangedMessage === "string" && unchangedMessage) {
-        this.showSuccess(unchangedMessage);
-      }
-      this.populateProfileRelays();
-      return;
-    }
-
-    this.populateProfileRelays();
-
-    try {
-      const publishResult = await relayManager.publishRelayList(this.pubkey);
-      if (!publishResult?.ok) {
-        throw new Error("No relays accepted the update.");
-      }
-      if (successMessage) {
-        this.showSuccess(successMessage);
-      }
-    } catch (error) {
-      relayManager.setEntries(previous, { allowEmpty: false });
-      this.populateProfileRelays();
-      const message =
-        error && typeof error.message === "string" && error.message.trim()
-          ? error.message.trim()
-          : "Failed to publish relay configuration. Please try again.";
-      this.showError(message);
-    }
-  }
-
-  async handleAddRelay() {
-    if (!this.pubkey) {
-      this.showError("Please login to manage your relays.");
-      return;
-    }
-
-    const rawValue =
-      typeof this.profileRelayInput?.value === "string"
-        ? this.profileRelayInput.value
+    const targetNpub =
+      typeof element.dataset.targetNpub === "string"
+        ? element.dataset.targetNpub
         : "";
-    const trimmed = rawValue.trim();
-    if (!trimmed) {
-      this.showError("Enter a relay URL to add.");
-      return;
+    if (this.profileController) {
+      this.profileController.hide();
     }
-
-    await this.handleRelayOperation(
-      () => relayManager.addRelay(trimmed),
-      {
-        successMessage: "Relay saved.",
-        unchangedMessage: "Relay is already configured.",
-      }
-    );
-
-    if (this.profileRelayInput) {
-      this.profileRelayInput.value = "";
+    if (targetNpub) {
+      window.location.hash = `#view=channel-profile&npub=${encodeURIComponent(
+        targetNpub,
+      )}`;
     }
   }
 
-  async handleRestoreRelays() {
-    if (!this.pubkey) {
-      this.showError("Please login to manage your relays.");
+  async handleAddProfile(controller) {
+    const button =
+      (controller && controller.addAccountButton) ||
+      this.profileController?.addAccountButton ||
+      null;
+    if (!(button instanceof HTMLElement)) {
       return;
     }
-
-    const confirmed = window.confirm(
-      "Restore the recommended relay defaults?"
-    );
-    if (!confirmed) {
-      return;
-    }
-
-    await this.handleRelayOperation(
-      () => relayManager.restoreDefaults(),
-      {
-        successMessage: "Relay defaults restored.",
-        unchangedMessage: "Relay defaults are already in use.",
-      }
-    );
-  }
-
-  async handleRelayModeToggle(url) {
-    if (!url) {
-      return;
-    }
-    await this.handleRelayOperation(
-      () => relayManager.cycleRelayMode(url),
-      { successMessage: "Relay mode updated." }
-    );
-  }
-
-  async handleRemoveRelay(url) {
-    if (!url) {
-      return;
-    }
-
-    const confirmed = window.confirm(
-      `Remove ${url} from your relay list?`
-    );
-    if (!confirmed) {
-      return;
-    }
-
-    await this.handleRelayOperation(
-      () => relayManager.removeRelay(url),
-      { successMessage: "Relay removed." }
-    );
-  }
-
-  populateBlockedList(blocked = null) {
-    if (!this.profileBlockedList || !this.profileBlockedEmpty) {
-      return;
-    }
-
-    const sourceEntries =
-      Array.isArray(blocked) && blocked.length
-        ? blocked
-        : userBlocks.getBlockedPubkeys();
-
-    const normalizedEntries = [];
-    const pushEntry = (hex, label) => {
-      if (!hex || !label) {
-        return;
-      }
-      normalizedEntries.push({ hex, label });
-    };
-
-    sourceEntries.forEach((entry) => {
-      if (typeof entry === "string") {
-        const trimmed = entry.trim();
-        if (!trimmed) {
-          return;
-        }
-
-        if (trimmed.startsWith("npub1")) {
-          const decoded = this.safeDecodeNpub(trimmed);
-          if (!decoded) {
-            return;
-          }
-          const label = this.safeEncodeNpub(decoded) || trimmed;
-          pushEntry(decoded, label);
-          return;
-        }
-
-        if (/^[0-9a-f]{64}$/i.test(trimmed)) {
-          const hex = trimmed.toLowerCase();
-          const label = this.safeEncodeNpub(hex) || hex;
-          pushEntry(hex, label);
-        }
-        return;
-      }
-
-      if (entry && typeof entry === "object") {
-        const candidateNpub =
-          typeof entry.npub === "string" ? entry.npub.trim() : "";
-        const candidateHex =
-          typeof entry.pubkey === "string" ? entry.pubkey.trim() : "";
-
-        if (candidateHex && /^[0-9a-f]{64}$/i.test(candidateHex)) {
-          const normalizedHex = candidateHex.toLowerCase();
-          const label =
-            candidateNpub && candidateNpub.startsWith("npub1")
-              ? candidateNpub
-              : this.safeEncodeNpub(normalizedHex) || normalizedHex;
-          pushEntry(normalizedHex, label);
-          return;
-        }
-
-        if (candidateNpub && candidateNpub.startsWith("npub1")) {
-          const decoded = this.safeDecodeNpub(candidateNpub);
-          if (!decoded) {
-            return;
-          }
-          const label = this.safeEncodeNpub(decoded) || candidateNpub;
-          pushEntry(decoded, label);
-        }
-      }
-    });
-
-    const deduped = [];
-    const seenHex = new Set();
-    normalizedEntries.forEach((entry) => {
-      if (!seenHex.has(entry.hex)) {
-        seenHex.add(entry.hex);
-        deduped.push(entry);
-      }
-    });
-
-    this.profileBlockedList.innerHTML = "";
-
-    if (!deduped.length) {
-      this.profileBlockedEmpty.classList.remove("hidden");
-      this.profileBlockedList.classList.add("hidden");
-      return;
-    }
-
-    this.profileBlockedEmpty.classList.add("hidden");
-    this.profileBlockedList.classList.remove("hidden");
-
-    deduped.forEach(({ hex, label }) => {
-      const item = document.createElement("li");
-      item.className =
-        "flex items-center justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
-
-      const info = document.createElement("div");
-      info.className = "min-w-0";
-
-      const title = document.createElement("p");
-      title.className = "text-sm font-medium text-gray-100 break-all";
-      title.textContent = label;
-
-      info.appendChild(title);
-
-      const actionBtn = document.createElement("button");
-      actionBtn.type = "button";
-      actionBtn.className =
-        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
-      actionBtn.textContent = "Remove";
-      actionBtn.dataset.blockedHex = hex;
-      actionBtn.addEventListener("click", () => {
-        this.handleRemoveBlockedCreator(hex);
-      });
-
-      item.appendChild(info);
-      item.appendChild(actionBtn);
-
-      this.profileBlockedList.appendChild(item);
-    });
-  }
-
-  async populateProfileWatchHistory() {
-    if (!this.profileHistoryRenderer) {
-      return;
-    }
-
-    let primaryActor =
-      typeof this.pubkey === "string" && this.pubkey ? this.pubkey : undefined;
-    if (
-      !primaryActor &&
-      typeof nostrClient?.sessionActor?.pubkey === "string" &&
-      nostrClient.sessionActor.pubkey
-    ) {
-      primaryActor = nostrClient.sessionActor.pubkey;
-    }
-
-    try {
-      await this.profileHistoryRenderer.ensureInitialLoad({ actor: primaryActor });
-      await this.profileHistoryRenderer.refresh({ actor: primaryActor, force: true });
-      if (!this.boundProfileHistoryVisibility) {
-        this.boundProfileHistoryVisibility = () => {
-          if (!this.profileHistoryRenderer) {
-            return;
-          }
-          if (document.visibilityState === "visible") {
-            this.profileHistoryRenderer.resume();
-          } else {
-            this.profileHistoryRenderer.pause();
-          }
-        };
-        document.addEventListener(
-          "visibilitychange",
-          this.boundProfileHistoryVisibility
-        );
-      }
-      if (document.visibilityState === "hidden") {
-        this.profileHistoryRenderer.pause();
-      } else {
-        this.profileHistoryRenderer.resume();
-      }
-    } catch (error) {
-      console.error(
-        "[profileModal] Failed to populate watch history pane:",
-        error
-      );
-    }
-  }
-
-  async handleAddProfile() {
-    if (!this.profileAddAccountBtn) {
-      return;
-    }
-
-    const button = this.profileAddAccountBtn;
     if (button.dataset.loading === "true") {
       return;
     }
@@ -5147,7 +1639,7 @@ class bitvidApp {
         }
         button.setAttribute(
           "aria-label",
-          "Connecting to your Nostr extension"
+          "Connecting to your Nostr extension",
         );
       } else {
         if (titleEl) {
@@ -5167,20 +1659,21 @@ class bitvidApp {
     setLoadingState(true);
 
     try {
-      const pubkey = await nostrClient.login({
+      const { pubkey } = await this.authService.requestLogin({
         allowAccountSelection: true,
+        autoApply: false,
       });
 
       const normalizedPubkey = this.normalizeHexPubkey(pubkey);
       if (!normalizedPubkey) {
         throw new Error(
-          "Received an invalid public key from the Nostr extension."
+          "Received an invalid public key from the Nostr extension.",
         );
       }
 
       const alreadySaved = this.savedProfiles.some(
         (entry) =>
-          this.normalizeHexPubkey(entry.pubkey) === normalizedPubkey
+          this.normalizeHexPubkey(entry.pubkey) === normalizedPubkey,
       );
       if (alreadySaved) {
         this.showSuccess("That profile is already saved on this device.");
@@ -5191,7 +1684,7 @@ class bitvidApp {
       let profileMeta = this.getProfileCacheEntry(normalizedPubkey)?.profile;
 
       if (!profileMeta) {
-        await this.loadOwnProfile(normalizedPubkey);
+        await this.authService.loadOwnProfile(normalizedPubkey);
         profileMeta = this.getProfileCacheEntry(normalizedPubkey)?.profile;
       }
 
@@ -5207,7 +1700,7 @@ class bitvidApp {
         authType: "nip07",
       });
 
-      this.persistSavedProfiles({ persistActive: false });
+      persistSavedProfiles({ persistActive: false });
       this.renderSavedProfiles();
 
       this.showSuccess("Profile added. Select it when you're ready to switch.");
@@ -5222,369 +1715,6 @@ class bitvidApp {
       setLoadingState(false);
     }
   }
-
-  async handleAddBlockedCreator() {
-    if (!this.profileBlockedInput) {
-      return;
-    }
-
-    const rawValue = this.profileBlockedInput.value;
-    const trimmed = typeof rawValue === "string" ? rawValue.trim() : "";
-
-    if (!trimmed) {
-      this.showError("Enter an npub to block.");
-      return;
-    }
-
-    if (!this.pubkey) {
-      this.showError("Please login to manage your block list.");
-      return;
-    }
-
-    const actorHex = this.pubkey;
-    let targetHex = "";
-
-    if (trimmed.startsWith("npub1")) {
-      targetHex = this.safeDecodeNpub(trimmed) || "";
-      if (!targetHex) {
-        this.showError("Invalid npub. Please double-check and try again.");
-        return;
-      }
-    } else if (/^[0-9a-f]{64}$/i.test(trimmed)) {
-      targetHex = trimmed.toLowerCase();
-    } else {
-      this.showError("Enter a valid npub or hex pubkey.");
-      return;
-    }
-
-    if (targetHex === actorHex) {
-      this.showError("You cannot block yourself.");
-      return;
-    }
-
-    try {
-      await userBlocks.ensureLoaded(actorHex);
-
-      if (userBlocks.isBlocked(targetHex)) {
-        this.showSuccess("You already blocked this creator.");
-      } else {
-        await userBlocks.addBlock(targetHex, actorHex);
-        this.showSuccess(
-          "Creator blocked. You won't see their videos anymore."
-        );
-      }
-
-      this.profileBlockedInput.value = "";
-      this.populateBlockedList();
-      await this.loadVideos();
-    } catch (error) {
-      console.error("Failed to add creator to personal block list:", error);
-      const message =
-        error?.code === "nip04-missing"
-          ? "Your Nostr extension must support NIP-04 to manage private lists."
-          : "Failed to update your block list. Please try again.";
-      this.showError(message);
-    }
-  }
-
-  async handleRemoveBlockedCreator(candidate) {
-    if (!this.pubkey) {
-      this.showError("Please login to manage your block list.");
-      return;
-    }
-
-    let targetHex = "";
-    if (typeof candidate === "string") {
-      const trimmed = candidate.trim();
-      if (!trimmed) {
-        return;
-      }
-
-      if (trimmed.startsWith("npub1")) {
-        targetHex = this.safeDecodeNpub(trimmed) || "";
-      } else if (/^[0-9a-f]{64}$/i.test(trimmed)) {
-        targetHex = trimmed.toLowerCase();
-      }
-    }
-
-    if (!targetHex) {
-      console.warn("No valid pubkey to remove from block list:", candidate);
-      return;
-    }
-
-    try {
-      await userBlocks.ensureLoaded(this.pubkey);
-
-      if (!userBlocks.isBlocked(targetHex)) {
-        this.showSuccess("Creator already removed from your block list.");
-      } else {
-        await userBlocks.removeBlock(targetHex, this.pubkey);
-        this.showSuccess("Creator removed from your block list.");
-      }
-
-      this.populateBlockedList();
-      await this.loadVideos();
-    } catch (error) {
-      console.error(
-        "Failed to remove creator from personal block list:",
-        error
-      );
-      const message =
-        error?.code === "nip04-missing"
-          ? "Your Nostr extension must support NIP-04 to manage private lists."
-          : "Failed to update your block list. Please try again.";
-      this.showError(message);
-    }
-  }
-
-  isAuthorBlocked(pubkey) {
-    return userBlocks.isBlocked(pubkey);
-  }
-
-  async refreshAdminPaneState() {
-    const adminNav = this.profileNavButtons.admin;
-    const adminPane = this.profilePaneElements.admin;
-
-    let loadError = null;
-    this.setAdminLoading(true);
-    this.showStatus("Fetching moderation filters…");
-    try {
-      await accessControl.ensureReady();
-    } catch (error) {
-      loadError = error;
-    }
-
-    const actorNpub = this.getCurrentUserNpub();
-    const canEdit = !!actorNpub && accessControl.canEditAdminLists(actorNpub);
-    const isSuperAdmin = !!actorNpub && accessControl.isSuperAdmin(actorNpub);
-
-    if (adminNav instanceof HTMLElement) {
-      adminNav.classList.toggle("hidden", !canEdit);
-      if (!canEdit) {
-        adminNav.setAttribute("aria-selected", "false");
-      }
-    }
-
-    if (adminPane instanceof HTMLElement) {
-      adminPane.classList.toggle("hidden", !canEdit);
-      adminPane.setAttribute("aria-hidden", (!canEdit).toString());
-    }
-
-    if (loadError) {
-      if (loadError?.code === "nostr-unavailable") {
-        console.info("Moderation lists are still syncing with relays.");
-        return;
-      }
-
-      console.error("Failed to load admin lists:", loadError);
-      this.showStatus(null);
-      this.showError("Unable to load moderation lists. Please try again.");
-      this.clearAdminLists();
-      this.setAdminLoading(false);
-      return;
-    }
-
-    if (!canEdit) {
-      this.clearAdminLists();
-      if (typeof actorNpub !== "string" || !actorNpub) {
-        this.currentUserNpub = null;
-      }
-      if (adminNav instanceof HTMLElement && adminNav.classList.contains("bg-gray-800")) {
-        this.selectProfilePane("account");
-      }
-      this.showStatus(null);
-      this.setAdminLoading(false);
-      return;
-    }
-
-    if (this.adminModeratorsSection instanceof HTMLElement) {
-      this.adminModeratorsSection.classList.toggle("hidden", !isSuperAdmin);
-      this.adminModeratorsSection.setAttribute("aria-hidden", (!isSuperAdmin).toString());
-    }
-    this.populateAdminLists();
-    this.showStatus(null);
-    this.setAdminLoading(false);
-  }
-
-  storeAdminEmptyMessages() {
-    const capture = (element) => {
-      if (element instanceof HTMLElement && !element.dataset.defaultMessage) {
-        element.dataset.defaultMessage = element.textContent || "";
-      }
-    };
-
-    capture(this.adminModeratorsEmpty);
-    capture(this.adminWhitelistEmpty);
-    capture(this.adminBlacklistEmpty);
-  }
-
-  setAdminLoading(isLoading) {
-    this.storeAdminEmptyMessages();
-    if (this.profilePaneElements.admin instanceof HTMLElement) {
-      this.profilePaneElements.admin.setAttribute(
-        "aria-busy",
-        isLoading ? "true" : "false"
-      );
-    }
-
-    const toggleMessage = (element, message) => {
-      if (!(element instanceof HTMLElement)) {
-        return;
-      }
-      if (isLoading) {
-        element.textContent = message;
-        element.classList.remove("hidden");
-      } else {
-        element.textContent = element.dataset.defaultMessage || element.textContent;
-      }
-    };
-
-    toggleMessage(this.adminModeratorsEmpty, "Loading moderators…");
-    toggleMessage(this.adminWhitelistEmpty, "Loading whitelist…");
-    toggleMessage(this.adminBlacklistEmpty, "Loading blacklist…");
-  }
-
-  clearAdminLists() {
-    this.storeAdminEmptyMessages();
-    if (this.adminModeratorList) {
-      this.adminModeratorList.innerHTML = "";
-    }
-    if (this.adminWhitelistList) {
-      this.adminWhitelistList.innerHTML = "";
-    }
-    if (this.adminBlacklistList) {
-      this.adminBlacklistList.innerHTML = "";
-    }
-    if (this.adminModeratorsEmpty instanceof HTMLElement) {
-      this.adminModeratorsEmpty.textContent =
-        this.adminModeratorsEmpty.dataset.defaultMessage ||
-        this.adminModeratorsEmpty.textContent;
-      this.adminModeratorsEmpty.classList.remove("hidden");
-    }
-    if (this.adminWhitelistEmpty instanceof HTMLElement) {
-      this.adminWhitelistEmpty.textContent =
-        this.adminWhitelistEmpty.dataset.defaultMessage ||
-        this.adminWhitelistEmpty.textContent;
-      this.adminWhitelistEmpty.classList.remove("hidden");
-    }
-    if (this.adminBlacklistEmpty instanceof HTMLElement) {
-      this.adminBlacklistEmpty.textContent =
-        this.adminBlacklistEmpty.dataset.defaultMessage ||
-        this.adminBlacklistEmpty.textContent;
-      this.adminBlacklistEmpty.classList.remove("hidden");
-    }
-  }
-
-  renderAdminList(listEl, emptyEl, entries, options = {}) {
-    if (!(listEl instanceof HTMLElement) || !(emptyEl instanceof HTMLElement)) {
-      return;
-    }
-
-    const { onRemove, removeLabel = "Remove", confirmMessage, removable = true } =
-      options;
-
-    listEl.innerHTML = "";
-    const values = Array.isArray(entries) ? [...entries] : [];
-    values.sort((a, b) => a.localeCompare(b));
-
-    if (!values.length) {
-      emptyEl.classList.remove("hidden");
-      listEl.classList.add("hidden");
-      return;
-    }
-
-    emptyEl.classList.add("hidden");
-    listEl.classList.remove("hidden");
-
-    values.forEach((npub) => {
-      const item = document.createElement("li");
-      item.className =
-        "flex flex-col gap-2 rounded-lg bg-gray-800 px-4 py-3 sm:flex-row sm:items-center sm:justify-between";
-
-      const label = document.createElement("p");
-      label.className = "text-sm font-medium text-gray-100 break-all";
-      label.textContent = npub;
-      item.appendChild(label);
-
-      if (removable && typeof onRemove === "function") {
-        const removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className =
-          "self-start rounded-md bg-gray-700 px-3 py-1 text-xs font-medium text-gray-100 transition hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
-        removeBtn.textContent = removeLabel;
-        removeBtn.addEventListener("click", () => {
-          if (confirmMessage) {
-            const message = confirmMessage.replace("{npub}", npub);
-            if (!window.confirm(message)) {
-              return;
-            }
-          }
-          removeBtn.disabled = true;
-          removeBtn.setAttribute("aria-busy", "true");
-          onRemove(npub, removeBtn);
-        });
-        item.appendChild(removeBtn);
-      }
-
-      listEl.appendChild(item);
-    });
-  }
-
-  populateAdminLists() {
-    const actorNpub = this.getCurrentUserNpub();
-    if (!actorNpub || !accessControl.canEditAdminLists(actorNpub)) {
-      this.clearAdminLists();
-      return;
-    }
-
-    const isSuperAdmin = accessControl.isSuperAdmin(actorNpub);
-    const editors = accessControl
-      .getEditors()
-      .filter((npub) => npub && npub !== ADMIN_SUPER_NPUB);
-    const whitelist = accessControl.getWhitelist();
-    const blacklist = accessControl.getBlacklist();
-
-    this.renderAdminList(this.adminModeratorList, this.adminModeratorsEmpty, editors, {
-      onRemove: (npub, button) => this.handleRemoveModerator(npub, button),
-      removeLabel: "Remove",
-      confirmMessage:
-        "Remove moderator {npub}? They will immediately lose access to the admin panel.",
-      removable: isSuperAdmin,
-    });
-
-    this.renderAdminList(this.adminWhitelistList, this.adminWhitelistEmpty, whitelist, {
-      onRemove: (npub, button) =>
-        this.handleAdminListMutation("whitelist", "remove", npub, button),
-      removeLabel: "Remove",
-      confirmMessage: "Remove {npub} from the whitelist?",
-      removable: true,
-    });
-
-    this.renderAdminList(this.adminBlacklistList, this.adminBlacklistEmpty, blacklist, {
-      onRemove: (npub, button) =>
-        this.handleAdminListMutation("blacklist", "remove", npub, button),
-      removeLabel: "Unblock",
-      confirmMessage: "Remove {npub} from the blacklist?",
-      removable: true,
-    });
-  }
-
-  getCurrentUserNpub() {
-    if (typeof this.currentUserNpub === "string" && this.currentUserNpub) {
-      return this.currentUserNpub;
-    }
-
-    if (!this.pubkey) {
-      return null;
-    }
-
-    const encoded = this.safeEncodeNpub(this.pubkey);
-    if (encoded) {
-      this.currentUserNpub = encoded;
-    }
-    return this.currentUserNpub;
-  }
-
   canCurrentUserManageBlacklist() {
     const actorNpub = this.getCurrentUserNpub();
     if (!actorNpub) {
@@ -5599,236 +1729,6 @@ class bitvidApp {
     }
   }
 
-  ensureAdminActor(requireSuperAdmin = false) {
-    const actorNpub = this.getCurrentUserNpub();
-    if (!actorNpub) {
-      this.showError("Please login with a Nostr account to manage admin settings.");
-      return null;
-    }
-    if (!accessControl.canEditAdminLists(actorNpub)) {
-      this.showError("You do not have permission to manage BitVid moderation lists.");
-      return null;
-    }
-    if (requireSuperAdmin && !accessControl.isSuperAdmin(actorNpub)) {
-      this.showError("Only the Super Admin can manage moderators or whitelist mode.");
-      return null;
-    }
-    return actorNpub;
-  }
-
-  async handleAddModerator() {
-    let preloadError = null;
-    try {
-      await accessControl.ensureReady();
-    } catch (error) {
-      preloadError = error;
-      console.error("Failed to load admin lists before adding moderator:", error);
-    }
-
-    if (preloadError) {
-      this.showError(this.describeAdminError(preloadError.code || "storage-error"));
-      return;
-    }
-
-    const actorNpub = this.ensureAdminActor(true);
-    if (!actorNpub || !this.adminModeratorInput) {
-      return;
-    }
-
-    const value = this.adminModeratorInput.value.trim();
-    if (!value) {
-      this.showError("Enter an npub to add as a moderator.");
-      return;
-    }
-
-    if (this.adminAddModeratorBtn) {
-      this.adminAddModeratorBtn.disabled = true;
-      this.adminAddModeratorBtn.setAttribute("aria-busy", "true");
-    }
-
-    try {
-      const result = await accessControl.addModerator(actorNpub, value);
-      if (!result.ok) {
-        this.showError(this.describeAdminError(result.error));
-        return;
-      }
-
-      this.adminModeratorInput.value = "";
-      this.showSuccess("Moderator added successfully.");
-      await this.onAccessControlUpdated();
-    } finally {
-      if (this.adminAddModeratorBtn) {
-        this.adminAddModeratorBtn.disabled = false;
-        this.adminAddModeratorBtn.removeAttribute("aria-busy");
-      }
-    }
-  }
-
-  async handleRemoveModerator(npub, button) {
-    let preloadError = null;
-    try {
-      await accessControl.ensureReady();
-    } catch (error) {
-      preloadError = error;
-      console.error("Failed to load admin lists before removing moderator:", error);
-    }
-
-    if (preloadError) {
-      this.showError(this.describeAdminError(preloadError.code || "storage-error"));
-      if (button instanceof HTMLElement) {
-        button.disabled = false;
-        button.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    const actorNpub = this.ensureAdminActor(true);
-    if (!actorNpub) {
-      if (button instanceof HTMLElement) {
-        button.disabled = false;
-        button.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    const result = await accessControl.removeModerator(actorNpub, npub);
-    if (!result.ok) {
-      this.showError(this.describeAdminError(result.error));
-      if (button instanceof HTMLElement) {
-        button.disabled = false;
-        button.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    this.showSuccess("Moderator removed.");
-    await this.onAccessControlUpdated();
-  }
-
-  async handleAdminListMutation(listType, action, explicitNpub = null, sourceButton = null) {
-    let preloadError = null;
-    try {
-      await accessControl.ensureReady();
-    } catch (error) {
-      preloadError = error;
-      console.error("Failed to load admin lists before updating entries:", error);
-    }
-
-    if (preloadError) {
-      this.showError(this.describeAdminError(preloadError.code || "storage-error"));
-      if (sourceButton instanceof HTMLElement) {
-        sourceButton.disabled = false;
-        sourceButton.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    const actorNpub = this.ensureAdminActor(false);
-    if (!actorNpub) {
-      if (sourceButton instanceof HTMLElement) {
-        sourceButton.disabled = false;
-        sourceButton.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    const isWhitelist = listType === "whitelist";
-    const input = isWhitelist ? this.adminWhitelistInput : this.adminBlacklistInput;
-    const addButton = isWhitelist ? this.adminAddWhitelistBtn : this.adminAddBlacklistBtn;
-    const isAdd = action === "add";
-
-    let target = typeof explicitNpub === "string" ? explicitNpub.trim() : "";
-    if (!target && input instanceof HTMLInputElement) {
-      target = input.value.trim();
-    }
-
-    if (isAdd && !target) {
-      this.showError("Enter an npub before adding it to the list.");
-      if (sourceButton instanceof HTMLElement) {
-        sourceButton.disabled = false;
-        sourceButton.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    const buttonToToggle = sourceButton || (isAdd ? addButton : null);
-    if (buttonToToggle instanceof HTMLElement) {
-      buttonToToggle.disabled = true;
-      buttonToToggle.setAttribute("aria-busy", "true");
-    }
-
-    let result;
-    if (isWhitelist) {
-      result = isAdd
-        ? await accessControl.addToWhitelist(actorNpub, target)
-        : await accessControl.removeFromWhitelist(actorNpub, target);
-    } else {
-      result = isAdd
-        ? await accessControl.addToBlacklist(actorNpub, target)
-        : await accessControl.removeFromBlacklist(actorNpub, target);
-    }
-
-    if (!result.ok) {
-      this.showError(this.describeAdminError(result.error));
-      if (buttonToToggle instanceof HTMLElement) {
-        buttonToToggle.disabled = false;
-        buttonToToggle.removeAttribute("aria-busy");
-      }
-      return;
-    }
-
-    if (isAdd && input instanceof HTMLInputElement) {
-      input.value = "";
-    }
-
-    const successMessage = isWhitelist
-      ? isAdd
-        ? "Added to the whitelist."
-        : "Removed from the whitelist."
-      : isAdd
-      ? "Added to the blacklist."
-      : "Removed from the blacklist.";
-    this.showSuccess(successMessage);
-    await this.onAccessControlUpdated();
-
-    if (buttonToToggle instanceof HTMLElement) {
-      buttonToToggle.disabled = false;
-      buttonToToggle.removeAttribute("aria-busy");
-    }
-
-    if (isAdd) {
-      try {
-        const notifyResult = await this.sendAdminListNotification({
-          listType,
-          actorNpub,
-          targetNpub: target,
-        });
-        if (!notifyResult?.ok) {
-          const errorMessage = this.describeNotificationError(
-            notifyResult?.error
-          );
-          if (errorMessage) {
-            this.showError(errorMessage);
-          }
-          if (isDevMode && notifyResult?.error) {
-            console.warn(
-              "[admin] Failed to send list notification DM:",
-              notifyResult
-            );
-          }
-        }
-      } catch (error) {
-        console.error("Failed to send list notification DM:", error);
-        if (isDevMode) {
-          console.warn(
-            "List update succeeded, but DM notification threw an unexpected error.",
-            error
-          );
-        }
-      }
-    }
-  }
-
   describeAdminError(code) {
     switch (code) {
       case "invalid npub":
@@ -5879,59 +1779,13 @@ class bitvidApp {
     }
   }
 
-  async sendAdminListNotification({ listType, actorNpub, targetNpub }) {
-    const normalizedTarget = normalizeNpub(targetNpub);
-    if (!normalizedTarget) {
-      return { ok: false, error: "invalid-target" };
-    }
-
-    if (!this.pubkey) {
-      return { ok: false, error: "missing-actor-pubkey" };
-    }
-
-    const actorHex = this.pubkey;
-    const fallbackActor = this.safeEncodeNpub(actorHex) || "a BitVid moderator";
-    const actorDisplay = normalizeNpub(actorNpub) || fallbackActor;
-    const isWhitelist = listType === "whitelist";
-
-    const introLine = isWhitelist
-      ? `Great news—your npub ${normalizedTarget} has been added to the BitVid whitelist by ${actorDisplay}.`
-      : `We wanted to let you know that your npub ${normalizedTarget} has been placed on the BitVid blacklist by ${actorDisplay}.`;
-
-    const statusLine = isWhitelist
-      ? `You now have full creator access across BitVid (${BITVID_WEBSITE_URL}).`
-      : `This hides your channel and prevents uploads across BitVid (${BITVID_WEBSITE_URL}) for now.`;
-
-    const followUpLine = isWhitelist
-      ? "Please take a moment to review our community guidelines (https://bitvid.network/#view=community-guidelines), and reply to this DM if you have any questions."
-      : "Please review our community guidelines (https://bitvid.network/#view=community-guidelines). If you believe this was a mistake, you can submit an appeal at https://bitvid.network/?modal=appeals to request reinstatement, or reply to this DM with any questions.";
-
-    const messageBody = [
-      "Hi there,",
-      "",
-      introLine,
-      "",
-      statusLine,
-      "",
-      followUpLine,
-      "",
-      "— The BitVid Team",
-    ].join("\n");
-
-    const message = `![BitVid status update](${ADMIN_DM_IMAGE_URL})\n\n${messageBody}`;
-
-    return nostrClient.sendDirectMessage(
-      normalizedTarget,
-      message,
-      actorHex
-    );
-  }
-
   async onAccessControlUpdated() {
-    try {
-      await this.refreshAdminPaneState();
-    } catch (error) {
-      console.error("Failed to refresh admin pane after update:", error);
+    if (this.profileController) {
+      try {
+        await this.profileController.refreshAdminPaneState();
+      } catch (error) {
+        console.error("Failed to refresh admin pane after update:", error);
+      }
     }
 
     this.loadVideos(true).catch((error) => {
@@ -5940,23 +1794,43 @@ class bitvidApp {
     window.dispatchEvent(new CustomEvent("bitvid:access-control-updated"));
   }
 
+  async onVideosShouldRefresh({ reason } = {}) {
+    try {
+      await this.loadVideos(true);
+    } catch (error) {
+      const context = reason ? ` after ${reason}` : "";
+      console.error(`Failed to refresh videos${context}:`, error);
+    }
+  }
+
   /**
    * Setup general event listeners for logout, modals, etc.
    */
   setupEventListeners() {
     // 1) Logout button
     if (this.logoutButton) {
-      this.logoutButton.addEventListener("click", () => {
-        this.logout();
+      this.logoutButton.addEventListener("click", async () => {
+        try {
+          await this.authService.logout();
+        } catch (error) {
+          console.error("Logout failed:", error);
+          this.showError("Failed to logout. Please try again.");
+        }
       });
     }
 
     // 2) Profile button
     if (this.profileButton) {
       this.profileButton.addEventListener("click", () => {
-        this.openProfileModal().catch((error) => {
-          console.error("Failed to open profile modal:", error);
-        });
+        if (!this.profileController) {
+          return;
+        }
+
+        this.profileController
+          .show()
+          .catch((error) => {
+            console.error("Failed to open profile modal:", error);
+          });
       });
     }
 
@@ -5964,7 +1838,7 @@ class bitvidApp {
     if (this.uploadButton) {
       this.uploadButton.addEventListener("click", () => {
         if (this.uploadModal) {
-          this.uploadModal.classList.remove("hidden");
+          this.uploadModal.open();
         }
       });
     }
@@ -5976,6 +1850,7 @@ class bitvidApp {
         const loginModal = document.getElementById("loginModal");
         if (loginModal) {
           loginModal.classList.remove("hidden");
+          setGlobalModalState("login", true);
         }
       });
     }
@@ -5987,6 +1862,7 @@ class bitvidApp {
         const loginModal = document.getElementById("loginModal");
         if (loginModal) {
           loginModal.classList.add("hidden");
+          setGlobalModalState("login", false);
         }
       });
     }
@@ -5995,13 +1871,36 @@ class bitvidApp {
     const nip07Button = document.getElementById("loginNIP07");
     if (nip07Button) {
       const originalLabel = nip07Button.textContent;
+      let slowExtensionTimer = null;
+      const slowExtensionDelayMs = 8_000;
+
+      const clearSlowExtensionTimer = () => {
+        if (slowExtensionTimer) {
+          clearTimeout(slowExtensionTimer);
+          slowExtensionTimer = null;
+        }
+      };
+
       const setLoadingState = (isLoading) => {
-        nip07Button.disabled = isLoading;
-        nip07Button.dataset.loading = isLoading ? "true" : "false";
-        nip07Button.setAttribute("aria-busy", isLoading ? "true" : "false");
-        nip07Button.textContent = isLoading
-          ? "Connecting to NIP-07 extension..."
-          : originalLabel;
+        if (isLoading) {
+          nip07Button.disabled = true;
+          nip07Button.dataset.loading = "true";
+          nip07Button.setAttribute("aria-busy", "true");
+          nip07Button.textContent = "Connecting to NIP-07 extension...";
+
+          clearSlowExtensionTimer();
+          slowExtensionTimer = window.setTimeout(() => {
+            if (nip07Button.dataset.loading === "true") {
+              nip07Button.textContent = "Waiting for the extension prompt…";
+            }
+          }, slowExtensionDelayMs);
+        } else {
+          nip07Button.disabled = false;
+          nip07Button.dataset.loading = "false";
+          nip07Button.setAttribute("aria-busy", "false");
+          clearSlowExtensionTimer();
+          nip07Button.textContent = originalLabel;
+        }
       };
 
       nip07Button.addEventListener("click", async () => {
@@ -6014,14 +1913,30 @@ class bitvidApp {
           "[app.js] loginNIP07 clicked! Attempting extension login..."
         );
         try {
-          const pubkey = await nostrClient.login(); // call the extension
+          const { pubkey, detail } = await this.authService.requestLogin();
           console.log("[NIP-07] login returned pubkey:", pubkey);
-          await this.login(pubkey, { persistActive: true });
 
-          // Hide the login modal
-          const loginModal = document.getElementById("loginModal");
-          if (loginModal) {
-            loginModal.classList.add("hidden");
+          if (pubkey) {
+            if (
+              detail &&
+              typeof detail === "object" &&
+              detail.__handled !== true
+            ) {
+              try {
+                await this.handleAuthLogin(detail);
+              } catch (error) {
+                console.error(
+                  "[NIP-07] handleAuthLogin fallback failed:",
+                  error,
+                );
+              }
+            }
+
+            const loginModal = document.getElementById("loginModal");
+            if (loginModal) {
+              loginModal.classList.add("hidden");
+              setGlobalModalState("login", false);
+            }
           }
         } catch (err) {
           console.error("[NIP-07 login error]", err);
@@ -6076,6 +1991,7 @@ class bitvidApp {
         const loginModal = document.getElementById("loginModal");
         if (loginModal) {
           loginModal.classList.add("hidden");
+          setGlobalModalState("login", false);
         }
         // Show the application modal
         const appModal = document.getElementById("nostrFormModal");
@@ -6087,155 +2003,26 @@ class bitvidApp {
 
   }
 
-  attachVideoListHandler() {
-    const nextTarget = document;
-
-    if (this._videoListElement === nextTarget && this._videoListClickHandler) {
-      return;
+  mountVideoListView(container = null) {
+    if (!this.videoListView) {
+      return null;
     }
 
-    if (this._videoListElement && this._videoListClickHandler) {
-      this._videoListElement.removeEventListener(
-        "click",
-        this._videoListClickHandler
-      );
-      this._videoListElement = null;
-      this._videoListClickHandler = null;
-    }
-
-    const handler = async (event) => {
-      const trigger = event.target.closest(
-        "[data-play-magnet],[data-play-url]"
-      );
-      if (!trigger) {
-        return;
-      }
-
-      const isPrimaryClick =
-        typeof event.button !== "number" || event.button === 0;
-      if (isPrimaryClick && !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 });
-        }
-      }
-    };
-
-    nextTarget.addEventListener("click", handler);
-    this._videoListElement = nextTarget;
-    this._videoListClickHandler = handler;
+    const target = container || document.getElementById("videoList");
+    this.videoList = target || null;
+    this.videoListView.mount(this.videoList || null);
+    return this.videoList;
   }
 
   /**
    * Attempt to load the user's own profile from Nostr (kind:0).
    */
   async loadOwnProfile(pubkey) {
-    try {
-      const events = await nostrClient.pool.list(nostrClient.relays, [
-        { kinds: [0], authors: [pubkey], limit: 1 },
-      ]);
-      let displayName = "User";
-      let picture = "assets/svg/default-profile.svg";
-
-      if (events.length && events[0].content) {
-        const data = JSON.parse(events[0].content);
-        displayName = data.name || data.display_name || "User";
-        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;
-      }
-      // If you want to show name somewhere
-      if (this.profileModalName) {
-        this.profileModalName.textContent = displayName;
-      }
-      if (this.profileModalAvatar) {
-        this.profileModalAvatar.src = picture;
-      }
-      if (this.profileModalNpub) {
-        const encoded = this.safeEncodeNpub(pubkey);
-        this.profileModalNpub.textContent = encoded
-          ? truncateMiddle(encoded, 48)
-          : "Not signed in";
-      }
-      if (this.profileChannelLink) {
-        const targetNpub = this.safeEncodeNpub(pubkey);
-        if (targetNpub) {
-          this.profileChannelLink.href = `#view=channel-profile&npub=${targetNpub}`;
-          this.profileChannelLink.dataset.targetNpub = targetNpub;
-          this.profileChannelLink.classList.remove("hidden");
-        } else {
-          this.profileChannelLink.removeAttribute("href");
-          delete this.profileChannelLink.dataset.targetNpub;
-          this.profileChannelLink.classList.add("hidden");
-        }
-      }
-    } catch (error) {
-      console.error("loadOwnProfile error:", error);
-    }
+    return this.authService.loadOwnProfile(pubkey);
   }
 
   async fetchAndRenderProfile(pubkey, forceRefresh = false) {
-    const cacheEntry = this.getProfileCacheEntry(pubkey);
-    if (cacheEntry) {
-      this.updateProfileInDOM(pubkey, cacheEntry.profile);
-      if (!forceRefresh) {
-        return;
-      }
-    }
-
-    // 2) Otherwise, fetch from Nostr
-    try {
-      const userEvents = await nostrClient.pool.list(nostrClient.relays, [
-        { kinds: [0], authors: [pubkey], limit: 1 },
-      ]);
-      if (userEvents.length > 0 && userEvents[0].content) {
-        const data = JSON.parse(userEvents[0].content);
-        const profile = {
-          name: data.name || data.display_name || "Unknown",
-          picture: data.picture || "assets/svg/default-profile.svg",
-        };
-
-        // Cache it
-        this.setProfileCacheEntry(pubkey, profile);
-        // Update DOM
-        this.updateProfileInDOM(pubkey, profile);
-      }
-    } catch (err) {
-      console.error("Profile fetch error:", err);
-    }
+    return this.authService.fetchAndRenderProfile(pubkey, forceRefresh);
   }
 
   async batchFetchProfiles(authorSet) {
@@ -6325,21 +2112,279 @@ class bitvidApp {
       return false;
     }
 
-    const title = (payload?.title || "").trim();
-    const url = (payload?.url || "").trim();
-    const magnet = (payload?.magnet || "").trim();
-    const thumbnail = (payload?.thumbnail || "").trim();
-    const description = (payload?.description || "").trim();
-    const ws = (payload?.ws || "").trim();
-    const xs = (payload?.xs || "").trim();
+    const normalizeString = (value) => {
+      if (typeof value === "string") {
+        return value.trim();
+      }
+      if (typeof value === "number") {
+        return Number.isFinite(value) ? String(value).trim() : "";
+      }
+      return String(value ?? "").trim();
+    };
+
+    const parseNumberOrNull = (value) => {
+      if (value === null || value === undefined || value === "") {
+        return null;
+      }
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : null;
+    };
+
+    const parseUnixSeconds = (value) => {
+      if (value === null || value === undefined || value === "") {
+        return null;
+      }
+      if (typeof value === "number" && Number.isFinite(value)) {
+        const normalized = value > 1e12 ? value / 1000 : value;
+        return Math.floor(normalized);
+      }
+      const trimmed = normalizeString(value);
+      if (!trimmed) {
+        return null;
+      }
+      const numeric = Number(trimmed);
+      if (Number.isFinite(numeric)) {
+        const normalized = numeric > 1e12 ? numeric / 1000 : numeric;
+        return Math.floor(normalized);
+      }
+      const timestamp = Date.parse(trimmed);
+      if (!Number.isNaN(timestamp)) {
+        return Math.floor(timestamp / 1000);
+      }
+      return null;
+    };
+
+    const normalizeStringArray = (input) => {
+      if (!Array.isArray(input)) {
+        return [];
+      }
+      return input
+        .map((entry) => normalizeString(entry))
+        .filter((entry) => Boolean(entry));
+    };
+
+    const normalizeImetaVariant = (variant) => {
+      if (!variant || typeof variant !== "object") {
+        return null;
+      }
+      const normalized = {};
+      const m = normalizeString(variant.m);
+      if (m) normalized.m = m;
+      const dim = normalizeString(variant.dim);
+      if (dim) normalized.dim = dim;
+      const url = normalizeString(variant.url);
+      if (url) normalized.url = url;
+      const x = normalizeString(variant.x);
+      if (x) normalized.x = x;
+      const image = normalizeStringArray(variant.image);
+      if (image.length) normalized.image = image;
+      const fallback = normalizeStringArray(variant.fallback);
+      if (fallback.length) normalized.fallback = fallback;
+      const service = normalizeStringArray(variant.service);
+      if (service.length) normalized.service = service;
+      if (variant.autoGenerated === true) {
+        normalized.autoGenerated = true;
+      }
+
+      return Object.keys(normalized).length ? normalized : null;
+    };
+
+    const normalizeSegments = (segments) => {
+      if (!Array.isArray(segments)) {
+        return [];
+      }
+      return segments
+        .map((segment) => {
+          if (!segment || typeof segment !== "object") {
+            return null;
+          }
+          const startRaw = segment.start;
+          const endRaw = segment.end;
+          const start = parseNumberOrNull(startRaw);
+          const end = parseNumberOrNull(endRaw);
+          const normalizedSegment = {};
+          if (start !== null) {
+            normalizedSegment.start = start;
+          } else {
+            const startString = normalizeString(startRaw);
+            if (startString) {
+              normalizedSegment.start = startString;
+            }
+          }
+          if (end !== null) {
+            normalizedSegment.end = end;
+          } else {
+            const endString = normalizeString(endRaw);
+            if (endString) {
+              normalizedSegment.end = endString;
+            }
+          }
+          const title = normalizeString(segment.title);
+          if (title) {
+            normalizedSegment.title = title;
+          }
+          const thumbnail = normalizeString(segment.thumbnail);
+          if (thumbnail) {
+            normalizedSegment.thumbnail = thumbnail;
+          }
+          return Object.keys(normalizedSegment).length ? normalizedSegment : null;
+        })
+        .filter(Boolean);
+    };
+
+    const normalizeTextTracks = (tracks) => {
+      if (!Array.isArray(tracks)) {
+        return [];
+      }
+      return tracks
+        .map((track) => {
+          if (!track || typeof track !== "object") {
+            return null;
+          }
+          const normalizedTrack = {};
+          const url = normalizeString(track.url);
+          if (url) normalizedTrack.url = url;
+          const type = normalizeString(track.type);
+          if (type) normalizedTrack.type = type;
+          const language = normalizeString(track.language);
+          if (language) normalizedTrack.language = language;
+          return Object.keys(normalizedTrack).length ? normalizedTrack : null;
+        })
+        .filter(Boolean);
+    };
+
+    const normalizeParticipants = (participants) => {
+      if (!Array.isArray(participants)) {
+        return [];
+      }
+      return participants
+        .map((participant) => {
+          if (!participant || typeof participant !== "object") {
+            return null;
+          }
+          const normalizedParticipant = {};
+          const pubkey = normalizeString(participant.pubkey);
+          if (pubkey) normalizedParticipant.pubkey = pubkey;
+          const relay = normalizeString(participant.relay);
+          if (relay) normalizedParticipant.relay = relay;
+          return Object.keys(normalizedParticipant).length
+            ? normalizedParticipant
+            : null;
+        })
+        .filter(Boolean);
+    };
+
+    const normalizeNip71Metadata = (rawMetadata) => {
+      if (!rawMetadata || typeof rawMetadata !== "object") {
+        return null;
+      }
+
+      const normalized = {};
+
+      if (rawMetadata.kind !== undefined) {
+        const kindNumber = parseNumberOrNull(rawMetadata.kind);
+        if (kindNumber !== null) {
+          normalized.kind = kindNumber;
+        } else {
+          const kindString = normalizeString(rawMetadata.kind);
+          if (kindString) {
+            normalized.kind = kindString;
+          }
+        }
+      }
+
+      const summary = normalizeString(rawMetadata.summary);
+      if (summary) {
+        normalized.summary = summary;
+      }
+
+      const publishedAt = parseUnixSeconds(rawMetadata.publishedAt);
+      if (publishedAt !== null) {
+        normalized.publishedAt = publishedAt;
+      }
+
+      const alt = normalizeString(rawMetadata.alt);
+      if (alt) {
+        normalized.alt = alt;
+      }
+
+      const duration = parseNumberOrNull(rawMetadata.duration);
+      if (duration !== null) {
+        normalized.duration = duration;
+      }
+
+      const contentWarning = normalizeString(rawMetadata.contentWarning);
+      if (contentWarning) {
+        normalized.contentWarning = contentWarning;
+      }
+
+      const imeta = Array.isArray(rawMetadata.imeta)
+        ? rawMetadata.imeta
+            .map((variant) => normalizeImetaVariant(variant))
+            .filter(Boolean)
+        : [];
+      if (imeta.length) {
+        normalized.imeta = imeta;
+      }
+
+      const textTracks = normalizeTextTracks(rawMetadata.textTracks);
+      if (textTracks.length) {
+        normalized.textTracks = textTracks;
+      }
+
+      const segments = normalizeSegments(rawMetadata.segments);
+      if (segments.length) {
+        normalized.segments = segments;
+      }
+
+      const hashtags = normalizeStringArray(rawMetadata.hashtags);
+      if (hashtags.length) {
+        normalized.hashtags = hashtags;
+      }
+
+      const participants = normalizeParticipants(rawMetadata.participants);
+      if (participants.length) {
+        normalized.participants = participants;
+      }
+
+      const references = normalizeStringArray(rawMetadata.references);
+      if (references.length) {
+        normalized.references = references;
+      }
+
+      return Object.keys(normalized).length ? normalized : null;
+    };
+
+    const rawPayload = payload && typeof payload === "object" ? payload : {};
+    const legacyPayload =
+      rawPayload.legacyFormData &&
+      typeof rawPayload.legacyFormData === "object"
+        ? rawPayload.legacyFormData
+        : rawPayload;
+
+    const rawNip71 =
+      (rawPayload.nip71 && typeof rawPayload.nip71 === "object"
+        ? rawPayload.nip71
+        : null) ||
+      (legacyPayload.nip71 && typeof legacyPayload.nip71 === "object"
+        ? legacyPayload.nip71
+        : null);
+
+    const title = normalizeString(legacyPayload?.title || "");
+    const url = normalizeString(legacyPayload?.url || "");
+    const magnet = normalizeString(legacyPayload?.magnet || "");
+    const thumbnail = normalizeString(legacyPayload?.thumbnail || "");
+    const description = normalizeString(legacyPayload?.description || "");
+    const ws = normalizeString(legacyPayload?.ws || "");
+    const xs = normalizeString(legacyPayload?.xs || "");
     const enableComments =
-      payload?.enableComments === false
+      legacyPayload?.enableComments === false
         ? false
-        : payload?.enableComments === true
+        : legacyPayload?.enableComments === true
           ? true
           : true;
 
-    const formData = {
+    const legacyFormData = {
       version: 3,
       title,
       url,
@@ -6350,37 +2395,69 @@ class bitvidApp {
       enableComments,
     };
 
-    if (!formData.title || (!formData.url && !formData.magnet)) {
-      this.showError("Title and at least one of URL or Magnet is required.");
+    const normalizedNip71 = normalizeNip71Metadata(rawNip71);
+
+    const hasLegacySource = Boolean(legacyFormData.url || legacyFormData.magnet);
+    const hasImetaVariant = Boolean(
+      normalizedNip71?.imeta?.some((variant) =>
+        Boolean(
+          (variant.url && variant.url.length) ||
+            (variant.m && variant.m.length) ||
+            (variant.x && variant.x.length) ||
+            (variant.dim && variant.dim.length) ||
+            (Array.isArray(variant.image) && variant.image.length > 0) ||
+            (Array.isArray(variant.fallback) && variant.fallback.length > 0) ||
+            (Array.isArray(variant.service) && variant.service.length > 0)
+        )
+      )
+    );
+
+    if (!legacyFormData.title) {
+      this.showError("Title is required.");
       return false;
     }
 
-    if (formData.url && !/^https:\/\//i.test(formData.url)) {
+    if (!hasLegacySource && !hasImetaVariant) {
+      this.showError(
+        "Provide a hosted URL, magnet link, or an imeta variant before publishing."
+      );
+      return false;
+    }
+
+    if (legacyFormData.url && !/^https:\/\//i.test(legacyFormData.url)) {
       this.showError("Hosted video URLs must use HTTPS.");
       return false;
     }
 
-    if (formData.magnet) {
-      const normalizedMagnet = normalizeAndAugmentMagnet(formData.magnet, {
+    if (legacyFormData.magnet) {
+      const normalizedMagnet = normalizeAndAugmentMagnet(legacyFormData.magnet, {
         ws,
         xs,
       });
-      formData.magnet = normalizedMagnet;
+      legacyFormData.magnet = normalizedMagnet;
       const hints = extractMagnetHints(normalizedMagnet);
-      formData.ws = hints.ws;
-      formData.xs = hints.xs;
+      legacyFormData.ws = hints.ws;
+      legacyFormData.xs = hints.xs;
     } else {
-      formData.ws = "";
-      formData.xs = "";
+      legacyFormData.ws = "";
+      legacyFormData.xs = "";
+    }
+
+    const publishPayload = {
+      legacyFormData,
+    };
+
+    if (normalizedNip71) {
+      publishPayload.nip71 = normalizedNip71;
     }
 
     try {
-      await nostrClient.publishVideo(formData, this.pubkey);
+      await this.nostrService.publishVideoNote(publishPayload, this.pubkey);
       if (typeof onSuccess === "function") {
         await onSuccess();
       }
       if (suppressModalClose !== true && this.uploadModal) {
-        this.uploadModal.classList.add("hidden");
+        this.uploadModal.close();
       }
       await this.loadVideos();
       this.showSuccess("Video shared successfully!");
@@ -6392,294 +2469,370 @@ class bitvidApp {
     }
   }
 
-  async handleEditVideoSubmit() {
-    if (!this.activeEditVideo || !this.editVideoModal) {
-      this.showError("No video selected for editing.");
-      return;
-    }
-
-    const fieldValue = (id) => {
-      const el = this.editVideoModal.querySelector(`#${id}`);
-      if (!el || typeof el.value !== "string") {
-        return "";
-      }
-      return el.value.trim();
-    };
-
-    const original = this.activeEditVideo;
-
-    const titleInput = this.editVideoModal.querySelector("#editVideoTitle");
-    const urlInput = this.editVideoModal.querySelector("#editVideoUrl");
-    const magnetInput = this.editVideoModal.querySelector("#editVideoMagnet");
-    const wsInput = this.editVideoModal.querySelector("#editVideoWs");
-    const xsInput = this.editVideoModal.querySelector("#editVideoXs");
-    const thumbnailInput = this.editVideoModal.querySelector(
-      "#editVideoThumbnail"
-    );
-    const descriptionInput = this.editVideoModal.querySelector(
-      "#editVideoDescription"
-    );
-
-    const newTitle = fieldValue("editVideoTitle");
-    const newUrl = fieldValue("editVideoUrl");
-    const newMagnet = fieldValue("editVideoMagnet");
-    const newWs = fieldValue("editVideoWs");
-    const newXs = fieldValue("editVideoXs");
-    const newThumbnail = fieldValue("editVideoThumbnail");
-    const newDescription = fieldValue("editVideoDescription");
-    const commentsEl = this.editVideoModal.querySelector(
-      "#editEnableComments"
-    );
-
-    const isEditing = (input) => !input || input.readOnly === false;
-
-    const titleWasEdited = isEditing(titleInput);
-    const urlWasEdited = isEditing(urlInput);
-    const magnetWasEdited = isEditing(magnetInput);
-
-    const finalTitle = titleWasEdited ? newTitle : original.title || "";
-    const finalUrl = urlWasEdited ? newUrl : original.url || "";
-    const shouldUseOriginalWs = wsInput ? wsInput.readOnly !== false : true;
-    const shouldUseOriginalXs = xsInput ? xsInput.readOnly !== false : true;
-    let finalWs = shouldUseOriginalWs ? original.ws || "" : newWs;
-    let finalXs = shouldUseOriginalXs ? original.xs || "" : newXs;
-    let finalMagnet = magnetWasEdited ? newMagnet : original.magnet || "";
-    const finalThumbnail = isEditing(thumbnailInput)
-      ? newThumbnail
-      : original.thumbnail || "";
-    const finalDescription = isEditing(descriptionInput)
-      ? newDescription
-      : original.description || "";
-    const originalEnableComments =
-      typeof original.enableComments === "boolean"
-        ? original.enableComments
-        : true;
-
-    let finalEnableComments = originalEnableComments;
-    if (commentsEl) {
-      if (commentsEl.disabled) {
-        finalEnableComments = commentsEl.dataset.originalValue === "true";
-      } else {
-        finalEnableComments = commentsEl.checked;
-      }
-    }
-
-    if (!finalTitle || (!finalUrl && !finalMagnet)) {
-      this.showError("Title and at least one of URL or Magnet is required.");
-      return;
-    }
-
-    if (finalUrl && !/^https:\/\//i.test(finalUrl)) {
-      this.showError("Hosted video URLs must use HTTPS.");
-      return;
-    }
-
-    if (finalMagnet) {
-      const normalizedMagnet = normalizeAndAugmentMagnet(finalMagnet, {
-        ws: finalWs,
-        xs: finalXs,
-      });
-      finalMagnet = normalizedMagnet;
-      const hints = extractMagnetHints(normalizedMagnet);
-      finalWs = hints.ws;
-      finalXs = hints.xs;
-    } else {
-      finalWs = "";
-      finalXs = "";
-    }
-
-    const updatedData = {
-      version: original.version || 2,
-      title: finalTitle,
-      magnet: finalMagnet,
-      url: finalUrl,
-      thumbnail: finalThumbnail,
-      description: finalDescription,
-      mode: isDevMode ? "dev" : "live",
-      ws: finalWs,
-      xs: finalXs,
-      wsEdited: !shouldUseOriginalWs,
-      xsEdited: !shouldUseOriginalXs,
-      urlEdited: urlWasEdited,
-      magnetEdited: magnetWasEdited,
-      enableComments: finalEnableComments,
-    };
-
-    const originalEvent = {
-      id: original.id,
-      pubkey: original.pubkey,
-      videoRootId: original.videoRootId,
-    };
-
-    try {
-      await nostrClient.editVideo(originalEvent, updatedData, this.pubkey);
-      await this.loadVideos();
-      this.videosMap.clear();
-      this.showSuccess("Video updated successfully!");
-      this.hideEditVideoModal();
-      this.forceRefreshAllProfiles();
-    } catch (err) {
-      console.error("Failed to edit video:", err);
-      this.showError("Failed to edit video. Please try again.");
-    }
-  }
-
   /**
    * Actually handle the upload form submission.
    */
-  async handleUploadSubmit() {
-    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 commentsEl = document.getElementById("uploadEnableComments");
-
-    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 enableComments = commentsEl ? commentsEl.checked : true;
-
-    const payload = {
-      title,
-      url,
-      magnet,
-      thumbnail,
-      description,
-      ws,
-      xs,
-      enableComments,
-    };
-
-    await this.publishVideoNote(payload, {
-      onSuccess: () => {
-        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;
-        if (commentsEl) commentsEl.checked = true;
-      },
-    });
-  }
-
-  /**
-   * Removes a saved profile entry and clears the active pointer when it matches
-   * the removed pubkey. Intended for the profile-switcher UI to prune old
-   * accounts without touching cached avatars.
-   */
-  removeSavedProfile(pubkey) {
-    const normalized = this.normalizeHexPubkey(pubkey);
-    const target = normalized || (typeof pubkey === "string" ? pubkey.trim() : "");
-    if (!target) {
-      return;
-    }
-
-    const nextProfiles = this.savedProfiles.filter(
-      (entry) => entry.pubkey !== target
-    );
-    if (nextProfiles.length === this.savedProfiles.length) {
-      return;
-    }
-
-    this.savedProfiles = nextProfiles;
-
-    if (this.activeProfilePubkey === target) {
-      this.activeProfilePubkey = null;
-    }
-
-    this.persistSavedProfiles();
-    this.renderSavedProfiles();
-  }
-
-  async switchProfile(pubkey) {
-    const normalizedTarget = this.normalizeHexPubkey(pubkey);
-    if (!normalizedTarget) {
-      this.showError("Unable to switch profiles: invalid account.");
-      return;
-    }
-
-    const normalizedActive = this.normalizeHexPubkey(this.activeProfilePubkey);
-    if (normalizedActive && normalizedActive === normalizedTarget) {
-      this.hideProfileModal();
-      return;
-    }
+  async handleUploadSubmitEvent(event) {
+    const payload = event?.detail?.payload || {};
 
     try {
-      await nostrClient.login({
-        allowAccountSelection: true,
-        expectPubkey: normalizedTarget,
+      await this.authService.handleUploadSubmit(payload, {
+        publish: (data) =>
+          this.publishVideoNote(data, {
+            onSuccess: () => {
+              if (this.uploadModal?.resetCustomForm) {
+                this.uploadModal.resetCustomForm();
+              }
+            },
+          }),
       });
     } catch (error) {
       const message =
         error && typeof error.message === "string" && error.message.trim()
           ? error.message.trim()
-          : "Profile switch was cancelled.";
+          : "Login required to publish videos.";
       this.showError(message);
-      return;
     }
-
-    try {
-      await this.login(normalizedTarget, { persistActive: true });
-    } catch (error) {
-      console.error("Failed to finalize profile switch:", error);
-      const message =
-        error && typeof error.message === "string" && error.message.trim()
-          ? error.message.trim()
-          : "Failed to switch profiles. Please try again.";
-      this.showError(message);
-      return;
-    }
-
-    this.profileSwitcherSelectionPubkey = null;
-
-    let reordered = false;
-    const currentIndex = this.savedProfiles.findIndex(
-      (entry) => this.normalizeHexPubkey(entry.pubkey) === normalizedTarget
-    );
-    if (currentIndex > 0) {
-      const [moved] = this.savedProfiles.splice(currentIndex, 1);
-      this.savedProfiles.unshift(moved);
-      reordered = true;
-    }
-
-    if (reordered) {
-      this.persistSavedProfiles({ persistActive: true });
-    }
-
-    this.renderSavedProfiles();
-    this.hideProfileModal();
   }
 
-  async applyPostLoginState() {
-    await this.refreshAdminPaneState();
-
-    try {
-      await userBlocks.loadBlocks(this.pubkey);
-    } catch (error) {
-      console.warn("Failed to load personal block list:", error);
+  async handleProfileSwitchRequest({ pubkey } = {}) {
+    if (!pubkey) {
+      throw new Error("Missing pubkey for profile switch request.");
     }
 
-    this.populateBlockedList();
+    const result = await this.authService.switchProfile(pubkey);
 
-    try {
-      await relayManager.loadRelayList(this.pubkey);
-    } catch (error) {
-      console.warn("Failed to load relay list:", error);
+    if (result?.switched) {
+      try {
+        await this.loadVideos(true);
+      } catch (error) {
+        console.error("Failed to refresh videos after switching profiles:", error);
+      }
     }
 
-    this.populateProfileRelays();
+    return result;
+  }
 
+  async handleProfileRelayOperation({
+    action,
+    url,
+    activePubkey,
+    skipPublishIfUnchanged = true,
+  } = {}) {
+    const context = {
+      action,
+      url,
+      ok: false,
+      changed: false,
+      reason: null,
+      error: null,
+      publishResult: null,
+      operationResult: null,
+    };
+
+    if (!activePubkey) {
+      context.reason = "no-active-pubkey";
+      return context;
+    }
+
+    const previous = relayManager.snapshot();
+
+    let operationResult;
+    try {
+      switch (action) {
+        case "add":
+          operationResult = relayManager.addRelay(url);
+          break;
+        case "remove":
+          operationResult = relayManager.removeRelay(url);
+          break;
+        case "restore":
+          operationResult = relayManager.restoreDefaults();
+          break;
+        case "mode-toggle":
+          operationResult = relayManager.cycleRelayMode(url);
+          break;
+        default: {
+          const error = Object.assign(new Error("Unknown relay operation."), {
+            code: "invalid-operation",
+          });
+          throw error;
+        }
+      }
+    } catch (error) {
+      context.reason = error?.code || "operation-error";
+      context.error = error;
+      return context;
+    }
+
+    context.operationResult = operationResult;
+    context.changed = Boolean(operationResult?.changed);
+
+    if (!context.changed && skipPublishIfUnchanged) {
+      context.reason = operationResult?.reason || "unchanged";
+      return context;
+    }
+
+    try {
+      const publishResult = await relayManager.publishRelayList(activePubkey);
+      if (!publishResult?.ok) {
+        throw Object.assign(new Error("No relays accepted the update."), {
+          code: "publish-failed",
+        });
+      }
+      context.ok = true;
+      context.publishResult = publishResult;
+
+      const refreshReason = `relay-${action || "update"}`;
+      try {
+        await this.onVideosShouldRefresh({ reason: refreshReason });
+      } catch (refreshError) {
+        if (isDevMode) {
+          console.warn(
+            "[Profile] Failed to refresh videos after relay update:",
+            refreshError,
+          );
+        }
+      }
+
+      return context;
+    } catch (error) {
+      context.reason = error?.code || "publish-failed";
+      context.error = error;
+      try {
+        if (Array.isArray(previous)) {
+          relayManager.setEntries(previous, { allowEmpty: false });
+        }
+      } catch (restoreError) {
+        if (isDevMode) {
+          console.warn(
+            "[Profile] Failed to restore relay preferences after publish error:",
+            restoreError,
+          );
+        }
+      }
+      return context;
+    }
+  }
+
+  handleProfileRelayModeToggle(payload = {}) {
+    return payload?.context || null;
+  }
+
+  handleProfileRelayRestore(payload = {}) {
+    return payload?.context || null;
+  }
+
+  async handleProfileBlocklistMutation({
+    action,
+    actorHex,
+    targetHex,
+  } = {}) {
+    const context = { ok: false, reason: null, error: null };
+
+    if (!actorHex || !targetHex) {
+      context.reason = "invalid-target";
+      return context;
+    }
+
+    try {
+      await userBlocks.ensureLoaded(actorHex);
+      const isBlocked = userBlocks.isBlocked(targetHex);
+
+      if (action === "add") {
+        if (isBlocked) {
+          context.reason = "already-blocked";
+          return context;
+        }
+        await userBlocks.addBlock(targetHex, actorHex);
+        context.ok = true;
+        context.reason = "blocked";
+      } else if (action === "remove") {
+        if (!isBlocked) {
+          context.reason = "not-blocked";
+          return context;
+        }
+        await userBlocks.removeBlock(targetHex, actorHex);
+        context.ok = true;
+        context.reason = "unblocked";
+      } else {
+        context.reason = "invalid-action";
+        return context;
+      }
+
+      if (context.ok) {
+        try {
+          await this.onVideosShouldRefresh({ reason: `blocklist-${action}` });
+        } catch (refreshError) {
+          console.error(
+            "Failed to refresh videos after blocklist mutation:",
+            refreshError,
+          );
+        }
+      }
+
+      return context;
+    } catch (error) {
+      context.error = error;
+      context.reason = error?.code || "service-error";
+      return context;
+    }
+  }
+
+  async handleProfileAdminMutation(payload = {}) {
+    const action = payload?.action;
+    const context = { ok: false, error: null, result: null };
+
+    try {
+      switch (action) {
+        case "ensure-ready":
+          await accessControl.ensureReady();
+          context.ok = true;
+          break;
+        case "add-moderator":
+          context.result = await accessControl.addModerator(
+            payload.actorNpub,
+            payload.targetNpub,
+          );
+          context.ok = !!context.result?.ok;
+          break;
+        case "remove-moderator":
+          context.result = await accessControl.removeModerator(
+            payload.actorNpub,
+            payload.targetNpub,
+          );
+          context.ok = !!context.result?.ok;
+          break;
+        case "list-mutation":
+          if (payload.listType === "whitelist") {
+            context.result =
+              payload.mode === "add"
+                ? await accessControl.addToWhitelist(
+                    payload.actorNpub,
+                    payload.targetNpub,
+                  )
+                : await accessControl.removeFromWhitelist(
+                    payload.actorNpub,
+                    payload.targetNpub,
+                  );
+          } else {
+            context.result =
+              payload.mode === "add"
+                ? await accessControl.addToBlacklist(
+                    payload.actorNpub,
+                    payload.targetNpub,
+                  )
+                : await accessControl.removeFromBlacklist(
+                    payload.actorNpub,
+                    payload.targetNpub,
+                  );
+          }
+          context.ok = !!context.result?.ok;
+          break;
+        default:
+          context.error = Object.assign(
+            new Error("Unknown admin mutation."),
+            { code: "invalid-action" },
+          );
+      }
+    } catch (error) {
+      context.error = error;
+      return context;
+    }
+
+    return context;
+  }
+
+  async handleProfileWalletPersist(options = {}) {
+    return this.nwcSettingsService.handleProfileWalletPersist(options);
+  }
+
+  async handleProfileWalletTest({ nwcUri, defaultZap } = {}) {
+    return this.nwcSettingsService.ensureWallet({ nwcUri, defaultZap });
+  }
+
+  async handleProfileWalletDisconnect() {
+    return this.nwcSettingsService.updateActiveNwcSettings(
+      this.nwcSettingsService.createDefaultNwcSettings(),
+    );
+  }
+
+  handleProfileAdminNotifyError({ error } = {}) {
+    if (!error) {
+      return;
+    }
+    console.warn("[admin] Notification dispatch issue:", error);
+  }
+
+  handleProfileHistoryEvent() {
+    return null;
+  }
+
+  updateActiveProfileUI(pubkey, profile = {}) {
+    if (this.profileController) {
+      this.profileController.handleProfileUpdated({
+        pubkey,
+        profile,
+      });
+      return;
+    }
+
+    const picture = profile.picture || "assets/svg/default-profile.svg";
+
+    if (this.profileAvatar) {
+      this.profileAvatar.src = picture;
+    }
+
+    const channelLink = document.getElementById("profileChannelLink");
+    if (channelLink instanceof HTMLElement) {
+      const targetNpub = this.safeEncodeNpub(pubkey);
+      if (targetNpub) {
+        channelLink.href = `#view=channel-profile&npub=${targetNpub}`;
+        channelLink.dataset.targetNpub = targetNpub;
+        channelLink.classList.remove("hidden");
+      } else {
+        channelLink.removeAttribute("href");
+        if (channelLink.dataset) {
+          delete channelLink.dataset.targetNpub;
+        }
+        channelLink.classList.add("hidden");
+      }
+    }
+  }
+
+  async hydrateNwcSettingsForPubkey(pubkey) {
+    return this.nwcSettingsService.hydrateNwcSettingsForPubkey(pubkey);
+  }
+
+  getActiveNwcSettings() {
+    return this.nwcSettingsService.getActiveNwcSettings();
+  }
+
+  hasActiveWalletConnection() {
+    return this.nwcSettingsService.hasActiveWalletConnection();
+  }
+
+  validateWalletUri(uri, options) {
+    return this.nwcSettingsService.validateWalletUri(uri, options);
+  }
+
+  isUserLoggedIn() {
+    return Boolean(this.normalizeHexPubkey(this.pubkey));
+  }
+
+  async updateActiveNwcSettings(partial = {}) {
+    return this.nwcSettingsService.updateActiveNwcSettings(partial);
+  }
+
+  async ensureWallet({ nwcUri, defaultZap } = {}) {
+    return this.nwcSettingsService.ensureWallet({ nwcUri, defaultZap });
+  }
+
+  async clearStoredNwcSettings(pubkey, options = {}) {
+    return this.nwcSettingsService.clearStoredNwcSettings(pubkey, options);
+  }
+
+  applyAuthenticatedUiState() {
     if (this.loginButton) {
       this.loginButton.classList.add("hidden");
       this.loginButton.setAttribute("hidden", "");
@@ -6709,217 +2862,192 @@ class bitvidApp {
     if (this.subscriptionsLink) {
       this.subscriptionsLink.classList.remove("hidden");
     }
-
-    if (this.pubkey) {
-      this.loadOwnProfile(this.pubkey);
-    }
-
-    await this.loadVideos();
-
-    this.forceRefreshAllProfiles();
-
-    await this.updateCloudflareBucketPreview();
   }
 
-  /**
-   * Called upon successful login.
-   */
-  async login(pubkey, options = {}) {
-    console.log("[app.js] login() called with pubkey =", pubkey);
-
-    let normalizedOptions = options;
-    if (typeof normalizedOptions === "boolean") {
-      normalizedOptions = { persistActive: normalizedOptions };
-    } else if (!normalizedOptions || typeof normalizedOptions !== "object") {
-      normalizedOptions = {};
-    }
-
-    const { persistActive = true } = normalizedOptions;
-
-    const previousActivePubkey =
-      this.normalizeHexPubkey(this.pubkey) ||
-      (typeof this.pubkey === "string" ? this.pubkey.trim() : "");
-
-    const normalizedPubkey = this.normalizeHexPubkey(pubkey);
-    const nextActivePubkey =
-      normalizedPubkey || (typeof pubkey === "string" ? pubkey.trim() : "");
-
-    const identityChanged = previousActivePubkey !== nextActivePubkey;
-    if (identityChanged) {
-      this.resetViewLoggingState();
-    }
-
-    const trimmedPubkey =
-      typeof pubkey === "string" && pubkey.trim() ? pubkey.trim() : "";
-
-    if (normalizedPubkey) {
-      this.pubkey = normalizedPubkey;
-      if (nostrClient && typeof nostrClient === "object") {
-        nostrClient.pubkey = normalizedPubkey;
-      }
-    } else {
-      this.pubkey = pubkey;
-      if (nostrClient && typeof nostrClient === "object") {
-        nostrClient.pubkey = trimmedPubkey ? trimmedPubkey.toLowerCase() : "";
-      }
-    }
-    this.currentUserNpub = this.safeEncodeNpub(this.pubkey);
-
-    if (
-      identityChanged &&
-      typeof window !== "undefined" &&
-      typeof window.dispatchEvent === "function"
-    ) {
-      window.dispatchEvent(
-        new CustomEvent("bitvid:auth-changed", {
-          detail: {
-            pubkey: nextActivePubkey || null,
-            previousPubkey: previousActivePubkey || null,
-          },
-        })
-      );
-    }
-
-    let savedProfilesMutated = false;
-    if (normalizedPubkey) {
-      const cacheEntry = this.profileCache.get(normalizedPubkey);
-      const cachedProfile = cacheEntry?.profile || {};
-      const existingIndex = this.savedProfiles.findIndex(
-        (candidate) => candidate.pubkey === normalizedPubkey
-      );
-      const existingEntry =
-        existingIndex >= 0 ? this.savedProfiles[existingIndex] : null;
-      const npub = this.safeEncodeNpub(normalizedPubkey);
-      const nextEntry = {
-        pubkey: normalizedPubkey,
-        npub: npub || existingEntry?.npub || null,
-        name: cachedProfile.name || existingEntry?.name || "",
-        picture: cachedProfile.picture || existingEntry?.picture || "",
-        authType: "nip07",
-      };
-
-      if (existingIndex >= 0) {
-        const currentEntry = this.savedProfiles[existingIndex];
-        const changed =
-          currentEntry.npub !== nextEntry.npub ||
-          currentEntry.name !== nextEntry.name ||
-          currentEntry.picture !== nextEntry.picture ||
-          currentEntry.authType !== nextEntry.authType;
-        if (changed) {
-          this.savedProfiles[existingIndex] = nextEntry;
-          savedProfilesMutated = true;
-        }
-      } else {
-        this.savedProfiles.push(nextEntry);
-        savedProfilesMutated = true;
-      }
-
-      this.persistActiveProfileSelection(normalizedPubkey, {
-        persist: persistActive,
-      });
-
-      if (!persistActive && savedProfilesMutated) {
-        this.persistSavedProfiles({ persistActive: false });
-      }
-    } else {
-      if (persistActive) {
-        console.warn(
-          "[app.js] login() requested storage persistence but pubkey was invalid; skipping saved profile update."
-        );
-      }
-    }
-
-    if (!normalizedPubkey && savedProfilesMutated) {
-      this.persistSavedProfiles({ persistActive: false });
-    }
-
-    await this.applyPostLoginState();
-  }
-
-  /**
-   * Logout logic
-   */
-  async logout() {
-    nostrClient.logout();
-    const previousPubkey =
-      this.normalizeHexPubkey(this.pubkey) ||
-      (typeof this.pubkey === "string" ? this.pubkey.trim() : "");
-    this.resetViewLoggingState();
-    this.pubkey = null;
-    this.currentUserNpub = null;
-
-    if (
-      previousPubkey &&
-      typeof window !== "undefined" &&
-      typeof window.dispatchEvent === "function"
-    ) {
-      window.dispatchEvent(
-        new CustomEvent("bitvid:auth-changed", {
-          detail: {
-            pubkey: null,
-            previousPubkey,
-          },
-        })
-      );
-    }
-
-    this.persistActiveProfileSelection(null, { persist: true });
-
-    userBlocks.reset();
-    this.populateBlockedList();
-
-    relayManager.reset();
-    this.populateProfileRelays();
-
-    // Show the login button again
+  applyLoggedOutUiState() {
     if (this.loginButton) {
       this.loginButton.classList.remove("hidden");
       this.loginButton.removeAttribute("hidden");
       this.loginButton.style.display = "";
     }
 
-    // Hide logout or userStatus
     if (this.logoutButton) {
       this.logoutButton.classList.add("hidden");
     }
+
     if (this.userStatus) {
       this.userStatus.classList.add("hidden");
     }
+
     if (this.userPubKey) {
       this.userPubKey.textContent = "";
     }
 
-    // Hide upload & profile
     if (this.uploadButton) {
       this.uploadButton.classList.add("hidden");
       this.uploadButton.setAttribute("hidden", "");
       this.uploadButton.style.display = "none";
     }
+
     if (this.profileButton) {
       this.profileButton.classList.add("hidden");
       this.profileButton.setAttribute("hidden", "");
       this.profileButton.style.display = "none";
     }
-    if (this.profileChannelLink) {
-      this.profileChannelLink.classList.add("hidden");
-      this.profileChannelLink.removeAttribute("href");
-      delete this.profileChannelLink.dataset.targetNpub;
-    }
 
-    // Hide the Subscriptions link
     if (this.subscriptionsLink) {
       this.subscriptionsLink.classList.add("hidden");
     }
+  }
 
-    await this.refreshAdminPaneState();
+  syncAuthUiState() {
+    if (this.isUserLoggedIn()) {
+      this.applyAuthenticatedUiState();
+    } else {
+      this.applyLoggedOutUiState();
+    }
+  }
 
-    // Refresh the video list so user sees only public videos again
-    await this.loadVideos();
+  async handleAuthLogin(detail = {}) {
+    const postLoginPromise =
+      detail && typeof detail.postLoginPromise?.then === "function"
+        ? detail.postLoginPromise
+        : Promise.resolve(detail?.postLogin ?? null);
+
+    if (detail && typeof detail === "object") {
+      try {
+        detail.__handled = true;
+      } catch (error) {
+        // Ignore attempts to mutate read-only descriptors.
+      }
+    }
+
+    if (detail?.identityChanged) {
+      this.resetViewLoggingState();
+    }
+
+    this.applyAuthenticatedUiState();
+
+    const loginContext = {
+      pubkey: detail?.pubkey || this.pubkey,
+      previousPubkey: detail?.previousPubkey,
+      identityChanged: Boolean(detail?.identityChanged),
+    };
+
+    const nwcPromise = this.nwcSettingsService
+      .onLogin(loginContext)
+      .catch((error) => {
+        console.error("Failed to process NWC settings during login:", error);
+        throw error;
+      });
+
+    if (this.profileController) {
+      try {
+        const maybePromise = this.profileController.handleAuthLogin(detail);
+        if (maybePromise && typeof maybePromise.then === "function") {
+          maybePromise.catch((error) => {
+            console.error(
+              "Failed to process login within the profile controller:",
+              error,
+            );
+          });
+        }
+      } catch (error) {
+        console.error(
+          "Failed to process login within the profile controller:",
+          error,
+        );
+      }
+    } else {
+      this.renderSavedProfiles();
+    }
+
+    const activePubkey = detail?.pubkey || this.pubkey;
+    postLoginPromise
+      .then((postLogin) => {
+        if (activePubkey && postLogin?.profile) {
+          this.updateActiveProfileUI(activePubkey, postLogin.profile);
+        }
+        this.forceRefreshAllProfiles();
+      })
+      .catch((error) => {
+        console.error("Post-login hydration failed:", error);
+      });
+
+    try {
+      await nwcPromise;
+    } catch (error) {
+      // Error already logged above; continue so UI can recover.
+    }
+
+    try {
+      await this.loadVideos(true);
+    } catch (error) {
+      console.error("Failed to refresh videos after login:", error);
+    }
 
-    // Force a fresh fetch of all profile pictures/names (public ones in this case)
     this.forceRefreshAllProfiles();
 
-    await this.updateCloudflareBucketPreview();
+    if (this.uploadModal?.refreshCloudflareBucketPreview) {
+      await this.uploadModal.refreshCloudflareBucketPreview();
+    }
+  }
+
+  async handleAuthLogout(detail = {}) {
+    this.resetViewLoggingState();
+
+    await this.nwcSettingsService.onLogout({
+      pubkey: detail?.pubkey || this.pubkey,
+      previousPubkey: detail?.previousPubkey,
+    });
+
+    if (this.profileController) {
+      try {
+        await this.profileController.handleAuthLogout(detail);
+      } catch (error) {
+        console.error(
+          "Failed to process logout within the profile controller:",
+          error,
+        );
+      }
+    } else {
+      this.renderSavedProfiles();
+    }
+
+    this.applyLoggedOutUiState();
+
+    try {
+      await this.loadVideos(true);
+    } catch (error) {
+      console.error("Failed to refresh videos after logout:", error);
+    }
+    this.forceRefreshAllProfiles();
+    if (this.uploadModal?.refreshCloudflareBucketPreview) {
+      await this.uploadModal.refreshCloudflareBucketPreview();
+    }
+  }
+
+  handleProfileUpdated(detail = {}) {
+    if (this.profileController) {
+      this.profileController.handleProfileUpdated(detail);
+    } else if (Array.isArray(detail?.savedProfiles)) {
+      this.renderSavedProfiles();
+    }
+
+    const normalizedPubkey = detail?.pubkey
+      ? this.normalizeHexPubkey(detail.pubkey)
+      : null;
+    const profile = detail?.profile;
+
+    if (normalizedPubkey && profile) {
+      this.updateProfileInDOM(normalizedPubkey, profile);
+      if (
+        !this.profileController &&
+        this.normalizeHexPubkey(this.pubkey) === normalizedPubkey
+      ) {
+        this.updateActiveProfileUI(normalizedPubkey, profile);
+      }
+    }
   }
 
   /**
@@ -6956,7 +3084,9 @@ class bitvidApp {
           }
         );
         this.clearActiveIntervals();
-        this.cleanupUrlPlaybackWatchdog();
+        if (this.playbackService) {
+          this.playbackService.cleanupWatchdog();
+        }
         this.teardownModalViewCountSubscription();
 
         if (!preserveObservers && this.mediaLoader) {
@@ -6969,38 +3099,46 @@ class bitvidApp {
           this.pruneDetachedViewCountElements();
         }
 
-        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 (!preserveSubscriptions) {
+          this.nostrService.clearVideoSubscription();
+          this.videoSubscription = this.nostrService.getVideoSubscription() || null;
         }
 
         // If there's a small inline player
         if (this.videoElement) {
           this.videoElement = this.teardownVideoElement(this.videoElement);
         }
-        // If there's a modal video
-        if (this.modalVideo) {
-          if (typeof this.modalPosterCleanup === "function") {
-            try {
-              this.modalPosterCleanup();
-            } catch (err) {
-              console.warn("[cleanup] modal poster cleanup threw:", err);
-            } finally {
-              this.modalPosterCleanup = null;
-            }
+        if (
+          this.videoModal &&
+          typeof this.videoModal.clearPosterCleanup === "function"
+        ) {
+          try {
+            this.videoModal.clearPosterCleanup();
+          } catch (err) {
+            console.warn("[cleanup] video modal poster cleanup threw:", err);
           }
-          const refreshedModal = this.teardownVideoElement(this.modalVideo, {
+        }
+
+        const modalVideoEl = this.modalVideo;
+        if (modalVideoEl) {
+          const refreshedModal = this.teardownVideoElement(modalVideoEl, {
             replaceNode: true,
           });
           if (refreshedModal) {
             this.modalVideo = refreshedModal;
+            if (
+              this.videoModal &&
+              typeof this.videoModal.setVideoElement === "function"
+            ) {
+              try {
+                this.videoModal.setVideoElement(refreshedModal);
+              } catch (err) {
+                console.warn(
+                  "[cleanup] Failed to sync video modal element after replacement:",
+                  err
+                );
+              }
+            }
           }
         }
         // Tell webtorrent to cleanup
@@ -7047,159 +3185,21 @@ class bitvidApp {
     this.activeIntervals = [];
   }
 
-  cleanupUrlPlaybackWatchdog() {
-    if (typeof this.urlPlaybackWatchdogCleanup === "function") {
-      try {
-        this.urlPlaybackWatchdogCleanup();
-      } catch (err) {
-        console.warn("[cleanupUrlPlaybackWatchdog]", err);
-      } finally {
-        this.urlPlaybackWatchdogCleanup = null;
-      }
-    }
-  }
-
   cancelPendingViewLogging() {
-    const state = this.playbackTelemetryState;
-    if (!state) {
-      return;
-    }
-
-    if (state.viewTimerId) {
-      clearTimeout(state.viewTimerId);
-    }
-
-    if (Array.isArray(state.handlers) && state.videoEl) {
-      for (const { eventName, handler } of state.handlers) {
-        try {
-          state.videoEl.removeEventListener(eventName, handler);
-        } catch (err) {
-          if (isDevMode) {
-            console.warn(
-              `[cancelPendingViewLogging] Failed to detach ${eventName} listener:`,
-              err
-            );
-          }
-        }
-      }
-    }
-
-    this.playbackTelemetryState = null;
-
-    this.flushWatchHistory("session-end", "cancelPendingViewLogging").catch(
-      (error) => {
-        const message =
-          error && typeof error.message === "string"
-            ? error.message
-            : String(error ?? "unknown error");
-        this.log(
-          `[cancelPendingViewLogging] Watch history flush failed: ${message}`
-        );
-      }
-    );
+    this.watchHistoryTelemetry?.cancelPlaybackLogging?.();
   }
 
   resetViewLoggingState() {
-    this.cancelPendingViewLogging();
-    if (this.loggedViewPointerKeys.size > 0) {
-      this.loggedViewPointerKeys.clear();
-    }
-  }
-
-  refreshWatchHistoryMetadataSettings() {
-    if (!watchHistoryService?.isEnabled?.()) {
-      this.watchHistoryMetadataEnabled = false;
-      return this.watchHistoryMetadataEnabled;
-    }
-
-    const previous = this.watchHistoryMetadataEnabled;
-    let enabled = true;
-
-    try {
-      if (typeof watchHistoryService.getSettings === "function") {
-        const settings = watchHistoryService.getSettings();
-        enabled = settings?.metadata?.storeLocally !== false;
-      } else if (typeof watchHistoryService.shouldStoreMetadata === "function") {
-        enabled = watchHistoryService.shouldStoreMetadata() !== false;
-      }
-    } catch (error) {
-      if (isDevMode) {
-        console.warn(
-          "[watchHistory] Failed to read metadata settings:",
-          error,
-        );
-      }
-      enabled = true;
-    }
-
-    this.watchHistoryMetadataEnabled = enabled;
-
-    if (enabled === false && previous !== false) {
-      try {
-        watchHistoryService?.clearLocalMetadata?.();
-      } catch (error) {
-        if (isDevMode) {
-          console.warn(
-            "[watchHistory] Failed to purge metadata cache while preference disabled:",
-            error,
-          );
-        }
-      }
-    }
-
-    return this.watchHistoryMetadataEnabled;
-  }
-
-  async initWatchHistoryMetadataSync() {
-    if (!watchHistoryService?.isEnabled?.()) {
-      this.watchHistoryMetadataEnabled = false;
-      return;
-    }
-
-    this.refreshWatchHistoryMetadataSettings();
-
-    if (
-      typeof watchHistoryService.subscribe === "function" &&
-      !this.watchHistoryPreferenceUnsubscribe
-    ) {
-      try {
-        const unsubscribe = watchHistoryService.subscribe(
-          "metadata-preference",
-          (payload) => {
-            const previous = this.watchHistoryMetadataEnabled;
-            const enabled = payload?.enabled !== false;
-            this.watchHistoryMetadataEnabled = enabled;
-            if (previous === true && enabled === false) {
-              try {
-                watchHistoryService?.clearLocalMetadata?.();
-              } catch (error) {
-                if (isDevMode) {
-                  console.warn(
-                    "[watchHistory] Failed to clear cached metadata after toggle off:",
-                    error,
-                  );
-                }
-              }
-            }
-          },
-        );
-        if (typeof unsubscribe === "function") {
-          this.watchHistoryPreferenceUnsubscribe = unsubscribe;
-        }
-      } catch (error) {
-        if (isDevMode) {
-          console.warn(
-            "[watchHistory] Failed to subscribe to metadata preference changes:",
-            error,
-          );
-        }
-      }
-    }
+    this.watchHistoryTelemetry?.resetPlaybackLoggingState?.();
   }
 
   persistWatchHistoryMetadataForVideo(video, pointerInfo) {
+    if (this.watchHistoryTelemetry) {
+      this.watchHistoryTelemetry.persistMetadataForVideo(video, pointerInfo);
+      return;
+    }
+
     if (
-      !this.watchHistoryMetadataEnabled ||
       !pointerInfo ||
       !pointerInfo.key ||
       typeof watchHistoryService?.setLocalMetadata !== "function"
@@ -7234,6 +3234,11 @@ class bitvidApp {
   }
 
   dropWatchHistoryMetadata(pointerKey) {
+    if (this.watchHistoryTelemetry) {
+      this.watchHistoryTelemetry.dropMetadata(pointerKey);
+      return;
+    }
+
     if (!pointerKey || typeof pointerKey !== "string") {
       return;
     }
@@ -7253,501 +3258,126 @@ class bitvidApp {
     }
   }
 
-  buildPointerFromDataset(dataset = {}) {
-    if (!dataset || typeof dataset !== "object") {
-      return null;
-    }
-
-    const typeValue = typeof dataset.pointerType === "string" ? dataset.pointerType : "";
-    const normalizedType = typeValue === "a" ? "a" : typeValue === "e" ? "e" : "";
-    const value =
-      typeof dataset.pointerValue === "string" && dataset.pointerValue.trim()
-        ? dataset.pointerValue.trim()
-        : "";
-
-    if (!normalizedType || !value) {
-      return null;
-    }
-
-    const pointer = { type: normalizedType, value };
-
-    if (typeof dataset.pointerRelay === "string" && dataset.pointerRelay.trim()) {
-      pointer.relay = dataset.pointerRelay.trim();
-    }
-
-    if (typeof dataset.pointerWatchedAt === "string" && dataset.pointerWatchedAt) {
-      const parsed = Number.parseInt(dataset.pointerWatchedAt, 10);
-      if (Number.isFinite(parsed)) {
-        pointer.watchedAt = parsed;
-      }
-    }
-
-    if (dataset.pointerSession === "true") {
-      pointer.session = true;
-    }
-
-    return pointer;
-  }
-
   async handleRemoveHistoryAction(dataset = {}, { trigger } = {}) {
-    const pointer = this.buildPointerFromDataset(dataset);
-    const pointerKeyValue =
-      typeof dataset.pointerKey === "string" && dataset.pointerKey.trim()
-        ? dataset.pointerKey.trim()
-        : pointer
-        ? derivePointerKey(normalizePointerInput(pointer)) || ""
-        : "";
-
-    if (!pointerKeyValue) {
-      this.showError("Unable to determine which history entry to remove.");
+    if (!this.watchHistoryController) {
+      this.showError("Watch history sync is not available right now.");
       return;
     }
 
-    const payload = {
-      removed: {
-        pointer,
-        pointerKey: pointerKeyValue,
-      },
-      reason: dataset.reason || "remove-item",
-    };
-
-    let card = null;
-    if (trigger instanceof HTMLElement) {
-      card = trigger.closest(".video-card");
-      if (card instanceof HTMLElement) {
-        card.dataset.historyRemovalPending = "true";
-        card.classList.add("opacity-60");
-        card.classList.add("pointer-events-none");
-      }
-    }
-
     try {
-      await this.handleWatchHistoryRemoval(payload);
+      await this.watchHistoryController.removeEntry({
+        dataset,
+        trigger,
+        removeCard: dataset.removeCard === "true",
+        reason: dataset.reason || "remove-item",
+      });
     } catch (error) {
-      if (card instanceof HTMLElement) {
-        delete card.dataset.historyRemovalPending;
-        card.classList.remove("opacity-60", "pointer-events-none");
-      }
       if (!error?.handled) {
         this.showError("Failed to remove from history. Please try again.");
       }
-      return;
-    }
-
-    if (card instanceof HTMLElement) {
-      delete card.dataset.historyRemovalPending;
-      card.classList.remove("opacity-60", "pointer-events-none");
-      if (dataset.removeCard === "true") {
-        card.remove();
-      }
     }
   }
 
   async handleWatchHistoryRemoval(payload = {}) {
-    if (!watchHistoryService?.isEnabled?.()) {
+    if (!this.watchHistoryTelemetry) {
+      this.showError("Watch history sync is not available right now.");
       const error = new Error("watch-history-disabled");
       error.handled = true;
-      this.showError("Watch history sync is not available right now.");
-      throw error;
-    }
-
-    const reason =
-      typeof payload.reason === "string" && payload.reason.trim()
-        ? payload.reason.trim()
-        : "remove-item";
-
-    const actorCandidate =
-      typeof payload.actor === "string" && payload.actor.trim()
-        ? payload.actor.trim()
-        : typeof this.pubkey === "string" && this.pubkey.trim()
-        ? this.pubkey.trim()
-        : typeof nostrClient?.sessionActor?.pubkey === "string" &&
-          nostrClient.sessionActor.pubkey
-        ? nostrClient.sessionActor.pubkey
-        : "";
-
-    const removedPointerRaw =
-      payload?.removed?.pointer || payload?.removed?.raw || payload?.removed || null;
-    const removedPointerNormalized = normalizePointerInput(removedPointerRaw);
-    let removedPointerKey =
-      typeof payload?.removed?.pointerKey === "string"
-        ? payload.removed.pointerKey
-        : "";
-    if (!removedPointerKey && removedPointerNormalized) {
-      removedPointerKey = derivePointerKey(removedPointerNormalized) || "";
-    }
-
-    if (removedPointerKey) {
-      this.dropWatchHistoryMetadata(removedPointerKey);
-    }
-
-    const normalizeEntry = (entry) => {
-      if (!entry) {
-        return null;
-      }
-      const pointer = normalizePointerInput(entry.pointer || entry);
-      if (!pointer) {
-        return null;
-      }
-      if (Number.isFinite(entry.watchedAt)) {
-        pointer.watchedAt = Math.floor(entry.watchedAt);
-      } else if (Number.isFinite(entry.pointer?.watchedAt)) {
-        pointer.watchedAt = Math.floor(entry.pointer.watchedAt);
-      }
-      if (entry.pointer?.session === true || entry.session === true) {
-        pointer.session = true;
-      }
-      return pointer;
-    };
-
-    let normalizedItems = null;
-
-    if (Array.isArray(payload.items) && payload.items.length) {
-      normalizedItems = payload.items.map(normalizeEntry).filter(Boolean);
-    }
-
-    if (!normalizedItems) {
-      try {
-        const latest = await watchHistoryService.loadLatest(actorCandidate);
-        normalizedItems = Array.isArray(latest)
-          ? latest.map(normalizeEntry).filter(Boolean)
-          : [];
-      } catch (error) {
-        this.showError("Failed to load watch history. Please try again.");
-        if (error && typeof error === "object") {
-          error.handled = true;
-        }
-        throw error;
-      }
-    }
-
-    if (removedPointerKey) {
-      normalizedItems = normalizedItems.filter((entry) => {
-        try {
-          return derivePointerKey(entry) !== removedPointerKey;
-        } catch (error) {
-          return true;
-        }
-      });
-    }
-
-    this.showSuccess("Removing from history…");
-
-    try {
-      const snapshotResult = await watchHistoryService.snapshot(normalizedItems, {
-        actor: actorCandidate || undefined,
-        reason,
-      });
-
-      try {
-        await nostrClient.updateWatchHistoryList(normalizedItems, {
-          actorPubkey: actorCandidate || undefined,
-          replace: true,
-          source: reason,
-        });
-      } catch (updateError) {
-        if (isDevMode) {
-          console.warn(
-            "[watchHistory] Failed to update local watch history list:",
-            updateError,
-          );
-        }
-      }
-
-      this.showSuccess(
-        "Removed from encrypted history. Relay sync may take a moment.",
-      );
-
-      return { handledToasts: true, snapshot: snapshotResult };
-    } catch (error) {
-      let message = "Failed to remove from history. Please try again.";
-      if (error?.result?.retryable) {
-        message =
-          "Removal will retry once encrypted history is accepted by your relays.";
-      }
-      this.showError(message);
-      if (error && typeof error === "object") {
-        error.handled = true;
-      }
       throw error;
     }
+    return this.watchHistoryTelemetry.handleRemoval(payload);
   }
 
   flushWatchHistory(reason = "session-end", context = "watch-history") {
-    if (!watchHistoryService?.isEnabled?.()) {
+    if (!this.watchHistoryTelemetry) {
       return Promise.resolve();
     }
-    try {
-      const result = watchHistoryService.snapshot(undefined, { reason });
-      return Promise.resolve(result).catch((error) => {
-        if (isDevMode) {
-          console.warn(`[${context}] Watch history flush failed:`, error);
-        }
-        throw error;
-      });
-    } catch (error) {
-      if (isDevMode) {
-        console.warn(`[${context}] Failed to queue watch history flush:`, error);
-      }
-      return Promise.reject(error);
-    }
+    return this.watchHistoryTelemetry.flush(reason, context);
   }
 
   getActiveViewIdentityKey() {
-    const normalizedUser = this.normalizeHexPubkey(this.pubkey);
-    if (normalizedUser) {
-      return `actor:${normalizedUser}`;
+    if (!this.watchHistoryTelemetry) {
+      const normalizedUser = this.normalizeHexPubkey(this.pubkey);
+      if (normalizedUser) {
+        return `actor:${normalizedUser}`;
+      }
+
+      const sessionActorPubkey = this.normalizeHexPubkey(
+        nostrClient?.sessionActor?.pubkey
+      );
+      if (sessionActorPubkey) {
+        return `actor:${sessionActorPubkey}`;
+      }
+
+      return "actor:anonymous";
     }
 
-    const sessionActorPubkey = this.normalizeHexPubkey(
-      nostrClient?.sessionActor?.pubkey
-    );
-    if (sessionActorPubkey) {
-      return `actor:${sessionActorPubkey}`;
-    }
-
-    return "actor:anonymous";
+    return this.watchHistoryTelemetry.getActiveViewIdentityKey();
   }
 
   deriveViewIdentityKeyFromEvent(event) {
-    if (!event || typeof event !== "object") {
-      return "";
+    if (!this.watchHistoryTelemetry) {
+      if (!event || typeof event !== "object") {
+        return "";
+      }
+
+      const normalizedPubkey = this.normalizeHexPubkey(event.pubkey);
+      if (!normalizedPubkey) {
+        return "";
+      }
+
+      return `actor:${normalizedPubkey}`;
     }
 
-    const normalizedPubkey = this.normalizeHexPubkey(event.pubkey);
-    if (!normalizedPubkey) {
-      return "";
-    }
-
-    return `actor:${normalizedPubkey}`;
+    return this.watchHistoryTelemetry.deriveViewIdentityKeyFromEvent(event);
   }
 
   buildViewCooldownKey(pointerKey, identityKey) {
-    const normalizedPointerKey =
-      typeof pointerKey === "string" && pointerKey.trim()
-        ? pointerKey.trim()
-        : "";
-    if (!normalizedPointerKey) {
-      return "";
+    if (!this.watchHistoryTelemetry) {
+      const normalizedPointerKey =
+        typeof pointerKey === "string" && pointerKey.trim()
+          ? pointerKey.trim()
+          : "";
+      if (!normalizedPointerKey) {
+        return "";
+      }
+
+      const normalizedIdentity =
+        typeof identityKey === "string" && identityKey.trim()
+          ? identityKey.trim().toLowerCase()
+          : "";
+
+      return normalizedIdentity
+        ? `${normalizedPointerKey}::${normalizedIdentity}`
+        : normalizedPointerKey;
     }
 
-    const normalizedIdentity =
-      typeof identityKey === "string" && identityKey.trim()
-        ? identityKey.trim().toLowerCase()
-        : "";
-
-    return normalizedIdentity
-      ? `${normalizedPointerKey}::${normalizedIdentity}`
-      : normalizedPointerKey;
+    return this.watchHistoryTelemetry.buildViewCooldownKey(
+      pointerKey,
+      identityKey
+    );
   }
 
-  preparePlaybackViewLogging(videoEl) {
-    this.cancelPendingViewLogging();
-
-    if (!videoEl || typeof videoEl.addEventListener !== "function") {
+  preparePlaybackLogging(videoEl) {
+    if (!this.watchHistoryTelemetry) {
+      this.cancelPendingViewLogging();
       return;
     }
 
     const pointer = this.currentVideoPointer;
     const pointerKey = this.currentVideoPointerKey || pointerArrayToKey(pointer);
+
     if (!pointer || !pointerKey) {
+      this.watchHistoryTelemetry.cancelPlaybackLogging();
       return;
     }
 
-    const viewerIdentityKey = this.getActiveViewIdentityKey();
-    const cooldownKey = this.buildViewCooldownKey(pointerKey, viewerIdentityKey);
-
-    if (cooldownKey && this.loggedViewPointerKeys.has(cooldownKey)) {
-      return;
-    }
-
-    const VIEW_THRESHOLD_SECONDS = 12;
-    const state = {
-      videoEl,
+    this.watchHistoryTelemetry.preparePlaybackLogging({
+      videoElement: videoEl,
       pointer,
       pointerKey,
-      viewerIdentityKey,
-      handlers: [],
-      viewTimerId: null,
-      viewFired: false,
-    };
-
-    const clearTimer = (timerKey) => {
-      const property = `${timerKey}TimerId`;
-      if (state[property]) {
-        clearTimeout(state[property]);
-        state[property] = null;
-      }
-    };
-
-    const finalizeView = () => {
-      if (state.viewFired) {
-        return;
-      }
-      state.viewFired = true;
-      clearTimer("view");
-      this.cancelPendingViewLogging();
-
-      const { pointer: thresholdPointer, pointerKey: thresholdPointerKey } =
-        state;
-
-      (async () => {
-        let viewResult;
-        try {
-          const canUseWatchHistoryService =
-            typeof watchHistoryService?.publishView === "function";
-          const resolveWatchActor = () => {
-            const normalizedUser = this.normalizeHexPubkey(this.pubkey);
-            if (normalizedUser) {
-              return normalizedUser;
-            }
-
-            const normalizedClient = this.normalizeHexPubkey(
-              nostrClient?.pubkey
-            );
-            if (normalizedClient) {
-              return normalizedClient;
-            }
-
-            const normalizedSession = this.normalizeHexPubkey(
-              nostrClient?.sessionActor?.pubkey
-            );
-            if (normalizedSession) {
-              return normalizedSession;
-            }
-
-            if (
-              typeof nostrClient?.pubkey === "string" &&
-              nostrClient.pubkey.trim()
-            ) {
-              return nostrClient.pubkey.trim().toLowerCase();
-            }
-
-            if (
-              typeof nostrClient?.sessionActor?.pubkey === "string" &&
-              nostrClient.sessionActor.pubkey.trim()
-            ) {
-              return nostrClient.sessionActor.pubkey.trim().toLowerCase();
-            }
-
-            return "";
-          };
-
-          const activeWatchActor = resolveWatchActor();
-          const watchMetadata = activeWatchActor ? { actor: activeWatchActor } : undefined;
-
-          if (canUseWatchHistoryService) {
-            viewResult = await watchHistoryService.publishView(
-              thresholdPointer,
-              undefined,
-              watchMetadata
-            );
-          } else if (typeof nostrClient?.recordVideoView === "function") {
-            viewResult = await nostrClient.recordVideoView(thresholdPointer);
-          } else {
-            viewResult = { ok: false, error: "view-logging-unavailable" };
-          }
-        } catch (error) {
-          if (isDevMode) {
-            console.warn(
-              "[playVideoWithFallback] Exception while recording video view:",
-              error
-            );
-          }
-        }
-
-        const viewOk = !!viewResult?.ok;
-        if (viewOk) {
-          const eventIdentityKey =
-            this.deriveViewIdentityKeyFromEvent(viewResult?.event) ||
-            state.viewerIdentityKey ||
-            this.getActiveViewIdentityKey();
-          const keyToPersist = this.buildViewCooldownKey(
-            thresholdPointerKey,
-            eventIdentityKey
-          );
-          if (keyToPersist) {
-            this.loggedViewPointerKeys.add(keyToPersist);
-          }
-          if (viewResult?.event) {
-            ingestLocalViewEvent({
-              event: viewResult.event,
-              pointer: thresholdPointer,
-            });
-          }
-        } else if (isDevMode && viewResult) {
-          console.warn(
-            "[playVideoWithFallback] View event rejected by relays:",
-            viewResult
-          );
-        }
-      })().catch((error) => {
-        if (isDevMode) {
-          console.warn(
-            "[playVideoWithFallback] Unexpected error while recording video view:",
-            error
-          );
-        }
-      });
-    };
-
-    const scheduleTimer = (timerKey, thresholdSeconds, callback) => {
-      const firedKey = `${timerKey}Fired`;
-      const idKey = `${timerKey}TimerId`;
-      if (state[firedKey] || state[idKey]) {
-        return;
-      }
-      const currentSeconds = Number.isFinite(videoEl.currentTime)
-        ? videoEl.currentTime
-        : 0;
-      const remainingMs = Math.max(
-        0,
-        Math.ceil((thresholdSeconds - currentSeconds) * 1000)
-      );
-      if (remainingMs <= 0) {
-        callback();
-        return;
-      }
-      state[idKey] = window.setTimeout(callback, remainingMs);
-    };
-
-    const registerHandler = (eventName, handler) => {
-      videoEl.addEventListener(eventName, handler);
-      state.handlers.push({ eventName, handler });
-    };
-
-    registerHandler("timeupdate", () => {
-      if (!state.viewFired && videoEl.currentTime >= VIEW_THRESHOLD_SECONDS) {
-        finalizeView();
-      }
+      video: this.currentVideo,
     });
-
-    const cancelOnPause = () => {
-      if (!state.viewFired) {
-        clearTimer("view");
-      }
-    };
-
-    ["pause", "waiting", "stalled", "ended", "emptied"].forEach((event) =>
-      registerHandler(event, cancelOnPause)
-    );
-
-    const resumeIfNeeded = () => {
-      if (state.viewFired) {
-        return;
-      }
-      scheduleTimer("view", VIEW_THRESHOLD_SECONDS, finalizeView);
-    };
-
-    ["play", "playing"].forEach((event) =>
-      registerHandler(event, resumeIfNeeded)
-    );
-
-    this.playbackTelemetryState = state;
-
-    if (!videoEl.paused && videoEl.currentTime > 0) {
-      resumeIfNeeded();
-    }
   }
 
   teardownVideoElement(videoElement, { replaceNode = false } = {}) {
@@ -7875,158 +3505,21 @@ class bitvidApp {
     return clone;
   }
 
-  registerUrlPlaybackWatchdogs(
-    videoElement,
-    { stallMs = 8000, onSuccess, onFallback } = {}
-  ) {
-    this.cleanupUrlPlaybackWatchdog();
-
-    if (!videoElement || typeof onFallback !== "function") {
-      return () => {};
-    }
-
-    const normalizedStallMs = Number.isFinite(stallMs) && stallMs > 0 ? stallMs : 0;
-    this.log(
-      `[registerUrlPlaybackWatchdogs] Installing watchdogs (stallMs=${normalizedStallMs}) readyState=${videoElement.readyState} networkState=${videoElement.networkState}`
-    );
-    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;
-      }
-      this.log(
-        `[registerUrlPlaybackWatchdogs] Triggering fallback (${reason}) readyState=${videoElement.readyState} networkState=${videoElement.networkState}`
-      );
-      cleanup();
-      onFallback(reason);
-    };
-
-    const handleSuccess = () => {
-      if (!active) {
-        return;
-      }
-      this.log(
-        "[registerUrlPlaybackWatchdogs] Hosted playback signaled success; clearing watchdogs."
-      );
-      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("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 = () => {
-      this.log("[registerUrlPlaybackWatchdogs] Manual watchdog cleanup invoked.");
-      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%";
+    if (this.videoModal) {
+      this.videoModal.resetStats();
     }
   }
 
   setCopyMagnetState(enabled) {
-    if (!this.copyMagnetBtn) {
-      return;
+    if (this.videoModal) {
+      this.videoModal.setCopyEnabled(enabled);
     }
-    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);
-  }
-
-  setModalZapVisibility(visible) {
-    if (!this.modalZapBtn) {
-      return;
-    }
-    const shouldShow = !!visible;
-    this.modalZapBtn.classList.toggle("hidden", !shouldShow);
-    this.modalZapBtn.disabled = !shouldShow;
-    this.modalZapBtn.setAttribute("aria-disabled", (!shouldShow).toString());
-    this.modalZapBtn.setAttribute("aria-hidden", (!shouldShow).toString());
-    if (shouldShow) {
-      this.modalZapBtn.removeAttribute("tabindex");
-    } else {
-      this.modalZapBtn.setAttribute("tabindex", "-1");
+    if (this.videoModal) {
+      this.videoModal.setShareEnabled(enabled);
     }
   }
 
@@ -8084,26 +3577,6 @@ class bitvidApp {
     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) => {
@@ -8142,20 +3615,22 @@ class bitvidApp {
       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;
+      if (this.videoModal) {
+        if (status) {
+          this.videoModal.updateStatus(status.textContent);
+        }
+        if (progress) {
+          this.videoModal.updateProgress(progress.style.width);
+        }
+        if (peers) {
+          this.videoModal.updatePeers(peers.textContent);
+        }
+        if (speed) {
+          this.videoModal.updateSpeed(speed.textContent);
+        }
+        if (downloaded) {
+          this.videoModal.updateDownloaded(downloaded.textContent);
+        }
       }
     }, 3000);
     this.activeIntervals.push(mirrorInterval);
@@ -8165,43 +3640,236 @@ class bitvidApp {
    * Hide the video modal.
    */
   async hideModal() {
-    // 1) Clear intervals, cleanup, etc. (unchanged)
+    // 1) Clear timers/listeners immediately so playback stats stop updating
     this.cancelPendingViewLogging();
     this.clearActiveIntervals();
     this.teardownModalViewCountSubscription();
 
-    try {
-      await fetch("/webtorrent/cancel/", { mode: "no-cors" });
-    } catch (err) {
-      // ignore
+    // 2) Close the modal UI right away so the user gets instant feedback
+    const modalVideoElement =
+      (this.videoModal &&
+        typeof this.videoModal.getVideoElement === "function" &&
+        this.videoModal.getVideoElement()) ||
+      this.modalVideo ||
+      null;
+    if (modalVideoElement) {
+      try {
+        modalVideoElement.pause();
+        modalVideoElement.removeAttribute("src");
+        modalVideoElement.load();
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[hideModal] Failed to reset modal video element:", error);
+        }
+      }
     }
-    await this.cleanup({
-      preserveSubscriptions: true,
-      preserveObservers: true,
-    });
 
-    // 2) Hide the modal
-    if (this.playerModal) {
-      this.playerModal.style.display = "none";
-      this.playerModal.classList.add("hidden");
-    }
-    document.body.classList.remove("modal-open");
-    document.documentElement.classList.remove("modal-open");
-    if (typeof this.modalPosterCleanup === "function") {
-      this.modalPosterCleanup();
-      this.modalPosterCleanup = null;
-    }
-    if (this.modalVideo) {
-      this.modalVideo.poster = "";
-      this.modalVideo.removeAttribute("poster");
+    if (this.videoModal) {
+      try {
+        this.videoModal.close();
+      } catch (error) {
+        console.warn("[hideModal] Failed to close video modal immediately:", error);
+      }
     }
+
     this.currentMagnetUri = null;
 
-    // 3) Remove only `?v=` but **keep** the hash
+    // 3) Kick off heavy cleanup work asynchronously. We still await it so
+    // callers that depend on teardown finishing behave the same, but the
+    // user-visible UI is already closed.
+    const performCleanup = async () => {
+      try {
+        await fetch("/webtorrent/cancel/", { mode: "no-cors" });
+      } catch (err) {
+        if (isDevMode) {
+          console.warn("[hideModal] webtorrent cancel fetch failed:", err);
+        }
+      }
+
+      await this.cleanup({
+        preserveSubscriptions: true,
+        preserveObservers: true,
+      });
+    };
+
+    // 4) Remove only `?v=` but **keep** the hash
     const url = new URL(window.location.href);
     url.searchParams.delete("v"); // remove ?v= param
     const newUrl = url.pathname + url.search + url.hash;
     window.history.replaceState({}, "", newUrl);
+
+    try {
+      await performCleanup();
+    } catch (error) {
+      console.error("[hideModal] Cleanup failed:", error);
+    }
+  }
+
+  /**
+   * Register the default "recent" feed pipeline.
+   */
+  registerRecentFeed() {
+    if (!this.feedEngine || typeof this.feedEngine.registerFeed !== "function") {
+      return null;
+    }
+
+    const existingDefinition =
+      typeof this.feedEngine.getFeedDefinition === "function"
+        ? this.feedEngine.getFeedDefinition("recent")
+        : null;
+    if (existingDefinition) {
+      return existingDefinition;
+    }
+
+    try {
+      return this.feedEngine.registerFeed("recent", {
+        source: createActiveNostrSource({ service: this.nostrService }),
+        stages: [
+          createBlacklistFilterStage({
+            shouldIncludeVideo: (video, options) =>
+              this.nostrService.shouldIncludeVideo(video, options),
+          }),
+          createDedupeByRootStage({
+            dedupe: (videos) => this.dedupeVideosByRoot(videos),
+          }),
+        ],
+        sorter: createChronologicalSorter(),
+      });
+    } catch (error) {
+      console.warn("[Application] Failed to register recent feed:", error);
+      return null;
+    }
+  }
+
+  registerSubscriptionsFeed() {
+    if (!this.feedEngine || typeof this.feedEngine.registerFeed !== "function") {
+      return null;
+    }
+
+    const existingDefinition =
+      typeof this.feedEngine.getFeedDefinition === "function"
+        ? this.feedEngine.getFeedDefinition("subscriptions")
+        : null;
+    if (existingDefinition) {
+      return existingDefinition;
+    }
+
+    try {
+      return this.feedEngine.registerFeed("subscriptions", {
+        source: createSubscriptionAuthorsSource({ service: this.nostrService }),
+        stages: [
+          createBlacklistFilterStage({
+            shouldIncludeVideo: (video, options) =>
+              this.nostrService.shouldIncludeVideo(video, options),
+          }),
+          createDedupeByRootStage({
+            dedupe: (videos) => this.dedupeVideosByRoot(videos),
+          }),
+        ],
+        sorter: createChronologicalSorter(),
+        hooks: {
+          subscriptions: {
+            resolveAuthors: () => subscriptions.getSubscribedAuthors(),
+          },
+        },
+      });
+    } catch (error) {
+      console.warn("[Application] Failed to register subscriptions feed:", error);
+      return null;
+    }
+  }
+
+  registerWatchHistoryFeed() {
+    if (!this.feedEngine || typeof this.feedEngine.registerFeed !== "function") {
+      return null;
+    }
+
+    const existingDefinition =
+      typeof this.feedEngine.getFeedDefinition === "function"
+        ? this.feedEngine.getFeedDefinition("watch-history")
+        : null;
+    if (existingDefinition) {
+      return existingDefinition;
+    }
+
+    try {
+      return registerWatchHistoryFeed(this.feedEngine, {
+        service: watchHistoryService,
+        nostr: this.nostrService,
+      });
+    } catch (error) {
+      console.warn("[Application] Failed to register watch history feed:", error);
+      return null;
+    }
+  }
+
+  buildRecentFeedRuntime() {
+    const blacklist =
+      this.blacklistedEventIds instanceof Set
+        ? new Set(this.blacklistedEventIds)
+        : new Set();
+
+    return {
+      blacklistedEventIds: blacklist,
+      isAuthorBlocked: (pubkey) => this.isAuthorBlocked(pubkey),
+    };
+  }
+
+  refreshRecentFeed({ reason, fallbackVideos } = {}) {
+    const runtime = this.buildRecentFeedRuntime();
+    const normalizedReason = typeof reason === "string" ? reason : undefined;
+    const fallback = Array.isArray(fallbackVideos) ? fallbackVideos : [];
+
+    if (!this.feedEngine || typeof this.feedEngine.run !== "function") {
+      const metadata = {
+        reason: normalizedReason,
+        engine: "unavailable",
+      };
+      this.latestFeedMetadata = metadata;
+      this.videosMap = this.nostrService.getVideosMap();
+      if (this.videoListView) {
+        this.videoListView.state.videosMap = this.videosMap;
+      }
+      this.renderVideoList({ videos: fallback, metadata });
+      return Promise.resolve({ videos: fallback, metadata });
+    }
+
+    return this.feedEngine
+      .run("recent", { runtime })
+      .then((result) => {
+        const videos = Array.isArray(result?.videos) ? result.videos : [];
+        const metadata = {
+          ...(result?.metadata || {}),
+        };
+        if (normalizedReason) {
+          metadata.reason = normalizedReason;
+        }
+
+        this.latestFeedMetadata = metadata;
+        this.videosMap = this.nostrService.getVideosMap();
+        if (this.videoListView) {
+          this.videoListView.state.videosMap = this.videosMap;
+        }
+
+        const payload = { videos, metadata };
+        this.renderVideoList(payload);
+        return payload;
+      })
+      .catch((error) => {
+        console.error("[Application] Failed to run recent feed:", error);
+        const metadata = {
+          reason: normalizedReason || "error:recent-feed",
+          error: true,
+        };
+        this.latestFeedMetadata = metadata;
+        this.videosMap = this.nostrService.getVideosMap();
+        if (this.videoListView) {
+          this.videoListView.state.videosMap = this.videosMap;
+        }
+        const payload = { videos: fallback, metadata };
+        this.renderVideoList(payload);
+        return payload;
+      });
   }
 
   /**
@@ -8210,105 +3878,55 @@ class bitvidApp {
   async loadVideos(forceFetch = false) {
     console.log("Starting loadVideos... (forceFetch =", forceFetch, ")");
 
-    try {
-      await accessControl.ensureReady();
-    } catch (error) {
-      console.warn("Failed to ensure admin lists were loaded before fetching videos:", error);
+    const container = this.mountVideoListView();
+    if (this.videoListView && container) {
+      this.videoListView.showLoading("Fetching recent videos…");
+    } else if (container) {
+      container.innerHTML = getSidebarLoadingMarkup("Fetching recent videos…");
     }
 
-    const shouldIncludeVideo = (video) => {
-      if (!video || typeof video !== "object") {
-        return false;
-      }
+    let initialRefreshPromise = null;
 
-      if (this.blacklistedEventIds.has(video.id)) {
-        return false;
-      }
+    const videos = await this.nostrService.loadVideos({
+      forceFetch,
+      blacklistedEventIds: this.blacklistedEventIds,
+      isAuthorBlocked: (pubkey) => this.isAuthorBlocked(pubkey),
+      onVideos: (payload, detail = {}) => {
+        const promise = this.refreshRecentFeed({
+          reason: detail?.reason,
+          fallbackVideos: payload,
+        });
+        if (!initialRefreshPromise) {
+          initialRefreshPromise = promise;
+        }
+      },
+    });
 
-      if (this.isAuthorBlocked(video.pubkey)) {
-        return false;
-      }
-
-      if (!accessControl.canAccess(video)) {
-        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.
-      this.videoSubscription.unsub();
-      this.videoSubscription = null;
+    if (initialRefreshPromise) {
+      await initialRefreshPromise;
+    } else if (!Array.isArray(videos) || videos.length === 0) {
+      await this.refreshRecentFeed({ reason: "initial", fallbackVideos: [] });
     }
 
-    if (this.videoList) {
-      // Always reset the cached signature before showing the loading state so the
-      // next render isn't skipped when the incoming payload matches the last
-      // successful render. Without this, the spinner could remain visible for
-      // returning users who already have the latest list cached.
-      this.lastRenderedVideoSignature = null;
-      this.videoList.innerHTML = getSidebarLoadingMarkup(
-        "Fetching recent videos…"
-      );
-    }
-
-    // The rest of your existing logic:
-    if (!this.videoSubscription) {
-
-      // Create a new subscription
-      this.videoSubscription = nostrClient.subscribeVideos(() => {
-        const updatedAll = nostrClient.getActiveVideos();
-
-        // Filter out blacklisted authors & blacklisted event IDs
-        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."
-        );
-      }
-    } else {
-      // Already subscribed: just show what's cached
-      const allCached = nostrClient.getActiveVideos();
-
-      const filteredCached = allCached.filter(shouldIncludeVideo);
-
-      this.renderVideoList(filteredCached);
+    this.videoSubscription = this.nostrService.getVideoSubscription() || null;
+    this.videosMap = this.nostrService.getVideosMap();
+    if (this.videoListView) {
+      this.videoListView.state.videosMap = this.videosMap;
     }
   }
 
   async loadOlderVideos(lastTimestamp) {
-    // 1) Use nostrClient to fetch older slices
-    const olderVideos = await nostrClient.fetchOlderVideos(lastTimestamp);
+    const olderVideos = await this.nostrService.loadOlderVideos(lastTimestamp, {
+      blacklistedEventIds: this.blacklistedEventIds,
+      isAuthorBlocked: (pubkey) => this.isAuthorBlocked(pubkey),
+    });
 
-    if (!olderVideos || olderVideos.length === 0) {
+    if (!Array.isArray(olderVideos) || olderVideos.length === 0) {
       this.showSuccess("No more older videos found.");
       return;
     }
 
-    // 2) Merge them into the client’s allEvents / activeMap
-    for (const v of olderVideos) {
-      nostrClient.allEvents.set(v.id, v);
-      // If it’s the newest version for its root, update activeMap
-      const rootKey = v.videoRootId || v.id;
-      // You can call getActiveKey(v) if you want to match your code’s approach.
-      // Then re-check if this one is newer than what’s stored, etc.
-    }
-
-    // 3) Re-render
-    const all = nostrClient.getActiveVideos();
-    this.renderVideoList(all);
+    await this.refreshRecentFeed({ reason: "older-fetch" });
   }
 
   /**
@@ -8402,11 +4020,11 @@ class bitvidApp {
   }
 
   getCachedUrlHealth(eventId, url) {
-    return readUrlHealthFromCache(eventId, url);
+    return readCachedUrlHealth(eventId, url);
   }
 
   storeUrlHealth(eventId, url, result, ttlMs) {
-    return writeUrlHealthToCache(eventId, url, result, ttlMs);
+    return persistUrlHealth(eventId, url, result, ttlMs);
   }
 
   updateUrlHealthBadge(badgeEl, state, videoId) {
@@ -8501,6 +4119,20 @@ class bitvidApp {
         "text-gray-300"
       );
     }
+
+    if (
+      videoId &&
+      this.videoListView &&
+      typeof this.videoListView.cacheUrlHealth === "function"
+    ) {
+      this.videoListView.cacheUrlHealth(videoId, {
+        status,
+        message,
+        lastCheckedAt: Number.isFinite(state?.lastCheckedAt)
+          ? state.lastCheckedAt
+          : undefined,
+      });
+    }
   }
 
   handleUrlHealthBadge({ video, url, badgeEl }) {
@@ -8568,7 +4200,7 @@ class bitvidApp {
 
         const ttlOverride =
           entry.status === "timeout" || entry.status === "unknown"
-            ? URL_HEALTH_TIMEOUT_RETRY_MS
+            ? urlHealthConstants.URL_HEALTH_TIMEOUT_RETRY_MS
             : undefined;
 
         return this.storeUrlHealth(eventId, trimmedUrl, entry, ttlOverride);
@@ -8598,899 +4230,99 @@ class bitvidApp {
       });
   }
 
-  async renderVideoList(videos) {
-    if (!this.videoList) return;
-
-    if (this._lastRenderedVideoListElement !== this.videoList) {
-      this.lastRenderedVideoSignature = null;
-      this._lastRenderedVideoListElement = this.videoList;
-    }
-
-    const dedupedVideos = this.dedupeVideosByRoot(videos);
-
-    const activePointerKeys = new Set();
-    dedupedVideos.forEach((video) => {
-      const pointerInfo = this.deriveVideoPointerInfo(video);
-      if (pointerInfo) {
-        activePointerKeys.add(pointerInfo.key);
-      }
-    });
-
-    const keysToRemove = [];
-    for (const [key, entry] of this.viewCountSubscriptions.entries()) {
-      if (!activePointerKeys.has(key)) {
-        keysToRemove.push(key);
-        continue;
-      }
-      if (entry && entry.elements instanceof Set) {
-        entry.elements.clear();
-      }
-    }
-
-    keysToRemove.forEach((key) => {
-      const entry = this.viewCountSubscriptions.get(key);
-      if (entry && entry.pointer && entry.token) {
-        try {
-          unsubscribeFromVideoViewCount(entry.pointer, entry.token);
-        } catch (error) {
-          console.warn(
-            `[viewCount] Failed to unsubscribe from stale pointer ${key}:`,
-            error
-          );
-        }
-      }
-      this.viewCountSubscriptions.delete(key);
-    });
-
-    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 (!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!
-        </p>`;
+  handleStreamHealthBadgeUpdate(detail) {
+    if (!detail || typeof detail !== "object") {
       return;
     }
 
-    // 2) Sort newest first
-    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 : "",
-      enableComments: video.enableComments === false ? false : true,
-    }));
-    const signature = JSON.stringify(signaturePayload);
-
-    if (signature === this.lastRenderedVideoSignature) {
+    const card = detail.card;
+    if (!(card instanceof HTMLElement)) {
       return;
     }
-    this.lastRenderedVideoSignature = signature;
 
-    const previouslyRenderedIds = new Set(this.renderedVideoIds);
-    this.renderedVideoIds.clear();
+    let videoId =
+      (card.dataset && card.dataset.videoId) ||
+      (typeof card.getAttribute === "function" ? card.getAttribute("data-video-id") : "") ||
+      "";
 
-    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] : "");
-    const canManageBlacklist = this.canCurrentUserManageBlacklist();
-
-    // 3) Build each card
-    dedupedVideos.forEach((video, index) => {
-      if (!video.id || !video.title) {
-        console.error("Video missing ID/title:", video);
-        return;
+    if (!videoId && typeof card.querySelector === "function") {
+      const fallback = card.querySelector("[data-video-id]");
+      if (fallback instanceof HTMLElement && fallback.dataset.videoId) {
+        videoId = fallback.dataset.videoId;
       }
+    }
 
-      authorSet.add(video.pubkey);
+    if (!videoId) {
+      return;
+    }
 
-      const nevent = window.NostrTools.nip19.neventEncode({ id: video.id });
-      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
-      let hasOlder = false;
-      if (canEdit && video.videoRootId) {
-        hasOlder = this.hasOlderVersion(video, fullAllEventsArray);
-      }
-
-      const revertButton = hasOlder
-        ? `
-          <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>
-        `
-        : "";
-
-      const gearMenu = canEdit
-        ? `
-          <div class="relative inline-block ml-3 overflow-visible">
-            <button
-              type="button"
-              class="inline-flex items-center p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              data-settings-dropdown="${index}"
-            >
-              <img
-                src="assets/svg/video-settings-gear.svg"
-                alt="Settings"
-                class="w-5 h-5"
-              />
-            </button>
-            <div
-              id="settingsDropdown-${index}"
-              class="hidden absolute right-0 bottom-full mb-2 w-32 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            >
-              <div class="py-1">
-                <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>
-                ${revertButton}
-                <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>
-              </div>
-            </div>
-          </div>
-        `
-        : "";
-
-      const blacklistMenuItem = canManageBlacklist
-        ? `
-                <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white" data-action="blacklist-author" data-author="${video.pubkey || ""}">
-                  Blacklist creator
-                </button>`
-        : "";
-
-      const pointerInfo = this.deriveVideoPointerInfo(video);
-      if (pointerInfo) {
-        this.persistWatchHistoryMetadataForVideo(video, pointerInfo);
-      }
-
-      const pointerKeyAttr = pointerInfo?.key
-        ? this.escapeHTML(pointerInfo.key)
-        : "";
-      const pointerTypeAttr =
-        pointerInfo?.pointer?.[0] === "a"
-          ? "a"
-          : pointerInfo?.pointer?.[0] === "e"
-          ? "e"
-          : "";
-      const pointerValueAttr = pointerInfo?.pointer?.[1]
-        ? this.escapeHTML(pointerInfo.pointer[1])
-        : "";
-      const pointerRelayAttr =
-        pointerInfo?.pointer?.length > 2 && pointerInfo.pointer[2]
-          ? this.escapeHTML(pointerInfo.pointer[2])
-          : "";
-      const relayAttr = pointerRelayAttr
-        ? ` data-pointer-relay="${pointerRelayAttr}"`
-        : "";
-      const removeHistoryMenuItem =
-        pointerKeyAttr && pointerTypeAttr && pointerValueAttr
-          ? `
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                  data-action="remove-history"
-                  data-pointer-key="${pointerKeyAttr}"
-                  data-pointer-type="${this.escapeHTML(pointerTypeAttr)}"
-                  data-pointer-value="${pointerValueAttr}"${relayAttr}
-                  data-reason="remove-item"
-                  title="Remove this entry from your encrypted history. Relay sync may take a moment."
-                  aria-label="Remove from history (updates encrypted history and may take a moment to sync to relays)"
-                >
-                  Remove from history
-                </button>`
-          : "";
-
-      const moreMenu = `
-          <div class="relative inline-block ml-1 overflow-visible" data-more-menu-wrapper="true">
-            <button
-              type="button"
-              class="inline-flex items-center justify-center w-10 h-10 p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              data-more-dropdown="${index}"
-              aria-haspopup="true"
-              aria-expanded="false"
-              aria-label="More options"
-            >
-              <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5 object-contain" />
-            </button>
-            <div
-              id="moreDropdown-${index}"
-              class="hidden absolute right-0 bottom-full mb-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-              role="menu"
-              data-more-menu="true"
-            >
-              <div class="py-1">
-                <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="open-channel" data-author="${video.pubkey || ""}">
-                  Open channel
-                </button>
-                <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="copy-link" data-event-id="${video.id || ""}">
-                  Copy link
-                </button>
-                ${removeHistoryMenuItem}
-                ${blacklistMenuItem}
-                <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white" data-action="block-author" data-author="${video.pubkey || ""}">
-                  Block creator
-                </button>
-                <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="report" data-event-id="${video.id || ""}">
-                  Report
-                </button>
-              </div>
-            </div>
-          </div>
-        `;
-
-      const cardControls = `
-          <div class="flex items-center">
-            ${moreMenu}${gearMenu}
-          </div>
-        `;
-
-      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 showDiscussionCount = video.enableComments !== false;
-      let discussionCountHtml = "";
-      if (showDiscussionCount) {
-        let initialDiscussionCount = null;
-        if (typeof video.discussionCount === "number") {
-          initialDiscussionCount = video.discussionCount;
-        } else if (typeof video.discussionCount === "string") {
-          const trimmedCount = video.discussionCount.trim();
-          if (trimmedCount) {
-            const parsed = Number.parseInt(trimmedCount, 10);
-            if (Number.isFinite(parsed)) {
-              initialDiscussionCount = parsed;
-            }
-          }
-        }
-
-        if (
-          initialDiscussionCount !== null &&
-          Number.isFinite(initialDiscussionCount) &&
-          initialDiscussionCount >= 0
-        ) {
-          const safeDiscussionCount = Math.floor(initialDiscussionCount);
-          discussionCountHtml = `
-            <div class="flex items-center text-xs text-gray-500 mt-3" data-discussion-count="${video.id}" data-count-state="ready">
-              <span data-discussion-count-value>${safeDiscussionCount.toLocaleString()}</span>
-              <span class="ml-1">notes</span>
-            </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 metadataPieces = [`<span>${timeAgo}</span>`];
-      if (pointerInfo) {
-        metadataPieces.push(
-          '<span class="mx-1 text-gray-600" aria-hidden="true">•</span>',
-          `<span class="view-count-text" data-view-count data-view-pointer="${this.escapeHTML(
-            pointerInfo.key
-          )}">– views</span>`
-        );
-      }
-      const metadataHtml = metadataPieces.join("");
-
-      const cardHtml = `
-        <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-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
-                ${thumbnailAttrLines.join("\n                ")}
-              />
-            </div>
-          </a>
-          <div class="p-4">
-            <!-- 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-video-id="${video.id}"
-              data-play-url=""
-              data-play-magnet=""
-              data-torrent-supported="${magnetSupported ? "true" : "false"}"
-            >
-              ${this.escapeHTML(video.title)}
-            </h3>
-            <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-3">
-                <div class="w-8 h-8 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center">
-                  <img
-                    class="author-pic"
-                    data-pubkey="${video.pubkey}"
-                    src="assets/svg/default-profile.svg"
-                    alt="Placeholder"
-                  />
-                </div>
-                <div class="min-w-0">
-                  <p
-                    class="text-sm text-gray-400 author-name"
-                    data-pubkey="${video.pubkey}"
-                  >
-                    Loading name...
-                  </p>
-                  <div class="flex items-center text-xs text-gray-500 mt-1">
-                    ${metadataHtml}
-                  </div>
-                </div>
-              </div>
-              ${cardControls}
-            </div>
-            ${connectionBadgesHtml}
-            ${discussionCountHtml}
-            ${torrentWarningHtml}
-          </div>
-        </div>
-      `;
-
-      const template = document.createElement("template");
-      template.innerHTML = cardHtml.trim();
-      const cardEl = template.content.firstElementChild;
-      if (cardEl) {
-        if (pointerInfo && pointerInfo.key) {
-          cardEl.dataset.pointerKey = pointerInfo.key;
-          const pointerType = pointerInfo.pointer?.[0];
-          if (pointerType) {
-            cardEl.dataset.pointerType = pointerType;
-          } else if (cardEl.dataset.pointerType) {
-            delete cardEl.dataset.pointerType;
-          }
-          const pointerValue = pointerInfo.pointer?.[1];
-          if (pointerValue) {
-            cardEl.dataset.pointerValue = pointerValue;
-          } else if (cardEl.dataset.pointerValue) {
-            delete cardEl.dataset.pointerValue;
-          }
-          const pointerRelay =
-            pointerInfo.pointer?.length > 2 ? pointerInfo.pointer[2] : "";
-          if (pointerRelay) {
-            cardEl.dataset.pointerRelay = pointerRelay;
-          } else if (cardEl.dataset.pointerRelay) {
-            delete cardEl.dataset.pointerRelay;
-          }
-        } else {
-          delete cardEl.dataset.pointerKey;
-          delete cardEl.dataset.pointerType;
-          delete cardEl.dataset.pointerValue;
-          if (cardEl.dataset.pointerRelay) {
-            delete cardEl.dataset.pointerRelay;
-          }
-        }
-
-        cardEl.dataset.ownerIsViewer = canEdit ? "true" : "false";
-        if (typeof video.pubkey === "string" && video.pubkey) {
-          cardEl.dataset.ownerPubkey = video.pubkey;
-        } else if (cardEl.dataset.ownerPubkey) {
-          delete cardEl.dataset.ownerPubkey;
-        }
-
-        if (trimmedUrl) {
-          cardEl.dataset.urlHealthState = "checking";
-          if (cardEl.dataset.urlHealthReason) {
-            delete cardEl.dataset.urlHealthReason;
-          }
-          cardEl.dataset.urlHealthEventId = video.id || "";
-          cardEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
-        } else {
-          cardEl.dataset.urlHealthState = "offline";
-          cardEl.dataset.urlHealthReason = "missing-source";
-          if (cardEl.dataset.urlHealthEventId) {
-            delete cardEl.dataset.urlHealthEventId;
-          }
-          if (cardEl.dataset.urlHealthUrl) {
-            delete cardEl.dataset.urlHealthUrl;
-          }
-        }
-        if (magnetProvided && magnetSupported) {
-          cardEl.dataset.streamHealthState = "checking";
-          if (cardEl.dataset.streamHealthReason) {
-            delete cardEl.dataset.streamHealthReason;
-          }
-        } else {
-          cardEl.dataset.streamHealthState = "unhealthy";
-          cardEl.dataset.streamHealthReason = magnetProvided
-            ? "unsupported"
-            : "missing-source";
-        }
-
-        if (pointerInfo) {
-          this.registerVideoViewCountElement(cardEl, pointerInfo);
-        }
-
-        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) {
-            badgeEl.dataset.urlHealthEventId = video.id || "";
-            badgeEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
-          }
-        } else {
-          const badgeEl = cardEl.querySelector("[data-url-health-state]");
-          if (badgeEl) {
-            if (badgeEl.dataset.urlHealthEventId) {
-              delete badgeEl.dataset.urlHealthEventId;
-            }
-            if (badgeEl.dataset.urlHealthUrl) {
-              delete badgeEl.dataset.urlHealthUrl;
-            }
-          }
-        }
-      }
-      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);
-    attachUrlHealthBadges(this.videoList, ({ badgeEl, url, eventId }) => {
-      const video = this.videosMap.get(eventId) || { id: eventId };
-      this.handleUrlHealthBadge({ video, url, badgeEl });
-    });
-
-    // 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);
-    this.attachMoreMenuHandlers(this.videoList);
-
-    // Lazy-load images
-    const lazyEls = this.videoList.querySelectorAll("[data-lazy]");
-    lazyEls.forEach((el) => this.mediaLoader.observe(el));
-
-    // GEAR MENU / button event listeners...
-    const gearButtons = this.videoList.querySelectorAll(
-      "[data-settings-dropdown]"
-    );
-    gearButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        const index = button.getAttribute("data-settings-dropdown");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
-        if (dropdown) {
-          dropdown.classList.toggle("hidden");
-        }
+    if (this.videoListView && typeof this.videoListView.cacheStreamHealth === "function") {
+      this.videoListView.cacheStreamHealth(videoId, {
+        state: detail.state,
+        peers: detail.peers,
+        reason: detail.reason,
+        checkedAt: detail.checkedAt,
+        text: detail.text,
+        tooltip: detail.tooltip,
+        role: detail.role,
+        ariaLive: detail.ariaLive,
       });
-    });
-
-    // Edit button
-    const editButtons = this.videoList.querySelectorAll("[data-edit-index]");
-    editButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        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({
-          eventId,
-          index: Number.isNaN(index) ? null : index,
-        });
-      });
-    });
-
-    // Revert button
-    const revertButtons = this.videoList.querySelectorAll(
-      "[data-revert-index]"
-    );
-    revertButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        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({
-          eventId,
-          index: Number.isNaN(index) ? null : index,
-        });
-      });
-    });
-
-    // Delete All button
-    const deleteAllButtons = this.videoList.querySelectorAll(
-      "[data-delete-all-index]"
-    );
-    deleteAllButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        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({
-          eventId,
-          index: Number.isNaN(index) ? null : index,
-        });
-      });
-    });
-
-    // 2) After building cards, do one batch profile fetch
-    this.batchFetchProfiles(authorSet);
-
-    // === NEW: attach click listeners to .author-pic and .author-name
-    const authorPics = this.videoList.querySelectorAll(".author-pic");
-    authorPics.forEach((pic) => {
-      pic.style.cursor = "pointer";
-      pic.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation(); // avoids playing the video
-        const pubkey = pic.getAttribute("data-pubkey");
-        this.goToProfile(pubkey);
-      });
-    });
-
-    const authorNames = this.videoList.querySelectorAll(".author-name");
-    authorNames.forEach((nameEl) => {
-      nameEl.style.cursor = "pointer";
-      nameEl.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation(); // avoids playing the video
-        const pubkey = nameEl.getAttribute("data-pubkey");
-        this.goToProfile(pubkey);
-      });
-    });
-
-    this.refreshVideoDiscussionCounts(dedupedVideos);
-    this.pruneDetachedViewCountElements();
+    }
   }
 
-  refreshVideoDiscussionCounts(videos = []) {
-    if (
-      !Array.isArray(videos) ||
-      !videos.length ||
-      !this.videoList ||
-      !nostrClient?.pool
-    ) {
+  async renderVideoList(payload) {
+    if (!this.videoListView) {
       return;
     }
 
-    const eligible = videos
-      .filter(
-        (video) =>
-          video &&
-          typeof video.id === "string" &&
-          video.id &&
-          video.enableComments !== false
-      )
-      .slice(0, MAX_DISCUSSION_COUNT_VIDEOS);
+    const container = this.mountVideoListView();
+    if (!container) {
+      return;
+    }
 
-    eligible.forEach((video) => {
-      const container = this.videoList.querySelector(
-        `[data-discussion-count="${video.id}"]`
-      );
-      if (!container) {
-        return;
+    let videos = [];
+    let metadata = null;
+
+    if (Array.isArray(payload)) {
+      videos = payload;
+    } else if (payload && typeof payload === "object") {
+      if (Array.isArray(payload.videos)) {
+        videos = payload.videos;
       }
-
-      const cached = this.videoDiscussionCountCache.get(video.id);
-      if (typeof cached === "number") {
-        this.updateDiscussionCountElement(container, cached);
-        return;
+      if (payload.metadata && typeof payload.metadata === "object") {
+        metadata = { ...payload.metadata };
       }
+    }
 
-      const filters = this.buildDiscussionCountFilters(video);
-      if (!filters.length) {
-        this.markDiscussionCountError(container, { unsupported: true });
-        return;
-      }
+    this.latestFeedMetadata = metadata;
+    if (this.videoListView) {
+      this.videoListView.state.feedMetadata = metadata;
+    }
 
-      const existingPromise = this.inFlightDiscussionCounts.get(video.id);
-      if (existingPromise) {
-        this.setDiscussionCountPending(container);
-        return;
-      }
-
-      this.setDiscussionCountPending(container);
-
-      const request = nostrClient
-        .countEventsAcrossRelays(filters)
-        .then((result) => {
-          const perRelay = Array.isArray(result?.perRelay)
-            ? result.perRelay.filter((entry) => entry && entry.ok)
-            : [];
-
-          if (!perRelay.length) {
-            this.markDiscussionCountError(container, { unsupported: true });
-            return result;
-          }
-
-          const total = Number(result?.total);
-          const normalized =
-            Number.isFinite(total) && total >= 0 ? total : 0;
-          this.videoDiscussionCountCache.set(video.id, normalized);
-          this.updateDiscussionCountElement(container, normalized);
-          return result;
-        })
-        .catch((error) => {
-          if (isDevMode) {
-            console.warn(
-              `[counts] Failed to fetch discussion count for ${video.id}:`,
-              error
-            );
-          }
-          this.markDiscussionCountError(container);
-          throw error;
-        })
-        .finally(() => {
-          this.inFlightDiscussionCounts.delete(video.id);
-        });
-
-      this.inFlightDiscussionCounts.set(video.id, request);
-    });
+    this.videoListView.render(videos, metadata);
   }
 
-  buildDiscussionCountFilters(video) {
-    if (!video || typeof video !== "object") {
-      return [];
+  refreshVideoDiscussionCounts(videos = [], options = {}) {
+    if (!this.discussionCountService) {
+      return;
     }
 
-    const filters = [];
-    const eventId =
-      typeof video.id === "string" ? video.id.trim() : "";
-    if (eventId) {
-      filters.push({ kinds: [1], "#e": [eventId] });
-    }
+    const { videoListRoot = this.videoList || null } = options;
 
-    const address = this.getVideoAddressPointer(video);
-    if (address) {
-      filters.push({ kinds: [1], "#a": [address] });
-    }
-
-    return filters;
+    this.discussionCountService.refreshCounts(videos, {
+      videoListRoot,
+      nostrClient,
+    });
   }
 
   getVideoAddressPointer(video) {
+    if (
+      this.discussionCountService &&
+      typeof this.discussionCountService.getVideoAddressPointer === "function"
+    ) {
+      return this.discussionCountService.getVideoAddressPointer(video);
+    }
+
     if (!video || typeof video !== "object") {
       return "";
     }
@@ -9528,50 +4360,6 @@ class bitvidApp {
     return `${kind}:${pubkey}:${identifier}`;
   }
 
-  setDiscussionCountPending(element) {
-    if (!element) {
-      return;
-    }
-    element.dataset.countState = "pending";
-    const valueEl = element.querySelector("[data-discussion-count-value]");
-    if (valueEl) {
-      valueEl.textContent = "…";
-    }
-    element.removeAttribute("title");
-  }
-
-  updateDiscussionCountElement(element, count) {
-    if (!element) {
-      return;
-    }
-    const valueEl = element.querySelector("[data-discussion-count-value]");
-    if (!valueEl) {
-      return;
-    }
-    const numeric = Number(count);
-    const safeValue =
-      Number.isFinite(numeric) && numeric >= 0 ? Math.floor(numeric) : 0;
-    element.dataset.countState = "ready";
-    valueEl.textContent = safeValue.toLocaleString();
-    element.removeAttribute("title");
-  }
-
-  markDiscussionCountError(element, { unsupported = false } = {}) {
-    if (!element) {
-      return;
-    }
-    const valueEl = element.querySelector("[data-discussion-count-value]");
-    if (valueEl) {
-      valueEl.textContent = "—";
-    }
-    element.dataset.countState = unsupported ? "unsupported" : "error";
-    if (unsupported) {
-      element.title = "Relay does not support NIP-45 COUNT queries.";
-    } else {
-      element.removeAttribute("title");
-    }
-  }
-
   bindThumbnailFallbacks(container) {
     if (!container || typeof container.querySelectorAll !== "function") {
       return;
@@ -9655,364 +4443,401 @@ class bitvidApp {
   }
 
   ensureGlobalMoreMenuHandlers() {
-    if (this.moreMenuGlobalHandlerBound) {
-      return;
+    if (this.moreMenuController) {
+      this.moreMenuController.ensureGlobalMoreMenuHandlers();
     }
-
-    this.moreMenuGlobalHandlerBound = true;
-
-    this.boundMoreMenuDocumentClick = (event) => {
-      const target = event.target;
-      if (
-        target instanceof HTMLElement &&
-        (target.closest("[data-more-menu-wrapper]") ||
-          target.closest("[data-more-menu]"))
-      ) {
-        return;
-      }
-      this.closeAllMoreMenus();
-    };
-
-    this.boundMoreMenuDocumentKeydown = (event) => {
-      if (event.key === "Escape") {
-        this.closeAllMoreMenus();
-      }
-    };
-
-    document.addEventListener("click", this.boundMoreMenuDocumentClick);
-    document.addEventListener("keydown", this.boundMoreMenuDocumentKeydown);
   }
 
   closeAllMoreMenus() {
-    const menus = document.querySelectorAll("[data-more-menu]");
-    menus.forEach((menu) => {
-      if (menu instanceof HTMLElement) {
-        menu.classList.add("hidden");
-      }
-    });
-
-    const buttons = document.querySelectorAll("[data-more-dropdown]");
-    buttons.forEach((btn) => {
-      if (btn instanceof HTMLElement) {
-        btn.setAttribute("aria-expanded", "false");
-      }
-    });
+    if (this.moreMenuController) {
+      this.moreMenuController.closeAllMoreMenus();
+    }
   }
 
   attachMoreMenuHandlers(container) {
-    if (!container || typeof container.querySelectorAll !== "function") {
-      return;
+    if (this.moreMenuController) {
+      this.moreMenuController.attachMoreMenuHandlers(container);
     }
-
-    const buttons = container.querySelectorAll("[data-more-dropdown]");
-    if (!buttons.length) {
-      return;
-    }
-
-    this.ensureGlobalMoreMenuHandlers();
-
-    buttons.forEach((button) => {
-      if (!(button instanceof HTMLElement)) {
-        return;
-      }
-      if (button.dataset.moreMenuToggleBound === "true") {
-        return;
-      }
-      button.dataset.moreMenuToggleBound = "true";
-      button.setAttribute("aria-expanded", "false");
-
-      button.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const key = button.getAttribute("data-more-dropdown") || "";
-        const dropdown = document.getElementById(`moreDropdown-${key}`);
-        if (!(dropdown instanceof HTMLElement)) {
-          return;
-        }
-
-        const willOpen = dropdown.classList.contains("hidden");
-        this.closeAllMoreMenus();
-
-        if (willOpen) {
-          dropdown.classList.remove("hidden");
-          button.setAttribute("aria-expanded", "true");
-        }
-      });
-    });
-
-    const actionButtons = container.querySelectorAll(
-      "[data-more-menu] button[data-action]"
-    );
-    actionButtons.forEach((button) => {
-      if (!(button instanceof HTMLElement)) {
-        return;
-      }
-      if (button.dataset.moreMenuActionBound === "true") {
-        return;
-      }
-      button.dataset.moreMenuActionBound = "true";
-
-      button.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const { action } = button.dataset;
-        this.handleMoreMenuAction(action, button.dataset);
-        this.closeAllMoreMenus();
-      });
-    });
   }
 
   syncModalMoreMenuData() {
-    if (!this.modalMoreMenu) {
-      return;
+    if (this.moreMenuController) {
+      this.moreMenuController.syncModalMoreMenuData();
+    }
+  }
+
+  derivePointerFromDataset(dataset = {}, context = "") {
+    const type =
+      typeof dataset.pointerType === "string" ? dataset.pointerType.trim() : "";
+    const value =
+      typeof dataset.pointerValue === "string" ? dataset.pointerValue.trim() : "";
+    const relay =
+      typeof dataset.pointerRelay === "string" ? dataset.pointerRelay.trim() : "";
+
+    if (type && value) {
+      return relay ? [type, value, relay] : [type, value];
     }
 
-    const buttons = this.modalMoreMenu.querySelectorAll("button[data-action]");
-    buttons.forEach((button) => {
-      if (!(button instanceof HTMLElement)) {
-        return;
-      }
+    if (
+      context === "modal" &&
+      Array.isArray(this.currentVideoPointer) &&
+      this.currentVideoPointer.length >= 2
+    ) {
+      return this.currentVideoPointer;
+    }
 
-      const action = button.dataset.action || "";
-      if (action === "blacklist-author") {
-        const canShow = this.canCurrentUserManageBlacklist();
-        if (canShow && this.currentVideo && this.currentVideo.pubkey) {
-          button.dataset.author = this.currentVideo.pubkey;
-          button.classList.remove("hidden");
-          button.setAttribute("aria-hidden", "false");
-        } else {
-          delete button.dataset.author;
-          button.classList.add("hidden");
-          button.setAttribute("aria-hidden", "true");
-        }
-        return;
-      }
+    if (
+      context === "modal" &&
+      Array.isArray(this.currentVideo?.pointer) &&
+      this.currentVideo.pointer.length >= 2
+    ) {
+      return this.currentVideo.pointer;
+    }
 
-      if (action === "open-channel" || action === "block-author") {
-        if (this.currentVideo && this.currentVideo.pubkey) {
-          button.dataset.author = this.currentVideo.pubkey;
-        } else {
-          delete button.dataset.author;
-        }
-      }
-
-      if (action === "copy-link" || action === "report") {
-        if (this.currentVideo && this.currentVideo.id) {
-          button.dataset.eventId = this.currentVideo.id;
-        } else {
-          delete button.dataset.eventId;
-        }
-      }
-    });
+    return null;
   }
 
   async handleMoreMenuAction(action, dataset = {}) {
-    const normalized = typeof action === "string" ? action.trim() : "";
-    const context = dataset.context || "";
+    if (!this.moreMenuController) {
+      return;
+    }
 
-    switch (normalized) {
-      case "open-channel": {
-        if (context === "modal") {
-          this.openCreatorChannel();
-          break;
-        }
+    return this.moreMenuController.handleMoreMenuAction(action, dataset);
+  }
 
-        const author =
-          dataset.author || (this.currentVideo ? this.currentVideo.pubkey : "");
-        if (author) {
-          this.goToProfile(author);
-        } else {
-          this.showError("No creator info available.");
-        }
-        break;
+  async handleRepostAction(dataset = {}) {
+    const context = typeof dataset.context === "string" ? dataset.context : "";
+    const explicitEventId =
+      typeof dataset.eventId === "string" && dataset.eventId.trim()
+        ? dataset.eventId.trim()
+        : "";
+    const fallbackEventId =
+      context === "modal" && this.currentVideo?.id ? this.currentVideo.id : "";
+    const targetEventId = explicitEventId || fallbackEventId;
+
+    if (!targetEventId) {
+      this.showError("No event is available to repost.");
+      return;
+    }
+
+    const pointer = this.derivePointerFromDataset(dataset, context);
+
+    let author = typeof dataset.author === "string" ? dataset.author.trim() : "";
+    if (!author && context === "modal" && this.currentVideo?.pubkey) {
+      author = this.currentVideo.pubkey;
+    }
+
+    const rawKindValue = (() => {
+      if (typeof dataset.kind === "string" && dataset.kind.trim()) {
+        const parsed = Number.parseInt(dataset.kind.trim(), 10);
+        return Number.isFinite(parsed) ? parsed : null;
       }
-      case "copy-link": {
-        const eventId =
-          dataset.eventId ||
-          (context === "modal" && this.currentVideo ? this.currentVideo.id : "");
-        if (!eventId) {
-          this.showError("Could not generate link.");
-          break;
-        }
-        const shareUrl = this.buildShareUrlFromEventId(eventId);
-        if (!shareUrl) {
-          this.showError("Could not generate link.");
-          break;
-        }
-        navigator.clipboard
-          .writeText(shareUrl)
-          .then(() => this.showSuccess("Video link copied to clipboard!"))
-          .catch(() => this.showError("Failed to copy the link."));
-        break;
+      if (Number.isFinite(dataset.kind)) {
+        return Number(dataset.kind);
       }
-      case "remove-history": {
-        await this.handleRemoveHistoryAction(dataset);
-        break;
+      if (Number.isFinite(this.currentVideo?.kind)) {
+        return Number(this.currentVideo.kind);
       }
-      case "copy-npub": {
-        const explicitNpub =
-          typeof dataset.npub === "string" && dataset.npub.trim()
-            ? dataset.npub.trim()
-            : "";
-        const authorCandidate = dataset.author || "";
-        const fallbackNpub = this.safeEncodeNpub(authorCandidate);
-        const valueToCopy = explicitNpub || fallbackNpub;
+      return null;
+    })();
 
-        if (!valueToCopy) {
-          this.showError("No npub available to copy.");
-          break;
-        }
+    const options = {
+      pointer,
+      pointerType: dataset.pointerType,
+      pointerValue: dataset.pointerValue,
+      pointerRelay: dataset.pointerRelay,
+      authorPubkey: author,
+    };
 
-        try {
-          await navigator.clipboard.writeText(valueToCopy);
-          this.showSuccess("Channel npub copied to clipboard!");
-        } catch (error) {
-          console.error("Failed to copy npub:", error);
-          this.showError("Failed to copy the npub.");
-        }
-        break;
-      }
-      case "blacklist-author": {
-        const actorNpub = this.getCurrentUserNpub();
-        if (!actorNpub) {
-          this.showError("Please login as a moderator to manage the blacklist.");
-          break;
-        }
+    if (Number.isFinite(rawKindValue)) {
+      options.kind = Math.floor(rawKindValue);
+    }
 
-        try {
-          await accessControl.ensureReady();
-        } catch (error) {
-          console.warn("Failed to refresh moderation state before blacklisting:", error);
-        }
+    try {
+      const result = await nostrClient.repostEvent(targetEventId, options);
 
-        if (!accessControl.canEditAdminLists(actorNpub)) {
-          this.showError("Only moderators can manage the blacklist.");
-          break;
-        }
-
-        let author = dataset.author || "";
-        if (!author && context === "modal" && this.currentVideo?.pubkey) {
-          author = this.currentVideo.pubkey;
-        }
-        if (!author && this.currentVideo?.pubkey) {
-          author = this.currentVideo.pubkey;
-        }
-
-        const explicitNpub =
-          typeof dataset.npub === "string" && dataset.npub.trim()
-            ? dataset.npub.trim()
-            : "";
-        const targetNpub = explicitNpub || this.safeEncodeNpub(author);
-
-        if (!targetNpub) {
-          this.showError("Unable to determine the creator npub.");
-          break;
-        }
-
-        try {
-          const result = await accessControl.addToBlacklist(
-            actorNpub,
-            targetNpub
-          );
-
-          if (result?.ok) {
-            this.showSuccess("Creator added to the blacklist.");
-          } else {
-            const code = result?.error || "unknown";
-            switch (code) {
-              case "self":
-                this.showError("You cannot blacklist yourself.");
-                break;
-              case "immutable":
-                this.showError(
-                  "Moderators cannot blacklist the super admin or fellow moderators."
-                );
-                break;
-              case "invalid npub":
-                this.showError("Unable to blacklist this creator.");
-                break;
-              case "forbidden":
-                this.showError("Only moderators can manage the blacklist.");
-                break;
-              default:
-                this.showError(
-                  "Failed to update the blacklist. Please try again."
-                );
-                break;
-            }
-          }
-        } catch (error) {
-          console.error("Failed to add creator to blacklist:", error);
-          this.showError("Failed to update the blacklist. Please try again.");
-        }
-        break;
-      }
-      case "block-author": {
-        if (!this.pubkey) {
-          this.showError("Please login to manage your block list.");
-          break;
-        }
-
-        const authorCandidate =
-          dataset.author ||
-          (this.currentVideo && this.currentVideo.pubkey) ||
-          "";
-
-        const trimmed =
-          typeof authorCandidate === "string" ? authorCandidate.trim() : "";
-        if (!trimmed) {
-          this.showError("Unable to determine the creator to block.");
-          break;
-        }
-
-        let normalizedHex = "";
-        if (trimmed.startsWith("npub1")) {
-          normalizedHex = this.safeDecodeNpub(trimmed) || "";
-        } else if (/^[0-9a-f]{64}$/i.test(trimmed)) {
-          normalizedHex = trimmed.toLowerCase();
-        }
-
-        if (!normalizedHex) {
-          this.showError("Unable to determine the creator to block.");
-          break;
-        }
-
-        if (normalizedHex === this.pubkey) {
-          this.showError("You cannot block yourself.");
-          break;
-        }
-
-        try {
-          await userBlocks.ensureLoaded(this.pubkey);
-
-          if (userBlocks.isBlocked(normalizedHex)) {
-            this.showSuccess("You already blocked this creator.");
-          } else {
-            await userBlocks.addBlock(normalizedHex, this.pubkey);
-            this.showSuccess(
-              "Creator blocked. You won't see their videos anymore."
+      if (!result?.ok) {
+        const code = result?.error || "repost-failed";
+        switch (code) {
+          case "invalid-event-id":
+            this.showError("No event is available to repost.");
+            break;
+          case "missing-actor":
+            this.showError(
+              "Cannot sign the repost right now. Please refresh and try again.",
             );
-          }
-
-          this.populateBlockedList();
-          await this.loadVideos();
-        } catch (error) {
-          console.error("Failed to update personal block list:", error);
-          const message =
-            error?.code === "nip04-missing"
-              ? "Your Nostr extension must support NIP-04 to manage private lists."
-              : "Failed to update your block list. Please try again.";
-          this.showError(message);
+            break;
+          case "pool-unavailable":
+            this.showError("Cannot reach relays right now. Please try again later.");
+            break;
+          case "publish-rejected":
+            this.showError("No relay accepted the repost attempt.");
+            break;
+          case "signing-failed":
+            this.showError("Failed to sign the repost. Please try again.");
+            break;
+          default:
+            this.showError("Failed to repost the video. Please try again later.");
+            break;
         }
-        break;
+        return;
       }
-      case "report": {
-        this.showSuccess("Reporting coming soon.");
-        break;
+
+      const acceptedCount = Array.isArray(result.summary?.accepted)
+        ? result.summary.accepted.length
+        : 0;
+      const relayCount =
+        acceptedCount > 0
+          ? acceptedCount
+          : Array.isArray(result.relays)
+          ? result.relays.length
+          : acceptedCount;
+
+      const fragments = [];
+      if (relayCount > 0) {
+        fragments.push(
+          `Reposted to ${relayCount} relay${relayCount === 1 ? "" : "s"}.`,
+        );
+      } else {
+        fragments.push("Reposted.");
       }
-      default:
-        break;
+
+      if (result.sessionActor) {
+        fragments.push("Boost as session user.");
+      }
+
+      this.showSuccess(fragments.join(" ").trim());
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[app] Repost action failed:", error);
+      }
+      this.showError("Failed to repost the video. Please try again later.");
+    }
+  }
+
+  async handleMirrorAction(dataset = {}) {
+    const context = typeof dataset.context === "string" ? dataset.context : "";
+    const explicitEventId =
+      typeof dataset.eventId === "string" && dataset.eventId.trim()
+        ? dataset.eventId.trim()
+        : "";
+    const fallbackEventId =
+      context === "modal" && this.currentVideo?.id ? this.currentVideo.id : "";
+    const targetEventId = explicitEventId || fallbackEventId;
+
+    if (!targetEventId) {
+      this.showError("No event is available to mirror.");
+      return;
+    }
+
+    const explicitUrl =
+      typeof dataset.url === "string" && dataset.url.trim() ? dataset.url.trim() : "";
+    const fallbackUrl =
+      context === "modal" && typeof this.currentVideo?.url === "string"
+        ? this.currentVideo.url.trim()
+        : "";
+    const targetUrl = explicitUrl || fallbackUrl;
+
+    if (!targetUrl) {
+      this.showError("This video does not expose a hosted URL to mirror.");
+      return;
+    }
+
+    const rawMagnet =
+      typeof dataset.magnet === "string" && dataset.magnet.trim()
+        ? dataset.magnet.trim()
+        : "";
+    const fallbackMagnet =
+      context === "modal"
+        ? (this.currentVideo?.magnet || this.currentVideo?.originalMagnet || "")
+        : "";
+    const magnet = rawMagnet || fallbackMagnet;
+
+    const thumbnail =
+      typeof dataset.thumbnail === "string" && dataset.thumbnail.trim()
+        ? dataset.thumbnail.trim()
+        : context === "modal" && typeof this.currentVideo?.thumbnail === "string"
+        ? this.currentVideo.thumbnail.trim()
+        : "";
+
+    const description =
+      typeof dataset.description === "string" && dataset.description.trim()
+        ? dataset.description.trim()
+        : context === "modal" && typeof this.currentVideo?.description === "string"
+        ? this.currentVideo.description.trim()
+        : "";
+
+    const title =
+      typeof dataset.title === "string" && dataset.title.trim()
+        ? dataset.title.trim()
+        : context === "modal" && typeof this.currentVideo?.title === "string"
+        ? this.currentVideo.title.trim()
+        : "";
+
+    const datasetPrivate =
+      dataset.isPrivate === "true" || dataset.isPrivate === true ? true : false;
+    const fallbackPrivate = context === "modal" && this.currentVideo?.isPrivate === true;
+    const isPrivate = datasetPrivate || fallbackPrivate;
+
+    if (isPrivate) {
+      this.showError("Mirroring is unavailable for private videos.");
+      return;
+    }
+
+    const options = {
+      url: targetUrl,
+      magnet,
+      thumbnail,
+      description,
+      title,
+      isPrivate,
+    };
+
+    try {
+      const result = await nostrClient.mirrorVideoEvent(targetEventId, options);
+
+      if (!result?.ok) {
+        const code = result?.error || "mirror-failed";
+        switch (code) {
+          case "invalid-event-id":
+            this.showError("No event is available to mirror.");
+            break;
+          case "missing-url":
+            this.showError("This video does not expose a hosted URL to mirror.");
+            break;
+          case "missing-actor":
+            this.showError(
+              "Cannot sign the mirror right now. Please refresh and try again.",
+            );
+            break;
+          case "pool-unavailable":
+            this.showError("Cannot reach relays right now. Please try again later.");
+            break;
+          case "publish-rejected":
+            this.showError("No relay accepted the mirror attempt.");
+            break;
+          case "signing-failed":
+            this.showError("Failed to sign the mirror. Please try again.");
+            break;
+          default:
+            this.showError("Failed to mirror the video. Please try again later.");
+            break;
+        }
+        return;
+      }
+
+      const acceptedCount = Array.isArray(result.summary?.accepted)
+        ? result.summary.accepted.length
+        : 0;
+      const relayCount =
+        acceptedCount > 0
+          ? acceptedCount
+          : Array.isArray(result.relays)
+          ? result.relays.length
+          : acceptedCount;
+
+      const fragments = [];
+      if (relayCount > 0) {
+        fragments.push(
+          `Mirrored to ${relayCount} relay${relayCount === 1 ? "" : "s"}.`,
+        );
+      } else {
+        fragments.push("Mirrored.");
+      }
+
+      if (result.sessionActor) {
+        fragments.push("Boost as session user.");
+      }
+
+      this.showSuccess(fragments.join(" ").trim());
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[app] Mirror action failed:", error);
+      }
+      this.showError("Failed to mirror the video. Please try again later.");
+    }
+  }
+
+  async handleEnsurePresenceAction(dataset = {}) {
+    const context = typeof dataset.context === "string" ? dataset.context : "";
+    const explicitEventId =
+      typeof dataset.eventId === "string" && dataset.eventId.trim()
+        ? dataset.eventId.trim()
+        : "";
+    const fallbackEventId =
+      context === "modal" && this.currentVideo?.id ? this.currentVideo.id : "";
+    const targetEventId = explicitEventId || fallbackEventId;
+
+    if (!targetEventId) {
+      this.showError("No event is available to rebroadcast.");
+      return;
+    }
+
+    const explicitPubkey =
+      typeof dataset.pubkey === "string" && dataset.pubkey.trim()
+        ? dataset.pubkey.trim()
+        : "";
+    const datasetAuthor =
+      typeof dataset.author === "string" && dataset.author.trim()
+        ? dataset.author.trim()
+        : "";
+    const fallbackPubkey =
+      context === "modal" && typeof this.currentVideo?.pubkey === "string"
+        ? this.currentVideo.pubkey
+        : datasetAuthor;
+    const targetPubkey = explicitPubkey || fallbackPubkey || "";
+
+    try {
+      const result = await nostrClient.rebroadcastEvent(targetEventId, {
+        pubkey: targetPubkey,
+      });
+
+      if (result?.throttled) {
+        const remainingMs = Math.max(0, Number(result?.cooldown?.remainingMs) || 0);
+        const remainingSeconds = Math.ceil(remainingMs / 1000);
+        const message =
+          remainingSeconds > 0
+            ? `Rebroadcast is cooling down. Try again in ${remainingSeconds}s.`
+            : "Rebroadcast is cooling down. Try again soon.";
+        this.showStatus(message);
+        if (typeof window !== "undefined" && typeof window.setTimeout === "function") {
+          window.setTimeout(() => {
+            this.showStatus("");
+          }, 5000);
+        }
+        return;
+      }
+
+      if (!result?.ok) {
+        const code = result?.error || "rebroadcast-failed";
+        switch (code) {
+          case "event-not-found":
+            this.showError("Original event payload is unavailable. Reload and try again.");
+            break;
+          case "publish-rejected":
+            this.showError("No relay accepted the rebroadcast attempt.");
+            break;
+          case "pool-unavailable":
+            this.showError("Cannot reach relays right now. Please try again later.");
+            break;
+          default:
+            this.showError("Failed to rebroadcast. Please try again later.");
+            break;
+        }
+        return;
+      }
+
+      if (result?.alreadyPresent) {
+        this.showSuccess("Relays already have this revision.");
+        return;
+      }
+
+      this.showSuccess("Rebroadcast requested across relays.");
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[app] Rebroadcast action failed:", error);
+      }
+      this.showError("Failed to rebroadcast. Please try again later.");
     }
   }
 
@@ -10047,41 +4872,26 @@ class bitvidApp {
     console.log("[DEBUG] torrent.ready =", torrent.ready);
 
     // Use "Complete" vs. "Downloading" as the textual status.
-    if (this.modalStatus) {
+    if (this.videoModal) {
       const fullyDownloaded = torrent.progress >= 1;
-      this.modalStatus.textContent = fullyDownloaded
-        ? "Complete"
-        : "Downloading";
-    }
+      this.videoModal.updateStatus(fullyDownloaded ? "Complete" : "Downloading");
 
-    // Update the progress bar
-    if (this.modalProgress) {
       const percent = (torrent.progress * 100).toFixed(2);
-      this.modalProgress.style.width = `${percent}%`;
-    }
+      this.videoModal.updateProgress(`${percent}%`);
+      this.videoModal.updatePeers(`Peers: ${torrent.numPeers}`);
 
-    // Update peers count
-    if (this.modalPeers) {
-      this.modalPeers.textContent = `Peers: ${torrent.numPeers}`;
-    }
-
-    // Update speed in KB/s
-    if (this.modalSpeed) {
       const kb = (torrent.downloadSpeed / 1024).toFixed(2);
-      this.modalSpeed.textContent = `${kb} KB/s`;
-    }
+      this.videoModal.updateSpeed(`${kb} KB/s`);
 
-    // Update downloaded / total
-    if (this.modalDownloaded) {
       const downloadedMb = (torrent.downloaded / (1024 * 1024)).toFixed(2);
       const lengthMb = (torrent.length / (1024 * 1024)).toFixed(2);
-      this.modalDownloaded.textContent = `${downloadedMb} MB / ${lengthMb} MB`;
-    }
+      this.videoModal.updateDownloaded(
+        `${downloadedMb} MB / ${lengthMb} MB`
+      );
 
-    // If you want to show a different text at 100% or if "ready"
-    // you can do it here:
-    if (torrent.ready && this.modalStatus) {
-      this.modalStatus.textContent = "Ready to play";
+      if (torrent.ready) {
+        this.videoModal.updateStatus("Ready to play");
+      }
     }
   }
 
@@ -10199,10 +5009,51 @@ class bitvidApp {
   /**
    * Handle "Edit Video" from gear menu.
    */
+  async handleEditModalSubmit(event) {
+    const detail = event?.detail || {};
+    const { originalEvent, updatedData } = detail;
+    if (!originalEvent || !updatedData) {
+      return;
+    }
+
+    if (!this.pubkey) {
+      this.showError("Please login to edit videos.");
+      if (this.editModal?.setSubmitState) {
+        this.editModal.setSubmitState({ pending: false });
+      }
+      return;
+    }
+
+    try {
+      await this.nostrService.handleEditVideoSubmit({
+        originalEvent,
+        updatedData,
+        pubkey: this.pubkey,
+      });
+      await this.loadVideos();
+      this.videosMap.clear();
+      this.showSuccess("Video updated successfully!");
+      if (this.editModal?.setSubmitState) {
+        this.editModal.setSubmitState({ pending: false });
+      }
+      this.editModal.close();
+      this.forceRefreshAllProfiles();
+    } catch (error) {
+      console.error("Failed to edit video:", error);
+      this.showError("Failed to edit video. Please try again.");
+      if (this.editModal?.setSubmitState) {
+        this.editModal.setSubmitState({ pending: false });
+      }
+    }
+  }
+
   async handleEditVideo(target) {
     try {
       const normalizedTarget = this.normalizeActionTarget(target);
-      const latestVideos = await nostrClient.fetchVideos();
+      const latestVideos = await this.nostrService.fetchVideos({
+        blacklistedEventIds: this.blacklistedEventIds,
+        isAuthorBlocked: (pubkey) => this.isAuthorBlocked(pubkey),
+      });
       const video = await this.resolveVideoActionTarget({
         ...normalizedTarget,
         preloadedList: latestVideos,
@@ -10220,17 +5071,20 @@ class bitvidApp {
         return;
       }
 
-      if (!this.editVideoModal) {
-        await this.initEditVideoModal();
-      }
-
-      if (!this.editVideoModal) {
-        this.showError("Edit modal is not available right now.");
+      try {
+        await this.editModal.load();
+      } catch (error) {
+        console.error("Failed to load edit modal:", error);
+        this.showError(`Failed to initialize edit modal: ${error.message}`);
         return;
       }
 
-      this.populateEditVideoForm(video);
-      this.showEditVideoModal();
+      try {
+        await this.editModal.open(video);
+      } catch (error) {
+        console.error("Failed to open edit modal:", error);
+        this.showError("Edit modal is not available right now.");
+      }
     } catch (err) {
       console.error("Failed to edit video:", err);
       this.showError("Failed to edit video. Please try again.");
@@ -10240,7 +5094,10 @@ class bitvidApp {
   async handleRevertVideo(target) {
     try {
       const normalizedTarget = this.normalizeActionTarget(target);
-      const activeVideos = await nostrClient.fetchVideos();
+      const activeVideos = await this.nostrService.fetchVideos({
+        blacklistedEventIds: this.blacklistedEventIds,
+        isAuthorBlocked: (pubkey) => this.isAuthorBlocked(pubkey),
+      });
       const video = await this.resolveVideoActionTarget({
         ...normalizedTarget,
         preloadedList: activeVideos,
@@ -10257,31 +5114,86 @@ class bitvidApp {
         return;
       }
 
-      if (!this.revertVideoModal) {
-        const initialized = await this.initRevertVideoModal();
-        if (!initialized || !this.revertVideoModal) {
-          this.showError("Revert modal is not available right now.");
-          return;
-        }
+      if (!this.revertModal) {
+        this.showError("Revert modal is not available right now.");
+        return;
+      }
+
+      const loaded = await this.revertModal.load();
+      if (!loaded) {
+        this.showError("Revert modal is not available right now.");
+        return;
       }
 
       const history = await nostrClient.hydrateVideoHistory(video);
 
-      this.populateRevertVideoModal(video, history);
-      this.showRevertVideoModal();
+      this.revertModal.setHistory(video, history);
+      this.revertModal.open({ video });
     } catch (err) {
       console.error("Failed to revert video:", err);
       this.showError("Failed to load revision history. Please try again.");
     }
   }
 
+  async handleRevertModalConfirm(event) {
+    const detail = event?.detail || {};
+    const target = detail.target;
+    const entries = Array.isArray(detail.entries)
+      ? detail.entries.slice()
+      : [];
+
+    if (!target || !entries.length) {
+      return;
+    }
+
+    if (!this.pubkey) {
+      this.showError("Please login to revert.");
+      return;
+    }
+
+    if (!this.revertModal) {
+      this.showError("Revert modal is not available right now.");
+      return;
+    }
+
+    this.revertModal.setBusy(true, "Reverting…");
+
+    try {
+      for (const entry of entries) {
+        await nostrClient.revertVideo(
+          {
+            id: entry.id,
+            pubkey: entry.pubkey,
+            tags: entry.tags,
+          },
+          this.pubkey
+        );
+      }
+
+      await this.loadVideos();
+
+      const timestampLabel = this.formatAbsoluteTimestamp(target.created_at);
+      this.showSuccess(`Reverted to revision from ${timestampLabel}.`);
+      this.revertModal.close();
+      this.forceRefreshAllProfiles();
+    } catch (err) {
+      console.error("Failed to revert video:", err);
+      this.showError("Failed to revert video. Please try again.");
+    } finally {
+      this.revertModal.setBusy(false);
+    }
+  }
+
   /**
    * Handle "Delete Video" from gear menu.
    */
   async handleFullDeleteVideo(target) {
     try {
       const normalizedTarget = this.normalizeActionTarget(target);
-      const all = await nostrClient.fetchVideos();
+      const all = this.nostrService.getFilteredActiveVideos({
+        blacklistedEventIds: this.blacklistedEventIds,
+        isAuthorBlocked: (pubkey) => this.isAuthorBlocked(pubkey),
+      });
       const video = await this.resolveVideoActionTarget({
         ...normalizedTarget,
         preloadedList: all,
@@ -10309,7 +5221,11 @@ class bitvidApp {
       // We assume video.videoRootId is not empty, or fallback to video.id if needed
       const rootId = video.videoRootId || video.id;
 
-      await nostrClient.deleteAllVersions(rootId, this.pubkey);
+      await this.nostrService.handleFullDeleteVideo({
+        videoRootId: rootId,
+        pubkey: this.pubkey,
+        confirm: false,
+      });
 
       // Reload
       await this.loadVideos();
@@ -10467,10 +5383,12 @@ class bitvidApp {
       if (
         result &&
         result.outcome === "timeout" &&
-        Number.isFinite(URL_PROBE_TIMEOUT_RETRY_MS) &&
-        URL_PROBE_TIMEOUT_RETRY_MS > initialTimeout
+        Number.isFinite(urlHealthConstants.URL_PROBE_TIMEOUT_RETRY_MS) &&
+        urlHealthConstants.URL_PROBE_TIMEOUT_RETRY_MS > initialTimeout
       ) {
-        const retryResult = await attemptWithTimeout(URL_PROBE_TIMEOUT_RETRY_MS);
+        const retryResult = await attemptWithTimeout(
+          urlHealthConstants.URL_PROBE_TIMEOUT_RETRY_MS
+        );
         if (retryResult) {
           result = { ...retryResult, retriedAfterTimeout: true };
         }
@@ -10620,8 +5538,8 @@ class bitvidApp {
         throw new Error("No magnet URI provided for torrent playback.");
       }
       if (!isValidMagnetUri(trimmedCandidate)) {
-        if (this.modalStatus) {
-          this.modalStatus.textContent = UNSUPPORTED_BTITH_MESSAGE;
+        if (this.videoModal) {
+          this.videoModal.updateStatus(UNSUPPORTED_BTITH_MESSAGE);
         }
         throw new Error(UNSUPPORTED_BTITH_MESSAGE);
       }
@@ -10649,8 +5567,8 @@ class bitvidApp {
       await torrentClient.cleanup();
       this.resetTorrentStats();
 
-      if (this.modalStatus) {
-        this.modalStatus.textContent = "Streaming via WebTorrent";
+      if (this.videoModal) {
+        this.videoModal.updateStatus("Streaming via WebTorrent");
       }
 
       const torrentInstance = await torrentClient.streamVideo(
@@ -10700,40 +5618,118 @@ class bitvidApp {
    * 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.
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const requestSignature = JSON.stringify({
+      url: sanitizedUrl,
+      magnet: trimmedMagnet,
+    });
+
+    if (
+      this.activePlaybackSession &&
+      typeof this.activePlaybackSession.matchesRequestSignature === "function" &&
+      this.activePlaybackSession.matchesRequestSignature(requestSignature)
+    ) {
+      this.log(
+        "[playVideoWithFallback] Duplicate playback request detected; reusing active session."
+      );
+      if (this.activePlaybackResultPromise) {
+        return this.activePlaybackResultPromise;
+      }
+      if (typeof this.activePlaybackSession.getResult === "function") {
+        return this.activePlaybackSession.getResult();
+      }
+      return { source: null };
+    }
+
     await this.waitForCleanup();
     this.cancelPendingViewLogging();
 
-    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
-    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    let modalVideoEl = this.modalVideo;
+    if (!modalVideoEl) {
+      try {
+        const { videoElement } = await this.ensureVideoModalReady({
+          ensureVideoElement: true,
+        });
+        modalVideoEl = videoElement;
+      } catch (error) {
+        this.log(
+          "[playVideoWithFallback] Failed to load video modal before playback:",
+          error
+        );
+        this.showError("Could not prepare the video player. Please try again.");
+        return { source: null, error };
+      }
+    }
 
-    const playbackConfig = deriveTorrentPlaybackConfig({
-      magnet: trimmedMagnet,
+    if (!modalVideoEl) {
+      const error = new Error("Video element is not ready for playback.");
+      this.log(
+        "[playVideoWithFallback] Video element missing after modal load attempt."
+      );
+      this.showError("Video player is not ready yet. Please try again.");
+      return { source: null, error };
+    }
+
+    if (
+      this.videoModal &&
+      typeof this.videoModal.clearPosterCleanup === "function"
+    ) {
+      try {
+        this.videoModal.clearPosterCleanup();
+      } catch (err) {
+        console.warn(
+          "[playVideoWithFallback] video modal poster cleanup threw:",
+          err
+        );
+      }
+    }
+
+    const refreshedModal = this.teardownVideoElement(modalVideoEl, {
+      replaceNode: true,
+    });
+    if (refreshedModal) {
+      this.modalVideo = refreshedModal;
+      modalVideoEl = this.modalVideo;
+      this.applyModalLoadingPoster();
+    } else {
+      this.applyModalLoadingPoster();
+    }
+
+    const session = this.playbackService.createSession({
       url: sanitizedUrl,
-      logger: (message) => this.log(message),
+      magnet: trimmedMagnet,
+      requestSignature,
+      videoElement: this.modalVideo,
+      waitForCleanup: () => this.waitForCleanup(),
+      cancelPendingViewLogging: () => this.cancelPendingViewLogging(),
+      clearActiveIntervals: () => this.clearActiveIntervals(),
+      showModalWithPoster: () => this.showModalWithPoster(),
+      teardownVideoElement: (videoEl, options) =>
+        this.teardownVideoElement(videoEl, options),
+      probeUrl: (candidateUrl) => this.probeUrl(candidateUrl),
+      playViaWebTorrent: (magnetUri, options) =>
+        this.playViaWebTorrent(magnetUri, options),
+      autoplay: () => this.autoplayModalVideo(),
+      unsupportedBtihMessage: UNSUPPORTED_BTITH_MESSAGE,
     });
 
-    const magnetIsUsable = isValidMagnetUri(playbackConfig.magnet);
-    const magnetForPlayback = magnetIsUsable ? playbackConfig.magnet : "";
-    const fallbackMagnet = magnetIsUsable
-      ? playbackConfig.fallbackMagnet
-      : "";
-    const magnetProvided = playbackConfig.provided;
+    this.activePlaybackSession = session;
+    this.activePlaybackResultPromise = null;
 
-    this.log(
-      `[playVideoWithFallback] Session start urlProvided=${!!sanitizedUrl} magnetProvided=${magnetProvided} magnetUsable=${!!magnetForPlayback}`
-    );
+    this.resetTorrentStats();
+    this.playSource = null;
+
+    const playbackConfig = session.getPlaybackConfig();
+    const magnetForPlayback = session.getMagnetForPlayback();
+    const fallbackMagnet = session.getFallbackMagnet();
+    const magnetProvided = session.getMagnetProvided();
 
     if (this.currentVideo) {
       this.currentVideo.magnet = magnetForPlayback;
       this.currentVideo.normalizedMagnet = magnetForPlayback;
       this.currentVideo.normalizedMagnetFallback = fallbackMagnet;
-      if (playbackConfig.infoHash && !this.currentVideo.legacyInfoHash) {
+      if (playbackConfig?.infoHash && !this.currentVideo.legacyInfoHash) {
         this.currentVideo.legacyInfoHash = playbackConfig.infoHash;
       }
       this.currentVideo.torrentSupported = !!magnetForPlayback;
@@ -10741,389 +5737,106 @@ class bitvidApp {
     this.currentMagnetUri = magnetForPlayback || null;
     this.setCopyMagnetState(!!magnetForPlayback);
 
-    let ensureDebugListenersRemoved = () => {};
+    const unsubscribers = [];
+    const subscribe = (eventName, handler) => {
+      const off = session.on(eventName, handler);
+      unsubscribers.push(off);
+    };
 
-    try {
-      if (!this.modalVideo) {
-        throw new Error("Video element is not ready for playback.");
-      }
-
-      if (typeof this.modalPosterCleanup === "function") {
-        try {
-          this.modalPosterCleanup();
-        } catch (err) {
-          console.warn("[playVideoWithFallback] modal poster cleanup threw:", err);
-        } finally {
-          this.modalPosterCleanup = null;
-        }
-      }
-
-      const refreshedModal = this.teardownVideoElement(this.modalVideo, {
-        replaceNode: true,
-      });
-      if (refreshedModal) {
-        this.modalVideo = refreshedModal;
-      }
-
-      this.showModalWithPoster();
-      const HOSTED_URL_SUCCESS_MESSAGE = "✅ Streaming from hosted URL";
-
-      if (this.modalStatus) {
-        this.modalStatus.textContent = "Preparing video...";
-      }
-
-      this.clearActiveIntervals();
-      this.prepareModalVideoForPlayback();
-
-      await torrentClient.cleanup();
-
-      const activeVideoEl = this.teardownVideoElement(this.modalVideo);
-      if (activeVideoEl) {
-        this.modalVideo = activeVideoEl;
-        this.log(
-          `[playVideoWithFallback] Modal video prepared (readyState=${activeVideoEl.readyState} networkState=${activeVideoEl.networkState}).`
+    subscribe("status", ({ message } = {}) => {
+      if (this.videoModal) {
+        this.videoModal.updateStatus(
+          typeof message === "string" ? message : ""
         );
       }
+    });
 
-      if (activeVideoEl) {
-        const debugEvents = [
-          "loadedmetadata",
-          "loadeddata",
-          "canplay",
-          "canplaythrough",
-          "play",
-          "playing",
-          "pause",
-          "stalled",
-          "suspend",
-          "waiting",
-          "ended",
-          "error",
-        ];
-        const debugHandlers = [];
-        ensureDebugListenersRemoved = () => {
-          if (!debugHandlers.length) {
-            return;
-          }
-          for (const [eventName, handler] of debugHandlers) {
-            activeVideoEl.removeEventListener(eventName, handler);
-          }
-          debugHandlers.length = 0;
-          ensureDebugListenersRemoved = () => {};
-        };
-        for (const eventName of debugEvents) {
-          const handler = () => {
-            const { readyState, networkState, currentTime, paused, error } =
-              activeVideoEl;
-            let suffix = `readyState=${readyState} networkState=${networkState} currentTime=${Number.isFinite(currentTime) ? currentTime.toFixed(2) : currentTime} paused=${paused}`;
-            if (eventName === "error" && error) {
-              const errorMessage = error.message || "";
-              suffix += ` code=${error.code || ""} message=${errorMessage}`;
-            }
-            this.log(
-              `[playVideoWithFallback] <video> event ${eventName}; ${suffix}`
-            );
-          };
-          activeVideoEl.addEventListener(eventName, handler);
-          debugHandlers.push([eventName, handler]);
-        }
-      } else {
-        ensureDebugListenersRemoved = () => {};
+    subscribe("video-prepared", ({ videoElement } = {}) => {
+      if (videoElement && videoElement !== this.modalVideo) {
+        this.modalVideo = videoElement;
       }
+    });
 
-      this.resetTorrentStats();
-      this.playSource = null;
-      this.cleanupUrlPlaybackWatchdog();
-      this.preparePlaybackViewLogging(activeVideoEl);
-
-      if (magnetForPlayback) {
-        const label = playbackConfig.didMutate
-          ? "[playVideoWithFallback] Using normalized magnet URI:"
-          : "[playVideoWithFallback] Using magnet URI:";
-        this.log(`${label} ${magnetForPlayback}`);
+    subscribe("view-logging-request", ({ videoElement } = {}) => {
+      if (videoElement) {
+        this.preparePlaybackLogging(videoElement);
       }
+    });
 
-      const httpsUrl =
-        sanitizedUrl && /^https:\/\//i.test(sanitizedUrl) ? sanitizedUrl : "";
-      const webSeedCandidates = httpsUrl ? [httpsUrl] : [];
-      let cleanupHostedUrlStatusListeners = () => {};
-      const cleanupDebugListeners = () => {
-        ensureDebugListenersRemoved();
-      };
+    subscribe("poster-remove", ({ reason } = {}) => {
+      this.forceRemoveModalPoster(reason || "playback");
+    });
 
-      let fallbackStarted = false;
-      const startTorrentFallback = async (reason) => {
-        if (fallbackStarted) {
-          this.log(
-            `[playVideoWithFallback] Duplicate fallback request ignored (${reason}).`
-          );
-          return null;
-        }
-        fallbackStarted = true;
-        this.cleanupUrlPlaybackWatchdog();
-        cleanupHostedUrlStatusListeners();
-        cleanupDebugListeners();
+    subscribe("sourcechange", ({ source } = {}) => {
+      this.playSource = source || null;
+    });
 
-        if (activeVideoEl) {
+    subscribe("error", ({ error, message } = {}) => {
+      const displayMessage =
+        typeof message === "string"
+          ? message
+          : error && error.message
+          ? `Playback error: ${error.message}`
+          : "Playback error";
+      this.showError(displayMessage);
+    });
+
+    subscribe("finished", () => {
+      if (this.activePlaybackSession === session) {
+        this.activePlaybackSession = null;
+        this.activePlaybackResultPromise = null;
+      }
+      while (unsubscribers.length) {
+        const off = unsubscribers.pop();
+        if (typeof off === "function") {
           try {
-            activeVideoEl.pause();
+            off();
           } catch (err) {
-            this.log(
-              "[playVideoWithFallback] Ignoring pause error before torrent fallback:",
-              err
-            );
-          }
-          try {
-            activeVideoEl.removeAttribute("src");
-          } catch (err) {
-            // removeAttribute throws in old browsers when the attribute does not exist
-          }
-          activeVideoEl.src = "";
-          activeVideoEl.srcObject = null;
-          try {
-            activeVideoEl.load();
-          } catch (err) {
-            this.log(
-              "[playVideoWithFallback] Ignoring load error before torrent fallback:",
+            console.warn(
+              "[playVideoWithFallback] Listener cleanup error:",
               err
             );
           }
         }
-        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}).`
-        );
-        this.log(
-          `[playVideoWithFallback] startTorrentFallback invoked with magnet=${!!magnetForPlayback} readyState=${
-            activeVideoEl ? activeVideoEl.readyState : "n/a"
-          } networkState=${
-            activeVideoEl ? activeVideoEl.networkState : "n/a"
-          }`
-        );
-        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...";
-        }
-        this.log(
-          `[playVideoWithFallback] Probing hosted URL ${httpsUrl} (readyState=${activeVideoEl?.readyState} networkState=${activeVideoEl?.networkState}).`
-        );
-        let hostedStatusResolved = false;
-        const hostedStatusHandlers = [];
-        const addHostedStatusListener = (eventName, handler, options) => {
-          if (!activeVideoEl) {
-            return;
-          }
-          activeVideoEl.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 ||
-            !activeVideoEl ||
-            activeVideoEl.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
-          ) {
-            return;
-          }
-          if (activeVideoEl.currentTime > 0 || !activeVideoEl.paused) {
-            markHostedUrlAsLive();
-          }
-        };
-        cleanupHostedUrlStatusListeners = () => {
-          if (!hostedStatusHandlers.length || !activeVideoEl) {
-            hostedStatusHandlers.length = 0;
-            cleanupHostedUrlStatusListeners = () => {};
-            return;
-          }
-          for (const [eventName, handler, options] of hostedStatusHandlers) {
-            activeVideoEl.removeEventListener(eventName, handler, options);
-          }
-          hostedStatusHandlers.length = 0;
-          cleanupHostedUrlStatusListeners = () => {};
-        };
-        addHostedStatusListener("playing", markHostedUrlAsLive, { once: true });
-        addHostedStatusListener("loadeddata", maybeMarkHostedUrl);
-        addHostedStatusListener("canplay", maybeMarkHostedUrl);
-        addHostedStatusListener("error", () => {
-          cleanupHostedUrlStatusListeners();
-          cleanupDebugListeners();
-        }, { once: true });
-        const probeResult = await this.probeUrl(httpsUrl);
-        const probeOutcome = probeResult?.outcome || "error";
-        const shouldAttemptHosted =
-          probeOutcome !== "bad" && probeOutcome !== "error";
-
-        this.log(
-          `[playVideoWithFallback] Hosted URL probe outcome=${probeOutcome} shouldAttemptHosted=${shouldAttemptHosted}`
-        );
-
-        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(activeVideoEl, {
-              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 {
-            activeVideoEl.src = httpsUrl;
-            const playPromise = activeVideoEl.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 = () => {
-                    activeVideoEl.removeEventListener("play", restoreOnPlay);
-                    this.cleanupUrlPlaybackWatchdog();
-                    autoplayBlocked = false;
-                    attachWatchdogs({ stallMs: 8000 });
-                  };
-                  activeVideoEl.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();
-            cleanupDebugListeners();
-            return;
-          }
-
-          const fallbackReason = playbackOutcome?.reason || "watchdog-triggered";
-          await startTorrentFallback(fallbackReason);
-          return;
-        }
-
-        this.log(
-          `[playVideoWithFallback] Hosted URL probe reported "${probeOutcome}"; deferring to WebTorrent.`
-        );
-        cleanupHostedUrlStatusListeners();
-        cleanupDebugListeners();
       }
+    });
 
-      if (magnetForPlayback) {
-        await startTorrentFallback("magnet-primary");
-        return;
-      }
+    const startPromise = session.start();
+    this.activePlaybackResultPromise = startPromise;
+    const result = await startPromise;
 
-      const message = magnetProvided && !magnetForPlayback
-        ? UNSUPPORTED_BTITH_MESSAGE
-        : "No playable source found.";
-      if (this.modalStatus) {
-        this.modalStatus.textContent = message;
-      }
-      this.playSource = null;
-      cleanupDebugListeners();
-      this.showError(message);
-    } catch (error) {
-      ensureDebugListenersRemoved();
-      this.log("Error in playVideoWithFallback:", error);
-      this.showError(`Playback error: ${error.message}`);
+    if (!result || result.error) {
+      return result;
     }
+
+    return result;
   }
 
-  async playVideoByEventId(eventId) {
+
+  async playVideoByEventId(eventId, playbackHint = {}) {
     if (!eventId) {
       this.showError("No video identifier provided.");
       return;
     }
 
+    const fallbackUrl =
+      typeof playbackHint?.url === "string" ? playbackHint.url.trim() : "";
+    const fallbackTitle =
+      typeof playbackHint?.title === "string" ? playbackHint.title : "";
+    const fallbackDescription =
+      typeof playbackHint?.description === "string"
+        ? playbackHint.description
+        : "";
+    const fallbackMagnetRaw =
+      typeof playbackHint?.magnet === "string"
+        ? playbackHint.magnet.trim()
+        : "";
+    let fallbackMagnetCandidate = "";
+    if (fallbackMagnetRaw) {
+      const decoded = safeDecodeMagnet(fallbackMagnetRaw);
+      fallbackMagnetCandidate = decoded || fallbackMagnetRaw;
+    }
+
     this.currentVideoPointer = null;
     this.currentVideoPointerKey = null;
 
@@ -11137,6 +5850,14 @@ class bitvidApp {
       video = await this.getOldEventById(eventId);
     }
     if (!video) {
+      if (fallbackUrl || fallbackMagnetCandidate) {
+        return this.playVideoWithoutEvent({
+          url: fallbackUrl,
+          magnet: fallbackMagnetCandidate,
+          title: fallbackTitle || "Untitled",
+          description: fallbackDescription || "",
+        });
+      }
       this.showError("Video not found or has been removed.");
       return;
     }
@@ -11144,7 +5865,10 @@ class bitvidApp {
     try {
       await accessControl.ensureReady();
     } catch (error) {
-      console.warn("Failed to ensure admin lists were loaded before playback:", error);
+      console.warn(
+        "Failed to ensure admin lists were loaded before playback:",
+        error
+      );
     }
     const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
     if (!accessControl.canAccess(authorNpub)) {
@@ -11158,24 +5882,34 @@ class bitvidApp {
       return;
     }
 
-    if (
-      video.isPrivate &&
-      video.pubkey === this.pubkey &&
-      !video.alreadyDecrypted
-    ) {
-      video.magnet = fakeDecrypt(video.magnet);
-      video.alreadyDecrypted = true;
+    let trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
+    if (!trimmedUrl && fallbackUrl) {
+      trimmedUrl = fallbackUrl;
     }
-
-    const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
     const rawMagnet =
       typeof video.magnet === "string" ? video.magnet.trim() : "";
-    const legacyInfoHash =
+    let 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 fallbackMagnetForCandidate = fallbackMagnetCandidate || "";
+    if (!legacyInfoHash && fallbackMagnetForCandidate) {
+      const match = fallbackMagnetForCandidate.match(/xt=urn:btih:([0-9a-z]+)/i);
+      if (match && match[1]) {
+        legacyInfoHash = match[1].toLowerCase();
+      }
+    }
+
+    let magnetCandidate = rawMagnet || legacyInfoHash || "";
+    let decodedMagnetCandidate = safeDecodeMagnet(magnetCandidate);
+    let usableMagnetCandidate = decodedMagnetCandidate || magnetCandidate;
+    let magnetSupported = isValidMagnetUri(usableMagnetCandidate);
+
+    if (!magnetSupported && fallbackMagnetForCandidate) {
+      magnetCandidate = fallbackMagnetForCandidate;
+      decodedMagnetCandidate = safeDecodeMagnet(magnetCandidate);
+      usableMagnetCandidate = decodedMagnetCandidate || magnetCandidate;
+      magnetSupported = isValidMagnetUri(usableMagnetCandidate);
+    }
+
     const sanitizedMagnet = magnetSupported ? usableMagnetCandidate : "";
 
     trackVideoView({
@@ -11186,61 +5920,40 @@ class bitvidApp {
       hasUrl: !!trimmedUrl,
     });
 
+    const knownPostedAt = this.getKnownVideoPostedAt(video);
+    const normalizedEditedAt = Number.isFinite(video.created_at)
+      ? Math.floor(video.created_at)
+      : null;
+
     this.currentVideo = {
       ...video,
       url: trimmedUrl,
       magnet: sanitizedMagnet,
-      originalMagnet: magnetCandidate,
+      originalMagnet:
+        magnetCandidate || fallbackMagnetForCandidate || legacyInfoHash || "",
       torrentSupported: magnetSupported,
       legacyInfoHash: video.legacyInfoHash || legacyInfoHash,
       lightningAddress: null,
+      lastEditedAt: normalizedEditedAt,
     };
 
+    if (Number.isFinite(knownPostedAt)) {
+      this.cacheVideoRootCreatedAt(this.currentVideo, knownPostedAt);
+    } else if (this.currentVideo.rootCreatedAt) {
+      delete this.currentVideo.rootCreatedAt;
+    }
+
     const dTagValue = (this.extractDTagValue(video.tags) || "").trim();
-    const normalizedPubkey =
-      typeof video.pubkey === "string" ? video.pubkey.trim() : "";
-    const primaryPointer =
-      dTagValue && normalizedPubkey
-        ? [
-            "a",
-            `${
-              typeof video.kind === "number" && Number.isFinite(video.kind)
-                ? video.kind
-                : 30078
-            }:${normalizedPubkey}:${dTagValue}`,
-          ]
-        : null;
-    const fallbackId =
-      typeof (video.id || eventId) === "string"
-        ? (video.id || eventId).trim()
-        : "";
-    const fallbackPointer = fallbackId ? ["e", fallbackId] : null;
+    const pointerInfo = resolveVideoPointer({
+      kind: video.kind,
+      pubkey: video.pubkey,
+      videoRootId: video.videoRootId,
+      dTag: dTagValue,
+      fallbackEventId: video.id || eventId,
+    });
 
-    let resolvedPointer = null;
-    let resolvedPointerKey = "";
-    const pointerCandidates = [];
-    if (primaryPointer) {
-      pointerCandidates.push(primaryPointer);
-    }
-    if (fallbackPointer) {
-      pointerCandidates.push(fallbackPointer);
-    }
-
-    for (const candidate of pointerCandidates) {
-      const key = pointerArrayToKey(candidate);
-      if (key) {
-        resolvedPointer = candidate;
-        resolvedPointerKey = key;
-        break;
-      }
-    }
-
-    this.currentVideoPointer = resolvedPointer && resolvedPointerKey
-      ? resolvedPointer
-      : null;
-    this.currentVideoPointerKey = this.currentVideoPointer
-      ? resolvedPointerKey
-      : null;
+    this.currentVideoPointer = pointerInfo?.pointer || null;
+    this.currentVideoPointerKey = pointerInfo?.key || null;
 
     if (this.currentVideo) {
       this.currentVideo.pointer = this.currentVideoPointer;
@@ -11267,7 +5980,24 @@ class bitvidApp {
       )}`;
     window.history.pushState({}, "", pushUrl);
 
-    this.setModalZapVisibility(false);
+    this.zapController?.setVisibility(false);
+    this.zapController?.resetState();
+
+    const magnetInput =
+      sanitizedMagnet ||
+      decodedMagnetCandidate ||
+      magnetCandidate ||
+      fallbackMagnetForCandidate ||
+      legacyInfoHash ||
+      "";
+
+    await this.showModalWithPoster(this.currentVideo);
+
+    const playbackPromise = this.playVideoWithFallback({
+      url: trimmedUrl,
+      magnet: magnetInput,
+    });
+
     let lightningAddress = "";
     let creatorProfile = {
       name: "Unknown",
@@ -11289,39 +6019,238 @@ class bitvidApp {
       this.log("Error fetching creator profile:", error);
     }
 
-    this.setModalZapVisibility(!!lightningAddress);
+    this.zapController?.setVisibility(!!lightningAddress);
     if (this.currentVideo) {
       this.currentVideo.lightningAddress = lightningAddress || null;
     }
 
     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;
+    if (this.videoModal) {
+      const timestampPayload = this.buildModalTimestampPayload({
+        postedAt: this.currentVideo?.rootCreatedAt ?? null,
+        editedAt: normalizedEditedAt,
+      });
+      const displayNpub = `${creatorNpub.slice(0, 8)}...${creatorNpub.slice(-4)}`;
+      this.videoModal.updateMetadata({
+        title: video.title || "Untitled",
+        description: video.description || "No description available.",
+        timestamps: timestampPayload,
+        creator: {
+          name: creatorProfile.name,
+          avatarUrl: creatorProfile.picture,
+          npub: displayNpub,
+        },
+      });
     }
 
-    await this.playVideoWithFallback({
-      url: trimmedUrl,
-      magnet: usableMagnetCandidate,
+    this.ensureModalPostedTimestamp(this.currentVideo);
+
+    const playbackResult =
+      playbackPromise && typeof playbackPromise.then === "function"
+        ? await playbackPromise
+        : playbackPromise;
+
+    return playbackResult;
+  }
+
+  buildModalTimestampPayload({ postedAt = null, editedAt = null } = {}) {
+    const normalizedPostedAt = Number.isFinite(postedAt)
+      ? Math.floor(postedAt)
+      : null;
+    const normalizedEditedAt = Number.isFinite(editedAt)
+      ? Math.floor(editedAt)
+      : null;
+
+    const payload = {
+      posted: "",
+      edited: "",
+    };
+
+    const effectivePostedAt =
+      normalizedPostedAt !== null ? normalizedPostedAt : normalizedEditedAt;
+
+    if (effectivePostedAt !== null) {
+      payload.posted = `Posted ${this.formatTimeAgo(effectivePostedAt)}`;
+    }
+
+    const shouldShowEdited =
+      normalizedEditedAt !== null &&
+      (normalizedPostedAt === null || normalizedEditedAt - normalizedPostedAt >= 60);
+
+    if (shouldShowEdited) {
+      payload.edited = `Last edited ${this.formatTimeAgo(normalizedEditedAt)}`;
+    }
+
+    return payload;
+  }
+
+  getKnownVideoPostedAt(video) {
+    if (!video || typeof video !== "object") {
+      return null;
+    }
+
+    const directValue = Number.isFinite(video.rootCreatedAt)
+      ? Math.floor(video.rootCreatedAt)
+      : null;
+    if (directValue !== null) {
+      return directValue;
+    }
+
+    if (video.id && this.videosMap instanceof Map) {
+      const stored = this.videosMap.get(video.id);
+      const storedValue = Number.isFinite(stored?.rootCreatedAt)
+        ? Math.floor(stored.rootCreatedAt)
+        : null;
+      if (storedValue !== null) {
+        video.rootCreatedAt = storedValue;
+        return storedValue;
+      }
+    }
+
+    const nip71Created = Number.isFinite(video?.nip71Source?.created_at)
+      ? Math.floor(video.nip71Source.created_at)
+      : null;
+
+    if (nip71Created !== null) {
+      return nip71Created;
+    }
+
+    return null;
+  }
+
+  cacheVideoRootCreatedAt(video, timestamp) {
+    if (!Number.isFinite(timestamp)) {
+      return;
+    }
+
+    const normalized = Math.floor(timestamp);
+    const rootId = getVideoRootIdentifier(video);
+
+    if (video && typeof video === "object") {
+      video.rootCreatedAt = normalized;
+    }
+
+    applyRootTimestampToVideosMap({
+      videosMap: this.videosMap,
+      video,
+      rootId,
+      timestamp: normalized,
     });
+
+    syncActiveVideoRootTimestamp({
+      activeVideo: this.currentVideo,
+      rootId,
+      timestamp: normalized,
+      buildModalTimestampPayload: (payload) =>
+        this.buildModalTimestampPayload(payload),
+      videoModal: this.videoModal,
+    });
+
+    if (nostrClient && typeof nostrClient.applyRootCreatedAt === "function") {
+      try {
+        nostrClient.applyRootCreatedAt(video);
+      } catch (error) {
+        if (isDevMode) {
+          console.warn(
+            "[Application] Failed to sync cached root timestamp with nostrClient:",
+            error
+          );
+        }
+      }
+    }
+  }
+
+  async resolveVideoPostedAt(video) {
+    if (!video || typeof video !== "object") {
+      return null;
+    }
+
+    const cached = this.getKnownVideoPostedAt(video);
+    if (cached !== null) {
+      return cached;
+    }
+
+    if (!nostrClient || typeof nostrClient.hydrateVideoHistory !== "function") {
+      const fallback = Number.isFinite(video.created_at)
+        ? Math.floor(video.created_at)
+        : null;
+      if (fallback !== null) {
+        this.cacheVideoRootCreatedAt(video, fallback);
+      }
+      return fallback;
+    }
+
+    try {
+      const history = await nostrClient.hydrateVideoHistory(video);
+      if (Array.isArray(history) && history.length) {
+        let earliest = null;
+        for (const entry of history) {
+          if (!entry || entry.deleted) {
+            continue;
+          }
+          const created = Number.isFinite(entry.created_at)
+            ? Math.floor(entry.created_at)
+            : null;
+          if (created === null) {
+            continue;
+          }
+          if (earliest === null || created < earliest) {
+            earliest = created;
+          }
+        }
+
+        if (earliest === null) {
+          const lastEntry = history[history.length - 1];
+          if (Number.isFinite(lastEntry?.created_at)) {
+            earliest = Math.floor(lastEntry.created_at);
+          }
+        }
+
+        if (earliest !== null) {
+          this.cacheVideoRootCreatedAt(video, earliest);
+          return earliest;
+        }
+      }
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[Application] Failed to hydrate video history for timestamps:",
+          error
+        );
+      }
+    }
+
+    const fallback = Number.isFinite(video.created_at)
+      ? Math.floor(video.created_at)
+      : null;
+    if (fallback !== null) {
+      this.cacheVideoRootCreatedAt(video, fallback);
+    }
+    return fallback;
+  }
+
+  async ensureModalPostedTimestamp(video) {
+    if (!video || !this.videoModal) {
+      return;
+    }
+
+    const postedAt = await this.resolveVideoPostedAt(video);
+    if (!this.videoModal || this.currentVideo !== video) {
+      return;
+    }
+
+    const editedAt = Number.isFinite(video.lastEditedAt)
+      ? Math.floor(video.lastEditedAt)
+      : Number.isFinite(video.created_at)
+        ? Math.floor(video.created_at)
+        : null;
+
+    const payload = this.buildModalTimestampPayload({
+      postedAt,
+      editedAt,
+    });
+
+    this.videoModal.updateMetadata({ timestamps: payload });
   }
 
   async playVideoWithoutEvent({
@@ -11341,7 +6270,8 @@ class bitvidApp {
     const magnetSupported = isValidMagnetUri(usableMagnet);
     const sanitizedMagnet = magnetSupported ? usableMagnet : "";
 
-    this.setModalZapVisibility(false);
+    this.zapController?.setVisibility(false);
+    this.zapController?.resetState();
 
     trackVideoView({
       videoId:
@@ -11382,33 +6312,27 @@ class bitvidApp {
     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";
+    if (this.videoModal) {
+      this.videoModal.updateMetadata({
+        title: title || "Untitled",
+        description: description || "No description available.",
+        timestamp: "",
+        creator: {
+          name: "Unknown",
+          avatarUrl: "assets/svg/default-profile.svg",
+          npub: "",
+        },
+      });
     }
 
+    await this.showModalWithPoster(this.currentVideo);
+
     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({
+    return this.playVideoWithFallback({
       url: sanitizedUrl,
       magnet: usableMagnet,
     });
@@ -11489,97 +6413,22 @@ class bitvidApp {
    * this.videosMap or from a bulk fetch. Uses nostrClient.getEventById.
    */
   async getOldEventById(eventId) {
-    // 1) Already in our local videosMap?
-    let video = this.videosMap.get(eventId);
-    if (video) {
-      return video;
-    }
-
-    // 2) Already in nostrClient.allEvents?
-    //    (assuming nostrClient.allEvents is a Map of id => video)
-    const fromAll = nostrClient.allEvents.get(eventId);
-    if (fromAll && !fromAll.deleted) {
-      this.videosMap.set(eventId, fromAll);
-      return fromAll;
-    }
-
-    // 3) Direct single-event fetch (fewer resources than full fetchVideos)
-    const single = await nostrClient.getEventById(eventId);
-    if (single && !single.deleted) {
-      this.videosMap.set(single.id, single);
-      return single;
-    }
-
-    // 4) If you wanted a final fallback, you could do it here:
-    //    But it's typically better to avoid repeated full fetches
-    // console.log("Falling back to full fetchVideos...");
-    // const allFetched = await nostrClient.fetchVideos();
-    // video = allFetched.find(v => v.id === eventId && !v.deleted);
-    // if (video) {
-    //   this.videosMap.set(video.id, video);
-    //   return video;
-    // }
-
-    // Not found or was deleted
-    return null;
+    return this.nostrService.getOldEventById(eventId);
   }
 
   /**
    * Format "time ago" for a given timestamp (in seconds).
    */
   formatAbsoluteTimestamp(timestamp) {
-    if (!Number.isFinite(timestamp)) {
-      return "Unknown date";
-    }
-
-    const date = new Date(timestamp * 1000);
-    if (Number.isNaN(date.getTime())) {
-      return "Unknown date";
-    }
-
-    try {
-      return date.toLocaleString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
-    } catch (err) {
-      return date.toISOString();
-    }
+    return formatAbsoluteTimestampUtil(timestamp);
   }
 
   formatTimeAgo(timestamp) {
-    const seconds = Math.floor(Date.now() / 1000 - timestamp);
-    const intervals = {
-      year: 31536000,
-      month: 2592000,
-      week: 604800,
-      day: 86400,
-      hour: 3600,
-      minute: 60,
-    };
-    for (const [unit, secInUnit] of Object.entries(intervals)) {
-      const int = Math.floor(seconds / secInUnit);
-      if (int >= 1) {
-        return `${int} ${unit}${int > 1 ? "s" : ""} ago`;
-      }
-    }
-    return "just now";
+    return formatTimeAgoUtil(timestamp);
   }
 
   escapeHTML(unsafe) {
-    if (unsafe === null || typeof unsafe === "undefined") {
-      return "";
-    }
-
-    return String(unsafe)
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
+    return escapeHtml(unsafe);
   }
 
   showError(msg) {
@@ -11642,6 +6491,278 @@ class bitvidApp {
     console.log(msg);
   }
 
+  destroy() {
+    this.clearActiveIntervals();
+    this.teardownModalViewCountSubscription();
+    this.videoModalReadyPromise = null;
+
+    if (this.watchHistoryTelemetry) {
+      try {
+        this.watchHistoryTelemetry.destroy();
+      } catch (error) {
+        console.warn(
+          "[Application] Failed to destroy watch history telemetry:",
+          error
+        );
+      }
+      this.watchHistoryTelemetry = null;
+    }
+
+    if (typeof this.unsubscribeFromPubkeyState === "function") {
+      try {
+        this.unsubscribeFromPubkeyState();
+      } catch (error) {
+        console.warn("[Application] Failed to unsubscribe pubkey state:", error);
+      }
+      this.unsubscribeFromPubkeyState = null;
+    }
+
+    if (typeof this.unsubscribeFromCurrentUserState === "function") {
+      try {
+        this.unsubscribeFromCurrentUserState();
+      } catch (error) {
+        console.warn(
+          "[Application] Failed to unsubscribe current user state:",
+          error
+        );
+      }
+      this.unsubscribeFromCurrentUserState = null;
+    }
+
+    if (
+      this.boundNwcSettingsToastHandler &&
+      typeof window !== "undefined" &&
+      typeof window.removeEventListener === "function"
+    ) {
+      window.removeEventListener(
+        "bitvid:toast",
+        this.boundNwcSettingsToastHandler
+      );
+      this.boundNwcSettingsToastHandler = null;
+    }
+
+    if (
+      this.nwcSettingsService &&
+      typeof this.nwcSettingsService.clearCache === "function"
+    ) {
+      this.nwcSettingsService.clearCache();
+    }
+
+    this.authEventUnsubscribes.forEach((unsubscribe) => {
+      if (typeof unsubscribe === "function") {
+        try {
+          unsubscribe();
+        } catch (error) {
+          console.warn("[Application] Auth listener unsubscribe failed:", error);
+        }
+      }
+    });
+    this.authEventUnsubscribes = [];
+
+    if (typeof this.unsubscribeFromNostrService === "function") {
+      try {
+        this.unsubscribeFromNostrService();
+      } catch (error) {
+        console.warn("[Application] Failed to unsubscribe nostr service:", error);
+      }
+      this.unsubscribeFromNostrService = null;
+    }
+
+    if (this.uploadModal && this.boundUploadSubmitHandler) {
+      this.uploadModal.removeEventListener(
+        "upload:submit",
+        this.boundUploadSubmitHandler
+      );
+      this.boundUploadSubmitHandler = null;
+    }
+    if (typeof this.uploadModal?.destroy === "function") {
+      try {
+        this.uploadModal.destroy();
+      } catch (error) {
+        console.warn("[Application] Failed to destroy upload modal:", error);
+      }
+    }
+
+    if (this.editModal) {
+      if (this.boundEditModalSubmitHandler) {
+        this.editModal.removeEventListener(
+          "video:edit-submit",
+          this.boundEditModalSubmitHandler
+        );
+        this.boundEditModalSubmitHandler = null;
+      }
+      if (this.boundEditModalCancelHandler) {
+        this.editModal.removeEventListener(
+          "video:edit-cancel",
+          this.boundEditModalCancelHandler
+        );
+        this.boundEditModalCancelHandler = null;
+      }
+      if (typeof this.editModal.destroy === "function") {
+        try {
+          this.editModal.destroy();
+        } catch (error) {
+          console.warn("[Application] Failed to destroy edit modal:", error);
+        }
+      }
+    }
+
+    if (this.revertModal && this.boundRevertConfirmHandler) {
+      this.revertModal.removeEventListener(
+        "video:revert-confirm",
+        this.boundRevertConfirmHandler
+      );
+      this.boundRevertConfirmHandler = null;
+    }
+    if (typeof this.revertModal?.destroy === "function") {
+      try {
+        this.revertModal.destroy();
+      } catch (error) {
+        console.warn("[Application] Failed to destroy revert modal:", error);
+      }
+    }
+
+    if (this.videoModal) {
+      if (this.boundVideoModalCloseHandler) {
+        this.videoModal.removeEventListener(
+          "modal:close",
+          this.boundVideoModalCloseHandler
+        );
+        this.boundVideoModalCloseHandler = null;
+      }
+      if (this.boundVideoModalCopyHandler) {
+        this.videoModal.removeEventListener(
+          "video:copy-magnet",
+          this.boundVideoModalCopyHandler
+        );
+        this.boundVideoModalCopyHandler = null;
+      }
+      if (this.boundVideoModalShareHandler) {
+        this.videoModal.removeEventListener(
+          "video:share",
+          this.boundVideoModalShareHandler
+        );
+        this.boundVideoModalShareHandler = null;
+      }
+      if (this.boundVideoModalCreatorHandler) {
+        this.videoModal.removeEventListener(
+          "creator:navigate",
+          this.boundVideoModalCreatorHandler
+        );
+        this.boundVideoModalCreatorHandler = null;
+      }
+      if (this.boundVideoModalZapHandler) {
+        this.videoModal.removeEventListener(
+          "video:zap",
+          this.boundVideoModalZapHandler
+        );
+        this.boundVideoModalZapHandler = null;
+      }
+      if (this.boundVideoModalZapOpenHandler) {
+        this.videoModal.removeEventListener(
+          "zap:open",
+          this.boundVideoModalZapOpenHandler
+        );
+        this.boundVideoModalZapOpenHandler = null;
+      }
+      if (this.boundVideoModalZapCloseHandler) {
+        this.videoModal.removeEventListener(
+          "zap:close",
+          this.boundVideoModalZapCloseHandler
+        );
+        this.boundVideoModalZapCloseHandler = null;
+      }
+      if (this.boundVideoModalZapAmountHandler) {
+        this.videoModal.removeEventListener(
+          "zap:amount-change",
+          this.boundVideoModalZapAmountHandler
+        );
+        this.boundVideoModalZapAmountHandler = null;
+      }
+      if (this.boundVideoModalZapCommentHandler) {
+        this.videoModal.removeEventListener(
+          "zap:comment-change",
+          this.boundVideoModalZapCommentHandler
+        );
+        this.boundVideoModalZapCommentHandler = null;
+      }
+      if (this.boundVideoModalZapWalletHandler) {
+        this.videoModal.removeEventListener(
+          "zap:wallet-link",
+          this.boundVideoModalZapWalletHandler
+        );
+        this.boundVideoModalZapWalletHandler = null;
+      }
+      if (typeof this.videoModal.destroy === "function") {
+        try {
+          this.videoModal.destroy();
+        } catch (error) {
+          console.warn("[Application] Failed to destroy video modal:", error);
+        }
+      }
+    }
+
+    if (this.videoListView) {
+      if (this.moreMenuController) {
+        this.moreMenuController.detachVideoListView();
+      }
+      this.videoListView.setPlaybackHandler(null);
+      this.videoListView.setEditHandler(null);
+      this.videoListView.setRevertHandler(null);
+      this.videoListView.setDeleteHandler(null);
+      this.videoListViewPlaybackHandler = null;
+      this.videoListViewEditHandler = null;
+      this.videoListViewRevertHandler = null;
+      this.videoListViewDeleteHandler = null;
+      try {
+        this.videoListView.destroy();
+      } catch (error) {
+        console.warn("[Application] Failed to destroy VideoListView:", error);
+      }
+      this.videoListView = null;
+    }
+
+    if (this.moreMenuController) {
+      this.moreMenuController.setVideoModal(null);
+      this.moreMenuController.destroy();
+      this.moreMenuController = null;
+    }
+
+    if (this.profileController) {
+      if (typeof this.profileController.destroy === "function") {
+        try {
+          this.profileController.destroy();
+        } catch (error) {
+          console.warn(
+            "[Application] Failed to destroy profile controller:",
+            error,
+          );
+        }
+      }
+      this.profileController = null;
+    }
+
+    this.videoList = null;
+  }
+
+  shareActiveVideo() {
+    if (!this.currentVideo || !this.currentVideo.id) {
+      this.showError("No shareable video is loaded.");
+      return;
+    }
+
+    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."));
+  }
+
   /**
    * Copies the current video's magnet link to the clipboard.
    */
@@ -11674,30 +6795,5 @@ class bitvidApp {
  * return only the newest (by created_at) for each videoRootId.
  * If no videoRootId is present, treat the video’s own ID as its root.
  */
-function dedupeToNewestByRoot(videos) {
-  const map = new Map(); // key = rootId, value = newest video for that root
-
-  for (const vid of videos) {
-    // If there's no videoRootId, fall back to vid.id (treat it as its own "root")
-    const rootId = vid.videoRootId || vid.id;
-
-    const existing = map.get(rootId);
-    if (!existing || vid.created_at > existing.created_at) {
-      map.set(rootId, vid);
-    }
-  }
-
-  // Return just the newest from each group
-  return Array.from(map.values());
-}
-
-export const app = new bitvidApp();
-export const appReady = app.init();
-
-if (typeof window !== "undefined") {
-  window.app = app;
-  window.appReady = appReady;
-  window.bitvid = window.bitvid || {};
-  window.bitvid.app = app;
-  window.bitvid.appReady = appReady;
-}
+export { Application };
+export default Application;
diff --git a/js/applicationContext.js b/js/applicationContext.js
new file mode 100644
index 00000000..89952d53
--- /dev/null
+++ b/js/applicationContext.js
@@ -0,0 +1,24 @@
+// js/applicationContext.js
+
+let applicationInstance = null;
+let readyPromise = Promise.resolve();
+
+export function setApplication(app) {
+  applicationInstance = app || null;
+}
+
+export function getApplication() {
+  return applicationInstance;
+}
+
+export function setApplicationReady(promise) {
+  if (promise && typeof promise.then === "function") {
+    readyPromise = promise;
+  } else {
+    readyPromise = Promise.resolve(promise);
+  }
+}
+
+export function getApplicationReady() {
+  return readyPromise;
+}
diff --git a/js/bootstrap.js b/js/bootstrap.js
new file mode 100644
index 00000000..f2f75243
--- /dev/null
+++ b/js/bootstrap.js
@@ -0,0 +1,30 @@
+// js/bootstrap.js
+
+import Application from "./app.js";
+import nostrService from "./services/nostrService.js";
+import r2Service from "./services/r2Service.js";
+import { loadView } from "./viewManager.js";
+
+function mergeServices(overrides = {}) {
+  const merged = { nostrService, r2Service };
+
+  if (overrides && typeof overrides === "object") {
+    if (overrides.nostrService) {
+      merged.nostrService = overrides.nostrService;
+    }
+    if (overrides.r2Service) {
+      merged.r2Service = overrides.r2Service;
+    }
+  }
+
+  return merged;
+}
+
+export function createApplication({ services, loadView: loadViewOverride } = {}) {
+  return new Application({
+    services: mergeServices(services),
+    loadView: typeof loadViewOverride === "function" ? loadViewOverride : loadView,
+  });
+}
+
+export default createApplication;
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 8e0b6dc1..39790921 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -2,20 +2,132 @@
 
 import {
   nostrClient,
+  DEFAULT_RELAY_URLS,
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
-import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
 import { attachHealthBadges } from "./gridHealth.js";
 import { attachUrlHealthBadges } from "./urlHealthObserver.js";
 import { accessControl } from "./accessControl.js";
+import { getApplication } from "./applicationContext.js";
+import { escapeHTML } from "./utils/domUtils.js";
+import { VideoCard } from "./ui/components/VideoCard.js";
+import {
+  calculateZapShares,
+  describeShareType,
+  fetchLightningMetadata,
+  formatMinRequirement,
+  getCachedLightningEntry,
+  getCachedMetadataByUrl,
+  getCachedPlatformLightningAddress,
+  isMetadataEntryFresh,
+  normalizeLightningAddressKey,
+  rememberLightningMetadata,
+  setCachedPlatformLightningAddress,
+  validateInvoiceAmount,
+} from "./payments/zapSharedState.js";
+import { splitAndZap } from "./payments/zapSplit.js";
+import {
+  resolveLightningAddress,
+  fetchPayServiceData,
+  requestInvoice,
+} from "./payments/lnurl.js";
+import { getPlatformLightningAddress } from "./payments/platformAddress.js";
+import { ensureWallet, sendPayment as sendWalletPayment } from "./payments/nwcClient.js";
+
+const getApp = () => getApplication();
 
 let currentChannelHex = null;
 let currentChannelNpub = null;
+let currentChannelLightningAddress = "";
+
+const summarizeZapTracker = (tracker) =>
+  Array.isArray(tracker)
+    ? tracker.map((entry) => ({
+        type: entry?.type || "unknown",
+        status: entry?.status || "unknown",
+        amount:
+          Number.isFinite(entry?.amount) && entry.amount >= 0
+            ? entry.amount
+            : undefined,
+        address: entry?.address || undefined,
+        hasPayment: Boolean(entry?.payment),
+        errorMessage:
+          typeof entry?.error?.message === "string"
+            ? entry.error.message
+            : entry?.error
+            ? String(entry.error)
+            : undefined,
+      }))
+    : undefined;
+
+function logZapError(stage, details = {}, error) {
+  const summary = {
+    stage,
+    shareType: details?.shareType,
+    address: details?.address,
+    amount:
+      Number.isFinite(details?.amount) && details.amount >= 0
+        ? details.amount
+        : undefined,
+    overrideFee:
+      typeof details?.overrideFee === "number"
+        ? details.overrideFee
+        : undefined,
+    commentLength:
+      typeof details?.comment === "string" ? details.comment.length : undefined,
+    wallet: details?.walletSettings
+      ? {
+          hasUri: Boolean(details.walletSettings.nwcUri),
+          type:
+            details.walletSettings.type ||
+            details.walletSettings.name ||
+            details.walletSettings.client ||
+            undefined,
+        }
+      : undefined,
+    shares: details?.context?.shares
+      ? {
+          total: details.context.shares.total,
+          creator: details.context.shares.creatorShare,
+          platform: details.context.shares.platformShare,
+        }
+      : undefined,
+    tracker: summarizeZapTracker(details?.tracker),
+    retryAttempt:
+      Number.isInteger(details?.retryAttempt) && details.retryAttempt >= 0
+        ? details.retryAttempt
+        : undefined,
+  };
+  console.error("[zap] Channel zap failure", summary, error);
+}
+let currentChannelProfileEvent = null;
 
 let cachedZapButton = null;
 let cachedChannelShareButton = null;
 let cachedChannelMenu = null;
+let cachedZapControls = null;
+let cachedZapForm = null;
+let cachedZapAmountInput = null;
+let cachedZapSplitSummary = null;
+let cachedZapStatus = null;
+let cachedZapReceipts = null;
+let cachedZapWalletPrompt = null;
+let cachedZapWalletLink = null;
+let cachedZapCloseBtn = null;
+let cachedZapSendBtn = null;
+
+let pendingZapRetry = null;
+let zapInFlight = false;
+let zapControlsOpen = false;
+let currentVideoLoadToken = 0;
+let currentProfileLoadToken = 0;
+
+const FALLBACK_CHANNEL_BANNER = "assets/jpg/bitvid.jpg";
+const FALLBACK_CHANNEL_AVATAR = "assets/svg/default-profile.svg";
+const PROFILE_EVENT_CACHE_TTL_MS = 5 * 60 * 1000;
+
+const channelProfileMetadataCache = new Map();
 
 function getChannelZapButton() {
   if (cachedZapButton && !document.body.contains(cachedZapButton)) {
@@ -29,18 +141,66 @@ function getChannelZapButton() {
 
 function setChannelZapVisibility(visible) {
   const zapButton = getChannelZapButton();
+  const controls = getZapControlsContainer();
+  const amountInput = getZapAmountInput();
+  const sendButton = getZapSendButton();
   if (!zapButton) {
     return;
   }
-  const shouldShow = !!visible;
+  const app = getApp();
+  const isLoggedIn =
+    typeof app?.isUserLoggedIn === "function"
+      ? app.isUserLoggedIn()
+      : Boolean(app?.normalizeHexPubkey?.(app?.pubkey));
+  const shouldShow = !!visible && isLoggedIn;
   zapButton.classList.toggle("hidden", !shouldShow);
   zapButton.disabled = !shouldShow;
   zapButton.setAttribute("aria-disabled", (!shouldShow).toString());
   zapButton.setAttribute("aria-hidden", (!shouldShow).toString());
+  zapButton.setAttribute("aria-expanded", "false");
   if (shouldShow) {
     zapButton.removeAttribute("tabindex");
   } else {
     zapButton.setAttribute("tabindex", "-1");
+    resetZapRetryState();
+    zapInFlight = false;
+    clearZapReceipts();
+    setZapStatus("", "neutral");
+  }
+  closeZapControls();
+  if (controls) {
+    controls.setAttribute("aria-hidden", "true");
+  }
+  if (amountInput) {
+    amountInput.disabled = !shouldShow;
+  }
+  if (sendButton) {
+    sendButton.disabled = !shouldShow;
+    sendButton.setAttribute("aria-hidden", (!shouldShow).toString());
+    if (shouldShow) {
+      sendButton.removeAttribute("tabindex");
+      sendButton.removeAttribute("aria-busy");
+      sendButton.classList.remove("opacity-50", "pointer-events-none");
+    } else {
+      sendButton.setAttribute("tabindex", "-1");
+    }
+  }
+
+  const hasWallet =
+    typeof app?.hasActiveWalletConnection === "function"
+      ? app.hasActiveWalletConnection()
+      : (() => {
+          const settings =
+            typeof app?.getActiveNwcSettings === "function"
+              ? app.getActiveNwcSettings()
+              : {};
+          const uri =
+            typeof settings?.nwcUri === "string" ? settings.nwcUri.trim() : "";
+          return uri.length > 0;
+        })();
+  setZapWalletPromptVisible(shouldShow && !hasWallet);
+  if (shouldShow) {
+    setupZapWalletLink();
   }
 }
 
@@ -64,12 +224,954 @@ function getChannelMenuElement() {
   return cachedChannelMenu;
 }
 
+function getZapControlsContainer() {
+  if (cachedZapControls && !document.body.contains(cachedZapControls)) {
+    cachedZapControls = null;
+  }
+  if (!cachedZapControls) {
+    cachedZapControls = document.getElementById("zapControls");
+  }
+  return cachedZapControls;
+}
+
+function getZapFormElement() {
+  if (cachedZapForm && !document.body.contains(cachedZapForm)) {
+    cachedZapForm = null;
+  }
+  if (!cachedZapForm) {
+    cachedZapForm = document.getElementById("zapForm");
+  }
+  return cachedZapForm;
+}
+
+function getZapAmountInput() {
+  if (cachedZapAmountInput && !document.body.contains(cachedZapAmountInput)) {
+    cachedZapAmountInput = null;
+  }
+  if (!cachedZapAmountInput) {
+    cachedZapAmountInput = document.getElementById("zapAmountInput");
+  }
+  return cachedZapAmountInput;
+}
+
+function getZapSplitSummaryElement() {
+  if (cachedZapSplitSummary && !document.body.contains(cachedZapSplitSummary)) {
+    cachedZapSplitSummary = null;
+  }
+  if (!cachedZapSplitSummary) {
+    cachedZapSplitSummary = document.getElementById("zapSplitSummary");
+  }
+  return cachedZapSplitSummary;
+}
+
+function getZapStatusElement() {
+  if (cachedZapStatus && !document.body.contains(cachedZapStatus)) {
+    cachedZapStatus = null;
+  }
+  if (!cachedZapStatus) {
+    cachedZapStatus = document.getElementById("zapStatus");
+  }
+  return cachedZapStatus;
+}
+
+function getZapReceiptsList() {
+  if (cachedZapReceipts && !document.body.contains(cachedZapReceipts)) {
+    cachedZapReceipts = null;
+  }
+  if (!cachedZapReceipts) {
+    cachedZapReceipts = document.getElementById("zapReceipts");
+  }
+  return cachedZapReceipts;
+}
+
+function getZapSendButton() {
+  if (cachedZapSendBtn && !document.body.contains(cachedZapSendBtn)) {
+    cachedZapSendBtn = null;
+  }
+  if (!cachedZapSendBtn) {
+    cachedZapSendBtn = document.getElementById("zapSendBtn");
+  }
+  return cachedZapSendBtn;
+}
+
+function getZapWalletPrompt() {
+  if (cachedZapWalletPrompt && !document.body.contains(cachedZapWalletPrompt)) {
+    cachedZapWalletPrompt = null;
+  }
+  if (!cachedZapWalletPrompt) {
+    cachedZapWalletPrompt = document.getElementById("zapWalletPrompt");
+  }
+  return cachedZapWalletPrompt;
+}
+
+function getZapWalletLink() {
+  if (cachedZapWalletLink && !document.body.contains(cachedZapWalletLink)) {
+    cachedZapWalletLink = null;
+  }
+  if (!cachedZapWalletLink) {
+    cachedZapWalletLink = document.getElementById("zapWalletLink");
+  }
+  return cachedZapWalletLink;
+}
+
+function getZapCloseButton() {
+  if (cachedZapCloseBtn && !document.body.contains(cachedZapCloseBtn)) {
+    cachedZapCloseBtn = null;
+  }
+  if (!cachedZapCloseBtn) {
+    cachedZapCloseBtn = document.getElementById("zapCloseBtn");
+  }
+  return cachedZapCloseBtn;
+}
+
+function setZapWalletPromptVisible(visible) {
+  const prompt = getZapWalletPrompt();
+  if (!prompt) {
+    return;
+  }
+  const shouldShow = !!visible;
+  prompt.classList.toggle("hidden", !shouldShow);
+  prompt.setAttribute("aria-hidden", (!shouldShow).toString());
+}
+
+function setupZapWalletLink() {
+  const link = getZapWalletLink();
+  if (!link) {
+    return;
+  }
+  if (link.dataset.initialized === "true") {
+    return;
+  }
+  link.addEventListener("click", (event) => {
+    event?.preventDefault?.();
+    const app = getApp();
+    if (typeof app?.openWalletPane === "function") {
+      app.openWalletPane();
+    }
+  });
+  link.dataset.initialized = "true";
+}
+
+function focusZapAmountField() {
+  const amountInput = getZapAmountInput();
+  if (amountInput && typeof amountInput.focus === "function") {
+    try {
+      amountInput.focus({ preventScroll: true });
+    } catch (error) {
+      amountInput.focus();
+    }
+  }
+}
+
+function isZapControlsOpen() {
+  return zapControlsOpen;
+}
+
+function openZapControls({ focus = false } = {}) {
+  const controls = getZapControlsContainer();
+  const zapButton = getChannelZapButton();
+  if (!controls || !zapButton) {
+    return false;
+  }
+  if (!zapControlsOpen) {
+    controls.classList.remove("hidden");
+    controls.setAttribute("aria-hidden", "false");
+    zapButton.setAttribute("aria-expanded", "true");
+    zapControlsOpen = true;
+  }
+  if (focus) {
+    focusZapAmountField();
+  }
+  return true;
+}
+
+function closeZapControls({ focusButton = false } = {}) {
+  const controls = getZapControlsContainer();
+  const zapButton = getChannelZapButton();
+  if (controls) {
+    controls.classList.add("hidden");
+    controls.setAttribute("aria-hidden", "true");
+  }
+  if (zapButton) {
+    zapButton.setAttribute("aria-expanded", "false");
+    if (focusButton && typeof zapButton.focus === "function") {
+      zapButton.focus();
+    }
+  }
+  zapControlsOpen = false;
+  return Boolean(controls && zapButton);
+}
+
+function updateZapSplitSummary({ overrideFee = null } = {}) {
+  const summaryEl = getZapSplitSummaryElement();
+  if (!summaryEl) {
+    return;
+  }
+
+  const amountInput = getZapAmountInput();
+  const numeric = Math.max(0, Math.round(Number(amountInput?.value || 0)));
+  if (!numeric) {
+    summaryEl.textContent = "Enter an amount to view the split.";
+    return;
+  }
+
+  const shares = calculateZapShares(numeric, overrideFee);
+
+  const parts = [];
+  const creatorEntry = getCachedLightningEntry(currentChannelLightningAddress);
+  const creatorMin = formatMinRequirement(creatorEntry?.metadata);
+  let creatorText = `Creator: ${shares.creatorShare} sats`;
+  if (Number.isFinite(creatorMin) && creatorMin > 0) {
+    creatorText += ` (min ${creatorMin})`;
+  }
+  parts.push(creatorText);
+
+  if (shares.platformShare > 0) {
+    const platformEntry = getCachedLightningEntry(
+      getCachedPlatformLightningAddress()
+    );
+    const platformMin = formatMinRequirement(platformEntry?.metadata);
+    let platformText = `Platform: ${shares.platformShare} sats`;
+    if (Number.isFinite(platformMin) && platformMin > 0) {
+      platformText += ` (min ${platformMin})`;
+    }
+    parts.push(platformText);
+  }
+
+  summaryEl.textContent = parts.join(" • ");
+}
+
+function setZapStatus(message, tone = "neutral") {
+  const statusEl = getZapStatusElement();
+  if (!statusEl) {
+    return;
+  }
+
+  const normalizedTone = typeof tone === "string" ? tone : "neutral";
+  statusEl.textContent = message || "";
+  statusEl.classList.remove(
+    "text-gray-300",
+    "text-gray-400",
+    "text-green-300",
+    "text-red-300",
+    "text-yellow-300"
+  );
+
+  if (!message) {
+    statusEl.classList.add("text-gray-400");
+    return;
+  }
+
+  switch (normalizedTone) {
+    case "success":
+      statusEl.classList.add("text-green-300");
+      break;
+    case "error":
+      statusEl.classList.add("text-red-300");
+      break;
+    case "warning":
+      statusEl.classList.add("text-yellow-300");
+      break;
+    default:
+      statusEl.classList.add("text-gray-300");
+      break;
+  }
+}
+
+function clearZapReceipts() {
+  const list = getZapReceiptsList();
+  if (!list) {
+    return;
+  }
+  list.innerHTML = "";
+}
+
+function renderZapReceipts(receipts, { partial = false } = {}) {
+  const list = getZapReceiptsList();
+  if (!list) {
+    return;
+  }
+
+  list.innerHTML = "";
+
+  if (!Array.isArray(receipts) || receipts.length === 0) {
+    if (partial) {
+      const emptyItem = document.createElement("li");
+      emptyItem.className = "rounded border border-gray-700 bg-gray-800/70 p-3 text-gray-300";
+      emptyItem.textContent = "No receipts were returned for this attempt.";
+      list.appendChild(emptyItem);
+    }
+    return;
+  }
+
+  receipts.forEach((receipt) => {
+    if (!receipt) {
+      return;
+    }
+
+    const li = document.createElement("li");
+    li.className = "rounded border border-gray-700 bg-gray-800/70 p-3";
+
+    const header = document.createElement("div");
+    header.className = "flex items-center justify-between text-xs font-semibold uppercase tracking-wide text-gray-200";
+
+    const shareType = receipt.recipientType || receipt.type || "creator";
+    const shareLabel = document.createElement("span");
+    shareLabel.textContent = `${describeShareType(shareType)} • ${Math.max(
+      0,
+      Math.round(Number(receipt.amount || 0))
+    )} sats`;
+
+    const status = document.createElement("span");
+    const isSuccess = receipt.status
+      ? receipt.status === "success"
+      : !receipt.error;
+    status.textContent = isSuccess ? "Success" : "Failed";
+    status.className = isSuccess ? "text-green-300" : "text-red-300";
+
+    header.appendChild(shareLabel);
+    header.appendChild(status);
+    li.appendChild(header);
+
+    const address = document.createElement("p");
+    address.className = "mt-1 text-xs text-gray-300 break-all";
+    const addressValue = receipt.address || "";
+    if (addressValue) {
+      address.textContent = addressValue;
+      li.appendChild(address);
+    }
+
+    const detail = document.createElement("p");
+    detail.className = "mt-2 text-xs text-gray-400";
+    if (isSuccess) {
+      let detailMessage = "Invoice settled.";
+      const preimage = receipt.payment?.result?.preimage;
+      if (typeof preimage === "string" && preimage) {
+        detailMessage = `Preimage: ${preimage.slice(0, 18)}${
+          preimage.length > 18 ? "…" : ""
+        }`;
+      }
+      detail.textContent = detailMessage;
+    } else {
+      const errorMessage =
+        (receipt.error && receipt.error.message) ||
+        (typeof receipt.error === "string" ? receipt.error : "Payment failed.");
+      detail.textContent = errorMessage;
+    }
+    li.appendChild(detail);
+
+    list.appendChild(li);
+  });
+}
+
+function resetZapRetryState() {
+  pendingZapRetry = null;
+  const zapButton = getChannelZapButton();
+  if (zapButton) {
+    delete zapButton.dataset.retryPending;
+    zapButton.setAttribute("aria-label", "Open zap dialog");
+    zapButton.title = "Open zap dialog";
+  }
+  const sendButton = getZapSendButton();
+  if (sendButton) {
+    delete sendButton.dataset.retryPending;
+    sendButton.textContent = "Send";
+    sendButton.setAttribute("aria-label", "Send a zap");
+    sendButton.removeAttribute("title");
+  }
+}
+
+function markZapRetryPending(shares) {
+  const validShares = Array.isArray(shares)
+    ? shares.filter((share) => share && share.amount > 0)
+    : [];
+  if (!validShares.length) {
+    resetZapRetryState();
+    return;
+  }
+
+  pendingZapRetry = { shares: validShares, createdAt: Date.now() };
+  const zapButton = getChannelZapButton();
+  if (zapButton) {
+    zapButton.dataset.retryPending = "true";
+    zapButton.setAttribute("aria-label", "Retry failed zap shares");
+    zapButton.title = "Retry failed zap shares";
+  }
+  const sendButton = getZapSendButton();
+  if (sendButton) {
+    sendButton.dataset.retryPending = "true";
+    sendButton.textContent = "Retry";
+    sendButton.setAttribute("aria-label", "Retry failed zap shares");
+    sendButton.title = "Retry failed zap shares";
+  }
+}
+
+function getZapVideoEvent() {
+  const lightningAddress = currentChannelLightningAddress || "";
+  const baseEvent =
+    currentChannelProfileEvent && typeof currentChannelProfileEvent === "object"
+      ? { ...currentChannelProfileEvent }
+      : {};
+  return {
+    kind: typeof baseEvent.kind === "number" ? baseEvent.kind : 0,
+    id: baseEvent.id || currentChannelHex || "",
+    pubkey: baseEvent.pubkey || currentChannelHex || "",
+    tags: Array.isArray(baseEvent.tags) ? [...baseEvent.tags] : [],
+    content: typeof baseEvent.content === "string" ? baseEvent.content : "",
+    created_at: baseEvent.created_at || Math.floor(Date.now() / 1000),
+    lightningAddress,
+  };
+}
+
+async function prepareLightningContext({ amount, overrideFee = null }) {
+  if (!currentChannelLightningAddress) {
+    throw new Error("This creator has not configured a Lightning address yet.");
+  }
+
+  const shares = calculateZapShares(amount, overrideFee);
+  if (!shares.total) {
+    throw new Error("Enter a zap amount greater than zero.");
+  }
+
+  const creatorEntry = await fetchLightningMetadata(currentChannelLightningAddress);
+  if (shares.creatorShare > 0) {
+    try {
+      validateInvoiceAmount(creatorEntry.metadata, shares.creatorShare);
+    } catch (error) {
+      const detail = error?.message || "Unable to validate creator share.";
+      throw new Error(`Creator share error: ${detail}`);
+    }
+  }
+
+  let platformEntry = null;
+  let platformAddress = "";
+  if (shares.platformShare > 0) {
+    platformAddress = getCachedPlatformLightningAddress();
+    if (!platformAddress) {
+      platformAddress = await getPlatformLightningAddress({ forceRefresh: false });
+      setCachedPlatformLightningAddress(platformAddress || "");
+    }
+    if (!platformAddress) {
+      throw new Error("Platform Lightning address is unavailable.");
+    }
+
+    platformEntry = await fetchLightningMetadata(platformAddress);
+    try {
+      validateInvoiceAmount(platformEntry.metadata, shares.platformShare);
+    } catch (error) {
+      const detail = error?.message || "Unable to validate platform share.";
+      throw new Error(`Platform share error: ${detail}`);
+    }
+  }
+
+  updateZapSplitSummary();
+
+  return {
+    shares,
+    creatorEntry,
+    platformEntry,
+    platformAddress,
+  };
+}
+
+function createZapDependencies({
+  creatorEntry,
+  platformEntry,
+  shares,
+  shareTracker,
+  walletSettings,
+}) {
+  const creatorKey = normalizeLightningAddressKey(
+    creatorEntry?.address || currentChannelLightningAddress
+  );
+  const platformKey = normalizeLightningAddressKey(
+    platformEntry?.address || getCachedPlatformLightningAddress()
+  );
+
+  let activeShare = null;
+
+  return {
+    lnurl: {
+      resolveLightningAddress: (value) => {
+        const normalized = normalizeLightningAddressKey(value);
+        if (normalized && normalized === creatorKey) {
+          activeShare = "creator";
+          if (creatorEntry?.resolved) {
+            return { ...creatorEntry.resolved };
+          }
+        } else if (normalized && normalized === platformKey) {
+          activeShare = "platform";
+          if (platformEntry?.resolved) {
+            return { ...platformEntry.resolved };
+          }
+        } else {
+          activeShare = null;
+        }
+
+        const resolved = resolveLightningAddress(value);
+        if (normalized) {
+          rememberLightningMetadata({
+            key: normalized,
+            address: resolved.address || value,
+            resolved,
+            fetchedAt: Date.now(),
+          });
+        }
+        return resolved;
+      },
+      fetchPayServiceData: async (url) => {
+        const cached = getCachedMetadataByUrl(url);
+        if (cached?.metadata && isMetadataEntryFresh(cached)) {
+          return cached.metadata;
+        }
+
+        const metadata = await fetchPayServiceData(url);
+        if (cached) {
+          rememberLightningMetadata({
+            ...cached,
+            metadata,
+            fetchedAt: Date.now(),
+          });
+        }
+        return metadata;
+      },
+      validateInvoiceAmount,
+      requestInvoice,
+    },
+    wallet: {
+      ensureWallet: async (options) => {
+        try {
+          return await ensureWallet(options);
+        } catch (error) {
+          logZapError(
+            "wallet.ensureWallet",
+            {
+              tracker: shareTracker,
+              context: { shares },
+              walletSettings: options?.settings,
+            },
+            error
+          );
+          throw error;
+        }
+      },
+      sendPayment: async (bolt11, params) => {
+        const shareType = activeShare || "unknown";
+        const shareAmount =
+          shareType === "platform"
+            ? shares.platformShare
+            : shares.creatorShare;
+        const address =
+          shareType === "platform"
+            ? platformEntry?.address || getCachedPlatformLightningAddress()
+            : creatorEntry?.address || currentChannelLightningAddress;
+        const normalizedParams = {
+          ...(params || {}),
+        };
+        if (!Number.isFinite(normalizedParams.amountSats) && Number.isFinite(shareAmount)) {
+          normalizedParams.amountSats = shareAmount;
+        }
+        if (!normalizedParams.settings && walletSettings) {
+          normalizedParams.settings = walletSettings;
+        }
+        try {
+          const payment = await sendWalletPayment(bolt11, normalizedParams);
+          if (Array.isArray(shareTracker)) {
+            shareTracker.push({
+              type: shareType,
+              status: "success",
+              amount: shareAmount,
+              address,
+              payment,
+            });
+          }
+          return payment;
+        } catch (error) {
+          if (Array.isArray(shareTracker)) {
+            shareTracker.push({
+              type: shareType,
+              status: "error",
+              amount: shareAmount,
+              address,
+              error,
+            });
+          }
+          logZapError(
+            "wallet.sendPayment",
+            {
+              shareType,
+              amount: shareAmount,
+              address,
+              tracker: shareTracker,
+              context: { shares },
+            },
+            error
+          );
+          throw error;
+        } finally {
+          activeShare = null;
+        }
+      },
+    },
+    platformAddress: {
+      getPlatformLightningAddress: async () => {
+        if (platformEntry?.address) {
+          return platformEntry.address;
+        }
+        const cachedAddress = getCachedPlatformLightningAddress();
+        if (cachedAddress) {
+          return cachedAddress;
+        }
+        const fallback = await getPlatformLightningAddress({ forceRefresh: false });
+        setCachedPlatformLightningAddress(fallback || "");
+        return fallback;
+      },
+    },
+  };
+}
+
+function getWalletSettingsOrPrompt() {
+  const app = getApp();
+  const settings =
+    typeof app?.getActiveNwcSettings === "function"
+      ? app.getActiveNwcSettings()
+      : {};
+  const normalizedUri =
+    typeof settings?.nwcUri === "string" ? settings.nwcUri.trim() : "";
+  if (!normalizedUri) {
+    app?.showError?.("Connect a Lightning wallet to send zaps.");
+    if (typeof app?.openWalletPane === "function") {
+      app.openWalletPane();
+    }
+    return null;
+  }
+  return {
+    ...settings,
+    nwcUri: normalizedUri,
+  };
+}
+
+async function runZapAttempt({ amount, overrideFee = null, walletSettings }) {
+  const settings = walletSettings || getWalletSettingsOrPrompt();
+  if (!settings) {
+    return null;
+  }
+
+  let context;
+  try {
+    context = await prepareLightningContext({ amount, overrideFee });
+  } catch (error) {
+    logZapError(
+      "prepareLightningContext",
+      {
+        amount,
+        overrideFee,
+        walletSettings: settings,
+      },
+      error
+    );
+    throw error;
+  }
+  const shareTracker = [];
+  const dependencies = createZapDependencies({
+    ...context,
+    shareTracker,
+    walletSettings: settings,
+  });
+  const videoEvent = getZapVideoEvent();
+
+  let previousOverride;
+  const hasGlobal = typeof globalThis !== "undefined";
+  if (hasGlobal && typeof overrideFee === "number" && Number.isFinite(overrideFee)) {
+    previousOverride = globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+    globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = overrideFee;
+  }
+
+  try {
+    const result = await splitAndZap(
+      {
+        videoEvent,
+        amountSats: context.shares.total,
+        walletSettings: settings,
+      },
+      dependencies
+    );
+    return { context, result, shareTracker };
+  } catch (error) {
+    if (Array.isArray(shareTracker) && shareTracker.length) {
+      error.__zapShareTracker = shareTracker;
+    }
+    logZapError(
+      "splitAndZap",
+      {
+        amount,
+        overrideFee,
+        walletSettings: settings,
+        context,
+        tracker: shareTracker,
+      },
+      error
+    );
+    throw error;
+  } finally {
+    if (hasGlobal && typeof overrideFee === "number" && Number.isFinite(overrideFee)) {
+      if (typeof previousOverride === "number") {
+        globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = previousOverride;
+      } else if (globalThis && "__BITVID_PLATFORM_FEE_OVERRIDE__" in globalThis) {
+        delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+      }
+    }
+  }
+}
+
+function handleZapAmountChange() {
+  resetZapRetryState();
+  updateZapSplitSummary();
+}
+
+async function executePendingRetry({ walletSettings }) {
+  const retryState = pendingZapRetry;
+  const shares = Array.isArray(retryState?.shares) ? retryState.shares : [];
+  if (!shares.length) {
+    resetZapRetryState();
+    return;
+  }
+
+  const app = getApp();
+  const summary = shares
+    .map((share) => `${describeShareType(share.type)} ${share.amount} sats`)
+    .join(", ");
+  setZapStatus(`Retrying failed share(s): ${summary}`, "warning");
+  clearZapReceipts();
+
+  const aggregatedReceipts = [];
+  const aggregatedTracker = [];
+
+  for (const share of shares) {
+    const overrideFee = share.type === "platform" ? 100 : 0;
+    try {
+      const attempt = await runZapAttempt({
+        amount: share.amount,
+        overrideFee,
+        walletSettings,
+      });
+      if (!attempt) {
+        setZapStatus("", "neutral");
+        return;
+      }
+      if (attempt?.result?.receipts) {
+        aggregatedReceipts.push(...attempt.result.receipts);
+      } else if (Array.isArray(attempt?.shareTracker)) {
+        aggregatedTracker.push(...attempt.shareTracker);
+      }
+    } catch (error) {
+      const tracker = Array.isArray(error?.__zapShareTracker)
+        ? error.__zapShareTracker
+        : [];
+      logZapError(
+        "retry.share",
+        {
+          shareType: share?.type || "unknown",
+          amount: share?.amount,
+          address: share?.address,
+          walletSettings,
+          tracker,
+        },
+        error
+      );
+      if (tracker.length) {
+        aggregatedTracker.push(...tracker);
+      }
+      const failureShares = tracker.filter(
+        (entry) => entry && entry.status !== "success" && entry.amount > 0
+      );
+      markZapRetryPending(failureShares.length ? failureShares : [share]);
+      const message = error?.message || "Retry failed.";
+      setZapStatus(message, "error");
+      app?.showError?.(message);
+      renderZapReceipts(aggregatedTracker.length ? aggregatedTracker : tracker, {
+        partial: true,
+      });
+      return;
+    }
+  }
+
+  renderZapReceipts(
+    aggregatedReceipts.length ? aggregatedReceipts : aggregatedTracker,
+    { partial: false }
+  );
+  setZapStatus("Retry completed successfully.", "success");
+  app?.showSuccess?.("Failed shares retried successfully.");
+  resetZapRetryState();
+}
+
+function handleZapButtonClick(event) {
+  if (event) {
+    event.preventDefault();
+  }
+
+  const zapButton = getChannelZapButton();
+  if (!zapButton) {
+    return;
+  }
+
+  if (!isZapControlsOpen()) {
+    openZapControls({ focus: true });
+    return;
+  }
+
+  if (zapInFlight) {
+    return;
+  }
+
+  closeZapControls({ focusButton: true });
+}
+
+async function handleZapSend(event) {
+  if (event?.preventDefault) {
+    event.preventDefault();
+  }
+
+  const zapButton = getChannelZapButton();
+  const amountInput = getZapAmountInput();
+  const sendButton = getZapSendButton();
+  const app = getApp();
+
+  if (!amountInput || !sendButton) {
+    return;
+  }
+
+  if (!isZapControlsOpen()) {
+    openZapControls({ focus: true });
+    return;
+  }
+
+  if (!currentChannelLightningAddress) {
+    const message = "This creator has not configured a Lightning address yet.";
+    setZapStatus(message, "error");
+    app?.showError?.(message);
+    return;
+  }
+
+  if (zapInFlight) {
+    return;
+  }
+
+  const walletSettings = getWalletSettingsOrPrompt();
+  if (!walletSettings) {
+    return;
+  }
+
+  zapInFlight = true;
+  if (zapButton) {
+    zapButton.disabled = true;
+    zapButton.setAttribute("aria-disabled", "true");
+  }
+  sendButton.disabled = true;
+  sendButton.setAttribute("aria-busy", "true");
+  sendButton.classList.add("opacity-50", "pointer-events-none");
+  amountInput.disabled = true;
+
+  let attemptedAmount = null;
+  try {
+    if (pendingZapRetry?.shares?.length) {
+      await executePendingRetry({ walletSettings });
+      return;
+    }
+
+    const amount = Math.max(0, Math.round(Number(amountInput.value || 0)));
+    attemptedAmount = amount;
+    if (!amount) {
+      const message = "Enter a zap amount greater than zero.";
+      setZapStatus(message, "error");
+      app?.showError?.(message);
+      return;
+    }
+
+    clearZapReceipts();
+    setZapStatus(`Sending ${amount} sats…`, "warning");
+
+    const attempt = await runZapAttempt({ amount, walletSettings });
+    if (!attempt) {
+      setZapStatus("", "neutral");
+      return;
+    }
+
+    const { context, result } = attempt;
+    const receipts = Array.isArray(result?.receipts) ? result.receipts : [];
+    renderZapReceipts(receipts, { partial: false });
+
+    const creatorShare = context.shares.creatorShare;
+    const platformShare = context.shares.platformShare;
+    const summary = platformShare
+      ? `Sent ${context.shares.total} sats (creator ${creatorShare}, platform ${platformShare}).`
+      : `Sent ${context.shares.total} sats to the creator.`;
+    setZapStatus(summary, "success");
+    app?.showSuccess?.("Zap sent successfully!");
+    resetZapRetryState();
+  } catch (error) {
+    const tracker = Array.isArray(error?.__zapShareTracker)
+      ? error.__zapShareTracker
+      : [];
+    logZapError(
+      "handleZapSend",
+      {
+        amount: attemptedAmount,
+        walletSettings,
+        tracker,
+        retryAttempt:
+          Array.isArray(pendingZapRetry?.shares) && pendingZapRetry.shares.length
+            ? pendingZapRetry.shares.length
+            : undefined,
+      },
+      error
+    );
+    if (tracker.length) {
+      renderZapReceipts(tracker, { partial: true });
+    }
+
+    const failureShares = tracker.filter(
+      (entry) => entry && entry.status !== "success" && entry.amount > 0
+    );
+    if (failureShares.length) {
+      markZapRetryPending(failureShares);
+      const summary = failureShares
+        .map((share) => `${describeShareType(share.type)} ${share.amount} sats`)
+        .join(", ");
+      const tone = tracker.length > failureShares.length ? "warning" : "error";
+      const statusMessage =
+        tracker.length > failureShares.length
+          ? `Partial zap failure. Press Send again to retry: ${summary}.`
+          : `Zap failed. Press Send again to retry: ${summary}.`;
+      setZapStatus(statusMessage, tone);
+      app?.showError?.(error?.message || statusMessage);
+    } else {
+      resetZapRetryState();
+      const message = error?.message || "Zap failed. Please try again.";
+      setZapStatus(message, "error");
+      app?.showError?.(message);
+    }
+  } finally {
+    zapInFlight = false;
+    if (zapButton) {
+      zapButton.disabled = false;
+      zapButton.removeAttribute("aria-disabled");
+    }
+    sendButton.disabled = false;
+    sendButton.removeAttribute("aria-busy");
+    sendButton.classList.remove("opacity-50", "pointer-events-none");
+    amountInput.disabled = false;
+  }
+}
+
 function buildChannelShareUrl() {
   if (!currentChannelNpub) {
     return "";
   }
 
-  const base = typeof app.getShareUrlBase === "function" ? app.getShareUrlBase() : "";
+  const app = getApp();
+  const base =
+    typeof app?.getShareUrlBase === "function" ? app.getShareUrlBase() : "";
   if (base) {
     return `${base}#view=channel-profile&npub=${encodeURIComponent(currentChannelNpub)}`;
   }
@@ -108,6 +1210,8 @@ function setupChannelShareButton() {
     return;
   }
 
+  const app = getApp();
+
   syncChannelShareButtonState();
 
   if (shareBtn.dataset.initialized === "true") {
@@ -117,14 +1221,14 @@ function setupChannelShareButton() {
   shareBtn.addEventListener("click", () => {
     const shareUrl = buildChannelShareUrl();
     if (!shareUrl) {
-      app.showError("Could not generate channel link.");
+      app?.showError?.("Could not generate channel link.");
       return;
     }
 
     navigator.clipboard
       .writeText(shareUrl)
-      .then(() => app.showSuccess("Channel link copied to clipboard!"))
-      .catch(() => app.showError("Failed to copy the link."));
+      .then(() => app?.showSuccess?.("Channel link copied to clipboard!"))
+      .catch(() => app?.showError?.("Failed to copy the link."));
   });
 
   shareBtn.dataset.initialized = "true";
@@ -135,7 +1239,8 @@ function setupChannelMoreMenu() {
   if (!container) {
     return;
   }
-  app.attachMoreMenuHandlers(container);
+  const app = getApp();
+  app?.attachMoreMenuHandlers?.(container);
 }
 
 async function updateChannelMenuState() {
@@ -144,6 +1249,8 @@ async function updateChannelMenuState() {
     return;
   }
 
+  const app = getApp();
+
   try {
     await accessControl.ensureReady();
   } catch (error) {
@@ -151,7 +1258,7 @@ async function updateChannelMenuState() {
   }
 
   const canBlacklist =
-    typeof app.canCurrentUserManageBlacklist === "function"
+    typeof app?.canCurrentUserManageBlacklist === "function"
       ? app.canCurrentUserManageBlacklist()
       : false;
 
@@ -225,6 +1332,12 @@ export async function initChannelProfileView() {
 
   currentChannelHex = null;
   currentChannelNpub = null;
+  currentChannelLightningAddress = "";
+  currentChannelProfileEvent = null;
+  setCachedPlatformLightningAddress("");
+  resetZapRetryState();
+  clearZapReceipts();
+  setZapStatus("", "neutral");
 
   // 2) Decode npub => hex pubkey
   let hexPub;
@@ -243,14 +1356,26 @@ export async function initChannelProfileView() {
   currentChannelHex = hexPub;
   currentChannelNpub = npub;
 
+  const app = getApp();
+
   setupChannelShareButton();
   setupChannelMoreMenu();
-  await updateChannelMenuState();
 
+  const initialMenuRefresh = updateChannelMenuState().catch((error) => {
+    console.error("Failed to prepare channel menu state:", error);
+  });
+
+  let subscriptionsTask = null;
   // 3) If user is logged in, load subscriptions and show sub/unsub button
-  if (app.pubkey) {
-    await subscriptions.loadSubscriptions(app.pubkey);
-    renderSubscribeButton(hexPub);
+  if (app?.pubkey) {
+    subscriptionsTask = subscriptions
+      .loadSubscriptions(app.pubkey)
+      .catch((error) => {
+        console.error("Failed to load subscriptions for channel view:", error);
+      })
+      .finally(() => {
+        renderSubscribeButton(hexPub);
+      });
   } else {
     const btn = document.getElementById("subscribeBtnArea");
     if (btn) btn.classList.add("hidden");
@@ -259,30 +1384,76 @@ export async function initChannelProfileView() {
   setupZapButton();
   syncChannelShareButtonState();
 
-  // 4) Load user’s profile (banner, avatar, etc.)
-  await loadUserProfile(hexPub);
-  await updateChannelMenuState();
-  syncChannelShareButtonState();
+  // 4) Load user’s profile (banner, avatar, etc.) and channel videos
+  const profilePromise = loadUserProfile(hexPub)
+    .then(() => updateChannelMenuState())
+    .catch((error) => {
+      console.error("Failed to load channel profile:", error);
+    })
+    .finally(() => {
+      syncChannelShareButtonState();
+    });
 
-  // 5) Load user’s videos (filtered + rendered like the home feed)
-  await loadUserVideos(hexPub);
+  const videosPromise = loadUserVideos(hexPub).catch((error) => {
+    console.error("Failed to load channel videos:", error);
+  });
+
+  const pendingTasks = [profilePromise, videosPromise];
+  if (initialMenuRefresh) {
+    pendingTasks.push(initialMenuRefresh);
+  }
+  if (subscriptionsTask) {
+    pendingTasks.push(subscriptionsTask);
+  }
+
+  await Promise.allSettled(pendingTasks);
 }
 
 function setupZapButton() {
   const zapButton = getChannelZapButton();
-  if (!zapButton) {
+  const amountInput = getZapAmountInput();
+  const controls = getZapControlsContainer();
+  const zapForm = getZapFormElement();
+  if (!zapButton || !amountInput || !controls || !zapForm || !getZapSendButton()) {
     return;
   }
 
   setChannelZapVisibility(false);
+  controls.classList.add("hidden");
+  controls.setAttribute("aria-hidden", "true");
+  zapButton.setAttribute("aria-expanded", "false");
+  setupZapWalletLink();
+  const closeBtn = getZapCloseButton();
+  if (closeBtn && closeBtn.dataset.initialized !== "true") {
+    closeBtn.addEventListener("click", (event) => {
+      event?.preventDefault?.();
+      closeZapControls({ focusButton: true });
+    });
+    closeBtn.dataset.initialized = "true";
+  }
 
   if (zapButton.dataset.initialized === "true") {
+    updateZapSplitSummary();
     return;
   }
 
-  zapButton.addEventListener("click", () => {
-    window.alert("Zaps coming soon.");
-  });
+  const app = getApp();
+  const activeSettings =
+    typeof app?.getActiveNwcSettings === "function"
+      ? app.getActiveNwcSettings()
+      : {};
+  if (Number.isFinite(activeSettings?.defaultZap) && activeSettings.defaultZap > 0) {
+    amountInput.value = Math.max(0, Math.round(activeSettings.defaultZap));
+  }
+
+  updateZapSplitSummary();
+  amountInput.addEventListener("input", handleZapAmountChange);
+  amountInput.addEventListener("change", handleZapAmountChange);
+  if (zapForm.dataset.initialized !== "true") {
+    zapForm.addEventListener("submit", handleZapSend);
+    zapForm.dataset.initialized = "true";
+  }
+  zapButton.addEventListener("click", handleZapButtonClick);
   zapButton.dataset.initialized = "true";
 }
 
@@ -294,6 +1465,8 @@ function renderSubscribeButton(channelHex) {
   const container = document.getElementById("subscribeBtnArea");
   if (!container) return;
 
+  const app = getApp();
+
   container.classList.remove("hidden");
   const alreadySubscribed = subscriptions.isSubscribed(channelHex);
 
@@ -318,7 +1491,7 @@ function renderSubscribeButton(channelHex) {
   const toggleBtn = document.getElementById("subscribeToggleBtn");
   if (toggleBtn) {
     toggleBtn.addEventListener("click", async () => {
-      if (!app.pubkey) {
+      if (!app?.pubkey) {
         console.error("Not logged in => cannot subscribe/unsubscribe.");
         return;
       }
@@ -337,83 +1510,660 @@ function renderSubscribeButton(channelHex) {
   }
 }
 
-/**
- * Fetches and displays the user's metadata (kind=0).
- */
-async function loadUserProfile(pubkey) {
+function trimProfileString(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  return value.trim();
+}
+
+function normalizeChannelProfileMetadata(raw = {}) {
+  const name =
+    trimProfileString(raw.display_name) ||
+    trimProfileString(raw.name) ||
+    "Unknown User";
+  const picture =
+    trimProfileString(raw.picture) || trimProfileString(raw.image) || FALLBACK_CHANNEL_AVATAR;
+  const about = trimProfileString(raw.about || raw.bio);
+  const website = trimProfileString(raw.website || raw.url);
+  const banner =
+    trimProfileString(raw.banner || raw.header || raw.background) || "";
+  const lud16 = trimProfileString(raw.lud16);
+  const lud06 = trimProfileString(raw.lud06);
+  const lightningAddress =
+    trimProfileString(raw.lightningAddress) || lud16 || lud06 || "";
+
+  return {
+    name,
+    picture,
+    about,
+    website,
+    banner,
+    lud16,
+    lud06,
+    lightningAddress,
+  };
+}
+
+function rememberChannelProfile(pubkey, { profile = {}, event = null } = {}) {
+  if (typeof pubkey !== "string" || !pubkey) {
+    return;
+  }
+
+  channelProfileMetadataCache.set(pubkey, {
+    timestamp: Date.now(),
+    profile: normalizeChannelProfileMetadata(profile),
+    event: event ? { ...event } : null,
+  });
+}
+
+function getCachedChannelProfile(pubkey) {
+  const entry = channelProfileMetadataCache.get(pubkey);
+  if (!entry) {
+    return null;
+  }
+
+  if (
+    typeof entry.timestamp !== "number" ||
+    Date.now() - entry.timestamp > PROFILE_EVENT_CACHE_TTL_MS
+  ) {
+    channelProfileMetadataCache.delete(pubkey);
+    return null;
+  }
+
+  return {
+    profile: entry.profile,
+    event: entry.event ? { ...entry.event } : null,
+  };
+}
+
+function isValidRelayUrl(url) {
+  if (typeof url !== "string") {
+    return false;
+  }
+
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return false;
+  }
+
+  if (!/^wss?:\/\//i.test(trimmed)) {
+    return false;
+  }
+
+  if (/\s/.test(trimmed)) {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(trimmed);
+    return Boolean(parsed.hostname);
+  } catch (error) {
+    return false;
+  }
+}
+
+function getCachedChannelVideoEvents(pubkey) {
+  if (!nostrClient?.allEvents || typeof nostrClient.allEvents.forEach !== "function") {
+    return [];
+  }
+
+  const normalized = typeof pubkey === "string" ? pubkey.trim().toLowerCase() : "";
+  if (!normalized) {
+    return [];
+  }
+
+  const results = [];
+  nostrClient.allEvents.forEach((event) => {
+    if (
+      event &&
+      event.kind === 30078 &&
+      typeof event.pubkey === "string" &&
+      event.pubkey.trim().toLowerCase() === normalized
+    ) {
+      results.push(event);
+    }
+  });
+
+  return results;
+}
+
+function buildRenderableChannelVideos({ events = [], app } = {}) {
+  if (!Array.isArray(events) || events.length === 0) {
+    return [];
+  }
+
+  const convertedVideos = events
+    .map((evt) => sharedConvertEventToVideo(evt))
+    .filter((vid) => vid && !vid.invalid);
+
+  if (!convertedVideos.length) {
+    return [];
+  }
+
+  const dedupedById = new Map();
+  convertedVideos.forEach((video) => {
+    if (video?.id && !dedupedById.has(video.id)) {
+      dedupedById.set(video.id, video);
+    }
+  });
+
+  const uniqueVideos = Array.from(dedupedById.values());
+
+  const newestByRoot =
+    app?.dedupeVideosByRoot?.(uniqueVideos) ?? dedupeToNewestByRoot(uniqueVideos);
+
+  let videos = newestByRoot.filter((video) => !video.deleted);
+  videos = videos.filter((video) => {
+    if (!video || !video.id) {
+      return false;
+    }
+
+    if (app?.blacklistedEventIds?.has?.(video.id)) {
+      return false;
+    }
+
+    if (!accessControl.canAccess(video)) {
+      return false;
+    }
+
+    return true;
+  });
+
+  videos.sort((a, b) => b.created_at - a.created_at);
+  return videos;
+}
+
+function renderChannelVideosFromList({
+  videos = [],
+  container,
+  app,
+  loadToken,
+  allowEmptyMessage = true,
+} = {}) {
+  if (!container || loadToken !== currentVideoLoadToken) {
+    return false;
+  }
+
+  if (!Array.isArray(videos) || videos.length === 0) {
+    if (allowEmptyMessage) {
+      container.dataset.hasChannelVideos = "false";
+      container.innerHTML = `<p class="text-gray-500">No videos to display.</p>`;
+      return true;
+    }
+    return false;
+  }
+
+  container.dataset.hasChannelVideos = "true";
+  container.innerHTML = "";
+
+  const fragment = document.createDocumentFragment();
+  const allKnownEventsArray = Array.from(nostrClient.allEvents.values());
+  const loadedThumbnails =
+    app?.loadedThumbnails instanceof Map ? app.loadedThumbnails : null;
+  const unsupportedBtihMessage =
+    typeof app?.getUnsupportedBtihMessage === "function"
+      ? app.getUnsupportedBtihMessage()
+      : "This magnet link is missing a compatible BitTorrent v1 info hash.";
+
+  const fallbackNormalizePubkey = (value) =>
+    typeof value === "string" && value
+      ? value.trim().toLowerCase()
+      : "";
+  const normalizePubkey =
+    typeof app?.normalizeHexPubkey === "function"
+      ? (value) => app.normalizeHexPubkey(value) || fallbackNormalizePubkey(value)
+      : fallbackNormalizePubkey;
+  const normalizedViewerPubkey = normalizePubkey(app?.pubkey);
+  let renderIndex = 0;
+
+  const extractPlaybackDetail = (trigger, video) => {
+    if (
+      app?.videoListView &&
+      typeof app.videoListView.extractPlaybackDetail === "function"
+    ) {
+      return app.videoListView.extractPlaybackDetail(trigger, video);
+    }
+
+    const element = trigger instanceof HTMLElement ? trigger : null;
+    const target = element?.closest("[data-play-url],[data-play-magnet]") || element;
+
+    const rawUrlValue =
+      (target?.dataset && typeof target.dataset.playUrl === "string"
+        ? target.dataset.playUrl
+        : null) ?? target?.getAttribute?.("data-play-url") ?? "";
+    const rawMagnetValue =
+      (target?.dataset && typeof target.dataset.playMagnet === "string"
+        ? target.dataset.playMagnet
+        : null) ?? target?.getAttribute?.("data-play-magnet") ?? "";
+
+    let url = "";
+    if (rawUrlValue) {
+      try {
+        url = decodeURIComponent(rawUrlValue);
+      } catch (error) {
+        url = rawUrlValue;
+      }
+    }
+
+    const magnet = typeof rawMagnetValue === "string" ? rawMagnetValue : "";
+    const videoId =
+      target?.dataset?.videoId ||
+      target?.getAttribute?.("data-video-id") ||
+      video?.id ||
+      "";
+
+    return { videoId, url, magnet, video };
+  };
+
+  const playbackHandler =
+    typeof app?.videoListViewPlaybackHandler === "function"
+      ? app.videoListViewPlaybackHandler.bind(app)
+      : null;
+
+  const startPlayback = (detail) => {
+    if (playbackHandler) {
+      playbackHandler(detail);
+      return;
+    }
+
+    if (detail.videoId && typeof app?.playVideoByEventId === "function") {
+      Promise.resolve(
+        app.playVideoByEventId(detail.videoId, {
+          url: detail.url,
+          magnet: detail.magnet,
+          title: detail.video?.title,
+          description: detail.video?.description,
+        })
+      ).catch((error) => {
+        console.error("Failed to play channel video via event id:", error);
+        if (typeof app?.playVideoWithFallback === "function") {
+          app.playVideoWithFallback({
+            url: detail.url,
+            magnet: detail.magnet,
+          });
+        }
+      });
+      return;
+    }
+
+    if (typeof app?.playVideoWithFallback === "function") {
+      Promise.resolve(
+        app.playVideoWithFallback({ url: detail.url, magnet: detail.magnet })
+      ).catch((error) => {
+        console.error("Failed to start fallback playback for channel video:", error);
+      });
+    }
+  };
+
+  videos.forEach((video) => {
+    if (!video || !video.id || !video.title) {
+      return;
+    }
+
+    const normalizedVideoPubkey = normalizePubkey(video.pubkey);
+    const canEdit =
+      Boolean(normalizedVideoPubkey) &&
+      Boolean(normalizedViewerPubkey) &&
+      normalizedVideoPubkey === normalizedViewerPubkey;
+
+    if (video.isPrivate && !canEdit) {
+      return;
+    }
+
+    app?.videosMap?.set(video.id, video);
+
+    const index = renderIndex++;
+    let hasOlder = false;
+    if (canEdit && video.videoRootId) {
+      hasOlder = app?.hasOlderVersion?.(video, allKnownEventsArray) || false;
+    }
+
+    const pointerInfo =
+      typeof app?.deriveVideoPointerInfo === "function"
+        ? app.deriveVideoPointerInfo(video)
+        : null;
+    if (pointerInfo && typeof app?.persistWatchHistoryMetadataForVideo === "function") {
+      app.persistWatchHistoryMetadataForVideo(video, pointerInfo);
+    }
+
+    const shareUrl =
+      typeof app?.buildShareUrlFromEventId === "function"
+        ? app.buildShareUrlFromEventId(video.id)
+        : "#";
+    const timeAgo =
+      typeof app?.formatTimeAgo === "function"
+        ? app.formatTimeAgo(video.created_at)
+        : new Date(video.created_at * 1000).toLocaleString();
+
+    const highlightClass =
+      canEdit && video.isPrivate ? "video-card--owner-private" : "";
+
+    const videoCard = new VideoCard({
+      document,
+      video,
+      index,
+      shareUrl,
+      pointerInfo,
+      timeAgo,
+      highlightClass,
+      capabilities: {
+        canEdit,
+        canDelete: canEdit,
+        canRevert: hasOlder,
+        canManageBlacklist:
+          typeof app?.canCurrentUserManageBlacklist === "function"
+            ? app.canCurrentUserManageBlacklist()
+            : false,
+      },
+      helpers: {
+        escapeHtml: (value) => escapeHTML(value),
+        isMagnetSupported: (magnet) => app?.isMagnetUriSupported?.(magnet),
+        toLocaleString: (value) =>
+          typeof value === "number" ? value.toLocaleString() : value,
+      },
+      assets: {
+        fallbackThumbnailSrc: "assets/jpg/video-thumbnail-fallback.jpg",
+        unsupportedBtihMessage,
+      },
+      state: { loadedThumbnails },
+      ensureGlobalMoreMenuHandlers: () => app?.ensureGlobalMoreMenuHandlers?.(),
+      onRequestCloseAllMenus: () => app?.closeAllMoreMenus?.(),
+      formatters: {
+        formatTimeAgo: (ts) =>
+          typeof app?.formatTimeAgo === "function"
+            ? app.formatTimeAgo(ts)
+            : new Date(ts * 1000).toLocaleString(),
+      },
+    });
+
+    videoCard.onPlay = ({ event: domEvent, video: cardVideo }) => {
+      const trigger = domEvent?.currentTarget || domEvent?.target;
+      const detail = extractPlaybackDetail(trigger, cardVideo || video);
+      detail.video = detail.video || video;
+      startPlayback(detail);
+    };
+
+    videoCard.onEdit = ({ video: editVideo, index: editIndex }) => {
+      app?.handleEditVideo?.({
+        eventId: editVideo?.id || "",
+        index: Number.isFinite(editIndex) ? editIndex : null,
+      });
+    };
+
+    videoCard.onRevert = ({ video: revertVideo, index: revertIndex }) => {
+      app?.handleRevertVideo?.({
+        eventId: revertVideo?.id || "",
+        index: Number.isFinite(revertIndex) ? revertIndex : null,
+      });
+    };
+
+    videoCard.onDelete = ({ video: deleteVideo, index: deleteIndex }) => {
+      app?.handleFullDeleteVideo?.({
+        eventId: deleteVideo?.id || "",
+        index: Number.isFinite(deleteIndex) ? deleteIndex : null,
+      });
+    };
+
+    videoCard.onMoreAction = ({ dataset = {} }) => {
+      const action = dataset.action || "";
+      const detail = {
+        ...dataset,
+        eventId: dataset.eventId || video.id || "",
+        context: dataset.context || "channel-grid",
+      };
+      app?.handleMoreMenuAction?.(action || "copy-link", detail);
+    };
+
+    videoCard.onAuthorNavigate = ({ pubkey }) => {
+      const targetPubkey = pubkey || video.pubkey || "";
+      if (targetPubkey && typeof app?.goToProfile === "function") {
+        app.goToProfile(targetPubkey);
+      }
+    };
+
+    const cardEl = videoCard.getRoot();
+    if (cardEl) {
+      fragment.appendChild(cardEl);
+    }
+  });
+
+  if (renderIndex === 0) {
+    if (allowEmptyMessage) {
+      container.dataset.hasChannelVideos = "false";
+      container.innerHTML = `<p class="text-gray-500">No videos to display.</p>`;
+      return true;
+    }
+    return false;
+  }
+
+  container.appendChild(fragment);
+
+  attachHealthBadges(container);
+  attachUrlHealthBadges(container, ({ badgeEl, url, eventId }) => {
+    const video = app?.videosMap?.get(eventId) || { id: eventId };
+    app?.handleUrlHealthBadge?.({ video, url, badgeEl });
+  });
+
+  app?.mountVideoListView?.();
+
+  const lazyEls = container.querySelectorAll("[data-lazy]");
+  lazyEls.forEach((el) => app?.mediaLoader?.observe?.(el));
+
+  app?.attachMoreMenuHandlers?.(container);
+
+  return true;
+}
+
+function applyChannelProfileMetadata({
+  profile = {},
+  event = null,
+  pubkey = "",
+  npub = "",
+  loadToken = null,
+} = {}) {
+  if (loadToken !== null && loadToken !== currentProfileLoadToken) {
+    return;
+  }
+
+  const normalized = normalizeChannelProfileMetadata(profile);
+
+  const bannerEl = document.getElementById("channelBanner");
+  if (bannerEl) {
+    bannerEl.src = normalized.banner || FALLBACK_CHANNEL_BANNER;
+  }
+
+  const avatarEl = document.getElementById("channelAvatar");
+  if (avatarEl) {
+    avatarEl.src = normalized.picture || FALLBACK_CHANNEL_AVATAR;
+  }
+
+  const nameEl = document.getElementById("channelName");
+  if (nameEl) {
+    nameEl.textContent = normalized.name || "Unknown User";
+  }
+
+  const channelNpubEl = document.getElementById("channelNpub");
+  if (channelNpubEl) {
+    if (npub) {
+      channelNpubEl.textContent = npub;
+    } else if (pubkey) {
+      try {
+        channelNpubEl.textContent = window.NostrTools.nip19.npubEncode(pubkey);
+      } catch (error) {
+        channelNpubEl.textContent = "";
+      }
+    }
+  }
+
+  const aboutEl = document.getElementById("channelAbout");
+  if (aboutEl) {
+    aboutEl.textContent = normalized.about || "";
+  }
+
+  const websiteEl = document.getElementById("channelWebsite");
+  if (websiteEl) {
+    if (normalized.website) {
+      websiteEl.href = normalized.website;
+      websiteEl.textContent = normalized.website;
+    } else {
+      websiteEl.textContent = "";
+      websiteEl.removeAttribute("href");
+    }
+  }
+
+  const previousLightning = currentChannelLightningAddress;
+  const lightningAddress = normalized.lightningAddress || "";
+  currentChannelLightningAddress = lightningAddress;
+
+  const lnEl = document.getElementById("channelLightning");
+  if (lnEl) {
+    lnEl.textContent =
+      lightningAddress || "No lightning address found.";
+  }
+
+  if (event) {
+    currentChannelProfileEvent = { ...event };
+  } else if (loadToken === currentProfileLoadToken && !event) {
+    currentChannelProfileEvent = null;
+  }
+
+  if (lightningAddress) {
+    if (lightningAddress !== previousLightning) {
+      fetchLightningMetadata(lightningAddress)
+        .then(() => updateZapSplitSummary())
+        .catch(() => {});
+    }
+  } else {
+    updateZapSplitSummary();
+  }
+
+  setChannelZapVisibility(Boolean(lightningAddress));
+}
+
+async function fetchChannelProfileFromRelays(pubkey) {
+  if (!nostrClient?.pool || !Array.isArray(nostrClient?.relays)) {
+    return { event: null, profile: {} };
+  }
+
   try {
     const events = await nostrClient.pool.list(nostrClient.relays, [
       { kinds: [0], authors: [pubkey], limit: 1 },
     ]);
 
-    if (events.length && events[0].content) {
-      const meta = JSON.parse(events[0].content);
-
-      // Banner
-      const bannerEl = document.getElementById("channelBanner");
-      if (bannerEl) {
-        bannerEl.src = meta.banner || "assets/jpg/default-banner.jpg";
+    let newestEvent = null;
+    for (const event of Array.isArray(events) ? events : []) {
+      if (!event || !event.content) {
+        continue;
       }
-
-      // Avatar
-      const avatarEl = document.getElementById("channelAvatar");
-      if (avatarEl) {
-        avatarEl.src = meta.picture || "assets/svg/default-profile.svg";
-      }
-
-      // Channel Name
-      const nameEl = document.getElementById("channelName");
-      if (nameEl) {
-        nameEl.textContent = meta.display_name || meta.name || "Unknown User";
-      }
-
-      // Channel npub
-      const channelNpubEl = document.getElementById("channelNpub");
-      if (channelNpubEl) {
-        const userNpub = window.NostrTools.nip19.npubEncode(pubkey);
-        channelNpubEl.textContent = userNpub;
-      }
-
-      // About/Description
-      const aboutEl = document.getElementById("channelAbout");
-      if (aboutEl) {
-        aboutEl.textContent = meta.about || "";
-      }
-
-      // Website
-      const websiteEl = document.getElementById("channelWebsite");
-      if (websiteEl) {
-        if (meta.website) {
-          websiteEl.href = meta.website;
-          websiteEl.textContent = meta.website;
-        } else {
-          websiteEl.textContent = "";
-          websiteEl.removeAttribute("href");
-        }
-      }
-
-      // Lightning Address
-      const lnEl = document.getElementById("channelLightning");
-      const lightningAddress = (meta.lud16 || meta.lud06 || "").trim();
-      if (lnEl) {
-        lnEl.textContent =
-          lightningAddress || "No lightning address found.";
-      }
-      setChannelZapVisibility(!!lightningAddress);
-    } else {
-      console.warn("No metadata found for this user.");
-      setChannelZapVisibility(false);
-      const lnEl = document.getElementById("channelLightning");
-      if (lnEl) {
-        lnEl.textContent = "No lightning address found.";
+      if (!newestEvent || event.created_at > newestEvent.created_at) {
+        newestEvent = event;
       }
     }
-  } catch (err) {
-    console.error("Failed to fetch user profile data:", err);
-    setChannelZapVisibility(false);
-    const lnEl = document.getElementById("channelLightning");
-    if (lnEl) {
-      lnEl.textContent = "No lightning address found.";
+
+    if (newestEvent?.content) {
+      try {
+        const meta = JSON.parse(newestEvent.content);
+        return { event: newestEvent, profile: meta };
+      } catch (error) {
+        console.warn("Failed to parse channel metadata payload:", error);
+        return { event: newestEvent, profile: {} };
+      }
+    }
+
+    return { event: newestEvent, profile: {} };
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * Fetches and displays the user's metadata (kind=0).
+ */
+async function loadUserProfile(pubkey) {
+  const app = getApp();
+  const loadToken = ++currentProfileLoadToken;
+
+  setChannelZapVisibility(false);
+
+  const cachedEntry = getCachedChannelProfile(pubkey);
+  if (cachedEntry) {
+    applyChannelProfileMetadata({
+      profile: cachedEntry.profile,
+      event: cachedEntry.event,
+      pubkey,
+      npub: currentChannelNpub,
+      loadToken,
+    });
+  } else {
+    const stateEntry =
+      typeof app?.getProfileCacheEntry === "function"
+        ? app.getProfileCacheEntry(pubkey)
+        : null;
+    if (stateEntry?.profile) {
+      applyChannelProfileMetadata({
+        profile: stateEntry.profile,
+        event: null,
+        pubkey,
+        npub: currentChannelNpub,
+        loadToken,
+      });
+    } else {
+      applyChannelProfileMetadata({
+        profile: {},
+        event: null,
+        pubkey,
+        npub: currentChannelNpub,
+        loadToken,
+      });
+    }
+  }
+
+  try {
+    const result = await fetchChannelProfileFromRelays(pubkey);
+    if (loadToken !== currentProfileLoadToken) {
+      return;
+    }
+
+    rememberChannelProfile(pubkey, result);
+
+    if (typeof app?.setProfileCacheEntry === "function") {
+      try {
+        app.setProfileCacheEntry(pubkey, {
+          ...result.profile,
+          lightningAddress:
+            result.profile?.lightningAddress ||
+            result.profile?.lud16 ||
+            result.profile?.lud06 ||
+            "",
+        });
+      } catch (error) {
+        console.warn(
+          "Failed to persist channel profile metadata to cache:",
+          error
+        );
+      }
+    }
+
+    applyChannelProfileMetadata({
+      profile: result.profile,
+      event: result.event,
+      pubkey,
+      npub: currentChannelNpub,
+      loadToken,
+    });
+  } catch (error) {
+    if (loadToken === currentProfileLoadToken) {
+      console.error("Failed to fetch user profile data:", error);
+      const lnEl = document.getElementById("channelLightning");
+      if (lnEl && !currentChannelLightningAddress) {
+        lnEl.textContent = "No lightning address found.";
+      }
+      if (!currentChannelLightningAddress) {
+        updateZapSplitSummary();
+        setChannelZapVisibility(false);
+      }
     }
   }
 }
@@ -423,13 +2173,54 @@ async function loadUserProfile(pubkey) {
  * Filters out older overshadowed notes, blacklisted, etc.
  */
 async function loadUserVideos(pubkey) {
-  try {
-    try {
-      await accessControl.ensureReady();
-    } catch (error) {
-      console.warn("Failed to ensure admin lists were loaded before channel fetch:", error);
-    }
+  const app = getApp();
+  const container = document.getElementById("channelVideoList");
+  const loadToken = ++currentVideoLoadToken;
+  const hadExistingContent =
+    !!container && container.querySelector("[data-video-id]");
 
+  if (container) {
+    container.dataset.loading = "true";
+    if (!hadExistingContent) {
+      container.innerHTML = `
+        <div class="py-16 flex justify-center">
+          <span class="text-gray-400 animate-pulse">Loading videos…</span>
+        </div>
+      `;
+    }
+  }
+
+  let renderedFromCache = false;
+  if (container) {
+    const cachedEvents = getCachedChannelVideoEvents(pubkey);
+    if (cachedEvents.length) {
+      const cachedVideos = buildRenderableChannelVideos({
+        events: cachedEvents,
+        app,
+      });
+      if (cachedVideos.length) {
+        renderedFromCache =
+          renderChannelVideosFromList({
+            videos: cachedVideos,
+            container,
+            app,
+            loadToken,
+            allowEmptyMessage: false,
+          }) || renderedFromCache;
+      }
+    }
+  }
+
+  const ensureAccessPromise = accessControl
+    .ensureReady()
+    .catch((error) => {
+      console.warn(
+        "Failed to ensure admin lists were loaded before channel fetch:",
+        error
+      );
+    });
+
+  try {
     // 1) Build filter for videos from this pubkey
     const filter = {
       kinds: [30078],
@@ -440,433 +2231,80 @@ async function loadUserVideos(pubkey) {
 
     // 2) Collect raw events from all relays
     const events = [];
-    for (const url of nostrClient.relays) {
+    const knownRelays = Array.isArray(nostrClient.relays)
+      ? nostrClient.relays
+      : Array.from(nostrClient.relays || []);
+    const relayList = knownRelays.filter((url) => isValidRelayUrl(url));
+
+    if (relayList.length === 0) {
       try {
-        const result = await nostrClient.pool.list([url], [filter]);
-        events.push(...result);
-      } catch (relayErr) {
-        console.error(`Relay error (${url}):`, relayErr);
+        const fallbackEvents = await nostrClient.pool.list(
+          Array.from(DEFAULT_RELAY_URLS),
+          [filter]
+        );
+        if (Array.isArray(fallbackEvents)) {
+          events.push(...fallbackEvents);
+        }
+      } catch (error) {
+        console.error("Relay error (default pool):", error);
       }
+    } else {
+      const relayPromises = relayList.map((url) =>
+        nostrClient.pool.list([url], [filter])
+      );
+
+      const settled = await Promise.allSettled(relayPromises);
+      settled.forEach((result, index) => {
+        const relayUrl = relayList[index];
+
+        if (result.status === "fulfilled") {
+          const relayEvents = Array.isArray(result.value)
+            ? result.value
+            : [];
+          events.push(...relayEvents);
+          return;
+        }
+
+        if (result.reason) {
+          console.error(`Relay error (${relayUrl}):`, result.reason);
+        }
+      });
     }
 
-    // 3) Convert to "video" objects and keep everything (including tombstones)
-    const convertedVideos = events
-      .map((evt) => sharedConvertEventToVideo(evt))
-      .filter((vid) => !vid.invalid);
+    await ensureAccessPromise;
 
-    // 4) Deduplicate older overshadowed versions => newest only
-    const newestByRoot =
-      app?.dedupeVideosByRoot?.(convertedVideos) ??
-      dedupeToNewestByRoot(convertedVideos);
+    if (loadToken !== currentVideoLoadToken) {
+      return;
+    }
 
-    // 5) Filter out tombstones, blacklisted IDs / authors
-    let videos = newestByRoot.filter((video) => !video.deleted);
-    videos = videos.filter((video) => {
-      // Event-level blacklisting
-      if (app.blacklistedEventIds.has(video.id)) return false;
-
-      // Author-level
-      if (!accessControl.canAccess(video)) return false;
-      return true;
-    });
-
-    // 6) Sort newest first
-    videos.sort((a, b) => b.created_at - a.created_at);
-
-    // 7) Render them
-    const container = document.getElementById("channelVideoList");
     if (!container) {
       console.warn("channelVideoList element not found in DOM.");
       return;
     }
-    container.innerHTML = "";
-    if (!videos.length) {
-      container.innerHTML = `<p class="text-gray-500">No videos to display.</p>`;
-      return;
-    }
 
-    const fragment = document.createDocumentFragment();
-    const allKnownEventsArray = Array.from(nostrClient.allEvents.values());
-
-    videos.forEach((video, index) => {
-      // Decrypt if user owns a private video
-      if (
-        video.isPrivate &&
-        video.pubkey === nostrClient.pubkey &&
-        !video.alreadyDecrypted
-      ) {
-        video.magnet = fakeDecrypt(video.magnet);
-        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;
-      if (canEdit && video.videoRootId) {
-        hasOlder = app.hasOlderVersion(video, allKnownEventsArray);
-      }
-
-      const revertButton = hasOlder
-        ? `
-          <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>
-        `
-        : "";
-
-      let gearMenu = "";
-      if (canEdit) {
-        gearMenu = `
-          <div class="relative inline-block ml-3 overflow-visible">
-            <button
-              type="button"
-              class="inline-flex items-center justify-center
-                    w-10 h-10 p-2
-                    rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800
-                    focus:outline-none focus:ring-2 focus:ring-blue-500"
-              data-settings-dropdown="${index}"
-            >
-              <img
-                src="assets/svg/video-settings-gear.svg"
-                alt="Settings"
-                class="w-5 h-5 object-contain"
-              />
-            </button>
-            <div
-              id="settingsDropdown-${index}"
-              class="hidden absolute right-0 bottom-full mb-2 w-32
-              rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            >
-              <div class="py-1">
-                <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>
-                ${revertButton}
-                <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>
-              </div>
-            </div>
-          </div>
-        `;
-      }
-
-      const moreMenu = `
-        <div class="relative inline-block ml-1 overflow-visible" data-more-menu-wrapper="true">
-          <button
-            type="button"
-            class="inline-flex items-center justify-center w-10 h-10 p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            data-more-dropdown="${index}"
-            aria-haspopup="true"
-            aria-expanded="false"
-            aria-label="More options"
-          >
-            <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5 object-contain" />
-          </button>
-          <div
-            id="moreDropdown-${index}"
-            class="hidden absolute right-0 bottom-full mb-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            role="menu"
-            data-more-menu="true"
-          >
-            <div class="py-1">
-              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="open-channel" data-author="${video.pubkey || ""}">
-                Open channel
-              </button>
-              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="copy-link" data-event-id="${video.id || ""}">
-                Copy link
-              </button>
-              <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white" data-action="block-author" data-author="${video.pubkey || ""}">
-                Block creator
-              </button>
-              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="report" data-event-id="${video.id || ""}">
-                Report
-              </button>
-            </div>
-          </div>
-        </div>
-      `;
-
-      const cardControls = `
-        <div class="flex items-center">
-          ${moreMenu}${gearMenu}
-        </div>
-      `;
-
-      // Fallback thumbnail
-      const fallbackThumb = "assets/jpg/video-thumbnail-fallback.jpg";
-      const safeThumb = video.thumbnail || fallbackThumb;
-      const safeTitle = escapeHTML(video.title);
-
-      const cardEl = document.createElement("div");
-      cardEl.classList.add(
-        "video-card",
-        "bg-gray-900",
-        "rounded-lg",
-        "overflow-hidden",
-        "shadow-lg",
-        "hover:shadow-2xl",
-        "transition-all",
-        "duration-300"
-      );
-
-      cardEl.dataset.ownerIsViewer = canEdit ? "true" : "false";
-      if (typeof video.pubkey === "string" && video.pubkey) {
-        cardEl.dataset.ownerPubkey = video.pubkey;
-      } else if (cardEl.dataset.ownerPubkey) {
-        delete cardEl.dataset.ownerPubkey;
-      }
-
-      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"
-          data-video-id="${video.id}"
-          data-play-url=""
-          data-play-magnet=""
-        >
-          <div class="ratio-16-9">
-            <img
-              src="${fallbackThumb}"
-              data-lazy="${escapeHTML(safeThumb)}"
-              alt="${safeTitle}"
-            />
-          </div>
-        </div>
-        <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>
-            ${cardControls}
-          </div>
-          ${connectionBadgesHtml}
-        </div>
-      `;
-
-      if (showUnsupportedTorrentBadge) {
-        cardEl.dataset.torrentSupported = "false";
-      } else if (magnetProvided && magnetSupported) {
-        cardEl.dataset.torrentSupported = "true";
-      } else if (cardEl.dataset.torrentSupported) {
-        delete cardEl.dataset.torrentSupported;
-      }
-
-      if (trimmedUrl) {
-        cardEl.dataset.urlHealthState = "checking";
-        if (cardEl.dataset.urlHealthReason) {
-          delete cardEl.dataset.urlHealthReason;
-        }
-        cardEl.dataset.urlHealthEventId = video.id || "";
-        cardEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
-      } else {
-        cardEl.dataset.urlHealthState = "offline";
-        cardEl.dataset.urlHealthReason = "missing-source";
-        if (cardEl.dataset.urlHealthEventId) {
-          delete cardEl.dataset.urlHealthEventId;
-        }
-        if (cardEl.dataset.urlHealthUrl) {
-          delete cardEl.dataset.urlHealthUrl;
-        }
-      }
-      if (magnetProvided && magnetSupported) {
-        cardEl.dataset.streamHealthState = "checking";
-        if (cardEl.dataset.streamHealthReason) {
-          delete cardEl.dataset.streamHealthReason;
-        }
-      } else {
-        cardEl.dataset.streamHealthState = "unhealthy";
-        cardEl.dataset.streamHealthReason = magnetProvided
-          ? "unsupported"
-          : "missing-source";
-      }
-
-      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;
-        }
-      });
-
-      const badgeEl = cardEl.querySelector("[data-url-health-state]");
-      if (badgeEl) {
-        if (trimmedUrl) {
-          badgeEl.dataset.urlHealthEventId = video.id || "";
-          badgeEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
-        } else {
-          if (badgeEl.dataset.urlHealthEventId) {
-            delete badgeEl.dataset.urlHealthEventId;
-          }
-          if (badgeEl.dataset.urlHealthUrl) {
-            delete badgeEl.dataset.urlHealthUrl;
-          }
-        }
-      }
-
-      fragment.appendChild(cardEl);
+    const videos = buildRenderableChannelVideos({ events, app });
+    const rendered = renderChannelVideosFromList({
+      videos,
+      container,
+      app,
+      loadToken,
+      allowEmptyMessage: true,
     });
 
-    container.appendChild(fragment);
-
-    attachHealthBadges(container);
-    attachUrlHealthBadges(container, ({ badgeEl, url, eventId }) => {
-      const video = app.videosMap.get(eventId) || { id: eventId };
-      app.handleUrlHealthBadge({ video, url, badgeEl });
-    });
-
-    window.app.attachVideoListHandler();
-
-    // Lazy-load images
-    const lazyEls = container.querySelectorAll("[data-lazy]");
-    lazyEls.forEach((el) => app.mediaLoader.observe(el));
-
-    app.attachMoreMenuHandlers(container);
-
-    // Gear menu toggles
-    const gearButtons = container.querySelectorAll("[data-settings-dropdown]");
-    gearButtons.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        const idx = btn.getAttribute("data-settings-dropdown");
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
-        if (dropdown) {
-          dropdown.classList.toggle("hidden");
-        }
-      });
-    });
-
-    // Edit handler
-    const editBtns = container.querySelectorAll("[data-edit-index]");
-    editBtns.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        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");
-        const eventId = btn.getAttribute("data-edit-event-id") || "";
-        app.handleEditVideo({
-          eventId,
-          index: Number.isNaN(idx) ? null : idx,
-        });
-      });
-    });
-
-    // Revert handler
-    const revertBtns = container.querySelectorAll("[data-revert-index]");
-    revertBtns.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        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");
-        const eventId = btn.getAttribute("data-revert-event-id") || "";
-        app.handleRevertVideo({
-          eventId,
-          index: Number.isNaN(idx) ? null : idx,
-        });
-      });
-    });
-
-    // Delete All handler
-    const deleteAllBtns = container.querySelectorAll("[data-delete-all-index]");
-    deleteAllBtns.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        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");
-        const eventId = btn.getAttribute("data-delete-all-event-id") || "";
-        app.handleFullDeleteVideo({
-          eventId,
-          index: Number.isNaN(idx) ? null : idx,
-        });
-      });
-    });
+    renderedFromCache = rendered || renderedFromCache;
   } catch (err) {
+    if (loadToken === currentVideoLoadToken && container && !renderedFromCache) {
+      container.dataset.hasChannelVideos = "false";
+      container.innerHTML = `
+        <p class="text-red-400">Failed to load videos. Please try again.</p>
+      `;
+    }
     console.error("Error loading user videos:", err);
+  } finally {
+    await ensureAccessPromise;
+    if (loadToken === currentVideoLoadToken && container) {
+      delete container.dataset.loading;
+    }
   }
 }
 
@@ -890,13 +2328,6 @@ window.addEventListener("bitvid:access-control-updated", () => {
   });
 });
 
-/**
- * Minimal placeholder for private video decryption.
- */
-function fakeDecrypt(str) {
-  return str.split("").reverse().join("");
-}
-
 /**
  * Keep only the newest version of each video root.
  */
@@ -912,14 +2343,3 @@ function dedupeToNewestByRoot(videos) {
   return Array.from(map.values());
 }
 
-/**
- * Basic escaping to avoid XSS.
- */
-function escapeHTML(unsafe = "") {
-  return unsafe
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-}
diff --git a/js/config.js b/js/config.js
index 9e342839..330819b1 100644
--- a/js/config.js
+++ b/js/config.js
@@ -2,6 +2,12 @@
 
 import {
   ADMIN_SUPER_NPUB,
+  ADMIN_DM_IMAGE_URL,
+  BITVID_WEBSITE_URL,
+  MAX_WALLET_DEFAULT_ZAP,
+  PLATFORM_FEE_PERCENT,
+  PLATFORM_LUD16_OVERRIDE,
+  DEFAULT_RELAY_URLS_OVERRIDE,
   ADMIN_WHITELIST_MODE_STORAGE_KEY,
   DEFAULT_WHITELIST_MODE_ENABLED,
   WATCH_HISTORY_KIND,
@@ -16,6 +22,7 @@ import {
   VIEW_COUNT_DEDUPE_WINDOW_SECONDS,
   VIEW_COUNT_BACKFILL_MAX_DAYS,
   VIEW_COUNT_CACHE_TTL_MS,
+  ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS,
 } from "../config/instance-config.js";
 
 export const isDevMode = true; // Set to false for production
@@ -26,6 +33,12 @@ export const isDevMode = true; // Set to false for production
 
 export const ADMIN_LIST_MODE = "nostr";
 export { ADMIN_SUPER_NPUB };
+export { ADMIN_DM_IMAGE_URL };
+export { BITVID_WEBSITE_URL };
+export { MAX_WALLET_DEFAULT_ZAP };
+export { PLATFORM_FEE_PERCENT };
+export { PLATFORM_LUD16_OVERRIDE };
+export { DEFAULT_RELAY_URLS_OVERRIDE };
 export const ADMIN_EDITORS_NPUBS = []; // Default moderators (optional)
 export const ADMIN_LIST_NAMESPACE = "bitvid:admin"; // Reserved for Nostr lists
 
@@ -71,3 +84,4 @@ export { WATCH_HISTORY_CACHE_TTL_MS };
 export { VIEW_COUNT_DEDUPE_WINDOW_SECONDS };
 export { VIEW_COUNT_BACKFILL_MAX_DAYS };
 export { VIEW_COUNT_CACHE_TTL_MS };
+export { ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS };
diff --git a/js/constants.js b/js/constants.js
index c13c4ab2..069333a0 100644
--- a/js/constants.js
+++ b/js/constants.js
@@ -3,6 +3,7 @@ const DEFAULT_FLAGS = Object.freeze({
   ACCEPT_LEGACY_V1: true, // accept v1 magnet-only notes
   VIEW_FILTER_INCLUDE_LEGACY_VIDEO: false,
   FEATURE_WATCH_HISTORY_V2: false,
+  FEATURE_PUBLISH_NIP71: false,
   WSS_TRACKERS: Object.freeze([
     "wss://tracker.openwebtorrent.com",
     "wss://tracker.fastcast.nz",
@@ -23,6 +24,7 @@ const runtimeFlags = (() => {
     VIEW_FILTER_INCLUDE_LEGACY_VIDEO:
       DEFAULT_FLAGS.VIEW_FILTER_INCLUDE_LEGACY_VIDEO,
     FEATURE_WATCH_HISTORY_V2: DEFAULT_FLAGS.FEATURE_WATCH_HISTORY_V2,
+    FEATURE_PUBLISH_NIP71: DEFAULT_FLAGS.FEATURE_PUBLISH_NIP71,
     WSS_TRACKERS: [...DEFAULT_FLAGS.WSS_TRACKERS],
   };
   if (globalScope) {
@@ -108,6 +110,11 @@ export let FEATURE_WATCH_HISTORY_V2 = coerceBoolean(
   DEFAULT_FLAGS.FEATURE_WATCH_HISTORY_V2
 );
 
+export let FEATURE_PUBLISH_NIP71 = coerceBoolean(
+  runtimeFlags.FEATURE_PUBLISH_NIP71,
+  DEFAULT_FLAGS.FEATURE_PUBLISH_NIP71
+);
+
 export let WSS_TRACKERS = freezeTrackers(
   sanitizeTrackerList(runtimeFlags.WSS_TRACKERS)
 );
@@ -162,6 +169,20 @@ Object.defineProperty(runtimeFlags, "FEATURE_WATCH_HISTORY_V2", {
   },
 });
 
+Object.defineProperty(runtimeFlags, "FEATURE_PUBLISH_NIP71", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return FEATURE_PUBLISH_NIP71;
+  },
+  set(next) {
+    FEATURE_PUBLISH_NIP71 = coerceBoolean(
+      next,
+      DEFAULT_FLAGS.FEATURE_PUBLISH_NIP71
+    );
+  },
+});
+
 Object.defineProperty(runtimeFlags, "WSS_TRACKERS", {
   configurable: true,
   enumerable: true,
@@ -178,6 +199,7 @@ runtimeFlags.URL_FIRST_ENABLED = URL_FIRST_ENABLED;
 runtimeFlags.ACCEPT_LEGACY_V1 = ACCEPT_LEGACY_V1;
 runtimeFlags.VIEW_FILTER_INCLUDE_LEGACY_VIDEO = VIEW_FILTER_INCLUDE_LEGACY_VIDEO;
 runtimeFlags.FEATURE_WATCH_HISTORY_V2 = FEATURE_WATCH_HISTORY_V2;
+runtimeFlags.FEATURE_PUBLISH_NIP71 = FEATURE_PUBLISH_NIP71;
 runtimeFlags.WSS_TRACKERS = WSS_TRACKERS;
 
 export function setUrlFirstEnabled(next) {
diff --git a/js/feedEngine/engine.js b/js/feedEngine/engine.js
new file mode 100644
index 00000000..95b4cbdd
--- /dev/null
+++ b/js/feedEngine/engine.js
@@ -0,0 +1,232 @@
+// js/feedEngine/engine.js
+
+import { isPlainObject } from "./utils.js";
+
+const DEFAULT_FEED_CONFIG = Object.freeze({
+  timeWindow: null,
+  actorFilters: [],
+  tagFilters: [],
+  sortOrder: "recent",
+});
+
+const DEFAULT_CONFIG_SCHEMA = Object.freeze({
+  timeWindow: {
+    type: "relative-window",
+    description:
+      "Restrict results to a rolling time window (e.g., last 24 hours).",
+    default: null,
+  },
+  actorFilters: {
+    type: "string[]",
+    description: "Optional list of author pubkeys to include in the feed.",
+    default: [],
+  },
+  tagFilters: {
+    type: "string[]",
+    description: "Optional list of tag identifiers to include in the feed.",
+    default: [],
+  },
+  sortOrder: {
+    type: "enum",
+    values: ["recent"],
+    description:
+      "Controls the final ordering of the feed. Currently only 'recent' is implemented.",
+    default: "recent",
+  },
+});
+
+function normalizeLogger(logger) {
+  if (typeof logger === "function") {
+    return logger;
+  }
+  if (logger && typeof logger.log === "function") {
+    return (...args) => logger.log(...args);
+  }
+  return () => {};
+}
+
+function normalizeArray(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((entry) => typeof entry === "function");
+}
+
+function normalizeDto(candidate) {
+  if (!candidate || typeof candidate !== "object") {
+    return null;
+  }
+
+  const video = candidate.video ?? null;
+  const pointer = candidate.pointer ?? null;
+  const metadata = isPlainObject(candidate.metadata)
+    ? { ...candidate.metadata }
+    : {};
+
+  return { video, pointer, metadata };
+}
+
+function normalizeItems(items) {
+  if (!Array.isArray(items)) {
+    return [];
+  }
+  const normalized = [];
+  for (const candidate of items) {
+    const dto = normalizeDto(candidate);
+    if (dto) {
+      normalized.push(dto);
+    }
+  }
+  return normalized;
+}
+
+function createExecutionContext(entry, { config, hooks, runtime, logger }) {
+  const whyLog = [];
+  const resolvedLogger = normalizeLogger(logger);
+
+  const context = {
+    feedName: entry.name,
+    config: { ...entry.defaultConfig, ...(isPlainObject(config) ? config : {}) },
+    hooks: isPlainObject(hooks) ? { ...entry.hooks, ...hooks } : { ...entry.hooks },
+    runtime: isPlainObject(runtime) ? { ...runtime } : {},
+    log: (...args) => {
+      try {
+        resolvedLogger(`[feed:${entry.name}]`, ...args);
+      } catch (error) {
+        console.warn(`[feed:${entry.name}] logger threw`, error);
+      }
+    },
+    addWhy: (detail) => {
+      if (!isPlainObject(detail)) {
+        return;
+      }
+      const record = { feed: entry.name, ...detail };
+      whyLog.push(record);
+      return record;
+    },
+    getWhy: () => whyLog.slice(),
+  };
+
+  return context;
+}
+
+function normalizeDefinition(name, definition = {}) {
+  if (typeof name !== "string" || !name.trim()) {
+    throw new Error("Feed name must be a non-empty string");
+  }
+
+  if (typeof definition.source !== "function") {
+    throw new Error(`Feed \"${name}\" is missing a source function`);
+  }
+
+  const stages = normalizeArray(definition.stages);
+  const decorators = normalizeArray(definition.decorators);
+  const sorter =
+    typeof definition.sorter === "function" ? definition.sorter : null;
+  const hooks = isPlainObject(definition.hooks) ? { ...definition.hooks } : {};
+  const defaultConfig = {
+    ...DEFAULT_FEED_CONFIG,
+    ...(isPlainObject(definition.defaultConfig) ? definition.defaultConfig : {}),
+  };
+  const configSchema = isPlainObject(definition.configSchema)
+    ? { ...DEFAULT_CONFIG_SCHEMA, ...definition.configSchema }
+    : { ...DEFAULT_CONFIG_SCHEMA };
+
+  return {
+    name,
+    source: definition.source,
+    stages,
+    sorter,
+    decorators,
+    hooks,
+    defaultConfig,
+    configSchema,
+    publicDefinition: Object.freeze({
+      name,
+      configDefaults: { ...defaultConfig },
+      configSchema: { ...configSchema },
+    }),
+  };
+}
+
+export function createFeedEngine({ logger } = {}) {
+  const feeds = new Map();
+  const resolvedLogger = normalizeLogger(logger);
+
+  function registerFeed(name, definition) {
+    if (feeds.has(name)) {
+      throw new Error(`Feed \"${name}\" is already registered`);
+    }
+
+    const entry = normalizeDefinition(name, definition);
+    feeds.set(name, entry);
+    return entry.publicDefinition;
+  }
+
+  async function runFeed(name, options = {}) {
+    const entry = feeds.get(name);
+    if (!entry) {
+      throw new Error(`Feed \"${name}\" is not registered`);
+    }
+
+    const context = createExecutionContext(entry, {
+      config: options.config,
+      hooks: options.hooks,
+      runtime: options.runtime,
+      logger: resolvedLogger,
+    });
+
+    const sourceResult = await entry.source(context);
+    let items = normalizeItems(await Promise.resolve(sourceResult));
+
+    for (const stage of entry.stages) {
+      const result = await stage(items, context);
+      if (Array.isArray(result)) {
+        items = normalizeItems(result);
+      } else if (result == null) {
+        items = normalizeItems(items);
+      }
+    }
+
+    if (entry.sorter) {
+      const sorted = await entry.sorter(items, context);
+      if (Array.isArray(sorted)) {
+        items = normalizeItems(sorted);
+      }
+    }
+
+    for (const decorator of entry.decorators) {
+      const decorated = await decorator(items, context);
+      if (Array.isArray(decorated)) {
+        items = normalizeItems(decorated);
+      }
+    }
+
+    return {
+      items,
+      videos: items.map((item) => item.video).filter(Boolean),
+      metadata: {
+        why: context.getWhy(),
+        config: context.config,
+      },
+    };
+  }
+
+  function listFeeds() {
+    return Array.from(feeds.values()).map((entry) => entry.publicDefinition);
+  }
+
+  function getFeedDefinition(name) {
+    const entry = feeds.get(name);
+    return entry ? entry.publicDefinition : null;
+  }
+
+  return {
+    registerFeed,
+    runFeed,
+    listFeeds,
+    getFeedDefinition,
+  };
+}
+
+export { DEFAULT_FEED_CONFIG, DEFAULT_CONFIG_SCHEMA };
diff --git a/js/feedEngine/index.js b/js/feedEngine/index.js
new file mode 100644
index 00000000..d7c968c2
--- /dev/null
+++ b/js/feedEngine/index.js
@@ -0,0 +1,19 @@
+// js/feedEngine/index.js
+
+export {
+  createFeedEngine,
+  DEFAULT_FEED_CONFIG,
+  DEFAULT_CONFIG_SCHEMA,
+} from "./engine.js";
+export {
+  createDedupeByRootStage,
+  createBlacklistFilterStage,
+  createWatchHistorySuppressionStage,
+} from "./stages.js";
+export { createChronologicalSorter } from "./sorters.js";
+export {
+  createActiveNostrSource,
+  createSubscriptionAuthorsSource,
+  createWatchHistoryPointerSource,
+} from "./sources.js";
+export { createWatchHistoryFeedDefinition, registerWatchHistoryFeed } from "./watchHistoryFeed.js";
diff --git a/js/feedEngine/sorters.js b/js/feedEngine/sorters.js
new file mode 100644
index 00000000..2deb04fb
--- /dev/null
+++ b/js/feedEngine/sorters.js
@@ -0,0 +1,32 @@
+// js/feedEngine/sorters.js
+
+export function createChronologicalSorter({ direction = "desc" } = {}) {
+  const normalizedDirection = direction === "asc" ? "asc" : "desc";
+
+  return function chronologicalSorter(items = []) {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+
+    const copy = [...items];
+    copy.sort((a, b) => {
+      const aTs = Number(a?.video?.created_at);
+      const bTs = Number(b?.video?.created_at);
+      const normalizedATs = Number.isFinite(aTs) ? aTs : Number.NEGATIVE_INFINITY;
+      const normalizedBTs = Number.isFinite(bTs) ? bTs : Number.NEGATIVE_INFINITY;
+
+      if (normalizedATs !== normalizedBTs) {
+        const diff = normalizedATs - normalizedBTs;
+        return normalizedDirection === "asc" ? diff : -diff;
+      }
+
+      const aId = typeof a?.video?.id === "string" ? a.video.id : "";
+      const bId = typeof b?.video?.id === "string" ? b.video.id : "";
+      return normalizedDirection === "asc"
+        ? aId.localeCompare(bId)
+        : bId.localeCompare(aId);
+    });
+
+    return copy;
+  };
+}
diff --git a/js/feedEngine/sources.js b/js/feedEngine/sources.js
new file mode 100644
index 00000000..494773fc
--- /dev/null
+++ b/js/feedEngine/sources.js
@@ -0,0 +1,198 @@
+// js/feedEngine/sources.js
+
+import nostrService from "../services/nostrService.js";
+import watchHistoryService from "../watchHistoryService.js";
+import { isPlainObject, toArray, toSet } from "./utils.js";
+
+function resolveService(candidate, fallback) {
+  if (candidate && typeof candidate === "object") {
+    return candidate;
+  }
+  return fallback;
+}
+
+function normalizeAuthor(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  return trimmed;
+}
+
+function normalizeActorCandidate(...values) {
+  for (const value of values) {
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      if (trimmed) {
+        return trimmed;
+      }
+    }
+  }
+  return "";
+}
+
+export function createActiveNostrSource({ service } = {}) {
+  const resolvedService = resolveService(service, nostrService);
+
+  return async function activeNostrSource(context = {}) {
+    const options = {
+      blacklistedEventIds: toSet(context?.runtime?.blacklistedEventIds),
+      isAuthorBlocked:
+        typeof context?.runtime?.isAuthorBlocked === "function"
+          ? context.runtime.isAuthorBlocked
+          : () => false,
+    };
+
+    let videos = [];
+    try {
+      videos = await Promise.resolve(
+        resolvedService.getFilteredActiveVideos(options)
+      );
+    } catch (error) {
+      context?.log?.("[active-source] Failed to resolve active videos", error);
+      videos = [];
+    }
+
+    return (Array.isArray(videos) ? videos : []).map((video) => ({
+      video,
+      metadata: {
+        source: "nostr:active",
+      },
+    }));
+  };
+}
+
+export function createSubscriptionAuthorsSource({ service } = {}) {
+  const resolvedService = resolveService(service, nostrService);
+
+  return async function subscriptionAuthorsSource(context = {}) {
+    const runtimeAuthors = toArray(
+      context?.runtime?.subscriptionAuthors || context?.runtime?.authors
+    ).map(normalizeAuthor);
+    const configAuthors = toArray(context?.config?.actorFilters).map(
+      normalizeAuthor
+    );
+    const hookAuthors = [];
+
+    const hook = context?.hooks?.subscriptions;
+    if (isPlainObject(hook) && typeof hook.resolveAuthors === "function") {
+      try {
+        const resolved = await hook.resolveAuthors(context);
+        hookAuthors.push(...toArray(resolved).map(normalizeAuthor));
+      } catch (error) {
+        context?.log?.("[subscriptions-source] resolveAuthors threw", error);
+      }
+    }
+
+    const authors = new Set(
+      [...runtimeAuthors, ...configAuthors, ...hookAuthors].filter(Boolean)
+    );
+
+    if (!authors.size) {
+      return [];
+    }
+
+    const options = {
+      blacklistedEventIds: toSet(context?.runtime?.blacklistedEventIds),
+      isAuthorBlocked:
+        typeof context?.runtime?.isAuthorBlocked === "function"
+          ? context.runtime.isAuthorBlocked
+          : () => false,
+    };
+
+    let videos = [];
+    try {
+      videos = await Promise.resolve(
+        resolvedService.getFilteredActiveVideos(options)
+      );
+    } catch (error) {
+      context?.log?.(
+        "[subscriptions-source] Failed to resolve videos from nostrService",
+        error
+      );
+      videos = [];
+    }
+
+    const filtered = (Array.isArray(videos) ? videos : []).filter((video) => {
+      const author = normalizeAuthor(video?.pubkey);
+      return author && authors.has(author);
+    });
+
+    return filtered.map((video) => ({
+      video,
+      metadata: {
+        source: "nostr:subscriptions",
+        matchedAuthor: normalizeAuthor(video?.pubkey),
+      },
+    }));
+  };
+}
+
+export function createWatchHistoryPointerSource({ service } = {}) {
+  const resolvedService = resolveService(service, watchHistoryService);
+
+  return async function watchHistoryPointerSource(context = {}) {
+    const actor = normalizeActorCandidate(
+      context?.config?.actor,
+      context?.runtime?.watchHistory?.actor,
+      context?.runtime?.actor
+    );
+
+    if (!resolvedService || typeof resolvedService.getQueuedPointers !== "function") {
+      return [];
+    }
+
+    let pointers = [];
+    try {
+      pointers = await Promise.resolve(
+        resolvedService.getQueuedPointers(actor || undefined)
+      );
+    } catch (error) {
+      context?.log?.(
+        "[watch-history-source] Failed to load queued pointers",
+        error
+      );
+      pointers = [];
+    }
+
+    const results = [];
+    const hook = context?.hooks?.watchHistory;
+    const resolveVideoHook =
+      isPlainObject(hook) && typeof hook.resolveVideo === "function"
+        ? hook.resolveVideo
+        : null;
+
+    for (const pointer of Array.isArray(pointers) ? pointers : []) {
+      const dto = {
+        video: null,
+        pointer,
+        metadata: {
+          source: "watch-history",
+          actor: actor || null,
+        },
+      };
+
+      if (pointer && isPlainObject(pointer) && pointer.video) {
+        dto.video = pointer.video;
+      }
+
+      if (!dto.video && resolveVideoHook) {
+        try {
+          const resolvedVideo = await resolveVideoHook(pointer, context);
+          if (resolvedVideo) {
+            dto.video = resolvedVideo;
+          }
+        } catch (error) {
+          context?.log?.(
+            "[watch-history-source] resolveVideo hook threw",
+            error
+          );
+        }
+      }
+
+      results.push(dto);
+    }
+
+    return results;
+  };
+}
diff --git a/js/feedEngine/stages.js b/js/feedEngine/stages.js
new file mode 100644
index 00000000..934a8e54
--- /dev/null
+++ b/js/feedEngine/stages.js
@@ -0,0 +1,189 @@
+// js/feedEngine/stages.js
+
+import { getApplication } from "../applicationContext.js";
+import nostrService from "../services/nostrService.js";
+import { dedupeToNewestByRoot } from "../utils/videoDeduper.js";
+import { isPlainObject, toSet } from "./utils.js";
+
+function resolveDedupeFunction(customDedupe) {
+  if (typeof customDedupe === "function") {
+    return customDedupe;
+  }
+
+  const app = getApplication?.();
+  if (app && typeof app.dedupeVideosByRoot === "function") {
+    return (videos) => app.dedupeVideosByRoot(videos);
+  }
+
+  return (videos) => dedupeToNewestByRoot(videos);
+}
+
+export function createDedupeByRootStage({
+  stageName = "dedupe-by-root",
+  dedupe: customDedupe,
+} = {}) {
+  const dedupeFn = resolveDedupeFunction(customDedupe);
+
+  return async function dedupeByRootStage(items = [], context = {}) {
+    const videos = items.map((item) => item?.video).filter(Boolean);
+    const dedupedVideos = dedupeFn(videos) || [];
+    const allowedIds = new Set();
+
+    for (const video of dedupedVideos) {
+      if (video && typeof video.id === "string") {
+        allowedIds.add(video.id);
+      }
+    }
+
+    if (!allowedIds.size) {
+      return items;
+    }
+
+    const keep = [];
+    for (const item of items) {
+      const video = item?.video;
+      const videoId = video && typeof video.id === "string" ? video.id : "";
+      if (!videoId || allowedIds.has(videoId)) {
+        keep.push(item);
+        continue;
+      }
+
+      const rootId =
+        typeof video?.videoRootId === "string" && video.videoRootId
+          ? video.videoRootId
+          : videoId;
+
+      if (typeof item?.metadata === "object" && item.metadata) {
+        item.metadata.droppedByStage = stageName;
+      }
+
+      context?.addWhy?.({
+        stage: stageName,
+        type: "dedupe",
+        reason: "older-root-version",
+        videoId,
+        rootId,
+      });
+    }
+
+    return keep;
+  };
+}
+
+export function createBlacklistFilterStage({
+  stageName = "blacklist-filter",
+  shouldIncludeVideo,
+} = {}) {
+  const includeFn =
+    typeof shouldIncludeVideo === "function"
+      ? shouldIncludeVideo
+      : (video, options) => nostrService.shouldIncludeVideo(video, options);
+
+  return async function blacklistFilterStage(items = [], context = {}) {
+    const blacklist = toSet(context?.runtime?.blacklistedEventIds);
+    const isAuthorBlocked =
+      typeof context?.runtime?.isAuthorBlocked === "function"
+        ? context.runtime.isAuthorBlocked
+        : () => false;
+
+    const options = { blacklistedEventIds: blacklist, isAuthorBlocked };
+    const results = [];
+
+    for (const item of items) {
+      const video = item?.video;
+      if (!video || typeof video !== "object") {
+        results.push(item);
+        continue;
+      }
+
+      let include = false;
+      try {
+        include = includeFn(video, options) !== false;
+      } catch (error) {
+        context?.log?.(`[${stageName}] shouldIncludeVideo threw`, error);
+        include = false;
+      }
+
+      if (!include) {
+        context?.addWhy?.({
+          stage: stageName,
+          type: "filter",
+          reason: "blacklist",
+          videoId: typeof video.id === "string" ? video.id : null,
+          pubkey: typeof video.pubkey === "string" ? video.pubkey : null,
+        });
+        continue;
+      }
+
+      results.push(item);
+    }
+
+    return results;
+  };
+}
+
+function resolveSuppressionHook(context) {
+  if (!context || typeof context !== "object") {
+    return null;
+  }
+
+  const fromHooks = context?.hooks?.watchHistory;
+  if (isPlainObject(fromHooks) && typeof fromHooks.shouldSuppress === "function") {
+    return fromHooks.shouldSuppress;
+  }
+
+  const runtime = context?.runtime?.watchHistory;
+  if (isPlainObject(runtime) && typeof runtime.shouldSuppress === "function") {
+    return runtime.shouldSuppress;
+  }
+
+  return null;
+}
+
+export function createWatchHistorySuppressionStage({
+  stageName = "watch-history-suppression",
+  shouldSuppress,
+} = {}) {
+  return async function watchHistorySuppressionStage(items = [], context = {}) {
+    const hook =
+      typeof shouldSuppress === "function" ? shouldSuppress : resolveSuppressionHook(context);
+
+    if (typeof hook !== "function") {
+      return items;
+    }
+
+    const results = [];
+
+    for (const item of items) {
+      let suppress = false;
+      try {
+        suppress = await hook(item, context);
+      } catch (error) {
+        context?.log?.(`[${stageName}] suppression hook threw`, error);
+        suppress = false;
+      }
+
+      if (suppress) {
+        const detail = {
+          stage: stageName,
+          type: "filter",
+          reason: "watch-history",
+        };
+        if (item?.video && typeof item.video.id === "string") {
+          detail.videoId = item.video.id;
+        }
+        if (item?.pointer) {
+          detail.pointer = item.pointer;
+        } else if (item?.metadata && item.metadata.pointerKey) {
+          detail.pointerKey = item.metadata.pointerKey;
+        }
+        context?.addWhy?.(detail);
+        continue;
+      }
+
+      results.push(item);
+    }
+
+    return results;
+  };
+}
diff --git a/js/feedEngine/utils.js b/js/feedEngine/utils.js
new file mode 100644
index 00000000..38512b73
--- /dev/null
+++ b/js/feedEngine/utils.js
@@ -0,0 +1,29 @@
+// js/feedEngine/utils.js
+
+export function isPlainObject(value) {
+  if (value === null || typeof value !== "object") {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+
+export function toSet(values) {
+  if (values instanceof Set) {
+    return new Set(values);
+  }
+  if (Array.isArray(values)) {
+    return new Set(values);
+  }
+  return new Set();
+}
+
+export function toArray(value) {
+  if (!value) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return [...value];
+  }
+  return [value];
+}
diff --git a/js/feedEngine/watchHistoryFeed.js b/js/feedEngine/watchHistoryFeed.js
new file mode 100644
index 00000000..b93d19c1
--- /dev/null
+++ b/js/feedEngine/watchHistoryFeed.js
@@ -0,0 +1,527 @@
+// js/feedEngine/watchHistoryFeed.js
+
+import { pointerKey, normalizePointerInput } from "../nostr.js";
+import watchHistoryService from "../watchHistoryService.js";
+import nostrService from "../services/nostrService.js";
+import { createWatchHistoryMetadataResolver } from "../watchHistoryMetadata.js";
+import {
+  isWatchHistoryDebugEnabled,
+  logWatchHistoryDebug,
+} from "../watchHistoryDebug.js";
+import {
+  createBlacklistFilterStage,
+  createWatchHistorySuppressionStage,
+} from "./stages.js";
+import { isPlainObject } from "./utils.js";
+
+const WATCH_HISTORY_FEED_LOG_NAMESPACE = "watchHistoryFeed";
+
+function debugInfo(message, details) {
+  logWatchHistoryDebug(WATCH_HISTORY_FEED_LOG_NAMESPACE, "info", message, details);
+}
+
+function debugWarn(message, details) {
+  logWatchHistoryDebug(WATCH_HISTORY_FEED_LOG_NAMESPACE, "warn", message, details);
+}
+
+function normalizeActorCandidate(...values) {
+  for (const value of values) {
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      if (trimmed) {
+        return trimmed;
+      }
+    }
+  }
+  return "";
+}
+
+function resolveWatchedAt(...candidates) {
+  for (const candidate of candidates) {
+    if (!Number.isFinite(candidate)) {
+      continue;
+    }
+    let normalized = Math.floor(Number(candidate));
+    if (normalized <= 0) {
+      continue;
+    }
+    if (normalized > 10_000_000_000) {
+      normalized = Math.floor(normalized / 1000);
+    }
+    if (normalized > 0) {
+      return normalized;
+    }
+  }
+  return 0;
+}
+
+function resolveResumeSeconds(candidate) {
+  const candidates = [
+    candidate?.resumeSeconds,
+    candidate?.resume,
+    candidate?.resumeAt,
+    candidate?.resumePosition,
+    candidate?.resumeTime,
+    candidate?.progress?.resume,
+    candidate?.progress?.seconds,
+    candidate?.progress?.position,
+    candidate?.pointer?.resumeSeconds,
+    candidate?.pointer?.resume,
+    candidate?.pointer?.resumeAt,
+  ];
+
+  for (const entry of candidates) {
+    if (!Number.isFinite(entry)) {
+      continue;
+    }
+    const normalized = Math.max(0, Math.floor(entry));
+    if (normalized > 0) {
+      return normalized;
+    }
+  }
+  return null;
+}
+
+function resolveCompleted(candidate) {
+  const candidates = [
+    candidate?.completed,
+    candidate?.complete,
+    candidate?.progress?.completed,
+    candidate?.progress?.complete,
+    candidate?.pointer?.completed,
+    candidate?.pointer?.complete,
+  ];
+  return candidates.some((value) => value === true);
+}
+
+function normalizeHistoryEntry(raw) {
+  const pointer = normalizePointerInput(raw?.pointer || raw);
+  if (!pointer) {
+    return null;
+  }
+
+  const key = pointerKey(pointer);
+  if (!key) {
+    return null;
+  }
+
+  const watchedAt = resolveWatchedAt(
+    raw?.watchedAt,
+    raw?.timestamp,
+    raw?.created_at,
+    pointer?.watchedAt,
+    raw?.metadata?.watchedAt,
+    pointer?.metadata?.watchedAt,
+  );
+
+  const resumeAt = (() => {
+    const fromPointer = Number.isFinite(pointer?.resumeAt)
+      ? Math.max(0, Math.floor(pointer.resumeAt))
+      : Number.isFinite(pointer?.metadata?.resumeAt)
+      ? Math.max(0, Math.floor(pointer.metadata.resumeAt))
+      : null;
+    if (fromPointer !== null) {
+      return fromPointer;
+    }
+    return resolveResumeSeconds(raw);
+  })();
+
+  const completed =
+    pointer?.completed === true ||
+    pointer?.metadata?.completed === true ||
+    resolveCompleted(raw);
+
+  const pointerVideo =
+    (pointer?.video && isPlainObject(pointer.video) ? pointer.video : null) ||
+    (pointer?.metadata?.video && isPlainObject(pointer.metadata.video)
+      ? pointer.metadata.video
+      : null);
+
+  const pointerProfile =
+    (pointer?.profile && isPlainObject(pointer.profile) ? pointer.profile : null) ||
+    (pointer?.metadata?.profile && isPlainObject(pointer.metadata.profile)
+      ? pointer.metadata.profile
+      : null);
+
+  return {
+    pointer,
+    pointerKey: key,
+    watchedAt,
+    video:
+      isPlainObject(raw?.video) && raw.video
+        ? raw.video
+        : pointerVideo,
+    metadata: {
+      source: "watch-history",
+      pointerKey: key,
+      watchedAt,
+      resumeAt,
+      completed,
+      session: raw?.session === true || pointer.session === true,
+      video: pointerVideo,
+      profile: pointerProfile,
+    },
+  };
+}
+
+function createWatchHistorySource({ service = watchHistoryService } = {}) {
+  return async function watchHistorySource(context = {}) {
+    const actor = normalizeActorCandidate(
+      context?.runtime?.watchHistory?.actor,
+      context?.config?.actor,
+      context?.runtime?.actor,
+    );
+
+    if (!service || typeof service.loadLatest !== "function") {
+      return [];
+    }
+
+    let items = [];
+    try {
+      items = await Promise.resolve(service.loadLatest(actor || undefined));
+    } catch (error) {
+      context?.log?.("[watch-history-feed] Failed to load history", error);
+      items = [];
+    }
+
+    const results = [];
+    for (const raw of Array.isArray(items) ? items : []) {
+      const normalized = normalizeHistoryEntry(raw);
+      if (normalized) {
+        results.push(normalized);
+      }
+    }
+
+    results.sort((a, b) => {
+      if (a.watchedAt !== b.watchedAt) {
+        return b.watchedAt - a.watchedAt;
+      }
+      return a.pointerKey.localeCompare(b.pointerKey);
+    });
+
+    return results;
+  };
+}
+
+function createWatchHistoryHydratorStage({
+  service = watchHistoryService,
+  metadataResolver,
+} = {}) {
+  const resolver = metadataResolver || createWatchHistoryMetadataResolver();
+
+  return async function watchHistoryHydratorStage(items = [], context = {}) {
+    const shouldStoreMetadata =
+      typeof service?.shouldStoreMetadata === "function"
+        ? service.shouldStoreMetadata() !== false
+        : true;
+
+    const results = [];
+
+    for (const item of Array.isArray(items) ? items : []) {
+      if (!item || typeof item !== "object") {
+        continue;
+      }
+
+      const pointerKeyValue =
+        typeof item.pointerKey === "string" && item.pointerKey
+          ? item.pointerKey
+          : pointerKey(item.pointer);
+
+      const pointerType =
+        typeof item?.pointer?.type === "string" ? item.pointer.type : null;
+      const pointerValue =
+        typeof item?.pointer?.value === "string" ? item.pointer.value : null;
+
+      const watchedAtValue = Number.isFinite(item?.watchedAt)
+        ? Math.max(0, Math.floor(Number(item.watchedAt)))
+        : Number.isFinite(item?.metadata?.watchedAt)
+        ? Math.max(0, Math.floor(Number(item.metadata.watchedAt)))
+        : 0;
+
+      let video = item.video || null;
+      let profile = item.metadata?.profile || null;
+
+      if (isWatchHistoryDebugEnabled()) {
+        debugInfo("Hydrating watch history item.", {
+          pointerKey: pointerKeyValue || null,
+          pointerType,
+          pointerValue,
+          hasInitialVideo: Boolean(video),
+          hasInitialProfile: Boolean(profile),
+          watchedAt: watchedAtValue || null,
+        });
+      }
+
+      if (pointerKeyValue && typeof service?.getLocalMetadata === "function") {
+        try {
+          const stored = service.getLocalMetadata(pointerKeyValue);
+          if (stored) {
+            const hadVideo = Boolean(video);
+            const hadProfile = Boolean(profile);
+            video = video || stored.video || null;
+            profile = profile || stored.profile || null;
+            if (isWatchHistoryDebugEnabled()) {
+              debugInfo("Loaded cached metadata for pointer.", {
+                pointerKey: pointerKeyValue,
+                hadVideo,
+                hadProfile,
+                cachedVideo: Boolean(stored.video),
+                cachedProfile: Boolean(stored.profile),
+                resultingVideo: Boolean(video),
+                resultingProfile: Boolean(profile),
+              });
+            }
+          }
+        } catch (error) {
+          context?.log?.(
+            "[watch-history-feed] Failed to read cached metadata",
+            error,
+          );
+          if (isWatchHistoryDebugEnabled()) {
+            debugWarn("Failed to read cached metadata for pointer.", {
+              pointerKey: pointerKeyValue || null,
+              error,
+            });
+          }
+        }
+      }
+
+      if (!video && resolver?.resolveVideo) {
+        if (isWatchHistoryDebugEnabled()) {
+          debugInfo("Resolving video via metadata resolver.", {
+            pointerKey: pointerKeyValue || null,
+            pointerType,
+            pointerValue,
+          });
+        }
+        try {
+          video = await resolver.resolveVideo(item.pointer);
+          if (isWatchHistoryDebugEnabled()) {
+            if (video) {
+              debugInfo("Metadata resolver returned video candidate.", {
+                pointerKey: pointerKeyValue || null,
+                videoId: typeof video.id === "string" ? video.id : null,
+                title:
+                  typeof video.title === "string" && video.title.trim()
+                    ? video.title
+                    : null,
+                invalid: Boolean(video.invalid),
+              });
+            } else {
+              debugWarn("Metadata resolver returned no video candidate.", {
+                pointerKey: pointerKeyValue || null,
+              });
+            }
+          }
+        } catch (error) {
+          context?.log?.(
+            "[watch-history-feed] Failed to resolve video from pointer",
+            error,
+          );
+          if (isWatchHistoryDebugEnabled()) {
+            debugWarn("Metadata resolver threw while resolving video.", {
+              pointerKey: pointerKeyValue || null,
+              error,
+            });
+          }
+        }
+      }
+
+      if (video?.pubkey && !profile && resolver?.resolveProfile) {
+        if (isWatchHistoryDebugEnabled()) {
+          debugInfo("Resolving profile for video author.", {
+            pointerKey: pointerKeyValue || null,
+            pubkey: video.pubkey,
+          });
+        }
+        try {
+          profile = resolver.resolveProfile(video.pubkey) || null;
+          if (isWatchHistoryDebugEnabled()) {
+            if (profile) {
+              const label =
+                profile.display_name ||
+                profile.name ||
+                profile.username ||
+                profile.nip05 ||
+                null;
+              debugInfo("Resolved profile for video author.", {
+                pointerKey: pointerKeyValue || null,
+                pubkey: video.pubkey,
+                label: label || null,
+              });
+            } else {
+              debugWarn("Resolver returned no profile for video author.", {
+                pointerKey: pointerKeyValue || null,
+                pubkey: video.pubkey,
+              });
+            }
+          }
+        } catch (error) {
+          context?.log?.(
+            "[watch-history-feed] Failed to resolve profile for pointer",
+            error,
+          );
+          if (isWatchHistoryDebugEnabled()) {
+            debugWarn("Profile resolver threw while hydrating metadata.", {
+              pointerKey: pointerKeyValue || null,
+              pubkey: video.pubkey,
+              error,
+            });
+          }
+        }
+      }
+
+      const metadata = {
+        ...(isPlainObject(item.metadata) ? item.metadata : {}),
+        pointerKey: pointerKeyValue,
+        watchedAt: watchedAtValue || null,
+        resumeAt: item.metadata?.resumeAt ?? null,
+        completed: item.metadata?.completed ?? false,
+        session: item.metadata?.session === true,
+        video: video || null,
+        profile: profile || null,
+      };
+
+      if (isWatchHistoryDebugEnabled()) {
+        const summary = {
+          pointerKey: pointerKeyValue || null,
+          pointerType,
+          pointerValue,
+          watchedAt: watchedAtValue || null,
+          videoId: typeof video?.id === "string" ? video.id : null,
+          title:
+            typeof video?.title === "string" && video.title?.trim()
+              ? video.title
+              : null,
+          invalid: Boolean(video?.invalid),
+          hasProfile: Boolean(profile),
+        };
+        if (video) {
+          debugInfo("Hydrated watch history entry metadata.", summary);
+        } else {
+          debugWarn("Hydrated entry is missing resolved video metadata.", summary);
+        }
+      }
+
+      const nextItem = {
+        ...item,
+        pointerKey: pointerKeyValue,
+        watchedAt: watchedAtValue,
+        video: video || null,
+        metadata,
+      };
+      results.push(nextItem);
+
+      if (pointerKeyValue) {
+        if (shouldStoreMetadata) {
+          try {
+            service?.setLocalMetadata?.(pointerKeyValue, {
+              video: metadata.video,
+              profile: metadata.profile,
+            });
+            if (isWatchHistoryDebugEnabled()) {
+              debugInfo("Stored metadata cache entry for pointer.", {
+                pointerKey: pointerKeyValue,
+                cachedVideo: Boolean(metadata.video),
+                cachedProfile: Boolean(metadata.profile),
+              });
+            }
+          } catch (error) {
+            context?.log?.(
+              "[watch-history-feed] Failed to persist metadata cache",
+              error,
+            );
+            if (isWatchHistoryDebugEnabled()) {
+              debugWarn("Failed to persist metadata cache entry.", {
+                pointerKey: pointerKeyValue,
+                error,
+              });
+            }
+          }
+        } else if (typeof service?.removeLocalMetadata === "function") {
+          try {
+            service.removeLocalMetadata(pointerKeyValue);
+            if (isWatchHistoryDebugEnabled()) {
+              debugInfo("Cleared metadata cache entry for pointer.", {
+                pointerKey: pointerKeyValue,
+              });
+            }
+          } catch (error) {
+            context?.log?.(
+              "[watch-history-feed] Failed to clear cached metadata",
+              error,
+            );
+            if (isWatchHistoryDebugEnabled()) {
+              debugWarn("Failed to clear cached metadata entry.", {
+                pointerKey: pointerKeyValue,
+                error,
+              });
+            }
+          }
+        }
+      }
+    }
+
+    return results;
+  };
+}
+
+function createWatchHistorySorter() {
+  return function watchHistorySorter(items = []) {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    const copy = [...items];
+    copy.sort((a, b) => {
+      if (a?.watchedAt !== b?.watchedAt) {
+        return (b?.watchedAt || 0) - (a?.watchedAt || 0);
+      }
+      const aKey = typeof a?.pointerKey === "string" ? a.pointerKey : "";
+      const bKey = typeof b?.pointerKey === "string" ? b.pointerKey : "";
+      return aKey.localeCompare(bKey);
+    });
+    return copy;
+  };
+}
+
+export function createWatchHistoryFeedDefinition({
+  service = watchHistoryService,
+  nostr = nostrService,
+  metadataResolverFactory = createWatchHistoryMetadataResolver,
+  shouldIncludeVideo,
+} = {}) {
+  const metadataResolver = metadataResolverFactory({ nostr });
+
+  const blacklistStage = createBlacklistFilterStage({
+    shouldIncludeVideo:
+      typeof shouldIncludeVideo === "function"
+        ? shouldIncludeVideo
+        : (video, options) =>
+            (nostr?.shouldIncludeVideo
+              ? nostr.shouldIncludeVideo(video, options)
+              : true),
+  });
+
+  return {
+    source: createWatchHistorySource({ service }),
+    stages: [
+      createWatchHistoryHydratorStage({ service, metadataResolver }),
+      blacklistStage,
+      createWatchHistorySuppressionStage(),
+    ],
+    sorter: createWatchHistorySorter(),
+    defaultConfig: {
+      actorFilters: [],
+    },
+  };
+}
+
+export function registerWatchHistoryFeed(engine, options = {}) {
+  if (!engine || typeof engine.registerFeed !== "function") {
+    return null;
+  }
+
+  const definition = createWatchHistoryFeedDefinition(options);
+  return engine.registerFeed("watch-history", definition);
+}
+
diff --git a/js/gridHealth.js b/js/gridHealth.js
index 5c6c969c..2066e1a5 100644
--- a/js/gridHealth.js
+++ b/js/gridHealth.js
@@ -2,6 +2,25 @@ import { createCardObserver } from "./dom/cardObserver.js";
 import { infoHashFromMagnet } from "./magnets.js";
 import { TorrentClient, torrentClient } from "./webtorrent.js";
 
+const badgeUpdateListeners = new Set();
+
+function notifyBadgeUpdate(payload) {
+  if (!payload) {
+    return;
+  }
+
+  badgeUpdateListeners.forEach((listener) => {
+    if (typeof listener !== "function") {
+      return;
+    }
+    try {
+      listener(payload);
+    } catch (err) {
+      console.warn("[gridHealth] badge listener failed", err);
+    }
+  });
+}
+
 const ROOT_MARGIN = "200px 0px";
 
 function now() {
@@ -479,7 +498,8 @@ function setBadge(card, state, details) {
         });
   badge.setAttribute("aria-label", tooltip);
   badge.setAttribute("title", tooltip);
-  badge.setAttribute("aria-live", entry.role === "alert" ? "assertive" : "polite");
+  const ariaLive = entry.role === "alert" ? "assertive" : "polite";
+  badge.setAttribute("aria-live", ariaLive);
   badge.setAttribute("role", entry.role);
   badge.dataset.streamHealthState = normalizedState;
   if (hasPeerCount) {
@@ -487,6 +507,20 @@ function setBadge(card, state, details) {
   } else if (badge.dataset.streamHealthPeers) {
     delete badge.dataset.streamHealthPeers;
   }
+
+  const payload = {
+    card,
+    state: normalizedState,
+    peers: hasPeerCount ? peersValue : null,
+    reason: details && typeof details.reason === "string" ? details.reason : null,
+    checkedAt:
+      details && Number.isFinite(details.checkedAt) ? Number(details.checkedAt) : null,
+    text: badge.textContent,
+    tooltip,
+    role: entry.role,
+    ariaLive,
+  };
+  notifyBadgeUpdate(payload);
 }
 
 function handleCardVisible({ card, pendingByCard, priority = 0 }) {
@@ -597,10 +631,13 @@ const gridCardObserver = createCardObserver({
   },
 });
 
-export function attachHealthBadges(container) {
+export function attachHealthBadges(container, options = {}) {
   if (!(container instanceof HTMLElement)) {
     return;
   }
+  if (options && typeof options.onUpdate === "function") {
+    badgeUpdateListeners.add(options.onUpdate);
+  }
   gridCardObserver.observe(container);
 }
 
diff --git a/js/historyView.js b/js/historyView.js
index ffd321a2..56d5416c 100644
--- a/js/historyView.js
+++ b/js/historyView.js
@@ -11,6 +11,7 @@ import {
   WATCH_HISTORY_BATCH_RESOLVE,
   WATCH_HISTORY_BATCH_PAGE_SIZE,
 } from "./config.js";
+import { getApplication } from "./applicationContext.js";
 
 export const WATCH_HISTORY_EMPTY_COPY =
   "Your watch history is empty. Watch some videos to populate this list.";
@@ -78,16 +79,35 @@ function setTextContent(element, text) {
 }
 
 function getAppInstance() {
-  if (typeof window === "undefined") {
-    return null;
+  return getApplication();
+}
+
+function buildWatchHistoryFeedRuntime({ actor, cursor = 0 } = {}) {
+  const app = getAppInstance();
+  const normalizedActor =
+    typeof actor === "string" && actor.trim() ? actor.trim() : "";
+
+  const blacklist =
+    app?.blacklistedEventIds instanceof Set
+      ? new Set(app.blacklistedEventIds)
+      : new Set();
+
+  const runtime = {
+    blacklistedEventIds: blacklist,
+    isAuthorBlocked: (pubkey) =>
+      (typeof app?.isAuthorBlocked === "function" && app.isAuthorBlocked(pubkey)) ||
+      false,
+    watchHistory: {
+      actor: normalizedActor,
+      cursor: Number.isFinite(cursor) ? cursor : 0,
+    },
+  };
+
+  if (normalizedActor) {
+    runtime.actor = normalizedActor;
   }
-  if (window.app) {
-    return window.app;
-  }
-  if (window.bitvid && window.bitvid.app) {
-    return window.bitvid.app;
-  }
-  return null;
+
+  return runtime;
 }
 
 function safeLocaleDate(date) {
@@ -318,166 +338,7 @@ function getPointerVideoId(video, pointer) {
   return "";
 }
 
-async function resolveVideoFromPointer(pointer, caches) {
-  if (!pointer) {
-    return null;
-  }
-  const app = getAppInstance();
-  const type = pointer.type === "a" ? "a" : "e";
-  const value = typeof pointer.value === "string" ? pointer.value.trim() : "";
-  if (!value) {
-    return null;
-  }
-
-  const normalizeVideo = (video) => {
-    if (!video || typeof video !== "object") {
-      return null;
-    }
-    if (video.deleted) {
-      return null;
-    }
-    return video;
-  };
-
-  if (type === "e") {
-    const fromCache = app?.videosMap?.get(value);
-    if (fromCache) {
-      const normalized = normalizeVideo(fromCache);
-      if (normalized) {
-        return normalized;
-      }
-    }
-    if (nostrClient?.allEvents instanceof Map) {
-      const event = nostrClient.allEvents.get(value);
-      if (event) {
-        const normalized = normalizeVideo(event);
-        if (normalized) {
-          return normalized;
-        }
-      }
-    }
-    if (typeof app?.getOldEventById === "function") {
-      try {
-        const fetched = await app.getOldEventById(value);
-        if (fetched) {
-          const normalized = normalizeVideo(fetched);
-          if (normalized) {
-            return normalized;
-          }
-        }
-      } catch (error) {
-        if (isDevEnv) {
-          console.warn("[historyView] Failed to load video via app cache:", error);
-        }
-      }
-    }
-    if (typeof nostrClient?.getEventById === "function") {
-      try {
-        const fetched = await nostrClient.getEventById(value);
-        const normalized = normalizeVideo(fetched);
-        if (normalized) {
-          return normalized;
-        }
-      } catch (error) {
-        if (isDevEnv) {
-          console.warn("[historyView] Failed to fetch event by id:", error);
-        }
-      }
-    }
-    return null;
-  }
-
-  const compareAddress = (video) => {
-    if (!video || typeof video !== "object") {
-      return false;
-    }
-    if (typeof app?.getVideoAddressPointer !== "function") {
-      return false;
-    }
-    const address = app.getVideoAddressPointer(video);
-    return typeof address === "string" && address.trim() === value;
-  };
-
-  if (app?.videosMap instanceof Map) {
-    for (const cached of app.videosMap.values()) {
-      if (compareAddress(cached)) {
-        const normalized = normalizeVideo(cached);
-        if (normalized) {
-          return normalized;
-        }
-      }
-    }
-  }
-
-  const activeVideos = Array.isArray(caches?.activeVideos)
-    ? caches.activeVideos
-    : typeof nostrClient?.getActiveVideos === "function"
-    ? nostrClient.getActiveVideos()
-    : [];
-  for (const candidate of activeVideos) {
-    if (compareAddress(candidate)) {
-      const normalized = normalizeVideo(candidate);
-      if (normalized) {
-        return normalized;
-      }
-    }
-  }
-
-  if (!caches?.catalogPromise && typeof nostrClient?.fetchVideos === "function") {
-    caches.catalogPromise = nostrClient.fetchVideos().catch((error) => {
-      if (isDevEnv) {
-        console.warn("[historyView] Failed to fetch video catalog:", error);
-      }
-      return [];
-    });
-  }
-  if (caches?.catalogPromise) {
-    try {
-      const catalog = await caches.catalogPromise;
-      if (Array.isArray(catalog)) {
-        for (const candidate of catalog) {
-          if (compareAddress(candidate)) {
-            const normalized = normalizeVideo(candidate);
-            if (normalized) {
-              return normalized;
-            }
-          }
-        }
-      }
-    } catch (error) {
-      if (isDevEnv) {
-        console.warn("[historyView] Failed to search catalog for pointer:", error);
-      }
-    }
-  }
-
-  return null;
-}
-
-function resolveProfileForPubkey(pubkey) {
-  if (typeof pubkey !== "string" || !pubkey.trim()) {
-    return null;
-  }
-  const app = getAppInstance();
-  if (!app) {
-    return null;
-  }
-  try {
-    const cacheEntry = app.getProfileCacheEntry
-      ? app.getProfileCacheEntry(pubkey)
-      : null;
-    if (cacheEntry && typeof cacheEntry === "object") {
-      return cacheEntry.profile || null;
-    }
-  } catch (error) {
-    if (isDevEnv) {
-      console.warn("[historyView] Failed to read profile cache:", error);
-    }
-  }
-  return null;
-}
-
-function buildHistoryCard({
+export function buildHistoryCard({
   item,
   video,
   profile,
@@ -701,7 +562,22 @@ function buildHistoryCard({
 
 export function createWatchHistoryRenderer(config = {}) {
   const {
-    fetchHistory = watchHistoryService.loadLatest.bind(watchHistoryService),
+    fetchHistory = async (actorInput, { cursor = 0 } = {}) => {
+      const app = getAppInstance();
+      const engine = app?.feedEngine;
+      if (engine && typeof engine.run === "function") {
+        const runtime = buildWatchHistoryFeedRuntime({
+          actor: actorInput,
+          cursor,
+        });
+        return engine.run("watch-history", { runtime });
+      }
+      const items = await watchHistoryService.loadLatest(actorInput, {
+        allowStale: true,
+      });
+      const normalized = normalizeHistoryItems(items);
+      return { items: normalized, metadata: { engine: "service-fallback" } };
+    },
     snapshot = watchHistoryService.snapshot.bind(watchHistoryService),
     getActor,
     viewSelector = "#watchHistoryView",
@@ -732,8 +608,9 @@ export function createWatchHistoryRenderer(config = {}) {
     batchSize = WATCH_HISTORY_BATCH_SIZE,
     remove = (payload) => {
       const app = getAppInstance();
-      if (app?.handleWatchHistoryRemoval) {
-        return app.handleWatchHistoryRemoval(payload);
+      const controller = app?.watchHistoryController;
+      if (controller?.handleWatchHistoryRemoval) {
+        return controller.handleWatchHistoryRemoval(payload);
       }
       return defaultRemoveHandler(payload);
     },
@@ -767,10 +644,7 @@ export function createWatchHistoryRenderer(config = {}) {
     metadataPreference: "encrypted-only",
     privacyDismissed: false,
     metadataCache: new Map(),
-    catalogCaches: {
-      activeVideos: null,
-      catalogPromise: null,
-    },
+    feedMetadata: null,
     metadataStorageEnabled:
       typeof watchHistoryService.shouldStoreMetadata === "function"
         ? watchHistoryService.shouldStoreMetadata() !== false
@@ -782,6 +656,12 @@ export function createWatchHistoryRenderer(config = {}) {
     featureEnabled: syncEnabled || localSupported,
   };
 
+  let rendererRef = null;
+  let fingerprintRefreshQueued = false;
+  const scheduleTask =
+    typeof queueMicrotask === "function"
+      ? queueMicrotask
+      : (callback) => Promise.resolve().then(callback);
   let elements = {
     view: null,
     grid: null,
@@ -861,6 +741,7 @@ export function createWatchHistoryRenderer(config = {}) {
       }
     }
     subscriptions.clear();
+    fingerprintRefreshQueued = false;
   }
 
   function clearToasts() {
@@ -1035,6 +916,50 @@ export function createWatchHistoryRenderer(config = {}) {
     }
   }
 
+  function queueFingerprintRefresh() {
+    if (!fingerprintRefreshQueued) {
+      return;
+    }
+    if (state.isLoading) {
+      return;
+    }
+    if (!rendererRef) {
+      return;
+    }
+    fingerprintRefreshQueued = false;
+    void rendererRef.refresh({ force: false });
+  }
+
+  function subscribeToFingerprintUpdates() {
+    if (typeof watchHistoryService.subscribe !== "function") {
+      return;
+    }
+    const unsubscribe = watchHistoryService.subscribe(
+      "fingerprint",
+      (payload) => {
+        if (!payload) {
+          return;
+        }
+        if (
+          payload.actor &&
+          state.actor &&
+          payload.actor !== state.actor
+        ) {
+          return;
+        }
+        fingerprintRefreshQueued = true;
+        if (!state.isLoading) {
+          scheduleTask(() => {
+            queueFingerprintRefresh();
+          });
+        }
+      }
+    );
+    if (typeof unsubscribe === "function") {
+      subscriptions.add(unsubscribe);
+    }
+  }
+
   function setLoadingState(loading) {
     state.isLoading = loading;
     if (elements.loading) {
@@ -1226,31 +1151,21 @@ export function createWatchHistoryRenderer(config = {}) {
 
   async function hydrateBatch(batch) {
     const hydrated = [];
-    const caches = state.catalogCaches;
-    if (!caches.activeVideos && typeof nostrClient?.getActiveVideos === "function") {
-      caches.activeVideos = nostrClient.getActiveVideos();
-    }
     for (const item of batch) {
       if (!item) {
         continue;
       }
-      if (state.metadataCache.has(item.pointerKey)) {
-        hydrated.push({ ...item, metadata: state.metadataCache.get(item.pointerKey) });
-        continue;
-      }
-      const pointerKeyValue = item.pointerKey;
-      let video = null;
-      let profile = null;
-      if (
-        pointerKeyValue &&
-        typeof watchHistoryService.getLocalMetadata === "function"
-      ) {
+
+      const pointerKeyValue = item.pointerKey || null;
+      const baseMetadata =
+        item && typeof item === "object" && item.metadata && typeof item.metadata === "object"
+          ? { ...item.metadata }
+          : {};
+
+      let cached = pointerKeyValue ? state.metadataCache.get(pointerKeyValue) : null;
+      if (!cached && pointerKeyValue && typeof watchHistoryService.getLocalMetadata === "function") {
         try {
-          const stored = watchHistoryService.getLocalMetadata(pointerKeyValue);
-          if (stored) {
-            video = stored.video || null;
-            profile = stored.profile || null;
-          }
+          cached = watchHistoryService.getLocalMetadata(pointerKeyValue) || null;
         } catch (error) {
           if (isDevEnv) {
             console.warn(
@@ -1261,28 +1176,32 @@ export function createWatchHistoryRenderer(config = {}) {
           }
         }
       }
-      try {
-        const resolvedVideo = await resolveVideoFromPointer(item.pointer, caches);
-        if (resolvedVideo) {
-          video = resolvedVideo;
-        }
-      } catch (error) {
-        if (isDevEnv) {
-          console.warn(
-            "[historyView] Failed to resolve video for pointer:",
-            error,
-          );
-        }
+
+      let video = item.video || baseMetadata.video || null;
+      let profile = baseMetadata.profile || null;
+
+      if (cached) {
+        video = video || cached.video || null;
+        profile = profile || cached.profile || null;
       }
-      if (video?.pubkey) {
-        profile = resolveProfileForPubkey(video.pubkey) || profile;
-      }
-      const metadata = { video: video || null, profile: profile || null };
-      state.metadataCache.set(pointerKeyValue, metadata);
+
+      const metadata = {
+        ...baseMetadata,
+        video: video || null,
+        profile: profile || null,
+      };
+
       if (pointerKeyValue) {
+        state.metadataCache.set(pointerKeyValue, {
+          video: metadata.video,
+          profile: metadata.profile,
+        });
         if (state.metadataStorageEnabled) {
           try {
-            watchHistoryService.setLocalMetadata?.(pointerKeyValue, metadata);
+            watchHistoryService.setLocalMetadata?.(pointerKeyValue, {
+              video: metadata.video,
+              profile: metadata.profile,
+            });
           } catch (error) {
             if (isDevEnv) {
               console.warn(
@@ -1292,9 +1211,9 @@ export function createWatchHistoryRenderer(config = {}) {
               );
             }
           }
-        } else {
+        } else if (typeof watchHistoryService.removeLocalMetadata === "function") {
           try {
-            watchHistoryService.removeLocalMetadata?.(pointerKeyValue);
+            watchHistoryService.removeLocalMetadata(pointerKeyValue);
           } catch (error) {
             if (isDevEnv) {
               console.warn(
@@ -1306,7 +1225,8 @@ export function createWatchHistoryRenderer(config = {}) {
           }
         }
       }
-      hydrated.push({ ...item, metadata });
+
+      hydrated.push({ ...item, video: metadata.video, metadata });
     }
     return hydrated;
   }
@@ -1424,16 +1344,26 @@ export function createWatchHistoryRenderer(config = {}) {
         case "play": {
           event.preventDefault();
           const videoId = trigger.dataset.videoId || pointerKeyAttr;
+          const rawUrlAttr = trigger.dataset.playUrl || "";
+          const magnetAttr = trigger.dataset.playMagnet || "";
+          let url = "";
+          if (rawUrlAttr) {
+            try {
+              url = decodeURIComponent(rawUrlAttr);
+            } catch (error) {
+              url = rawUrlAttr;
+            }
+          }
+
           const app = getAppInstance();
           if (videoId && app?.playVideoByEventId) {
-            app.playVideoByEventId(videoId);
+            app.playVideoByEventId(videoId, { url, magnet: magnetAttr });
             return;
           }
-          const urlAttr = trigger.dataset.playUrl || "";
-          const magnetAttr = trigger.dataset.playMagnet || "";
+
           if (app?.playVideoWithFallback) {
             app.playVideoWithFallback({
-              url: urlAttr ? decodeURIComponent(urlAttr) : "",
+              url,
               magnet: magnetAttr,
             });
           }
@@ -1654,9 +1584,9 @@ export function createWatchHistoryRenderer(config = {}) {
         : await resolveActorKey();
     state.actor = actor;
     updateSessionFallbackWarning();
-    let items = [];
+    let result = null;
     try {
-      items = await fetchHistory(actor);
+      result = await fetchHistory(actor, { cursor: 0 });
       state.lastError = null;
       hideErrorBanner();
     } catch (error) {
@@ -1666,21 +1596,75 @@ export function createWatchHistoryRenderer(config = {}) {
           ? error.message
           : "Failed to load watch history from relays.";
       showErrorBanner(message);
-      items = [];
+      result = null;
     }
     setLoadingState(false);
-    const normalized = normalizeHistoryItems(items);
+    if (fingerprintRefreshQueued) {
+      scheduleTask(() => {
+        queueFingerprintRefresh();
+      });
+    }
+    const feedItems = Array.isArray(result?.items) ? result.items : [];
+    const normalized = [];
+    state.metadataCache.clear();
+    for (const entry of feedItems) {
+      const pointer = normalizePointerInput(entry?.pointer || entry);
+      if (!pointer) {
+        continue;
+      }
+      const pointerKeyValue =
+        typeof entry?.pointerKey === "string" && entry.pointerKey
+          ? entry.pointerKey
+          : pointerKey(pointer);
+      if (!pointerKeyValue) {
+        continue;
+      }
+      const watchedAtRaw = Number.isFinite(entry?.watchedAt)
+        ? entry.watchedAt
+        : Number.isFinite(entry?.metadata?.watchedAt)
+        ? entry.metadata.watchedAt
+        : 0;
+      const watchedAt = Math.max(0, Math.floor(Number(watchedAtRaw) || 0));
+      const baseMetadata =
+        entry && typeof entry === "object" && entry.metadata && typeof entry.metadata === "object"
+          ? { ...entry.metadata }
+          : {};
+      const video = entry?.video || baseMetadata.video || null;
+      const profile = baseMetadata.profile || null;
+      const metadata = {
+        ...baseMetadata,
+        pointerKey: pointerKeyValue,
+        watchedAt: Number.isFinite(baseMetadata.watchedAt)
+          ? baseMetadata.watchedAt
+          : watchedAt || null,
+        video: video || null,
+        profile: profile || null,
+      };
+      state.metadataCache.set(pointerKeyValue, {
+        video: metadata.video,
+        profile: metadata.profile,
+      });
+      normalized.push({
+        pointer,
+        pointerKey: pointerKeyValue,
+        watchedAt,
+        video: metadata.video,
+        metadata,
+      });
+    }
+
     const fingerprint = computeFingerprint(normalized);
     if (!force && fingerprint && fingerprint === state.fingerprint) {
       return false;
     }
     state.items = normalized;
+    state.feedMetadata =
+      result && typeof result.metadata === "object" && result.metadata
+        ? { ...result.metadata }
+        : null;
     state.fingerprint = fingerprint;
     state.cursor = 0;
     state.hasMore = state.items.length > 0;
-    state.metadataCache.clear();
-    state.catalogCaches.catalogPromise = null;
-    state.catalogCaches.activeVideos = null;
     return true;
   }
 
@@ -1718,6 +1702,7 @@ export function createWatchHistoryRenderer(config = {}) {
       bindMetadataToggle();
       subscribeToMetadataPreference();
       subscribeToRepublishEvents();
+      subscribeToFingerprintUpdates();
       updateInfoCallout();
       state.metadataStorageEnabled =
         typeof watchHistoryService.shouldStoreMetadata === "function"
@@ -1861,6 +1846,8 @@ export function createWatchHistoryRenderer(config = {}) {
       state.cursor = 0;
       state.hasMore = false;
       state.metadataCache.clear();
+      rendererRef = null;
+      fingerprintRefreshQueued = false;
     },
     async handleRemove(pointerKeyValue) {
       if (!pointerKeyValue) {
@@ -1903,6 +1890,7 @@ export function createWatchHistoryRenderer(config = {}) {
       }
       const remainingItems = state.items.slice();
       const actor = await resolveActorKey();
+      let refreshNeeded = true;
       try {
         const handler =
           typeof remove === "function"
@@ -1928,11 +1916,22 @@ export function createWatchHistoryRenderer(config = {}) {
         if (isDevEnv) {
           console.warn("[historyView] Removal failed:", error);
         }
-        await this.refresh();
       } finally {
         if (parentDay instanceof HTMLElement) {
           removeEmptyDayContainers(elements.grid);
         }
+        if (refreshNeeded) {
+          try {
+            await this.refresh({ force: true });
+          } catch (error) {
+            if (isDevEnv) {
+              console.warn(
+                "[historyView] Failed to refresh watch history after removal:",
+                error,
+              );
+            }
+          }
+        }
       }
     },
     async render() {
@@ -1946,6 +1945,7 @@ export function createWatchHistoryRenderer(config = {}) {
     },
   };
 
+  rendererRef = renderer;
   return renderer;
 }
 
diff --git a/js/index.js b/js/index.js
index 7f623e7b..65313372 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,7 +1,50 @@
 // js/index.js
 
+import { validateInstanceConfig } from "../config/validate-config.js";
+import { ASSET_VERSION } from "../config/asset-version.js";
 import "./bufferPolyfill.js";
-import { trackPageView } from "./analytics.js";
+import Application from "./app.js";
+import { setApplication, setApplicationReady } from "./applicationContext.js";
+import nostrService from "./services/nostrService.js";
+import r2Service from "./services/r2Service.js";
+import { loadView, viewInitRegistry } from "./viewManager.js";
+
+validateInstanceConfig();
+
+let application = null;
+let applicationReadyPromise = Promise.resolve();
+
+function startApplication() {
+  if (application) {
+    return applicationReadyPromise;
+  }
+
+  application = new Application({
+    services: {
+      nostrService,
+      r2Service,
+    },
+    loadView,
+  });
+
+  setApplication(application);
+
+  const startupPromise = (async () => {
+    await application.init();
+    if (typeof application.start === "function") {
+      await application.start();
+    }
+  })();
+
+  applicationReadyPromise = startupPromise;
+  setApplicationReady(startupPromise);
+
+  startupPromise.catch((error) => {
+    console.error("Application failed to initialize:", error);
+  });
+
+  return startupPromise;
+}
 
 const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
 const VIDEO_THUMBNAIL_FADE_IN_ANIMATION = "video-thumbnail-fade-in";
@@ -60,13 +103,26 @@ document.addEventListener("animationend", handleFadeInAnimationComplete, true);
 document.addEventListener("animationcancel", handleFadeInAnimationComplete, true);
 
 // 1) Load modals (login, application, etc.)
+const withAssetVersion = (url) => {
+  if (typeof url !== "string" || url.length === 0) {
+    return url;
+  }
+
+  const separator = url.includes("?") ? "&" : "?";
+  return `${url}${separator}v=${encodeURIComponent(ASSET_VERSION)}`;
+};
+
+const fetchPartial = async (url) => {
+  const response = await fetch(withAssetVersion(url), { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error("Failed to load " + url);
+  }
+  return response.text();
+};
+
 async function loadModal(url) {
   try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error("Failed to load " + url);
-    }
-    const html = await response.text();
+    const html = await fetchPartial(url);
     // Remove analytics loader tags from modal partials to avoid duplicate pageview events.
     const sanitizedHtml = html.replace(
       /<script\b[^>]*src=["'][^"']*tracking\.js[^"']*["'][^>]*>\s*<\/script>/gi,
@@ -84,11 +140,7 @@ async function loadModal(url) {
 // 2) Load sidebar
 async function loadSidebar(url, containerId) {
   try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error("Failed to load " + url);
-    }
-    const html = await response.text();
+    const html = await fetchPartial(url);
     document.getElementById(containerId).innerHTML = html;
     console.log(url, "loaded into", containerId);
   } catch (err) {
@@ -99,11 +151,7 @@ async function loadSidebar(url, containerId) {
 // 3) Load the disclaimer (now separate)
 async function loadDisclaimer(url, containerId) {
   try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error("Failed to load " + url);
-    }
-    const html = await response.text();
+    const html = await fetchPartial(url);
     document.getElementById(containerId).insertAdjacentHTML("beforeend", html);
     console.log(url, "disclaimer loaded into", containerId);
   } catch (err) {
@@ -111,138 +159,376 @@ async function loadDisclaimer(url, containerId) {
   }
 }
 
-// 4) Load everything: modals, sidebar, disclaimers
-Promise.all([
-  // Existing modals
-  loadModal("components/login-modal.html"),
-  loadModal("components/application-form.html"),
-  loadModal("components/content-appeals-form.html"),
+async function bootstrapInterface() {
+  await Promise.all([
+    loadModal("components/login-modal.html"),
+    loadModal("components/application-form.html"),
+    loadModal("components/content-appeals-form.html"),
+    loadModal("components/general-feedback-form.html"),
+    loadModal("components/feature-request-form.html"),
+    loadModal("components/bug-fix-form.html"),
+  ]);
 
-  // New forms
-  loadModal("components/general-feedback-form.html"),
-  loadModal("components/feature-request-form.html"),
-  loadModal("components/bug-fix-form.html"),
-])
-  .then(() => {
-    console.log("Modals loaded.");
-    return loadSidebar("components/sidebar.html", "sidebarContainer");
-  })
-  .then(() => {
-    console.log("Sidebar loaded.");
+  console.log("Modals loaded.");
 
-    // Attach mobile menu button toggle logic (for sidebar)
-    const mobileMenuBtn = document.getElementById("mobileMenuBtn");
-    const sidebar = document.getElementById("sidebar");
-    const app = document.getElementById("app");
-    if (mobileMenuBtn && sidebar && app) {
-      mobileMenuBtn.addEventListener("click", () => {
-        sidebar.classList.toggle("sidebar-open");
-        app.classList.toggle("sidebar-open");
-      });
+  await loadSidebar("components/sidebar.html", "sidebarContainer");
+  console.log("Sidebar loaded.");
+
+  const sidebar = document.getElementById("sidebar");
+  const collapseToggle = document.getElementById("sidebarCollapseToggle");
+  if (sidebar && !sidebar.hasAttribute("data-footer-state")) {
+    sidebar.setAttribute("data-footer-state", "collapsed");
+  }
+  if (!collapseToggle) {
+    console.warn("Sidebar collapse toggle not found; skipping density controls.");
+  }
+
+  const mobileMenuBtn = document.getElementById("mobileMenuBtn");
+  const sidebarOverlay = document.getElementById("sidebarOverlay");
+
+  const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebarCollapsed";
+  const SIDEBAR_WIDTH_EXPANDED = "16rem";
+  const SIDEBAR_WIDTH_COLLAPSED = "4rem";
+  const DEFAULT_SIDEBAR_COLLAPSED = true;
+  let isSidebarCollapsed = DEFAULT_SIDEBAR_COLLAPSED;
+  let isFooterDropupExpanded = false;
+  let syncFooterDropupFn = null;
+
+  const readStoredSidebarCollapsed = () => {
+    try {
+      const storedValue = localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
+      if (storedValue === null) {
+        return DEFAULT_SIDEBAR_COLLAPSED;
+      }
+      return storedValue === "true";
+    } catch (error) {
+      console.warn("Unable to read sidebar collapse state from storage:", error);
+      return DEFAULT_SIDEBAR_COLLAPSED;
     }
+  };
 
-    // Attach "More" button toggle logic for footer links
-    const footerDropdownButton = document.getElementById(
-      "footerDropdownButton"
+  const persistSidebarCollapsed = (collapsed) => {
+    try {
+      localStorage.setItem(
+        SIDEBAR_COLLAPSED_STORAGE_KEY,
+        collapsed ? "true" : "false",
+      );
+    } catch (error) {
+      console.warn("Unable to persist sidebar collapse state:", error);
+    }
+  };
+
+  const applySidebarDensity = (collapsed) => {
+    const widthTargets = [document.documentElement, document.body].filter(
+      (element) => element instanceof HTMLElement,
     );
-    if (footerDropdownButton) {
-      footerDropdownButton.addEventListener("click", () => {
-        const footerLinksContainer = document.getElementById(
-          "footerLinksContainer"
-        );
-        if (!footerLinksContainer) return;
-        footerLinksContainer.classList.toggle("hidden");
-        if (footerLinksContainer.classList.contains("hidden")) {
-          footerDropdownButton.innerHTML = "More &#9660;";
-        } else {
-          footerDropdownButton.innerHTML = "Less &#9650;";
-        }
-      });
+    if (sidebar instanceof HTMLElement) {
+      widthTargets.push(sidebar);
     }
+    const appShell = document.getElementById("app");
+    if (appShell instanceof HTMLElement) {
+      widthTargets.push(appShell);
+    }
+    const state = collapsed ? "collapsed" : "expanded";
+    const nextWidth = collapsed
+      ? SIDEBAR_WIDTH_COLLAPSED
+      : SIDEBAR_WIDTH_EXPANDED;
 
-    // Load and set up sidebar navigation
-    return import("./sidebar.js").then((module) => {
-      module.setupSidebarNavigation();
+    widthTargets.forEach((element) => {
+      element.style.setProperty("--sidebar-width", nextWidth);
     });
-  })
-  .then(() => {
-    // Now load the disclaimer
-    return loadDisclaimer("components/disclaimer.html", "modalContainer");
-  })
-  .then(() => {
-    console.log("Disclaimer loaded.");
 
-    // 1) Login button => open login modal
-    const loginNavBtn = document.getElementById("loginButton");
-    if (loginNavBtn) {
-      loginNavBtn.addEventListener("click", () => {
-        const loginModal = document.getElementById("loginModal");
-        if (loginModal) {
-          loginModal.classList.remove("hidden");
-        }
-      });
+    if (appShell instanceof HTMLElement) {
+      appShell.dataset.sidebarState = state;
     }
 
-    // 2) Close login modal
-    const closeLoginBtn = document.getElementById("closeLoginModal");
-    if (closeLoginBtn) {
-      closeLoginBtn.addEventListener("click", () => {
-        const loginModal = document.getElementById("loginModal");
-        if (loginModal) {
-          loginModal.classList.add("hidden");
-        }
+    [sidebar, document.body]
+      .filter((element) => element instanceof HTMLElement)
+      .forEach((element) => {
+        element.classList.toggle("sidebar-collapsed", collapsed);
+        element.classList.toggle("sidebar-expanded", !collapsed);
+        element.setAttribute("data-state", state);
       });
+
+    if (collapseToggle) {
+      const actionLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
+      collapseToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+      collapseToggle.setAttribute("data-state", state);
+      collapseToggle.setAttribute("aria-label", actionLabel);
+      collapseToggle.setAttribute("title", actionLabel);
     }
 
-    // 3) "Application Form" => open application form
-    const openAppFormBtn = document.getElementById("openApplicationModal");
-    if (openAppFormBtn) {
-      openAppFormBtn.addEventListener("click", () => {
-        const loginModal = document.getElementById("loginModal");
-        if (loginModal) {
-          loginModal.classList.add("hidden");
-        }
-        const appModal = document.getElementById("nostrFormModal");
-        if (appModal) {
-          appModal.classList.remove("hidden");
-        }
-      });
+    if (
+      collapsed &&
+      isFooterDropupExpanded &&
+      typeof syncFooterDropupFn === "function"
+    ) {
+      syncFooterDropupFn(false);
+    }
+  };
+
+  const syncSidebarDensityToViewport = (isDesktopViewport) => {
+    if (!collapseToggle) {
+      applySidebarDensity(false);
+      return;
     }
 
-    // 4) Close application form
-    const closeNostrFormBtn = document.getElementById("closeNostrFormModal");
-    if (closeNostrFormBtn) {
-      closeNostrFormBtn.addEventListener("click", () => {
-        const appModal = document.getElementById("nostrFormModal");
-        if (appModal) {
-          appModal.classList.add("hidden");
-        }
-        // If user hasn't seen disclaimer, show it
-        if (!localStorage.getItem("hasSeenDisclaimer")) {
-          const disclaimerModal = document.getElementById("disclaimerModal");
-          if (disclaimerModal) {
-            disclaimerModal.classList.remove("hidden");
-          }
-        }
-      });
+    if (isDesktopViewport) {
+      isSidebarCollapsed = readStoredSidebarCollapsed();
+      applySidebarDensity(isSidebarCollapsed);
+      return;
     }
 
-    // Once everything is loaded, handle the query params (modal? v?) & disclaimers
-    handleQueryParams();
+    applySidebarDensity(false);
+  };
 
-    // Listen for hash changes
-    window.addEventListener("hashchange", handleHashChange);
+  if (collapseToggle) {
+    isSidebarCollapsed = readStoredSidebarCollapsed();
+  }
 
-    // Also run once on initial load
-    handleHashChange();
+  const setSidebarState = (isOpen) => {
+    if (sidebar) {
+      sidebar.classList.toggle("sidebar-open", isOpen);
+    }
+    document.body.classList.toggle("sidebar-open", isOpen);
+    if (mobileMenuBtn) {
+      mobileMenuBtn.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    }
+  };
 
-    return import("./disclaimer.js");
-  })
-  .then(({ default: disclaimerModal }) => {
-    disclaimerModal.init();
-    disclaimerModal.show();
+  const closeSidebar = () => setSidebarState(false);
+  const isMobileViewport = () => {
+    if (typeof window.matchMedia === "function") {
+      return window.matchMedia("(max-width: 767px)").matches;
+    }
+    return window.innerWidth < 768;
+  };
+
+  const toggleSidebar = () => {
+    if (!sidebar) return;
+    const isMobile = isMobileViewport();
+    if (!isMobile) return;
+    const shouldOpen = !sidebar.classList.contains("sidebar-open");
+    setSidebarState(shouldOpen);
+  };
+
+  let desktopQuery = null;
+  const isDesktopViewport = () => {
+    if (desktopQuery) {
+      return desktopQuery.matches;
+    }
+    return window.innerWidth >= 768;
+  };
+
+  if (collapseToggle) {
+    collapseToggle.addEventListener("click", (event) => {
+      const desktop = isDesktopViewport();
+      if (!desktop) {
+        event.preventDefault();
+        return;
+      }
+
+      event.preventDefault();
+      const nextCollapsed = !isSidebarCollapsed;
+      isSidebarCollapsed = nextCollapsed;
+      applySidebarDensity(nextCollapsed);
+      persistSidebarCollapsed(nextCollapsed);
+    });
+  }
+
+  if (mobileMenuBtn && sidebar) {
+    mobileMenuBtn.addEventListener("click", toggleSidebar);
+  }
+
+  if (sidebarOverlay) {
+    sidebarOverlay.addEventListener("click", closeSidebar);
+  }
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && sidebar && sidebar.classList.contains("sidebar-open")) {
+      closeSidebar();
+    }
   });
 
+  if (typeof window.matchMedia === "function") {
+    desktopQuery = window.matchMedia("(min-width: 768px)");
+    syncSidebarDensityToViewport(desktopQuery.matches);
+
+    const onDesktopChange = (event) => {
+      if (event.matches) {
+        closeSidebar();
+        syncSidebarDensityToViewport(true);
+        return;
+      }
+
+      syncSidebarDensityToViewport(false);
+    };
+
+    if (typeof desktopQuery.addEventListener === "function") {
+      desktopQuery.addEventListener("change", onDesktopChange);
+    } else if (typeof desktopQuery.addListener === "function") {
+      desktopQuery.addListener(onDesktopChange);
+    }
+  } else {
+    syncSidebarDensityToViewport(window.innerWidth >= 768);
+  }
+
+  const footerDropdownButton = document.getElementById("footerDropdownButton");
+  const footerLinksContainer = document.getElementById("footerLinksContainer");
+  const footerDropdownLabel = document.getElementById("footerDropdownText");
+  const footerDropdownIcon = document.getElementById("footerDropdownIcon");
+
+  if (footerDropdownButton && footerLinksContainer) {
+    const sidebarFooter = footerDropdownButton.closest(".sidebar-footer");
+
+    syncFooterDropupFn = (expanded) => {
+      const nextState = expanded ? "expanded" : "collapsed";
+      const actionLabel = expanded ? "Show fewer sidebar links" : "Show more sidebar links";
+
+      footerDropdownButton.setAttribute("aria-expanded", expanded ? "true" : "false");
+      footerDropdownButton.dataset.state = nextState;
+      footerDropdownButton.setAttribute("aria-label", actionLabel);
+      footerDropdownButton.setAttribute("title", actionLabel);
+
+      if (footerDropdownLabel) {
+        footerDropdownLabel.textContent = expanded ? "Less" : "More";
+      }
+
+      if (footerDropdownIcon) {
+        footerDropdownIcon.classList.toggle("is-rotated", expanded);
+      }
+
+      footerLinksContainer.classList.remove("hidden");
+      footerLinksContainer.setAttribute("aria-hidden", expanded ? "false" : "true");
+      footerLinksContainer.dataset.state = nextState;
+
+      if (sidebar) {
+        sidebar.setAttribute("data-footer-state", nextState);
+      }
+
+      if (sidebarFooter instanceof HTMLElement) {
+        sidebarFooter.dataset.footerState = nextState;
+      }
+      isFooterDropupExpanded = expanded;
+    };
+
+    footerDropdownButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      const expanded = footerDropdownButton.getAttribute("aria-expanded") === "true";
+
+      if (isSidebarCollapsed && !expanded) {
+        const nextCollapsed = false;
+        isSidebarCollapsed = nextCollapsed;
+        applySidebarDensity(nextCollapsed);
+        persistSidebarCollapsed(nextCollapsed);
+      }
+
+      if (typeof syncFooterDropupFn === "function") {
+        syncFooterDropupFn(!expanded);
+      }
+    });
+
+    const initialExpanded = footerDropdownButton.getAttribute("aria-expanded") === "true";
+    if (typeof syncFooterDropupFn === "function") {
+      syncFooterDropupFn(initialExpanded);
+    }
+  }
+
+  try {
+    const sidebarModule = await import("./sidebar.js");
+    if (typeof sidebarModule.setupSidebarNavigation === "function") {
+      sidebarModule.setupSidebarNavigation({ closeSidebar });
+    }
+  } catch (error) {
+    console.error("Failed to set up sidebar navigation:", error);
+  }
+
+  await loadDisclaimer("components/disclaimer.html", "modalContainer");
+  console.log("Disclaimer loaded.");
+
+  const loginNavBtn = document.getElementById("loginButton");
+  if (loginNavBtn) {
+    loginNavBtn.addEventListener("click", () => {
+      const loginModal = document.getElementById("loginModal");
+      if (loginModal) {
+        loginModal.classList.remove("hidden");
+      }
+    });
+  }
+
+  const closeLoginBtn = document.getElementById("closeLoginModal");
+  if (closeLoginBtn) {
+    closeLoginBtn.addEventListener("click", () => {
+      const loginModal = document.getElementById("loginModal");
+      if (loginModal) {
+        loginModal.classList.add("hidden");
+      }
+    });
+  }
+
+  const openAppFormBtn = document.getElementById("openApplicationModal");
+  if (openAppFormBtn) {
+    openAppFormBtn.addEventListener("click", () => {
+      const loginModal = document.getElementById("loginModal");
+      if (loginModal) {
+        loginModal.classList.add("hidden");
+      }
+      const appModal = document.getElementById("nostrFormModal");
+      if (appModal) {
+        appModal.classList.remove("hidden");
+      }
+    });
+  }
+
+  const closeNostrFormBtn = document.getElementById("closeNostrFormModal");
+  if (closeNostrFormBtn) {
+    closeNostrFormBtn.addEventListener("click", () => {
+      const appModal = document.getElementById("nostrFormModal");
+      if (appModal) {
+        appModal.classList.add("hidden");
+      }
+      if (!localStorage.getItem("hasSeenDisclaimer")) {
+        const disclaimerModal = document.getElementById("disclaimerModal");
+        if (disclaimerModal) {
+          disclaimerModal.classList.remove("hidden");
+        }
+      }
+    });
+  }
+
+  handleQueryParams();
+
+  window.addEventListener("hashchange", handleHashChange);
+
+  await handleHashChange();
+
+  const { default: disclaimerModal } = await import("./disclaimer.js");
+  disclaimerModal.init();
+  disclaimerModal.show();
+}
+
+async function initializeInterface() {
+  startApplication();
+
+  try {
+    await bootstrapInterface();
+  } catch (error) {
+    console.error("Failed to bootstrap Bitvid interface:", error);
+  }
+}
+
+function onDomReady() {
+  initializeInterface().catch((error) => {
+    console.error("Unhandled error during Bitvid initialization:", error);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", onDomReady, { once: true });
+} else {
+  onDomReady();
+}
+
 /* -------------------------------------------
    HELPER FUNCTIONS FOR QUERY AND HASH
 -------------------------------------------- */
@@ -366,27 +652,17 @@ function handleQueryParams() {
   }
 }
 
-async function waitForAppInitialization() {
-  const maybePromise = window.appReady;
-
-  if (!maybePromise || typeof maybePromise.then !== "function") {
-    return;
-  }
-
-  try {
-    await maybePromise;
-  } catch (error) {
-    console.warn(
-      "Proceeding with hash handling despite app initialization failure:",
-      error
-    );
-  }
-}
-
 async function handleHashChange() {
   console.log("handleHashChange called, current hash =", window.location.hash);
 
-  await waitForAppInitialization();
+  try {
+    await applicationReadyPromise;
+  } catch (error) {
+    console.warn(
+      "Proceeding with hash handling despite application initialization failure:",
+      error
+    );
+  }
 
   const hash = window.location.hash || "";
   // Use a regex that captures up to the first ampersand or end of string.
@@ -394,14 +670,12 @@ async function handleHashChange() {
   const match = hash.match(/^#view=([^&]+)/);
 
   try {
-    const { loadView, viewInitRegistry } = await import("./viewManager.js");
-
     if (!match || !match[1]) {
       // No valid "#view=..." => default to "most-recent-videos"
       await loadView("views/most-recent-videos.html");
       const initFn = viewInitRegistry["most-recent-videos"];
       if (typeof initFn === "function") {
-        initFn();
+        await initFn();
       }
       return;
     }
@@ -415,7 +689,7 @@ async function handleHashChange() {
     await loadView(viewUrl);
     const initFn = viewInitRegistry[viewName];
     if (typeof initFn === "function") {
-      initFn();
+      await initFn();
     }
   } catch (error) {
     console.error("Failed to handle hash change:", error);
diff --git a/js/magnets.js b/js/magnets.js
index 208b703c..7527750a 100644
--- a/js/magnets.js
+++ b/js/magnets.js
@@ -1,4 +1,54 @@
-import parseMagnet from "https://esm.sh/magnet-uri@7.0.7";
+const BASE32_ALPHABET = "abcdefghijklmnopqrstuvwxyz234567";
+
+function decodeBase32ToHex(value) {
+  if (typeof value !== "string" || !value) {
+    return "";
+  }
+
+  const normalized = value.toLowerCase();
+  let bits = 0;
+  let buffer = 0;
+  const bytes = [];
+
+  for (const char of normalized) {
+    const index = BASE32_ALPHABET.indexOf(char);
+    if (index === -1) {
+      return "";
+    }
+    buffer = (buffer << 5) | index;
+    bits += 5;
+    if (bits >= 8) {
+      bits -= 8;
+      const byte = (buffer >> bits) & 0xff;
+      bytes.push(byte);
+    }
+  }
+
+  if (bytes.length === 0) {
+    return "";
+  }
+
+  return bytes.map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+function extractInfoHashFromXt(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+
+  const lower = trimmed.toLowerCase();
+  if (!lower.startsWith("urn:btih:")) {
+    return "";
+  }
+
+  const payload = trimmed.slice(9);
+  return normalizeInfoHash(payload);
+}
 
 function normalizeInfoHash(candidate) {
   const trimmed = typeof candidate === "string" ? candidate.trim() : "";
@@ -9,13 +59,8 @@ function normalizeInfoHash(candidate) {
     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);
-    }
+    const hex = decodeBase32ToHex(trimmed);
+    return hex ? hex.toLowerCase() : null;
   }
   return null;
 }
@@ -28,39 +73,75 @@ export function infoHashFromMagnet(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;
-  }
+  const parsed = parseMagnetLite(magnet);
+  const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+  return hash ? hash.toLowerCase() : 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);
+  const parsed = parseMagnetLite(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);
+}
+
+function parseMagnetLite(magnet) {
+  if (typeof magnet !== "string") {
+    return { infoHash: "", announce: [] };
+  }
+
+  const trimmed = magnet.trim();
+  if (!trimmed) {
+    return { infoHash: "", announce: [] };
+  }
+
+  const lower = trimmed.toLowerCase();
+  const queryIndex = lower.indexOf("?");
+  const paramsPart = queryIndex >= 0 ? trimmed.slice(queryIndex + 1) : "";
+  const params = paramsPart.split("&");
+  const announce = [];
+  let infoHash = "";
+
+  for (const param of params) {
+    if (!param) {
+      continue;
+    }
+
+    const [rawKey, ...rawValueParts] = param.split("=");
+    const rawValue = rawValueParts.join("=");
+    const key = decodeURIComponent((rawKey || "").replace(/\+/g, " ")).toLowerCase();
+    const value = decodeURIComponent((rawValue || "").replace(/\+/g, " "));
+
+    if (!key) {
+      continue;
+    }
+
+    if (key === "xt") {
+      const derived = extractInfoHashFromXt(value);
+      if (derived && !infoHash) {
+        infoHash = derived;
+      }
+    } else if (key === "tr") {
+      if (value) {
+        announce.push(value);
+      }
+    }
+  }
+
+  return { infoHash, announce };
 }
diff --git a/js/nostr.js b/js/nostr.js
index 621fb452..4f99e4d2 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -13,9 +13,11 @@ import {
   WATCH_HISTORY_PAYLOAD_MAX_BYTES,
   WATCH_HISTORY_FETCH_EVENT_LIMIT,
   WATCH_HISTORY_CACHE_TTL_MS,
+  ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS,
 } from "./config.js";
 import {
   ACCEPT_LEGACY_V1,
+  FEATURE_PUBLISH_NIP71,
   VIEW_FILTER_INCLUDE_LEGACY_VIDEO,
 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
@@ -25,6 +27,7 @@ import { extractMagnetHints } from "./magnet.js";
 import {
   buildVideoPostEvent,
   buildVideoMirrorEvent,
+  buildRepostEvent,
   buildViewEvent,
   buildWatchHistoryIndexEvent,
   buildWatchHistoryChunkEvent,
@@ -36,6 +39,7 @@ import {
   publishEventToRelays,
   assertAnyRelayAccepted,
 } from "./nostrPublish.js";
+import { nostrToolsReady } from "./nostrToolsBootstrap.js";
 
 /**
  * The default relay set BitVid bootstraps with before loading a user's
@@ -54,11 +58,29 @@ const RELAY_URLS = Array.from(DEFAULT_RELAY_URLS);
 const EVENTS_CACHE_STORAGE_KEY = "bitvid:eventsCache:v1";
 const LEGACY_EVENTS_STORAGE_KEY = "bitvidEvents";
 const EVENTS_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
-const NIP07_LOGIN_TIMEOUT_MS = 15_000; // 15 seconds
+const NIP07_LOGIN_TIMEOUT_MS = 60_000; // 60 seconds
 const NIP07_LOGIN_TIMEOUT_ERROR_MESSAGE =
-  "Timed out waiting for the NIP-07 extension. Check the extension prompt and try again.";
+  "Timed out waiting for the NIP-07 extension. Confirm the extension prompt in your browser toolbar and try again.";
+
+const DEFAULT_ENABLE_VARIANT_TIMEOUT_MS = 7000;
+
+function getEnableVariantTimeoutMs() {
+  const overrideValue =
+    typeof globalThis !== "undefined" &&
+    globalThis !== null &&
+    Number.isFinite(globalThis.__BITVID_NIP07_ENABLE_VARIANT_TIMEOUT_MS__)
+      ? Math.floor(globalThis.__BITVID_NIP07_ENABLE_VARIANT_TIMEOUT_MS__)
+      : null;
+
+  if (overrideValue !== null && overrideValue > 0) {
+    return Math.max(50, overrideValue);
+  }
+
+  return DEFAULT_ENABLE_VARIANT_TIMEOUT_MS;
+}
 const SESSION_ACTOR_STORAGE_KEY = "bitvid:sessionActor:v1";
 const VIEW_EVENT_GUARD_PREFIX = "bitvid:viewed";
+const REBROADCAST_GUARD_PREFIX = "bitvid:rebroadcast:v1";
 
 const WATCH_HISTORY_STORAGE_KEY = "bitvid:watch-history:v2";
 const WATCH_HISTORY_STORAGE_VERSION = 2;
@@ -67,13 +89,234 @@ const WATCH_HISTORY_REPUBLISH_MAX_DELAY_MS = 5 * 60 * 1000;
 const WATCH_HISTORY_REPUBLISH_MAX_ATTEMPTS = 8;
 const WATCH_HISTORY_REPUBLISH_JITTER = 0.25;
 
+const DEFAULT_NIP07_PERMISSION_METHODS = Object.freeze([
+  "get_public_key",
+  "sign_event",
+  "nip04.encrypt",
+  "nip04.decrypt",
+  "read_relays",
+  "write_relays",
+]);
+
 const viewEventPublishMemory = new Map();
+const rebroadcastAttemptMemory = new Map();
 
 const VIEW_EVENT_SCHEMA = getNostrEventSchema(NOTE_TYPES.VIEW_EVENT);
 const VIEW_EVENT_KIND = Number.isFinite(VIEW_EVENT_SCHEMA?.kind)
   ? VIEW_EVENT_SCHEMA.kind
   : 30079;
 
+const globalScope =
+  typeof window !== "undefined"
+    ? window
+    : typeof globalThis !== "undefined"
+    ? globalThis
+    : null;
+
+const nostrToolsReadySource =
+  globalScope &&
+  globalScope.nostrToolsReady &&
+  typeof globalScope.nostrToolsReady.then === "function"
+    ? globalScope.nostrToolsReady
+    : nostrToolsReady;
+
+function normalizeToolkitCandidate(candidate) {
+  if (
+    candidate &&
+    typeof candidate === "object" &&
+    candidate.ok !== false &&
+    typeof candidate.then !== "function"
+  ) {
+    return candidate;
+  }
+  return null;
+}
+
+function readToolkitFromScope(scope = globalScope) {
+  if (!scope || typeof scope !== "object") {
+    return null;
+  }
+
+  const candidates = [];
+
+  const canonical = scope.__BITVID_CANONICAL_NOSTR_TOOLS__;
+  if (canonical) {
+    candidates.push(canonical);
+  }
+
+  const direct = scope.NostrTools;
+  if (direct) {
+    candidates.push(direct);
+  }
+
+  const nestedWindow =
+    scope.window && scope.window !== scope && typeof scope.window === "object"
+      ? scope.window
+      : null;
+  if (nestedWindow) {
+    if (nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__) {
+      candidates.push(nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__);
+    }
+    if (nestedWindow.NostrTools) {
+      candidates.push(nestedWindow.NostrTools);
+    }
+  }
+
+  for (const candidate of candidates) {
+    const normalized = normalizeToolkitCandidate(candidate);
+    if (normalized) {
+      return normalized;
+    }
+  }
+
+  return null;
+}
+
+const __nostrToolsBootstrapResult = await (async () => {
+  try {
+    const result = await nostrToolsReadySource;
+    if (result && typeof result === "object" && result.ok === false) {
+      return {
+        toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+        failure: result,
+      };
+    }
+
+    const normalized = normalizeToolkitCandidate(result);
+    if (normalized) {
+      return { toolkit: normalized, failure: null };
+    }
+
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: null,
+    };
+  } catch (error) {
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: error,
+    };
+  }
+})();
+
+let cachedNostrTools = __nostrToolsBootstrapResult.toolkit || null;
+const nostrToolsBootstrapFailure = __nostrToolsBootstrapResult.failure || null;
+
+if (!cachedNostrTools && nostrToolsBootstrapFailure && isDevMode) {
+  console.warn(
+    "[nostr] nostr-tools helpers unavailable after bootstrap.",
+    nostrToolsBootstrapFailure
+  );
+}
+
+function rememberNostrTools(candidate) {
+  const normalized = normalizeToolkitCandidate(candidate);
+  if (normalized) {
+    cachedNostrTools = normalized;
+  }
+}
+
+function getCachedNostrTools() {
+  const fallback = readToolkitFromScope();
+  if (cachedNostrTools && fallback && fallback !== cachedNostrTools) {
+    rememberNostrTools(fallback);
+  } else if (!cachedNostrTools && fallback) {
+    rememberNostrTools(fallback);
+  }
+  return cachedNostrTools || fallback || null;
+}
+
+async function ensureNostrTools() {
+  if (cachedNostrTools) {
+    return cachedNostrTools;
+  }
+
+  try {
+    const result = await nostrToolsReadySource;
+    rememberNostrTools(result);
+  } catch (error) {
+    if (isDevMode) {
+      console.warn("[nostr] Failed to resolve nostr-tools helpers.", error);
+    }
+  }
+
+  if (!cachedNostrTools) {
+    rememberNostrTools(readToolkitFromScope());
+  }
+
+  return cachedNostrTools || null;
+}
+
+function isSimplePoolConstructor(candidate) {
+  if (typeof candidate !== "function") {
+    return false;
+  }
+
+  const prototype = candidate.prototype;
+  if (!prototype || typeof prototype !== "object") {
+    return false;
+  }
+
+  return typeof prototype.sub === "function" && typeof prototype.close === "function";
+}
+
+function unwrapSimplePool(candidate) {
+  if (!candidate) {
+    return null;
+  }
+
+  if (isSimplePoolConstructor(candidate)) {
+    return candidate;
+  }
+
+  if (typeof candidate === "object") {
+    if (isSimplePoolConstructor(candidate.SimplePool)) {
+      return candidate.SimplePool;
+    }
+    if (isSimplePoolConstructor(candidate.default)) {
+      return candidate.default;
+    }
+  }
+
+  return null;
+}
+
+function resolveSimplePoolConstructor(tools, scope = globalScope) {
+  const candidates = [
+    tools?.SimplePool,
+    tools?.pool?.SimplePool,
+    tools?.pool,
+    tools?.SimplePool?.SimplePool,
+    tools?.SimplePool?.default,
+    tools?.pool?.default,
+    tools?.default?.SimplePool,
+    tools?.default?.pool?.SimplePool,
+    tools?.default?.pool,
+  ];
+
+  if (scope && typeof scope === "object") {
+    candidates.push(scope?.SimplePool);
+    candidates.push(scope?.pool?.SimplePool);
+    candidates.push(scope?.pool);
+    const scopedTools =
+      scope?.NostrTools && scope.NostrTools !== tools ? scope.NostrTools : null;
+    if (scopedTools) {
+      candidates.push(scopedTools.SimplePool);
+      candidates.push(scopedTools.pool?.SimplePool);
+      candidates.push(scopedTools.pool);
+    }
+  }
+
+  for (const candidate of candidates) {
+    const resolved = unwrapSimplePool(candidate);
+    if (resolved) {
+      return resolved;
+    }
+  }
+
+  return null;
+}
+
 let ingestLocalViewEventRef = null;
 
 async function loadIngestLocalViewEvent() {
@@ -115,12 +358,24 @@ function logErrorOnce(message, eventContent = null) {
   }
 }
 
-function withNip07Timeout(operation) {
+function withNip07Timeout(
+  operation,
+  {
+    timeoutMs = NIP07_LOGIN_TIMEOUT_MS,
+    message = NIP07_LOGIN_TIMEOUT_ERROR_MESSAGE,
+  } = {},
+) {
+  const numericTimeout = Number(timeoutMs);
+  const effectiveTimeout =
+    Number.isFinite(numericTimeout) && numericTimeout > 0
+      ? numericTimeout
+      : NIP07_LOGIN_TIMEOUT_MS;
+
   let timeoutId;
   const timeoutPromise = new Promise((_, reject) => {
     timeoutId = setTimeout(() => {
-      reject(new Error(NIP07_LOGIN_TIMEOUT_ERROR_MESSAGE));
-    }, NIP07_LOGIN_TIMEOUT_MS);
+      reject(new Error(message));
+    }, effectiveTimeout);
   });
 
   let operationResult;
@@ -142,6 +397,66 @@ function withNip07Timeout(operation) {
   });
 }
 
+async function runNip07WithRetry(
+  operation,
+  {
+    label = "NIP-07 operation",
+    timeoutMs = NIP07_LOGIN_TIMEOUT_MS,
+    retryMultiplier = 2,
+  } = {},
+) {
+  let hasStarted = false;
+  let cachedPromise = null;
+
+  const getOrStartOperation = () => {
+    if (!hasStarted) {
+      hasStarted = true;
+      try {
+        cachedPromise = Promise.resolve(operation());
+      } catch (error) {
+        hasStarted = false;
+        cachedPromise = null;
+        throw error;
+      }
+    }
+
+    return cachedPromise;
+  };
+
+  try {
+    return await withNip07Timeout(getOrStartOperation, {
+      timeoutMs,
+      message: NIP07_LOGIN_TIMEOUT_ERROR_MESSAGE,
+    });
+  } catch (error) {
+    const isTimeoutError =
+      error instanceof Error &&
+      error.message === NIP07_LOGIN_TIMEOUT_ERROR_MESSAGE;
+
+    if (!isTimeoutError || retryMultiplier <= 1) {
+      throw error;
+    }
+
+    const extendedTimeout = Math.max(
+      timeoutMs,
+      Math.round(timeoutMs * retryMultiplier),
+    );
+
+    if (isDevMode) {
+      console.warn(
+        `[nostr] ${label} taking longer than ${timeoutMs}ms. Waiting up to ${extendedTimeout}ms for extension response.`,
+      );
+    }
+
+    return withNip07Timeout(getOrStartOperation, {
+      timeoutMs: extendedTimeout,
+      message: NIP07_LOGIN_TIMEOUT_ERROR_MESSAGE,
+    });
+  }
+}
+
+export const __testExports = { runNip07WithRetry };
+
 function withRequestTimeout(promise, timeoutMs, onTimeout, message = "Request timed out") {
   const resolvedTimeout = Number(timeoutMs);
   const effectiveTimeout =
@@ -194,6 +509,794 @@ function withRequestTimeout(promise, timeoutMs, onTimeout, message = "Request ti
   });
 }
 
+function stringFromInput(value) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value.trim();
+  }
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? String(value) : "";
+  }
+  return String(value).trim();
+}
+
+function normalizeUnixSeconds(value) {
+  if (value === null || value === undefined || value === "") {
+    return "";
+  }
+  if (typeof value === "number" && Number.isFinite(value)) {
+    const normalized = value > 1e12 ? value / 1000 : value;
+    return String(Math.floor(normalized));
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+    const numeric = Number(trimmed);
+    if (Number.isFinite(numeric)) {
+      const normalized = numeric > 1e12 ? numeric / 1000 : numeric;
+      return String(Math.floor(normalized));
+    }
+    const parsed = Date.parse(trimmed);
+    if (!Number.isNaN(parsed)) {
+      return String(Math.floor(parsed / 1000));
+    }
+  }
+  return "";
+}
+
+function normalizeDurationSeconds(value) {
+  if (value === null || value === undefined || value === "") {
+    return "";
+  }
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return String(Math.max(0, Math.floor(value)));
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+    const numeric = Number(trimmed);
+    if (Number.isFinite(numeric)) {
+      return String(Math.max(0, Math.floor(numeric)));
+    }
+  }
+  return "";
+}
+
+function normalizeNip71Kind(value) {
+  const numeric =
+    typeof value === "string"
+      ? Number(value.trim())
+      : typeof value === "number"
+        ? value
+        : Number.NaN;
+  if (numeric === 22) {
+    return 22;
+  }
+  return 21;
+}
+
+function trimTrailingEmpty(values) {
+  const trimmed = [...values];
+  while (trimmed.length && !trimmed[trimmed.length - 1]) {
+    trimmed.pop();
+  }
+  return trimmed;
+}
+
+function buildImetaTags(variants) {
+  if (!Array.isArray(variants)) {
+    return [];
+  }
+  const tags = [];
+  for (const variant of variants) {
+    if (!variant || typeof variant !== "object") {
+      continue;
+    }
+    const entries = ["imeta"];
+    const dim = stringFromInput(variant.dim);
+    if (dim) {
+      entries.push(`dim ${dim}`);
+    }
+    const url = stringFromInput(variant.url);
+    if (url) {
+      entries.push(`url ${url}`);
+    }
+    const x = stringFromInput(variant.x);
+    if (x) {
+      entries.push(`x ${x}`);
+    }
+    const mime = stringFromInput(variant.m);
+    if (mime) {
+      entries.push(`m ${mime}`);
+    }
+    if (Array.isArray(variant.image)) {
+      variant.image
+        .map(stringFromInput)
+        .filter(Boolean)
+        .forEach((imageUrl) => {
+          entries.push(`image ${imageUrl}`);
+        });
+    }
+    if (Array.isArray(variant.fallback)) {
+      variant.fallback
+        .map(stringFromInput)
+        .filter(Boolean)
+        .forEach((fallbackUrl) => {
+          entries.push(`fallback ${fallbackUrl}`);
+        });
+    }
+    if (Array.isArray(variant.service)) {
+      variant.service
+        .map(stringFromInput)
+        .filter(Boolean)
+        .forEach((service) => {
+          entries.push(`service ${service}`);
+        });
+    }
+    if (entries.length > 1) {
+      tags.push(entries);
+    }
+  }
+  return tags;
+}
+
+function buildTextTrackTag(track) {
+  if (!track || typeof track !== "object") {
+    return null;
+  }
+  const url = stringFromInput(track.url);
+  const type = stringFromInput(track.type);
+  const language = stringFromInput(track.language);
+  if (!url && !type && !language) {
+    return null;
+  }
+  const values = trimTrailingEmpty([url, type, language]);
+  return ["text-track", ...values];
+}
+
+function buildSegmentTag(segment) {
+  if (!segment || typeof segment !== "object") {
+    return null;
+  }
+  const start = stringFromInput(segment.start);
+  const end = stringFromInput(segment.end);
+  const title = stringFromInput(segment.title);
+  const thumbnail = stringFromInput(segment.thumbnail);
+  if (!start && !end && !title && !thumbnail) {
+    return null;
+  }
+  const values = trimTrailingEmpty([start, end, title, thumbnail]);
+  return ["segment", ...values];
+}
+
+function buildParticipantTag(participant) {
+  if (!participant || typeof participant !== "object") {
+    return null;
+  }
+  const pubkey = stringFromInput(participant.pubkey);
+  if (!pubkey) {
+    return null;
+  }
+  const relay = stringFromInput(participant.relay);
+  const values = ["p", pubkey];
+  if (relay) {
+    values.push(relay);
+  }
+  return values;
+}
+
+export function buildNip71MetadataTags(metadata) {
+  if (!metadata || typeof metadata !== "object") {
+    return [];
+  }
+
+  const tags = [];
+
+  const normalizedTitle = stringFromInput(metadata.title);
+  if (normalizedTitle) {
+    tags.push(["title", normalizedTitle]);
+  }
+
+  const publishedAt = normalizeUnixSeconds(metadata.publishedAt);
+  if (publishedAt) {
+    tags.push(["published_at", publishedAt]);
+  }
+
+  const alt = stringFromInput(metadata.alt);
+  if (alt) {
+    tags.push(["alt", alt]);
+  }
+
+  const imetaTags = buildImetaTags(metadata.imeta);
+  if (imetaTags.length) {
+    tags.push(...imetaTags);
+  }
+
+  const duration = normalizeDurationSeconds(metadata.duration);
+  if (duration) {
+    tags.push(["duration", duration]);
+  }
+
+  if (Array.isArray(metadata.textTracks)) {
+    metadata.textTracks.forEach((track) => {
+      const tag = buildTextTrackTag(track);
+      if (tag) {
+        tags.push(tag);
+      }
+    });
+  }
+
+  const contentWarning = stringFromInput(metadata.contentWarning);
+  if (contentWarning) {
+    tags.push(["content-warning", contentWarning]);
+  }
+
+  if (Array.isArray(metadata.segments)) {
+    metadata.segments.forEach((segment) => {
+      const tag = buildSegmentTag(segment);
+      if (tag) {
+        tags.push(tag);
+      }
+    });
+  }
+
+  if (Array.isArray(metadata.hashtags)) {
+    metadata.hashtags
+      .map(stringFromInput)
+      .filter(Boolean)
+      .forEach((value) => {
+        tags.push(["t", value]);
+      });
+  }
+
+  if (Array.isArray(metadata.participants)) {
+    metadata.participants.forEach((participant) => {
+      const tag = buildParticipantTag(participant);
+      if (tag) {
+        tags.push(tag);
+      }
+    });
+  }
+
+  if (Array.isArray(metadata.references)) {
+    metadata.references
+      .map(stringFromInput)
+      .filter(Boolean)
+      .forEach((url) => {
+        tags.push(["r", url]);
+      });
+  }
+
+  return tags;
+}
+
+function extractVideoPublishPayload(rawPayload) {
+  let videoData = rawPayload;
+  let nip71Metadata = null;
+
+  if (rawPayload && typeof rawPayload === "object") {
+    if (rawPayload.nip71 && typeof rawPayload.nip71 === "object") {
+      nip71Metadata = rawPayload.nip71;
+    }
+    if (
+      rawPayload.legacyFormData &&
+      typeof rawPayload.legacyFormData === "object"
+    ) {
+      videoData = rawPayload.legacyFormData;
+    } else if (
+      Object.prototype.hasOwnProperty.call(rawPayload, "legacyFormData")
+    ) {
+      videoData = rawPayload.legacyFormData || {};
+    }
+  }
+
+  if (!videoData || typeof videoData !== "object") {
+    videoData = {};
+  }
+
+  return { videoData, nip71Metadata };
+}
+
+function buildVideoPointerValue(pubkey, videoRootId) {
+  const normalizedRoot = stringFromInput(videoRootId);
+  const normalizedPubkey = stringFromInput(pubkey).toLowerCase();
+  if (!normalizedRoot || !normalizedPubkey) {
+    return "";
+  }
+  return `30078:${normalizedPubkey}:${normalizedRoot}`;
+}
+
+function buildNip71PointerTags({
+  pubkey = "",
+  videoRootId = "",
+  videoEventId = "",
+  dTag = "",
+} = {}) {
+  const pointerTags = [];
+
+  const normalizedRoot = stringFromInput(videoRootId);
+  const normalizedEventId = stringFromInput(videoEventId);
+  const normalizedDTag = stringFromInput(dTag);
+
+  if (normalizedRoot) {
+    const pointerValue = buildVideoPointerValue(pubkey, normalizedRoot);
+    if (pointerValue) {
+      pointerTags.push(["a", pointerValue]);
+    }
+    pointerTags.push(["video-root", normalizedRoot]);
+  }
+
+  if (normalizedEventId) {
+    pointerTags.push(["e", normalizedEventId]);
+  }
+
+  if (normalizedDTag) {
+    pointerTags.push(["d", normalizedDTag]);
+  }
+
+  return pointerTags;
+}
+
+export function buildNip71VideoEvent({
+  metadata,
+  pubkey = "",
+  title,
+  summaryFallback = "",
+  createdAt = Math.floor(Date.now() / 1000),
+  pointerIdentifiers = {},
+} = {}) {
+  if (!metadata || typeof metadata !== "object") {
+    return null;
+  }
+
+  const normalizedTitle = stringFromInput(title);
+  if (!normalizedTitle) {
+    return null;
+  }
+
+  const summaryCandidates = [
+    stringFromInput(metadata.summary),
+    stringFromInput(summaryFallback),
+    normalizedTitle,
+  ];
+  const summary = summaryCandidates.find((value) => Boolean(value)) || "";
+
+  const tags = buildNip71MetadataTags({
+    ...metadata,
+    title: normalizedTitle,
+  });
+
+  if (!tags.length) {
+    return null;
+  }
+
+  const normalizedPubkey = stringFromInput(pubkey);
+  const timestamp = Number.isFinite(createdAt)
+    ? Math.floor(createdAt)
+    : Math.floor(Date.now() / 1000);
+
+  const pointerTags = buildNip71PointerTags({
+    pubkey,
+    videoRootId: pointerIdentifiers.videoRootId,
+    videoEventId: pointerIdentifiers.eventId,
+    dTag: pointerIdentifiers.dTag,
+  });
+
+  if (pointerTags.length) {
+    tags.push(...pointerTags);
+  }
+
+  return {
+    kind: normalizeNip71Kind(metadata.kind),
+    pubkey: normalizedPubkey,
+    created_at: timestamp,
+    tags,
+    content: summary,
+  };
+}
+
+function parseKeyValuePair(entry) {
+  if (typeof entry !== "string") {
+    return null;
+  }
+  const trimmed = entry.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const spaceIndex = trimmed.indexOf(" ");
+  if (spaceIndex === -1) {
+    return null;
+  }
+  const key = trimmed.slice(0, spaceIndex).trim().toLowerCase();
+  const value = trimmed.slice(spaceIndex + 1).trim();
+  if (!key || !value) {
+    return null;
+  }
+  return { key, value };
+}
+
+function parseImetaTag(tag) {
+  if (!Array.isArray(tag) || tag[0] !== "imeta") {
+    return null;
+  }
+
+  const variant = {
+    image: [],
+    fallback: [],
+    service: [],
+  };
+
+  for (let i = 1; i < tag.length; i += 1) {
+    const parsed = parseKeyValuePair(tag[i]);
+    if (!parsed) {
+      continue;
+    }
+
+    switch (parsed.key) {
+      case "dim":
+        variant.dim = parsed.value;
+        break;
+      case "url":
+        variant.url = parsed.value;
+        break;
+      case "x":
+        variant.x = parsed.value;
+        break;
+      case "m":
+        variant.m = parsed.value;
+        break;
+      case "image":
+        variant.image.push(parsed.value);
+        break;
+      case "fallback":
+        variant.fallback.push(parsed.value);
+        break;
+      case "service":
+        variant.service.push(parsed.value);
+        break;
+      default:
+        break;
+    }
+  }
+
+  const hasContent =
+    Boolean(variant.dim) ||
+    Boolean(variant.url) ||
+    Boolean(variant.x) ||
+    Boolean(variant.m) ||
+    variant.image.length > 0 ||
+    variant.fallback.length > 0 ||
+    variant.service.length > 0;
+
+  if (!hasContent) {
+    return null;
+  }
+
+  if (!variant.image.length) {
+    delete variant.image;
+  }
+  if (!variant.fallback.length) {
+    delete variant.fallback;
+  }
+  if (!variant.service.length) {
+    delete variant.service;
+  }
+
+  return variant;
+}
+
+function parseTextTrackTag(tag) {
+  if (!Array.isArray(tag) || tag[0] !== "text-track") {
+    return null;
+  }
+  const url = stringFromInput(tag[1]);
+  const type = stringFromInput(tag[2]);
+  const language = stringFromInput(tag[3]);
+  if (!url && !type && !language) {
+    return null;
+  }
+  const track = {};
+  if (url) {
+    track.url = url;
+  }
+  if (type) {
+    track.type = type;
+  }
+  if (language) {
+    track.language = language;
+  }
+  return track;
+}
+
+function parseSegmentTag(tag) {
+  if (!Array.isArray(tag) || tag[0] !== "segment") {
+    return null;
+  }
+
+  const values = [];
+  for (let i = 1; i < tag.length; i += 1) {
+    const value = stringFromInput(tag[i]);
+    values.push(value);
+  }
+
+  while (values.length < 4) {
+    values.push("");
+  }
+
+  const [start, end, title, thumbnail] = values;
+  const hasContent = start || end || title || thumbnail;
+  if (!hasContent) {
+    return null;
+  }
+  const segment = {};
+  if (start) {
+    segment.start = start;
+  }
+  if (end) {
+    segment.end = end;
+  }
+  if (title) {
+    segment.title = title;
+  }
+  if (thumbnail) {
+    segment.thumbnail = thumbnail;
+  }
+  return segment;
+}
+
+function parseParticipantTag(tag) {
+  if (!Array.isArray(tag) || tag[0] !== "p") {
+    return null;
+  }
+  const pubkey = stringFromInput(tag[1]);
+  if (!pubkey) {
+    return null;
+  }
+  const participant = { pubkey };
+  const relay = stringFromInput(tag[2]);
+  if (relay) {
+    participant.relay = relay;
+  }
+  return participant;
+}
+
+function parseReferenceTag(tag) {
+  if (!Array.isArray(tag) || tag[0] !== "r") {
+    return null;
+  }
+  const url = stringFromInput(tag[1]);
+  return url ? url : null;
+}
+
+function parseHashtagTag(tag) {
+  if (!Array.isArray(tag) || tag[0] !== "t") {
+    return null;
+  }
+  const value = stringFromInput(tag[1]);
+  return value || null;
+}
+
+export function extractNip71MetadataFromTags(event) {
+  if (!event || typeof event !== "object") {
+    return null;
+  }
+
+  const tags = Array.isArray(event.tags) ? event.tags : [];
+  const metadata = { kind: normalizeNip71Kind(event.kind) };
+
+  const summary = stringFromInput(event.content);
+  if (summary) {
+    metadata.summary = summary;
+  }
+
+  const imeta = [];
+  const textTracks = [];
+  const segments = [];
+  const hashtags = [];
+  const participants = [];
+  const references = [];
+
+  const pointerValues = new Set();
+  const videoRootIds = new Set();
+  const videoEventIds = new Set();
+  const dTags = new Set();
+
+  tags.forEach((tag) => {
+    if (!Array.isArray(tag) || tag.length < 2) {
+      return;
+    }
+
+    const name = tag[0];
+    switch (name) {
+      case "title": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          metadata.title = value;
+        }
+        break;
+      }
+      case "published_at": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          metadata.publishedAt = value;
+        }
+        break;
+      }
+      case "alt": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          metadata.alt = value;
+        }
+        break;
+      }
+      case "duration": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          const parsed = Number(value);
+          metadata.duration = Number.isFinite(parsed) ? parsed : value;
+        }
+        break;
+      }
+      case "content-warning": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          metadata.contentWarning = value;
+        }
+        break;
+      }
+      case "imeta": {
+        const variant = parseImetaTag(tag);
+        if (variant) {
+          imeta.push(variant);
+        }
+        break;
+      }
+      case "text-track": {
+        const track = parseTextTrackTag(tag);
+        if (track) {
+          textTracks.push(track);
+        }
+        break;
+      }
+      case "segment": {
+        const segment = parseSegmentTag(tag);
+        if (segment) {
+          segments.push(segment);
+        }
+        break;
+      }
+      case "t": {
+        const hashtag = parseHashtagTag(tag);
+        if (hashtag) {
+          hashtags.push(hashtag);
+        }
+        break;
+      }
+      case "p": {
+        const participant = parseParticipantTag(tag);
+        if (participant) {
+          participants.push(participant);
+        }
+        break;
+      }
+      case "r": {
+        const reference = parseReferenceTag(tag);
+        if (reference) {
+          references.push(reference);
+        }
+        break;
+      }
+      case "a": {
+        const pointerValue = stringFromInput(tag[1]).toLowerCase();
+        if (pointerValue) {
+          pointerValues.add(pointerValue);
+          const parts = pointerValue.split(":");
+          if (parts.length === 3 && parts[0] === "30078") {
+            const root = parts[2];
+            if (root) {
+              videoRootIds.add(root);
+            }
+          }
+        }
+        break;
+      }
+      case "video-root": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          videoRootIds.add(value);
+        }
+        break;
+      }
+      case "e": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          videoEventIds.add(value);
+        }
+        break;
+      }
+      case "d": {
+        const value = stringFromInput(tag[1]);
+        if (value) {
+          dTags.add(value);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  });
+
+  if (imeta.length) {
+    metadata.imeta = imeta;
+  }
+  if (textTracks.length) {
+    metadata.textTracks = textTracks;
+  }
+  if (segments.length) {
+    metadata.segments = segments;
+  }
+  if (hashtags.length) {
+    metadata.hashtags = hashtags;
+    metadata.t = hashtags;
+  }
+  if (participants.length) {
+    metadata.participants = participants;
+  }
+  if (references.length) {
+    metadata.references = references;
+  }
+
+  return {
+    metadata,
+    pointers: {
+      pointerValues,
+      videoRootIds,
+      videoEventIds,
+      dTags,
+    },
+    source: {
+      id: typeof event.id === "string" ? event.id : "",
+      created_at: Number.isFinite(event.created_at) ? event.created_at : null,
+      kind: Number.isFinite(event.kind) ? event.kind : normalizeNip71Kind(event.kind),
+    },
+  };
+}
+
+function cloneNip71Metadata(metadata) {
+  if (!metadata || typeof metadata !== "object") {
+    return null;
+  }
+  try {
+    return JSON.parse(JSON.stringify(metadata));
+  } catch (error) {
+    if (isDevMode) {
+      console.warn("[nostr] Failed to clone NIP-71 metadata", error);
+    }
+    return { ...metadata };
+  }
+}
+
+function getDTagValueFromTags(tags) {
+  if (!Array.isArray(tags)) {
+    return "";
+  }
+  for (const tag of tags) {
+    if (!Array.isArray(tag) || tag[0] !== "d") {
+      continue;
+    }
+    if (typeof tag[1] === "string" && tag[1]) {
+      return tag[1];
+    }
+  }
+  return "";
+}
+
 function sanitizeRelayList(list) {
   const seen = new Set();
   const sanitized = [];
@@ -212,7 +1315,22 @@ function sanitizeRelayList(list) {
     if (!/^wss?:\/\//i.test(trimmed)) {
       return;
     }
-    const normalized = trimmed.replace(/\/+$/, "");
+    if (/\s/.test(trimmed)) {
+      return;
+    }
+
+    let normalized = trimmed.replace(/\/+$/, "");
+    try {
+      const parsed = new URL(trimmed);
+      if (!parsed.hostname) {
+        return;
+      }
+      const pathname = parsed.pathname.replace(/\/+$/, "");
+      normalized = `${parsed.protocol}//${parsed.host}${pathname}${parsed.search || ""}`;
+    } catch (error) {
+      // Ignore URL parsing failures and fall back to the trimmed string.
+    }
+
     if (seen.has(normalized)) {
       return;
     }
@@ -239,6 +1357,120 @@ function pointerKey(pointer) {
   return `${type}:${value}`;
 }
 
+function cloneVideoMetadata(video) {
+  if (!video || typeof video !== "object") {
+    return null;
+  }
+
+  const createdAt = Number.isFinite(video.created_at)
+    ? Math.floor(video.created_at)
+    : null;
+
+  return {
+    id: typeof video.id === "string" ? video.id : "",
+    title: typeof video.title === "string" ? video.title : "",
+    thumbnail: typeof video.thumbnail === "string" ? video.thumbnail : "",
+    pubkey: typeof video.pubkey === "string" ? video.pubkey : "",
+    created_at: createdAt,
+    url: typeof video.url === "string" ? video.url : "",
+    magnet: typeof video.magnet === "string" ? video.magnet : "",
+    infoHash: typeof video.infoHash === "string" ? video.infoHash : "",
+    legacyInfoHash:
+      typeof video.legacyInfoHash === "string" ? video.legacyInfoHash : "",
+  };
+}
+
+function cloneProfileMetadata(profile) {
+  if (!profile || typeof profile !== "object") {
+    return null;
+  }
+
+  return {
+    pubkey: typeof profile.pubkey === "string" ? profile.pubkey : "",
+    name: typeof profile.name === "string" ? profile.name : "",
+    display_name:
+      typeof profile.display_name === "string" ? profile.display_name : "",
+    picture: typeof profile.picture === "string" ? profile.picture : "",
+    nip05: typeof profile.nip05 === "string" ? profile.nip05 : "",
+  };
+}
+
+function clonePointerMetadata(metadata) {
+  if (!metadata || typeof metadata !== "object") {
+    return null;
+  }
+
+  const cloned = {};
+  const video = cloneVideoMetadata(metadata.video);
+  if (video) {
+    cloned.video = video;
+  }
+
+  const profile = cloneProfileMetadata(metadata.profile);
+  if (profile) {
+    cloned.profile = profile;
+  }
+
+  if (Number.isFinite(metadata.resumeAt)) {
+    cloned.resumeAt = Math.max(0, Math.floor(metadata.resumeAt));
+  }
+
+  if (metadata.completed === true) {
+    cloned.completed = true;
+  }
+
+  if (Number.isFinite(metadata.watchedAt)) {
+    cloned.watchedAt = Math.max(0, Math.floor(metadata.watchedAt));
+  }
+
+  return Object.keys(cloned).length ? cloned : null;
+}
+
+function mergePointerDetails(target, source) {
+  if (!target || !source) {
+    return;
+  }
+
+  if (!target.metadata && source.metadata) {
+    target.metadata = clonePointerMetadata(source.metadata);
+  } else if (target.metadata && source.metadata) {
+    const merged = clonePointerMetadata(target.metadata) || {};
+    const additional = clonePointerMetadata(source.metadata) || {};
+    if (!merged.video && additional.video) {
+      merged.video = additional.video;
+    }
+    if (!merged.profile && additional.profile) {
+      merged.profile = additional.profile;
+    }
+    if (!Number.isFinite(merged.resumeAt) && Number.isFinite(additional.resumeAt)) {
+      merged.resumeAt = additional.resumeAt;
+    }
+    if (additional.completed === true) {
+      merged.completed = true;
+    }
+    if (!Number.isFinite(merged.watchedAt) && Number.isFinite(additional.watchedAt)) {
+      merged.watchedAt = additional.watchedAt;
+    }
+    target.metadata = Object.keys(merged).length ? merged : undefined;
+  }
+
+  if (!target.video && source.video) {
+    target.video = cloneVideoMetadata(source.video);
+  }
+
+  if (!target.profile && source.profile) {
+    target.profile = cloneProfileMetadata(source.profile);
+  }
+
+  if (!Number.isFinite(target.resumeAt) && Number.isFinite(source.resumeAt)) {
+    target.resumeAt = Math.max(0, Math.floor(source.resumeAt));
+  }
+
+  if (source.completed === true) {
+    target.completed = true;
+  }
+}
+
 function clonePointerItem(pointer) {
   if (!pointer || typeof pointer !== "object") {
     return null;
@@ -269,6 +1501,31 @@ function clonePointerItem(pointer) {
     cloned.session = true;
   }
 
+  const metadata = clonePointerMetadata(pointer.metadata);
+  if (metadata) {
+    cloned.metadata = metadata;
+  }
+
+  const video = cloneVideoMetadata(pointer.video) || metadata?.video || null;
+  if (video) {
+    cloned.video = video;
+  }
+
+  const profile = cloneProfileMetadata(pointer.profile) || metadata?.profile || null;
+  if (profile) {
+    cloned.profile = profile;
+  }
+
+  if (Number.isFinite(pointer.resumeAt)) {
+    cloned.resumeAt = Math.max(0, Math.floor(pointer.resumeAt));
+  } else if (Number.isFinite(metadata?.resumeAt)) {
+    cloned.resumeAt = metadata.resumeAt;
+  }
+
+  if (pointer.completed === true || metadata?.completed === true) {
+    cloned.completed = true;
+  }
+
   return cloned;
 }
 
@@ -325,7 +1582,7 @@ function normalizePointerInput(pointer) {
 
   if (trimmed.startsWith("naddr") || trimmed.startsWith("nevent")) {
     try {
-      const decoder = window?.NostrTools?.nip19?.decode;
+      const decoder = getCachedNostrTools()?.nip19?.decode;
       if (typeof decoder === "function") {
         const decoded = decoder(trimmed);
         if (decoded?.type === "naddr" && decoded.data) {
@@ -611,6 +1868,172 @@ function rememberViewPublish(scope, bucketIndex) {
   }
 }
 
+function deriveRebroadcastBucketIndex(referenceSeconds = null) {
+  const windowSeconds = Math.max(
+    1,
+    Number(ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS) || 0
+  );
+  const baseSeconds = Number.isFinite(referenceSeconds)
+    ? Math.max(0, Math.floor(referenceSeconds))
+    : Math.floor(Date.now() / 1000);
+  return Math.floor(baseSeconds / windowSeconds);
+}
+
+function getRebroadcastCooldownWindowMs() {
+  const windowSeconds = Math.max(
+    1,
+    Number(ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS) || 0
+  );
+  return windowSeconds * 1000;
+}
+
+function deriveRebroadcastScope(pubkey, eventId) {
+  const normalizedPubkey =
+    typeof pubkey === "string" && pubkey.trim()
+      ? pubkey.trim().toLowerCase()
+      : "";
+  const normalizedEventId =
+    typeof eventId === "string" && eventId.trim()
+      ? eventId.trim().toLowerCase()
+      : "";
+  if (!normalizedPubkey || !normalizedEventId) {
+    return "";
+  }
+  return `${normalizedPubkey}:${normalizedEventId}`;
+}
+
+function readRebroadcastGuardEntry(scope) {
+  if (!scope) {
+    return null;
+  }
+
+  const windowMs = getRebroadcastCooldownWindowMs();
+  const now = Date.now();
+  const entry = rebroadcastAttemptMemory.get(scope);
+
+  if (entry) {
+    const age = now - Number(entry.seenAt);
+    if (!Number.isFinite(entry.seenAt) || age >= windowMs) {
+      rebroadcastAttemptMemory.delete(scope);
+    } else {
+      return entry;
+    }
+  }
+
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
+
+  const storageKey = `${REBROADCAST_GUARD_PREFIX}:${scope}`;
+  let rawValue = null;
+  try {
+    rawValue = localStorage.getItem(storageKey);
+  } catch (error) {
+    if (isDevMode) {
+      console.warn("[nostr] Failed to read rebroadcast guard entry:", error);
+    }
+    return null;
+  }
+
+  if (typeof rawValue !== "string" || !rawValue) {
+    return null;
+  }
+
+  const [storedBucketRaw, storedSeenRaw] = rawValue.split(":", 2);
+  const storedBucket = Number(storedBucketRaw);
+  const storedSeenAt = Number(storedSeenRaw);
+
+  if (!Number.isFinite(storedBucket) || !Number.isFinite(storedSeenAt)) {
+    try {
+      localStorage.removeItem(storageKey);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[nostr] Failed to clear corrupt rebroadcast guard entry:", error);
+      }
+    }
+    return null;
+  }
+
+  if (now - storedSeenAt >= windowMs) {
+    try {
+      localStorage.removeItem(storageKey);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[nostr] Failed to remove expired rebroadcast guard entry:", error);
+      }
+    }
+    return null;
+  }
+
+  const normalizedEntry = {
+    bucket: storedBucket,
+    seenAt: storedSeenAt,
+  };
+  rebroadcastAttemptMemory.set(scope, normalizedEntry);
+  return normalizedEntry;
+}
+
+function hasRecentRebroadcastAttempt(scope, bucketIndex) {
+  if (!scope || !Number.isFinite(bucketIndex)) {
+    return false;
+  }
+
+  const entry = readRebroadcastGuardEntry(scope);
+  return entry ? Number(entry.bucket) === bucketIndex : false;
+}
+
+function rememberRebroadcastAttempt(scope, bucketIndex) {
+  if (!scope || !Number.isFinite(bucketIndex)) {
+    return;
+  }
+
+  const now = Date.now();
+  const windowMs = getRebroadcastCooldownWindowMs();
+  const entry = rebroadcastAttemptMemory.get(scope);
+  if (entry && Number.isFinite(entry.seenAt) && now - entry.seenAt >= windowMs) {
+    rebroadcastAttemptMemory.delete(scope);
+  }
+
+  const normalizedEntry = { bucket: bucketIndex, seenAt: now };
+  rebroadcastAttemptMemory.set(scope, normalizedEntry);
+
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+
+  const storageKey = `${REBROADCAST_GUARD_PREFIX}:${scope}`;
+  try {
+    localStorage.setItem(storageKey, `${bucketIndex}:${now}`);
+  } catch (error) {
+    if (isDevMode) {
+      console.warn("[nostr] Failed to persist rebroadcast guard entry:", error);
+    }
+  }
+}
+
+function getRebroadcastCooldownState(scope) {
+  if (!scope) {
+    return null;
+  }
+  const entry = readRebroadcastGuardEntry(scope);
+  if (!entry || !Number.isFinite(entry.seenAt)) {
+    return null;
+  }
+  const windowMs = getRebroadcastCooldownWindowMs();
+  const expiresAt = entry.seenAt + windowMs;
+  const remainingMs = Math.max(0, expiresAt - Date.now());
+  if (remainingMs <= 0) {
+    return null;
+  }
+  return {
+    scope,
+    seenAt: entry.seenAt,
+    bucket: entry.bucket,
+    expiresAt,
+    remainingMs,
+  };
+}
+
 function isVideoViewEvent(event, pointer) {
   if (!event || typeof event !== "object") {
     return false;
@@ -897,8 +2320,22 @@ function normalizeActorKey(actor) {
   if (typeof actor !== "string") {
     return "";
   }
+
   const trimmed = actor.trim();
-  return trimmed ? trimmed.toLowerCase() : "";
+  if (!trimmed) {
+    return "";
+  }
+
+  if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  const decodedHex = decodeNpubToHex(trimmed);
+  if (decodedHex) {
+    return decodedHex.toLowerCase();
+  }
+
+  return trimmed.toLowerCase();
 }
 
 function canonicalizeWatchHistoryItems(rawItems, maxItems = WATCH_HISTORY_MAX_ITEMS) {
@@ -925,7 +2362,21 @@ function canonicalizeWatchHistoryItems(rawItems, maxItems = WATCH_HISTORY_MAX_IT
         ? pointer.watchedAt
         : 0;
       if (incomingWatched > currentWatched) {
+        mergePointerDetails(pointer, existing);
+        pointer.watchedAt = incomingWatched;
+        pointer.session = existing.session === true || pointer.session === true;
         seen.set(key, pointer);
+        continue;
+      }
+
+      if (incomingWatched === currentWatched) {
+        mergePointerDetails(existing, pointer);
+      } else {
+        mergePointerDetails(existing, pointer);
+      }
+
+      if (pointer.session === true) {
+        existing.session = true;
       }
     }
   }
@@ -974,25 +2425,81 @@ function serializeWatchHistoryItems(items) {
     return "[]";
   }
 
-  const normalized = items.map((item) => {
-    const type = item?.type === "a" ? "a" : "e";
-    const value = typeof item?.value === "string" ? item.value : "";
-    const relay =
-      typeof item?.relay === "string" && item.relay.trim()
-        ? item.relay.trim()
+  const normalized = items
+    .map((item) => {
+      const type = item?.type === "a" ? "a" : "e";
+      const value = typeof item?.value === "string" ? item.value : "";
+      if (!type || !value) {
+        return null;
+      }
+
+      const relay =
+        typeof item?.relay === "string" && item.relay.trim()
+          ? item.relay.trim()
+          : undefined;
+      const watchedAt = Number.isFinite(item?.watchedAt)
+        ? Math.max(0, Math.floor(item.watchedAt))
         : undefined;
-    const watchedAt = Number.isFinite(item?.watchedAt)
-      ? Math.max(0, Math.floor(item.watchedAt))
-      : undefined;
-    const payload = { type, value };
-    if (relay) {
-      payload.relay = relay;
-    }
-    if (watchedAt !== undefined) {
-      payload.watchedAt = watchedAt;
-    }
-    return payload;
-  });
+
+      const payload = { type, value };
+      if (relay) {
+        payload.relay = relay;
+      }
+      if (watchedAt !== undefined) {
+        payload.watchedAt = watchedAt;
+      }
+
+      const metadata = clonePointerMetadata(item?.metadata);
+      if (metadata) {
+        payload.metadata = metadata;
+      }
+
+      const video = metadata?.video || cloneVideoMetadata(item?.video);
+      if (video) {
+        if (payload.metadata) {
+          payload.metadata.video = payload.metadata.video || video;
+        } else {
+          payload.video = video;
+        }
+      }
+
+      const profile = metadata?.profile || cloneProfileMetadata(item?.profile);
+      if (profile) {
+        if (payload.metadata) {
+          payload.metadata.profile = payload.metadata.profile || profile;
+        } else {
+          payload.profile = profile;
+        }
+      }
+
+      const resumeAt = Number.isFinite(item?.resumeAt)
+        ? Math.max(0, Math.floor(item.resumeAt))
+        : undefined;
+      if (resumeAt !== undefined) {
+        if (payload.metadata) {
+          if (!Number.isFinite(payload.metadata.resumeAt)) {
+            payload.metadata.resumeAt = resumeAt;
+          }
+        } else {
+          payload.resumeAt = resumeAt;
+        }
+      }
+
+      if (item?.completed === true) {
+        if (payload.metadata) {
+          payload.metadata.completed = true;
+        } else {
+          payload.completed = true;
+        }
+      }
+
+      if (payload.metadata && !Object.keys(payload.metadata).length) {
+        delete payload.metadata;
+      }
+
+      return payload;
+    })
+    .filter(Boolean);
 
   return JSON.stringify(normalized);
 }
@@ -1044,11 +2551,12 @@ function eventToAddressPointer(event) {
 }
 
 function signEventWithPrivateKey(event, privateKey) {
+  const tools = getCachedNostrTools();
   if (
     !privateKey ||
     typeof privateKey !== "string" ||
-    !window?.NostrTools?.getEventHash ||
-    typeof window.NostrTools.signEvent !== "function"
+    !tools?.getEventHash ||
+    typeof tools.signEvent !== "function"
   ) {
     throw new Error("Missing signing primitives");
   }
@@ -1064,9 +2572,8 @@ function signEventWithPrivateKey(event, privateKey) {
     tags,
     content: typeof event.content === "string" ? event.content : "",
   };
-
-  const id = window.NostrTools.getEventHash(prepared);
-  const sig = window.NostrTools.signEvent(prepared, privateKey);
+  const id = tools.getEventHash(prepared);
+  const sig = tools.signEvent(prepared, privateKey);
 
   return { ...prepared, id, sig };
 }
@@ -1086,39 +2593,182 @@ function cloneEventForCache(event) {
   return cloned;
 }
 
-/**
- * Example "encryption" that just reverses strings.
- * In real usage, replace with actual crypto.
- */
-function fakeEncrypt(magnet) {
-  return magnet.split("").reverse().join("");
+const BECH32_CHARSET = "qpzry9x8gf2tvdw0s3jn54khce6mua7l";
+const BECH32_CHARSET_MAP = (() => {
+  const map = new Map();
+  for (let index = 0; index < BECH32_CHARSET.length; index += 1) {
+    map.set(BECH32_CHARSET[index], index);
+  }
+  return map;
+})();
+
+const BECH32_GENERATORS = [
+  0x3b6a57b2,
+  0x26508e6d,
+  0x1ea119fa,
+  0x3d4233dd,
+  0x2a1462b3,
+];
+
+function bech32Polymod(values) {
+  let chk = 1;
+  for (const value of values) {
+    const top = chk >>> 25;
+    chk = ((chk & 0x1ffffff) << 5) ^ value;
+    for (let bit = 0; bit < BECH32_GENERATORS.length; bit += 1) {
+      if ((top >>> bit) & 1) {
+        chk ^= BECH32_GENERATORS[bit];
+      }
+    }
+  }
+  return chk;
 }
-function fakeDecrypt(encrypted) {
-  return encrypted.split("").reverse().join("");
+
+function bech32HrpExpand(hrp) {
+  const expansion = [];
+  for (let i = 0; i < hrp.length; i += 1) {
+    expansion.push(hrp.charCodeAt(i) >>> 5);
+  }
+  expansion.push(0);
+  for (let i = 0; i < hrp.length; i += 1) {
+    expansion.push(hrp.charCodeAt(i) & 31);
+  }
+  return expansion;
+}
+
+function bech32VerifyChecksum(hrp, values) {
+  return bech32Polymod([...bech32HrpExpand(hrp), ...values]) === 1;
+}
+
+function convertBits(data, fromBits, toBits) {
+  let acc = 0;
+  let bits = 0;
+  const maxValue = (1 << toBits) - 1;
+  const result = [];
+
+  for (const value of data) {
+    if (value < 0 || value >>> fromBits !== 0) {
+      return null;
+    }
+    acc = (acc << fromBits) | value;
+    bits += fromBits;
+    while (bits >= toBits) {
+      bits -= toBits;
+      result.push((acc >>> bits) & maxValue);
+    }
+  }
+
+  if (bits > 0) {
+    if ((acc << (toBits - bits)) & maxValue) {
+      return null;
+    }
+  }
+
+  return result;
+}
+
+function decodeBech32Npub(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  const hasMixedCase = value !== value.toLowerCase() && value !== value.toUpperCase();
+  if (hasMixedCase) {
+    return "";
+  }
+
+  const normalized = value.toLowerCase();
+  const separatorIndex = normalized.lastIndexOf("1");
+  if (separatorIndex <= 0 || separatorIndex + 7 > normalized.length) {
+    return "";
+  }
+
+  const hrp = normalized.slice(0, separatorIndex);
+  if (hrp !== "npub") {
+    return "";
+  }
+
+  const dataPart = normalized.slice(separatorIndex + 1);
+  const values = [];
+  for (let i = 0; i < dataPart.length; i += 1) {
+    const mapped = BECH32_CHARSET_MAP.get(dataPart[i]);
+    if (typeof mapped !== "number") {
+      return "";
+    }
+    values.push(mapped);
+  }
+
+  if (values.length < 7 || !bech32VerifyChecksum(hrp, values)) {
+    return "";
+  }
+
+  const words = values.slice(0, -6);
+  const bytes = convertBits(words, 5, 8);
+  if (!bytes || bytes.length !== 32) {
+    return "";
+  }
+
+  return Array.from(bytes)
+    .map((byte) => byte.toString(16).padStart(2, "0"))
+    .join("");
 }
 
 function decodeNpubToHex(npub) {
-  if (typeof npub !== "string" || !npub.trim()) {
+  if (typeof npub !== "string") {
     return "";
   }
 
-  if (
-    !window?.NostrTools?.nip19 ||
-    typeof window.NostrTools.nip19.decode !== "function"
-  ) {
+  const trimmed = npub.trim();
+  if (!trimmed) {
     return "";
   }
 
-  try {
-    const decoded = window.NostrTools.nip19.decode(npub.trim());
-    if (decoded?.type === "npub" && typeof decoded.data === "string") {
-      return decoded.data;
-    }
-  } catch (error) {
-    if (isDevMode) {
-      console.warn(`[nostr] Failed to decode npub: ${npub}`, error);
+  if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  const lower = trimmed.toLowerCase();
+  const hasNpubPrefix = lower.startsWith("npub1");
+  if (!hasNpubPrefix) {
+    return "";
+  }
+
+  const warnableNpub = /^npub1[023456789acdefghjklmnpqrstuvwxyz]+$/i.test(
+    trimmed
+  );
+
+  let tools = cachedNostrTools;
+  if (!tools || typeof tools?.nip19?.decode !== "function") {
+    const fallbackTools = readToolkitFromScope();
+    if (fallbackTools) {
+      tools = fallbackTools;
     }
   }
+
+  let decodeError = null;
+  if (tools?.nip19 && typeof tools.nip19.decode === "function") {
+    try {
+      const decoded = tools.nip19.decode(trimmed);
+      if (decoded?.type === "npub" && typeof decoded.data === "string") {
+        return decoded.data;
+      }
+    } catch (error) {
+      decodeError = error;
+    }
+  }
+
+  const manualDecoded = decodeBech32Npub(trimmed);
+  if (manualDecoded) {
+    return manualDecoded;
+  }
+
+  if (isDevMode && warnableNpub) {
+    console.warn(
+      `[nostr] Failed to decode npub: ${trimmed}`,
+      decodeError || new Error("invalid-npub"),
+    );
+  }
+
   return "";
 }
 
@@ -1404,9 +3054,10 @@ function getActiveKey(video) {
 
 export { convertEventToVideo };
 
-class NostrClient {
+export class NostrClient {
   constructor() {
     this.pool = null;
+    this.poolPromise = null;
     this.pubkey = null;
     this.relays = sanitizeRelayList(Array.from(DEFAULT_RELAY_URLS));
     this.readRelays = Array.from(this.relays);
@@ -1415,12 +3066,18 @@ class NostrClient {
     // Store all events so older links still work
     this.allEvents = new Map();
 
+    // Keep a separate cache of raw events so we can republish the exact payload
+    this.rawEvents = new Map();
+
     // “activeMap” holds only the newest version for each root
     this.activeMap = new Map();
 
+    this.rootCreatedAtByRoot = new Map();
+
     this.hasRestoredLocalData = false;
 
     this.sessionActor = null;
+    this.nip71Cache = new Map();
     this.watchHistoryCache = new Map();
     this.watchHistoryStorage = null;
     this.watchHistoryRepublishTimers = new Map();
@@ -1430,6 +3087,181 @@ class NostrClient {
     this.watchHistoryLastCreatedAt = 0;
     this.countRequestCounter = 0;
     this.countUnsupportedRelays = new Set();
+    this.extensionPermissionCache = new Set();
+  }
+
+  markExtensionPermissions(methods = []) {
+    if (!this.extensionPermissionCache) {
+      this.extensionPermissionCache = new Set();
+    }
+
+    if (!Array.isArray(methods)) {
+      return;
+    }
+
+    for (const method of methods) {
+      if (typeof method !== "string") {
+        continue;
+      }
+      const normalized = method.trim();
+      if (normalized) {
+        this.extensionPermissionCache.add(normalized);
+      }
+    }
+  }
+
+  async ensureExtensionPermissions(methods = DEFAULT_NIP07_PERMISSION_METHODS) {
+    if (!Array.isArray(methods)) {
+      methods = [];
+    }
+
+    const normalized = Array.from(
+      new Set(
+        methods
+          .map((method) =>
+            typeof method === "string" && method.trim() ? method.trim() : "",
+          )
+          .filter(Boolean),
+      ),
+    );
+
+    if (!normalized.length) {
+      return { ok: true };
+    }
+
+    const outstanding = normalized.filter((method) =>
+      this.extensionPermissionCache ? !this.extensionPermissionCache.has(method) : true,
+    );
+
+    if (!outstanding.length) {
+      return { ok: true };
+    }
+
+    const extension = typeof window !== "undefined" ? window.nostr : null;
+    if (!extension) {
+      return { ok: false, error: new Error("extension-unavailable") };
+    }
+
+    if (typeof extension.enable !== "function") {
+      this.markExtensionPermissions(outstanding);
+      return { ok: true, code: "enable-unavailable" };
+    }
+
+    const permissionVariants = [null];
+    if (outstanding.length) {
+      permissionVariants.push({
+        permissions: outstanding.map((method) => ({ method })),
+      });
+      permissionVariants.push({ permissions: outstanding });
+    }
+
+    let lastError = null;
+    for (const options of permissionVariants) {
+      const variantTimeoutOverrides = options
+        ? {
+            timeoutMs: Math.min(
+              NIP07_LOGIN_TIMEOUT_MS,
+              getEnableVariantTimeoutMs(),
+            ),
+            retryMultiplier: 1,
+          }
+        : { retryMultiplier: 1 };
+
+      try {
+        await runNip07WithRetry(
+          () => (options ? extension.enable(options) : extension.enable()),
+          { label: "extension.enable", ...variantTimeoutOverrides },
+        );
+        this.markExtensionPermissions(outstanding);
+        return { ok: true };
+      } catch (error) {
+        lastError = error;
+        if (options && isDevMode) {
+          console.warn(
+            "[nostr] extension.enable request with explicit permissions failed:",
+            error,
+          );
+        }
+      }
+    }
+
+    return {
+      ok: false,
+      error: lastError || new Error("permission-denied"),
+    };
+  }
+
+  applyRootCreatedAt(video) {
+    if (!video || typeof video !== "object") {
+      return null;
+    }
+
+    const rootId =
+      typeof video.videoRootId === "string" && video.videoRootId
+        ? video.videoRootId
+        : typeof video.id === "string"
+          ? video.id
+          : "";
+
+    if (!rootId) {
+      if ("rootCreatedAt" in video) {
+        delete video.rootCreatedAt;
+      }
+      return null;
+    }
+
+    const candidates = [];
+
+    const declaredRoot = Number.isFinite(video.rootCreatedAt)
+      ? Math.floor(video.rootCreatedAt)
+      : null;
+    if (declaredRoot !== null) {
+      candidates.push(declaredRoot);
+    }
+
+    const nip71Created = Number.isFinite(video?.nip71Source?.created_at)
+      ? Math.floor(video.nip71Source.created_at)
+      : null;
+    if (nip71Created !== null) {
+      candidates.push(nip71Created);
+    }
+
+    const createdAt = Number.isFinite(video.created_at)
+      ? Math.floor(video.created_at)
+      : null;
+    if (createdAt !== null) {
+      candidates.push(createdAt);
+    }
+
+    const existingValue = this.rootCreatedAtByRoot.get(rootId);
+    if (Number.isFinite(existingValue)) {
+      candidates.push(Math.floor(existingValue));
+    }
+
+    let earliest = null;
+    for (const candidate of candidates) {
+      if (!Number.isFinite(candidate)) {
+        continue;
+      }
+      if (earliest === null || candidate < earliest) {
+        earliest = candidate;
+      }
+    }
+
+    if (earliest !== null) {
+      this.rootCreatedAtByRoot.set(rootId, earliest);
+      video.rootCreatedAt = earliest;
+    } else if ("rootCreatedAt" in video) {
+      delete video.rootCreatedAt;
+    }
+
+    const activeKey = getActiveKey(video);
+    const activeVideo = this.activeMap.get(activeKey);
+    if (activeVideo && activeVideo !== video && earliest !== null) {
+      activeVideo.rootCreatedAt = earliest;
+    }
+
+    return earliest;
   }
 
   restoreSessionActorFromStorage() {
@@ -1539,7 +3371,7 @@ class NostrClient {
   }
 
   mintSessionActor() {
-    const tools = window?.NostrTools || null;
+    const tools = getCachedNostrTools();
     if (!tools) {
       if (isDevMode) {
         console.warn("[nostr] Cannot mint session actor without NostrTools.");
@@ -1749,13 +3581,16 @@ class NostrClient {
     }
 
     this.allEvents.clear();
+    this.rawEvents.clear();
     this.activeMap.clear();
+    this.rootCreatedAtByRoot.clear();
 
     for (const [id, video] of Object.entries(events)) {
       if (!id || !video || typeof video !== "object") {
         continue;
       }
 
+      this.applyRootCreatedAt(video);
       this.allEvents.set(id, video);
       if (video.deleted) {
         continue;
@@ -2281,6 +4116,10 @@ class NostrClient {
       }
     }
 
+    if (useExtensionEncrypt) {
+      await this.ensureExtensionPermissions(DEFAULT_NIP07_PERMISSION_METHODS);
+    }
+
     const canonicalItems = canonicalizeWatchHistoryItems(
       Array.isArray(rawItems) ? rawItems : [],
       WATCH_HISTORY_MAX_ITEMS,
@@ -2337,14 +4176,28 @@ class NostrClient {
       this.watchHistoryLastCreatedAt + 1,
     );
 
+    let cachedNip04Tools = null;
+    const ensureNip04Tools = async () => {
+      if (cachedNip04Tools) {
+        return cachedNip04Tools;
+      }
+      const tools = await ensureNostrTools();
+      if (tools?.nip04 && typeof tools.nip04.encrypt === "function") {
+        cachedNip04Tools = tools;
+        return cachedNip04Tools;
+      }
+      return null;
+    };
+
     const encryptChunk = async (plaintext) => {
       if (useExtensionEncrypt) {
         return extension.nip04.encrypt(actorPubkey, plaintext);
       }
-      if (!window?.NostrTools?.nip04?.encrypt) {
+      const tools = await ensureNip04Tools();
+      if (!tools?.nip04 || typeof tools.nip04.encrypt !== "function") {
         throw new Error("nip04-unavailable");
       }
-      return window.NostrTools.nip04.encrypt(privateKey, actorPubkey, plaintext);
+      return tools.nip04.encrypt(privateKey, actorPubkey, plaintext);
     };
 
     const signEvent = async (event) => {
@@ -2791,6 +4644,8 @@ class NostrClient {
       return { pointerEvent: null, items: [], snapshotId: "" };
     }
 
+    const actorKeyIsHex = /^[0-9a-f]{64}$/.test(actorKey);
+
     console.info("[nostr] Fetching watch history from relays.", {
       actor: resolvedActor,
       forceRefresh: options.forceRefresh === true,
@@ -2802,6 +4657,50 @@ class NostrClient {
     const now = Date.now();
     const ttl = this.getWatchHistoryCacheTtlMs();
 
+    const loadFromStorage = async () => {
+      const storageEntry = this.getWatchHistoryStorage().actors?.[actorKey];
+      const items = Array.isArray(storageEntry?.items)
+        ? canonicalizeWatchHistoryItems(storageEntry.items, WATCH_HISTORY_MAX_ITEMS)
+        : [];
+      const fingerprint = typeof storageEntry?.fingerprint === "string"
+        ? storageEntry.fingerprint
+        : await this.getWatchHistoryFingerprint(resolvedActor, items);
+      const entry = {
+        actor: resolvedActor,
+        items,
+        snapshotId: typeof storageEntry?.snapshotId === "string"
+          ? storageEntry.snapshotId
+          : "",
+        pointerEvent: null,
+        chunkEvents: [],
+        savedAt: now,
+        fingerprint,
+        metadata: sanitizeWatchHistoryMetadata(storageEntry?.metadata),
+      };
+      this.watchHistoryCache.set(actorKey, entry);
+      this.persistWatchHistoryEntry(actorKey, entry);
+      return { pointerEvent: null, items, snapshotId: entry.snapshotId };
+    };
+
+    if (!actorKeyIsHex) {
+      console.warn(
+        `[nostr] Cannot normalize watch history actor key to hex. Aborting relay fetch for ${resolvedActor}.`,
+      );
+      if (
+        !options.forceRefresh &&
+        existingEntry &&
+        Number.isFinite(existingEntry.savedAt) &&
+        now - existingEntry.savedAt < ttl
+      ) {
+        return {
+          pointerEvent: existingEntry.pointerEvent || null,
+          items: existingEntry.items || [],
+          snapshotId: existingEntry.snapshotId || "",
+        };
+      }
+      return await loadFromStorage();
+    }
+
     if (
       !options.forceRefresh &&
       existingEntry &&
@@ -2854,7 +4753,7 @@ class NostrClient {
       const filters = [
         {
           kinds: [WATCH_HISTORY_KIND],
-          authors: [resolvedActor],
+          authors: [actorKey],
           "#d": identifiers,
           limit,
         },
@@ -2894,28 +4793,7 @@ class NostrClient {
           actor: resolvedActor,
         }
       );
-      const storageEntry = this.getWatchHistoryStorage().actors?.[actorKey];
-      const items = Array.isArray(storageEntry?.items)
-        ? canonicalizeWatchHistoryItems(storageEntry.items, WATCH_HISTORY_MAX_ITEMS)
-        : [];
-      const fingerprint = typeof storageEntry?.fingerprint === "string"
-        ? storageEntry.fingerprint
-        : await this.getWatchHistoryFingerprint(resolvedActor, items);
-      const entry = {
-        actor: resolvedActor,
-        items,
-        snapshotId: typeof storageEntry?.snapshotId === "string"
-          ? storageEntry.snapshotId
-          : "",
-        pointerEvent: null,
-        chunkEvents: [],
-        savedAt: now,
-        fingerprint,
-        metadata: sanitizeWatchHistoryMetadata(storageEntry?.metadata),
-      };
-      this.watchHistoryCache.set(actorKey, entry);
-      this.persistWatchHistoryEntry(actorKey, entry);
-      return { pointerEvent: null, items, snapshotId: entry.snapshotId };
+      return await loadFromStorage();
     }
 
     const fallbackItems = extractPointerItemsFromEvent(pointerEvent);
@@ -2967,14 +4845,14 @@ class NostrClient {
     if (chunkIdentifiers.length) {
       chunkFilters.push({
         kinds: [WATCH_HISTORY_KIND],
-        authors: [resolvedActor],
+        authors: [actorKey],
         "#d": chunkIdentifiers,
         limit: Math.max(chunkIdentifiers.length * 2, limit),
       });
     } else if (snapshotId) {
       chunkFilters.push({
         kinds: [WATCH_HISTORY_KIND],
-        authors: [resolvedActor],
+        authors: [actorKey],
         "#snapshot": [snapshotId],
         limit,
       });
@@ -3022,31 +4900,113 @@ class NostrClient {
     const decryptErrors = [];
     const collectedItems = [];
 
-    const decryptChunk = async (ciphertext) => {
+    let cachedDecryptTools = null;
+    const ensureDecryptTools = async () => {
+      if (cachedDecryptTools) {
+        return cachedDecryptTools;
+      }
+      const tools = await ensureNostrTools();
+      if (tools?.nip04 && typeof tools.nip04.decrypt === "function") {
+        cachedDecryptTools = tools;
+        console.info("[nostr] Loaded nostr-tools nip04 helpers for watch history decryption.");
+        return cachedDecryptTools;
+      }
+      console.warn("[nostr] Unable to load nostr-tools nip04 helpers for watch history decryption.");
+      return null;
+    };
+
+    const decryptChunk = async (ciphertext, context = {}) => {
       if (!ciphertext || typeof ciphertext !== "string") {
         throw new Error("empty-ciphertext");
       }
+      const ciphertextPreview = ciphertext.slice(0, 32);
+      console.info("[nostr] Attempting to decrypt watch history chunk.", {
+        actorKey,
+        chunkIdentifier: context.chunkIdentifier ?? null,
+        eventId: context.eventId ?? null,
+        ciphertextPreview,
+        ciphertextFormat: "base64 NIP-04 ciphertext",
+        expectedPlaintextFormat:
+          "JSON string with { version, items, snapshot, chunkIndex, totalChunks }",
+      });
       const extensionDecrypt =
         extension &&
         typeof extension?.nip04?.decrypt === "function" &&
         normalizeActorKey(this.pubkey) === actorKey;
       if (extensionDecrypt) {
-        return extension.nip04.decrypt(resolvedActor, ciphertext);
+        await this.ensureExtensionPermissions(DEFAULT_NIP07_PERMISSION_METHODS);
+        console.info(
+          "[nostr] Using logged in user's extension key to decrypt watch history chunk.",
+          {
+            actorKey,
+            chunkIdentifier: context.chunkIdentifier ?? null,
+            eventId: context.eventId ?? null,
+          },
+        );
+        const plaintext = await extension.nip04.decrypt(actorKey, ciphertext);
+        console.info("[nostr] Successfully decrypted watch history chunk via extension key.", {
+          actorKey,
+          chunkIdentifier: context.chunkIdentifier ?? null,
+          eventId: context.eventId ?? null,
+        });
+        return plaintext;
       }
       if (!this.sessionActor || this.sessionActor.pubkey !== actorKey) {
+        console.info(
+          "[nostr] Session actor mismatch while decrypting watch history chunk. Ensuring session actor matches requested key.",
+          {
+            actorKey,
+            chunkIdentifier: context.chunkIdentifier ?? null,
+            eventId: context.eventId ?? null,
+            currentSessionActor: this.sessionActor?.pubkey ?? null,
+          },
+        );
         await this.ensureSessionActor();
       }
       if (!this.sessionActor || this.sessionActor.pubkey !== actorKey) {
+        console.error(
+          "[nostr] Watch history decrypt failed: session actor key unavailable after ensure.",
+          {
+            actorKey,
+            chunkIdentifier: context.chunkIdentifier ?? null,
+            eventId: context.eventId ?? null,
+            currentSessionActor: this.sessionActor?.pubkey ?? null,
+          },
+        );
         throw new Error("missing-session-key");
       }
-      if (!window?.NostrTools?.nip04?.decrypt) {
+      const tools = await ensureDecryptTools();
+      if (!tools?.nip04 || typeof tools.nip04.decrypt !== "function") {
+        console.error(
+          "[nostr] Watch history decrypt failed: nip04 helpers unavailable.",
+          {
+            actorKey,
+            chunkIdentifier: context.chunkIdentifier ?? null,
+            eventId: context.eventId ?? null,
+          },
+        );
         throw new Error("nip04-unavailable");
       }
-      return window.NostrTools.nip04.decrypt(
+      console.info(
+        "[nostr] Using session actor private key to decrypt watch history chunk.",
+        {
+          actorKey,
+          chunkIdentifier: context.chunkIdentifier ?? null,
+          eventId: context.eventId ?? null,
+          sessionActor: this.sessionActor?.pubkey ?? null,
+        },
+      );
+      const plaintext = await tools.nip04.decrypt(
         this.sessionActor.privateKey,
-        resolvedActor,
+        actorKey,
         ciphertext,
       );
+      console.info("[nostr] Successfully decrypted watch history chunk via session actor key.", {
+        actorKey,
+        chunkIdentifier: context.chunkIdentifier ?? null,
+        eventId: context.eventId ?? null,
+      });
+      return plaintext;
     };
 
     const chunkCount = latestChunks.size || chunkIdentifiers.length || 0;
@@ -3061,10 +5021,26 @@ class NostrClient {
       }
       const fallbackPointers = extractPointerItemsFromEvent(event);
       const ciphertext = typeof event.content === "string" ? event.content : "";
+      const ciphertextPreview = ciphertext.slice(0, 32);
       let payload;
+      const chunkContext = {
+        chunkIdentifier: identifier,
+        eventId: event.id ?? null,
+      };
       if (isNip04EncryptedWatchHistoryEvent(event, ciphertext)) {
+        console.info("[nostr] Watch history chunk is marked as NIP-04 encrypted. Beginning decrypt flow.", {
+          actorKey,
+          ...chunkContext,
+        });
         try {
-          const plaintext = await decryptChunk(ciphertext);
+          const plaintext = await decryptChunk(ciphertext, chunkContext);
+          console.info("[nostr] Decrypted watch history chunk. Parsing plaintext payload.", {
+            actorKey,
+            ...chunkContext,
+            plaintextPreview: typeof plaintext === "string" ? plaintext.slice(0, 64) : null,
+            expectedPlaintextFormat:
+              "JSON string with { version, items, snapshot, chunkIndex, totalChunks }",
+          });
           payload = parseWatchHistoryContentWithFallback(
             plaintext,
             fallbackPointers,
@@ -3078,12 +5054,30 @@ class NostrClient {
           );
         } catch (error) {
           decryptErrors.push(error);
+          console.error("[nostr] Decrypt failed for watch history chunk. Falling back to pointer items.", {
+            actorKey,
+            ...chunkContext,
+            error: error?.message || error,
+            ciphertextPreview,
+            fallbackPointerCount: Array.isArray(fallbackPointers)
+              ? fallbackPointers.length
+              : 0,
+            expectedPlaintextFormat:
+              "JSON string with { version, items, snapshot, chunkIndex, totalChunks }",
+          });
           payload = {
             version: 0,
             items: fallbackPointers,
           };
         }
       } else {
+        console.info("[nostr] Watch history chunk is plaintext. Attempting to parse expected payload format.", {
+          actorKey,
+          ...chunkContext,
+          ciphertextPreview,
+          expectedPlaintextFormat:
+            "JSON string with { version, items, snapshot, chunkIndex, totalChunks }",
+        });
         payload = parseWatchHistoryContentWithFallback(
           ciphertext,
           fallbackPointers,
@@ -3772,7 +5766,7 @@ class NostrClient {
     this.restoreLocalData();
 
     try {
-      this.pool = new window.NostrTools.SimplePool();
+      await this.ensurePool();
       const results = await this.connectToRelays();
       const successfulRelays = results
         .filter((r) => r.success)
@@ -3789,6 +5783,70 @@ class NostrClient {
     }
   }
 
+  async ensurePool() {
+    if (this.pool) {
+      return this.pool;
+    }
+
+    if (this.poolPromise) {
+      return this.poolPromise;
+    }
+
+    const tools = await ensureNostrTools();
+    const SimplePool = resolveSimplePoolConstructor(tools);
+
+    if (typeof SimplePool !== "function") {
+      if (isDevMode) {
+        if (tools && typeof tools === "object") {
+          const availableKeys = Object.keys(tools).join(", ");
+          console.warn(
+            "[nostr] NostrTools helpers did not expose SimplePool. Available keys:",
+            availableKeys
+          );
+        } else {
+          console.warn(
+            "[nostr] NostrTools helpers were unavailable. Check that nostr-tools bundles can load on this domain."
+          );
+        }
+        if (nostrToolsBootstrapFailure) {
+          console.warn(
+            "[nostr] nostr-tools bootstrap failure details:",
+            nostrToolsBootstrapFailure
+          );
+        }
+      }
+      const error = new Error(
+        "NostrTools SimplePool is unavailable. Verify that nostr-tools resources can load on this domain."
+      );
+
+      error.code = "nostr-simplepool-unavailable";
+      if (nostrToolsBootstrapFailure) {
+        error.bootstrapFailure = nostrToolsBootstrapFailure;
+      }
+      this.poolPromise = null;
+      throw error;
+    }
+
+    const creation = Promise.resolve().then(() => {
+      const instance = new SimplePool();
+      this.pool = instance;
+      return instance;
+    });
+
+    const shared = creation
+      .then((instance) => {
+        this.poolPromise = Promise.resolve(instance);
+        return instance;
+      })
+      .catch((error) => {
+        this.poolPromise = null;
+        throw error;
+      });
+
+    this.poolPromise = shared;
+    return shared;
+  }
+
   // 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
@@ -3847,21 +5905,77 @@ class NostrClient {
         if (isDevMode) {
           console.log("Requesting permissions from NIP-07 extension...");
         }
-        try {
-          await withNip07Timeout(() => extension.enable());
-        } catch (enableErr) {
+        const requestedPermissionMethods = Array.from(
+          DEFAULT_NIP07_PERMISSION_METHODS,
+        );
+
+        const permissionVariants = [null];
+        const objectPermissions = requestedPermissionMethods
+          .map((method) =>
+            typeof method === "string" && method.trim()
+              ? { method: method.trim() }
+              : null,
+          )
+          .filter(Boolean);
+        if (objectPermissions.length) {
+          permissionVariants.push({ permissions: objectPermissions });
+        }
+        const stringPermissions = Array.from(
+          new Set(objectPermissions.map((entry) => entry.method)),
+        );
+        if (stringPermissions.length) {
+          permissionVariants.push({ permissions: stringPermissions });
+        }
+        let enableError = null;
+        for (const options of permissionVariants) {
+          try {
+            await runNip07WithRetry(
+              () =>
+                options
+                  ? extension.enable(options)
+                  : extension.enable(),
+              {
+                label: "extension.enable",
+                ...(options
+                  ? {
+                      timeoutMs: Math.min(
+                        NIP07_LOGIN_TIMEOUT_MS,
+                        getEnableVariantTimeoutMs(),
+                      ),
+                    }
+                  : {}),
+                retryMultiplier: 1,
+              },
+            );
+            enableError = null;
+            break;
+          } catch (error) {
+            enableError = error;
+            if (options && isDevMode) {
+              console.warn(
+                "[nostr] extension.enable request with explicit permissions failed:",
+                error,
+              );
+            }
+          }
+        }
+
+        if (enableError) {
           throw new Error(
-            enableErr && enableErr.message
-              ? enableErr.message
-              : "The NIP-07 extension denied the permission request."
+            enableError && enableError.message
+              ? enableError.message
+              : "The NIP-07 extension denied the permission request.",
           );
         }
+
+        this.markExtensionPermissions(requestedPermissionMethods);
       }
 
       if (allowAccountSelection && typeof extension.selectAccounts === "function") {
         try {
-          const selection = await withNip07Timeout(() =>
-            extension.selectAccounts(expectPubkey ? [expectPubkey] : undefined)
+          const selection = await runNip07WithRetry(
+            () => extension.selectAccounts(expectPubkey ? [expectPubkey] : undefined),
+            { label: "extension.selectAccounts" }
           );
 
           const didCancelSelection =
@@ -3881,7 +5995,9 @@ class NostrClient {
           throw new Error(message);
         }
       }
-      const pubkey = await withNip07Timeout(() => extension.getPublicKey());
+      const pubkey = await runNip07WithRetry(() => extension.getPublicKey(), {
+        label: "extension.getPublicKey",
+      });
       if (!pubkey || typeof pubkey !== "string") {
         throw new Error(
           "The NIP-07 extension did not return a public key. Please try again."
@@ -3896,7 +6012,12 @@ class NostrClient {
           "The selected account doesn't match the expected profile. Please try again."
         );
       }
-      const npub = window.NostrTools.nip19.npubEncode(pubkey);
+      const nip19Tools = await ensureNostrTools();
+      const npubEncode = nip19Tools?.nip19?.npubEncode;
+      if (typeof npubEncode !== "function") {
+        throw new Error("NostrTools nip19 encoder is unavailable.");
+      }
+      const npub = npubEncode(pubkey);
 
       if (isDevMode) {
         console.log("Got pubkey:", pubkey);
@@ -4048,18 +6169,181 @@ class NostrClient {
   /**
    * Publish a new video using the v3 content schema.
    */
-  async publishVideo(videoData, pubkey) {
-    if (!pubkey) throw new Error("Not logged in to publish video.");
+  async signAndPublishEvent(
+    event,
+    {
+      context = "event",
+      logName = context,
+      devLogLabel = logName,
+      rejectionLogLevel = "error",
+      relaysOverride = null,
+    } = {}
+  ) {
+    const extension = window?.nostr;
+    const extensionSigner =
+      extension && typeof extension.signEvent === "function"
+        ? extension.signEvent.bind(extension)
+        : null;
+
+    const normalizedEventPubkey =
+      event && typeof event.pubkey === "string"
+        ? event.pubkey.toLowerCase()
+        : "";
+    const normalizedLogged =
+      typeof this.pubkey === "string" ? this.pubkey.toLowerCase() : "";
+    const usingSessionActor =
+      normalizedEventPubkey &&
+      normalizedLogged &&
+      normalizedEventPubkey !== normalizedLogged;
+
+    let eventToSign = event;
+    let signedEvent = null;
+    let signerPubkey = null;
+
+    if (
+      extensionSigner &&
+      normalizedEventPubkey &&
+      normalizedEventPubkey === normalizedLogged
+    ) {
+      signedEvent = await extensionSigner(event);
+    } else {
+      try {
+        const currentSessionPubkey =
+          typeof this.sessionActor?.pubkey === "string"
+            ? this.sessionActor.pubkey.toLowerCase()
+            : "";
+
+        if (
+          usingSessionActor &&
+          normalizedEventPubkey &&
+          normalizedEventPubkey !== currentSessionPubkey
+        ) {
+          await this.ensureSessionActor(true);
+        } else {
+          await this.ensureSessionActor();
+        }
+
+        const sessionActor = this.sessionActor;
+        if (
+          !sessionActor ||
+          typeof sessionActor.pubkey !== "string" ||
+          !sessionActor.pubkey ||
+          typeof sessionActor.privateKey !== "string" ||
+          !sessionActor.privateKey
+        ) {
+          throw new Error("session-actor-unavailable");
+        }
+
+        const normalizedSessionPubkey = sessionActor.pubkey.toLowerCase();
+        if (
+          !normalizedEventPubkey ||
+          normalizedEventPubkey !== normalizedSessionPubkey ||
+          event.pubkey !== sessionActor.pubkey
+        ) {
+          eventToSign = { ...event, pubkey: sessionActor.pubkey };
+        }
+
+        signedEvent = signEventWithPrivateKey(
+          eventToSign,
+          sessionActor.privateKey
+        );
+        signerPubkey = sessionActor.pubkey;
+      } catch (error) {
+        console.warn("[nostr] Failed to sign event with session key:", error);
+        throw error;
+      }
+    }
+
+    if (!signerPubkey && signedEvent && typeof signedEvent.pubkey === "string") {
+      signerPubkey = signedEvent.pubkey;
+    }
 
+    if (isDevMode) {
+      console.log(`Signed ${devLogLabel} event:`, signedEvent);
+    }
+
+    let targetRelays = sanitizeRelayList(
+      Array.isArray(relaysOverride) && relaysOverride.length
+        ? relaysOverride
+        : Array.isArray(this.writeRelays) && this.writeRelays.length
+        ? this.writeRelays
+        : this.relays
+    );
+
+    if (!targetRelays.length) {
+      targetRelays = Array.from(RELAY_URLS);
+    }
+
+    const publishResults = await publishEventToRelays(
+      this.pool,
+      targetRelays,
+      signedEvent
+    );
+
+    let publishSummary;
+    try {
+      publishSummary = assertAnyRelayAccepted(publishResults, { context });
+    } catch (publishError) {
+      if (publishError?.relayFailures?.length) {
+        const logLevel = rejectionLogLevel === "warn" ? "warn" : "error";
+        publishError.relayFailures.forEach(
+          ({ url, error: relayError, reason }) => {
+            console[logLevel](
+              `[nostr] ${logName} rejected by ${url}: ${reason}`,
+              relayError || reason
+            );
+          }
+        );
+      }
+      throw publishError;
+    }
+
+    if (isDevMode) {
+      publishSummary.accepted.forEach(({ url }) => {
+        console.log(`${logName} published to ${url}`);
+      });
+    }
+
+    if (publishSummary.failed.length) {
+      publishSummary.failed.forEach(({ url, error: relayError }) => {
+        const reason =
+          relayError instanceof Error
+            ? relayError.message
+            : relayError
+            ? String(relayError)
+            : "publish failed";
+        console.warn(
+          `[nostr] ${logName} not accepted by ${url}: ${reason}`,
+          relayError
+        );
+      });
+    }
+
+    return {
+      signedEvent,
+      summary: publishSummary,
+      signerPubkey,
+      relays: targetRelays,
+    };
+  }
+
+  async publishVideo(videoPayload, pubkey) {
+    if (!pubkey) throw new Error("Not logged in to publish video.");
+
+    const { videoData, nip71Metadata } = extractVideoPublishPayload(videoPayload);
+
+    // NOTE: Keep the Upload, Edit, and Revert flows synchronized when
+    // updating shared fields. Changes here must be reflected in the modal
+    // controllers and revert helpers so all paths stay in lockstep.
     if (isDevMode) {
       console.log("Publishing new video with data:", videoData);
+      if (nip71Metadata) {
+        console.log("Including NIP-71 metadata:", nip71Metadata);
+      }
     }
 
     const rawMagnet = typeof videoData.magnet === "string" ? videoData.magnet : "";
-    let finalMagnet = rawMagnet.trim();
-    if (videoData.isPrivate && finalMagnet) {
-      finalMagnet = fakeEncrypt(finalMagnet);
-    }
+    const finalMagnet = rawMagnet.trim();
     const finalUrl =
       typeof videoData.url === "string" ? videoData.url.trim() : "";
     const finalThumbnail =
@@ -4110,11 +6394,16 @@ class NostrClient {
       contentObject.xs = finalXs;
     }
 
+    const nip71Tags = buildNip71MetadataTags(
+      nip71Metadata && typeof nip71Metadata === "object" ? nip71Metadata : null
+    );
+
     const event = buildVideoPostEvent({
       pubkey,
       created_at: createdAt,
       dTagValue,
       content: contentObject,
+      additionalTags: nip71Tags,
     });
 
     if (isDevMode) {
@@ -4123,56 +6412,11 @@ class NostrClient {
     }
 
     try {
-      const signedEvent = await window.nostr.signEvent(event);
-      if (isDevMode) console.log("Signed event:", signedEvent);
-
-      const publishResults = await publishEventToRelays(
-        this.pool,
-        this.relays,
-        signedEvent
-      );
-
-      let publishSummary;
-      try {
-        publishSummary = assertAnyRelayAccepted(publishResults, {
-          context: "video note",
-        });
-      } catch (publishError) {
-        if (publishError?.relayFailures?.length) {
-          publishError.relayFailures.forEach(
-            ({ url, error: relayError, reason }) => {
-              console.error(
-                `[nostr] Video note rejected by ${url}: ${reason}`,
-                relayError || reason
-              );
-            }
-          );
-        }
-        throw publishError;
-      }
-
-      const { accepted: acceptedRelays, failed: failedRelays } = publishSummary;
-
-      if (isDevMode) {
-        acceptedRelays.forEach(({ url }) =>
-          console.log(`Video published to ${url}`)
-        );
-      }
-
-      if (failedRelays.length) {
-        failedRelays.forEach(({ url, error: relayError }) => {
-          const reason =
-            relayError instanceof Error
-              ? relayError.message
-              : relayError
-              ? String(relayError)
-              : "publish failed";
-          console.warn(
-            `[nostr] Video note not accepted by ${url}: ${reason}`,
-            relayError
-          );
-        });
-      }
+      const { signedEvent } = await this.signAndPublishEvent(event, {
+        context: "video note",
+        logName: "Video note",
+        devLogLabel: "video note",
+      });
 
       if (finalUrl) {
         const inferredMimeType = inferMimeTypeFromUrl(finalUrl);
@@ -4209,59 +6453,12 @@ class NostrClient {
         }
 
         try {
-          const signedMirrorEvent = await window.nostr.signEvent(mirrorEvent);
-          if (isDevMode) {
-            console.log("Signed NIP-94 mirror event:", signedMirrorEvent);
-          }
-
-          const mirrorResults = await publishEventToRelays(
-            this.pool,
-            this.relays,
-            signedMirrorEvent
-          );
-
-          try {
-            const mirrorSummary = assertAnyRelayAccepted(mirrorResults, {
-              context: "NIP-94 mirror",
-            });
-
-            if (isDevMode) {
-              mirrorSummary.accepted.forEach(({ url }) =>
-                console.log(`NIP-94 mirror published to ${url}`)
-              );
-            }
-
-            if (mirrorSummary.failed.length) {
-              mirrorSummary.failed.forEach(({ url, error: relayError }) => {
-                const reason =
-                  relayError instanceof Error
-                    ? relayError.message
-                    : relayError
-                    ? String(relayError)
-                    : "publish failed";
-                console.warn(
-                  `[nostr] NIP-94 mirror not accepted by ${url}: ${reason}`,
-                  relayError
-                );
-              });
-            }
-          } catch (mirrorError) {
-            if (mirrorError?.relayFailures?.length) {
-              mirrorError.relayFailures.forEach(
-                ({ url, error: relayError, reason }) => {
-                  console.warn(
-                    `[nostr] NIP-94 mirror rejected by ${url}: ${reason}`,
-                    relayError || reason
-                  );
-                }
-              );
-            } else if (isDevMode) {
-              console.warn(
-                "[nostr] NIP-94 mirror rejected by all relays:",
-                mirrorError
-              );
-            }
-          }
+          await this.signAndPublishEvent(mirrorEvent, {
+            context: "NIP-94 mirror",
+            logName: "NIP-94 mirror",
+            devLogLabel: "NIP-94 mirror",
+            rejectionLogLevel: "warn",
+          });
 
           if (isDevMode) {
             console.log(
@@ -4271,8 +6468,8 @@ class NostrClient {
           }
         } catch (mirrorError) {
           if (isDevMode) {
-            console.error(
-              "Failed to sign/publish NIP-94 mirror event:",
+            console.warn(
+              "[nostr] NIP-94 mirror rejected by all relays:",
               mirrorError
             );
           }
@@ -4280,6 +6477,53 @@ class NostrClient {
       } else if (isDevMode) {
         console.log("Skipping NIP-94 mirror: no hosted URL provided.");
       }
+      const hasMetadataObject =
+        nip71Metadata && typeof nip71Metadata === "object";
+      const metadataWasEdited =
+        nip71EditedFlag === true ||
+        (nip71EditedFlag == null && hasMetadataObject);
+      const shouldAttemptNip71 = !wantPrivate && metadataWasEdited;
+
+      if (shouldAttemptNip71) {
+        const metadataLegacyFormData = {
+          title: contentObject.title,
+          description: contentObject.description,
+          url: contentObject.url,
+          magnet: contentObject.magnet,
+          thumbnail: contentObject.thumbnail,
+          mode: contentObject.mode,
+          isPrivate: contentObject.isPrivate,
+        };
+
+        if (contentObject.ws) {
+          metadataLegacyFormData.ws = contentObject.ws;
+        }
+
+        if (contentObject.xs) {
+          metadataLegacyFormData.xs = contentObject.xs;
+        }
+
+        try {
+          await this.publishNip71Video(
+            {
+              nip71: nip71Metadata,
+              legacyFormData: metadataLegacyFormData,
+            },
+            userPubkeyLower,
+            {
+              videoRootId: oldRootId,
+              dTag: newD,
+              eventId: signedEvent.id,
+            }
+          );
+        } catch (nip71Error) {
+          console.warn(
+            "[nostr] Failed to publish NIP-71 metadata for edit:",
+            nip71Error
+          );
+        }
+      }
+
       return signedEvent;
     } catch (err) {
       if (isDevMode) console.error("Failed to sign/publish:", err);
@@ -4287,6 +6531,86 @@ class NostrClient {
     }
   }
 
+  async publishNip71Video(videoPayload, pubkey, pointerOptions = {}) {
+    if (!FEATURE_PUBLISH_NIP71) {
+      return null;
+    }
+
+    if (!pubkey) {
+      throw new Error("Not logged in to publish video.");
+    }
+
+    const { videoData, nip71Metadata } = extractVideoPublishPayload(videoPayload);
+
+    if (!nip71Metadata || typeof nip71Metadata !== "object") {
+      if (isDevMode) {
+        console.log("[nostr] Skipping NIP-71 publish: metadata missing.");
+      }
+      return null;
+    }
+
+    const title = stringFromInput(videoData?.title);
+    const description = stringFromInput(videoData?.description);
+
+    const pointerIdentifiers =
+      pointerOptions && typeof pointerOptions === "object"
+        ? pointerOptions
+        : {};
+
+    const event = buildNip71VideoEvent({
+      metadata: nip71Metadata,
+      pubkey,
+      title,
+      summaryFallback: description,
+      pointerIdentifiers: {
+        videoRootId: pointerIdentifiers.videoRootId,
+        dTag: pointerIdentifiers.dTag,
+        eventId: pointerIdentifiers.eventId,
+      },
+      createdAt: Math.floor(Date.now() / 1000),
+    });
+
+    if (!event) {
+      if (isDevMode) {
+        console.warn("[nostr] Skipping NIP-71 publish: builder produced no event.");
+      }
+      return null;
+    }
+
+    if (isDevMode) {
+      console.log("Prepared NIP-71 video event:", event);
+    }
+
+    const { signedEvent } = await this.signAndPublishEvent(event, {
+      context: "NIP-71 video",
+      logName: "NIP-71 video",
+      devLogLabel: "NIP-71 video",
+      rejectionLogLevel: "warn",
+    });
+
+    const pointerMap = new Map();
+    if (pointerIdentifiers.videoRootId) {
+      const pointerValue = buildVideoPointerValue(
+        pubkey,
+        pointerIdentifiers.videoRootId
+      );
+      if (pointerValue) {
+        pointerMap.set(pointerValue, {
+          videoRootId: pointerIdentifiers.videoRootId,
+          pointerValue,
+          videoEventIds: new Set(
+            pointerIdentifiers.eventId ? [pointerIdentifiers.eventId] : []
+          ),
+          dTags: new Set(pointerIdentifiers.dTag ? [pointerIdentifiers.dTag] : []),
+        });
+      }
+    }
+
+    this.processNip71Events([signedEvent], pointerMap);
+
+    return signedEvent;
+  }
+
   /**
    * Edits a video by creating a *new event* with a brand-new d tag,
    * but reuses the same videoRootId as the original.
@@ -4299,9 +6623,18 @@ class NostrClient {
       throw new Error("Not logged in to edit.");
     }
 
+    // NOTE: Keep the Upload, Edit, and Revert flows synchronized when
+    // adjusting validation or persisted fields.
     // Convert the provided pubkey to lowercase
     const userPubkeyLower = userPubkey.toLowerCase();
 
+    const nip71Metadata =
+      updatedData && typeof updatedData === "object" ? updatedData.nip71 : null;
+    const nip71EditedFlag =
+      updatedData && typeof updatedData === "object"
+        ? updatedData.nip71Edited
+        : null;
+
     // Use getEventById to fetch the full original event details
     const baseEvent = await this.getEventById(originalEventStub.id);
     if (!baseEvent) {
@@ -4323,12 +6656,12 @@ class NostrClient {
       throw new Error("You do not own this video (pubkey mismatch).");
     }
 
-    // Decrypt the old magnet if the note is private
-    let oldPlainMagnet = baseEvent.magnet || "";
-    if (baseEvent.isPrivate && oldPlainMagnet) {
-      oldPlainMagnet = fakeDecrypt(oldPlainMagnet);
-    }
-
+    const oldMagnet =
+      typeof baseEvent.rawMagnet === "string" && baseEvent.rawMagnet.trim()
+        ? baseEvent.rawMagnet.trim()
+        : typeof baseEvent.magnet === "string"
+        ? baseEvent.magnet.trim()
+        : "";
     const oldUrl = baseEvent.url || "";
 
     // Determine if the updated note should be private
@@ -4338,11 +6671,7 @@ class NostrClient {
     const magnetEdited = updatedData.magnetEdited === true;
     const newMagnetValue =
       typeof updatedData.magnet === "string" ? updatedData.magnet.trim() : "";
-    let finalPlainMagnet = magnetEdited ? newMagnetValue : oldPlainMagnet;
-    let finalMagnet =
-      wantPrivate && finalPlainMagnet
-        ? fakeEncrypt(finalPlainMagnet)
-        : finalPlainMagnet;
+    const finalMagnet = magnetEdited ? newMagnetValue : oldMagnet;
 
     const urlEdited = updatedData.urlEdited === true;
     const newUrlValue =
@@ -4397,17 +6726,28 @@ class NostrClient {
       contentObject.xs = finalXs;
     }
 
-    const event = {
-      kind: 30078,
-      // Use the provided userPubkey (or you can also force it to lowercase here if desired)
+    let metadataForTags =
+      nip71Metadata && typeof nip71Metadata === "object" ? nip71Metadata : null;
+    if (!metadataForTags) {
+      if (baseEvent?.nip71 && typeof baseEvent.nip71 === "object") {
+        metadataForTags = baseEvent.nip71;
+      } else {
+        const extracted = extractNip71MetadataFromTags(baseEvent);
+        if (extracted?.metadata) {
+          metadataForTags = extracted.metadata;
+        }
+      }
+    }
+
+    const nip71Tags = buildNip71MetadataTags(metadataForTags);
+
+    const event = buildVideoPostEvent({
       pubkey: userPubkeyLower,
       created_at: Math.floor(Date.now() / 1000),
-      tags: [
-        ["t", "video"],
-        ["d", newD], // new share link tag
-      ],
-      content: JSON.stringify(contentObject),
-    };
+      dTagValue: newD,
+      content: contentObject,
+      additionalTags: nip71Tags,
+    });
 
     if (isDevMode) {
       console.log("Creating edited event with root ID:", oldRootId);
@@ -4611,17 +6951,21 @@ class NostrClient {
    *
    * This version now asks for confirmation before proceeding.
    */
-  async deleteAllVersions(videoRootId, pubkey) {
+  async deleteAllVersions(videoRootId, pubkey, options = {}) {
     if (!pubkey) {
       throw new Error("Not logged in to delete all versions.");
     }
 
-    // Ask for confirmation before proceeding
-    if (
-      !window.confirm(
+    const shouldConfirm = options?.confirm !== false;
+    let confirmed = true;
+
+    if (shouldConfirm && typeof window?.confirm === "function") {
+      confirmed = window.confirm(
         "Are you sure you want to delete all versions of this video? This action cannot be undone."
-      )
-    ) {
+      );
+    }
+
+    if (!confirmed) {
       console.log("Deletion cancelled by user.");
       return null; // Cancel deletion if user clicks "Cancel"
     }
@@ -4718,57 +7062,97 @@ class NostrClient {
 
     // We'll collect events here instead of processing them instantly
     let eventBuffer = [];
+    const EVENT_FLUSH_DEBOUNCE_MS = 75;
+    let flushTimerId = null;
 
-    // 1) On each incoming event, just push to the buffer
-    sub.on("event", (event) => {
-      eventBuffer.push(event);
-    });
+    const flushEventBuffer = () => {
+      if (!eventBuffer.length) {
+        return;
+      }
 
-    // 2) Process buffered events on a setInterval (e.g., every second)
-    const processInterval = setInterval(() => {
-      if (eventBuffer.length > 0) {
-        // Copy and clear the buffer
-        const toProcess = eventBuffer.slice();
-        eventBuffer = [];
+      const toProcess = eventBuffer;
+      eventBuffer = [];
 
-        // Now handle each event
-        for (const evt of toProcess) {
-          try {
-            const video = convertEventToVideo(evt);
+      for (const evt of toProcess) {
+        try {
+          if (evt && evt.id) {
+            this.rawEvents.set(evt.id, evt);
+          }
+          const video = convertEventToVideo(evt);
 
-            if (video.invalid) {
-              invalidDuringSub.push({ id: video.id, reason: video.reason });
-              continue;
-            }
+          if (video.invalid) {
+            invalidDuringSub.push({ id: video.id, reason: video.reason });
+            continue;
+          }
 
-            // Store in allEvents
-            this.allEvents.set(evt.id, video);
+          this.mergeNip71MetadataIntoVideo(video);
+          this.applyRootCreatedAt(video);
 
-            // If it's a "deleted" note, remove from activeMap
-            if (video.deleted) {
-              const activeKey = getActiveKey(video);
-              this.activeMap.delete(activeKey);
-              continue;
-            }
+          // Store in allEvents
+          this.allEvents.set(evt.id, video);
 
-            // Otherwise, if it's newer than what we have, update activeMap
+          // If it's a "deleted" note, remove from activeMap
+          if (video.deleted) {
             const activeKey = getActiveKey(video);
-            const prevActive = this.activeMap.get(activeKey);
-            if (!prevActive || video.created_at > prevActive.created_at) {
-              this.activeMap.set(activeKey, video);
-              onVideo(video); // Trigger the callback that re-renders
-            }
-          } catch (err) {
-            if (isDevMode) {
-              console.error("[subscribeVideos] Error processing event:", err);
-            }
+            this.activeMap.delete(activeKey);
+            continue;
+          }
+
+          // Otherwise, if it's newer than what we have, update activeMap
+          const activeKey = getActiveKey(video);
+          const prevActive = this.activeMap.get(activeKey);
+          if (!prevActive || video.created_at > prevActive.created_at) {
+            this.activeMap.set(activeKey, video);
+            onVideo(video); // Trigger the callback that re-renders
+            this.populateNip71MetadataForVideos([video])
+              .then(() => {
+                this.applyRootCreatedAt(video);
+              })
+              .catch((error) => {
+                if (isDevMode) {
+                  console.warn(
+                    "[nostr] Failed to hydrate NIP-71 metadata for live video:",
+                    error
+                  );
+                }
+              });
+          }
+        } catch (err) {
+          if (isDevMode) {
+            console.error("[subscribeVideos] Error processing event:", err);
           }
         }
-
-        // Optionally, save data to local storage after processing the batch
-        this.saveLocalData();
       }
-    }, 1000);
+
+      // Persist processed events after each flush so reloads warm quickly.
+      this.saveLocalData();
+    };
+
+    const scheduleFlush = (immediate = false) => {
+      if (flushTimerId) {
+        if (!immediate) {
+          return;
+        }
+        clearTimeout(flushTimerId);
+        flushTimerId = null;
+      }
+
+      if (immediate) {
+        flushEventBuffer();
+        return;
+      }
+
+      flushTimerId = setTimeout(() => {
+        flushTimerId = null;
+        flushEventBuffer();
+      }, EVENT_FLUSH_DEBOUNCE_MS);
+    };
+
+    // 1) On each incoming event, just push to the buffer and schedule a flush
+    sub.on("event", (event) => {
+      eventBuffer.push(event);
+      scheduleFlush(false);
+    });
 
     // You can still use sub.on("eose") if needed
     sub.on("eose", () => {
@@ -4783,6 +7167,7 @@ class NostrClient {
           "[subscribeVideos] Reached EOSE for all relays (historical load done)"
         );
       }
+      scheduleFlush(true);
     });
 
     // Return the subscription object if you need to unsub manually later
@@ -4794,7 +7179,12 @@ class NostrClient {
         return;
       }
       unsubscribed = true;
-      clearInterval(processInterval);
+      if (flushTimerId) {
+        clearTimeout(flushTimerId);
+        flushTimerId = null;
+      }
+      // Ensure any straggling events are flushed before tearing down.
+      flushEventBuffer();
       try {
         return originalUnsub();
       } catch (err) {
@@ -4806,6 +7196,383 @@ class NostrClient {
     return sub;
   }
 
+  collectNip71PointerRequests(videos = []) {
+    const pointerMap = new Map();
+    if (!Array.isArray(videos)) {
+      return pointerMap;
+    }
+
+    videos.forEach((video) => {
+      if (!video || typeof video !== "object") {
+        return;
+      }
+
+      const rootId = typeof video.videoRootId === "string" ? video.videoRootId : "";
+      const pubkey =
+        typeof video.pubkey === "string" ? video.pubkey.toLowerCase() : "";
+      if (!rootId || !pubkey) {
+        return;
+      }
+
+      const pointerValue = buildVideoPointerValue(pubkey, rootId);
+      if (!pointerValue) {
+        return;
+      }
+
+      let info = pointerMap.get(pointerValue);
+      if (!info) {
+        info = {
+          videoRootId: rootId,
+          pointerValue,
+          videoEventIds: new Set(),
+          dTags: new Set(),
+        };
+        pointerMap.set(pointerValue, info);
+      }
+
+      if (typeof video.id === "string" && video.id) {
+        info.videoEventIds.add(video.id);
+      }
+
+      const dTag = getDTagValueFromTags(video.tags);
+      if (dTag) {
+        info.dTags.add(dTag);
+      }
+    });
+
+    return pointerMap;
+  }
+
+  ensureNip71CacheEntry(videoRootId) {
+    const rootId = typeof videoRootId === "string" ? videoRootId : "";
+    if (!rootId) {
+      return null;
+    }
+
+    let entry = this.nip71Cache.get(rootId);
+    if (!entry) {
+      entry = {
+        byVideoEventId: new Map(),
+        byDTag: new Map(),
+        fallback: null,
+        fetchedPointers: new Set(),
+      };
+      this.nip71Cache.set(rootId, entry);
+    }
+    return entry;
+  }
+
+  storeNip71RecordForRoot(videoRootId, parsedRecord) {
+    const entry = this.ensureNip71CacheEntry(videoRootId);
+    if (!entry || !parsedRecord || !parsedRecord.metadata) {
+      return;
+    }
+
+    const storedRecord = {
+      metadata: cloneNip71Metadata(parsedRecord.metadata),
+      nip71EventId: parsedRecord.source?.id || "",
+      created_at: parsedRecord.source?.created_at || 0,
+      pointerValues: new Set(parsedRecord.pointers?.pointerValues || []),
+      videoEventIds: new Set(parsedRecord.pointers?.videoEventIds || []),
+      dTags: new Set(parsedRecord.pointers?.dTags || []),
+    };
+
+    if (!storedRecord.metadata) {
+      return;
+    }
+
+    storedRecord.pointerValues.forEach((pointerValue) => {
+      if (pointerValue) {
+        entry.fetchedPointers.add(pointerValue);
+      }
+    });
+
+    storedRecord.videoEventIds.forEach((eventId) => {
+      if (eventId) {
+        entry.byVideoEventId.set(eventId, storedRecord);
+      }
+    });
+
+    storedRecord.dTags.forEach((dTag) => {
+      if (dTag) {
+        entry.byDTag.set(dTag, storedRecord);
+      }
+    });
+
+    if (
+      !entry.fallback ||
+      (storedRecord.created_at || 0) >= (entry.fallback.created_at || 0)
+    ) {
+      entry.fallback = storedRecord;
+    }
+  }
+
+  processNip71Events(events, pointerMap = null) {
+    if (!Array.isArray(events) || !events.length) {
+      return;
+    }
+
+    events.forEach((event) => {
+      const parsed = extractNip71MetadataFromTags(event);
+      if (!parsed || !parsed.metadata) {
+        return;
+      }
+
+      const rootIds = new Set(parsed.pointers?.videoRootIds || []);
+      if (!rootIds.size && pointerMap instanceof Map) {
+        parsed.pointers?.pointerValues?.forEach?.((pointerValue) => {
+          const info = pointerMap.get(pointerValue);
+          if (info?.videoRootId) {
+            rootIds.add(info.videoRootId);
+          }
+        });
+      }
+
+      if (!rootIds.size) {
+        return;
+      }
+
+      rootIds.forEach((rootId) => {
+        this.storeNip71RecordForRoot(rootId, parsed);
+      });
+    });
+  }
+
+  mergeNip71MetadataIntoVideo(video) {
+    if (!video || typeof video !== "object") {
+      return video;
+    }
+
+    const rootId = typeof video.videoRootId === "string" ? video.videoRootId : "";
+    if (!rootId) {
+      return video;
+    }
+
+    const cacheEntry = this.nip71Cache.get(rootId);
+
+    let appliedMetadata = null;
+    let sourceEventId = "";
+    let sourceCreatedAt = 0;
+
+    if (cacheEntry) {
+      let record = null;
+      const eventId = typeof video.id === "string" ? video.id : "";
+      if (eventId && cacheEntry.byVideoEventId.has(eventId)) {
+        record = cacheEntry.byVideoEventId.get(eventId);
+      }
+
+      if (!record) {
+        const dTag = getDTagValueFromTags(video.tags);
+        if (dTag && cacheEntry.byDTag.has(dTag)) {
+          record = cacheEntry.byDTag.get(dTag);
+        }
+      }
+
+      if (!record && cacheEntry.fallback) {
+        record = cacheEntry.fallback;
+      }
+
+      if (record?.metadata) {
+        const cloned = cloneNip71Metadata(record.metadata);
+        if (cloned) {
+          appliedMetadata = cloned;
+          sourceEventId = record.nip71EventId || "";
+          sourceCreatedAt = Number.isFinite(record.created_at)
+            ? Math.floor(record.created_at)
+            : 0;
+        }
+      }
+    }
+
+    if (!appliedMetadata) {
+      const extracted = extractNip71MetadataFromTags(video);
+      if (extracted?.metadata) {
+        const cloned = cloneNip71Metadata(extracted.metadata);
+        if (cloned) {
+          if (Array.isArray(video.tags)) {
+            const hasVideoTopicTag = video.tags.some(
+              (tag) => Array.isArray(tag) && tag[0] === "t" && tag[1] === "video"
+            );
+            if (hasVideoTopicTag) {
+              if (Array.isArray(cloned.hashtags)) {
+                const filteredHashtags = cloned.hashtags.filter((value) => {
+                  if (typeof value !== "string") {
+                    return false;
+                  }
+                  const trimmed = value.trim();
+                  return trimmed && trimmed.toLowerCase() !== "video";
+                });
+                if (filteredHashtags.length) {
+                  cloned.hashtags = filteredHashtags;
+                } else {
+                  delete cloned.hashtags;
+                }
+              }
+
+              if (Array.isArray(cloned.t)) {
+                const filteredTopics = cloned.t.filter((value) => {
+                  if (typeof value !== "string") {
+                    return false;
+                  }
+                  const trimmed = value.trim();
+                  return trimmed && trimmed.toLowerCase() !== "video";
+                });
+                if (filteredTopics.length) {
+                  cloned.t = filteredTopics;
+                } else {
+                  delete cloned.t;
+                }
+              }
+            }
+          }
+
+          appliedMetadata = cloned;
+          const extractedSource = extracted.source || {};
+          const fallbackId = typeof video.id === "string" ? video.id : "";
+          sourceEventId = extractedSource.id || fallbackId;
+          const candidateCreatedAt = Number.isFinite(extractedSource.created_at)
+            ? Math.floor(extractedSource.created_at)
+            : Number.isFinite(video.created_at)
+              ? Math.floor(video.created_at)
+              : 0;
+          sourceCreatedAt = candidateCreatedAt;
+        }
+      }
+    }
+
+    if (appliedMetadata) {
+      video.nip71 = appliedMetadata;
+      video.nip71Source = {
+        eventId: sourceEventId,
+        created_at: sourceCreatedAt,
+      };
+    } else {
+      if (video.nip71) {
+        delete video.nip71;
+      }
+      if (video.nip71Source) {
+        delete video.nip71Source;
+      }
+    }
+
+    return video;
+  }
+
+  async fetchAndCacheNip71Metadata(pointerMap, pointerValues) {
+    if (!Array.isArray(pointerValues) || !pointerValues.length) {
+      return;
+    }
+
+    if (!this.pool || !Array.isArray(this.relays) || !this.relays.length) {
+      pointerValues.forEach((pointerValue) => {
+        const info = pointerMap.get(pointerValue);
+        if (!info) {
+          return;
+        }
+        const entry = this.ensureNip71CacheEntry(info.videoRootId);
+        if (entry) {
+          entry.fetchedPointers.add(pointerValue);
+        }
+      });
+      return;
+    }
+
+    const filter = {
+      kinds: [21, 22],
+      "#a": pointerValues,
+    };
+
+    try {
+      const responses = await Promise.all(
+        this.relays.map(async (url) => {
+          try {
+            const events = await this.pool.list([url], [filter]);
+            return Array.isArray(events) ? events : [];
+          } catch (error) {
+            if (isDevMode) {
+              console.warn(`[nostr] NIP-71 fetch failed on ${url}:`, error);
+            }
+            return [];
+          }
+        })
+      );
+
+      const deduped = new Map();
+      responses.flat().forEach((event) => {
+        if (event?.id && !deduped.has(event.id)) {
+          deduped.set(event.id, event);
+        }
+      });
+
+      this.processNip71Events(Array.from(deduped.values()), pointerMap);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[nostr] Failed to fetch NIP-71 metadata:", error);
+      }
+    } finally {
+      pointerValues.forEach((pointerValue) => {
+        const info = pointerMap.get(pointerValue);
+        if (!info) {
+          return;
+        }
+        const entry = this.ensureNip71CacheEntry(info.videoRootId);
+        if (entry) {
+          entry.fetchedPointers.add(pointerValue);
+        }
+      });
+    }
+  }
+
+  async populateNip71MetadataForVideos(videos = []) {
+    if (!Array.isArray(videos) || !videos.length) {
+      return;
+    }
+
+    const pointerMap = this.collectNip71PointerRequests(videos);
+    const pointersToFetch = [];
+
+    pointerMap.forEach((info, pointerValue) => {
+      const entry = this.ensureNip71CacheEntry(info.videoRootId);
+      if (!entry) {
+        return;
+      }
+
+      let needsFetch = false;
+
+      info.videoEventIds.forEach((eventId) => {
+        if (eventId && !entry.byVideoEventId.has(eventId)) {
+          needsFetch = true;
+        }
+      });
+
+      if (!needsFetch) {
+        info.dTags.forEach((dTag) => {
+          if (dTag && !entry.byDTag.has(dTag)) {
+            needsFetch = true;
+          }
+        });
+      }
+
+      if (!needsFetch && !entry.fallback) {
+        needsFetch = true;
+      }
+
+      if (needsFetch && !entry.fetchedPointers.has(pointerValue)) {
+        pointersToFetch.push(pointerValue);
+      } else {
+        entry.fetchedPointers.add(pointerValue);
+      }
+    });
+
+    if (pointersToFetch.length) {
+      await this.fetchAndCacheNip71Metadata(pointerMap, pointersToFetch);
+    }
+
+    videos.forEach((video) => {
+      this.mergeNip71MetadataIntoVideo(video);
+    });
+  }
+
   /**
    * fetchVideos => old approach
    */
@@ -4826,12 +7593,16 @@ class NostrClient {
         this.relays.map(async (url) => {
           const events = await this.pool.list([url], [filter]);
           for (const evt of events) {
+            if (evt && evt.id) {
+              this.rawEvents.set(evt.id, evt);
+            }
             const vid = convertEventToVideo(evt);
             if (vid.invalid) {
               // Accumulate if invalid
               invalidNotes.push({ id: vid.id, reason: vid.reason });
             } else {
               // Only add if good
+              this.applyRootCreatedAt(vid);
               localAll.set(evt.id, vid);
             }
           }
@@ -4841,6 +7612,7 @@ class NostrClient {
       // Merge into allEvents
       for (const [id, vid] of localAll.entries()) {
         this.allEvents.set(id, vid);
+        this.applyRootCreatedAt(vid);
       }
 
       // Rebuild activeMap
@@ -4852,6 +7624,7 @@ class NostrClient {
 
         if (!existing || video.created_at > existing.created_at) {
           this.activeMap.set(activeKey, video);
+          this.applyRootCreatedAt(video);
         }
       }
 
@@ -4866,6 +7639,8 @@ class NostrClient {
       const activeVideos = Array.from(this.activeMap.values()).sort(
         (a, b) => b.created_at - a.created_at
       );
+      await this.populateNip71MetadataForVideos(activeVideos);
+      activeVideos.forEach((video) => this.applyRootCreatedAt(video));
       return activeVideos;
     } catch (err) {
       console.error("fetchVideos error:", err);
@@ -4874,30 +7649,729 @@ class NostrClient {
   }
 
   /**
-   * getEventById => old approach
+   * Raw event helpers
    */
-  async getEventById(eventId) {
-    const local = this.allEvents.get(eventId);
-    if (local) {
-      return local;
+  /**
+   * Fetch the unmodified Nostr event for a given id and cache the payload.
+   *
+   * @param {string} eventId
+   * @param {{ relays?: string[], filter?: import("nostr-tools").Filter }} options
+   * @returns {Promise<object|null>}
+   */
+  async fetchRawEventById(eventId, options = {}) {
+    const id = typeof eventId === "string" ? eventId.trim() : "";
+    if (!id) {
+      return null;
     }
+
+    const cached = this.rawEvents.get(id);
+    if (cached) {
+      return cached;
+    }
+
     try {
-      for (const url of this.relays) {
-        const maybeEvt = await this.pool.get([url], { ids: [eventId] });
-        if (maybeEvt && maybeEvt.id === eventId) {
-          const video = convertEventToVideo(maybeEvt);
-          this.allEvents.set(eventId, video);
-          return video;
+      await this.ensurePool();
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("fetchRawEventById ensurePool error:", error);
+      }
+      return null;
+    }
+
+    if (!this.pool) {
+      return null;
+    }
+
+    const relayCandidatesRaw =
+      Array.isArray(options?.relays) && options.relays.length
+        ? options.relays
+        : this.relays;
+    const relays = Array.isArray(relayCandidatesRaw)
+      ? Array.from(
+          new Set(
+            relayCandidatesRaw
+              .map((url) => (typeof url === "string" ? url.trim() : ""))
+              .filter(Boolean)
+          )
+        )
+      : [];
+
+    if (!relays.length) {
+      return null;
+    }
+
+    const baseFilter =
+      options && typeof options.filter === "object"
+        ? { ...options.filter }
+        : { ids: [id] };
+
+    const normalizedIds = Array.isArray(baseFilter.ids)
+      ? baseFilter.ids
+          .map((value) => (typeof value === "string" ? value.trim() : ""))
+          .filter(Boolean)
+      : [];
+
+    if (!normalizedIds.includes(id)) {
+      normalizedIds.push(id);
+    }
+
+    const filterTemplate = { ...baseFilter, ids: normalizedIds };
+
+    const makeFilter = () => ({
+      ...filterTemplate,
+      ids: Array.from(filterTemplate.ids),
+    });
+
+    const remember = (evt) => {
+      if (evt && typeof evt === "object" && evt.id) {
+        this.rawEvents.set(evt.id, evt);
+      }
+      return evt || null;
+    };
+
+    if (typeof this.pool.get === "function") {
+      try {
+        const evt = await this.pool.get(relays, makeFilter());
+        if (evt && evt.id === id) {
+          return remember(evt);
+        }
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("fetchRawEventById pool.get error:", error);
         }
       }
-    } catch (err) {
-      if (isDevMode) {
-        console.error("getEventById direct fetch error:", err);
+    }
+
+    if (typeof this.pool.list === "function") {
+      try {
+        const events = await this.pool.list(relays, [makeFilter()]);
+        if (Array.isArray(events)) {
+          for (const evt of events) {
+            if (!evt) {
+              continue;
+            }
+            const stored = remember(evt);
+            if (evt.id === id) {
+              return stored;
+            }
+          }
+        }
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("fetchRawEventById pool.list error:", error);
+        }
       }
     }
+
     return null;
   }
 
+  /**
+   * Resolve a single video from cache or the relay network.
+   *
+   * @param {string} eventId - The event id to look up.
+   * @param {{ includeRaw?: boolean }} options
+   * @returns {Promise<object|null|{video: object|null, rawEvent: object|null}>}
+   */
+  async getEventById(eventId, options = {}) {
+    const includeRaw = options?.includeRaw === true;
+
+    const local = this.allEvents.get(eventId) || null;
+    const localRaw = this.rawEvents.get(eventId) || null;
+
+    if (local) {
+      this.applyRootCreatedAt(local);
+      if (!includeRaw) {
+        return local;
+      }
+
+      if (localRaw) {
+        return { video: local, rawEvent: localRaw };
+      }
+    }
+
+    const rawEvent = await this.fetchRawEventById(eventId);
+    if (!rawEvent && !includeRaw) {
+      return local || null;
+    }
+
+    if (!rawEvent) {
+      return { video: local || null, rawEvent: null };
+    }
+
+    const video = convertEventToVideo(rawEvent);
+    this.applyRootCreatedAt(video);
+    this.allEvents.set(eventId, video);
+
+    if (includeRaw) {
+      return { video, rawEvent };
+    }
+
+    return video;
+  }
+
+  async repostEvent(eventId, options = {}) {
+    const normalizedId =
+      typeof eventId === "string" && eventId.trim() ? eventId.trim() : "";
+    if (!normalizedId) {
+      return { ok: false, error: "invalid-event-id" };
+    }
+
+    let pointer = null;
+    if (options.pointer) {
+      pointer = normalizePointerInput(options.pointer);
+    }
+    if (!pointer) {
+      const type =
+        typeof options.pointerType === "string" ? options.pointerType.trim() : "";
+      const value =
+        typeof options.pointerValue === "string" ? options.pointerValue.trim() : "";
+      if (type && value) {
+        const candidate = [type, value];
+        const relay =
+          typeof options.pointerRelay === "string"
+            ? options.pointerRelay.trim()
+            : "";
+        if (relay) {
+          candidate.push(relay);
+        }
+        pointer = normalizePointerInput(candidate);
+      }
+    }
+
+    const cachedVideo = this.allEvents.get(normalizedId) || null;
+    const cachedRaw = this.rawEvents.get(normalizedId) || null;
+
+    let authorPubkey =
+      typeof options.authorPubkey === "string" && options.authorPubkey.trim()
+        ? options.authorPubkey.trim().toLowerCase()
+        : "";
+
+    if (!authorPubkey && cachedVideo?.pubkey) {
+      authorPubkey = cachedVideo.pubkey.trim().toLowerCase();
+    }
+    if (!authorPubkey && cachedRaw?.pubkey) {
+      authorPubkey = cachedRaw.pubkey.trim().toLowerCase();
+    }
+
+    let address = typeof options.address === "string" ? options.address.trim() : "";
+    if (!address && pointer?.type === "a") {
+      address = pointer.value;
+    }
+
+    let addressRelay =
+      typeof options.addressRelay === "string" ? options.addressRelay.trim() : "";
+    if (!addressRelay && pointer?.type === "a" && pointer.relay) {
+      addressRelay = pointer.relay;
+    }
+
+    let eventRelay =
+      typeof options.eventRelay === "string" ? options.eventRelay.trim() : "";
+    if (!eventRelay && pointer?.type === "e" && pointer.relay) {
+      eventRelay = pointer.relay;
+    }
+
+    let targetKind = Number.isFinite(options.kind)
+      ? Math.floor(options.kind)
+      : null;
+
+    const parseAddressMetadata = (candidate) => {
+      if (typeof candidate !== "string" || !candidate) {
+        return;
+      }
+      const parts = candidate.split(":");
+      if (parts.length >= 3) {
+        const maybeKind = Number.parseInt(parts[0], 10);
+        if (Number.isFinite(maybeKind) && !Number.isFinite(targetKind)) {
+          targetKind = maybeKind;
+        }
+        const maybePubkey = parts[1];
+        if (
+          maybePubkey &&
+          !authorPubkey &&
+          /^[0-9a-f]{64}$/i.test(maybePubkey)
+        ) {
+          authorPubkey = maybePubkey.toLowerCase();
+        }
+      }
+    };
+
+    if (address) {
+      parseAddressMetadata(address);
+    }
+
+    if (!Number.isFinite(targetKind)) {
+      if (Number.isFinite(cachedRaw?.kind)) {
+        targetKind = Math.floor(cachedRaw.kind);
+      } else if (Number.isFinite(cachedVideo?.kind)) {
+        targetKind = Math.floor(cachedVideo.kind);
+      } else {
+        targetKind = 30078;
+      }
+    }
+
+    const deriveIdentifierFromVideo = () => {
+      if (!cachedVideo || typeof cachedVideo !== "object") {
+        return "";
+      }
+
+      if (typeof cachedVideo.videoRootId === "string" && cachedVideo.videoRootId.trim()) {
+        return cachedVideo.videoRootId.trim();
+      }
+
+      if (Array.isArray(cachedVideo.tags)) {
+        for (const tag of cachedVideo.tags) {
+          if (!Array.isArray(tag) || tag.length < 2) {
+            continue;
+          }
+          if (tag[0] === "d" && typeof tag[1] === "string" && tag[1].trim()) {
+            return tag[1].trim();
+          }
+        }
+      }
+
+      return "";
+    };
+
+    if (!address) {
+      const identifier = deriveIdentifierFromVideo();
+      const ownerPubkey =
+        authorPubkey ||
+        (cachedVideo?.pubkey ? cachedVideo.pubkey.trim().toLowerCase() : "") ||
+        (cachedRaw?.pubkey ? cachedRaw.pubkey.trim().toLowerCase() : "");
+
+      if (identifier && ownerPubkey) {
+        address = `${targetKind}:${ownerPubkey}:${identifier}`;
+        parseAddressMetadata(address);
+      } else if (cachedRaw) {
+        const fallbackAddress = eventToAddressPointer(cachedRaw);
+        if (fallbackAddress) {
+          address = fallbackAddress;
+          parseAddressMetadata(address);
+        }
+      }
+    }
+
+    const relaysOverride = sanitizeRelayList(
+      Array.isArray(options.relays) && options.relays.length
+        ? options.relays
+        : Array.isArray(this.writeRelays) && this.writeRelays.length
+        ? this.writeRelays
+        : this.relays
+    );
+    const relays = relaysOverride.length ? relaysOverride : Array.from(RELAY_URLS);
+
+    let actorPubkey =
+      typeof options.actorPubkey === "string" && options.actorPubkey.trim()
+        ? options.actorPubkey.trim()
+        : typeof this.pubkey === "string" && this.pubkey.trim()
+        ? this.pubkey.trim()
+        : "";
+
+    if (!actorPubkey) {
+      try {
+        const ensured = await this.ensureSessionActor();
+        actorPubkey = ensured || "";
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to ensure session actor before repost:", error);
+        }
+        return { ok: false, error: "missing-actor", details: error };
+      }
+    }
+
+    if (!actorPubkey) {
+      return { ok: false, error: "missing-actor" };
+    }
+
+    if (!this.pool) {
+      try {
+        await this.ensurePool();
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to ensure pool before repost:", error);
+        }
+        return { ok: false, error: "pool-unavailable", details: error };
+      }
+    }
+
+    const createdAt =
+      typeof options.created_at === "number" && Number.isFinite(options.created_at)
+        ? Math.max(0, Math.floor(options.created_at))
+        : Math.floor(Date.now() / 1000);
+
+    const additionalTags = Array.isArray(options.additionalTags)
+      ? options.additionalTags.filter((tag) => Array.isArray(tag) && tag.length >= 2)
+      : [];
+
+    const repostEvent = buildRepostEvent({
+      pubkey: actorPubkey,
+      created_at: createdAt,
+      eventId: normalizedId,
+      eventRelay,
+      address,
+      addressRelay,
+      authorPubkey,
+      additionalTags,
+    });
+
+    try {
+      const { signedEvent, summary, signerPubkey } = await this.signAndPublishEvent(
+        repostEvent,
+        {
+          context: "repost",
+          logName: "Repost",
+          devLogLabel: "repost",
+          relaysOverride: relays,
+        }
+      );
+
+      const normalizedSigner =
+        typeof signerPubkey === "string" ? signerPubkey.toLowerCase() : "";
+      const normalizedLogged =
+        typeof this.pubkey === "string" ? this.pubkey.toLowerCase() : "";
+      const sessionPubkey =
+        typeof this.sessionActor?.pubkey === "string"
+          ? this.sessionActor.pubkey.toLowerCase()
+          : "";
+
+      const usedSessionActor =
+        normalizedSigner &&
+        normalizedSigner !== normalizedLogged &&
+        normalizedSigner === sessionPubkey;
+
+      return {
+        ok: true,
+        event: signedEvent,
+        summary,
+        relays,
+        sessionActor: usedSessionActor,
+        signerPubkey,
+      };
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[nostr] Repost publish failed:", error);
+      }
+      const relayFailure =
+        error && typeof error === "object" && Array.isArray(error.relayFailures);
+      return {
+        ok: false,
+        error: relayFailure ? "publish-rejected" : "signing-failed",
+        details: error,
+      };
+    }
+  }
+
+  async mirrorVideoEvent(eventId, options = {}) {
+    const normalizedId =
+      typeof eventId === "string" && eventId.trim() ? eventId.trim() : "";
+    if (!normalizedId) {
+      return { ok: false, error: "invalid-event-id" };
+    }
+
+    const cachedVideo = this.allEvents.get(normalizedId) || null;
+
+    const sanitize = (value) => (typeof value === "string" ? value.trim() : "");
+
+    let url = sanitize(options.url);
+    if (!url && cachedVideo?.url) {
+      url = sanitize(cachedVideo.url);
+    }
+
+    if (!url) {
+      return { ok: false, error: "missing-url" };
+    }
+
+    const isPrivate =
+      options.isPrivate === true ||
+      options.isPrivate === "true" ||
+      cachedVideo?.isPrivate === true;
+
+    let magnet = sanitize(options.magnet);
+    if (!magnet && cachedVideo?.magnet) {
+      magnet = sanitize(cachedVideo.magnet);
+    }
+    if (!magnet && cachedVideo?.rawMagnet) {
+      magnet = sanitize(cachedVideo.rawMagnet);
+    }
+    if (!magnet && cachedVideo?.originalMagnet) {
+      magnet = sanitize(cachedVideo.originalMagnet);
+    }
+
+    let thumbnail = sanitize(options.thumbnail);
+    if (!thumbnail && cachedVideo?.thumbnail) {
+      thumbnail = sanitize(cachedVideo.thumbnail);
+    }
+
+    let description = sanitize(options.description);
+    if (!description && cachedVideo?.description) {
+      description = sanitize(cachedVideo.description);
+    }
+
+    let title = sanitize(options.title);
+    if (!title && cachedVideo?.title) {
+      title = sanitize(cachedVideo.title);
+    }
+
+    const providedMimeType = sanitize(options.mimeType);
+    const inferredMimeType = inferMimeTypeFromUrl(url);
+    const mimeType = providedMimeType || inferredMimeType || "application/octet-stream";
+
+    const explicitAlt = sanitize(options.altText);
+    const altText = explicitAlt || description || title || "";
+
+    const tags = [];
+    tags.push(["url", url]);
+    if (mimeType) {
+      tags.push(["m", mimeType]);
+    }
+    if (thumbnail) {
+      tags.push(["thumb", thumbnail]);
+    }
+    if (altText) {
+      tags.push(["alt", altText]);
+    }
+    if (!isPrivate && magnet) {
+      tags.push(["magnet", magnet]);
+    }
+
+    const additionalTags = Array.isArray(options.additionalTags)
+      ? options.additionalTags.filter((tag) => Array.isArray(tag) && tag.length >= 2)
+      : [];
+    tags.push(...additionalTags);
+
+    let actorPubkey =
+      typeof options.actorPubkey === "string" && options.actorPubkey.trim()
+        ? options.actorPubkey.trim()
+        : typeof this.pubkey === "string" && this.pubkey.trim()
+        ? this.pubkey.trim()
+        : "";
+
+    if (!actorPubkey) {
+      try {
+        const ensured = await this.ensureSessionActor();
+        actorPubkey = ensured || "";
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to ensure session actor before mirror:", error);
+        }
+        return { ok: false, error: "missing-actor", details: error };
+      }
+    }
+
+    if (!actorPubkey) {
+      return { ok: false, error: "missing-actor" };
+    }
+
+    if (!this.pool) {
+      try {
+        await this.ensurePool();
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to ensure pool before mirror:", error);
+        }
+        return { ok: false, error: "pool-unavailable", details: error };
+      }
+    }
+
+    const createdAt =
+      typeof options.created_at === "number" && Number.isFinite(options.created_at)
+        ? Math.max(0, Math.floor(options.created_at))
+        : Math.floor(Date.now() / 1000);
+
+    const relaysOverride = sanitizeRelayList(
+      Array.isArray(options.relays) && options.relays.length
+        ? options.relays
+        : Array.isArray(this.writeRelays) && this.writeRelays.length
+        ? this.writeRelays
+        : this.relays
+    );
+    const relays = relaysOverride.length ? relaysOverride : Array.from(RELAY_URLS);
+
+    const mirrorEvent = buildVideoMirrorEvent({
+      pubkey: actorPubkey,
+      created_at: createdAt,
+      tags,
+      content: altText,
+    });
+
+    try {
+      const { signedEvent, summary, signerPubkey } = await this.signAndPublishEvent(
+        mirrorEvent,
+        {
+          context: "mirror",
+          logName: "NIP-94 mirror",
+          devLogLabel: "NIP-94 mirror",
+          rejectionLogLevel: "warn",
+          relaysOverride: relays,
+        }
+      );
+
+      const normalizedSigner =
+        typeof signerPubkey === "string" ? signerPubkey.toLowerCase() : "";
+      const normalizedLogged =
+        typeof this.pubkey === "string" ? this.pubkey.toLowerCase() : "";
+      const sessionPubkey =
+        typeof this.sessionActor?.pubkey === "string"
+          ? this.sessionActor.pubkey.toLowerCase()
+          : "";
+
+      const usedSessionActor =
+        normalizedSigner &&
+        normalizedSigner !== normalizedLogged &&
+        normalizedSigner === sessionPubkey;
+
+      return {
+        ok: true,
+        event: signedEvent,
+        summary,
+        relays,
+        sessionActor: usedSessionActor,
+        signerPubkey,
+      };
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[nostr] Mirror publish failed:", error);
+      }
+      const relayFailure =
+        error && typeof error === "object" && Array.isArray(error.relayFailures);
+      return {
+        ok: false,
+        error: relayFailure ? "publish-rejected" : "signing-failed",
+        details: error,
+      };
+    }
+  }
+
+  async rebroadcastEvent(eventId, options = {}) {
+    const normalizedId =
+      typeof eventId === "string" && eventId.trim() ? eventId.trim() : "";
+    if (!normalizedId) {
+      return { ok: false, error: "invalid-event-id" };
+    }
+
+    const candidatePubkeys = [];
+    if (typeof options.pubkey === "string" && options.pubkey.trim()) {
+      candidatePubkeys.push(options.pubkey.trim().toLowerCase());
+    }
+    const cachedVideo = this.allEvents.get(normalizedId);
+    if (cachedVideo?.pubkey) {
+      candidatePubkeys.push(cachedVideo.pubkey.toLowerCase());
+    }
+    const cachedRaw = this.rawEvents.get(normalizedId);
+    if (cachedRaw?.pubkey) {
+      candidatePubkeys.push(cachedRaw.pubkey.toLowerCase());
+    }
+
+    let normalizedPubkey = "";
+    for (const candidate of candidatePubkeys) {
+      if (typeof candidate === "string" && candidate) {
+        normalizedPubkey = candidate;
+        break;
+      }
+    }
+
+    let guardScope = deriveRebroadcastScope(normalizedPubkey, normalizedId);
+    const guardBucket = deriveRebroadcastBucketIndex();
+    if (guardScope && hasRecentRebroadcastAttempt(guardScope, guardBucket)) {
+      const cooldown = getRebroadcastCooldownState(guardScope);
+      return { ok: false, error: "cooldown-active", throttled: true, cooldown };
+    }
+
+    const relayCandidates = Array.isArray(options.relays) && options.relays.length
+      ? options.relays
+      : Array.isArray(this.relays) && this.relays.length
+      ? this.relays
+      : RELAY_URLS;
+    const relays = relayCandidates
+      .map((url) => (typeof url === "string" ? url.trim() : ""))
+      .filter(Boolean);
+
+    if (!this.pool) {
+      try {
+        await this.ensurePool();
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to ensure pool before rebroadcast:", error);
+        }
+        return { ok: false, error: "pool-unavailable", details: error };
+      }
+    }
+
+    let rawEvent =
+      options.rawEvent || cachedRaw || (await this.fetchRawEventById(normalizedId, { relays }));
+
+    if (!rawEvent) {
+      return { ok: false, error: "event-not-found" };
+    }
+
+    if (!normalizedPubkey && typeof rawEvent.pubkey === "string") {
+      normalizedPubkey = rawEvent.pubkey.trim().toLowerCase();
+    }
+
+    const effectiveScope = deriveRebroadcastScope(normalizedPubkey, normalizedId);
+    if (effectiveScope && !guardScope) {
+      guardScope = effectiveScope;
+      if (hasRecentRebroadcastAttempt(guardScope, guardBucket)) {
+        const cooldown = getRebroadcastCooldownState(guardScope);
+        return { ok: false, error: "cooldown-active", throttled: true, cooldown };
+      }
+    }
+
+    if (guardScope) {
+      rememberRebroadcastAttempt(guardScope, guardBucket);
+    }
+
+    let countResult = null;
+    if (options.skipCount !== true) {
+      try {
+        countResult = await this.countEventsAcrossRelays([
+          { ids: [normalizedId] },
+        ], {
+          relays,
+          timeoutMs: options.timeoutMs,
+        });
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[nostr] COUNT request for rebroadcast failed:", error);
+        }
+      }
+
+      if (countResult?.total && Number(countResult.total) > 0) {
+        return {
+          ok: true,
+          alreadyPresent: true,
+          count: countResult,
+          cooldown: guardScope ? getRebroadcastCooldownState(guardScope) : null,
+        };
+      }
+    }
+
+    const publishResults = await publishEventToRelays(this.pool, relays, rawEvent);
+
+    try {
+      const summary = assertAnyRelayAccepted(publishResults, { context: "rebroadcast" });
+      return {
+        ok: true,
+        rebroadcast: true,
+        summary,
+        count: countResult,
+        cooldown: guardScope ? getRebroadcastCooldownState(guardScope) : null,
+      };
+    } catch (error) {
+      if (isDevMode) {
+        console.warn("[nostr] Rebroadcast rejected by relays:", error);
+      }
+      return {
+        ok: false,
+        error: "publish-rejected",
+        details: error,
+        results: publishResults,
+        cooldown: guardScope ? getRebroadcastCooldownState(guardScope) : null,
+      };
+    }
+  }
+
   getRequestTimeoutMs(timeoutMs) {
     const candidate = Number(timeoutMs);
     if (Number.isFinite(candidate) && candidate > 0) {
@@ -5289,24 +8763,12 @@ class NostrClient {
       return [];
     }
 
+    this.applyRootCreatedAt(video);
+
     const targetRoot = typeof video.videoRootId === "string" ? video.videoRootId : "";
     const targetPubkey = typeof video.pubkey === "string" ? video.pubkey.toLowerCase() : "";
-    const findDTagValue = (tags = []) => {
-      if (!Array.isArray(tags)) {
-        return "";
-      }
-      for (const tag of tags) {
-        if (!Array.isArray(tag) || tag.length < 2) {
-          continue;
-        }
-        if (tag[0] === "d" && typeof tag[1] === "string") {
-          return tag[1];
-        }
-      }
-      return "";
-    };
 
-    const targetDTag = findDTagValue(video.tags);
+    const targetDTag = getDTagValueFromTags(video.tags);
 
     const collectLocalMatches = () => {
       const seen = new Set();
@@ -5326,7 +8788,7 @@ class NostrClient {
 
         const candidateRoot =
           typeof candidate.videoRootId === "string" ? candidate.videoRootId : "";
-        const candidateDTag = findDTagValue(candidate.tags);
+        const candidateDTag = getDTagValueFromTags(candidate.tags);
 
         const sameRoot = targetRoot && candidateRoot === targetRoot;
         const sameD = targetDTag && candidateDTag === targetDTag;
@@ -5349,6 +8811,59 @@ class NostrClient {
 
     let localMatches = collectLocalMatches();
 
+    const ensureRootPresence = async () => {
+      const normalizedRoot = targetRoot && typeof targetRoot === "string"
+        ? targetRoot
+        : "";
+      if (!normalizedRoot || normalizedRoot === video.id) {
+        return;
+      }
+
+      const alreadyPresent = localMatches.some((entry) => entry?.id === normalizedRoot);
+      if (alreadyPresent) {
+        return;
+      }
+
+      const cachedRoot = this.allEvents.get(normalizedRoot);
+      if (cachedRoot) {
+        this.applyRootCreatedAt(cachedRoot);
+        localMatches.push(cachedRoot);
+        return;
+      }
+
+      if (
+        !this.pool ||
+        typeof this.pool.get !== "function" ||
+        !Array.isArray(this.relays) ||
+        !this.relays.length
+      ) {
+        return;
+      }
+
+      try {
+        const rootEvent = await this.pool.get(this.relays, { ids: [normalizedRoot] });
+        if (rootEvent && rootEvent.id === normalizedRoot) {
+          this.rawEvents.set(rootEvent.id, rootEvent);
+          const parsed = convertEventToVideo(rootEvent);
+          if (!parsed.invalid) {
+            this.mergeNip71MetadataIntoVideo(parsed);
+            this.applyRootCreatedAt(parsed);
+            this.allEvents.set(rootEvent.id, parsed);
+            localMatches.push(parsed);
+          }
+        }
+      } catch (error) {
+        if (isDevMode) {
+          console.warn(
+            `[nostr] Failed to fetch root event ${normalizedRoot} for history:`,
+            error
+          );
+        }
+      }
+    };
+
+    await ensureRootPresence();
+
     const shouldFetchFromRelays =
       localMatches.filter((entry) => !entry.deleted).length <= 1 && targetDTag;
 
@@ -5381,8 +8896,13 @@ class NostrClient {
         const merged = perRelay.flat();
         for (const evt of merged) {
           try {
+            if (evt && evt.id) {
+              this.rawEvents.set(evt.id, evt);
+            }
             const parsed = convertEventToVideo(evt);
             if (!parsed.invalid) {
+              this.mergeNip71MetadataIntoVideo(parsed);
+              this.applyRootCreatedAt(parsed);
               this.allEvents.set(evt.id, parsed);
             }
           } catch (err) {
@@ -5398,9 +8918,13 @@ class NostrClient {
       }
 
       localMatches = collectLocalMatches();
+      await ensureRootPresence();
     }
 
-    return localMatches.sort((a, b) => b.created_at - a.created_at);
+    localMatches.sort((a, b) => b.created_at - a.created_at);
+    await this.populateNip71MetadataForVideos(localMatches);
+    localMatches.forEach((entry) => this.applyRootCreatedAt(entry));
+    return localMatches;
   }
 
   getActiveVideos() {
diff --git a/js/nostrEventSchemas.js b/js/nostrEventSchemas.js
index f07eae8d..7d60e477 100644
--- a/js/nostrEventSchemas.js
+++ b/js/nostrEventSchemas.js
@@ -8,6 +8,9 @@ import {
 export const NOTE_TYPES = Object.freeze({
   VIDEO_POST: "videoPost",
   VIDEO_MIRROR: "videoMirror",
+  NIP71_VIDEO: "nip71Video",
+  NIP71_SHORT_VIDEO: "nip71ShortVideo",
+  REPOST: "repost",
   RELAY_LIST: "relayList",
   VIEW_EVENT: "viewEvent",
   WATCH_HISTORY_INDEX: "watchHistoryIndex",
@@ -131,6 +134,40 @@ const BASE_SCHEMAS = {
       description: "Optional alt text carried alongside hosted URL metadata.",
     },
   },
+  [NOTE_TYPES.REPOST]: {
+    type: NOTE_TYPES.REPOST,
+    label: "NIP-18 repost",
+    kind: 6,
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "empty",
+      description: "Content field intentionally empty for pure repost events.",
+    },
+  },
+  [NOTE_TYPES.NIP71_VIDEO]: {
+    type: NOTE_TYPES.NIP71_VIDEO,
+    label: "NIP-71 video (normal)",
+    kind: 21,
+    featureFlag: "FEATURE_PUBLISH_NIP71",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "text",
+      description:
+        "Summary or description for the video body; tags carry structured metadata.",
+    },
+  },
+  [NOTE_TYPES.NIP71_SHORT_VIDEO]: {
+    type: NOTE_TYPES.NIP71_SHORT_VIDEO,
+    label: "NIP-71 video (short)",
+    kind: 22,
+    featureFlag: "FEATURE_PUBLISH_NIP71",
+    appendTags: DEFAULT_APPEND_TAGS,
+    content: {
+      format: "text",
+      description:
+        "Summary or description for the short-form video; structured fields live in tags.",
+    },
+  },
   [NOTE_TYPES.RELAY_LIST]: {
     type: NOTE_TYPES.RELAY_LIST,
     label: "Relay list metadata",
@@ -402,6 +439,64 @@ export function buildVideoMirrorEvent({
   };
 }
 
+export function buildRepostEvent({
+  pubkey,
+  created_at,
+  eventId = "",
+  eventRelay = "",
+  address = "",
+  addressRelay = "",
+  authorPubkey = "",
+  additionalTags = [],
+}) {
+  const schema = getNostrEventSchema(NOTE_TYPES.REPOST);
+  const tags = [];
+
+  const normalizedEventId = typeof eventId === "string" ? eventId.trim() : "";
+  const normalizedEventRelay = typeof eventRelay === "string" ? eventRelay.trim() : "";
+  if (normalizedEventId) {
+    if (normalizedEventRelay) {
+      tags.push(["e", normalizedEventId, normalizedEventRelay]);
+    } else {
+      tags.push(["e", normalizedEventId]);
+    }
+  }
+
+  const normalizedAddress = typeof address === "string" ? address.trim() : "";
+  const normalizedAddressRelay = typeof addressRelay === "string" ? addressRelay.trim() : "";
+  if (normalizedAddress) {
+    if (normalizedAddressRelay) {
+      tags.push(["a", normalizedAddress, normalizedAddressRelay]);
+    } else {
+      tags.push(["a", normalizedAddress]);
+    }
+  }
+
+  const normalizedAuthorPubkey =
+    typeof authorPubkey === "string" ? authorPubkey.trim().toLowerCase() : "";
+  if (normalizedAuthorPubkey) {
+    tags.push(["p", normalizedAuthorPubkey]);
+  }
+
+  appendSchemaTags(tags, schema);
+
+  if (Array.isArray(additionalTags)) {
+    additionalTags.forEach((tag) => {
+      if (Array.isArray(tag) && tag.length >= 2) {
+        tags.push(tag.map((value) => (typeof value === "string" ? value : String(value))));
+      }
+    });
+  }
+
+  return {
+    kind: schema?.kind ?? 6,
+    pubkey,
+    created_at,
+    tags,
+    content: "",
+  };
+}
+
 export function buildRelayListEvent({
   pubkey,
   created_at,
diff --git a/js/nostrToolsBootstrap.js b/js/nostrToolsBootstrap.js
new file mode 100644
index 00000000..2797b217
--- /dev/null
+++ b/js/nostrToolsBootstrap.js
@@ -0,0 +1,512 @@
+const REMOTE_IMPORT_TIMEOUT = 4500;
+const LOCAL_IMPORT_TIMEOUT = 2500;
+const SCRIPT_FALLBACK_TIMEOUT = 6000;
+const CDN_BUNDLE_URL =
+  "https://cdn.jsdelivr.net/npm/nostr-tools@2.10.4/lib/nostr.bundle.min.js";
+const LOCAL_BUNDLE_RELATIVE_URL = "../vendor/nostr-tools.bundle.min.js";
+
+const moduleUrl =
+  typeof import.meta !== "undefined" && import.meta?.url ? import.meta.url : null;
+
+const resolveRelativeUrl = (relativePath) => {
+  if (!relativePath) {
+    return relativePath;
+  }
+  if (/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(relativePath)) {
+    return relativePath;
+  }
+  if (moduleUrl) {
+    try {
+      return new URL(relativePath, moduleUrl).href;
+    } catch (error) {
+      // Fall through to other resolution strategies
+    }
+  }
+  if (typeof window !== "undefined" && window?.location?.href) {
+    try {
+      return new URL(relativePath, window.location.href).href;
+    } catch (error) {
+      return relativePath;
+    }
+  }
+  return relativePath;
+};
+
+const LOCAL_BUNDLE_URL = resolveRelativeUrl(LOCAL_BUNDLE_RELATIVE_URL);
+
+let bootstrapPromise = null;
+
+const getGlobalScope = () => {
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  return null;
+};
+
+const hasWorkingNip04 = (candidate) =>
+  !!(
+    candidate &&
+    typeof candidate === "object" &&
+    typeof candidate.encrypt === "function" &&
+    typeof candidate.decrypt === "function"
+  );
+
+const toSerializableError = (error) => {
+  if (!error) {
+    return null;
+  }
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+      name: error.name,
+    };
+  }
+  if (typeof error === "string") {
+    return { message: error };
+  }
+  try {
+    return { ...error };
+  } catch (serializationError) {
+    return { message: String(error) };
+  }
+};
+
+const withTimeout = (factory, ms, label) =>
+  new Promise((resolve) => {
+    const start = Date.now();
+    let settled = false;
+    let timeoutId;
+    const finalize = (result) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      clearTimeout(timeoutId);
+      resolve({
+        label,
+        duration: Date.now() - start,
+        ...result,
+      });
+    };
+
+    const runner = Promise.resolve().then(factory);
+
+    timeoutId = setTimeout(() => {
+      finalize({
+        ok: false,
+        timedOut: true,
+        error: new Error(
+          `[bitvid][nostr-tools] ${label} timed out after ${ms}ms`
+        ),
+      });
+      runner.catch(() => {});
+    }, ms);
+
+    runner.then(
+      (value) => finalize({ ok: true, value, timedOut: false }),
+      (error) => finalize({ ok: false, error, timedOut: false })
+    );
+  });
+
+const discoverLocalEntrypoints = (scope) => {
+  if (!scope || typeof scope !== "object") {
+    return [];
+  }
+
+  const entrypoints = [];
+  const configuredEntrypoints = scope.__BITVID_LOCAL_NOSTR_TOOLS_ENTRY__;
+  if (typeof configuredEntrypoints === "string") {
+    entrypoints.push(configuredEntrypoints);
+  } else if (Array.isArray(configuredEntrypoints)) {
+    configuredEntrypoints
+      .filter((candidate) => typeof candidate === "string" && candidate)
+      .forEach((candidate) => entrypoints.push(candidate));
+  }
+
+  if (scope.document) {
+    const localScripts = scope.document.querySelectorAll(
+      "script[data-nostr-tools-entry]"
+    );
+    localScripts.forEach((script) => {
+      const candidate = script.getAttribute("data-nostr-tools-entry");
+      if (candidate) {
+        entrypoints.push(candidate);
+      }
+    });
+  }
+
+  return Array.from(new Set(entrypoints));
+};
+
+const extractToolsFromModule = (moduleLike) => {
+  if (!moduleLike || typeof moduleLike !== "object") {
+    return null;
+  }
+  const { default: defaultExport, ...named } = moduleLike;
+  if (defaultExport && typeof defaultExport === "object") {
+    return { ...defaultExport, ...named };
+  }
+  return { ...named };
+};
+
+const ensureGlobalReadyPromise = (scope, promise) => {
+  if (!scope || typeof scope !== "object") {
+    return;
+  }
+  try {
+    Object.defineProperty(scope, "nostrToolsReady", {
+      configurable: true,
+      enumerable: false,
+      writable: true,
+      value: promise,
+    });
+  } catch (error) {
+    scope.nostrToolsReady = promise;
+  }
+};
+
+const loadScriptBundle = (scope, url, label) => {
+  if (!scope?.document) {
+    return Promise.resolve({
+      label,
+      ok: false,
+      timedOut: false,
+      duration: 0,
+      error: new Error("Document is unavailable for script loading."),
+    });
+  }
+
+  return withTimeout(
+    () =>
+      new Promise((resolve, reject) => {
+        const { document } = scope;
+        const target = document.head || document.body || document.documentElement;
+        if (!target) {
+          reject(new Error("Unable to locate a DOM target for script injection."));
+          return;
+        }
+
+        const script = document.createElement("script");
+        script.async = true;
+        script.src = url;
+        script.crossOrigin = "anonymous";
+
+        const cleanup = () => {
+          script.onload = null;
+          script.onerror = null;
+          if (script.parentNode) {
+            script.parentNode.removeChild(script);
+          }
+        };
+
+        script.onload = () => {
+          cleanup();
+          resolve(scope?.NostrTools || null);
+        };
+        script.onerror = (event) => {
+          cleanup();
+          if (event?.error instanceof Error) {
+            reject(event.error);
+          } else {
+            reject(new Error(`nostr-tools bundle failed to load: ${url}`));
+          }
+        };
+
+        target.appendChild(script);
+      }),
+    SCRIPT_FALLBACK_TIMEOUT,
+    label
+  );
+};
+
+export function bootstrapNostrTools() {
+  if (bootstrapPromise) {
+    return bootstrapPromise;
+  }
+
+  const scope = getGlobalScope();
+
+  bootstrapPromise = (async () => {
+    if (!scope) {
+      const error = {
+        ok: false,
+        reason: "Global scope is unavailable.",
+        attempts: [],
+      };
+      return error;
+    }
+
+    const attempts = [];
+
+    const remoteImports = [
+      withTimeout(
+        () => import("https://esm.sh/nostr-tools@1.8.3"),
+        REMOTE_IMPORT_TIMEOUT,
+        "esm-main"
+      ),
+      withTimeout(
+        () =>
+          import(
+            "https://esm.sh/nostr-tools@1.8.3?target=es2022&exports=nip04"
+          ),
+        REMOTE_IMPORT_TIMEOUT,
+        "esm-nip04"
+      ),
+    ];
+
+    const localEntrypoints = discoverLocalEntrypoints(scope);
+    const localImports = localEntrypoints.map((entry, index) =>
+      withTimeout(
+        () => import(entry),
+        LOCAL_IMPORT_TIMEOUT,
+        `local-${index}`
+      )
+    );
+
+    const dynamicResults = await Promise.allSettled([
+      ...remoteImports,
+      ...localImports,
+    ]);
+
+    const resolvedModules = [];
+    let resolvedNip04 = null;
+
+    dynamicResults.forEach((settledResult) => {
+      if (settledResult.status !== "fulfilled") {
+        return;
+      }
+      const result = settledResult.value;
+      attempts.push({
+        target: result.label,
+        ok: result.ok,
+        timedOut: !!result.timedOut,
+        duration: result.duration,
+        error: result.ok ? null : toSerializableError(result.error),
+      });
+      if (!result.ok) {
+        return;
+      }
+      if (result.label === "esm-nip04" && hasWorkingNip04(result.value?.nip04)) {
+        resolvedNip04 = result.value.nip04;
+        return;
+      }
+      const extracted = extractToolsFromModule(result.value);
+      if (extracted && Object.keys(extracted).length > 0) {
+        resolvedModules.push({ source: result.label, tools: extracted });
+        if (!resolvedNip04 && hasWorkingNip04(extracted?.nip04)) {
+          resolvedNip04 = extracted.nip04;
+        }
+      }
+    });
+
+    dynamicResults.forEach((settledResult) => {
+      if (settledResult.status !== "fulfilled") {
+        const { reason } = settledResult;
+        attempts.push({
+          target: "unknown",
+          ok: false,
+          timedOut: false,
+          duration: 0,
+          error: toSerializableError(reason),
+        });
+        return;
+      }
+      const result = settledResult.value;
+      if (result && !attempts.find((entry) => entry.target === result.label)) {
+        attempts.push({
+          target: result.label,
+          ok: result.ok,
+          timedOut: !!result.timedOut,
+          duration: result.duration,
+          error: result.ok ? null : toSerializableError(result.error),
+        });
+      }
+    });
+
+    const allDynamicTimedOut =
+      attempts.length > 0 &&
+      attempts.every(
+        (attempt) =>
+          attempt &&
+          attempt.target &&
+          attempt.target.startsWith("esm")
+            ? attempt.timedOut
+            : true
+      );
+
+    const shouldAttemptScriptFallback =
+      !!scope.document && (resolvedModules.length === 0 || allDynamicTimedOut);
+
+    if (shouldAttemptScriptFallback) {
+      const scriptSources = [
+        LOCAL_BUNDLE_URL
+          ? { url: LOCAL_BUNDLE_URL, label: "local-bundle" }
+          : null,
+        { url: CDN_BUNDLE_URL, label: "cdn-bundle" },
+      ].filter(Boolean);
+
+      for (const source of scriptSources) {
+        const scriptLoadResult = await loadScriptBundle(
+          scope,
+          source.url,
+          source.label
+        );
+
+        attempts.push({
+          target: scriptLoadResult.label,
+          ok: scriptLoadResult.ok,
+          timedOut: !!scriptLoadResult.timedOut,
+          duration: scriptLoadResult.duration,
+          error: scriptLoadResult.ok
+            ? null
+            : toSerializableError(scriptLoadResult.error),
+        });
+
+        if (!scriptLoadResult.ok) {
+          continue;
+        }
+
+        const extracted = extractToolsFromModule(scriptLoadResult.value);
+        if (extracted && Object.keys(extracted).length > 0) {
+          resolvedModules.push({ source: source.label, tools: extracted });
+          if (!resolvedNip04 && hasWorkingNip04(extracted?.nip04)) {
+            resolvedNip04 = extracted.nip04;
+          }
+          break;
+        }
+      }
+    }
+
+    const existingGlobalTools = scope?.NostrTools;
+    if (existingGlobalTools && typeof existingGlobalTools === "object") {
+      resolvedModules.push({ source: "global", tools: existingGlobalTools });
+      if (!resolvedNip04 && hasWorkingNip04(existingGlobalTools?.nip04)) {
+        resolvedNip04 = existingGlobalTools.nip04;
+      }
+    }
+
+    if (resolvedModules.length === 0 && !resolvedNip04) {
+      const failure = {
+        ok: false,
+        reason: "Failed to resolve any nostr-tools helpers.",
+        attempts,
+      };
+      console.warn("[bitvid] nostr-tools bootstrap failed", failure);
+      return failure;
+    }
+
+    const toolSources = resolvedModules.map((entry) => entry.tools);
+    const canonicalTools = Object.assign({}, ...toolSources);
+
+    const normalizedGeneratePrivateKey =
+      typeof canonicalTools.generatePrivateKey === "function"
+        ? canonicalTools.generatePrivateKey
+        : typeof canonicalTools.generateSecretKey === "function"
+        ? canonicalTools.generateSecretKey
+        : undefined;
+
+    const normalizedGenerateSecretKey =
+      typeof canonicalTools.generateSecretKey === "function"
+        ? canonicalTools.generateSecretKey
+        : typeof canonicalTools.generatePrivateKey === "function"
+        ? canonicalTools.generatePrivateKey
+        : undefined;
+
+    if (normalizedGeneratePrivateKey) {
+      canonicalTools.generatePrivateKey = normalizedGeneratePrivateKey;
+    }
+    if (normalizedGenerateSecretKey) {
+      canonicalTools.generateSecretKey = normalizedGenerateSecretKey;
+    }
+
+    if (resolvedNip04) {
+      canonicalTools.nip04 = resolvedNip04;
+      console.info("[bitvid] Initialized nostr nip04 helpers.");
+    } else {
+      console.warn(
+        "[bitvid] NIP-04 helpers unavailable after bootstrap attempts."
+      );
+    }
+
+    const frozenCanonical = Object.freeze({ ...canonicalTools });
+
+    try {
+      Object.defineProperty(scope, "__BITVID_CANONICAL_NOSTR_TOOLS__", {
+        configurable: true,
+        enumerable: false,
+        writable: false,
+        value: frozenCanonical,
+      });
+    } catch (error) {
+      scope.__BITVID_CANONICAL_NOSTR_TOOLS__ = frozenCanonical;
+    }
+
+    let activeTools = canonicalTools;
+    const mergeWithCanonical = (candidate) => {
+      if (!candidate || typeof candidate !== "object") {
+        return activeTools;
+      }
+      const merged = Object.assign({}, frozenCanonical, candidate);
+      if (!merged.nip04 && frozenCanonical.nip04) {
+        merged.nip04 = frozenCanonical.nip04;
+      }
+      if (
+        typeof merged.generatePrivateKey !== "function" &&
+        typeof merged.generateSecretKey === "function"
+      ) {
+        merged.generatePrivateKey = merged.generateSecretKey;
+      }
+      if (
+        typeof merged.generateSecretKey !== "function" &&
+        typeof merged.generatePrivateKey === "function"
+      ) {
+        merged.generateSecretKey = merged.generatePrivateKey;
+      }
+      return merged;
+    };
+
+    const applyActive = (candidate) => {
+      activeTools = mergeWithCanonical(candidate);
+      return activeTools;
+    };
+
+    try {
+      Object.defineProperty(scope, "NostrTools", {
+        configurable: true,
+        enumerable: true,
+        get() {
+          return activeTools;
+        },
+        set(value) {
+          applyActive(value);
+        },
+      });
+    } catch (error) {
+      console.warn("[bitvid] Failed to install NostrTools guard.", error);
+    }
+
+    applyActive(existingGlobalTools);
+    scope.NostrTools = canonicalTools;
+
+    return frozenCanonical;
+  })()
+    .catch((error) => ({
+      ok: false,
+      reason: "nostr-tools bootstrap threw unexpectedly.",
+      error: toSerializableError(error),
+    }));
+
+  ensureGlobalReadyPromise(scope, bootstrapPromise);
+
+  return bootstrapPromise;
+}
+
+const nostrToolsReady = bootstrapNostrTools();
+
+export { nostrToolsReady };
+export default nostrToolsReady;
+
+await nostrToolsReady;
diff --git a/js/nwcSettings.js b/js/nwcSettings.js
new file mode 100644
index 00000000..5a1697f0
--- /dev/null
+++ b/js/nwcSettings.js
@@ -0,0 +1,368 @@
+const DB_NAME = "bitvidSettings";
+const DB_VERSION = 1;
+const STORE_NAME = "kv";
+const KEY_PREFIX = "nwcSettings:";
+const LOCALSTORAGE_PREFIX = "bitvid:nwcSettings:";
+const HEX64_REGEX = /^[0-9a-f]{64}$/i;
+const MIN_DEFAULT_ZAP = 0;
+const MAX_DEFAULT_ZAP = 100000000;
+
+const DEFAULT_SETTINGS = Object.freeze({
+  nwcUri: "",
+  defaultZap: null,
+  lastChecked: null,
+  version: "",
+});
+
+function createClone(value) {
+  return { ...value };
+}
+
+function isIndexedDbAvailable() {
+  try {
+    return typeof indexedDB !== "undefined";
+  } catch (error) {
+    return false;
+  }
+}
+
+function openSettingsDb() {
+  return new Promise((resolve, reject) => {
+    if (!isIndexedDbAvailable()) {
+      resolve(null);
+      return;
+    }
+
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+
+    request.onerror = () => {
+      reject(request.error || new Error("Failed to open settings DB"));
+    };
+  });
+}
+
+function normalizePubkey(pubkey) {
+  if (typeof pubkey !== "string") {
+    return null;
+  }
+
+  const trimmed = pubkey.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  if (HEX64_REGEX.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  if (trimmed.startsWith("npub1") && typeof window !== "undefined") {
+    try {
+      const decoded = window?.NostrTools?.nip19?.decode?.(trimmed);
+      if (decoded?.type === "npub" && typeof decoded.data === "string") {
+        const hex = decoded.data.trim();
+        if (HEX64_REGEX.test(hex)) {
+          return hex.toLowerCase();
+        }
+      }
+    } catch (error) {
+      // Ignore decode errors and fall through to return null.
+    }
+  }
+
+  return null;
+}
+
+function resolveStorageKeys(pubkey) {
+  const normalized = normalizePubkey(pubkey);
+  if (!normalized) {
+    throw new Error("Invalid pubkey for NWC settings.");
+  }
+  return {
+    normalized,
+    dbKey: `${KEY_PREFIX}${normalized}`,
+    fallbackKey: `${LOCALSTORAGE_PREFIX}${normalized}`,
+  };
+}
+
+function sanitizeUri(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function sanitizeDefaultZap(value) {
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return null;
+  }
+
+  const rounded = Math.round(numeric);
+  if (!Number.isFinite(rounded)) {
+    return null;
+  }
+
+  return Math.min(MAX_DEFAULT_ZAP, Math.max(MIN_DEFAULT_ZAP, rounded));
+}
+
+function sanitizeTimestamp(value) {
+  if (!Number.isFinite(value)) {
+    return null;
+  }
+  const rounded = Math.round(value);
+  if (!Number.isFinite(rounded)) {
+    return null;
+  }
+  return Math.max(0, rounded);
+}
+
+function sanitizeVersion(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.trim();
+}
+
+function normalizeSettings(raw) {
+  const base = createClone(DEFAULT_SETTINGS);
+  if (!raw || typeof raw !== "object") {
+    return base;
+  }
+
+  if (Object.prototype.hasOwnProperty.call(raw, "nwcUri")) {
+    base.nwcUri = sanitizeUri(raw.nwcUri);
+  }
+
+  if (Object.prototype.hasOwnProperty.call(raw, "defaultZap")) {
+    base.defaultZap = sanitizeDefaultZap(raw.defaultZap);
+  }
+
+  if (Object.prototype.hasOwnProperty.call(raw, "lastChecked")) {
+    base.lastChecked = sanitizeTimestamp(raw.lastChecked);
+  }
+
+  if (Object.prototype.hasOwnProperty.call(raw, "version")) {
+    base.version = sanitizeVersion(raw.version);
+  }
+
+  return base;
+}
+
+function mergeSettings(existing, partial) {
+  const source = partial && typeof partial === "object" ? partial : {};
+  return normalizeSettings({ ...existing, ...source });
+}
+
+function emitToast(message, { variant = "error", error } = {}) {
+  const text = typeof message === "string" ? message.trim() : "";
+  if (!text) {
+    return;
+  }
+  if (typeof window !== "undefined" && typeof window.dispatchEvent === "function") {
+    try {
+      window.dispatchEvent(
+        new CustomEvent("bitvid:toast", {
+          detail: {
+            message: text,
+            variant,
+            source: "nwc-settings",
+            error,
+          },
+        })
+      );
+    } catch (eventError) {
+      console.warn("[nwcSettings] Failed to dispatch toast event", eventError);
+    }
+  }
+}
+
+function notifyFailure(message, error) {
+  const text = message || "NWC settings storage error.";
+  console.warn(`[nwcSettings] ${text}`, error);
+  emitToast(text, { variant: "error", error });
+}
+
+function notifyWarning(message, error) {
+  const text = message || "NWC settings storage warning.";
+  console.warn(`[nwcSettings] ${text}`, error);
+  emitToast(text, { variant: "warning", error });
+}
+
+async function readFromIndexedDb(dbKey) {
+  try {
+    const db = await openSettingsDb();
+    if (!db) {
+      return null;
+    }
+    return await new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.get(dbKey);
+      request.onsuccess = () => {
+        resolve(request.result || null);
+      };
+      request.onerror = () => {
+        reject(request.error || new Error("Failed to load NWC settings."));
+      };
+    });
+  } catch (error) {
+    notifyWarning("Unable to read wallet settings from IndexedDB.", error);
+    return null;
+  }
+}
+
+function readFromLocalStorage(fallbackKey) {
+  try {
+    if (typeof localStorage === "undefined") {
+      return null;
+    }
+    const raw = localStorage.getItem(fallbackKey);
+    if (!raw) {
+      return null;
+    }
+    return JSON.parse(raw);
+  } catch (error) {
+    notifyFailure(
+      "Unable to read wallet settings from local storage fallback.",
+      error
+    );
+    return null;
+  }
+}
+
+async function writeToIndexedDb(dbKey, value) {
+  try {
+    const db = await openSettingsDb();
+    if (!db) {
+      return false;
+    }
+    await new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.put(value, dbKey);
+      request.onsuccess = () => resolve();
+      request.onerror = () => {
+        reject(request.error || new Error("Failed to persist NWC settings."));
+      };
+    });
+    return true;
+  } catch (error) {
+    notifyWarning("Unable to save wallet settings to IndexedDB.", error);
+    return false;
+  }
+}
+
+function writeToLocalStorage(fallbackKey, value) {
+  try {
+    if (typeof localStorage === "undefined") {
+      return false;
+    }
+    localStorage.setItem(fallbackKey, JSON.stringify(value));
+    return true;
+  } catch (error) {
+    notifyWarning("Unable to save wallet settings to local storage fallback.", error);
+    return false;
+  }
+}
+
+async function deleteFromIndexedDb(dbKey) {
+  try {
+    const db = await openSettingsDb();
+    if (!db) {
+      return false;
+    }
+    await new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const request = store.delete(dbKey);
+      request.onsuccess = () => resolve();
+      request.onerror = () => {
+        reject(request.error || new Error("Failed to clear NWC settings."));
+      };
+    });
+    return true;
+  } catch (error) {
+    notifyWarning("Unable to remove wallet settings from IndexedDB.", error);
+    return false;
+  }
+}
+
+function deleteFromLocalStorage(fallbackKey) {
+  try {
+    if (typeof localStorage === "undefined") {
+      return false;
+    }
+    localStorage.removeItem(fallbackKey);
+    return true;
+  } catch (error) {
+    notifyWarning("Unable to remove wallet settings from local storage fallback.", error);
+    return false;
+  }
+}
+
+export function createDefaultNwcSettings() {
+  return createClone(DEFAULT_SETTINGS);
+}
+
+export async function loadNwcSettings(pubkey) {
+  const { dbKey, fallbackKey } = resolveStorageKeys(pubkey);
+  const stored = await readFromIndexedDb(dbKey);
+  if (stored) {
+    return normalizeSettings(stored);
+  }
+
+  const fallback = readFromLocalStorage(fallbackKey);
+  if (fallback) {
+    return normalizeSettings(fallback);
+  }
+
+  return normalizeSettings(null);
+}
+
+export async function saveNwcSettings(pubkey, partial = {}) {
+  const { normalized, dbKey, fallbackKey } = resolveStorageKeys(pubkey);
+  const existing = await readFromIndexedDb(dbKey);
+  const fallbackExisting = existing || readFromLocalStorage(fallbackKey);
+  const merged = mergeSettings(fallbackExisting || DEFAULT_SETTINGS, partial);
+
+  const idbPersisted = await writeToIndexedDb(dbKey, merged);
+  const localPersisted = writeToLocalStorage(fallbackKey, merged);
+
+  if (!idbPersisted && !localPersisted) {
+    notifyFailure(
+      "Failed to persist wallet settings. Recent changes were not saved.",
+      new Error(`Unable to save settings for ${normalized}`)
+    );
+    throw new Error("Unable to persist NWC settings.");
+  }
+
+  return merged;
+}
+
+export async function clearNwcSettings(pubkey) {
+  const { normalized, dbKey, fallbackKey } = resolveStorageKeys(pubkey);
+  const idbCleared = await deleteFromIndexedDb(dbKey);
+  const localCleared = deleteFromLocalStorage(fallbackKey);
+
+  if (!idbCleared && !localCleared) {
+    notifyFailure(
+      "Failed to clear wallet settings from browser storage.",
+      new Error(`Unable to clear settings for ${normalized}`)
+    );
+    throw new Error("Unable to clear NWC settings.");
+  }
+
+  return true;
+}
diff --git a/js/payments/lnurl.js b/js/payments/lnurl.js
new file mode 100644
index 00000000..52d536b8
--- /dev/null
+++ b/js/payments/lnurl.js
@@ -0,0 +1,372 @@
+// js/payments/lnurl.js
+
+const CHARSET = "qpzry9x8gf2tvdw0s3jn54khce6mua7l";
+const CHARKEY = new Map(
+  Array.from(CHARSET).map((char, index) => [char, index])
+);
+const GENERATORS = [
+  0x3b6a57b2,
+  0x26508e6d,
+  0x1ea119fa,
+  0x3d4233dd,
+  0x2a1462b3,
+];
+
+const DEFAULT_COMMENT_MAX = 0;
+
+function hrpExpand(hrp) {
+  const chars = Array.from(hrp);
+  const left = chars.map((char) => char.charCodeAt(0) >> 5);
+  const right = chars.map((char) => char.charCodeAt(0) & 31);
+  return [...left, 0, ...right];
+}
+
+function polymod(values) {
+  let chk = 1;
+  for (const value of values) {
+    const top = chk >>> 25;
+    chk = ((chk & 0x1ffffff) << 5) ^ value;
+    for (let i = 0; i < GENERATORS.length; i += 1) {
+      if (((top >> i) & 1) !== 0) {
+        chk ^= GENERATORS[i];
+      }
+    }
+  }
+  return chk;
+}
+
+function verifyChecksum(hrp, data) {
+  return polymod([...hrpExpand(hrp), ...data]) === 1;
+}
+
+function bech32Decode(input) {
+  if (typeof input !== "string") {
+    throw new Error("LNURL must be a string.");
+  }
+
+  const trimmed = input.trim();
+  if (!trimmed) {
+    throw new Error("LNURL cannot be empty.");
+  }
+
+  const lower = trimmed.toLowerCase();
+  const upper = trimmed.toUpperCase();
+  if (trimmed !== lower && trimmed !== upper) {
+    throw new Error("LNURL cannot mix upper and lower case characters.");
+  }
+
+  const normalized = lower;
+  const separatorIndex = normalized.lastIndexOf("1");
+  if (separatorIndex <= 0 || separatorIndex + 7 > normalized.length) {
+    throw new Error("Invalid LNURL bech32 payload.");
+  }
+
+  const hrp = normalized.slice(0, separatorIndex);
+  const dataPart = normalized.slice(separatorIndex + 1);
+
+  const data = [];
+  for (const char of dataPart) {
+    if (!CHARKEY.has(char)) {
+      throw new Error("LNURL payload includes invalid characters.");
+    }
+    data.push(CHARKEY.get(char));
+  }
+
+  if (!verifyChecksum(hrp, data)) {
+    throw new Error("LNURL checksum is invalid.");
+  }
+
+  return {
+    prefix: hrp,
+    words: data.slice(0, -6),
+  };
+}
+
+function convertWords(words, fromBits, toBits, { pad = true } = {}) {
+  let value = 0;
+  let bits = 0;
+  const maxValue = (1 << toBits) - 1;
+  const result = [];
+
+  for (const word of words) {
+    if (word < 0 || word >> fromBits !== 0) {
+      throw new Error("Invalid bech32 word value.");
+    }
+    value = (value << fromBits) | word;
+    bits += fromBits;
+
+    while (bits >= toBits) {
+      bits -= toBits;
+      result.push((value >> bits) & maxValue);
+    }
+  }
+
+  if (pad) {
+    if (bits > 0) {
+      result.push((value << (toBits - bits)) & maxValue);
+    }
+  } else if (bits >= fromBits || ((value << (toBits - bits)) & maxValue) !== 0) {
+    throw new Error("Excess padding in bech32 payload.");
+  }
+
+  return result;
+}
+
+function decodeLnurlBech32(encoded) {
+  const { prefix, words } = bech32Decode(encoded);
+  if (prefix !== "lnurl") {
+    throw new Error("Only bech32 LNURL encodings are supported.");
+  }
+
+  const bytes = convertWords(words, 5, 8, { pad: false });
+  const decoder = new TextDecoder("utf-8", { fatal: true });
+  return decoder.decode(Uint8Array.from(bytes));
+}
+
+function ensureFetchFunction(fetcher) {
+  if (typeof fetcher === "function") {
+    return fetcher;
+  }
+
+  if (typeof fetch === "function") {
+    return fetch;
+  }
+
+  if (typeof globalThis.fetch === "function") {
+    return globalThis.fetch.bind(globalThis);
+  }
+
+  throw new Error("Fetch API is not available in this environment.");
+}
+
+function sanitizeUrl(url) {
+  const trimmed = typeof url === "string" ? url.trim() : "";
+  if (!trimmed) {
+    throw new Error("LNURL endpoint is missing.");
+  }
+  return trimmed;
+}
+
+export function resolveLightningAddress(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  if (!trimmed) {
+    throw new Error("Lightning address is required.");
+  }
+
+  if (trimmed.toLowerCase().startsWith("lnurl")) {
+    const decoded = decodeLnurlBech32(trimmed);
+    return {
+      type: "lud06",
+      url: sanitizeUrl(decoded),
+      address: trimmed,
+    };
+  }
+
+  if (trimmed.includes("@")) {
+    const [namePart, domainPart] = trimmed.split("@");
+    const name = (namePart || "").trim();
+    const domain = (domainPart || "").trim();
+    if (!name || !domain) {
+      throw new Error("Invalid Lightning address format.");
+    }
+    const url = `https://${domain}/.well-known/lnurlp/${encodeURIComponent(
+      name.toLowerCase()
+    )}`;
+    return {
+      type: "lud16",
+      url,
+      address: `${name}@${domain}`,
+    };
+  }
+
+  if (/^https?:\/\//i.test(trimmed)) {
+    return {
+      type: "url",
+      url: trimmed,
+      address: trimmed,
+    };
+  }
+
+  throw new Error("Unsupported Lightning address format.");
+}
+
+function normalizeNumeric(value, fallback = 0) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return fallback;
+  }
+  return numeric;
+}
+
+export async function fetchPayServiceData(url, { fetcher } = {}) {
+  const targetUrl = sanitizeUrl(url);
+  const fetchFn = ensureFetchFunction(fetcher);
+
+  const response = await fetchFn(targetUrl, {
+    method: "GET",
+    headers: { Accept: "application/json" },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to load LNURL metadata (${response.status}).`);
+  }
+
+  let payload;
+  try {
+    payload = await response.json();
+  } catch (error) {
+    throw new Error("LNURL endpoint did not return JSON.");
+  }
+
+  if (!payload || typeof payload !== "object") {
+    throw new Error("LNURL metadata response was invalid.");
+  }
+
+  if (typeof payload.status === "string" && payload.status.toUpperCase() === "ERROR") {
+    const reason =
+      typeof payload.reason === "string" && payload.reason.trim()
+        ? payload.reason.trim()
+        : "LNURL endpoint returned an error.";
+    throw new Error(reason);
+  }
+
+  const callback = sanitizeUrl(payload.callback);
+  const minSendable = Math.max(0, normalizeNumeric(payload.minSendable, 0));
+  const maxSendable = Math.max(minSendable, normalizeNumeric(payload.maxSendable, minSendable));
+  const commentAllowed = Math.max(0, Math.round(normalizeNumeric(payload.commentAllowed, DEFAULT_COMMENT_MAX)));
+  const allowsNostr = payload.allowsNostr === true;
+  const nostrPubkey =
+    typeof payload.nostrPubkey === "string" ? payload.nostrPubkey.trim() : "";
+
+  let metadata = [];
+  if (typeof payload.metadata === "string" && payload.metadata.trim()) {
+    try {
+      const parsed = JSON.parse(payload.metadata);
+      if (Array.isArray(parsed)) {
+        metadata = parsed;
+      }
+    } catch (error) {
+      // Ignore metadata parse errors – it is optional.
+    }
+  }
+
+  return {
+    tag: typeof payload.tag === "string" ? payload.tag : "payRequest",
+    callback,
+    minSendable,
+    maxSendable,
+    metadata,
+    commentAllowed,
+    allowsNostr,
+    nostrPubkey,
+    raw: payload,
+  };
+}
+
+export function validateInvoiceAmount(metadata, amountSats) {
+  if (!metadata || typeof metadata !== "object") {
+    throw new Error("LNURL metadata is required to validate invoice amounts.");
+  }
+
+  const amount = Math.round(Number(amountSats));
+  if (!Number.isFinite(amount) || amount <= 0) {
+    throw new Error("Zap amount must be a positive integer.");
+  }
+
+  const amountMsats = amount * 1000;
+  const min = Math.max(0, Math.round(Number(metadata.minSendable || 0)));
+  const max = Math.max(min, Math.round(Number(metadata.maxSendable || amountMsats)));
+
+  if (min && amountMsats < min) {
+    throw new Error(`Amount is below the minimum sendable value (${min / 1000} sats).`);
+  }
+
+  if (max && amountMsats > max) {
+    throw new Error(`Amount exceeds the maximum sendable value (${max / 1000} sats).`);
+  }
+
+  return { amountMsats };
+}
+
+function truncateComment(comment, limit) {
+  const trimmed = typeof comment === "string" ? comment.trim() : "";
+  if (!limit || limit <= 0) {
+    return "";
+  }
+  if (trimmed.length <= limit) {
+    return trimmed;
+  }
+  return trimmed.slice(0, limit);
+}
+
+export async function requestInvoice(
+  metadata,
+  { amountSats, amountMsats, comment, zapRequest, fetcher } = {}
+) {
+  if (!metadata || typeof metadata !== "object") {
+    throw new Error("LNURL metadata is required to request an invoice.");
+  }
+
+  const fetchFn = ensureFetchFunction(fetcher);
+  const targetAmount = Number.isFinite(amountMsats)
+    ? Math.round(amountMsats)
+    : validateInvoiceAmount(metadata, amountSats).amountMsats;
+
+  const callbackUrl = new URL(metadata.callback);
+  callbackUrl.searchParams.set("amount", String(targetAmount));
+
+  if (comment && metadata.commentAllowed > 0) {
+    const truncated = truncateComment(comment, metadata.commentAllowed);
+    if (truncated) {
+      callbackUrl.searchParams.set("comment", truncated);
+    }
+  }
+
+  if (zapRequest) {
+    callbackUrl.searchParams.set("nostr", zapRequest);
+  }
+
+  const response = await fetchFn(callbackUrl.toString(), {
+    method: "GET",
+    headers: { Accept: "application/json" },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch LNURL invoice (${response.status}).`);
+  }
+
+  let payload;
+  try {
+    payload = await response.json();
+  } catch (error) {
+    throw new Error("LNURL invoice response was not JSON.");
+  }
+
+  if (!payload || typeof payload !== "object") {
+    throw new Error("LNURL invoice response was invalid.");
+  }
+
+  if (typeof payload.status === "string" && payload.status.toUpperCase() === "ERROR") {
+    const reason =
+      typeof payload.reason === "string" && payload.reason.trim()
+        ? payload.reason.trim()
+        : "LNURL invoice request failed.";
+    throw new Error(reason);
+  }
+
+  const invoice = typeof payload.pr === "string" ? payload.pr.trim() : "";
+  if (!invoice) {
+    throw new Error("LNURL endpoint did not return an invoice.");
+  }
+
+  return {
+    invoice,
+    raw: payload,
+  };
+}
+
+export const __TESTING__ = Object.freeze({
+  bech32Decode,
+  decodeLnurlBech32,
+  convertWords,
+});
diff --git a/js/payments/nwcClient.js b/js/payments/nwcClient.js
new file mode 100644
index 00000000..2774b5c3
--- /dev/null
+++ b/js/payments/nwcClient.js
@@ -0,0 +1,1130 @@
+// js/payments/nwcClient.js
+
+import { nostrToolsReady } from "../nostrToolsBootstrap.js";
+
+const HEX64_REGEX = /^[0-9a-f]{64}$/i;
+const URI_SCHEMES = [
+  "nostr+walletconnect://",
+  "walletconnect://",
+  "nwc://",
+];
+const INFO_KIND = 13194;
+const REQUEST_KIND = 23194;
+const RESPONSE_KIND = 23195;
+const DEFAULT_REQUEST_TIMEOUT_MS = 25_000;
+const INFO_REQUEST_TIMEOUT_MS = 7_500;
+
+let activeState = null;
+let pendingRequests = new Map();
+let pendingRequestsByPayloadId = new Map();
+let socket = null;
+let subscriptionId = null;
+let connectionPromise = null;
+let requestCounter = 0;
+let infoSubscriptionId = null;
+let infoRequestState = null;
+
+const globalScope =
+  typeof window !== "undefined"
+    ? window
+    : typeof globalThis !== "undefined"
+    ? globalThis
+    : null;
+
+const nostrToolsReadySource =
+  globalScope &&
+  globalScope.nostrToolsReady &&
+  typeof globalScope.nostrToolsReady.then === "function"
+    ? globalScope.nostrToolsReady
+    : nostrToolsReady;
+
+function normalizeToolkitCandidate(candidate) {
+  if (
+    candidate &&
+    typeof candidate === "object" &&
+    candidate.ok !== false &&
+    typeof candidate.then !== "function"
+  ) {
+    return candidate;
+  }
+  return null;
+}
+
+function readToolkitFromScope(scope = globalScope) {
+  if (!scope || typeof scope !== "object") {
+    return null;
+  }
+
+  const candidates = [];
+
+  const canonical = scope.__BITVID_CANONICAL_NOSTR_TOOLS__;
+  if (canonical) {
+    candidates.push(canonical);
+  }
+
+  const direct = scope.NostrTools;
+  if (direct) {
+    candidates.push(direct);
+  }
+
+  const nestedWindow =
+    scope.window && scope.window !== scope && typeof scope.window === "object"
+      ? scope.window
+      : null;
+  if (nestedWindow) {
+    if (nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__) {
+      candidates.push(nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__);
+    }
+    if (nestedWindow.NostrTools) {
+      candidates.push(nestedWindow.NostrTools);
+    }
+  }
+
+  for (const candidate of candidates) {
+    const normalized = normalizeToolkitCandidate(candidate);
+    if (normalized) {
+      return normalized;
+    }
+  }
+
+  return null;
+}
+
+const __nwcNostrToolsBootstrap = await (async () => {
+  try {
+    const result = await nostrToolsReadySource;
+    if (result && typeof result === "object" && result.ok === false) {
+      return {
+        toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+        failure: result,
+      };
+    }
+    const normalized = normalizeToolkitCandidate(result);
+    if (normalized) {
+      return { toolkit: normalized, failure: null };
+    }
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: null,
+    };
+  } catch (error) {
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: error,
+    };
+  }
+})();
+
+let cachedNostrTools = __nwcNostrToolsBootstrap.toolkit || null;
+const nostrToolsInitializationFailure = __nwcNostrToolsBootstrap.failure || null;
+
+if (!cachedNostrTools && nostrToolsInitializationFailure) {
+  console.warn(
+    "[nwcClient] nostr-tools helpers unavailable after bootstrap.",
+    nostrToolsInitializationFailure
+  );
+}
+
+function rememberNostrTools(candidate) {
+  const normalized = normalizeToolkitCandidate(candidate);
+  if (normalized) {
+    cachedNostrTools = normalized;
+  }
+}
+
+function getCachedNostrTools() {
+  const fallback = readToolkitFromScope();
+  if (cachedNostrTools && fallback && fallback !== cachedNostrTools) {
+    rememberNostrTools(fallback);
+  } else if (!cachedNostrTools && fallback) {
+    rememberNostrTools(fallback);
+  }
+  return cachedNostrTools || fallback || null;
+}
+
+async function ensureNostrTools() {
+  if (cachedNostrTools) {
+    return cachedNostrTools;
+  }
+  try {
+    const result = await nostrToolsReadySource;
+    rememberNostrTools(result);
+  } catch (error) {
+    console.warn("[nwcClient] Failed to resolve nostr-tools helpers.", error);
+  }
+  if (!cachedNostrTools) {
+    rememberNostrTools(readToolkitFromScope());
+  }
+  return cachedNostrTools || null;
+}
+
+function getGlobalWindow() {
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  return {};
+}
+
+function getNostrTools() {
+  const win = getGlobalWindow();
+  const tools = getCachedNostrTools();
+  if (tools?.nip04) {
+    return tools;
+  }
+  const canonical = win?.__BITVID_CANONICAL_NOSTR_TOOLS__ || null;
+  if (canonical && tools && !tools.nip04 && canonical.nip04) {
+    try {
+      tools.nip04 = canonical.nip04;
+      return tools;
+    } catch (error) {
+      return { ...canonical, ...tools, nip04: canonical.nip04 };
+    }
+  }
+  return tools || canonical || null;
+}
+
+function assertNostrTools(methods = []) {
+  const tools = getCachedNostrTools();
+  if (!tools) {
+    throw new Error("NostrTools is required for NWC operations.");
+  }
+  for (const method of methods) {
+    const candidate = tools?.[method];
+    const isCallable = typeof candidate === "function";
+    const isNamespace = candidate && typeof candidate === "object";
+    if (!isCallable && !isNamespace) {
+      try {
+        const available = Array.isArray(Object.keys(tools))
+          ? Object.keys(tools)
+          : [];
+        console.error(
+          "[nwcClient] Required NostrTools capability is missing.",
+          {
+            missingMethod: method,
+            availableMethods: available,
+          }
+        );
+      } catch (loggingError) {
+        console.error(
+          "[nwcClient] Failed to enumerate available NostrTools methods.",
+          loggingError
+        );
+      }
+      throw new Error(`NostrTools.${method} is unavailable.`);
+    }
+  }
+  return tools;
+}
+
+function decodePubkey(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  if (!trimmed) {
+    throw new Error("Wallet pubkey is missing from the NWC URI.");
+  }
+
+  if (HEX64_REGEX.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  const tools = getNostrTools();
+  const decoder = tools?.nip19?.decode;
+  if (typeof decoder === "function") {
+    try {
+      const decoded = decoder(trimmed);
+      if (decoded?.type === "npub" && typeof decoded.data === "string") {
+        const hex = decoded.data.trim();
+        if (HEX64_REGEX.test(hex)) {
+          return hex.toLowerCase();
+        }
+      }
+    } catch (error) {
+      // Ignore decode errors and fall through to failure.
+    }
+  }
+
+  throw new Error("Wallet pubkey in the NWC URI is invalid.");
+}
+
+function parseNwcUri(uri) {
+  const trimmed = typeof uri === "string" ? uri.trim() : "";
+  if (!trimmed) {
+    throw new Error("Wallet URI is required.");
+  }
+
+  let stripped = trimmed;
+  let scheme = "";
+  for (const candidate of URI_SCHEMES) {
+    if (trimmed.toLowerCase().startsWith(candidate)) {
+      stripped = trimmed.slice(candidate.length);
+      scheme = candidate;
+      break;
+    }
+  }
+
+  if (!scheme) {
+    throw new Error("Unsupported NWC URI scheme.");
+  }
+
+  const [identifierPart, queryPart] = stripped.split("?");
+  const walletPubkey = decodePubkey(identifierPart);
+
+  const params = new URLSearchParams(queryPart || "");
+  const relays = [];
+  const additionalParams = new Map();
+  let secret = "";
+
+  for (const [rawKey, rawValue] of params.entries()) {
+    const key = typeof rawKey === "string" ? rawKey.trim() : "";
+    const value = typeof rawValue === "string" ? rawValue.trim() : "";
+    if (!key || !value) {
+      continue;
+    }
+
+    const lowerKey = key.toLowerCase();
+    if (lowerKey === "relay" || lowerKey === "r") {
+      relays.push(value);
+      continue;
+    }
+
+    if (lowerKey === "secret" || lowerKey === "s") {
+      if (!secret) {
+        secret = value;
+      }
+      continue;
+    }
+
+    if (!additionalParams.has(key)) {
+      additionalParams.set(key, []);
+    }
+    additionalParams.get(key).push(value);
+  }
+
+  if (!relays.length) {
+    throw new Error("NWC URI is missing a relay parameter.");
+  }
+
+  if (!secret || !HEX64_REGEX.test(secret)) {
+    throw new Error("NWC URI secret must be a 64 character hex string.");
+  }
+
+  const normalizedParams = new URLSearchParams();
+  for (const relayUrl of relays) {
+    normalizedParams.append("relay", relayUrl);
+  }
+
+  const secretKey = secret.toLowerCase();
+  normalizedParams.set("secret", secretKey);
+
+  for (const [key, values] of additionalParams.entries()) {
+    for (const value of values) {
+      normalizedParams.append(key, value);
+    }
+  }
+
+  const tools = assertNostrTools(["getPublicKey"]);
+  const clientPubkey = tools.getPublicKey(secretKey);
+
+  const queryParams = {};
+  for (const [key, values] of additionalParams.entries()) {
+    if (!values || !values.length) {
+      continue;
+    }
+    if (values.length === 1) {
+      queryParams[key] = values[0];
+    } else {
+      queryParams[key] = values.slice();
+    }
+  }
+
+  return {
+    normalizedUri: `nostr+walletconnect://${walletPubkey}?${normalizedParams.toString()}`,
+    relays,
+    walletPubkey,
+    secretKey,
+    clientPubkey,
+    queryParams,
+  };
+}
+
+function normalizeSpaceSeparatedValues(value) {
+  if (typeof value !== "string") {
+    return [];
+  }
+  return value
+    .split(/\s+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function hexToBytesCompat(hex) {
+  const tools = getNostrTools();
+  const candidate = tools?.utils?.hexToBytes;
+  if (typeof candidate === "function") {
+    return candidate(hex);
+  }
+
+  const normalized = typeof hex === "string" ? hex.trim() : "";
+  if (!normalized || normalized.length % 2 !== 0) {
+    throw new Error("Invalid hex value provided for conversion.");
+  }
+
+  const bytes = new Uint8Array(normalized.length / 2);
+  for (let i = 0; i < normalized.length; i += 2) {
+    const byte = Number.parseInt(normalized.slice(i, i + 2), 16);
+    if (Number.isNaN(byte)) {
+      throw new Error("Invalid hex value provided for conversion.");
+    }
+    bytes[i / 2] = byte;
+  }
+  return bytes;
+}
+
+function createNip04Encryption(context) {
+  const tools = getNostrTools();
+  const nip04 = tools?.nip04 || null;
+  if (!nip04 || typeof nip04.encrypt !== "function" || typeof nip04.decrypt !== "function") {
+    return null;
+  }
+
+  return {
+    scheme: "nip04",
+    tagValue: "nip04",
+    async encrypt(plaintext) {
+      return nip04.encrypt(context.secretKey, context.walletPubkey, plaintext);
+    },
+    async decrypt(ciphertext) {
+      return nip04.decrypt(context.secretKey, context.walletPubkey, ciphertext);
+    },
+  };
+}
+
+function resolveNip44Exports(tools) {
+  const nip44 = tools?.nip44 || null;
+  if (!nip44 || typeof nip44 !== "object") {
+    return null;
+  }
+
+  const directEncrypt = typeof nip44.encrypt === "function" ? nip44.encrypt : null;
+  const directDecrypt = typeof nip44.decrypt === "function" ? nip44.decrypt : null;
+  const directGetKey = typeof nip44.getConversationKey === "function" ? nip44.getConversationKey : null;
+
+  const v2 = nip44.v2 && typeof nip44.v2 === "object" ? nip44.v2 : null;
+  const v2Encrypt = v2 && typeof v2.encrypt === "function" ? v2.encrypt : null;
+  const v2Decrypt = v2 && typeof v2.decrypt === "function" ? v2.decrypt : null;
+  const v2GetKey =
+    v2?.utils && typeof v2.utils.getConversationKey === "function"
+      ? v2.utils.getConversationKey
+      : null;
+
+  const utilsGetKey =
+    nip44.utils && typeof nip44.utils.getConversationKey === "function"
+      ? nip44.utils.getConversationKey
+      : null;
+
+  const encrypt = directEncrypt || v2Encrypt || null;
+  const decrypt = directDecrypt || v2Decrypt || null;
+  const getConversationKey = directGetKey || v2GetKey || utilsGetKey || null;
+
+  if (!encrypt || !decrypt || !getConversationKey) {
+    return null;
+  }
+
+  return {
+    encrypt,
+    decrypt,
+    getConversationKey,
+  };
+}
+
+function createNip44Encryption(context) {
+  const tools = getNostrTools();
+  const resolved = resolveNip44Exports(tools);
+  if (!resolved) {
+    return null;
+  }
+
+  let cachedKey = null;
+
+  const getKey = () => {
+    if (!cachedKey) {
+      try {
+        const secretBytes = hexToBytesCompat(context.secretKey);
+        cachedKey = resolved.getConversationKey(secretBytes, context.walletPubkey);
+      } catch (error) {
+        console.warn("[nwcClient] Failed to derive nip44 conversation key", error);
+        throw error;
+      }
+    }
+    return cachedKey;
+  };
+
+  return {
+    scheme: "nip44_v2",
+    tagValue: "nip44_v2",
+    async encrypt(plaintext) {
+      return resolved.encrypt(plaintext, getKey());
+    },
+    async decrypt(ciphertext) {
+      return resolved.decrypt(ciphertext, getKey());
+    },
+  };
+}
+
+function getWalletSupportedEncryption(infoEvent) {
+  if (!infoEvent || !Array.isArray(infoEvent.tags)) {
+    return { schemes: [], explicit: false };
+  }
+
+  const tag = infoEvent.tags.find((entry) => Array.isArray(entry) && entry[0] === "encryption");
+  if (!tag || typeof tag[1] !== "string") {
+    return { schemes: [], explicit: false };
+  }
+
+  const values = normalizeSpaceSeparatedValues(tag[1]);
+  if (!values.length) {
+    return { schemes: [], explicit: false };
+  }
+
+  const schemes = Array.from(new Set(values));
+  return { schemes, explicit: true };
+}
+
+function getEncryptionCandidates(context) {
+  const candidates = [];
+  const nip44 = createNip44Encryption(context);
+  if (nip44) {
+    candidates.push(nip44);
+  }
+  const nip04 = createNip04Encryption(context);
+  if (nip04) {
+    candidates.push(nip04);
+  }
+  return candidates;
+}
+
+function settleInfoRequest(result) {
+  if (!infoRequestState) {
+    return;
+  }
+
+  const resolver = typeof infoRequestState.resolve === "function" ? infoRequestState.resolve : null;
+  try {
+    if (infoRequestState.timeoutId) {
+      clearTimeout(infoRequestState.timeoutId);
+    }
+  } catch (error) {
+    // ignore
+  }
+
+  closeInfoSubscription();
+  infoRequestState = null;
+  infoSubscriptionId = null;
+
+  if (resolver) {
+    try {
+      resolver(result || null);
+    } catch (error) {
+      console.warn("[nwcClient] Failed to resolve wallet info request", error);
+    }
+  }
+}
+
+function requestInfoEvent(context) {
+  if (!context) {
+    return Promise.resolve(null);
+  }
+
+  if (context.infoEvent) {
+    return Promise.resolve(context.infoEvent);
+  }
+
+  if (infoRequestState?.promise) {
+    return infoRequestState.promise;
+  }
+
+  if (!socket || socket.readyState !== socket.OPEN) {
+    return Promise.resolve(null);
+  }
+
+  infoSubscriptionId = `nwc-info-${Math.random().toString(36).slice(2, 10)}`;
+  const filters = {
+    kinds: [INFO_KIND],
+    authors: [context.walletPubkey],
+    limit: 1,
+  };
+
+  const promise = new Promise((resolve) => {
+    infoRequestState = {
+      resolve,
+      timeoutId: setTimeout(() => {
+        settleInfoRequest(null);
+      }, INFO_REQUEST_TIMEOUT_MS),
+      promise: null,
+    };
+  });
+
+  infoRequestState.promise = promise;
+
+  try {
+    socket.send(JSON.stringify(["REQ", infoSubscriptionId, filters]));
+  } catch (error) {
+    console.warn("[nwcClient] Failed to request wallet info event", error);
+    settleInfoRequest(null);
+    return Promise.resolve(null);
+  }
+
+  return promise;
+}
+
+function ensureEncryptionState(context) {
+  if (!context.encryptionState || typeof context.encryptionState !== "object") {
+    context.encryptionState = { unsupported: new Set() };
+    return context.encryptionState;
+  }
+
+  if (!(context.encryptionState.unsupported instanceof Set)) {
+    context.encryptionState.unsupported = new Set();
+  }
+
+  return context.encryptionState;
+}
+
+function rememberUnsupportedEncryption(context, scheme) {
+  if (!context || !scheme) {
+    return;
+  }
+  const state = ensureEncryptionState(context);
+  state.unsupported.add(scheme);
+  if (context.encryption && context.encryption.scheme === scheme) {
+    context.encryption = null;
+  }
+}
+
+async function ensureEncryption(context) {
+  if (!context || typeof context !== "object") {
+    throw new Error("Wallet context is unavailable for encryption.");
+  }
+
+  if (context.encryption && typeof context.encryption.encrypt === "function") {
+    return context.encryption;
+  }
+
+  const state = ensureEncryptionState(context);
+
+  let infoEvent = context.infoEvent || null;
+  if (!infoEvent) {
+    try {
+      infoEvent = await requestInfoEvent(context);
+    } catch (error) {
+      console.warn("[nwcClient] Failed to load wallet info event", error);
+    }
+    if (infoEvent) {
+      context.infoEvent = infoEvent;
+    }
+  }
+
+  const { schemes: walletSchemes } = getWalletSupportedEncryption(infoEvent);
+  const candidates = getEncryptionCandidates(context).filter((candidate) => {
+    return !state.unsupported.has(candidate.scheme);
+  });
+
+  const compatibleCandidates = walletSchemes.length
+    ? candidates.filter((candidate) => walletSchemes.includes(candidate.scheme))
+    : candidates;
+
+  if (compatibleCandidates.length) {
+    const selected = compatibleCandidates[0];
+    context.encryption = selected;
+    return selected;
+  }
+
+  if (
+    walletSchemes.includes("nip04") &&
+    !candidates.some((candidate) => candidate.scheme === "nip04")
+  ) {
+    throw new Error("NostrTools.nip04.encrypt is not available.");
+  }
+
+  if (walletSchemes.length) {
+    const message = `Wallet advertises unsupported encryption schemes: ${walletSchemes.join(", ")}.`;
+    const error = new Error(message);
+    error.code = "UNSUPPORTED_ENCRYPTION";
+    throw error;
+  }
+
+  throw new Error("No compatible wallet encryption scheme available.");
+}
+
+function finalizePendingRequest(entry) {
+  if (!entry || typeof entry !== "object") {
+    return;
+  }
+
+  if (entry.timeoutId) {
+    clearTimeout(entry.timeoutId);
+  }
+
+  if (entry.eventId && pendingRequests.get(entry.eventId) === entry) {
+    pendingRequests.delete(entry.eventId);
+  }
+
+  if (entry.payloadId) {
+    const stored = pendingRequestsByPayloadId.get(entry.payloadId);
+    if (stored === entry) {
+      pendingRequestsByPayloadId.delete(entry.payloadId);
+    }
+  }
+}
+
+function closeInfoSubscription() {
+  if (infoSubscriptionId && socket && socket.readyState === socket.OPEN) {
+    try {
+      socket.send(JSON.stringify(["CLOSE", infoSubscriptionId]));
+    } catch (error) {
+      // ignore
+    }
+  }
+}
+
+function resetInfoRequestState() {
+  if (infoRequestState) {
+    settleInfoRequest(null);
+    return;
+  }
+  infoSubscriptionId = null;
+}
+
+function closeSocket({ keepState = false } = {}) {
+  if (socket) {
+    try {
+      socket.close();
+    } catch (error) {
+      // Ignore close errors.
+    }
+  }
+  socket = null;
+  connectionPromise = null;
+  subscriptionId = null;
+  resetInfoRequestState();
+
+  if (!keepState) {
+    activeState = null;
+  }
+
+  const pendingEntries = Array.from(pendingRequests.values());
+  pendingRequests.clear();
+  pendingRequestsByPayloadId.clear();
+
+  for (const entry of pendingEntries) {
+    try {
+      if (entry.timeoutId) {
+        clearTimeout(entry.timeoutId);
+      }
+      entry.reject(new Error("Wallet connection closed."));
+    } catch (error) {
+      // ignore
+    }
+  }
+}
+
+function isSocketOpen() {
+  return socket && socket.readyState === socket.OPEN;
+}
+
+function handleSocketError(error) {
+  console.warn("[nwcClient] WebSocket error", error);
+  closeSocket({ keepState: true });
+}
+
+function handleSocketClose() {
+  console.warn("[nwcClient] Wallet connection closed.");
+  closeSocket({ keepState: true });
+}
+
+function resolveWebSocketImplementation() {
+  if (typeof WebSocket !== "undefined") {
+    return WebSocket;
+  }
+  if (typeof globalThis !== "undefined" && typeof globalThis.WebSocket !== "undefined") {
+    return globalThis.WebSocket;
+  }
+  throw new Error("WebSocket is not available in this environment.");
+}
+
+function subscribeToResponses(context) {
+  if (!socket) {
+    return;
+  }
+  subscriptionId = `nwc-${Math.random().toString(36).slice(2, 10)}`;
+  const filters = {
+    kinds: [RESPONSE_KIND],
+    authors: [context.walletPubkey],
+    "#p": [context.clientPubkey],
+  };
+  socket.send(JSON.stringify(["REQ", subscriptionId, filters]));
+}
+
+async function decryptResponse(event) {
+  const context = activeState?.context;
+  if (!context) {
+    throw new Error("Wallet context is unavailable for decrypting responses.");
+  }
+  const encryption = await ensureEncryption(context);
+  const plaintext = await encryption.decrypt(event.content);
+  return JSON.parse(plaintext);
+}
+
+async function handleSocketMessage(messageEvent) {
+  let payload;
+  try {
+    payload = JSON.parse(messageEvent.data);
+  } catch (error) {
+    console.warn("[nwcClient] Failed to parse relay message", error);
+    return;
+  }
+
+  if (!Array.isArray(payload) || payload.length < 2) {
+    return;
+  }
+
+  const [type, subscription] = payload;
+  if (type === "EVENT" && payload.length >= 3) {
+    const event = payload[2];
+
+    if (subscription && subscription === infoSubscriptionId && event?.kind === INFO_KIND) {
+      settleInfoRequest(event);
+      return;
+    }
+
+    if (subscription !== subscriptionId || event?.kind !== RESPONSE_KIND || !Array.isArray(event.tags)) {
+      return;
+    }
+
+    const eTag = event.tags.find((tag) => Array.isArray(tag) && tag[0] === "e");
+    const requestId = typeof eTag?.[1] === "string" ? eTag[1] : null;
+    let pending = requestId ? pendingRequests.get(requestId) || null : null;
+
+    let response;
+    try {
+      response = await decryptResponse(event);
+    } catch (error) {
+      if (pending) {
+        finalizePendingRequest(pending);
+        pending.reject(error);
+      } else {
+        console.warn("[nwcClient] Failed to decrypt wallet response", error);
+      }
+      return;
+    }
+
+    if (!pending) {
+      const payloadId =
+        typeof response?.id === "string" && response.id.trim() ? response.id.trim() : null;
+      if (payloadId) {
+        pending = pendingRequestsByPayloadId.get(payloadId) || null;
+      }
+    }
+
+    if (!pending) {
+      return;
+    }
+
+    finalizePendingRequest(pending);
+
+    if (response?.error) {
+      const message =
+        typeof response.error.message === "string" && response.error.message.trim()
+          ? response.error.message.trim()
+          : "Wallet reported an error.";
+      const error = new Error(message);
+      error.code = response.error.code || null;
+      pending.reject(error);
+      return;
+    }
+
+    pending.resolve({
+      requestId: pending.eventId || requestId || null,
+      result: response?.result || null,
+      response,
+      event,
+    });
+    return;
+  }
+
+  if (type === "EOSE" && subscription === infoSubscriptionId) {
+    settleInfoRequest(null);
+    return;
+  }
+
+  if (type === "NOTICE" && payload.length >= 2) {
+    console.warn("[nwcClient] Relay notice:", payload[1]);
+    return;
+  }
+}
+
+function connectSocket(context) {
+  if (connectionPromise) {
+    return connectionPromise;
+  }
+
+  const WebSocketImpl = resolveWebSocketImplementation();
+  const url = context.relayUrl;
+
+  connectionPromise = new Promise((resolve, reject) => {
+    try {
+      socket = new WebSocketImpl(url);
+    } catch (error) {
+      connectionPromise = null;
+      reject(new Error("Failed to open wallet WebSocket."));
+      return;
+    }
+
+    const handleOpen = () => {
+      socket.removeEventListener("open", handleOpen);
+      socket.removeEventListener("error", handleError);
+      socket.removeEventListener("close", handleCloseDuringConnect);
+      socket.addEventListener("message", handleSocketMessage);
+      socket.addEventListener("error", handleSocketError);
+      socket.addEventListener("close", handleSocketClose);
+      subscribeToResponses(context);
+      resolve();
+    };
+
+    const handleError = (event) => {
+      socket.removeEventListener("open", handleOpen);
+      socket.removeEventListener("error", handleError);
+      socket.removeEventListener("close", handleCloseDuringConnect);
+      connectionPromise = null;
+      reject(event instanceof Error ? event : new Error("Wallet WebSocket failed."));
+    };
+
+    const handleCloseDuringConnect = () => {
+      socket.removeEventListener("open", handleOpen);
+      socket.removeEventListener("error", handleError);
+      socket.removeEventListener("close", handleCloseDuringConnect);
+      connectionPromise = null;
+      reject(new Error("Wallet WebSocket closed before opening."));
+    };
+
+    socket.addEventListener("open", handleOpen);
+    socket.addEventListener("error", handleError);
+    socket.addEventListener("close", handleCloseDuringConnect);
+  });
+
+  return connectionPromise;
+}
+
+function ensureActiveState(settings) {
+  if (!settings || typeof settings !== "object") {
+    throw new Error("Wallet settings are required.");
+  }
+
+  const uri =
+    typeof settings.nwcUri === "string" && settings.nwcUri.trim()
+      ? settings.nwcUri.trim()
+      : "";
+  if (!uri) {
+    throw new Error("Wallet URI is required.");
+  }
+
+  const parsed = parseNwcUri(uri);
+  if (activeState && activeState.normalizedUri === parsed.normalizedUri) {
+    activeState.settings = { ...settings, nwcUri: parsed.normalizedUri };
+    if (activeState.context) {
+      activeState.context.relayUrl = parsed.relays[0];
+      activeState.context.relayUrls = parsed.relays.slice();
+      activeState.context.relays = parsed.relays.slice();
+      activeState.context.queryParams = parsed.queryParams;
+    }
+    return activeState.context;
+  }
+
+  closeSocket();
+
+  activeState = {
+    normalizedUri: parsed.normalizedUri,
+    settings: { ...settings, nwcUri: parsed.normalizedUri },
+    context: {
+      relayUrl: parsed.relays[0],
+      relayUrls: parsed.relays.slice(),
+      relays: parsed.relays.slice(),
+      walletPubkey: parsed.walletPubkey,
+      secretKey: parsed.secretKey,
+      clientPubkey: parsed.clientPubkey,
+      uri: parsed.normalizedUri,
+      queryParams: parsed.queryParams,
+      infoEvent: null,
+      encryption: null,
+      encryptionState: { unsupported: new Set() },
+    },
+  };
+
+  pendingRequests = new Map();
+  pendingRequestsByPayloadId = new Map();
+  return activeState.context;
+}
+
+export async function ensureWallet({ settings } = {}) {
+  const candidateSettings =
+    settings || activeState?.settings || activeState?.context?.settings || null;
+
+  const context = ensureActiveState(candidateSettings);
+
+  if (!isSocketOpen()) {
+    await connectSocket(context);
+  }
+
+  await ensureEncryption(context);
+
+  return context;
+}
+
+async function encryptRequestPayload(context, payload) {
+  const tools = assertNostrTools(["getEventHash", "signEvent"]);
+  const encryption = await ensureEncryption(context);
+
+  const plaintext = JSON.stringify(payload);
+  const encrypted = await encryption.encrypt(plaintext);
+
+  const tags = [["p", context.walletPubkey]];
+  if (encryption?.tagValue) {
+    tags.push(["encryption", encryption.tagValue]);
+  }
+
+  const event = {
+    kind: REQUEST_KIND,
+    created_at: Math.floor(Date.now() / 1000),
+    content: encrypted,
+    pubkey: context.clientPubkey,
+    tags,
+  };
+
+  event.id = tools.getEventHash(event);
+  event.sig = tools.signEvent(event, context.secretKey);
+
+  return event;
+}
+
+function registerPendingRequest(eventId, payloadId, { resolve, reject, timeoutMs }) {
+  const entry = {
+    eventId,
+    payloadId: typeof payloadId === "string" ? payloadId : null,
+    resolve,
+    reject,
+    timeoutId: null,
+  };
+
+  entry.timeoutId = setTimeout(() => {
+    const existing = pendingRequests.get(eventId);
+    if (existing === entry) {
+      finalizePendingRequest(entry);
+      reject(new Error("Wallet request timed out."));
+    }
+  }, timeoutMs || DEFAULT_REQUEST_TIMEOUT_MS);
+
+  pendingRequests.set(eventId, entry);
+  if (entry.payloadId) {
+    pendingRequestsByPayloadId.set(entry.payloadId, entry);
+  }
+}
+
+async function dispatchWalletRequest(context, payload, { timeoutMs } = {}) {
+  if (!isSocketOpen()) {
+    await connectSocket(context);
+  }
+
+  const event = await encryptRequestPayload(context, payload);
+
+  const promise = new Promise((resolve, reject) => {
+    registerPendingRequest(event.id, payload?.id || null, { resolve, reject, timeoutMs });
+  });
+
+  socket.send(JSON.stringify(["EVENT", event]));
+  return promise;
+}
+
+async function sendWalletRequest(context, payload, { timeoutMs, __internalRetry = false } = {}) {
+  try {
+    return await dispatchWalletRequest(context, payload, { timeoutMs });
+  } catch (error) {
+    const encryption = context?.encryption || null;
+    if (
+      !__internalRetry &&
+      encryption &&
+      error &&
+      typeof error === "object" &&
+      (error.code === "UNSUPPORTED_ENCRYPTION" || error.code === "unsupported_encryption")
+    ) {
+      rememberUnsupportedEncryption(context, encryption.scheme);
+      context.encryption = null;
+      return sendWalletRequest(context, payload, { timeoutMs, __internalRetry: true });
+    }
+    throw error;
+  }
+}
+
+function sanitizeInvoice(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  if (!trimmed) {
+    throw new Error("Invoice is required to send a payment.");
+  }
+  return trimmed;
+}
+
+function sanitizeAmount(amount) {
+  if (!Number.isFinite(amount)) {
+    return null;
+  }
+  const rounded = Math.round(amount);
+  return Math.max(0, rounded);
+}
+
+function buildPayInvoiceParams({ invoice, amountSats, zapRequest }) {
+  const params = { invoice };
+
+  const amount = sanitizeAmount(amountSats);
+  if (amount && amount > 0) {
+    params.amount = amount * 1000;
+  }
+
+  if (zapRequest) {
+    params.zap_request = zapRequest;
+  }
+
+  return params;
+}
+
+export async function sendPayment(bolt11, { settings, amountSats, zapRequest, timeoutMs } = {}) {
+  const context = await ensureWallet({ settings });
+  const invoice = sanitizeInvoice(bolt11);
+  const params = buildPayInvoiceParams({ invoice, amountSats, zapRequest });
+  const payload = {
+    id: `req-${Date.now()}-${++requestCounter}`,
+    method: "pay_invoice",
+    params,
+  };
+
+  const response = await sendWalletRequest(context, payload, { timeoutMs });
+  return response;
+}
+
+export function getActiveWalletContext() {
+  return activeState?.context || null;
+}
+
+export function resetWalletClient() {
+  closeSocket();
+}
+
+export const __TESTING__ = Object.freeze({
+  parseNwcUri,
+  closeSocket,
+  pendingRequests,
+  ensureActiveState,
+  buildPayInvoiceParams,
+  getActiveState: () => activeState,
+  ensureEncryptionForContext: ensureEncryption,
+});
diff --git a/js/payments/platformAddress.js b/js/payments/platformAddress.js
new file mode 100644
index 00000000..cb1f35a3
--- /dev/null
+++ b/js/payments/platformAddress.js
@@ -0,0 +1,325 @@
+// js/payments/platformAddress.js
+
+import { PLATFORM_LUD16_OVERRIDE, ADMIN_SUPER_NPUB } from "../config.js";
+import { nostrClient } from "../nostr.js";
+import { setProfileCacheEntry } from "../state/cache.js";
+import { nostrToolsReady } from "../nostrToolsBootstrap.js";
+
+const HEX64_REGEX = /^[0-9a-f]{64}$/i;
+const CACHE_TTL_MS = 10 * 60 * 1000;
+
+let cachedAddress = null;
+
+const globalScope =
+  typeof window !== "undefined"
+    ? window
+    : typeof globalThis !== "undefined"
+    ? globalThis
+    : null;
+
+const nostrToolsReadySource =
+  globalScope &&
+  globalScope.nostrToolsReady &&
+  typeof globalScope.nostrToolsReady.then === "function"
+    ? globalScope.nostrToolsReady
+    : nostrToolsReady;
+
+function normalizeToolkitCandidate(candidate) {
+  if (
+    candidate &&
+    typeof candidate === "object" &&
+    candidate.ok !== false &&
+    typeof candidate.then !== "function"
+  ) {
+    return candidate;
+  }
+  return null;
+}
+
+function readToolkitFromScope(scope = globalScope) {
+  if (!scope || typeof scope !== "object") {
+    return null;
+  }
+
+  const candidates = [];
+
+  const canonical = scope.__BITVID_CANONICAL_NOSTR_TOOLS__;
+  if (canonical) {
+    candidates.push(canonical);
+  }
+
+  const direct = scope.NostrTools;
+  if (direct) {
+    candidates.push(direct);
+  }
+
+  const nestedWindow =
+    scope.window && scope.window !== scope && typeof scope.window === "object"
+      ? scope.window
+      : null;
+  if (nestedWindow) {
+    if (nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__) {
+      candidates.push(nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__);
+    }
+    if (nestedWindow.NostrTools) {
+      candidates.push(nestedWindow.NostrTools);
+    }
+  }
+
+  for (const candidate of candidates) {
+    const normalized = normalizeToolkitCandidate(candidate);
+    if (normalized) {
+      return normalized;
+    }
+  }
+
+  return null;
+}
+
+const __platformNostrToolsBootstrap = await (async () => {
+  try {
+    const result = await nostrToolsReadySource;
+    if (result && typeof result === "object" && result.ok === false) {
+      return {
+        toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+        failure: result,
+      };
+    }
+    const normalized = normalizeToolkitCandidate(result);
+    if (normalized) {
+      return { toolkit: normalized, failure: null };
+    }
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: null,
+    };
+  } catch (error) {
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: error,
+    };
+  }
+})();
+
+let cachedNostrTools = __platformNostrToolsBootstrap.toolkit || null;
+const nostrToolsInitializationFailure =
+  __platformNostrToolsBootstrap.failure || null;
+
+if (!cachedNostrTools && nostrToolsInitializationFailure) {
+  console.warn(
+    "[platformAddress] nostr-tools helpers unavailable after bootstrap.",
+    nostrToolsInitializationFailure
+  );
+}
+
+function rememberNostrTools(candidate) {
+  const normalized = normalizeToolkitCandidate(candidate);
+  if (normalized) {
+    cachedNostrTools = normalized;
+  }
+}
+
+function getCachedNostrTools() {
+  const fallback = readToolkitFromScope();
+  if (cachedNostrTools && fallback && fallback !== cachedNostrTools) {
+    rememberNostrTools(fallback);
+  } else if (!cachedNostrTools && fallback) {
+    rememberNostrTools(fallback);
+  }
+  return cachedNostrTools || fallback || null;
+}
+
+async function ensureNostrTools() {
+  if (cachedNostrTools) {
+    return cachedNostrTools;
+  }
+  try {
+    const result = await nostrToolsReadySource;
+    rememberNostrTools(result);
+  } catch (error) {
+    console.warn(
+      "[platformAddress] Failed to resolve nostr-tools helpers.",
+      error
+    );
+  }
+  if (!cachedNostrTools) {
+    rememberNostrTools(readToolkitFromScope());
+  }
+  return cachedNostrTools || null;
+}
+
+function getGlobalWindow() {
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  return {};
+}
+
+function getNostrTools() {
+  const win = getGlobalWindow();
+  const tools = getCachedNostrTools();
+  if (tools?.nip04) {
+    return tools;
+  }
+  const canonical = win?.__BITVID_CANONICAL_NOSTR_TOOLS__ || null;
+  if (canonical && tools && !tools.nip04 && canonical.nip04) {
+    try {
+      tools.nip04 = canonical.nip04;
+      return tools;
+    } catch (error) {
+      return { ...canonical, ...tools, nip04: canonical.nip04 };
+    }
+  }
+  return tools || canonical || null;
+}
+
+function decodeAdminPubkey() {
+  const trimmed = typeof ADMIN_SUPER_NPUB === "string" ? ADMIN_SUPER_NPUB.trim() : "";
+  if (!trimmed) {
+    return null;
+  }
+
+  if (HEX64_REGEX.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  const tools = getNostrTools();
+  const decoder = tools?.nip19?.decode;
+  if (typeof decoder === "function") {
+    try {
+      const decoded = decoder(trimmed);
+      if (decoded?.type === "npub" && typeof decoded.data === "string") {
+        const hex = decoded.data.trim();
+        if (HEX64_REGEX.test(hex)) {
+          return hex.toLowerCase();
+        }
+      }
+    } catch (error) {
+      console.warn("[platformAddress] Failed to decode ADMIN_SUPER_NPUB", error);
+    }
+  }
+
+  return null;
+}
+
+function shouldUseOverride() {
+  return typeof PLATFORM_LUD16_OVERRIDE === "string" && PLATFORM_LUD16_OVERRIDE.trim();
+}
+
+function getOverrideAddress() {
+  const trimmed = PLATFORM_LUD16_OVERRIDE.trim();
+  return trimmed || null;
+}
+
+function isCacheFresh(entry) {
+  if (!entry) {
+    return false;
+  }
+  if (typeof entry.expiresAt !== "number") {
+    return false;
+  }
+  return entry.expiresAt > Date.now();
+}
+
+async function fetchAdminMetadata(adminPubkey) {
+  if (!adminPubkey) {
+    return null;
+  }
+
+  let pool;
+  try {
+    pool = await nostrClient.ensurePool();
+  } catch (error) {
+    console.warn("[platformAddress] Failed to initialize Nostr pool", error);
+    return null;
+  }
+
+  if (!pool) {
+    return null;
+  }
+
+  const relayUrls = Array.isArray(nostrClient?.relays)
+    ? nostrClient.relays
+    : [];
+  if (relayUrls.length === 0) {
+    console.warn("[platformAddress] Nostr client is not ready.");
+    return null;
+  }
+
+  try {
+    const events = await pool.list(relayUrls, [
+      { kinds: [0], authors: [adminPubkey], limit: 1 },
+    ]);
+
+    if (!Array.isArray(events) || events.length === 0) {
+      return null;
+    }
+
+    let newest = null;
+    for (const event of events) {
+      if (!event || event.pubkey !== adminPubkey || !event.content) {
+        continue;
+      }
+      if (!newest || event.created_at > newest.created_at) {
+        newest = event;
+      }
+    }
+
+    if (!newest?.content) {
+      return null;
+    }
+
+    const data = JSON.parse(newest.content);
+    const lightningAddress =
+      typeof data.lud16 === "string" && data.lud16.trim()
+        ? data.lud16.trim()
+        : typeof data.lud06 === "string" && data.lud06.trim()
+        ? data.lud06.trim()
+        : "";
+
+    if (lightningAddress) {
+      setProfileCacheEntry(adminPubkey, data, { persist: false });
+    }
+
+    return lightningAddress || null;
+  } catch (error) {
+    console.warn("[platformAddress] Failed to fetch admin metadata", error);
+    return null;
+  }
+}
+
+export async function getPlatformLightningAddress({ forceRefresh = false } = {}) {
+  if (shouldUseOverride()) {
+    return getOverrideAddress();
+  }
+
+  if (!forceRefresh && isCacheFresh(cachedAddress)) {
+    return cachedAddress.value;
+  }
+
+  const adminPubkey = decodeAdminPubkey();
+  if (!adminPubkey) {
+    return null;
+  }
+
+  if (forceRefresh !== true && cachedAddress?.value) {
+    return cachedAddress.value;
+  }
+
+  const lightningAddress = await fetchAdminMetadata(adminPubkey);
+  if (lightningAddress) {
+    cachedAddress = {
+      value: lightningAddress,
+      expiresAt: Date.now() + CACHE_TTL_MS,
+    };
+  }
+
+  return lightningAddress || cachedAddress?.value || null;
+}
+
+export function __resetPlatformAddressCache() {
+  cachedAddress = null;
+}
diff --git a/js/payments/platformFee.js b/js/payments/platformFee.js
new file mode 100644
index 00000000..c448b15a
--- /dev/null
+++ b/js/payments/platformFee.js
@@ -0,0 +1,74 @@
+// js/payments/platformFee.js
+
+import { PLATFORM_FEE_PERCENT } from "../config.js";
+
+export function parsePercentValue(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : NaN;
+  }
+
+  if (typeof value === "bigint") {
+    return Number(value);
+  }
+
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return NaN;
+    }
+
+    if (trimmed.includes("/")) {
+      const [firstRaw, secondRaw] = trimmed.split("/").map((part) => part.trim());
+      if (firstRaw && secondRaw) {
+        const first = Number(firstRaw);
+        const second = Number(secondRaw);
+        if (Number.isFinite(first) && Number.isFinite(second) && first >= 0 && second >= 0) {
+          const total = first + second;
+          if (total > 0) {
+            return (second / total) * 100;
+          }
+        }
+      }
+    }
+
+    const percentStripped = trimmed.endsWith("%") ? trimmed.slice(0, -1).trim() : trimmed;
+    const directNumeric = Number(percentStripped);
+    if (Number.isFinite(directNumeric)) {
+      return directNumeric;
+    }
+
+    const match = percentStripped.match(/-?\d+(?:\.\d+)?/);
+    if (match) {
+      const fallback = Number(match[0]);
+      return Number.isFinite(fallback) ? fallback : NaN;
+    }
+
+    return NaN;
+  }
+
+  return Number.isFinite(value) ? Number(value) : NaN;
+}
+
+export function clampPercent(value) {
+  const numeric = parsePercentValue(value);
+  if (!Number.isFinite(numeric)) {
+    return 0;
+  }
+  return Math.min(100, Math.max(0, numeric));
+}
+
+export function getDefaultPlatformFeePercent() {
+  const parsed = parsePercentValue(PLATFORM_FEE_PERCENT);
+  if (!Number.isFinite(parsed)) {
+    return 0;
+  }
+  return clampPercent(parsed);
+}
+
+export function resolvePlatformFeePercent(overrideValue) {
+  const parsedOverride = parsePercentValue(overrideValue);
+  if (Number.isFinite(parsedOverride)) {
+    return clampPercent(parsedOverride);
+  }
+  return getDefaultPlatformFeePercent();
+}
diff --git a/js/payments/zapSharedState.js b/js/payments/zapSharedState.js
new file mode 100644
index 00000000..21cc7746
--- /dev/null
+++ b/js/payments/zapSharedState.js
@@ -0,0 +1,164 @@
+import { resolvePlatformFeePercent } from "./platformFee.js";
+import {
+  resolveLightningAddress as defaultResolveLightningAddress,
+  fetchPayServiceData as defaultFetchPayServiceData,
+  validateInvoiceAmount,
+} from "./lnurl.js";
+
+const METADATA_CACHE_TTL_MS = 5 * 60 * 1000;
+
+const lightningMetadataCache = new Map();
+const lightningMetadataByUrl = new Map();
+let cachedPlatformLightningAddress = "";
+
+export function normalizeLightningAddressKey(address) {
+  return typeof address === "string" ? address.trim().toLowerCase() : "";
+}
+
+export function isMetadataEntryFresh(entry) {
+  if (!entry || typeof entry.fetchedAt !== "number") {
+    return false;
+  }
+  return Date.now() - entry.fetchedAt < METADATA_CACHE_TTL_MS;
+}
+
+export function rememberLightningMetadata(entry) {
+  if (!entry || !entry.key) {
+    return entry;
+  }
+  lightningMetadataCache.set(entry.key, entry);
+  if (entry.resolved?.url) {
+    lightningMetadataByUrl.set(entry.resolved.url, entry);
+  }
+  return entry;
+}
+
+export function getCachedLightningEntry(address) {
+  const key = normalizeLightningAddressKey(address);
+  if (!key) {
+    return null;
+  }
+  const entry = lightningMetadataCache.get(key);
+  if (!entry) {
+    return null;
+  }
+  if (entry.metadata && isMetadataEntryFresh(entry)) {
+    return entry;
+  }
+  if (entry.metadata && !entry.promise) {
+    return entry;
+  }
+  return entry.metadata ? entry : null;
+}
+
+export function getCachedMetadataByUrl(url) {
+  if (!url) {
+    return null;
+  }
+  return lightningMetadataByUrl.get(url) || null;
+}
+
+export async function fetchLightningMetadata(
+  address,
+  {
+    resolveLightningAddress = defaultResolveLightningAddress,
+    fetchPayServiceData = defaultFetchPayServiceData,
+  } = {}
+) {
+  const key = normalizeLightningAddressKey(address);
+  if (!key) {
+    throw new Error("Lightning address is required.");
+  }
+
+  const cached = lightningMetadataCache.get(key);
+  if (cached && cached.metadata && isMetadataEntryFresh(cached)) {
+    return cached;
+  }
+
+  if (cached?.promise) {
+    return cached.promise;
+  }
+
+  const fetchPromise = (async () => {
+    const resolved = cached?.resolved || (await resolveLightningAddress(address));
+    const metadata = await fetchPayServiceData(resolved.url);
+    const entry = {
+      key,
+      address: resolved.address || address,
+      resolved,
+      metadata,
+      fetchedAt: Date.now(),
+    };
+    rememberLightningMetadata(entry);
+    return entry;
+  })();
+
+  lightningMetadataCache.set(key, {
+    ...(cached || {}),
+    key,
+    promise: fetchPromise,
+  });
+
+  try {
+    return await fetchPromise;
+  } catch (error) {
+    const current = lightningMetadataCache.get(key);
+    if (current?.promise === fetchPromise) {
+      lightningMetadataCache.delete(key);
+    }
+    throw error;
+  }
+}
+
+export function calculateZapShares(amount, overrideFee = null) {
+  const numericAmount = Math.max(0, Math.round(Number(amount) || 0));
+  const feePercent = resolvePlatformFeePercent(
+    typeof overrideFee === "undefined" ? null : overrideFee
+  );
+  const platformShare = Math.floor((numericAmount * feePercent) / 100);
+  const creatorShare = numericAmount - platformShare;
+  return {
+    total: numericAmount,
+    creatorShare,
+    platformShare,
+    feePercent,
+  };
+}
+
+export function describeShareType(type) {
+  if (type === "platform") {
+    return "Platform";
+  }
+  if (type === "creator") {
+    return "Creator";
+  }
+  return "Lightning";
+}
+
+export function formatMinRequirement(metadata) {
+  if (!metadata || typeof metadata.minSendable !== "number") {
+    return null;
+  }
+  if (metadata.minSendable <= 0) {
+    return null;
+  }
+  return Math.ceil(metadata.minSendable / 1000);
+}
+
+export function setCachedPlatformLightningAddress(address) {
+  cachedPlatformLightningAddress =
+    typeof address === "string" ? address.trim() : "";
+  return cachedPlatformLightningAddress;
+}
+
+export function getCachedPlatformLightningAddress() {
+  return cachedPlatformLightningAddress;
+}
+
+export function clearZapCaches() {
+  lightningMetadataCache.clear();
+  lightningMetadataByUrl.clear();
+  cachedPlatformLightningAddress = "";
+}
+
+export { validateInvoiceAmount };
diff --git a/js/payments/zapSplit.js b/js/payments/zapSplit.js
new file mode 100644
index 00000000..05f6d9ce
--- /dev/null
+++ b/js/payments/zapSplit.js
@@ -0,0 +1,464 @@
+// js/payments/zapSplit.js
+
+import { ADMIN_SUPER_NPUB } from "../config.js";
+import { nostrToolsReady } from "../nostrToolsBootstrap.js";
+import {
+  resolveLightningAddress,
+  fetchPayServiceData,
+  validateInvoiceAmount,
+  requestInvoice,
+} from "./lnurl.js";
+import { ensureWallet, sendPayment } from "./nwcClient.js";
+import { getPlatformLightningAddress } from "./platformAddress.js";
+import {
+  clampPercent,
+  parsePercentValue,
+  resolvePlatformFeePercent,
+} from "./platformFee.js";
+
+const HEX64_REGEX = /^[0-9a-f]{64}$/i;
+const ZAP_KIND = 9734;
+const DEFAULT_DEPS = Object.freeze({
+  lnurl: Object.freeze({
+    resolveLightningAddress,
+    fetchPayServiceData,
+    validateInvoiceAmount,
+    requestInvoice,
+  }),
+  wallet: Object.freeze({ ensureWallet, sendPayment }),
+  platformAddress: Object.freeze({ getPlatformLightningAddress }),
+});
+
+const globalScope =
+  typeof window !== "undefined"
+    ? window
+    : typeof globalThis !== "undefined"
+    ? globalThis
+    : null;
+
+const nostrToolsReadySource =
+  globalScope &&
+  globalScope.nostrToolsReady &&
+  typeof globalScope.nostrToolsReady.then === "function"
+    ? globalScope.nostrToolsReady
+    : nostrToolsReady;
+
+function normalizeToolkitCandidate(candidate) {
+  if (
+    candidate &&
+    typeof candidate === "object" &&
+    candidate.ok !== false &&
+    typeof candidate.then !== "function"
+  ) {
+    return candidate;
+  }
+  return null;
+}
+
+function readToolkitFromScope(scope = globalScope) {
+  if (!scope || typeof scope !== "object") {
+    return null;
+  }
+
+  const candidates = [];
+
+  const canonical = scope.__BITVID_CANONICAL_NOSTR_TOOLS__;
+  if (canonical) {
+    candidates.push(canonical);
+  }
+
+  const direct = scope.NostrTools;
+  if (direct) {
+    candidates.push(direct);
+  }
+
+  const nestedWindow =
+    scope.window && scope.window !== scope && typeof scope.window === "object"
+      ? scope.window
+      : null;
+  if (nestedWindow) {
+    if (nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__) {
+      candidates.push(nestedWindow.__BITVID_CANONICAL_NOSTR_TOOLS__);
+    }
+    if (nestedWindow.NostrTools) {
+      candidates.push(nestedWindow.NostrTools);
+    }
+  }
+
+  for (const candidate of candidates) {
+    const normalized = normalizeToolkitCandidate(candidate);
+    if (normalized) {
+      return normalized;
+    }
+  }
+
+  return null;
+}
+
+const __zapNostrToolsBootstrap = await (async () => {
+  try {
+    const result = await nostrToolsReadySource;
+    if (result && typeof result === "object" && result.ok === false) {
+      return {
+        toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+        failure: result,
+      };
+    }
+    const normalized = normalizeToolkitCandidate(result);
+    if (normalized) {
+      return { toolkit: normalized, failure: null };
+    }
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: null,
+    };
+  } catch (error) {
+    return {
+      toolkit: normalizeToolkitCandidate(readToolkitFromScope()),
+      failure: error,
+    };
+  }
+})();
+
+let cachedNostrTools = __zapNostrToolsBootstrap.toolkit || null;
+const nostrToolsInitializationFailure = __zapNostrToolsBootstrap.failure || null;
+
+if (!cachedNostrTools && nostrToolsInitializationFailure) {
+  console.warn(
+    "[zapSplit] nostr-tools helpers unavailable after bootstrap.",
+    nostrToolsInitializationFailure
+  );
+}
+
+function rememberNostrTools(candidate) {
+  const normalized = normalizeToolkitCandidate(candidate);
+  if (normalized) {
+    cachedNostrTools = normalized;
+  }
+}
+
+function getCachedNostrTools() {
+  const fallback = readToolkitFromScope();
+  if (cachedNostrTools && fallback && fallback !== cachedNostrTools) {
+    rememberNostrTools(fallback);
+  } else if (!cachedNostrTools && fallback) {
+    rememberNostrTools(fallback);
+  }
+  return cachedNostrTools || fallback || null;
+}
+
+async function ensureNostrTools() {
+  if (cachedNostrTools) {
+    return cachedNostrTools;
+  }
+  try {
+    const result = await nostrToolsReadySource;
+    rememberNostrTools(result);
+  } catch (error) {
+    console.warn("[zapSplit] Failed to resolve nostr-tools helpers.", error);
+  }
+  if (!cachedNostrTools) {
+    rememberNostrTools(readToolkitFromScope());
+  }
+  return cachedNostrTools || null;
+}
+
+function getOverridePlatformFee() {
+  return resolvePlatformFeePercent(globalThis?.__BITVID_PLATFORM_FEE_OVERRIDE__);
+}
+
+function sanitizeAmount(amount) {
+  const numeric = Number(amount);
+  if (!Number.isFinite(numeric)) {
+    throw new Error("Zap amount must be a positive integer.");
+  }
+  const rounded = Math.round(numeric);
+  if (rounded <= 0) {
+    throw new Error("Zap amount must be greater than zero.");
+  }
+  return rounded;
+}
+
+function sanitizeComment(comment) {
+  if (typeof comment !== "string") {
+    return "";
+  }
+  return comment.trim();
+}
+
+function sanitizeAddress(address) {
+  const trimmed = typeof address === "string" ? address.trim() : "";
+  return trimmed || "";
+}
+
+function mergeDependencies(overrides = {}) {
+  const lnurlDeps = {
+    ...DEFAULT_DEPS.lnurl,
+    ...(overrides.lnurl || {}),
+  };
+  const walletDeps = {
+    ...DEFAULT_DEPS.wallet,
+    ...(overrides.wallet || {}),
+  };
+  const platformDeps = {
+    ...DEFAULT_DEPS.platformAddress,
+    ...(overrides.platformAddress || {}),
+  };
+
+  return { lnurl: lnurlDeps, wallet: walletDeps, platformAddress: platformDeps };
+}
+
+function getNostrTools() {
+  const tools = getCachedNostrTools();
+  if (tools?.nip04) {
+    return tools;
+  }
+  const scope = globalScope || (typeof window !== "undefined" ? window : globalThis);
+  const canonical = scope?.__BITVID_CANONICAL_NOSTR_TOOLS__ || null;
+  if (canonical && tools && !tools.nip04 && canonical.nip04) {
+    try {
+      tools.nip04 = canonical.nip04;
+      return tools;
+    } catch (error) {
+      return { ...canonical, ...tools, nip04: canonical.nip04 };
+    }
+  }
+  return tools || canonical || null;
+}
+
+function decodeAdminPubkey() {
+  const trimmed = typeof ADMIN_SUPER_NPUB === "string" ? ADMIN_SUPER_NPUB.trim() : "";
+  if (!trimmed) {
+    return null;
+  }
+  if (HEX64_REGEX.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+  const tools = getNostrTools();
+  const decoder = tools?.nip19?.decode;
+  if (typeof decoder === "function") {
+    try {
+      const decoded = decoder(trimmed);
+      if (decoded?.type === "npub" && typeof decoded.data === "string") {
+        const hex = decoded.data.trim();
+        if (HEX64_REGEX.test(hex)) {
+          return hex.toLowerCase();
+        }
+      }
+    } catch (error) {
+      return null;
+    }
+  }
+  return null;
+}
+
+function derivePointerTag(videoEvent) {
+  if (!videoEvent || typeof videoEvent !== "object") {
+    return null;
+  }
+  if (!Array.isArray(videoEvent.tags)) {
+    return null;
+  }
+  const dTag = videoEvent.tags.find((tag) => Array.isArray(tag) && tag[0] === "d" && tag[1]);
+  if (!dTag) {
+    return null;
+  }
+  if (!Number.isFinite(videoEvent.kind) || typeof videoEvent.pubkey !== "string") {
+    return null;
+  }
+  const value = `${videoEvent.kind}:${videoEvent.pubkey}:${dTag[1]}`;
+  return ["a", value];
+}
+
+function buildZapRequest({
+  wallet,
+  recipientPubkey,
+  videoEvent,
+  amountSats,
+  comment,
+  lnurl,
+}) {
+  const tools = getNostrTools();
+  if (!tools?.getEventHash || !tools?.signEvent) {
+    throw new Error("NostrTools is required to sign zap requests.");
+  }
+
+  const tags = [];
+  if (recipientPubkey) {
+    tags.push(["p", recipientPubkey]);
+  }
+  if (videoEvent?.id) {
+    tags.push(["e", videoEvent.id]);
+  }
+  const pointerTag = derivePointerTag(videoEvent);
+  if (pointerTag) {
+    tags.push(pointerTag);
+  }
+  if (lnurl) {
+    tags.push(["lnurl", lnurl]);
+  }
+  if (Number.isFinite(amountSats)) {
+    tags.push(["amount", String(Math.max(0, Math.round(amountSats)) * 1000)]);
+  }
+
+  const event = {
+    kind: ZAP_KIND,
+    content: comment || "",
+    created_at: Math.floor(Date.now() / 1000),
+    tags,
+    pubkey: wallet?.clientPubkey || "",
+  };
+
+  event.id = tools.getEventHash(event);
+  event.sig = tools.signEvent(event, wallet?.secretKey);
+
+  return JSON.stringify(event);
+}
+
+function determineRecipientPubkey({ recipientType, metadata, videoEvent }) {
+  if (metadata?.nostrPubkey && HEX64_REGEX.test(metadata.nostrPubkey)) {
+    return metadata.nostrPubkey.toLowerCase();
+  }
+  if (recipientType === "creator" && typeof videoEvent?.pubkey === "string") {
+    return videoEvent.pubkey;
+  }
+  if (recipientType === "platform") {
+    return decodeAdminPubkey();
+  }
+  return null;
+}
+
+async function processShare({
+  recipientType,
+  address,
+  amountSats,
+  comment,
+  videoEvent,
+  wallet,
+  deps,
+}) {
+  const resolved = deps.lnurl.resolveLightningAddress(address);
+  const metadata = await deps.lnurl.fetchPayServiceData(resolved.url);
+  const { amountMsats } = deps.lnurl.validateInvoiceAmount(metadata, amountSats);
+
+  let zapRequest = null;
+  if (metadata.allowsNostr === true || metadata.nostrPubkey) {
+    const recipientPubkey = determineRecipientPubkey({
+      recipientType,
+      metadata,
+      videoEvent,
+    });
+    if (recipientPubkey) {
+      zapRequest = buildZapRequest({
+        wallet,
+        recipientPubkey,
+        videoEvent,
+        amountSats,
+        comment,
+        lnurl: resolved.url,
+      });
+    }
+  }
+
+  const invoice = await deps.lnurl.requestInvoice(metadata, {
+    amountMsats,
+    comment,
+    zapRequest,
+  });
+
+  const payment = await deps.wallet.sendPayment(invoice.invoice, {
+    amountSats,
+    zapRequest,
+  });
+
+  return {
+    recipientType,
+    address,
+    amount: amountSats,
+    lnurl: resolved,
+    metadata,
+    invoice,
+    payment,
+    zapRequest,
+  };
+}
+
+export async function splitAndZap(
+  { videoEvent, amountSats, comment = "", walletSettings } = {},
+  dependencies = {}
+) {
+  if (!videoEvent || typeof videoEvent !== "object") {
+    throw new Error("A video event is required to zap.");
+  }
+
+  const amount = sanitizeAmount(amountSats);
+  const note = sanitizeComment(comment);
+  const deps = mergeDependencies(dependencies);
+
+  const wallet = await deps.wallet.ensureWallet({ settings: walletSettings });
+
+  const creatorAddress = sanitizeAddress(videoEvent.lightningAddress);
+  if (!creatorAddress) {
+    throw new Error("This creator has not configured a Lightning address yet.");
+  }
+
+  const platformFee = clampPercent(getOverridePlatformFee());
+  const platformShare = Math.floor((amount * platformFee) / 100);
+  const creatorShare = amount - platformShare;
+
+  let platformAddress = null;
+  if (platformShare > 0) {
+    platformAddress = sanitizeAddress(
+      await deps.platformAddress.getPlatformLightningAddress({ forceRefresh: false })
+    );
+    if (!platformAddress) {
+      throw new Error("Platform Lightning address is unavailable.");
+    }
+  }
+
+  const receipts = [];
+
+  if (creatorShare > 0) {
+    receipts.push(
+      await processShare({
+        recipientType: "creator",
+        address: creatorAddress,
+        amountSats: creatorShare,
+        comment: note,
+        videoEvent,
+        wallet,
+        deps,
+      })
+    );
+  }
+
+  if (platformShare > 0) {
+    receipts.push(
+      await processShare({
+        recipientType: "platform",
+        address: platformAddress,
+        amountSats: platformShare,
+        comment: note,
+        videoEvent,
+        wallet,
+        deps,
+      })
+    );
+  }
+
+  return {
+    totalAmount: amount,
+    creatorShare,
+    platformShare,
+    receipts,
+  };
+}
+
+export const __TESTING__ = Object.freeze({
+  buildZapRequest,
+  determineRecipientPubkey,
+  derivePointerTag,
+  mergeDependencies,
+  parsePercentValue,
+  clampPercent,
+});
diff --git a/js/relayManager.js b/js/relayManager.js
index 4c6fff37..d40549e2 100644
--- a/js/relayManager.js
+++ b/js/relayManager.js
@@ -8,6 +8,10 @@ import {
 
 const MODE_SEQUENCE = ["both", "read", "write"];
 
+const FAST_RELAY_FETCH_LIMIT = 3;
+const FAST_RELAY_TIMEOUT_MS = 2500;
+const BACKGROUND_RELAY_TIMEOUT_MS = 6000;
+
 function normalizeHexPubkey(pubkey) {
   if (typeof pubkey !== "string") {
     return null;
@@ -413,44 +417,180 @@ class RelayPreferencesManager {
 
     const filter = { kinds: [10002], authors: [normalizedPubkey], limit: 1 };
     const targetRelays = this.getPublishTargets();
-    const events = [];
-
-    await Promise.all(
-      targetRelays.map(async (relayUrl) => {
-        try {
-          const result = await nostrClient.pool.list([relayUrl], [filter]);
-          if (Array.isArray(result) && result.length) {
-            events.push(...result);
-          }
-        } catch (error) {
-          if (isDevMode) {
-            console.warn(`[relayManager] Failed to fetch relay list from ${relayUrl}:`, error);
-          }
+    const applyEvents = (events, { skipIfEmpty = false } = {}) => {
+      if (!Array.isArray(events) || !events.length) {
+        if (skipIfEmpty) {
+          return null;
         }
-      })
-    );
+        this.lastEvent = null;
+        this.lastLoadSource = "default";
+        this.setEntries(this.defaultEntries, { allowEmpty: false });
+        return { ok: true, source: "default", events: [] };
+      }
+
+      const sorted = events
+        .filter((event) => event && event.pubkey === normalizedPubkey)
+        .sort((a, b) => (b?.created_at || 0) - (a?.created_at || 0));
+
+      if (!sorted.length) {
+        if (skipIfEmpty) {
+          return null;
+        }
+        this.lastEvent = null;
+        this.lastLoadSource = "default";
+        this.setEntries(this.defaultEntries, { allowEmpty: false });
+        return { ok: true, source: "default", events: [] };
+      }
+
+      const newest = sorted[0];
+      this.lastEvent = newest;
+
+      const parsed = parseRelayTags(newest?.tags);
+      if (parsed.length) {
+        this.setEntries(parsed, { allowEmpty: false });
+        this.lastLoadSource = "event";
+        return { ok: true, source: "event", event: newest };
+      }
 
-    if (!events.length) {
-      this.lastEvent = null;
       this.lastLoadSource = "default";
       this.setEntries(this.defaultEntries, { allowEmpty: false });
-      return { ok: true, source: "default", events: [] };
+      return { ok: true, source: "default", event: newest };
+    };
+
+    const fetchFromRelay = (relayUrl, timeoutMs, requireEvent) => {
+      return new Promise((resolve, reject) => {
+        let settled = false;
+        const timer = setTimeout(() => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          const timeoutError = new Error(
+            `Timed out fetching relay list from ${relayUrl} after ${timeoutMs}ms`
+          );
+          timeoutError.code = "timeout";
+          timeoutError.relay = relayUrl;
+          timeoutError.timeoutMs = timeoutMs;
+          reject(timeoutError);
+        }, timeoutMs);
+
+        Promise.resolve()
+          .then(() => nostrClient.pool.list([relayUrl], [filter]))
+          .then((result) => {
+            if (settled) {
+              return;
+            }
+            settled = true;
+            clearTimeout(timer);
+            const events = Array.isArray(result)
+              ? result.filter((event) => event && event.pubkey === normalizedPubkey)
+              : [];
+            if (requireEvent && !events.length) {
+              const emptyError = new Error(
+                `No relay list events returned from ${relayUrl}`
+              );
+              emptyError.code = "empty";
+              emptyError.relay = relayUrl;
+              reject(emptyError);
+              return;
+            }
+            resolve({ relayUrl, events });
+          })
+          .catch((error) => {
+            if (settled) {
+              return;
+            }
+            settled = true;
+            clearTimeout(timer);
+            const wrapped =
+              error instanceof Error ? error : new Error(String(error));
+            wrapped.relay = relayUrl;
+            reject(wrapped);
+          });
+      });
+    };
+
+    const fastRelays = targetRelays.slice(0, FAST_RELAY_FETCH_LIMIT);
+    const backgroundRelays = targetRelays.slice(fastRelays.length);
+
+    const fastPromises = fastRelays.map((relayUrl) =>
+      fetchFromRelay(relayUrl, FAST_RELAY_TIMEOUT_MS, true)
+    );
+    const backgroundPromises = backgroundRelays.map((relayUrl) =>
+      fetchFromRelay(relayUrl, BACKGROUND_RELAY_TIMEOUT_MS, false)
+    );
+
+    const background = Promise.allSettled([
+      ...fastPromises,
+      ...backgroundPromises,
+    ])
+      .then((outcomes) => {
+        const aggregated = [];
+        outcomes.forEach((outcome) => {
+          if (outcome.status === "fulfilled") {
+            const events = Array.isArray(outcome.value?.events)
+              ? outcome.value.events
+              : [];
+            if (events.length) {
+              aggregated.push(...events);
+            }
+          } else {
+            const reason = outcome.reason;
+            if (reason?.code === "timeout") {
+              if (isDevMode) {
+                console.warn(
+                  `[relayManager] Relay ${reason.relay} timed out while loading relay list (${reason.timeoutMs}ms)`
+                );
+              }
+            } else if (isDevMode) {
+              console.warn(
+                `[relayManager] Relay ${reason?.relay || "unknown"} failed while loading relay list:`,
+                reason
+              );
+            }
+          }
+        });
+
+        if (!aggregated.length) {
+          return;
+        }
+
+        applyEvents(aggregated, { skipIfEmpty: true });
+      })
+      .catch((error) => {
+        if (isDevMode) {
+          console.warn("[relayManager] Background relay refresh failed", error);
+        }
+      });
+
+    let fastResult = null;
+    if (fastPromises.length) {
+      try {
+        fastResult = await Promise.any(fastPromises);
+      } catch (error) {
+        if (error instanceof AggregateError) {
+          error.errors?.forEach((err) => {
+            if (err?.code === "timeout" && isDevMode) {
+              console.warn(
+                `[relayManager] Relay ${err.relay} timed out while loading relay list (${err.timeoutMs}ms)`
+              );
+            }
+          });
+        } else if (isDevMode) {
+          console.warn("[relayManager] Fast relay fetch failed", error);
+        }
+      }
     }
 
-    events.sort((a, b) => (b?.created_at || 0) - (a?.created_at || 0));
-    const newest = events[0];
-    this.lastEvent = newest;
-
-    const parsed = parseRelayTags(newest?.tags);
-    if (parsed.length) {
-      this.setEntries(parsed, { allowEmpty: false });
-      this.lastLoadSource = "event";
-      return { ok: true, source: "event", event: newest };
+    if (fastResult?.events?.length) {
+      const result = applyEvents(fastResult.events);
+      background.catch(() => {});
+      return result;
     }
 
-    this.lastLoadSource = "default";
-    this.setEntries(this.defaultEntries, { allowEmpty: false });
-    return { ok: true, source: "default", event: newest };
+    const fallback = applyEvents([], { skipIfEmpty: false });
+    background.catch(() => {});
+    return fallback;
   }
 
   async publishRelayList(pubkey, options = {}) {
diff --git a/js/services/authService.js b/js/services/authService.js
new file mode 100644
index 00000000..76b5a2e1
--- /dev/null
+++ b/js/services/authService.js
@@ -0,0 +1,954 @@
+// js/services/authService.js
+
+import {
+  setPubkey,
+  setCurrentUserNpub,
+  getPubkey,
+  getCurrentUserNpub,
+} from "../state/appState.js";
+import {
+  getSavedProfiles,
+  getActiveProfilePubkey,
+  setActiveProfilePubkey,
+  mutateSavedProfiles,
+  persistSavedProfiles,
+  loadSavedProfilesFromStorage as hydrateSavedProfilesFromStorage,
+  syncSavedProfileFromCache as syncSavedProfileFromCacheState,
+  loadProfileCacheFromStorage as hydrateProfileCacheFromStorage,
+  persistProfileCacheToStorage as persistProfileCacheState,
+  getProfileCacheEntry as getCachedProfileEntry,
+  setProfileCacheEntry as setCachedProfileEntry,
+} from "../state/cache.js";
+
+class SimpleEventEmitter {
+  constructor(logger = null) {
+    this.logger = typeof logger === "function" ? logger : null;
+    this.listeners = new Map();
+  }
+
+  on(eventName, handler) {
+    if (typeof handler !== "function") {
+      return () => {};
+    }
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, new Set());
+    }
+    const handlers = this.listeners.get(eventName);
+    handlers.add(handler);
+    return () => {
+      handlers.delete(handler);
+      if (!handlers.size) {
+        this.listeners.delete(eventName);
+      }
+    };
+  }
+
+  emit(eventName, detail) {
+    const handlers = this.listeners.get(eventName);
+    if (!handlers || !handlers.size) {
+      return;
+    }
+
+    for (const handler of Array.from(handlers)) {
+      try {
+        handler(detail);
+      } catch (error) {
+        if (this.logger) {
+          this.logger(`AuthService listener for "${eventName}" threw`, error);
+        }
+      }
+    }
+  }
+}
+
+const HEX64_REGEX = /^[0-9a-f]{64}$/i;
+const FALLBACK_PROFILE = {
+  name: "Unknown",
+  picture: "assets/svg/default-profile.svg",
+  about: "",
+  website: "",
+  banner: "",
+  lud16: "",
+  lud06: "",
+};
+
+const FAST_PROFILE_RELAY_LIMIT = 3;
+const FAST_PROFILE_TIMEOUT_MS = 2500;
+const BACKGROUND_PROFILE_TIMEOUT_MS = 6000;
+
+export default class AuthService {
+  constructor({ nostrClient, userBlocks, relayManager, logger } = {}) {
+    this.nostrClient = nostrClient || null;
+    this.userBlocks = userBlocks || null;
+    this.relayManager = relayManager || null;
+
+    if (typeof logger === "function") {
+      this.logger = logger;
+    } else if (logger && typeof logger.log === "function") {
+      this.logger = (...args) => logger.log(...args);
+    } else {
+      this.logger = () => {};
+    }
+
+    this.emitter = new SimpleEventEmitter((message, error) => {
+      try {
+        this.logger(message, error);
+      } catch (logError) {
+        console.warn("[AuthService] logger threw", logError);
+      }
+    });
+  }
+
+  log(...args) {
+    try {
+      this.logger(...args);
+    } catch (error) {
+      console.warn("[AuthService] logger threw", error);
+    }
+  }
+
+  on(eventName, handler) {
+    return this.emitter.on(eventName, handler);
+  }
+
+  emit(eventName, detail) {
+    this.emitter.emit(eventName, detail);
+  }
+
+  hydrateFromStorage() {
+    hydrateProfileCacheFromStorage();
+    const { profiles } = hydrateSavedProfilesFromStorage();
+    if (!getActiveProfilePubkey() && Array.isArray(profiles) && profiles.length) {
+      const first = profiles[0]?.pubkey || null;
+      if (first) {
+        setActiveProfilePubkey(first, { persist: true });
+      }
+    }
+    this.emitProfileList("hydrate");
+  }
+
+  persistProfileCache() {
+    persistProfileCacheState();
+  }
+
+  getProfileCacheEntry(pubkey) {
+    return getCachedProfileEntry(pubkey);
+  }
+
+  setProfileCacheEntry(pubkey, profile, { persist = true, reason = "manual" } = {}) {
+    const entry = setCachedProfileEntry(pubkey, profile, { persist });
+    if (entry) {
+      const normalized = this.normalizeHexPubkey(pubkey);
+      if (normalized) {
+        const updated = syncSavedProfileFromCacheState(normalized, {
+          persist,
+        });
+        if (updated) {
+          this.emitProfileList("cache-sync");
+        }
+        this.emit("profile:updated", {
+          pubkey: normalized,
+          profile: entry.profile || FALLBACK_PROFILE,
+          reason,
+          savedProfiles: this.cloneSavedProfiles(),
+          activeProfilePubkey: getActiveProfilePubkey(),
+        });
+      }
+    }
+    return entry;
+  }
+
+  cloneSavedProfiles() {
+    const saved = getSavedProfiles();
+    return Array.isArray(saved) ? saved.map((entry) => ({ ...entry })) : [];
+  }
+
+  emitProfileList(reason = "update") {
+    this.emit("profile:updated", {
+      reason,
+      savedProfiles: this.cloneSavedProfiles(),
+      activeProfilePubkey: getActiveProfilePubkey(),
+    });
+  }
+
+  safeEncodeNpub(pubkey) {
+    if (typeof pubkey !== "string") {
+      return null;
+    }
+
+    const trimmed = pubkey.trim();
+    if (!trimmed) {
+      return null;
+    }
+
+    if (trimmed.startsWith("npub1")) {
+      return trimmed;
+    }
+
+    try {
+      return window?.NostrTools?.nip19?.npubEncode(trimmed) || null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  safeDecodeNpub(npub) {
+    if (typeof npub !== "string") {
+      return null;
+    }
+
+    const trimmed = npub.trim();
+    if (!trimmed) {
+      return null;
+    }
+
+    try {
+      const decoded = window?.NostrTools?.nip19?.decode(trimmed);
+      if (decoded?.type === "npub" && typeof decoded.data === "string") {
+        return decoded.data;
+      }
+    } catch (error) {
+      return null;
+    }
+
+    return null;
+  }
+
+  normalizeHexPubkey(pubkey) {
+    if (typeof pubkey !== "string") {
+      return null;
+    }
+
+    const trimmed = pubkey.trim();
+    if (!trimmed) {
+      return null;
+    }
+
+    if (HEX64_REGEX.test(trimmed)) {
+      return trimmed.toLowerCase();
+    }
+
+    if (trimmed.startsWith("npub1")) {
+      const decoded = this.safeDecodeNpub(trimmed);
+      if (decoded && HEX64_REGEX.test(decoded)) {
+        return decoded.toLowerCase();
+      }
+    }
+
+    return null;
+  }
+
+  async requestLogin(options = {}) {
+    if (!this.nostrClient || typeof this.nostrClient.login !== "function") {
+      throw new Error("Nostr login is not available.");
+    }
+
+    const result = await this.nostrClient.login(options);
+    const pubkey =
+      typeof result === "string"
+        ? result
+        : result && typeof result === "object"
+        ? result.pubkey || result.publicKey || ""
+        : "";
+
+    const trimmed = typeof pubkey === "string" ? pubkey.trim() : "";
+    if (!trimmed) {
+      return { pubkey: null };
+    }
+
+    if (options?.autoApply === false) {
+      return { pubkey: trimmed };
+    }
+
+    const detail = await this.login(trimmed, {
+      persistActive: options?.persistActive !== false,
+    });
+
+    return { pubkey: trimmed, detail };
+  }
+
+  async handleUploadSubmit(payload, { publish } = {}) {
+    if (!this.getActivePubkey()) {
+      await this.requestLogin({ allowAccountSelection: true });
+      if (!this.getActivePubkey()) {
+        throw new Error("Login required to publish videos.");
+      }
+    }
+
+    if (typeof publish !== "function") {
+      throw new Error("A publish callback must be provided to handleUploadSubmit.");
+    }
+
+    return publish(payload);
+  }
+
+  getActivePubkey() {
+    return getPubkey();
+  }
+
+  async login(pubkey, options = {}) {
+    const normalizedOptions =
+      options && typeof options === "object" ? options : { persistActive: true };
+    const persistActive =
+      normalizedOptions.persistActive === false ? false : true;
+
+    const previousPubkey = this.normalizeHexPubkey(getPubkey()) || getPubkey();
+    const normalized = this.normalizeHexPubkey(pubkey);
+    const trimmed = typeof pubkey === "string" ? pubkey.trim() : "";
+    const nextPubkey = normalized || trimmed || null;
+    if (!nextPubkey) {
+      throw new Error("A valid pubkey is required for login.");
+    }
+
+    const identityChanged = previousPubkey !== nextPubkey;
+
+    if (normalized) {
+      setPubkey(normalized);
+      if (this.nostrClient && typeof this.nostrClient === "object") {
+        this.nostrClient.pubkey = normalized;
+      }
+    } else {
+      setPubkey(nextPubkey);
+      if (this.nostrClient && typeof this.nostrClient === "object") {
+        this.nostrClient.pubkey = trimmed ? trimmed.toLowerCase() : "";
+      }
+    }
+
+    const npub = this.safeEncodeNpub(nextPubkey);
+    setCurrentUserNpub(npub);
+
+    let savedProfilesMutated = false;
+    mutateSavedProfiles((profiles) => {
+      const draft = Array.isArray(profiles) ? profiles.slice() : [];
+      const existingIndex = draft.findIndex((entry) => {
+        const normalizedEntry = this.normalizeHexPubkey(entry?.pubkey);
+        return normalizedEntry && normalizedEntry === normalized;
+      });
+
+      const cacheEntry = this.getProfileCacheEntry(normalized || nextPubkey);
+      const cachedProfile = cacheEntry?.profile || {};
+
+      const nextEntry = {
+        pubkey: normalized || nextPubkey,
+        npub: npub || (cachedProfile.npub ?? null),
+        name: cachedProfile.name || draft[existingIndex]?.name || "",
+        picture: cachedProfile.picture || draft[existingIndex]?.picture || "",
+        authType: "nip07",
+      };
+
+      if (existingIndex >= 0) {
+        const currentEntry = draft[existingIndex] || {};
+        const changed =
+          currentEntry.npub !== nextEntry.npub ||
+          currentEntry.name !== nextEntry.name ||
+          currentEntry.picture !== nextEntry.picture ||
+          currentEntry.authType !== nextEntry.authType;
+        if (changed) {
+          draft[existingIndex] = nextEntry;
+          savedProfilesMutated = true;
+        }
+      } else {
+        draft.push(nextEntry);
+        savedProfilesMutated = true;
+      }
+
+      return draft;
+    }, { persist: false, persistActive: false });
+
+    if (persistActive) {
+      setActiveProfilePubkey(normalized || nextPubkey, { persist: true });
+    }
+
+    if (!persistActive && savedProfilesMutated) {
+      persistSavedProfiles({ persistActive: false });
+    } else if (persistActive || savedProfilesMutated) {
+      persistSavedProfiles({ persistActive: true });
+    }
+
+    if (savedProfilesMutated) {
+      this.emitProfileList("login");
+    }
+
+    const activeLoginPubkey = getPubkey();
+    const normalizedLoginPubkey =
+      this.normalizeHexPubkey(activeLoginPubkey) || activeLoginPubkey || null;
+
+    const detail = {
+      pubkey: activeLoginPubkey,
+      npub: getCurrentUserNpub(),
+      previousPubkey: previousPubkey || null,
+      identityChanged,
+      savedProfiles: this.cloneSavedProfiles(),
+      activeProfilePubkey: getActiveProfilePubkey(),
+      postLogin: {
+        pubkey: normalizedLoginPubkey,
+        blocksLoaded: false,
+        relaysLoaded: false,
+        profile: null,
+      },
+      postLoginPromise: null,
+      postLoginError: null,
+    };
+
+    const postLoginPromise = Promise.resolve()
+      .then(() => this.applyPostLoginState())
+      .then((postLogin) => {
+        detail.postLogin = postLogin;
+        detail.postLoginError = null;
+
+        try {
+          this.emitProfileList("post-login");
+        } catch (error) {
+          this.log("[AuthService] Failed to emit profile list after login", error);
+        }
+
+        this.emit("auth:post-login", {
+          ...detail,
+          postLogin,
+          postLoginError: null,
+          savedProfiles: this.cloneSavedProfiles(),
+          activeProfilePubkey: getActiveProfilePubkey(),
+        });
+
+        return postLogin;
+      })
+      .catch((error) => {
+        this.log("[AuthService] applyPostLoginState failed", error);
+        detail.postLoginError = error;
+
+        this.emit("auth:post-login", {
+          ...detail,
+          postLogin: detail.postLogin,
+          postLoginError: error,
+          savedProfiles: this.cloneSavedProfiles(),
+          activeProfilePubkey: getActiveProfilePubkey(),
+        });
+
+        return null;
+      });
+
+    detail.postLoginPromise = postLoginPromise;
+
+    try {
+      Object.defineProperty(detail, "__handled", {
+        configurable: true,
+        enumerable: false,
+        writable: true,
+        value: false,
+      });
+    } catch (error) {
+      // Ignore descriptor errors (e.g., frozen objects) and fall back to direct assignment.
+      detail.__handled = false;
+    }
+
+    this.emit("auth:login", detail);
+    return detail;
+  }
+
+  async applyPostLoginState() {
+    const activePubkey = this.normalizeHexPubkey(getPubkey()) || getPubkey();
+    const detail = {
+      pubkey: activePubkey || null,
+      blocksLoaded: false,
+      relaysLoaded: false,
+      profile: null,
+    };
+
+    if (!activePubkey) {
+      return detail;
+    }
+
+    const schedule = (callback) => Promise.resolve().then(() => callback());
+
+    const operations = [];
+
+    if (this.userBlocks && typeof this.userBlocks.loadBlocks === "function") {
+      operations.push({
+        name: "blocksLoaded",
+        promise: schedule(() => this.userBlocks.loadBlocks(activePubkey)),
+        onFulfilled: () => true,
+        onRejected: (error) => {
+          this.log("[AuthService] Failed to load block list", error);
+          return false;
+        },
+      });
+    }
+
+    if (this.relayManager && typeof this.relayManager.loadRelayList === "function") {
+      operations.push({
+        name: "relaysLoaded",
+        promise: schedule(() => this.relayManager.loadRelayList(activePubkey)),
+        onFulfilled: () => true,
+        onRejected: (error) => {
+          this.log("[AuthService] Failed to load relay list", error);
+          return false;
+        },
+      });
+    }
+
+    operations.push({
+      name: "profile",
+      promise: schedule(() => this.loadOwnProfile(activePubkey)),
+      onFulfilled: (value) => value,
+      onRejected: (error) => {
+        this.log("[AuthService] Failed to load own profile", error);
+        return null;
+      },
+    });
+
+    const settled = await Promise.allSettled(
+      operations.map((operation) => operation.promise)
+    );
+
+    settled.forEach((result, index) => {
+      const operation = operations[index];
+      if (!operation) {
+        return;
+      }
+
+      if (result.status === "fulfilled") {
+        detail[operation.name] = operation.onFulfilled(result.value);
+      } else {
+        detail[operation.name] = operation.onRejected(result.reason);
+      }
+    });
+
+    return detail;
+  }
+
+  async logout() {
+    if (this.nostrClient && typeof this.nostrClient.logout === "function") {
+      try {
+        this.nostrClient.logout();
+      } catch (error) {
+        this.log("[AuthService] nostrClient.logout threw", error);
+      }
+    }
+
+    const previousPubkey = this.normalizeHexPubkey(getPubkey()) || getPubkey();
+
+    setPubkey(null);
+    setCurrentUserNpub(null);
+    setActiveProfilePubkey(null, { persist: true });
+
+    if (this.userBlocks && typeof this.userBlocks.reset === "function") {
+      try {
+        this.userBlocks.reset();
+      } catch (error) {
+        this.log("[AuthService] userBlocks.reset threw", error);
+      }
+    }
+
+    if (this.relayManager && typeof this.relayManager.reset === "function") {
+      try {
+        this.relayManager.reset();
+      } catch (error) {
+        this.log("[AuthService] relayManager.reset threw", error);
+      }
+    }
+
+    persistSavedProfiles({ persistActive: true });
+
+    const detail = {
+      previousPubkey: previousPubkey || null,
+      savedProfiles: this.cloneSavedProfiles(),
+      activeProfilePubkey: getActiveProfilePubkey(),
+    };
+
+    this.emit("auth:logout", detail);
+    return detail;
+  }
+
+  removeSavedProfile(pubkey) {
+    const normalized = this.normalizeHexPubkey(pubkey) ||
+      (typeof pubkey === "string" ? pubkey.trim() : "");
+    if (!normalized) {
+      return { removed: false };
+    }
+
+    const { changed } = mutateSavedProfiles((profiles) =>
+      profiles.filter((entry) => entry?.pubkey !== normalized),
+    {
+      persist: true,
+      persistActive: true,
+    });
+
+    if (changed && getActiveProfilePubkey() === normalized) {
+      setActiveProfilePubkey(null, { persist: true });
+    }
+
+    if (changed) {
+      this.emitProfileList("remove-saved-profile");
+    }
+
+    return { removed: changed };
+  }
+
+  async switchProfile(pubkey) {
+    const normalizedTarget = this.normalizeHexPubkey(pubkey);
+    if (!normalizedTarget) {
+      throw new Error("Unable to switch profiles: invalid account.");
+    }
+
+    const normalizedActive = this.normalizeHexPubkey(getActiveProfilePubkey());
+    if (normalizedActive && normalizedActive === normalizedTarget) {
+      return { switched: false, reason: "already-active" };
+    }
+
+    const requestOptions = {
+      allowAccountSelection: true,
+      expectPubkey: normalizedTarget,
+      persistActive: true,
+    };
+    const autoApply = requestOptions.autoApply !== false;
+
+    let requestResult;
+    try {
+      requestResult = await this.requestLogin(requestOptions);
+    } catch (error) {
+      throw error;
+    }
+
+    const requestedPubkey =
+      this.normalizeHexPubkey(requestResult?.pubkey) ||
+      (typeof requestResult?.pubkey === "string"
+        ? requestResult.pubkey.trim()
+        : "");
+
+    let detail = requestResult?.detail || null;
+
+    if (!detail && !autoApply) {
+      const fallbackTarget =
+        this.normalizeHexPubkey(requestedPubkey) || requestedPubkey || normalizedTarget;
+      detail = await this.login(fallbackTarget, { persistActive: true });
+    }
+
+    mutateSavedProfiles((profiles) => {
+      const draft = profiles.slice();
+      const index = draft.findIndex(
+        (entry) => this.normalizeHexPubkey(entry?.pubkey) === normalizedTarget
+      );
+      if (index > 0) {
+        const [moved] = draft.splice(index, 1);
+        draft.unshift(moved);
+      }
+      return draft;
+    }, { persist: true, persistActive: true });
+
+    const savedProfiles = this.cloneSavedProfiles();
+    const activeProfilePubkey = getActiveProfilePubkey();
+
+    if (detail && typeof detail === "object") {
+      detail.savedProfiles = savedProfiles;
+      detail.activeProfilePubkey = activeProfilePubkey;
+    }
+
+    this.emitProfileList("switch-profile");
+
+    return { switched: true, detail };
+  }
+
+  async loadOwnProfile(pubkey) {
+    const normalized = this.normalizeHexPubkey(pubkey) ||
+      (typeof pubkey === "string" ? pubkey.trim() : "");
+    if (!normalized) {
+      return FALLBACK_PROFILE;
+    }
+
+    if (!this.nostrClient?.pool || !Array.isArray(this.nostrClient?.relays)) {
+      return FALLBACK_PROFILE;
+    }
+
+    const relays = Array.isArray(this.nostrClient.relays)
+      ? this.nostrClient.relays.filter((url) => typeof url === "string" && url)
+      : [];
+
+    if (!relays.length) {
+      this.setProfileCacheEntry(normalized, FALLBACK_PROFILE, {
+        persist: true,
+        reason: "load-own-profile:fallback",
+      });
+      return FALLBACK_PROFILE;
+    }
+
+    const filter = [{ kinds: [0], authors: [normalized], limit: 1 }];
+
+    const selectNewestEvent = (eventList) => {
+      if (!Array.isArray(eventList) || !eventList.length) {
+        return null;
+      }
+      const sorted = eventList
+        .filter((event) => event && event.pubkey === normalized)
+        .sort((a, b) => (b?.created_at || 0) - (a?.created_at || 0));
+      return sorted.length ? sorted[0] : null;
+    };
+
+    const buildProfileFromEvent = (event) => {
+      if (!event?.content) {
+        return FALLBACK_PROFILE;
+      }
+      try {
+        const data = JSON.parse(event.content);
+        return {
+          name: data.display_name || data.name || FALLBACK_PROFILE.name,
+          picture: data.picture || FALLBACK_PROFILE.picture,
+          about: typeof data.about === "string" ? data.about : FALLBACK_PROFILE.about,
+          website:
+            typeof data.website === "string" ? data.website : FALLBACK_PROFILE.website,
+          banner:
+            typeof data.banner === "string" ? data.banner : FALLBACK_PROFILE.banner,
+          lud16: typeof data.lud16 === "string" ? data.lud16 : FALLBACK_PROFILE.lud16,
+          lud06: typeof data.lud06 === "string" ? data.lud06 : FALLBACK_PROFILE.lud06,
+        };
+      } catch (error) {
+        this.log("[AuthService] Failed to parse profile metadata", error);
+        return FALLBACK_PROFILE;
+      }
+    };
+
+    const fetchFromRelay = (relayUrl, timeoutMs, requireEvent) => {
+      return new Promise((resolve, reject) => {
+        let settled = false;
+        const timer = setTimeout(() => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          const timeoutError = new Error(
+            `Timed out fetching profile from ${relayUrl} after ${timeoutMs}ms`
+          );
+          timeoutError.code = "timeout";
+          timeoutError.relay = relayUrl;
+          timeoutError.timeoutMs = timeoutMs;
+          reject(timeoutError);
+        }, timeoutMs);
+
+        Promise.resolve()
+          .then(() => this.nostrClient.pool.list([relayUrl], filter))
+          .then((result) => {
+            if (settled) {
+              return;
+            }
+            settled = true;
+            clearTimeout(timer);
+            const events = Array.isArray(result)
+              ? result.filter((event) => event && event.pubkey === normalized)
+              : [];
+            if (requireEvent && !events.length) {
+              const emptyError = new Error(
+                `No profile events returned from ${relayUrl}`
+              );
+              emptyError.code = "empty";
+              emptyError.relay = relayUrl;
+              reject(emptyError);
+              return;
+            }
+            resolve({ relayUrl, events });
+          })
+          .catch((error) => {
+            if (settled) {
+              return;
+            }
+            settled = true;
+            clearTimeout(timer);
+            const wrapped =
+              error instanceof Error ? error : new Error(String(error));
+            wrapped.relay = relayUrl;
+            reject(wrapped);
+          });
+      });
+    };
+
+    const fastRelays = relays.slice(0, FAST_PROFILE_RELAY_LIMIT);
+    const backgroundRelays = relays.slice(fastRelays.length);
+
+    const fastPromises = fastRelays.map((relayUrl) =>
+      fetchFromRelay(relayUrl, FAST_PROFILE_TIMEOUT_MS, true)
+    );
+    const backgroundPromises = backgroundRelays.map((relayUrl) =>
+      fetchFromRelay(relayUrl, BACKGROUND_PROFILE_TIMEOUT_MS, false)
+    );
+
+    const background = Promise.allSettled([
+      ...fastPromises,
+      ...backgroundPromises,
+    ])
+      .then((outcomes) => {
+        const aggregated = [];
+        outcomes.forEach((outcome) => {
+          if (outcome.status === "fulfilled") {
+            const events = Array.isArray(outcome.value?.events)
+              ? outcome.value.events
+              : [];
+            if (events.length) {
+              aggregated.push(...events);
+            }
+          } else if (outcome.status === "rejected") {
+            const reason = outcome.reason;
+            if (reason?.code === "timeout") {
+              this.log(
+                `[AuthService] Relay ${reason.relay} timed out loading profile (background)`
+              );
+            } else {
+              this.log(
+                `[AuthService] Relay ${reason?.relay || "unknown"} failed loading profile (background)`,
+                reason
+              );
+            }
+          }
+        });
+
+        const newest = selectNewestEvent(aggregated);
+        if (!newest) {
+          return;
+        }
+
+        const profile = buildProfileFromEvent(newest);
+        this.setProfileCacheEntry(normalized, profile, {
+          persist: true,
+          reason: "load-own-profile:background",
+        });
+      })
+      .catch((error) => {
+        this.log("[AuthService] Background profile refresh failed", error);
+      });
+
+    let fastResult = null;
+    if (fastPromises.length) {
+      try {
+        fastResult = await Promise.any(fastPromises);
+      } catch (error) {
+        if (error instanceof AggregateError) {
+          error.errors?.forEach((err) => {
+            if (err?.code === "timeout") {
+              this.log(
+                `[AuthService] Relay ${err.relay} timed out loading profile`
+              );
+            }
+          });
+        } else {
+          this.log("[AuthService] Failed to load profile from fast relays", error);
+        }
+      }
+    }
+
+    if (fastResult?.events?.length) {
+      const newest = selectNewestEvent(fastResult.events);
+      if (newest) {
+        const profile = buildProfileFromEvent(newest);
+        this.setProfileCacheEntry(normalized, profile, {
+          persist: true,
+          reason: "load-own-profile:fast",
+        });
+        background.catch(() => {});
+        return profile;
+      }
+    }
+
+    this.setProfileCacheEntry(normalized, FALLBACK_PROFILE, {
+      persist: true,
+      reason: "load-own-profile:fallback",
+    });
+
+    background.catch(() => {});
+
+    return FALLBACK_PROFILE;
+  }
+
+  async fetchProfile(pubkey, { forceRefresh = false } = {}) {
+    const normalized = this.normalizeHexPubkey(pubkey) ||
+      (typeof pubkey === "string" ? pubkey.trim() : "");
+    if (!normalized) {
+      return null;
+    }
+
+    const cacheEntry = this.getProfileCacheEntry(normalized);
+    if (cacheEntry && !forceRefresh) {
+      this.emit("profile:updated", {
+        pubkey: normalized,
+        profile: cacheEntry.profile || FALLBACK_PROFILE,
+        reason: "cache-hit",
+        savedProfiles: this.cloneSavedProfiles(),
+        activeProfilePubkey: getActiveProfilePubkey(),
+      });
+      return cacheEntry.profile;
+    }
+
+    if (!this.nostrClient?.pool || !Array.isArray(this.nostrClient?.relays)) {
+      return cacheEntry?.profile || FALLBACK_PROFILE;
+    }
+
+    try {
+      const results = await Promise.all(
+        this.nostrClient.relays.map((relayUrl) =>
+          this.nostrClient.pool.list([relayUrl], [
+            { kinds: [0], authors: [normalized], limit: 1 },
+          ])
+        )
+      );
+
+      const events = results.flat();
+      let newest = null;
+      for (const event of events) {
+        if (!event || event.pubkey !== normalized || !event.content) {
+          continue;
+        }
+        if (!newest || event.created_at > newest.created_at) {
+          newest = event;
+        }
+      }
+
+      if (newest?.content) {
+        const data = JSON.parse(newest.content);
+        const profile = {
+          name: data.display_name || data.name || FALLBACK_PROFILE.name,
+          picture: data.picture || FALLBACK_PROFILE.picture,
+          about: typeof data.about === "string" ? data.about : FALLBACK_PROFILE.about,
+          website:
+            typeof data.website === "string" ? data.website : FALLBACK_PROFILE.website,
+          banner:
+            typeof data.banner === "string" ? data.banner : FALLBACK_PROFILE.banner,
+          lud16: typeof data.lud16 === "string" ? data.lud16 : FALLBACK_PROFILE.lud16,
+          lud06: typeof data.lud06 === "string" ? data.lud06 : FALLBACK_PROFILE.lud06,
+        };
+        this.setProfileCacheEntry(normalized, profile, {
+          persist: true,
+          reason: forceRefresh ? "force-refresh" : "fetch-profile",
+        });
+        return profile;
+      }
+    } catch (error) {
+      this.log("[AuthService] Failed to fetch profile", error);
+    }
+
+    return cacheEntry?.profile || FALLBACK_PROFILE;
+  }
+
+  async fetchAndRenderProfile(pubkey, forceRefresh = false) {
+    return this.fetchProfile(pubkey, { forceRefresh });
+  }
+
+  syncSavedProfileFromCache(pubkey, { persist = false } = {}) {
+    const normalized = this.normalizeHexPubkey(pubkey) ||
+      (typeof pubkey === "string" ? pubkey.trim() : "");
+    if (!normalized) {
+      return false;
+    }
+
+    const updated = syncSavedProfileFromCacheState(normalized, { persist });
+    if (updated) {
+      this.emitProfileList("cache-sync");
+    }
+    return updated;
+  }
+
+  loadProfileCacheFromStorage() {
+    hydrateProfileCacheFromStorage();
+  }
+
+  loadSavedProfilesFromStorage() {
+    const result = hydrateSavedProfilesFromStorage();
+    this.emitProfileList("hydrate");
+    return result;
+  }
+}
diff --git a/js/services/discussionCountService.js b/js/services/discussionCountService.js
new file mode 100644
index 00000000..0673901a
--- /dev/null
+++ b/js/services/discussionCountService.js
@@ -0,0 +1,231 @@
+import { isDevMode } from "../config.js";
+
+const DEFAULT_MAX_DISCUSSION_COUNT_VIDEOS = 24;
+const COUNT_UNSUPPORTED_TITLE = "Relay does not support NIP-45 COUNT queries.";
+
+function toPositiveInteger(value, fallback) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric) || numeric <= 0) {
+    return fallback;
+  }
+  return Math.floor(numeric);
+}
+
+export default class DiscussionCountService {
+  constructor({
+    maxVideos = DEFAULT_MAX_DISCUSSION_COUNT_VIDEOS,
+    logger = typeof console !== "undefined" ? console : null,
+  } = {}) {
+    this.maxVideos = toPositiveInteger(maxVideos, DEFAULT_MAX_DISCUSSION_COUNT_VIDEOS);
+    this.logger = logger;
+    this.videoDiscussionCountCache = new Map();
+    this.inFlightDiscussionCounts = new Map();
+  }
+
+  clearCache() {
+    this.videoDiscussionCountCache.clear();
+    this.inFlightDiscussionCounts.clear();
+  }
+
+  getCachedCount(videoId) {
+    if (!videoId) {
+      return undefined;
+    }
+    return this.videoDiscussionCountCache.get(videoId);
+  }
+
+  refreshCounts(videos = [], options = {}) {
+    const { videoListRoot = null, nostrClient = null } = options;
+
+    if (!Array.isArray(videos) || !videos.length) {
+      return;
+    }
+
+    const root =
+      videoListRoot && typeof videoListRoot.querySelector === "function"
+        ? videoListRoot
+        : null;
+    if (!root || !nostrClient?.pool || typeof nostrClient.countEventsAcrossRelays !== "function") {
+      return;
+    }
+
+    const eligibleVideos = videos
+      .filter(
+        (video) =>
+          video &&
+          typeof video.id === "string" &&
+          video.id &&
+          video.enableComments !== false
+      )
+      .slice(0, this.maxVideos);
+
+    eligibleVideos.forEach((video) => {
+      const container = root.querySelector(`[data-discussion-count="${video.id}"]`);
+      if (!container) {
+        return;
+      }
+
+      const cachedCount = this.getCachedCount(video.id);
+      if (typeof cachedCount === "number") {
+        this.updateDiscussionCountElement(container, cachedCount);
+        return;
+      }
+
+      const filters = this.buildDiscussionCountFilters(video);
+      if (!filters.length) {
+        this.markDiscussionCountError(container, { unsupported: true });
+        return;
+      }
+
+      if (this.inFlightDiscussionCounts.has(video.id)) {
+        this.setDiscussionCountPending(container);
+        return;
+      }
+
+      this.setDiscussionCountPending(container);
+
+      const request = Promise.resolve()
+        .then(() => nostrClient.countEventsAcrossRelays(filters))
+        .then((result) => {
+          const perRelay = Array.isArray(result?.perRelay)
+            ? result.perRelay.filter((entry) => entry && entry.ok)
+            : [];
+
+          if (!perRelay.length) {
+            this.markDiscussionCountError(container, { unsupported: true });
+            return result;
+          }
+
+          const total = Number(result?.total);
+          const normalized =
+            Number.isFinite(total) && total >= 0 ? Math.floor(total) : 0;
+          this.videoDiscussionCountCache.set(video.id, normalized);
+          this.updateDiscussionCountElement(container, normalized);
+          return result;
+        })
+        .catch((error) => {
+          if (isDevMode && this.logger?.warn) {
+            this.logger.warn(
+              `[counts] Failed to fetch discussion count for ${video.id}:`,
+              error
+            );
+          }
+          this.markDiscussionCountError(container);
+          throw error;
+        })
+        .finally(() => {
+          this.inFlightDiscussionCounts.delete(video.id);
+        });
+
+      this.inFlightDiscussionCounts.set(video.id, request);
+    });
+  }
+
+  buildDiscussionCountFilters(video) {
+    if (!video || typeof video !== "object") {
+      return [];
+    }
+
+    const filters = [];
+    const eventId = typeof video.id === "string" ? video.id.trim() : "";
+    if (eventId) {
+      filters.push({ kinds: [1], "#e": [eventId] });
+    }
+
+    const address = this.getVideoAddressPointer(video);
+    if (address) {
+      filters.push({ kinds: [1], "#a": [address] });
+    }
+
+    return filters;
+  }
+
+  getVideoAddressPointer(video) {
+    if (!video || typeof video !== "object") {
+      return "";
+    }
+
+    const tags = Array.isArray(video.tags) ? video.tags : [];
+    const dTag = tags.find(
+      (tag) =>
+        Array.isArray(tag) &&
+        tag.length >= 2 &&
+        tag[0] === "d" &&
+        typeof tag[1] === "string" &&
+        tag[1].trim()
+    );
+
+    if (!dTag) {
+      return "";
+    }
+
+    const pubkey = typeof video.pubkey === "string" ? video.pubkey.trim() : "";
+    if (!pubkey) {
+      return "";
+    }
+
+    const identifier = dTag[1].trim();
+    if (!identifier) {
+      return "";
+    }
+
+    const kind =
+      Number.isFinite(video.kind) && video.kind > 0
+        ? Math.floor(video.kind)
+        : 30078;
+
+    return `${kind}:${pubkey}:${identifier}`;
+  }
+
+  setDiscussionCountPending(element) {
+    if (!element) {
+      return;
+    }
+
+    element.dataset.countState = "pending";
+    const valueEl = element.querySelector("[data-discussion-count-value]");
+    if (valueEl) {
+      valueEl.textContent = "…";
+    }
+    element.removeAttribute("title");
+  }
+
+  updateDiscussionCountElement(element, count) {
+    if (!element) {
+      return;
+    }
+
+    const valueEl = element.querySelector("[data-discussion-count-value]");
+    if (!valueEl) {
+      return;
+    }
+
+    const numeric = Number(count);
+    const safeValue =
+      Number.isFinite(numeric) && numeric >= 0 ? Math.floor(numeric) : 0;
+    element.dataset.countState = "ready";
+    valueEl.textContent = safeValue.toLocaleString();
+    element.removeAttribute("title");
+  }
+
+  markDiscussionCountError(element, { unsupported = false } = {}) {
+    if (!element) {
+      return;
+    }
+
+    const valueEl = element.querySelector("[data-discussion-count-value]");
+    if (valueEl) {
+      valueEl.textContent = "—";
+    }
+
+    element.dataset.countState = unsupported ? "unsupported" : "error";
+
+    if (unsupported) {
+      element.title = COUNT_UNSUPPORTED_TITLE;
+    } else {
+      element.removeAttribute("title");
+    }
+  }
+}
+
+export { COUNT_UNSUPPORTED_TITLE };
diff --git a/js/services/nostrService.js b/js/services/nostrService.js
new file mode 100644
index 00000000..0a57236a
--- /dev/null
+++ b/js/services/nostrService.js
@@ -0,0 +1,509 @@
+import {
+  nostrClient,
+  convertEventToVideo,
+} from "../nostr.js";
+import { accessControl } from "../accessControl.js";
+import {
+  getVideosMap as getStoredVideosMap,
+  setVideosMap as setStoredVideosMap,
+  getVideoSubscription as getStoredVideoSubscription,
+  setVideoSubscription as setStoredVideoSubscription,
+} from "../state/appState.js";
+
+const VIDEO_KIND = 30078;
+
+class SimpleEventEmitter {
+  constructor(logger = null) {
+    this.logger = typeof logger === "function" ? logger : null;
+    this.listeners = new Map();
+  }
+
+  on(eventName, handler) {
+    if (typeof handler !== "function") {
+      return () => {};
+    }
+
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, new Set());
+    }
+
+    const handlers = this.listeners.get(eventName);
+    handlers.add(handler);
+
+    return () => {
+      handlers.delete(handler);
+      if (!handlers.size) {
+        this.listeners.delete(eventName);
+      }
+    };
+  }
+
+  emit(eventName, detail) {
+    const handlers = this.listeners.get(eventName);
+    if (!handlers || !handlers.size) {
+      return;
+    }
+
+    for (const handler of Array.from(handlers)) {
+      try {
+        handler(detail);
+      } catch (error) {
+        if (this.logger) {
+          try {
+            this.logger(`nostrService listener for "${eventName}" threw`, error);
+          } catch (logError) {
+            console.warn("[nostrService] listener logger threw", logError);
+          }
+        }
+      }
+    }
+  }
+}
+
+function normalizeLogger(logger) {
+  if (typeof logger === "function") {
+    return logger;
+  }
+  if (logger && typeof logger.log === "function") {
+    return (...args) => logger.log(...args);
+  }
+  return () => {};
+}
+
+function ensureSet(value) {
+  if (value instanceof Set) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return new Set(value);
+  }
+  return new Set();
+}
+
+function normalizeHexPubkey(pubkey) {
+  if (typeof pubkey !== "string") {
+    return "";
+  }
+
+  const trimmed = pubkey.trim();
+  return trimmed ? trimmed.toLowerCase() : "";
+}
+
+function normalizeUntil(timestamp) {
+  const value = Number(timestamp);
+  if (!Number.isFinite(value) || value <= 0) {
+    return 0;
+  }
+  const seconds = Math.floor(value);
+  return seconds > 0 ? seconds : 0;
+}
+
+export class NostrService {
+  constructor({ logger } = {}) {
+    this.nostrClient = nostrClient;
+    this.accessControl = accessControl;
+    this.logger = normalizeLogger(logger);
+    this.emitter = new SimpleEventEmitter((message, error) => {
+      try {
+        this.logger(message, error);
+      } catch (logError) {
+        console.warn("[nostrService] logger threw", logError);
+      }
+    });
+    this.videosMap = null;
+  }
+
+  log(...args) {
+    try {
+      this.logger(...args);
+    } catch (error) {
+      console.warn("[nostrService] logger threw", error);
+    }
+  }
+
+  on(eventName, handler) {
+    return this.emitter.on(eventName, handler);
+  }
+
+  emit(eventName, detail) {
+    this.emitter.emit(eventName, detail);
+  }
+
+  ensureVideosMap() {
+    if (this.videosMap instanceof Map) {
+      return this.videosMap;
+    }
+
+    let map = getStoredVideosMap();
+    if (!(map instanceof Map)) {
+      map = new Map();
+      setStoredVideosMap(map);
+    }
+
+    this.videosMap = map;
+    return this.videosMap;
+  }
+
+  getVideosMap() {
+    return this.ensureVideosMap();
+  }
+
+  getVideoSubscription() {
+    return getStoredVideoSubscription();
+  }
+
+  setVideoSubscription(subscription) {
+    setStoredVideoSubscription(subscription || null);
+    this.emit("subscription:changed", { subscription: subscription || null });
+  }
+
+  clearVideoSubscription() {
+    const current = getStoredVideoSubscription();
+    if (current && typeof current.unsub === "function") {
+      try {
+        current.unsub();
+      } catch (error) {
+        console.warn("[nostrService] Failed to unsubscribe from video feed:", error);
+      }
+    }
+    this.setVideoSubscription(null);
+  }
+
+  cacheVideos(videos = []) {
+    if (!Array.isArray(videos) || !videos.length) {
+      return;
+    }
+
+    const map = this.ensureVideosMap();
+    for (const video of videos) {
+      if (video && typeof video.id === "string" && video.id) {
+        map.set(video.id, video);
+      }
+    }
+    setStoredVideosMap(map);
+    this.emit("videos:cache", { size: map.size });
+  }
+
+  shouldIncludeVideo(video, {
+    blacklistedEventIds = new Set(),
+    isAuthorBlocked = () => false,
+  } = {}) {
+    if (!video || typeof video !== "object") {
+      return false;
+    }
+
+    if (blacklistedEventIds.has(video.id)) {
+      return false;
+    }
+
+    if (typeof video.pubkey === "string" && video.pubkey) {
+      try {
+        if (isAuthorBlocked(video.pubkey)) {
+          return false;
+        }
+      } catch (error) {
+        console.warn("[nostrService] isAuthorBlocked handler threw", error);
+      }
+    }
+
+    if (video.isPrivate === true) {
+      const normalizedVideoPubkey = normalizeHexPubkey(video.pubkey);
+      const normalizedViewerPubkey = normalizeHexPubkey(
+        this.nostrClient?.pubkey
+      );
+
+      if (
+        !normalizedViewerPubkey ||
+        !normalizedVideoPubkey ||
+        normalizedVideoPubkey !== normalizedViewerPubkey
+      ) {
+        return false;
+      }
+    }
+
+    if (this.accessControl && typeof this.accessControl.canAccess === "function") {
+      try {
+        if (!this.accessControl.canAccess(video)) {
+          return false;
+        }
+      } catch (error) {
+        console.warn("[nostrService] access control check failed", error);
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  filterVideos(videos = [], options = {}) {
+    const blacklist = ensureSet(options.blacklistedEventIds);
+    const isAuthorBlocked =
+      typeof options.isAuthorBlocked === "function"
+        ? options.isAuthorBlocked
+        : () => false;
+
+    return videos.filter((video) =>
+      this.shouldIncludeVideo(video, {
+        blacklistedEventIds: blacklist,
+        isAuthorBlocked,
+      })
+    );
+  }
+
+  async ensureAccessControlReady() {
+    if (!this.accessControl || typeof this.accessControl.ensureReady !== "function") {
+      return;
+    }
+
+    try {
+      await this.accessControl.ensureReady();
+    } catch (error) {
+      console.warn(
+        "[nostrService] Failed to ensure access control lists are ready:",
+        error
+      );
+    }
+  }
+
+  getFilteredActiveVideos(options = {}) {
+    const all = this.nostrClient.getActiveVideos();
+    return this.filterVideos(all, options);
+  }
+
+  async loadVideos({
+    forceFetch = false,
+    blacklistedEventIds,
+    isAuthorBlocked,
+    onVideos,
+  } = {}) {
+    await this.ensureAccessControlReady();
+
+    if (forceFetch) {
+      this.clearVideoSubscription();
+    }
+
+    const applyAndNotify = (videos, reason) => {
+      const filtered = this.filterVideos(videos, {
+        blacklistedEventIds,
+        isAuthorBlocked,
+      });
+      this.cacheVideos(filtered);
+      if (typeof onVideos === "function") {
+        try {
+          onVideos(filtered, { reason });
+        } catch (error) {
+          console.warn("[nostrService] onVideos handler threw", error);
+        }
+      }
+      this.emit("videos:updated", { videos: filtered, reason });
+      return filtered;
+    };
+
+    const cached = this.nostrClient.getActiveVideos();
+    const initial = applyAndNotify(cached, "cache");
+
+    if (!getStoredVideoSubscription()) {
+      const subscription = this.nostrClient.subscribeVideos(() => {
+        const updated = this.nostrClient.getActiveVideos();
+        applyAndNotify(updated, "subscription");
+      });
+      this.setVideoSubscription(subscription);
+      this.emit("subscription:started", { subscription });
+    }
+
+    return initial;
+  }
+
+  async fetchVideos(options = {}) {
+    try {
+      const videos = await this.nostrClient.fetchVideos();
+      const filtered = this.filterVideos(videos, options);
+      this.cacheVideos(filtered);
+      this.emit("videos:fetched", { videos: filtered });
+      return filtered;
+    } catch (error) {
+      console.error("[nostrService] Failed to fetch videos:", error);
+      return [];
+    }
+  }
+
+  async loadOlderVideos(lastTimestamp, {
+    blacklistedEventIds,
+    isAuthorBlocked,
+    limit = 150,
+  } = {}) {
+    const until = normalizeUntil(lastTimestamp) - 1;
+    if (until <= 0 || !this.nostrClient?.pool || !Array.isArray(this.nostrClient?.relays)) {
+      return [];
+    }
+
+    const filter = {
+      kinds: [VIDEO_KIND],
+      "#t": ["video"],
+      until,
+      limit,
+    };
+
+    const collected = new Map();
+
+    try {
+      const events = await this.nostrClient.pool.list(this.nostrClient.relays, [filter]);
+      for (const event of Array.isArray(events) ? events : []) {
+        try {
+          const video = convertEventToVideo(event);
+          if (video.invalid) {
+            continue;
+          }
+          if (
+            this.nostrClient &&
+            typeof this.nostrClient.applyRootCreatedAt === "function"
+          ) {
+            this.nostrClient.applyRootCreatedAt(video);
+          }
+          if (collected.has(video.id)) {
+            continue;
+          }
+          collected.set(video.id, video);
+          this.nostrClient.allEvents.set(video.id, video);
+        } catch (error) {
+          console.warn("[nostrService] Failed to convert older event", error);
+        }
+      }
+    } catch (error) {
+      console.error("[nostrService] Failed to load older videos:", error);
+      return [];
+    }
+
+    const videos = Array.from(collected.values());
+    const filtered = this.filterVideos(videos, {
+      blacklistedEventIds,
+      isAuthorBlocked,
+    });
+
+    this.cacheVideos(filtered);
+    this.emit("videos:older", { videos: filtered, until });
+
+    return filtered;
+  }
+
+  async publishVideoNote(publishPayload, pubkey) {
+    const detail = { pubkey };
+    if (publishPayload && typeof publishPayload === "object") {
+      detail.payload = publishPayload;
+      if (publishPayload.legacyFormData) {
+        detail.legacyFormData = publishPayload.legacyFormData;
+      }
+      if (publishPayload.nip71) {
+        detail.nip71 = publishPayload.nip71;
+      }
+    } else {
+      detail.formData = publishPayload;
+    }
+
+    let nip71Result = null;
+    let legacyResult = null;
+
+    try {
+      legacyResult = await this.nostrClient.publishVideo(
+        publishPayload,
+        pubkey
+      );
+    } catch (error) {
+      detail.error = error;
+      throw error;
+    }
+
+    let shouldAttemptNip71 = true;
+    const pointerIdentifiers = {
+      eventId: legacyResult?.id,
+    };
+
+    if (Array.isArray(legacyResult?.tags)) {
+      const dTag = legacyResult.tags.find(
+        (tag) => Array.isArray(tag) && tag[0] === "d" && typeof tag[1] === "string"
+      );
+      if (dTag) {
+        pointerIdentifiers.dTag = dTag[1];
+      }
+    }
+
+    if (legacyResult?.content) {
+      try {
+        const parsed = JSON.parse(legacyResult.content);
+        if (parsed && typeof parsed.videoRootId === "string") {
+          pointerIdentifiers.videoRootId = parsed.videoRootId;
+        }
+        if (parsed && parsed.isPrivate) {
+          shouldAttemptNip71 = false;
+        }
+      } catch (parseError) {
+        this.log("[nostrService] Failed to parse legacy publish payload", parseError);
+      }
+    }
+
+    if (!pointerIdentifiers.videoRootId) {
+      shouldAttemptNip71 = false;
+    }
+
+    if (shouldAttemptNip71) {
+      try {
+        nip71Result = await this.nostrClient.publishNip71Video(
+          publishPayload,
+          pubkey,
+          pointerIdentifiers
+        );
+      } catch (nip71Error) {
+        detail.nip71Error = nip71Error;
+        this.log("[nostrService] NIP-71 publish failed", nip71Error);
+      }
+    }
+
+    const result = { legacy: legacyResult, nip71: nip71Result };
+    detail.result = result;
+    this.emit("videos:published", detail);
+    return result;
+  }
+
+  async handleEditVideoSubmit({ originalEvent, updatedData, pubkey }) {
+    const result = await this.nostrClient.editVideo(originalEvent, updatedData, pubkey);
+    this.emit("videos:edited", { originalEvent, updatedData, pubkey, result });
+    return result;
+  }
+
+  async handleFullDeleteVideo({ videoRootId, pubkey, confirm = true } = {}) {
+    const result = await this.nostrClient.deleteAllVersions(videoRootId, pubkey, {
+      confirm,
+    });
+    if (result) {
+      this.emit("videos:deleted", { videoRootId, pubkey });
+    }
+    return result;
+  }
+
+  async getOldEventById(eventId) {
+    const map = this.ensureVideosMap();
+    if (map.has(eventId)) {
+      return map.get(eventId);
+    }
+
+    const cached = this.nostrClient.allEvents.get(eventId);
+    if (cached && !cached.deleted) {
+      map.set(eventId, cached);
+      setStoredVideosMap(map);
+      return cached;
+    }
+
+    const fetched = await this.nostrClient.getEventById(eventId);
+    if (fetched && !fetched.deleted) {
+      map.set(eventId, fetched);
+      setStoredVideosMap(map);
+      return fetched;
+    }
+
+    return null;
+  }
+}
+
+const nostrService = new NostrService();
+
+export default nostrService;
diff --git a/js/services/nwcSettingsService.js b/js/services/nwcSettingsService.js
new file mode 100644
index 00000000..27f665c5
--- /dev/null
+++ b/js/services/nwcSettingsService.js
@@ -0,0 +1,324 @@
+import {
+  loadNwcSettings,
+  saveNwcSettings,
+  clearNwcSettings,
+  createDefaultNwcSettings,
+} from "../nwcSettings.js";
+import { MAX_WALLET_DEFAULT_ZAP } from "../config.js";
+
+const NWC_URI_SCHEME = "nostr+walletconnect://";
+
+function isFunction(value) {
+  return typeof value === "function";
+}
+
+export default class NwcSettingsService {
+  constructor({
+    normalizeHexPubkey,
+    getActivePubkey,
+    payments = null,
+    logger = console,
+    notifyError,
+    maxWalletDefaultZap = MAX_WALLET_DEFAULT_ZAP,
+    loadSettings = loadNwcSettings,
+    saveSettings = saveNwcSettings,
+    clearSettings = clearNwcSettings,
+    createDefaultSettings = createDefaultNwcSettings,
+  } = {}) {
+    this.normalizeHexPubkey = isFunction(normalizeHexPubkey)
+      ? normalizeHexPubkey
+      : (value) => (typeof value === "string" ? value.trim() : null);
+    this.getActivePubkey = isFunction(getActivePubkey)
+      ? getActivePubkey
+      : () => null;
+    this.payments = payments || null;
+    this.logger = logger || console;
+    this.notifyError = isFunction(notifyError) ? notifyError : null;
+    this.maxWalletDefaultZap =
+      Number.isFinite(maxWalletDefaultZap) && maxWalletDefaultZap > 0
+        ? maxWalletDefaultZap
+        : MAX_WALLET_DEFAULT_ZAP;
+    this.loadSettings = isFunction(loadSettings)
+      ? loadSettings
+      : loadNwcSettings;
+    this.saveSettings = isFunction(saveSettings)
+      ? saveSettings
+      : saveNwcSettings;
+    this.clearSettings = isFunction(clearSettings)
+      ? clearSettings
+      : clearNwcSettings;
+    this.createDefaultSettings = isFunction(createDefaultSettings)
+      ? createDefaultSettings
+      : () => createDefaultNwcSettings();
+    this.cache = new Map();
+  }
+
+  cloneSettings(settings) {
+    if (!settings || typeof settings !== "object") {
+      return this.createDefaultNwcSettings();
+    }
+    return { ...settings };
+  }
+
+  setPayments(payments) {
+    this.payments = payments || null;
+  }
+
+  setActivePubkeyGetter(fn) {
+    if (isFunction(fn)) {
+      this.getActivePubkey = fn;
+    }
+  }
+
+  clearCache() {
+    this.cache.clear();
+  }
+
+  getNormalizedPubkey(pubkey) {
+    try {
+      return this.normalizeHexPubkey(pubkey);
+    } catch (error) {
+      if (this.logger && isFunction(this.logger.warn)) {
+        this.logger.warn("[nwcSettings] Failed to normalize pubkey:", error);
+      }
+      return null;
+    }
+  }
+
+  async hydrateNwcSettingsForPubkey(pubkey) {
+    const normalized = this.getNormalizedPubkey(pubkey);
+    if (!normalized) {
+      return this.createDefaultNwcSettings();
+    }
+
+    try {
+      const settings = await this.loadSettings(normalized);
+      const record =
+        settings && typeof settings === "object"
+          ? { ...settings }
+          : this.createDefaultNwcSettings();
+      this.cache.set(normalized, record);
+      return this.cloneSettings(record);
+    } catch (error) {
+      if (this.logger && isFunction(this.logger.warn)) {
+        this.logger.warn(
+          `[nwcSettings] Failed to load settings for ${normalized}:`,
+          error,
+        );
+      }
+      const fallback = this.createDefaultNwcSettings();
+      this.cache.set(normalized, fallback);
+      return this.cloneSettings(fallback);
+    }
+  }
+
+  getActiveNwcSettings() {
+    const normalized = this.getNormalizedPubkey(this.getActivePubkey());
+    if (!normalized) {
+      return this.createDefaultNwcSettings();
+    }
+    const cached = this.cache.get(normalized);
+    return cached ? this.cloneSettings(cached) : this.createDefaultNwcSettings();
+  }
+
+  createDefaultNwcSettings() {
+    return this.createDefaultSettings();
+  }
+
+  hasActiveWalletConnection() {
+    const settings = this.getActiveNwcSettings();
+    const candidate =
+      typeof settings?.nwcUri === "string" ? settings.nwcUri.trim() : "";
+    return candidate.length > 0;
+  }
+
+  validateWalletUri(uri, { requireValue = false } = {}) {
+    const value = typeof uri === "string" ? uri.trim() : "";
+
+    if (!value) {
+      if (requireValue) {
+        return {
+          valid: false,
+          sanitized: "",
+          message: "Enter a wallet connect URI before continuing.",
+        };
+      }
+      return { valid: true, sanitized: "" };
+    }
+
+    if (!value.toLowerCase().startsWith(NWC_URI_SCHEME)) {
+      return {
+        valid: false,
+        sanitized: value,
+        message: `Wallet URI must start with ${NWC_URI_SCHEME}.`,
+      };
+    }
+
+    return { valid: true, sanitized: value };
+  }
+
+  async updateActiveNwcSettings(partial = {}) {
+    const normalized = this.getNormalizedPubkey(this.getActivePubkey());
+    if (!normalized) {
+      if (this.logger && isFunction(this.logger.warn)) {
+        this.logger.warn(
+          "[nwcSettings] Cannot update settings without an active pubkey.",
+        );
+      }
+      return this.createDefaultNwcSettings();
+    }
+
+    try {
+      const updated = await this.saveSettings(normalized, partial);
+      const record =
+        updated && typeof updated === "object"
+          ? { ...updated }
+          : this.createDefaultNwcSettings();
+      this.cache.set(normalized, record);
+      return this.cloneSettings(record);
+    } catch (error) {
+      if (this.logger && isFunction(this.logger.warn)) {
+        this.logger.warn(
+          `[nwcSettings] Failed to save settings for ${normalized}:`,
+          error,
+        );
+      }
+      return this.getActiveNwcSettings();
+    }
+  }
+
+  async handleProfileWalletPersist({
+    nwcUri,
+    defaultZap,
+    lastChecked,
+  } = {}) {
+    const partial = {};
+    if (nwcUri !== undefined) {
+      partial.nwcUri = nwcUri;
+    }
+    if (defaultZap !== undefined) {
+      partial.defaultZap = defaultZap;
+    }
+    if (lastChecked !== undefined) {
+      partial.lastChecked = lastChecked;
+    }
+
+    if (!Object.keys(partial).length) {
+      return this.getActiveNwcSettings();
+    }
+
+    return this.updateActiveNwcSettings(partial);
+  }
+
+  async ensureWallet({ nwcUri, defaultZap } = {}) {
+    const activeSettings = this.getActiveNwcSettings();
+    const candidateUri =
+      typeof nwcUri === "string" && nwcUri.trim()
+        ? nwcUri.trim()
+        : activeSettings.nwcUri || "";
+    const { valid, sanitized, message } = this.validateWalletUri(candidateUri, {
+      requireValue: true,
+    });
+    if (!valid) {
+      throw new Error(message || "Invalid wallet URI provided.");
+    }
+
+    const merged = {
+      ...activeSettings,
+      nwcUri: sanitized,
+    };
+
+    if (typeof defaultZap === "number" && Number.isFinite(defaultZap)) {
+      const rounded = Math.max(0, Math.round(defaultZap));
+      merged.defaultZap = Math.min(this.maxWalletDefaultZap, rounded);
+    } else if (defaultZap === null) {
+      merged.defaultZap = null;
+    }
+
+    if (this.payments && isFunction(this.payments.ensureWallet)) {
+      return this.payments.ensureWallet({ settings: merged });
+    }
+
+    if (this.logger && isFunction(this.logger.warn)) {
+      this.logger.warn(
+        "[wallet] Falling back to stub ensureWallet implementation. Returning settings without performing a connection test.",
+      );
+    }
+    return merged;
+  }
+
+  async clearStoredNwcSettings(pubkey, { silent = false } = {}) {
+    const normalized = this.getNormalizedPubkey(pubkey);
+    if (!normalized) {
+      return false;
+    }
+
+    try {
+      await this.clearSettings(normalized);
+    } catch (error) {
+      if (this.logger && isFunction(this.logger.warn)) {
+        this.logger.warn(
+          `[nwcSettings] Failed to clear settings for ${normalized}:`,
+          error,
+        );
+      }
+      if (!silent && this.notifyError) {
+        this.notifyError("Failed to clear wallet settings for this account.");
+      }
+      try {
+        await this.saveSettings(normalized, this.createDefaultNwcSettings());
+      } catch (persistError) {
+        if (this.logger && isFunction(this.logger.warn)) {
+          this.logger.warn(
+            `[nwcSettings] Failed to overwrite settings for ${normalized}:`,
+            persistError,
+          );
+        }
+      }
+      this.cache.delete(normalized);
+      return false;
+    }
+
+    this.cache.delete(normalized);
+    return true;
+  }
+
+  async onLogin({ pubkey, previousPubkey, identityChanged } = {}) {
+    if (identityChanged) {
+      this.onIdentityChanged();
+    }
+
+    const normalizedActive = this.getNormalizedPubkey(
+      pubkey !== undefined ? pubkey : this.getActivePubkey(),
+    );
+    const normalizedPrevious = this.getNormalizedPubkey(previousPubkey);
+
+    if (
+      normalizedPrevious &&
+      (!normalizedActive || normalizedPrevious !== normalizedActive)
+    ) {
+      await this.clearStoredNwcSettings(normalizedPrevious, { silent: true });
+    }
+
+    if (normalizedActive) {
+      await this.hydrateNwcSettingsForPubkey(normalizedActive);
+    }
+
+    return this.getActiveNwcSettings();
+  }
+
+  async onLogout({ pubkey, previousPubkey } = {}) {
+    const normalizedPrevious = this.getNormalizedPubkey(
+      previousPubkey !== undefined ? previousPubkey : pubkey,
+    );
+    if (normalizedPrevious) {
+      await this.clearStoredNwcSettings(normalizedPrevious, { silent: false });
+    }
+    this.clearCache();
+    return this.createDefaultNwcSettings();
+  }
+
+  onIdentityChanged() {
+    this.clearCache();
+  }
+}
diff --git a/js/services/playbackService.js b/js/services/playbackService.js
new file mode 100644
index 00000000..ae7278fc
--- /dev/null
+++ b/js/services/playbackService.js
@@ -0,0 +1,768 @@
+// js/services/playbackService.js
+
+class SimpleEventEmitter {
+  constructor(logger = null) {
+    this.logger = typeof logger === "function" ? logger : null;
+    this.listeners = new Map();
+  }
+
+  on(eventName, handler) {
+    if (typeof handler !== "function") {
+      return () => {};
+    }
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, new Set());
+    }
+    const handlers = this.listeners.get(eventName);
+    handlers.add(handler);
+    return () => {
+      handlers.delete(handler);
+      if (!handlers.size) {
+        this.listeners.delete(eventName);
+      }
+    };
+  }
+
+  emit(eventName, detail) {
+    const handlers = this.listeners.get(eventName);
+    if (!handlers || !handlers.size) {
+      return;
+    }
+    for (const handler of Array.from(handlers)) {
+      try {
+        handler(detail);
+      } catch (err) {
+        if (this.logger) {
+          this.logger("[PlaybackService] Listener error", err);
+        }
+      }
+    }
+  }
+}
+
+const HOSTED_URL_SUCCESS_MESSAGE = "✅ Streaming from hosted URL";
+const DEFAULT_UNSUPPORTED_BTITH_MESSAGE =
+  "This magnet link is missing a compatible BitTorrent v1 info hash.";
+
+export class PlaybackService {
+  constructor({
+    logger,
+    torrentClient,
+    deriveTorrentPlaybackConfig,
+    isValidMagnetUri,
+    urlFirstEnabled = true,
+    analyticsCallbacks = {},
+  } = {}) {
+    if (typeof logger === "function") {
+      this.logger = logger;
+    } else if (logger && typeof logger.log === "function") {
+      this.logger = (...args) => logger.log(...args);
+    } else {
+      this.logger = () => {};
+    }
+
+    this.torrentClient = torrentClient;
+    this.deriveTorrentPlaybackConfig = deriveTorrentPlaybackConfig;
+    this.isValidMagnetUri = isValidMagnetUri;
+    this.urlFirstEnabled = !!urlFirstEnabled;
+    this.analyticsCallbacks = analyticsCallbacks || {};
+    this.currentSession = null;
+  }
+
+  log(...args) {
+    try {
+      this.logger(...args);
+    } catch (err) {
+      console.warn("[PlaybackService] logger threw", err);
+    }
+  }
+
+  handleAnalyticsEvent(eventName, detail) {
+    const callbacks = this.analyticsCallbacks || {};
+    if (typeof callbacks.onEvent === "function") {
+      try {
+        callbacks.onEvent(eventName, detail);
+      } catch (err) {
+        this.log("[PlaybackService] onEvent callback threw", err);
+      }
+    }
+    const specific = callbacks[eventName];
+    if (typeof specific === "function") {
+      try {
+        specific(detail);
+      } catch (err) {
+        this.log(`[PlaybackService] ${eventName} callback threw`, err);
+      }
+    }
+  }
+
+  prepareVideoElement(videoElement) {
+    if (!videoElement) {
+      return;
+    }
+    const storedUnmuted = localStorage.getItem("unmutedAutoplay");
+    const userWantsUnmuted = storedUnmuted === "true";
+    videoElement.muted = !userWantsUnmuted;
+
+    if (!videoElement.dataset.autoplayBound) {
+      videoElement.addEventListener("volumechange", () => {
+        localStorage.setItem(
+          "unmutedAutoplay",
+          (!videoElement.muted).toString()
+        );
+      });
+      videoElement.dataset.autoplayBound = "true";
+    }
+  }
+
+  registerUrlPlaybackWatchdogs(
+    videoElement,
+    { stallMs = 8000, onSuccess, onFallback } = {}
+  ) {
+    if (!videoElement || typeof onFallback !== "function") {
+      return () => {};
+    }
+
+    const normalizedStallMs = Number.isFinite(stallMs) && stallMs > 0 ? stallMs : 0;
+    this.log(
+      `[registerUrlPlaybackWatchdogs] Installing watchdogs (stallMs=${normalizedStallMs}) readyState=${videoElement.readyState} networkState=${videoElement.networkState}`
+    );
+
+    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);
+      }
+    };
+
+    const triggerFallback = (reason) => {
+      if (!active) {
+        return;
+      }
+      this.log(
+        `[registerUrlPlaybackWatchdogs] Triggering fallback (${reason}) readyState=${videoElement.readyState} networkState=${videoElement.networkState}`
+      );
+      cleanup();
+      onFallback(reason);
+    };
+
+    const handleSuccess = () => {
+      if (!active) {
+        return;
+      }
+      this.log(
+        "[registerUrlPlaybackWatchdogs] Hosted playback signaled success; clearing watchdogs."
+      );
+      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("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();
+    }
+
+    return () => {
+      this.log("[registerUrlPlaybackWatchdogs] Manual watchdog cleanup invoked.");
+      cleanup();
+    };
+  }
+
+  cleanupWatchdog() {
+    if (this.currentSession) {
+      this.currentSession.cleanupWatchdog();
+    }
+  }
+
+  createSession(options = {}) {
+    const session = new PlaybackSession(this, options);
+    this.currentSession = session;
+    return session;
+  }
+}
+
+class PlaybackSession extends SimpleEventEmitter {
+  constructor(service, options = {}) {
+    super((message, ...args) => service.log(message, ...args));
+    this.service = service;
+    this.options = options;
+    this.watchdogCleanup = null;
+    this.result = { source: null };
+    this.finished = false;
+    this.startPromise = null;
+
+    this.sanitizedUrl =
+      typeof options.url === "string" ? options.url.trim() : "";
+    this.trimmedMagnet =
+      typeof options.magnet === "string" ? options.magnet.trim() : "";
+    this.requestSignature =
+      typeof options.requestSignature === "string"
+        ? options.requestSignature
+        : JSON.stringify({
+            url: this.sanitizedUrl,
+            magnet: this.trimmedMagnet,
+          });
+
+    if (typeof service.deriveTorrentPlaybackConfig === "function") {
+      this.playbackConfig = service.deriveTorrentPlaybackConfig({
+        magnet: this.trimmedMagnet,
+        url: this.sanitizedUrl,
+        logger: (message) => service.log(message),
+        appProtocol: options.appProtocol,
+      });
+    } else {
+      this.playbackConfig = {
+        magnet: this.trimmedMagnet,
+        fallbackMagnet: "",
+        provided: !!this.trimmedMagnet,
+        usedInfoHash: false,
+        originalInput: this.trimmedMagnet,
+        didMutate: false,
+        infoHash: "",
+      };
+    }
+
+    const magnetIsUsable =
+      typeof service.isValidMagnetUri === "function"
+        ? service.isValidMagnetUri(this.playbackConfig.magnet)
+        : false;
+
+    this.magnetForPlayback = magnetIsUsable
+      ? this.playbackConfig.magnet
+      : "";
+    this.fallbackMagnet = magnetIsUsable
+      ? this.playbackConfig.fallbackMagnet
+      : "";
+    this.magnetProvided = !!this.playbackConfig.provided;
+  }
+
+  isActive() {
+    return !this.finished;
+  }
+
+  matchesRequestSignature(signature) {
+    if (!this.isActive()) {
+      return false;
+    }
+    if (typeof signature !== "string" || !signature) {
+      return false;
+    }
+    return signature === this.requestSignature;
+  }
+
+  getResult() {
+    return this.result;
+  }
+
+  getPlaybackConfig() {
+    return this.playbackConfig;
+  }
+
+  getMagnetForPlayback() {
+    return this.magnetForPlayback;
+  }
+
+  getFallbackMagnet() {
+    return this.fallbackMagnet;
+  }
+
+  getMagnetProvided() {
+    return this.magnetProvided;
+  }
+
+  cleanupWatchdog() {
+    if (typeof this.watchdogCleanup === "function") {
+      try {
+        this.watchdogCleanup();
+      } catch (err) {
+        this.service.log("[PlaybackSession] Watchdog cleanup threw", err);
+      } finally {
+        this.watchdogCleanup = null;
+      }
+    }
+  }
+
+  registerWatchdogs(videoElement, options) {
+    this.cleanupWatchdog();
+    this.watchdogCleanup = this.service.registerUrlPlaybackWatchdogs(
+      videoElement,
+      options
+    );
+  }
+
+  attachDebugListeners(videoElement) {
+    if (!videoElement) {
+      return () => {};
+    }
+
+    const debugEvents = [
+      "loadedmetadata",
+      "loadeddata",
+      "canplay",
+      "canplaythrough",
+      "play",
+      "playing",
+      "pause",
+      "stalled",
+      "suspend",
+      "waiting",
+      "ended",
+      "error",
+    ];
+
+    const handlers = [];
+    for (const eventName of debugEvents) {
+      const handler = () => {
+        const { readyState, networkState, currentTime, paused, error } =
+          videoElement;
+        let suffix =
+          `readyState=${readyState} networkState=${networkState} currentTime=${
+            Number.isFinite(currentTime) ? currentTime.toFixed(2) : currentTime
+          } paused=${paused}`;
+        if (eventName === "error" && error) {
+          const errorMessage = error.message || "";
+          suffix += ` code=${error.code || ""} message=${errorMessage}`;
+        }
+        this.service.log(
+          `[playVideoWithFallback] <video> event ${eventName}; ${suffix}`
+        );
+      };
+      videoElement.addEventListener(eventName, handler);
+      handlers.push([eventName, handler]);
+    }
+
+    return () => {
+      if (!handlers.length) {
+        return;
+      }
+      for (const [eventName, handler] of handlers) {
+        videoElement.removeEventListener(eventName, handler);
+      }
+      handlers.length = 0;
+    };
+  }
+
+  async start() {
+    if (this.startPromise) {
+      return this.startPromise;
+    }
+    this.startPromise = this.execute();
+    return this.startPromise;
+  }
+
+  async execute() {
+    const {
+      videoElement,
+      waitForCleanup,
+      cancelPendingViewLogging,
+      clearActiveIntervals,
+      showModalWithPoster,
+      teardownVideoElement,
+      probeUrl,
+      playViaWebTorrent,
+      autoplay,
+      unsupportedBtihMessage = DEFAULT_UNSUPPORTED_BTITH_MESSAGE,
+    } = this.options;
+
+    this.result = { source: null };
+    this.finished = false;
+
+    const detail = {
+      urlProvided: !!this.sanitizedUrl,
+      magnetProvided: this.magnetProvided,
+      magnetUsable: !!this.magnetForPlayback,
+    };
+    this.service.handleAnalyticsEvent("session-start", detail);
+    this.emit("session-start", detail);
+
+    try {
+      if (typeof waitForCleanup === "function") {
+        await waitForCleanup();
+      }
+      if (typeof cancelPendingViewLogging === "function") {
+        cancelPendingViewLogging();
+      }
+
+      if (!videoElement) {
+        throw new Error("Video element is not ready for playback.");
+      }
+
+      if (typeof showModalWithPoster === "function") {
+        await Promise.resolve(showModalWithPoster());
+      }
+
+      this.emit("status", { message: "Preparing video..." });
+
+      if (typeof clearActiveIntervals === "function") {
+        clearActiveIntervals();
+      }
+
+      this.service.prepareVideoElement(videoElement);
+
+      if (
+        this.service.torrentClient &&
+        typeof this.service.torrentClient.cleanup === "function"
+      ) {
+        await this.service.torrentClient.cleanup();
+      }
+
+      const activeVideoEl =
+        typeof teardownVideoElement === "function"
+          ? teardownVideoElement(videoElement) || videoElement
+          : videoElement;
+
+      if (!activeVideoEl) {
+        throw new Error("Video element is not ready for playback.");
+      }
+
+      this.options.videoElement = activeVideoEl;
+      this.emit("video-prepared", { videoElement: activeVideoEl });
+      this.emit("view-logging-request", { videoElement: activeVideoEl });
+
+      const cleanupDebugListeners = this.attachDebugListeners(activeVideoEl);
+      let cleanupHostedUrlStatusListeners = () => {};
+
+      const httpsUrl = this.sanitizedUrl;
+      const webSeedCandidates = httpsUrl ? [httpsUrl] : [];
+
+      let fallbackStarted = false;
+      const startTorrentFallback = async (reason) => {
+        if (fallbackStarted) {
+          this.service.log(
+            `[playVideoWithFallback] Duplicate fallback request ignored (${reason}).`
+          );
+          return null;
+        }
+        fallbackStarted = true;
+        this.cleanupWatchdog();
+        cleanupHostedUrlStatusListeners();
+        cleanupDebugListeners();
+
+        if (activeVideoEl) {
+          try {
+            activeVideoEl.pause();
+          } catch (err) {
+            this.service.log(
+              "[playVideoWithFallback] Ignoring pause error before torrent fallback:",
+              err
+            );
+          }
+          try {
+            activeVideoEl.removeAttribute("src");
+          } catch (err) {
+            // ignore attribute removal errors
+          }
+          activeVideoEl.src = "";
+          activeVideoEl.srcObject = null;
+          try {
+            activeVideoEl.load();
+          } catch (err) {
+            this.service.log(
+              "[playVideoWithFallback] Ignoring load error before torrent fallback:",
+              err
+            );
+          }
+        }
+
+        if (!this.magnetForPlayback) {
+          const message =
+            "Hosted playback failed and no magnet fallback is available.";
+          this.emit("status", { message });
+          this.emit("sourcechange", { source: null });
+          const error = new Error(message);
+          this.service.handleAnalyticsEvent("error", { error });
+          this.emit("error", { error, message });
+          this.result = { source: null, error };
+          return null;
+        }
+
+        this.emit("status", { message: "Switching to WebTorrent..." });
+        this.service.handleAnalyticsEvent("fallback", { reason });
+        this.emit("fallback", { reason });
+
+        if (typeof playViaWebTorrent !== "function") {
+          const error = new Error("No torrent playback handler provided.");
+          this.service.handleAnalyticsEvent("error", { error });
+          this.emit("error", { error, message: error.message });
+          this.result = { source: null, error };
+          return null;
+        }
+
+        const torrentInstance = await playViaWebTorrent(this.magnetForPlayback, {
+          fallbackMagnet: this.fallbackMagnet,
+          urlList: webSeedCandidates,
+        });
+        this.service.handleAnalyticsEvent("sourcechange", { source: "torrent" });
+        this.emit("sourcechange", { source: "torrent" });
+        if (typeof autoplay === "function") {
+          autoplay();
+        }
+        this.result = { source: "torrent", torrentInstance };
+        return torrentInstance;
+      };
+
+      if (this.service.urlFirstEnabled && httpsUrl) {
+        this.emit("status", { message: "Checking hosted URL..." });
+        this.service.log(
+          `[playVideoWithFallback] Probing hosted URL ${httpsUrl} (readyState=${activeVideoEl.readyState} networkState=${activeVideoEl.networkState}).`
+        );
+
+        let hostedStatusResolved = false;
+        const hostedStatusHandlers = [];
+        const addHostedStatusListener = (eventName, handler, options) => {
+          if (!activeVideoEl) {
+            return;
+          }
+          activeVideoEl.addEventListener(eventName, handler, options);
+          hostedStatusHandlers.push([eventName, handler, options]);
+        };
+        const markHostedUrlAsLive = () => {
+          if (hostedStatusResolved) {
+            return;
+          }
+          hostedStatusResolved = true;
+          this.emit("status", { message: HOSTED_URL_SUCCESS_MESSAGE });
+          cleanupHostedUrlStatusListeners();
+        };
+        const maybeMarkHostedUrl = () => {
+          if (
+            hostedStatusResolved ||
+            !activeVideoEl ||
+            activeVideoEl.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
+          ) {
+            return;
+          }
+          if (activeVideoEl.currentTime > 0 || !activeVideoEl.paused) {
+            markHostedUrlAsLive();
+          }
+        };
+        cleanupHostedUrlStatusListeners = () => {
+          if (!hostedStatusHandlers.length || !activeVideoEl) {
+            hostedStatusHandlers.length = 0;
+            cleanupHostedUrlStatusListeners = () => {};
+            return;
+          }
+          for (const [eventName, handler, options] of hostedStatusHandlers) {
+            activeVideoEl.removeEventListener(eventName, handler, options);
+          }
+          hostedStatusHandlers.length = 0;
+          cleanupHostedUrlStatusListeners = () => {};
+        };
+        addHostedStatusListener("playing", markHostedUrlAsLive, { once: true });
+        addHostedStatusListener("loadeddata", maybeMarkHostedUrl);
+        addHostedStatusListener("canplay", maybeMarkHostedUrl);
+        addHostedStatusListener(
+          "error",
+          () => {
+            cleanupHostedUrlStatusListeners();
+            cleanupDebugListeners();
+          },
+          { once: true }
+        );
+
+        const probeResult =
+          typeof probeUrl === "function" ? await probeUrl(httpsUrl) : null;
+        const probeOutcome = probeResult?.outcome || "error";
+        const shouldAttemptHosted =
+          probeOutcome !== "bad" && probeOutcome !== "error";
+
+        this.service.log(
+          `[playVideoWithFallback] Hosted URL probe outcome=${probeOutcome} shouldAttemptHosted=${shouldAttemptHosted}`
+        );
+
+        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.registerWatchdogs(activeVideoEl, {
+              stallMs,
+              onSuccess: () => outcomeResolver({ status: "success" }),
+              onFallback: (reason) => {
+                if (autoplayBlocked && reason === "stall") {
+                  this.service.log(
+                    "[playVideoWithFallback] Autoplay blocked; waiting for user gesture before falling back."
+                  );
+                  this.emit("status", {
+                    message: "Press play to start the hosted video.",
+                  });
+                  this.emit("autoplay-blocked", { reason });
+                  attachWatchdogs({ stallMs: 0 });
+                  return;
+                }
+
+                outcomeResolver({ status: "fallback", reason });
+              },
+            });
+          };
+
+          attachWatchdogs({ stallMs: 8000 });
+
+          const handleFatalPlaybackError = (err) => {
+            this.service.log(
+              "[playVideoWithFallback] Direct URL playback threw:",
+              err
+            );
+            outcomeResolver({ status: "fallback", reason: "play-error" });
+          };
+
+          try {
+            activeVideoEl.src = httpsUrl;
+            const playPromise = activeVideoEl.play();
+            if (playPromise && typeof playPromise.catch === "function") {
+              playPromise.catch((err) => {
+                if (err?.name === "NotAllowedError") {
+                  autoplayBlocked = true;
+                  this.service.log(
+                    "[playVideoWithFallback] Autoplay blocked by browser; awaiting user interaction.",
+                    err
+                  );
+                  this.emit("status", {
+                    message: "Press play to start the hosted video.",
+                  });
+                  this.cleanupWatchdog();
+                  attachWatchdogs({ stallMs: 0 });
+                  const restoreOnPlay = () => {
+                    activeVideoEl.removeEventListener("play", restoreOnPlay);
+                    this.cleanupWatchdog();
+                    autoplayBlocked = false;
+                    attachWatchdogs({ stallMs: 8000 });
+                  };
+                  activeVideoEl.addEventListener("play", restoreOnPlay, {
+                    once: true,
+                  });
+                  return;
+                }
+                handleFatalPlaybackError(err);
+              });
+            }
+          } catch (err) {
+            handleFatalPlaybackError(err);
+          }
+
+          const playbackOutcome = await playbackOutcomePromise;
+          if (playbackOutcome?.status === "success") {
+            this.emit("poster-remove", { reason: "http-success" });
+            this.service.handleAnalyticsEvent("sourcechange", {
+              source: "url",
+            });
+            this.emit("sourcechange", { source: "url" });
+            cleanupHostedUrlStatusListeners();
+            cleanupDebugListeners();
+            this.result = { source: "url" };
+            return this.result;
+          }
+
+          const fallbackReason =
+            playbackOutcome?.reason || "watchdog-triggered";
+          const torrentInstance = await startTorrentFallback(fallbackReason);
+          this.result = torrentInstance
+            ? { source: "torrent", torrentInstance }
+            : this.result;
+          return this.result;
+        }
+
+        this.service.log(
+          `[playVideoWithFallback] Hosted URL probe reported "${probeOutcome}"; deferring to WebTorrent.`
+        );
+        cleanupHostedUrlStatusListeners();
+        cleanupDebugListeners();
+      }
+
+      if (this.magnetForPlayback) {
+        const torrentInstance = await startTorrentFallback("magnet-primary");
+        this.result = torrentInstance
+          ? { source: "torrent", torrentInstance }
+          : this.result;
+        return this.result;
+      }
+
+      const message = this.magnetProvided && !this.magnetForPlayback
+        ? unsupportedBtihMessage
+        : "No playable source found.";
+      this.emit("status", { message });
+      this.service.handleAnalyticsEvent("sourcechange", { source: null });
+      this.emit("sourcechange", { source: null });
+      cleanupDebugListeners();
+      const error = new Error(message);
+      this.service.handleAnalyticsEvent("error", { error });
+      this.emit("error", { error, message });
+      this.result = { source: null, error };
+      return this.result;
+    } catch (error) {
+      this.service.log("Error in playVideoWithFallback:", error);
+      const message = error && error.message
+        ? `Playback error: ${error.message}`
+        : "Playback error";
+      this.service.handleAnalyticsEvent("error", { error });
+      this.emit("error", { error, message });
+      this.result = { source: null, error };
+      return this.result;
+    } finally {
+      this.cleanupWatchdog();
+      this.finished = true;
+      if (this.result) {
+        this.emit("finished", this.result);
+      }
+    }
+  }
+}
+
+export default PlaybackService;
diff --git a/js/services/r2Service.js b/js/services/r2Service.js
new file mode 100644
index 00000000..2e45869c
--- /dev/null
+++ b/js/services/r2Service.js
@@ -0,0 +1,821 @@
+import {
+  loadR2Settings,
+  saveR2Settings,
+  clearR2Settings,
+  buildR2Key,
+  buildPublicUrl,
+  mergeBucketEntry,
+  sanitizeBaseDomain,
+} from "../r2.js";
+import {
+  sanitizeBucketName,
+  ensureBucket,
+  putCors,
+  attachCustomDomainAndWait,
+  setManagedDomain,
+  deriveShortSubdomain,
+} from "../storage/r2-mgmt.js";
+import {
+  makeR2Client,
+  multipartUpload,
+  ensureBucketCors,
+} from "../storage/r2-s3.js";
+import { truncateMiddle } from "../utils/formatters.js";
+
+const STATUS_VARIANTS = new Set(["info", "success", "error", "warning"]);
+
+function createDefaultSettings() {
+  return {
+    accountId: "",
+    accessKeyId: "",
+    secretAccessKey: "",
+    apiToken: "",
+    zoneId: "",
+    baseDomain: "",
+    buckets: {},
+  };
+}
+
+class R2Service {
+  constructor() {
+    this.listeners = new Map();
+    this.cloudflareSettings = null;
+    this.cloudflareAdvancedVisible = false;
+  }
+
+  on(event, handler) {
+    if (typeof handler !== "function") {
+      return () => {};
+    }
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    const handlers = this.listeners.get(event);
+    handlers.add(handler);
+    return () => {
+      handlers.delete(handler);
+      if (!handlers.size) {
+        this.listeners.delete(event);
+      }
+    };
+  }
+
+  emit(event, detail) {
+    const handlers = this.listeners.get(event);
+    if (!handlers) {
+      return;
+    }
+    for (const handler of handlers) {
+      try {
+        handler(detail);
+      } catch (err) {
+        console.error("[r2Service] Listener error for", event, err);
+      }
+    }
+  }
+
+  getSettings() {
+    return this.cloudflareSettings || createDefaultSettings();
+  }
+
+  setSettings(settings) {
+    this.cloudflareSettings = settings ? { ...settings } : null;
+    this.emit("settingsChanged", { settings: this.getSettings() });
+  }
+
+  getCloudflareAdvancedVisibility() {
+    return Boolean(this.cloudflareAdvancedVisible);
+  }
+
+  setCloudflareAdvancedVisibility(visible) {
+    const isVisible = Boolean(visible);
+    if (this.cloudflareAdvancedVisible === isVisible) {
+      return;
+    }
+    this.cloudflareAdvancedVisible = isVisible;
+    this.emit("advancedVisibilityChange", { visible: isVisible });
+  }
+
+  normalizeStatusVariant(variant) {
+    if (STATUS_VARIANTS.has(variant)) {
+      return variant;
+    }
+    return "info";
+  }
+
+  setCloudflareSettingsStatus(message = "", variant = "info") {
+    this.emit("settingsStatus", {
+      message: message || "",
+      variant: this.normalizeStatusVariant(variant),
+    });
+  }
+
+  setCloudflareUploadStatus(message = "", variant = "info") {
+    this.emit("uploadStatus", {
+      message: message || "",
+      variant: this.normalizeStatusVariant(variant),
+    });
+  }
+
+  setCloudflareUploading(isUploading) {
+    this.emit("uploadStateChange", { isUploading: Boolean(isUploading) });
+  }
+
+  updateCloudflareProgress(fraction) {
+    this.emit("uploadProgress", { fraction });
+  }
+
+  buildNip71MetadataForUpload(existingMetadata, { publicUrl = "", file = null } = {}) {
+    const base =
+      existingMetadata && typeof existingMetadata === "object"
+        ? { ...existingMetadata }
+        : {};
+
+    const cloneImetaVariant = (variant) => {
+      if (!variant || typeof variant !== "object") {
+        return {
+          m: "",
+          dim: "",
+          url: "",
+          x: "",
+          image: [],
+          fallback: [],
+          service: [],
+          autoGenerated: true,
+        };
+      }
+      return {
+        ...variant,
+        image: Array.isArray(variant.image) ? [...variant.image] : [],
+        fallback: Array.isArray(variant.fallback) ? [...variant.fallback] : [],
+        service: Array.isArray(variant.service) ? [...variant.service] : [],
+      };
+    };
+
+    const imetaList = Array.isArray(base.imeta)
+      ? base.imeta.map((variant) => cloneImetaVariant(variant))
+      : [];
+
+    if (!imetaList.length) {
+      imetaList.push({
+        m: "",
+        dim: "",
+        url: "",
+        x: "",
+        image: [],
+        fallback: [],
+        service: [],
+        autoGenerated: true,
+      });
+    } else {
+      const primary = imetaList[0];
+      if (!Array.isArray(primary.image)) primary.image = [];
+      if (!Array.isArray(primary.fallback)) primary.fallback = [];
+      if (!Array.isArray(primary.service)) primary.service = [];
+    }
+
+    const primaryVariant = imetaList[0];
+    const normalizedUrl =
+      typeof publicUrl === "string" ? publicUrl.trim() : String(publicUrl || "").trim();
+    if (normalizedUrl && (!primaryVariant.url || !String(primaryVariant.url).trim())) {
+      primaryVariant.url = normalizedUrl;
+    }
+
+    const mimeType =
+      file && typeof file.type === "string" ? file.type.trim() : "";
+    if (mimeType && (!primaryVariant.m || !String(primaryVariant.m).trim())) {
+      primaryVariant.m = mimeType;
+    }
+
+    base.imeta = imetaList;
+
+    return base;
+  }
+
+  populateCloudflareSettingsInputs(settings) {
+    const data = {
+      accountId: settings?.accountId || "",
+      accessKeyId: settings?.accessKeyId || "",
+      secretAccessKey: settings?.secretAccessKey || "",
+      apiToken: settings?.apiToken || "",
+      zoneId: settings?.zoneId || "",
+      baseDomain: settings?.baseDomain || "",
+    };
+
+    const hasAdvancedValues = Boolean(
+      (data.apiToken && data.apiToken.length > 0) ||
+        (data.zoneId && data.zoneId.length > 0) ||
+        (data.baseDomain && data.baseDomain.length > 0)
+    );
+
+    if (hasAdvancedValues) {
+      this.setCloudflareAdvancedVisibility(true);
+    } else if (!this.cloudflareAdvancedVisible) {
+      this.setCloudflareAdvancedVisibility(false);
+    }
+
+    this.setCloudflareSettingsStatus("");
+    this.emit("settingsPopulated", { settings: data });
+  }
+
+  async loadSettings() {
+    try {
+      const settings = await loadR2Settings();
+      this.setSettings(settings);
+      this.populateCloudflareSettingsInputs(settings);
+      return settings;
+    } catch (err) {
+      console.error("Failed to load Cloudflare settings:", err);
+      this.setSettings(createDefaultSettings());
+      this.populateCloudflareSettingsInputs(this.getSettings());
+      this.setCloudflareSettingsStatus(
+        "Failed to load saved settings.",
+        "error"
+      );
+      throw err;
+    }
+  }
+
+  async handleCloudflareSettingsSubmit(formValues = {}, { quiet = false } = {}) {
+    const accountId = String(formValues.accountId || "").trim();
+    const accessKeyId = String(formValues.accessKeyId || "").trim();
+    const secretAccessKey = String(formValues.secretAccessKey || "").trim();
+    const apiToken = String(formValues.apiToken || "").trim();
+    const zoneId = String(formValues.zoneId || "").trim();
+    const baseDomain = sanitizeBaseDomain(formValues.baseDomain || "");
+
+    if (!accountId || !accessKeyId || !secretAccessKey) {
+      if (!quiet) {
+        this.setCloudflareSettingsStatus(
+          "Account ID, Access Key ID, and Secret are required.",
+          "error"
+        );
+      }
+      return false;
+    }
+
+    let buckets = { ...(this.getSettings().buckets || {}) };
+    const previousAccount = this.getSettings().accountId || "";
+    const previousBaseDomain = this.getSettings().baseDomain || "";
+    const previousZoneId = this.getSettings().zoneId || "";
+    if (
+      previousAccount !== accountId ||
+      previousBaseDomain !== baseDomain ||
+      previousZoneId !== zoneId
+    ) {
+      buckets = {};
+    }
+
+    const updatedSettings = {
+      accountId,
+      accessKeyId,
+      secretAccessKey,
+      apiToken,
+      zoneId,
+      baseDomain,
+      buckets,
+    };
+
+    try {
+      const saved = await saveR2Settings(updatedSettings);
+      this.setSettings(saved);
+      this.populateCloudflareSettingsInputs(saved);
+      if (!quiet) {
+        this.setCloudflareSettingsStatus("Settings saved locally.", "success");
+      }
+      return true;
+    } catch (err) {
+      console.error("Failed to save Cloudflare settings:", err);
+      if (!quiet) {
+        this.setCloudflareSettingsStatus(
+          "Failed to save settings. Check console for details.",
+          "error"
+        );
+      }
+      return false;
+    }
+  }
+
+  async saveSettings(formValues = {}, options = {}) {
+    return this.handleCloudflareSettingsSubmit(formValues, options);
+  }
+
+  async handleCloudflareClearSettings() {
+    try {
+      await clearR2Settings();
+      const refreshed = await loadR2Settings();
+      this.setSettings(refreshed);
+      this.populateCloudflareSettingsInputs(refreshed);
+      this.setCloudflareAdvancedVisibility(false);
+      this.setCloudflareSettingsStatus("Settings cleared.", "success");
+      return true;
+    } catch (err) {
+      console.error("Failed to clear Cloudflare settings:", err);
+      this.setCloudflareSettingsStatus("Failed to clear settings.", "error");
+      return false;
+    }
+  }
+
+  async clearSettings() {
+    return this.handleCloudflareClearSettings();
+  }
+
+  getCorsOrigins() {
+    const origins = new Set();
+    if (typeof window !== "undefined" && window.location) {
+      const origin = window.location.origin;
+      if (origin && origin !== "null") {
+        origins.add(origin);
+      }
+      if (origin && origin.startsWith("http://localhost")) {
+        origins.add(origin.replace("http://", "https://"));
+      }
+    }
+    return Array.from(origins);
+  }
+
+  deriveSubdomainForNpub(npub) {
+    try {
+      return deriveShortSubdomain(npub);
+    } catch (err) {
+      console.warn("Failed to derive short subdomain, falling back:", err);
+    }
+
+    const base = String(npub || "user")
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, "")
+      .replace(/^-+|[-]+$/g, "");
+    return base.slice(0, 32) || "user";
+  }
+
+  async ensureBucketConfigForNpub(npub) {
+    if (!npub || !this.cloudflareSettings) {
+      return null;
+    }
+
+    const accountId = (this.cloudflareSettings.accountId || "").trim();
+    const apiToken = (this.cloudflareSettings.apiToken || "").trim();
+    const zoneId = (this.cloudflareSettings.zoneId || "").trim();
+    const accessKeyId = (this.cloudflareSettings.accessKeyId || "").trim();
+    const secretAccessKey = (this.cloudflareSettings.secretAccessKey || "").trim();
+    const corsOrigins = this.getCorsOrigins();
+    const baseDomain = this.cloudflareSettings.baseDomain || "";
+
+    if (!accountId) {
+      throw new Error("Cloudflare account ID is missing.");
+    }
+
+    let entry = this.cloudflareSettings.buckets?.[npub] || null;
+
+    if (entry && entry.publicBaseUrl) {
+      if (apiToken) {
+        try {
+          await ensureBucket({
+            accountId,
+            bucket: entry.bucket,
+            token: apiToken,
+          });
+          await putCors({
+            accountId,
+            bucket: entry.bucket,
+            token: apiToken,
+            origins: corsOrigins,
+          });
+        } catch (err) {
+          console.warn("Failed to refresh bucket configuration:", err);
+        }
+      } else if (accessKeyId && secretAccessKey && corsOrigins.length > 0) {
+        try {
+          const s3 = makeR2Client({
+            accountId,
+            accessKeyId,
+            secretAccessKey,
+          });
+          await ensureBucketCors({
+            s3,
+            bucket: entry.bucket,
+            origins: corsOrigins,
+          });
+        } catch (err) {
+          console.warn("Failed to refresh bucket CORS via access keys:", err);
+        }
+      }
+      return {
+        entry,
+        usedManagedFallback: entry.domainType !== "custom",
+        customDomainStatus: entry.domainType === "custom" ? "active" : "skipped",
+      };
+    }
+
+    if (!apiToken) {
+      const bucketName = entry?.bucket || sanitizeBucketName(npub);
+      const manualCustomDomain = baseDomain
+        ? `https://${this.deriveSubdomainForNpub(npub)}.${baseDomain}`
+        : "";
+
+      let publicBaseUrl = entry?.publicBaseUrl || manualCustomDomain;
+      if (!publicBaseUrl) {
+        publicBaseUrl = `https://${bucketName}.${accountId}.r2.dev`;
+      }
+
+      if (!publicBaseUrl) {
+        throw new Error(
+          "No public bucket domain configured. Add an API token or configure the domain manually."
+        );
+      }
+
+      const manualEntry = {
+        bucket: bucketName,
+        publicBaseUrl,
+        domainType: publicBaseUrl.includes(".r2.dev") ? "managed" : "custom",
+        lastUpdated: Date.now(),
+      };
+
+      if (accessKeyId && secretAccessKey && corsOrigins.length > 0) {
+        try {
+          const s3 = makeR2Client({
+            accountId,
+            accessKeyId,
+            secretAccessKey,
+          });
+          await ensureBucketCors({
+            s3,
+            bucket: bucketName,
+            origins: corsOrigins,
+          });
+        } catch (corsErr) {
+          console.warn(
+            "Failed to ensure R2 CORS rules via access keys. Configure the bucket's CORS policy manually if uploads continue to fail.",
+            corsErr
+          );
+        }
+      }
+
+      let savedEntry = entry;
+      if (
+        !entry ||
+        entry.bucket !== manualEntry.bucket ||
+        entry.publicBaseUrl !== manualEntry.publicBaseUrl ||
+        entry.domainType !== manualEntry.domainType
+      ) {
+        const updatedSettings = await saveR2Settings(
+          mergeBucketEntry(this.getSettings(), npub, manualEntry)
+        );
+        this.setSettings(updatedSettings);
+        savedEntry = updatedSettings.buckets?.[npub] || manualEntry;
+      }
+
+      return {
+        entry: savedEntry,
+        usedManagedFallback: manualEntry.domainType !== "custom",
+        customDomainStatus:
+          manualEntry.domainType === "custom" ? "manual" : "managed",
+      };
+    }
+
+    const bucketName = entry?.bucket || sanitizeBucketName(npub);
+
+    await ensureBucket({ accountId, bucket: bucketName, token: apiToken });
+
+    try {
+      await putCors({
+        accountId,
+        bucket: bucketName,
+        token: apiToken,
+        origins: corsOrigins,
+      });
+    } catch (err) {
+      console.warn("Failed to apply R2 CORS rules:", err);
+    }
+
+    let publicBaseUrl = entry?.publicBaseUrl || "";
+    let domainType = entry?.domainType || "managed";
+    let usedManagedFallback = false;
+    let customDomainStatus = "skipped";
+
+    if (baseDomain && zoneId) {
+      const domain = `${this.deriveSubdomainForNpub(npub)}.${baseDomain}`;
+      try {
+        const custom = await attachCustomDomainAndWait({
+          accountId,
+          bucket: bucketName,
+          token: apiToken,
+          zoneId,
+          domain,
+          pollInterval: 2500,
+          timeoutMs: 120000,
+        });
+        customDomainStatus = custom?.status || "unknown";
+        if (custom?.active && custom?.url) {
+          publicBaseUrl = custom.url;
+          domainType = "custom";
+          try {
+            await setManagedDomain({
+              accountId,
+              bucket: bucketName,
+              token: apiToken,
+              enabled: false,
+            });
+          } catch (disableErr) {
+            console.warn("Failed to disable managed domain:", disableErr);
+          }
+        } else {
+          usedManagedFallback = true;
+        }
+      } catch (err) {
+        if (/already exists/i.test(err.message || "")) {
+          publicBaseUrl = `https://${domain}`;
+          domainType = "custom";
+          customDomainStatus = "active";
+          try {
+            await setManagedDomain({
+              accountId,
+              bucket: bucketName,
+              token: apiToken,
+              enabled: false,
+            });
+          } catch (disableErr) {
+            console.warn("Failed to disable managed domain:", disableErr);
+          }
+        } else {
+          console.warn("Failed to attach custom domain, falling back:", err);
+          usedManagedFallback = true;
+          customDomainStatus = "error";
+        }
+      }
+    }
+
+    if (!publicBaseUrl) {
+      const managed = await setManagedDomain({
+        accountId,
+        bucket: bucketName,
+        token: apiToken,
+        enabled: true,
+      });
+      publicBaseUrl = managed?.url || `https://${bucketName}.${accountId}.r2.dev`;
+      domainType = "managed";
+      usedManagedFallback = true;
+      customDomainStatus =
+        customDomainStatus === "skipped" ? "managed" : customDomainStatus;
+    }
+
+    const mergedEntry = {
+      bucket: bucketName,
+      publicBaseUrl,
+      domainType,
+      lastUpdated: Date.now(),
+    };
+    const updatedSettings = await saveR2Settings(
+      mergeBucketEntry(this.getSettings(), npub, mergedEntry)
+    );
+    this.setSettings(updatedSettings);
+    return { entry: mergedEntry, usedManagedFallback, customDomainStatus };
+  }
+
+  async updateCloudflareBucketPreview({ hasPubkey = false, npub = "" } = {}) {
+    if (!this.cloudflareSettings) {
+      const detail = {
+        text: "Save your credentials to configure R2.",
+        title: "",
+      };
+      this.emit("bucketPreview", detail);
+      return detail;
+    }
+
+    if (!hasPubkey) {
+      const detail = { text: "Login to preview your R2 bucket.", title: "" };
+      this.emit("bucketPreview", detail);
+      return detail;
+    }
+
+    if (!npub) {
+      const detail = { text: "Unable to encode npub.", title: "" };
+      this.emit("bucketPreview", detail);
+      return detail;
+    }
+
+    const entry = this.cloudflareSettings.buckets?.[npub];
+    if (!entry || !entry.publicBaseUrl) {
+      const detail = {
+        text: "Bucket will be auto-created on your next upload.",
+        title: "",
+      };
+      this.emit("bucketPreview", detail);
+      return detail;
+    }
+
+    const sampleKey = buildR2Key(npub, { name: "sample.mp4" });
+    const publicUrl = buildPublicUrl(entry.publicBaseUrl, sampleKey);
+    const fullPreview = `${entry.bucket} • ${publicUrl}`;
+
+    let displayHostAndPath = truncateMiddle(publicUrl, 72);
+    try {
+      const parsed = new URL(publicUrl);
+      const cleanPath = parsed.pathname.replace(/^\//, "");
+      const truncatedPath = truncateMiddle(cleanPath || sampleKey, 32);
+      displayHostAndPath = `${truncateMiddle(parsed.host, 32)}/${truncatedPath}`;
+    } catch (err) {
+      // ignore URL parse issues and fall back to the raw string
+    }
+
+    const truncatedBucket = truncateMiddle(entry.bucket, 28);
+    const detail = {
+      text: `${truncatedBucket} • ${displayHostAndPath}`,
+      title: fullPreview,
+    };
+    this.emit("bucketPreview", detail);
+    return detail;
+  }
+
+  async handleCloudflareUploadSubmit({
+    npub = "",
+    file = null,
+    metadata = {},
+    settingsInput = null,
+    publishVideoNote,
+    onReset,
+  } = {}) {
+    if (settingsInput) {
+      const saved = await this.handleCloudflareSettingsSubmit(settingsInput, {
+        quiet: true,
+      });
+      if (!saved) {
+        this.setCloudflareUploadStatus(
+          "Fix your R2 settings before uploading.",
+          "error"
+        );
+        return false;
+      }
+    }
+
+    if (!npub) {
+      this.setCloudflareUploadStatus("Unable to encode npub.", "error");
+      return false;
+    }
+
+    const title = String(metadata.title || "").trim();
+    if (!title) {
+      this.setCloudflareUploadStatus("Title is required.", "error");
+      return false;
+    }
+
+    if (!file) {
+      this.setCloudflareUploadStatus(
+        "Select a video or HLS file to upload.",
+        "error"
+      );
+      return false;
+    }
+
+    const description = String(metadata.description || "").trim();
+    const thumbnail = String(metadata.thumbnail || "").trim();
+    const magnet = String(metadata.magnet || "").trim();
+    const ws = String(metadata.ws || "").trim();
+    const xs = String(metadata.xs || "").trim();
+    const enableComments = metadata.enableComments !== false;
+
+    const accountId = (this.cloudflareSettings?.accountId || "").trim();
+    const accessKeyId = (this.cloudflareSettings?.accessKeyId || "").trim();
+    const secretAccessKey = (this.cloudflareSettings?.secretAccessKey || "").trim();
+
+    if (!accountId || !accessKeyId || !secretAccessKey) {
+      this.setCloudflareUploadStatus(
+        "Missing R2 credentials. Save them before uploading.",
+        "error"
+      );
+      return false;
+    }
+
+    this.setCloudflareUploadStatus("Preparing Cloudflare R2…", "info");
+    this.updateCloudflareProgress(0);
+    this.setCloudflareUploading(true);
+
+    let bucketResult = null;
+    try {
+      bucketResult = await this.ensureBucketConfigForNpub(npub);
+    } catch (err) {
+      console.error("Failed to prepare R2 bucket:", err);
+      this.setCloudflareUploadStatus(
+        err?.message ? `Bucket setup failed: ${err.message}` : "Bucket setup failed.",
+        "error"
+      );
+      this.setCloudflareUploading(false);
+      this.updateCloudflareProgress(Number.NaN);
+      return false;
+    }
+
+    const bucketEntry =
+      bucketResult?.entry || this.cloudflareSettings?.buckets?.[npub];
+
+    if (!bucketEntry || !bucketEntry.publicBaseUrl) {
+      this.setCloudflareUploadStatus(
+        "Bucket is missing a public domain. Check your Cloudflare settings.",
+        "error"
+      );
+      this.setCloudflareUploading(false);
+      this.updateCloudflareProgress(Number.NaN);
+      return false;
+    }
+
+    let statusMessage = `Uploading to ${bucketEntry.bucket}…`;
+    if (bucketResult?.usedManagedFallback) {
+      const baseDomain = this.cloudflareSettings?.baseDomain || "";
+      if (baseDomain) {
+        const customStatus = bucketResult?.customDomainStatus
+          ? ` (custom domain status: ${bucketResult.customDomainStatus})`
+          : "";
+        statusMessage = `Using managed r2.dev domain for ${bucketEntry.bucket}. Verify your Cloudflare zone${customStatus}. Uploading…`;
+      } else {
+        statusMessage = `Using managed r2.dev domain for ${bucketEntry.bucket}. Uploading…`;
+      }
+    }
+
+    this.setCloudflareUploadStatus(
+      statusMessage,
+      bucketResult?.usedManagedFallback ? "warning" : "info"
+    );
+
+    const key = buildR2Key(npub, file);
+    const publicUrl = buildPublicUrl(bucketEntry.publicBaseUrl, key);
+
+    try {
+      const s3 = makeR2Client({ accountId, accessKeyId, secretAccessKey });
+
+      await multipartUpload({
+        s3,
+        bucket: bucketEntry.bucket,
+        key,
+        file,
+        contentType: file.type,
+        onProgress: (fraction) => {
+          this.updateCloudflareProgress(fraction);
+        },
+      });
+
+      let publishOutcome = true;
+
+      if (typeof publishVideoNote !== "function") {
+        console.warn(
+          "publishVideoNote handler missing; skipping publish step."
+        );
+        publishOutcome = false;
+      } else {
+        const payload = {
+          title,
+          url: publicUrl,
+          magnet,
+          thumbnail,
+          description,
+          ws,
+          xs,
+          enableComments,
+        };
+
+        const mergedNip71 = this.buildNip71MetadataForUpload(metadata?.nip71, {
+          publicUrl,
+          file,
+        });
+        if (mergedNip71 && Object.keys(mergedNip71).length) {
+          payload.nip71 = mergedNip71;
+        }
+
+        const published = await publishVideoNote(payload, {
+          onSuccess: () => {
+            if (typeof onReset === "function") {
+              onReset();
+            }
+          },
+        });
+
+        publishOutcome = Boolean(published);
+        if (publishOutcome) {
+          this.setCloudflareUploadStatus(
+            `Published ${publicUrl}`,
+            "success"
+          );
+        }
+      }
+
+      return publishOutcome;
+    } catch (err) {
+      console.error("Cloudflare upload failed:", err);
+      this.setCloudflareUploadStatus(
+        err?.message ? `Upload failed: ${err.message}` : "Upload failed.",
+        "error"
+      );
+      return false;
+    } finally {
+      this.setCloudflareUploading(false);
+      this.updateCloudflareProgress(Number.NaN);
+      await this.updateCloudflareBucketPreview({ hasPubkey: true, npub });
+    }
+  }
+
+  async uploadVideo(params = {}) {
+    return this.handleCloudflareUploadSubmit(params);
+  }
+}
+
+const r2Service = new R2Service();
+
+export default r2Service;
diff --git a/js/services/watchHistoryTelemetry.js b/js/services/watchHistoryTelemetry.js
new file mode 100644
index 00000000..a34e7a35
--- /dev/null
+++ b/js/services/watchHistoryTelemetry.js
@@ -0,0 +1,599 @@
+import { isDevMode } from "../config.js";
+import { pointerArrayToKey } from "../utils/pointer.js";
+import {
+  ingestLocalViewEvent as defaultIngestLocalViewEvent,
+} from "../viewCounter.js";
+
+const DEFAULT_VIEW_THRESHOLD_SECONDS = 12;
+
+function normalizeString(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function sanitizeVideoMetadata(video) {
+  if (!video || typeof video !== "object") {
+    return null;
+  }
+
+  const createdAtCandidates = [
+    video.rootCreatedAt,
+    video.created_at,
+    video.createdAt,
+    video.publishedAt,
+  ];
+
+  let createdAt = null;
+  for (const candidate of createdAtCandidates) {
+    if (Number.isFinite(candidate)) {
+      createdAt = Math.floor(candidate);
+      break;
+    }
+  }
+
+  return {
+    id: typeof video.id === "string" ? video.id : "",
+    title: typeof video.title === "string" ? video.title : "",
+    thumbnail: typeof video.thumbnail === "string" ? video.thumbnail : "",
+    pubkey: typeof video.pubkey === "string" ? video.pubkey : "",
+    created_at: createdAt,
+    url: typeof video.url === "string" ? video.url : "",
+    magnet: typeof video.magnet === "string" ? video.magnet : "",
+    infoHash: typeof video.infoHash === "string" ? video.infoHash : "",
+    legacyInfoHash:
+      typeof video.legacyInfoHash === "string" ? video.legacyInfoHash : "",
+  };
+}
+
+export default class WatchHistoryTelemetry {
+  constructor({
+    watchHistoryService = null,
+    watchHistoryController = null,
+    nostrClient = null,
+    log,
+    normalizeHexPubkey,
+    getActiveUserPubkey,
+    ingestLocalViewEvent = defaultIngestLocalViewEvent,
+    viewThresholdSeconds = DEFAULT_VIEW_THRESHOLD_SECONDS,
+  } = {}) {
+    this.watchHistoryService = watchHistoryService;
+    this.watchHistoryController = watchHistoryController;
+    this.nostrClient = nostrClient;
+    this.log = typeof log === "function" ? log : () => {};
+    this.normalizeHexPubkey =
+      typeof normalizeHexPubkey === "function"
+        ? normalizeHexPubkey
+        : () => null;
+    this.getActiveUserPubkey =
+      typeof getActiveUserPubkey === "function" ? getActiveUserPubkey : () => null;
+    this.ingestLocalViewEvent =
+      typeof ingestLocalViewEvent === "function"
+        ? ingestLocalViewEvent
+        : defaultIngestLocalViewEvent;
+    this.viewThresholdSeconds = Number.isFinite(viewThresholdSeconds)
+      ? Math.max(0, viewThresholdSeconds)
+      : DEFAULT_VIEW_THRESHOLD_SECONDS;
+
+    this.watchHistoryMetadataEnabled = null;
+    this.watchHistoryPreferenceUnsubscribe = null;
+    this.playbackTelemetryState = null;
+    this.loggedViewPointerKeys = new Set();
+  }
+
+  destroy() {
+    this.resetPlaybackLoggingState();
+    this._clearPreferenceSubscription();
+    this.watchHistoryMetadataEnabled = null;
+  }
+
+  async initPreferenceSync() {
+    if (!this.watchHistoryService?.isEnabled?.()) {
+      this.watchHistoryMetadataEnabled = false;
+      return null;
+    }
+
+    this.refreshPreferenceSettings();
+
+    if (
+      typeof this.watchHistoryService.subscribe === "function" &&
+      !this.watchHistoryPreferenceUnsubscribe
+    ) {
+      try {
+        const unsubscribe = this.watchHistoryService.subscribe(
+          "metadata-preference",
+          (payload) => {
+            const previous = this.watchHistoryMetadataEnabled;
+            const enabled = payload?.enabled !== false;
+            this.watchHistoryMetadataEnabled = enabled;
+            if (previous === true && enabled === false) {
+              try {
+                this.watchHistoryService?.clearLocalMetadata?.();
+              } catch (error) {
+                if (isDevMode) {
+                  console.warn(
+                    "[watchHistoryTelemetry] Failed to clear cached metadata after toggle off:",
+                    error,
+                  );
+                }
+              }
+            }
+          },
+        );
+        if (typeof unsubscribe === "function") {
+          this.watchHistoryPreferenceUnsubscribe = unsubscribe;
+        }
+      } catch (error) {
+        if (isDevMode) {
+          console.warn(
+            "[watchHistoryTelemetry] Failed to subscribe to metadata preference changes:",
+            error,
+          );
+        }
+      }
+    }
+
+    return this.watchHistoryPreferenceUnsubscribe || null;
+  }
+
+  refreshPreferenceSettings() {
+    if (!this.watchHistoryService?.isEnabled?.()) {
+      this.watchHistoryMetadataEnabled = false;
+      return this.watchHistoryMetadataEnabled;
+    }
+
+    const previous = this.watchHistoryMetadataEnabled;
+    let enabled = true;
+
+    try {
+      if (typeof this.watchHistoryService.getSettings === "function") {
+        const settings = this.watchHistoryService.getSettings();
+        enabled = settings?.metadata?.storeLocally !== false;
+      } else if (
+        typeof this.watchHistoryService.shouldStoreMetadata === "function"
+      ) {
+        enabled = this.watchHistoryService.shouldStoreMetadata() !== false;
+      }
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[watchHistoryTelemetry] Failed to read metadata settings:",
+          error,
+        );
+      }
+      enabled = true;
+    }
+
+    this.watchHistoryMetadataEnabled = enabled;
+
+    if (enabled === false && previous !== false) {
+      try {
+        this.watchHistoryService?.clearLocalMetadata?.();
+      } catch (error) {
+        if (isDevMode) {
+          console.warn(
+            "[watchHistoryTelemetry] Failed to purge metadata cache while preference disabled:",
+            error,
+          );
+        }
+      }
+    }
+
+    return this.watchHistoryMetadataEnabled;
+  }
+
+  isMetadataPreferenceEnabled() {
+    return this.watchHistoryMetadataEnabled !== false;
+  }
+
+  persistMetadataForVideo(video, pointerInfo) {
+    if (
+      !this.watchHistoryMetadataEnabled ||
+      !pointerInfo ||
+      !pointerInfo.key ||
+      typeof this.watchHistoryService?.setLocalMetadata !== "function"
+    ) {
+      return;
+    }
+
+    if (!video || typeof video !== "object") {
+      return;
+    }
+
+    const metadata = {
+      video: sanitizeVideoMetadata(video),
+    };
+
+    try {
+      this.watchHistoryService.setLocalMetadata(pointerInfo.key, metadata);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[watchHistoryTelemetry] Failed to persist local metadata for pointer:",
+          pointerInfo.key,
+          error,
+        );
+      }
+    }
+  }
+
+  dropMetadata(pointerKey) {
+    if (!pointerKey || typeof pointerKey !== "string") {
+      return;
+    }
+
+    if (typeof this.watchHistoryService?.removeLocalMetadata !== "function") {
+      return;
+    }
+
+    try {
+      this.watchHistoryService.removeLocalMetadata(pointerKey);
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[watchHistoryTelemetry] Failed to remove cached metadata for pointer:",
+          pointerKey,
+          error,
+        );
+      }
+    }
+  }
+
+  async handleRemoval(payload = {}) {
+    if (!this.watchHistoryController) {
+      const error = new Error("watch-history-disabled");
+      error.handled = true;
+      throw error;
+    }
+
+    return this.watchHistoryController.handleWatchHistoryRemoval(payload);
+  }
+
+  flush(reason = "session-end", context = "watch-history") {
+    if (!this.watchHistoryController) {
+      return Promise.resolve();
+    }
+
+    try {
+      return this.watchHistoryController.flush(reason, context);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  cancelPlaybackLogging({
+    reason = "session-end",
+    context = "cancelPendingViewLogging",
+  } = {}) {
+    const state = this.playbackTelemetryState;
+    if (!state) {
+      return;
+    }
+
+    if (state.viewTimerId) {
+      this._getTimerHost().clearTimeout(state.viewTimerId);
+    }
+
+    if (Array.isArray(state.handlers) && state.videoEl) {
+      for (const { eventName, handler } of state.handlers) {
+        try {
+          state.videoEl.removeEventListener(eventName, handler);
+        } catch (error) {
+          if (isDevMode) {
+            console.warn(
+              `[watchHistoryTelemetry] Failed to detach ${eventName} listener:`,
+              error,
+            );
+          }
+        }
+      }
+    }
+
+    this.playbackTelemetryState = null;
+
+    this.flush(reason, context).catch((error) => {
+      const message = normalizeString(error?.message) || String(error ?? "unknown");
+      this.log(
+        `[watchHistoryTelemetry] Watch history flush failed: ${message}`,
+      );
+    });
+  }
+
+  resetPlaybackLoggingState() {
+    this.cancelPlaybackLogging();
+    if (this.loggedViewPointerKeys.size > 0) {
+      this.loggedViewPointerKeys.clear();
+    }
+  }
+
+  preparePlaybackLogging({
+    videoElement,
+    pointer,
+    pointerKey: explicitPointerKey,
+    video,
+  } = {}) {
+    this.cancelPlaybackLogging();
+
+    if (!videoElement || typeof videoElement.addEventListener !== "function") {
+      return;
+    }
+
+    const pointerKey = explicitPointerKey || pointerArrayToKey(pointer);
+    if (!pointer || !pointerKey) {
+      return;
+    }
+
+    const viewerIdentityKey = this.getActiveViewIdentityKey();
+    const cooldownKey = this.buildViewCooldownKey(pointerKey, viewerIdentityKey);
+    if (cooldownKey && this.loggedViewPointerKeys.has(cooldownKey)) {
+      return;
+    }
+
+    const state = {
+      videoEl: videoElement,
+      pointer,
+      pointerKey,
+      viewerIdentityKey,
+      handlers: [],
+      viewTimerId: null,
+      viewFired: false,
+      videoMetadata: sanitizeVideoMetadata(video),
+    };
+
+    const clearTimer = (timerKey) => {
+      const property = `${timerKey}TimerId`;
+      if (state[property]) {
+        this._getTimerHost().clearTimeout(state[property]);
+        state[property] = null;
+      }
+    };
+
+    const finalizeView = () => {
+      if (state.viewFired) {
+        return;
+      }
+      state.viewFired = true;
+      clearTimer("view");
+      this.cancelPlaybackLogging();
+
+      const { pointer: thresholdPointer, pointerKey: thresholdPointerKey } =
+        state;
+
+      (async () => {
+        let viewResult;
+        try {
+          const canUseWatchHistoryService =
+            typeof this.watchHistoryService?.publishView === "function";
+          const resolveWatchActor = () => {
+            const normalizedUser = this.normalizeHexPubkey(
+              this.getActiveUserPubkey(),
+            );
+            if (normalizedUser) {
+              return normalizedUser;
+            }
+
+            const normalizedClient = this.normalizeHexPubkey(
+              this.nostrClient?.pubkey,
+            );
+            if (normalizedClient) {
+              return normalizedClient;
+            }
+
+            const normalizedSession = this.normalizeHexPubkey(
+              this.nostrClient?.sessionActor?.pubkey,
+            );
+            if (normalizedSession) {
+              return normalizedSession;
+            }
+
+            if (normalizeString(this.nostrClient?.pubkey)) {
+              return normalizeString(this.nostrClient.pubkey).toLowerCase();
+            }
+
+            if (normalizeString(this.nostrClient?.sessionActor?.pubkey)) {
+              return normalizeString(
+                this.nostrClient.sessionActor.pubkey,
+              ).toLowerCase();
+            }
+
+            return "";
+          };
+
+          const activeWatchActor = resolveWatchActor();
+          const watchMetadata = {};
+          if (activeWatchActor) {
+            watchMetadata.actor = activeWatchActor;
+          }
+          if (state.videoMetadata) {
+            watchMetadata.video = state.videoMetadata;
+          }
+          const metadataPayload = Object.keys(watchMetadata).length
+            ? watchMetadata
+            : undefined;
+
+          if (canUseWatchHistoryService) {
+            viewResult = await this.watchHistoryService.publishView(
+              thresholdPointer,
+              undefined,
+              metadataPayload,
+            );
+          } else if (typeof this.nostrClient?.recordVideoView === "function") {
+            viewResult = await this.nostrClient.recordVideoView(
+              thresholdPointer,
+            );
+          } else {
+            viewResult = { ok: false, error: "view-logging-unavailable" };
+          }
+        } catch (error) {
+          if (isDevMode) {
+            console.warn(
+              "[watchHistoryTelemetry] Exception while recording video view:",
+              error,
+            );
+          }
+        }
+
+        const viewOk = !!viewResult?.ok;
+        if (viewOk) {
+          const eventIdentityKey =
+            this.deriveViewIdentityKeyFromEvent(viewResult?.event) ||
+            state.viewerIdentityKey ||
+            this.getActiveViewIdentityKey();
+          const keyToPersist = this.buildViewCooldownKey(
+            thresholdPointerKey,
+            eventIdentityKey,
+          );
+          if (keyToPersist) {
+            this.loggedViewPointerKeys.add(keyToPersist);
+          }
+          if (viewResult?.event && this.ingestLocalViewEvent) {
+            try {
+              this.ingestLocalViewEvent({
+                event: viewResult.event,
+                pointer: thresholdPointer,
+              });
+            } catch (error) {
+              if (isDevMode) {
+                console.warn(
+                  "[watchHistoryTelemetry] Failed to ingest local view event:",
+                  error,
+                );
+              }
+            }
+          }
+        } else if (isDevMode && viewResult) {
+          console.warn(
+            "[watchHistoryTelemetry] View event rejected by relays:",
+            viewResult,
+          );
+        }
+      })().catch((error) => {
+        if (isDevMode) {
+          console.warn(
+            "[watchHistoryTelemetry] Unexpected error while recording video view:",
+            error,
+          );
+        }
+      });
+    };
+
+    const scheduleTimer = (timerKey, thresholdSeconds, callback) => {
+      const firedKey = `${timerKey}Fired`;
+      const idKey = `${timerKey}TimerId`;
+      if (state[firedKey] || state[idKey]) {
+        return;
+      }
+      const currentSeconds = Number.isFinite(videoElement.currentTime)
+        ? videoElement.currentTime
+        : 0;
+      const remainingMs = Math.max(
+        0,
+        Math.ceil((thresholdSeconds - currentSeconds) * 1000),
+      );
+      if (remainingMs <= 0) {
+        callback();
+        return;
+      }
+      state[idKey] = this._getTimerHost().setTimeout(callback, remainingMs);
+    };
+
+    const registerHandler = (eventName, handler) => {
+      videoElement.addEventListener(eventName, handler);
+      state.handlers.push({ eventName, handler });
+    };
+
+    registerHandler("timeupdate", () => {
+      if (!state.viewFired && videoElement.currentTime >= this.viewThresholdSeconds) {
+        finalizeView();
+      }
+    });
+
+    const cancelOnPause = () => {
+      if (!state.viewFired) {
+        clearTimer("view");
+      }
+    };
+
+    ["pause", "waiting", "stalled", "ended", "emptied"].forEach((event) =>
+      registerHandler(event, cancelOnPause),
+    );
+
+    const resumeIfNeeded = () => {
+      if (state.viewFired) {
+        return;
+      }
+      scheduleTimer("view", this.viewThresholdSeconds, finalizeView);
+    };
+
+    ["play", "playing"].forEach((event) =>
+      registerHandler(event, resumeIfNeeded),
+    );
+
+    this.playbackTelemetryState = state;
+
+    if (!videoElement.paused && videoElement.currentTime > 0) {
+      resumeIfNeeded();
+    }
+  }
+
+  getActiveViewIdentityKey() {
+    const normalizedUser = this.normalizeHexPubkey(this.getActiveUserPubkey());
+    if (normalizedUser) {
+      return `actor:${normalizedUser}`;
+    }
+
+    const sessionActorPubkey = this.normalizeHexPubkey(
+      this.nostrClient?.sessionActor?.pubkey,
+    );
+    if (sessionActorPubkey) {
+      return `actor:${sessionActorPubkey}`;
+    }
+
+    return "actor:anonymous";
+  }
+
+  deriveViewIdentityKeyFromEvent(event) {
+    if (!event || typeof event !== "object") {
+      return "";
+    }
+
+    const normalizedPubkey = this.normalizeHexPubkey(event.pubkey);
+    if (!normalizedPubkey) {
+      return "";
+    }
+
+    return `actor:${normalizedPubkey}`;
+  }
+
+  buildViewCooldownKey(pointerKey, identityKey) {
+    const normalizedPointerKey = normalizeString(pointerKey);
+    if (!normalizedPointerKey) {
+      return "";
+    }
+
+    const normalizedIdentity = normalizeString(identityKey).toLowerCase();
+
+    return normalizedIdentity
+      ? `${normalizedPointerKey}::${normalizedIdentity}`
+      : normalizedPointerKey;
+  }
+
+  _clearPreferenceSubscription() {
+    if (typeof this.watchHistoryPreferenceUnsubscribe === "function") {
+      try {
+        this.watchHistoryPreferenceUnsubscribe();
+      } catch (error) {
+        console.warn(
+          "[watchHistoryTelemetry] Failed to unsubscribe watch history preference:",
+          error,
+        );
+      }
+    }
+    this.watchHistoryPreferenceUnsubscribe = null;
+  }
+
+  _getTimerHost() {
+    if (typeof window !== "undefined" && window) {
+      return window;
+    }
+    return globalThis;
+  }
+}
diff --git a/js/sidebar.js b/js/sidebar.js
index adb6f5cd..76301a70 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -1,7 +1,7 @@
 // sidebar.js
 import { setHashView } from "./index.js";
 
-export function setupSidebarNavigation() {
+export function setupSidebarNavigation({ closeSidebar } = {}) {
   const sidebarLinks = document.querySelectorAll('#sidebar a[href^="#view="]');
   sidebarLinks.forEach((link) => {
     link.addEventListener("click", (e) => {
@@ -16,13 +16,21 @@ export function setupSidebarNavigation() {
       setHashView(viewName); // This changes the hash and loads the view.
 
       // --- NEW: if on mobile, close the sidebar automatically. ---
-      if (window.innerWidth < 768) {
-        const sidebar = document.getElementById("sidebar");
-        const app = document.getElementById("app");
-        if (sidebar && app) {
-          sidebar.classList.remove("sidebar-open");
-          app.classList.remove("sidebar-open");
+      const isMobile =
+        typeof window.matchMedia === "function"
+          ? window.matchMedia("(max-width: 767px)").matches
+          : window.innerWidth < 768;
+      if (isMobile) {
+        if (typeof closeSidebar === "function") {
+          closeSidebar();
+          return;
         }
+
+        const sidebar = document.getElementById("sidebar");
+        if (sidebar) {
+          sidebar.classList.remove("sidebar-open");
+        }
+        document.body.classList.remove("sidebar-open");
       }
     });
   });
diff --git a/js/state/appState.js b/js/state/appState.js
new file mode 100644
index 00000000..efde8cd2
--- /dev/null
+++ b/js/state/appState.js
@@ -0,0 +1,221 @@
+const state = {
+  pubkey: null,
+  currentUserNpub: null,
+  currentVideo: null,
+  modals: Object.create(null),
+  videosMap: null,
+  videoSubscription: null,
+};
+
+const globalSubscribers = new Set();
+const keySubscribers = new Map();
+const modalSubscribers = new Map();
+
+function createSnapshot() {
+  return {
+    pubkey: state.pubkey,
+    currentUserNpub: state.currentUserNpub,
+    currentVideo: state.currentVideo,
+    modals: { ...state.modals },
+    videosMap: state.videosMap,
+    videoSubscription: state.videoSubscription,
+  };
+}
+
+function notifyKey(key, value, previousValue) {
+  const subscribers = keySubscribers.get(key);
+  if (subscribers) {
+    for (const callback of subscribers) {
+      try {
+        callback(value, previousValue, createSnapshot());
+      } catch (error) {
+        console.warn(`[appState] subscriber for key "${key}" threw:`, error);
+      }
+    }
+  }
+
+  if (globalSubscribers.size) {
+    const snapshot = createSnapshot();
+    for (const callback of globalSubscribers) {
+      try {
+        callback(snapshot, { key, value, previousValue });
+      } catch (error) {
+        console.warn("[appState] global subscriber threw:", error);
+      }
+    }
+  }
+}
+
+function subscribeToKey(key, callback) {
+  if (typeof callback !== "function") {
+    return () => {};
+  }
+
+  if (!keySubscribers.has(key)) {
+    keySubscribers.set(key, new Set());
+  }
+  const subscribers = keySubscribers.get(key);
+  subscribers.add(callback);
+
+  return () => {
+    subscribers.delete(callback);
+    if (subscribers.size === 0) {
+      keySubscribers.delete(key);
+    }
+  };
+}
+
+export function subscribeToAppState(callback) {
+  if (typeof callback !== "function") {
+    return () => {};
+  }
+
+  globalSubscribers.add(callback);
+  return () => {
+    globalSubscribers.delete(callback);
+  };
+}
+
+export function subscribeToAppStateKey(key, callback) {
+  return subscribeToKey(key, callback);
+}
+
+function updateKey(key, value) {
+  const previousValue = state[key];
+  if (previousValue === value) {
+    return value;
+  }
+
+  state[key] = value;
+  notifyKey(key, value, previousValue);
+  return value;
+}
+
+export function getAppState() {
+  return createSnapshot();
+}
+
+export function getPubkey() {
+  return state.pubkey;
+}
+
+export function setPubkey(value) {
+  return updateKey("pubkey", typeof value === "string" ? value : value ?? null);
+}
+
+export function getCurrentUserNpub() {
+  return state.currentUserNpub;
+}
+
+export function setCurrentUserNpub(value) {
+  return updateKey(
+    "currentUserNpub",
+    typeof value === "string" && value ? value : value ?? null
+  );
+}
+
+export function getCurrentVideo() {
+  return state.currentVideo;
+}
+
+export function setCurrentVideo(value) {
+  return updateKey("currentVideo", value ?? null);
+}
+
+export function getVideosMap() {
+  return state.videosMap;
+}
+
+export function setVideosMap(value) {
+  if (value instanceof Map) {
+    return updateKey("videosMap", value);
+  }
+  return updateKey("videosMap", value ?? null);
+}
+
+export function getVideoSubscription() {
+  return state.videoSubscription;
+}
+
+export function setVideoSubscription(value) {
+  return updateKey("videoSubscription", value ?? null);
+}
+
+export function getModalState(name) {
+  if (typeof name !== "string" || !name) {
+    return false;
+  }
+  return Boolean(state.modals[name]);
+}
+
+function notifyModal(name, value, previousValue) {
+  const subscribers = modalSubscribers.get(name);
+  if (!subscribers || subscribers.size === 0) {
+    return;
+  }
+
+  for (const callback of subscribers) {
+    try {
+      callback(value, previousValue, createSnapshot());
+    } catch (error) {
+      console.warn(`[appState] modal subscriber for "${name}" threw:`, error);
+    }
+  }
+}
+
+export function setModalState(name, isOpen) {
+  if (typeof name !== "string" || !name) {
+    return false;
+  }
+
+  const normalized = Boolean(isOpen);
+  const previous = Boolean(state.modals[name]);
+  if (previous === normalized) {
+    return normalized;
+  }
+
+  const previousModals = { ...state.modals };
+  state.modals[name] = normalized;
+  notifyModal(name, normalized, previous);
+  notifyKey("modals", { ...state.modals }, previousModals);
+  return normalized;
+}
+
+export function subscribeToModalState(name, callback) {
+  if (typeof name !== "string" || !name || typeof callback !== "function") {
+    return () => {};
+  }
+
+  if (!modalSubscribers.has(name)) {
+    modalSubscribers.set(name, new Set());
+  }
+  const subscribers = modalSubscribers.get(name);
+  subscribers.add(callback);
+
+  return () => {
+    subscribers.delete(callback);
+    if (subscribers.size === 0) {
+      modalSubscribers.delete(name);
+    }
+  };
+}
+
+export function resetAppState() {
+  const previous = createSnapshot();
+  state.pubkey = null;
+  state.currentUserNpub = null;
+  state.currentVideo = null;
+  state.modals = Object.create(null);
+  state.videosMap = null;
+  state.videoSubscription = null;
+  notifyKey("pubkey", state.pubkey, previous.pubkey);
+  notifyKey("currentUserNpub", state.currentUserNpub, previous.currentUserNpub);
+  notifyKey("currentVideo", state.currentVideo, previous.currentVideo);
+  notifyKey("modals", { ...state.modals }, previous.modals);
+  notifyKey("videosMap", state.videosMap, previous.videosMap);
+  notifyKey(
+    "videoSubscription",
+    state.videoSubscription,
+    previous.videoSubscription
+  );
+}
diff --git a/js/state/cache.js b/js/state/cache.js
new file mode 100644
index 00000000..385083a7
--- /dev/null
+++ b/js/state/cache.js
@@ -0,0 +1,734 @@
+import {
+  readUrlHealthFromStorage,
+  removeUrlHealthFromStorage,
+  writeUrlHealthToStorage,
+} from "../utils/storage.js";
+
+const PROFILE_CACHE_STORAGE_KEY = "bitvid:profileCache:v1";
+const PROFILE_CACHE_VERSION = 1;
+const PROFILE_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
+
+const SAVED_PROFILES_STORAGE_KEY = "bitvid:savedProfiles:v1";
+const SAVED_PROFILES_STORAGE_VERSION = 1;
+
+const URL_HEALTH_TTL_MS = 45 * 60 * 1000; // 45 minutes
+const URL_HEALTH_TIMEOUT_RETRY_MS = 5 * 60 * 1000; // 5 minutes
+export const URL_PROBE_TIMEOUT_MS = 8 * 1000; // 8 seconds
+const URL_PROBE_TIMEOUT_RETRY_MS = 15 * 1000; // 15 seconds
+
+const HEX64_REGEX = /^[0-9a-f]{64}$/i;
+
+function sanitizeProfileString(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  const trimmed = value.trim();
+  return trimmed;
+}
+
+let savedProfiles = [];
+let activeProfilePubkey = null;
+const profileCache = new Map();
+const urlHealthCache = new Map();
+const urlHealthInFlight = new Map();
+
+function hasSavedProfilesChanged(previousProfiles, nextProfiles) {
+  if (previousProfiles === nextProfiles) {
+    return false;
+  }
+  if (!Array.isArray(previousProfiles) || !Array.isArray(nextProfiles)) {
+    return true;
+  }
+  if (previousProfiles.length !== nextProfiles.length) {
+    return true;
+  }
+
+  for (let index = 0; index < previousProfiles.length; index += 1) {
+    const prev = previousProfiles[index];
+    const next = nextProfiles[index];
+    if (prev === next) {
+      continue;
+    }
+    if (!prev || !next || typeof prev !== "object" || typeof next !== "object") {
+      return true;
+    }
+
+    const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+    for (const key of keys) {
+      if (prev[key] !== next[key]) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+function safeDecodeNpub(npub) {
+  if (typeof npub !== "string") {
+    return null;
+  }
+
+  const trimmed = npub.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  try {
+    const decoded = window?.NostrTools?.nip19?.decode(trimmed);
+    if (decoded && decoded.type === "npub" && typeof decoded.data === "string") {
+      return decoded.data;
+    }
+  } catch (error) {
+    return null;
+  }
+
+  return null;
+}
+
+function normalizeHexPubkey(pubkey) {
+  if (typeof pubkey !== "string") {
+    return null;
+  }
+
+  const trimmed = pubkey.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  if (HEX64_REGEX.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+
+  if (trimmed.startsWith("npub1")) {
+    const decoded = safeDecodeNpub(trimmed);
+    if (decoded && HEX64_REGEX.test(decoded)) {
+      return decoded.toLowerCase();
+    }
+  }
+
+  return null;
+}
+
+export function getSavedProfiles() {
+  return savedProfiles;
+}
+
+export function getProfileCacheMap() {
+  return profileCache;
+}
+
+export function getActiveProfilePubkey() {
+  return activeProfilePubkey;
+}
+
+export function setActiveProfilePubkey(pubkey, { persist = true } = {}) {
+  const normalized = normalizeHexPubkey(pubkey);
+  const nextValue =
+    normalized || (typeof pubkey === "string" && pubkey.trim() ? pubkey.trim() : null);
+  if (activeProfilePubkey === nextValue) {
+    if (persist) {
+      persistSavedProfiles({ persistActive: true });
+    }
+    return activeProfilePubkey;
+  }
+
+  activeProfilePubkey = nextValue;
+  if (persist) {
+    persistSavedProfiles({ persistActive: true });
+  }
+  return activeProfilePubkey;
+}
+
+export function mutateSavedProfiles(mutator, { persist = true, persistActive = true } = {}) {
+  if (typeof mutator !== "function") {
+    return { changed: false, profiles: getSavedProfiles() };
+  }
+
+  const draft = savedProfiles.slice();
+  const result = mutator(draft);
+  const nextProfiles = Array.isArray(result) ? result : draft;
+  const changed = hasSavedProfilesChanged(savedProfiles, nextProfiles);
+
+  if (changed) {
+    savedProfiles = nextProfiles;
+    if (persist) {
+      persistSavedProfiles({ persistActive });
+    }
+  } else if (persist && persistActive === false) {
+    persistSavedProfiles({ persistActive: false });
+  }
+
+  return { changed, profiles: getSavedProfiles() };
+}
+
+export function setSavedProfiles(nextProfiles, options) {
+  return mutateSavedProfiles(
+    () => (Array.isArray(nextProfiles) ? nextProfiles.slice() : []),
+    options
+  );
+}
+
+export function readSavedProfilesPayloadFromStorage() {
+  if (typeof localStorage === "undefined") {
+    return null;
+  }
+
+  const raw = localStorage.getItem(SAVED_PROFILES_STORAGE_KEY);
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") {
+      return null;
+    }
+    return parsed;
+  } catch (error) {
+    console.warn(
+      "[cache.readSavedProfilesPayloadFromStorage] Failed to parse payload:",
+      error
+    );
+    return null;
+  }
+}
+
+function writeSavedProfilesPayloadToStorage(payload) {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.setItem(SAVED_PROFILES_STORAGE_KEY, JSON.stringify(payload));
+  } catch (error) {
+    const isQuotaError =
+      error &&
+      (error.name === "QuotaExceededError" ||
+        error.name === "NS_ERROR_DOM_QUOTA_REACHED" ||
+        error.code === 22 ||
+        error.code === 1014);
+    if (isQuotaError) {
+      console.warn(
+        "[cache.writeSavedProfilesPayloadToStorage] Storage quota exceeded; keeping in-memory copy only.",
+        error
+      );
+    } else {
+      console.warn(
+        "[cache.writeSavedProfilesPayloadToStorage] Failed to persist saved profiles:",
+        error
+      );
+    }
+  }
+}
+
+export function persistSavedProfiles({ persistActive = true } = {}) {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+
+  if (!savedProfiles.length && !activeProfilePubkey) {
+    try {
+      localStorage.removeItem(SAVED_PROFILES_STORAGE_KEY);
+    } catch (error) {
+      console.warn(
+        "[cache.persistSavedProfiles] Failed to remove empty payload:",
+        error
+      );
+    }
+    return;
+  }
+
+  let activePubkeyToPersist = activeProfilePubkey || null;
+  if (!persistActive) {
+    const storedPayload = readSavedProfilesPayloadFromStorage();
+    if (storedPayload && typeof storedPayload === "object") {
+      const candidate =
+        typeof storedPayload.activePubkey === "string"
+          ? storedPayload.activePubkey
+          : typeof storedPayload.activePubKey === "string"
+          ? storedPayload.activePubKey
+          : null;
+      const normalizedStored = normalizeHexPubkey(candidate);
+      if (normalizedStored) {
+        activePubkeyToPersist = normalizedStored;
+      } else if (candidate === null) {
+        activePubkeyToPersist = null;
+      }
+    }
+  }
+
+  const payload = {
+    version: SAVED_PROFILES_STORAGE_VERSION,
+    entries: savedProfiles.map((entry) => ({
+      pubkey: entry.pubkey,
+      npub:
+        typeof entry.npub === "string" && entry.npub.trim() ? entry.npub.trim() : null,
+      name: typeof entry.name === "string" ? entry.name : "",
+      picture: typeof entry.picture === "string" ? entry.picture : "",
+      authType: entry.authType === "nsec" ? "nsec" : "nip07",
+    })),
+    activePubkey: activePubkeyToPersist,
+  };
+
+  writeSavedProfilesPayloadToStorage(payload);
+}
+
+export function loadSavedProfilesFromStorage() {
+  savedProfiles = [];
+  activeProfilePubkey = null;
+
+  if (typeof localStorage === "undefined") {
+    return { profiles: getSavedProfiles(), activePubkey: activeProfilePubkey };
+  }
+
+  const raw = localStorage.getItem(SAVED_PROFILES_STORAGE_KEY);
+  if (!raw) {
+    return { profiles: getSavedProfiles(), activePubkey: activeProfilePubkey };
+  }
+
+  let needsRewrite = false;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && parsed.version === SAVED_PROFILES_STORAGE_VERSION) {
+      const entries = Array.isArray(parsed.entries) ? parsed.entries : [];
+      const seenPubkeys = new Set();
+      for (const candidate of entries) {
+        if (!candidate || typeof candidate !== "object") {
+          continue;
+        }
+
+        const normalizedPubkey = normalizeHexPubkey(candidate.pubkey);
+        if (!normalizedPubkey || seenPubkeys.has(normalizedPubkey)) {
+          needsRewrite = true;
+          continue;
+        }
+
+        seenPubkeys.add(normalizedPubkey);
+        const storedAuthType = candidate.authType === "nsec" ? "nsec" : "nip07";
+        const npub =
+          typeof candidate.npub === "string" && candidate.npub.trim()
+            ? candidate.npub.trim()
+            : null;
+
+        const entry = {
+          pubkey: normalizedPubkey,
+          npub,
+          name: typeof candidate.name === "string" ? candidate.name : "",
+          picture: typeof candidate.picture === "string" ? candidate.picture : "",
+          authType: storedAuthType,
+        };
+
+        if (
+          typeof candidate.npub === "string" && candidate.npub.trim() !== candidate.npub
+        ) {
+          needsRewrite = true;
+        }
+
+        if (entry.npub && typeof candidate.npub !== "string" && entry.npub !== candidate.npub) {
+          needsRewrite = true;
+        }
+
+        savedProfiles.push(entry);
+      }
+
+      const activeCandidate =
+        typeof parsed.activePubkey === "string"
+          ? parsed.activePubkey
+          : typeof parsed.activePubKey === "string"
+          ? parsed.activePubKey
+          : null;
+      const normalizedActive = normalizeHexPubkey(activeCandidate);
+      if (normalizedActive && seenPubkeys.has(normalizedActive)) {
+        activeProfilePubkey = normalizedActive;
+      } else if (activeCandidate) {
+        needsRewrite = true;
+      }
+    } else if (raw) {
+      needsRewrite = true;
+    }
+  } catch (error) {
+    console.warn("[cache.loadSavedProfilesFromStorage] Failed to parse payload:", error);
+    needsRewrite = true;
+  }
+
+  if (!activeProfilePubkey && savedProfiles.length) {
+    activeProfilePubkey = savedProfiles[0].pubkey;
+    needsRewrite = true;
+  }
+
+  if (needsRewrite) {
+    persistSavedProfiles();
+  }
+
+  return { profiles: getSavedProfiles(), activePubkey: activeProfilePubkey };
+}
+
+export function syncSavedProfileFromCache(pubkey, { persist = false } = {}) {
+  const normalized = normalizeHexPubkey(pubkey);
+  if (!normalized) {
+    return false;
+  }
+
+  const cacheEntry = profileCache.get(normalized);
+  if (!cacheEntry || typeof cacheEntry !== "object") {
+    return false;
+  }
+
+  let updated = false;
+  mutateSavedProfiles((profiles) => {
+    const next = profiles.slice();
+    const index = next.findIndex((entry) => entry && entry.pubkey === normalized);
+    if (index < 0) {
+      return profiles;
+    }
+
+    const existing = next[index] || {};
+    const profile = cacheEntry.profile || {};
+    const nextEntry = {
+      ...existing,
+      name: profile.name || existing.name || "",
+      picture: profile.picture || existing.picture || "",
+    };
+
+    if (
+      existing.name === nextEntry.name &&
+      existing.picture === nextEntry.picture
+    ) {
+      return profiles;
+    }
+
+    next[index] = nextEntry;
+    updated = true;
+    return next;
+  }, { persist, persistActive: false });
+
+  return updated;
+}
+
+export function 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",
+      };
+
+      const about = sanitizeProfileString(profile.about || profile.aboutMe);
+      if (about) {
+        normalized.about = about;
+      }
+
+      const website = sanitizeProfileString(profile.website || profile.url);
+      if (website) {
+        normalized.website = website;
+      }
+
+      const banner = sanitizeProfileString(profile.banner || profile.header);
+      if (banner) {
+        normalized.banner = banner;
+      }
+
+      const lud16 = sanitizeProfileString(profile.lud16);
+      if (lud16) {
+        normalized.lud16 = lud16;
+      }
+
+      const lud06 = sanitizeProfileString(profile.lud06);
+      if (lud06) {
+        normalized.lud06 = lud06;
+      }
+
+      const lightningCandidates = [
+        sanitizeProfileString(profile.lightningAddress),
+        lud16,
+        lud06,
+      ].filter(Boolean);
+      if (lightningCandidates.length) {
+        normalized.lightningAddress = lightningCandidates[0];
+      }
+
+      profileCache.set(pubkey, {
+        profile: normalized,
+        timestamp,
+      });
+    }
+  } catch (error) {
+    console.warn("[cache.loadProfileCacheFromStorage] Failed to parse payload:", error);
+  }
+}
+
+export function persistProfileCacheToStorage() {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+
+  const now = Date.now();
+  const entries = {};
+
+  for (const [pubkey, entry] of 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) {
+      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 (error) {
+      console.warn(
+        "[cache.persistProfileCacheToStorage] Failed to clear storage:",
+        error
+      );
+    }
+    return;
+  }
+
+  try {
+    localStorage.setItem(PROFILE_CACHE_STORAGE_KEY, JSON.stringify(payload));
+  } catch (error) {
+    console.warn("[cache.persistProfileCacheToStorage] Failed to persist cache:", error);
+  }
+}
+
+export function getProfileCacheEntry(pubkey) {
+  const normalized = normalizeHexPubkey(pubkey);
+  if (!normalized) {
+    return null;
+  }
+
+  const entry = profileCache.get(normalized);
+  if (!entry) {
+    return null;
+  }
+
+  const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+  if (!timestamp || Date.now() - timestamp > PROFILE_CACHE_TTL_MS) {
+    profileCache.delete(normalized);
+    persistProfileCacheToStorage();
+    return null;
+  }
+
+  return entry;
+}
+
+export function setProfileCacheEntry(pubkey, profile, { persist = true } = {}) {
+  const normalizedPubkey = normalizeHexPubkey(pubkey);
+  if (!normalizedPubkey || !profile) {
+    return null;
+  }
+
+  const normalized = {
+    name: profile.name || profile.display_name || "Unknown",
+    picture: profile.picture || "assets/svg/default-profile.svg",
+  };
+
+  const about = sanitizeProfileString(profile.about || profile.aboutMe);
+  if (about) {
+    normalized.about = about;
+  }
+
+  const website = sanitizeProfileString(profile.website || profile.url);
+  if (website) {
+    normalized.website = website;
+  }
+
+  const banner = sanitizeProfileString(profile.banner || profile.header);
+  if (banner) {
+    normalized.banner = banner;
+  }
+
+  const lud16 = sanitizeProfileString(profile.lud16);
+  if (lud16) {
+    normalized.lud16 = lud16;
+  }
+
+  const lud06 = sanitizeProfileString(profile.lud06);
+  if (lud06) {
+    normalized.lud06 = lud06;
+  }
+
+  const lightningCandidates = [
+    sanitizeProfileString(profile.lightningAddress),
+    lud16,
+    lud06,
+  ].filter(Boolean);
+  if (lightningCandidates.length) {
+    normalized.lightningAddress = lightningCandidates[0];
+  }
+
+  const entry = {
+    profile: normalized,
+    timestamp: Date.now(),
+  };
+
+  profileCache.set(normalizedPubkey, entry);
+  if (persist) {
+    persistProfileCacheToStorage();
+  }
+
+  return entry;
+}
+
+function buildUrlProbeKey(url, options = {}) {
+  const trimmed = typeof url === "string" ? url : "";
+  const mode = options?.confirmPlayable ? "playable" : "basic";
+  return `${trimmed}::${mode}`;
+}
+
+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;
+}
+
+export function getCachedUrlHealth(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;
+}
+
+export function storeUrlHealth(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;
+}
+
+export function setInFlightUrlProbe(eventId, url, promise, options = {}) {
+  if (!eventId || !promise) {
+    return;
+  }
+
+  const key = buildUrlProbeKey(url, options);
+  urlHealthInFlight.set(eventId, { promise, key });
+  promise.finally(() => {
+    const current = urlHealthInFlight.get(eventId);
+    if (current && current.promise === promise) {
+      urlHealthInFlight.delete(eventId);
+    }
+  });
+}
+
+export function getInFlightUrlProbe(eventId, url, options = {}) {
+  if (!eventId) {
+    return null;
+  }
+
+  const entry = urlHealthInFlight.get(eventId);
+  if (!entry) {
+    return null;
+  }
+
+  const key = buildUrlProbeKey(url, options);
+  if (entry.key && entry.key !== key) {
+    return null;
+  }
+
+  return entry.promise;
+}
+
+export const urlHealthConstants = {
+  URL_HEALTH_TTL_MS,
+  URL_HEALTH_TIMEOUT_RETRY_MS,
+  URL_PROBE_TIMEOUT_RETRY_MS,
+};
diff --git a/js/storage/r2-s3.js b/js/storage/r2-s3.js
index bfe65b36..a38581cd 100644
--- a/js/storage/r2-s3.js
+++ b/js/storage/r2-s3.js
@@ -1,14 +1,97 @@
 // js/storage/r2-s3.js
-import {
-  S3Client,
-  CreateBucketCommand,
-  CreateMultipartUploadCommand,
-  UploadPartCommand,
-  CompleteMultipartUploadCommand,
-  AbortMultipartUploadCommand,
-  HeadBucketCommand,
-  PutBucketCorsCommand,
-} from "https://esm.sh/@aws-sdk/client-s3@3.637.0?target=es2022&bundle";
+
+const AWS_SDK_SPECIFIER =
+  "https://esm.sh/@aws-sdk/client-s3@3.637.0?target=es2022&bundle";
+
+const disableNetworkImports = Boolean(
+  globalThis?.__BITVID_DISABLE_NETWORK_IMPORTS__
+);
+
+let awsSdk = null;
+let awsSdkLoadError = null;
+let awsSdkLoadPromise = null;
+
+function assignAwsSdk(module) {
+  if (!module) {
+    return;
+  }
+
+  awsSdk = {
+    S3Client: module.S3Client,
+    CreateBucketCommand: module.CreateBucketCommand,
+    CreateMultipartUploadCommand: module.CreateMultipartUploadCommand,
+    UploadPartCommand: module.UploadPartCommand,
+    CompleteMultipartUploadCommand: module.CompleteMultipartUploadCommand,
+    AbortMultipartUploadCommand: module.AbortMultipartUploadCommand,
+    HeadBucketCommand: module.HeadBucketCommand,
+    PutBucketCorsCommand: module.PutBucketCorsCommand,
+  };
+}
+
+async function loadAwsSdkModule() {
+  if (awsSdk || awsSdkLoadError) {
+    return awsSdk;
+  }
+
+  if (!awsSdkLoadPromise) {
+    if (disableNetworkImports) {
+      awsSdkLoadError = new Error(
+        "Cloudflare R2 SDK network import has been disabled."
+      );
+      return null;
+    }
+
+    awsSdkLoadPromise = import(AWS_SDK_SPECIFIER)
+      .then((module) => {
+        assignAwsSdk(module);
+        return awsSdk;
+      })
+      .catch((error) => {
+        awsSdkLoadError = error || new Error("Failed to load R2 SDK module");
+        throw awsSdkLoadError;
+      });
+  }
+
+  try {
+    return await awsSdkLoadPromise;
+  } catch (error) {
+    awsSdkLoadError = error;
+    throw error;
+  }
+}
+
+function requireAwsSdk() {
+  if (awsSdk) {
+    return awsSdk;
+  }
+
+  if (awsSdkLoadError) {
+    throw awsSdkLoadError;
+  }
+
+  throw new Error(
+    "Cloudflare R2 SDK has not finished loading. Call ensureR2SdkLoaded() first."
+  );
+}
+
+export function ensureR2SdkLoaded() {
+  return loadAwsSdkModule();
+}
+
+export function getR2SdkLoadError() {
+  return awsSdkLoadError;
+}
+
+export function isR2SdkAvailable() {
+  return Boolean(awsSdk);
+}
+
+if (!disableNetworkImports) {
+  // Begin loading immediately in environments that support network imports.
+  loadAwsSdkModule().catch(() => {
+    // Errors are captured for later inspection by getR2SdkLoadError().
+  });
+}
 
 function computeCacheControl(key) {
   if (!key) {
@@ -36,6 +119,8 @@ export function makeR2Client({ accountId, accessKeyId, secretAccessKey }) {
     throw new Error("Missing Cloudflare R2 credentials");
   }
 
+  const { S3Client } = requireAwsSdk();
+
   return new S3Client({
     region: "auto",
     endpoint: `https://${accountId}.r2.cloudflarestorage.com`,
@@ -45,6 +130,8 @@ export function makeR2Client({ accountId, accessKeyId, secretAccessKey }) {
 }
 
 async function ensureBucketExists({ s3, bucket }) {
+  const { CreateBucketCommand, HeadBucketCommand } = requireAwsSdk();
+
   try {
     await s3.send(new HeadBucketCommand({ Bucket: bucket }));
     return;
@@ -80,6 +167,8 @@ export async function ensureBucketCors({ s3, bucket, origins }) {
     throw new Error("Bucket name is required to configure CORS");
   }
 
+  const { PutBucketCorsCommand } = requireAwsSdk();
+
   const allowedOrigins = (origins || []).filter(Boolean);
   if (allowedOrigins.length === 0) {
     return;
@@ -131,6 +220,13 @@ export async function multipartUpload({
     throw new Error("File is required");
   }
 
+  const {
+    CreateMultipartUploadCommand,
+    UploadPartCommand,
+    CompleteMultipartUploadCommand,
+    AbortMultipartUploadCommand,
+  } = requireAwsSdk();
+
   const createCommand = new CreateMultipartUploadCommand({
     Bucket: bucket,
     Key: key,
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 8b4b14f8..110d8fd2 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -3,7 +3,6 @@ import {
   nostrClient,
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
-import { attachUrlHealthBadges } from "./urlHealthObserver.js";
 import {
   buildSubscriptionListEvent,
   SUBSCRIPTION_LIST_IDENTIFIER,
@@ -13,78 +12,10 @@ import {
   publishEventToRelays,
   assertAnyRelayAccepted,
 } from "./nostrPublish.js";
+import { getApplication } from "./applicationContext.js";
+import { VideoListView } from "./ui/views/VideoListView.js";
 
-let attachHealthBadgesLoader = null;
-let attachHealthBadgesErrorLogged = false;
-
-function scheduleAttachHealthBadges(container) {
-  if (!container) {
-    return;
-  }
-
-  if (!attachHealthBadgesLoader) {
-    attachHealthBadgesLoader = import("./gridHealth.js")
-      .then((module) => module?.attachHealthBadges || null)
-      .catch((error) => {
-        if (!attachHealthBadgesErrorLogged) {
-          attachHealthBadgesErrorLogged = true;
-          if (typeof console !== "undefined") {
-            console.warn(
-              "[SubscriptionsManager] Failed to load grid health helpers:",
-              error
-            );
-          }
-        }
-        return null;
-      });
-  }
-
-  attachHealthBadgesLoader
-    .then((fn) => {
-      if (typeof fn === "function") {
-        try {
-          fn(container);
-        } catch (error) {
-          if (typeof console !== "undefined") {
-            console.warn(
-              "[SubscriptionsManager] attachHealthBadges threw:",
-              error
-            );
-          }
-        }
-      }
-    })
-    .catch(() => {
-      // Errors are already logged above; no-op here to keep Promise chains quiet.
-    });
-}
-
-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)}`;
-}
+const getApp = () => getApplication();
 
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
@@ -97,6 +28,10 @@ class SubscriptionsManager {
     this.subscribedPubkeys = new Set();
     this.subsEventId = null;
     this.loaded = false;
+    this.subscriptionListView = null;
+    this.lastRunOptions = null;
+    this.lastResult = null;
+    this.lastContainerId = null;
   }
 
   /**
@@ -169,6 +104,10 @@ class SubscriptionsManager {
     return this.subscribedPubkeys.has(channelHex);
   }
 
+  getSubscribedAuthors() {
+    return Array.from(this.subscribedPubkeys);
+  }
+
   async addChannel(channelHex, userPubkey) {
     if (!userPubkey) {
       throw new Error("No user pubkey => cannot addChannel.");
@@ -179,6 +118,14 @@ class SubscriptionsManager {
     }
     this.subscribedPubkeys.add(channelHex);
     await this.publishSubscriptionList(userPubkey);
+    this.refreshActiveFeed({ reason: "subscription-update" }).catch((error) => {
+      if (typeof console !== "undefined") {
+        console.warn(
+          "[SubscriptionsManager] Failed to refresh after adding subscription:",
+          error
+        );
+      }
+    });
   }
 
   async removeChannel(channelHex, userPubkey) {
@@ -191,6 +138,14 @@ class SubscriptionsManager {
     }
     this.subscribedPubkeys.delete(channelHex);
     await this.publishSubscriptionList(userPubkey);
+    this.refreshActiveFeed({ reason: "subscription-update" }).catch((error) => {
+      if (typeof console !== "undefined") {
+        console.warn(
+          "[SubscriptionsManager] Failed to refresh after removing subscription:",
+          error
+        );
+      }
+    });
   }
 
   /**
@@ -291,100 +246,187 @@ class SubscriptionsManager {
    */
   async showSubscriptionVideos(
     userPubkey,
-    containerId = "subscriptionsVideoList"
+    containerId = "subscriptionsVideoList",
+    options = {}
   ) {
+    const limitCandidate = Number(options?.limit);
+    const limit = Number.isFinite(limitCandidate) && limitCandidate > 0
+      ? Math.floor(limitCandidate)
+      : null;
+    const reason =
+      typeof options?.reason === "string" && options.reason.trim()
+        ? options.reason.trim()
+        : undefined;
+
+    this.lastContainerId = containerId;
+
+    const container = document.getElementById(containerId);
     if (!userPubkey) {
-      const c = document.getElementById(containerId);
-      if (c) c.innerHTML = "<p class='text-gray-500'>Please log in first.</p>";
-      return;
+      if (container) {
+        container.innerHTML =
+          "<p class='text-gray-500'>Please log in first.</p>";
+      }
+      this.lastRunOptions = null;
+      this.lastResult = null;
+      return null;
     }
+
     if (!this.loaded) {
       await this.loadSubscriptions(userPubkey);
     }
 
-    const channelHexes = Array.from(this.subscribedPubkeys);
-    const container = document.getElementById(containerId);
-    if (!container) return;
+    const channelHexes = this.getSubscribedAuthors();
+    if (!container) {
+      this.lastRunOptions = {
+        actorPubkey: userPubkey,
+        limit,
+        containerId,
+      };
+      return null;
+    }
 
     if (!channelHexes.length) {
       container.innerHTML =
         "<p class='text-gray-500'>No subscriptions found.</p>";
-      return;
+      this.lastRunOptions = {
+        actorPubkey: userPubkey,
+        limit,
+        containerId,
+      };
+      this.lastResult = { items: [], metadata: { reason: "no-subscriptions" } };
+      return this.lastResult;
     }
 
     container.innerHTML = getSidebarLoadingMarkup("Fetching subscriptions…");
 
-    // Gather all videos
-    const videos = await this.fetchSubscribedVideos(channelHexes);
-    this.renderSameGridStyle(videos, containerId);
+    this.lastRunOptions = {
+      actorPubkey: userPubkey,
+      limit,
+      containerId,
+      reason,
+    };
+
+    this.ensureFeedRegistered();
+    const engine = this.getFeedEngine();
+    if (!engine || typeof engine.run !== "function") {
+      container.innerHTML =
+        "<p class='text-gray-500'>Subscriptions are unavailable right now.</p>";
+      return null;
+    }
+
+    const app = getApp();
+    const runtime = this.buildFeedRuntime({ app, authors: channelHexes });
+    const runOptions = {
+      actorPubkey: userPubkey,
+      limit,
+      runtime,
+      hooks: {
+        subscriptions: {
+          resolveAuthors: () => this.getSubscribedAuthors(),
+        },
+      },
+    };
+
+    try {
+      const result = await engine.run("subscriptions", runOptions);
+
+      const videos = Array.isArray(result?.items)
+        ? result.items.map((item) => item?.video).filter(Boolean)
+        : [];
+
+      if (app?.videosMap instanceof Map) {
+        videos.forEach((video) => {
+          if (video && typeof video.id === "string" && video.id) {
+            app.videosMap.set(video.id, video);
+          }
+        });
+      }
+
+      this.lastResult = result;
+      this.renderSameGridStyle(result, containerId, { limit, reason });
+      return result;
+    } catch (error) {
+      console.error(
+        "[SubscriptionsManager] Failed to run subscriptions feed:",
+        error
+      );
+      container.innerHTML =
+        "<p class='text-gray-500'>Unable to load subscriptions right now.</p>";
+      this.lastResult = null;
+      return null;
+    }
   }
 
-  /**
-   * Pull all events from subscribed authors, convert, dedupe => newest
-   */
-  async fetchSubscribedVideos(authorPubkeys) {
-    try {
-      const filter = {
-        kinds: [30078],
-        "#t": ["video"],
-        authors: authorPubkeys,
-        limit: 500,
-      };
-
-      const allEvents = [];
-      for (const relay of nostrClient.relays) {
-        try {
-          const res = await nostrClient.pool.list([relay], [filter]);
-          allEvents.push(...res);
-        } catch (rErr) {
-          console.error(`[SubscriptionsManager] Error at ${relay}`, rErr);
-        }
+  ensureFeedRegistered() {
+    const app = getApp();
+    if (typeof app?.registerSubscriptionsFeed === "function") {
+      try {
+        app.registerSubscriptionsFeed();
+      } catch (error) {
+        console.warn(
+          "[SubscriptionsManager] Failed to register subscriptions feed:",
+          error
+        );
       }
-
-      const videos = [];
-      for (const evt of allEvents) {
-        const vid = this.convertEventToVideo(evt);
-        if (!vid.invalid && !vid.deleted) videos.push(vid);
-      }
-
-      const deduped = this.dedupeToNewestByRoot(videos);
-      deduped.sort((a, b) => b.created_at - a.created_at);
-      return deduped;
-    } catch (err) {
-      console.error("fetchSubscribedVideos error:", err);
-      return [];
     }
   }
 
+  getFeedEngine() {
+    const app = getApp();
+    return app?.feedEngine || null;
+  }
+
+  buildFeedRuntime({ app, authors = [] } = {}) {
+    const normalizedAuthors = Array.isArray(authors)
+      ? authors.filter((author) => typeof author === "string" && author)
+      : [];
+
+    const blacklist =
+      app?.blacklistedEventIds instanceof Set
+        ? new Set(app.blacklistedEventIds)
+        : new Set();
+
+    const isAuthorBlocked =
+      typeof app?.isAuthorBlocked === "function"
+        ? (pubkey) => app.isAuthorBlocked(pubkey)
+        : () => false;
+
+    return {
+      subscriptionAuthors: normalizedAuthors,
+      authors: normalizedAuthors,
+      blacklistedEventIds: blacklist,
+      isAuthorBlocked,
+    };
+  }
+
   /**
    * Renders the feed in the same style as home.
    * This includes gear menu, time-ago, lazy load, clickable authors, etc.
    */
-  renderSameGridStyle(videos, containerId) {
+  renderSameGridStyle(result, containerId, options = {}) {
     const container = document.getElementById(containerId);
-    if (!container) return;
+    if (!container) {
+      return;
+    }
 
-    const safeVideos = Array.isArray(videos) ? videos : [];
-    const dedupedVideos =
-      window.app?.dedupeVideosByRoot?.(safeVideos) ??
-      this.dedupeToNewestByRoot(safeVideos);
+    const app = getApp();
+    const items = Array.isArray(result?.items) ? result.items : [];
+    const metadata =
+      result && typeof result.metadata === "object"
+        ? { ...result.metadata }
+        : {};
 
-    const filteredVideos = dedupedVideos.filter((video) => {
-      if (!video || typeof video !== "object") {
-        return false;
-      }
+    const limitCandidate = Number(options?.limit);
+    const limit = Number.isFinite(limitCandidate) && limitCandidate > 0
+      ? Math.floor(limitCandidate)
+      : null;
 
-      if (
-        window.app?.isAuthorBlocked &&
-        window.app.isAuthorBlocked(video.pubkey)
-      ) {
-        return false;
-      }
+    const limitedItems = limit ? items.slice(0, limit) : items;
+    const videos = limitedItems
+      .map((item) => (item && typeof item === "object" ? item.video : null))
+      .filter((video) => video && typeof video === "object");
 
-      return true;
-    });
-
-    if (!filteredVideos.length) {
+    if (!videos.length) {
       container.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No videos available yet.
@@ -392,444 +434,288 @@ class SubscriptionsManager {
       return;
     }
 
-    // Sort newest first
-    filteredVideos.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();
-
-    filteredVideos.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 = getAbsoluteShareUrl(nevent);
-      const canEdit = window.app?.pubkey === video.pubkey;
-
-      const highlightClass =
-        video.isPrivate && canEdit
-          ? "border-2 border-yellow-500"
-          : "border-none";
-
-      const timeAgo = window.app?.formatTimeAgo
-        ? window.app.formatTimeAgo(video.created_at)
-        : new Date(video.created_at * 1000).toLocaleString();
-
-      let hasOlder = false;
-      if (canEdit && video.videoRootId && window.app?.hasOlderVersion) {
-        hasOlder = window.app.hasOlderVersion(video, fullAllEventsArray);
-      }
-
-      const revertButton = hasOlder
-        ? `
-          <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>
-        `
-        : "";
-
-      const gearMenu = canEdit
-        ? `
-          <div class="relative inline-block ml-3 overflow-visible">
-            <button
-              type="button"
-              class="inline-flex items-center p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              data-settings-dropdown="${index}"
-            >
-              <img
-                src="assets/svg/video-settings-gear.svg"
-                alt="Settings"
-                class="w-5 h-5"
-              />
-            </button>
-            <div
-              id="settingsDropdown-${index}"
-              class="hidden absolute right-0 bottom-full mb-2 w-32 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            >
-              <div class="py-1">
-                <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>
-                ${revertButton}
-                <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>
-              </div>
-            </div>
-          </div>
-        `
-        : "";
-
-      const moreMenu = `
-        <div class="relative inline-block ml-1 overflow-visible" data-more-menu-wrapper="true">
-          <button
-            type="button"
-            class="inline-flex items-center justify-center w-10 h-10 p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            data-more-dropdown="${index}"
-            aria-haspopup="true"
-            aria-expanded="false"
-            aria-label="More options"
-          >
-            <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5 object-contain" />
-          </button>
-          <div
-            id="moreDropdown-${index}"
-            class="hidden absolute right-0 bottom-full mb-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            role="menu"
-            data-more-menu="true"
-          >
-            <div class="py-1">
-              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="open-channel" data-author="${video.pubkey || ""}">
-                Open channel
-              </button>
-              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="copy-link" data-event-id="${video.id || ""}">
-                Copy link
-              </button>
-              <button class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white" data-action="block-author" data-author="${video.pubkey || ""}">
-                Block creator
-              </button>
-              <button class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" data-action="report" data-event-id="${video.id || ""}">
-                Report
-              </button>
-            </div>
-          </div>
-        </div>
-      `;
-
-      const cardControls = `
-        <div class="flex items-center">
-          ${moreMenu}${gearMenu}
-        </div>
-      `;
-
-      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-video-id="${video.id}"
-            data-play-url=""
-            data-play-magnet=""
-            class="block cursor-pointer relative group"
-          >
-            <div class="ratio-16-9">
-              <img
-                src="assets/jpg/video-thumbnail-fallback.jpg"
-                data-lazy="${safeThumb}"
-                alt="${safeTitle}"
-              />
-            </div>
-          </a>
-          <div class="p-4">
-            <h3
-              class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
-              data-video-id="${video.id}"
-              data-play-url=""
-              data-play-magnet=""
-            >
-              ${safeTitle}
-            </h3>
-            <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-3">
-                <div class="w-8 h-8 rounded-full bg-gray-700 overflow-hidden flex items-center justify-center">
-                  <img
-                    class="author-pic"
-                    data-pubkey="${video.pubkey}"
-                    src="assets/svg/default-profile.svg"
-                    alt="Placeholder"
-                  />
-                </div>
-                <div class="min-w-0">
-                  <p
-                    class="text-sm text-gray-400 author-name"
-                    data-pubkey="${video.pubkey}"
-                  >
-                    Loading name...
-                  </p>
-                  <div class="flex items-center text-xs text-gray-500 mt-1">
-                    <span>${timeAgo}</span>
-                  </div>
-                </div>
-              </div>
-              ${cardControls}
-            </div>
-            ${connectionBadgesHtml}
-          </div>
-        </div>
-      `;
-
-      const t = document.createElement("template");
-      t.innerHTML = cardHtml.trim();
-      const cardEl = t.content.firstElementChild;
-      if (cardEl) {
-        cardEl.dataset.ownerIsViewer = canEdit ? "true" : "false";
-        if (typeof video.pubkey === "string" && video.pubkey) {
-          cardEl.dataset.ownerPubkey = video.pubkey;
-        } else if (cardEl.dataset.ownerPubkey) {
-          delete cardEl.dataset.ownerPubkey;
-        }
-
-        if (trimmedUrl) {
-          cardEl.dataset.urlHealthState = "checking";
-          if (cardEl.dataset.urlHealthReason) {
-            delete cardEl.dataset.urlHealthReason;
-          }
-          cardEl.dataset.urlHealthEventId = video.id || "";
-          cardEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
-        } else {
-          cardEl.dataset.urlHealthState = "offline";
-          cardEl.dataset.urlHealthReason = "missing-source";
-          if (cardEl.dataset.urlHealthEventId) {
-            delete cardEl.dataset.urlHealthEventId;
-          }
-          if (cardEl.dataset.urlHealthUrl) {
-            delete cardEl.dataset.urlHealthUrl;
-          }
-        }
-        if (magnetProvided && magnetSupported) {
-          cardEl.dataset.streamHealthState = "checking";
-          if (cardEl.dataset.streamHealthReason) {
-            delete cardEl.dataset.streamHealthReason;
-          }
-        } else {
-          cardEl.dataset.streamHealthState = "unhealthy";
-          cardEl.dataset.streamHealthReason = magnetProvided
-            ? "unsupported"
-            : "missing-source";
-        }
-
-        // 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;
-        }
-
-        const badgeEl = cardEl.querySelector("[data-url-health-state]");
-        if (badgeEl) {
-          if (trimmedUrl) {
-            badgeEl.dataset.urlHealthEventId = video.id || "";
-            badgeEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
-          } else {
-            if (badgeEl.dataset.urlHealthEventId) {
-              delete badgeEl.dataset.urlHealthEventId;
-            }
-            if (badgeEl.dataset.urlHealthUrl) {
-              delete badgeEl.dataset.urlHealthUrl;
-            }
-          }
-        }
-      }
-      fragment.appendChild(cardEl);
-    });
-
-    container.appendChild(fragment);
-    scheduleAttachHealthBadges(container);
-    attachUrlHealthBadges(container, ({ badgeEl, url, eventId }) => {
-      if (!window.app?.handleUrlHealthBadge) {
-        return;
-      }
-      const video =
-        window.app.videosMap?.get?.(eventId) || { id: eventId };
-      window.app.handleUrlHealthBadge({ video, url, badgeEl });
-    });
-
-    window.app?.attachVideoListHandler?.();
-
-    // Lazy-load
-    const lazyEls = container.querySelectorAll("[data-lazy]");
-    lazyEls.forEach((el) => window.app?.mediaLoader.observe(el));
-
-    window.app?.attachMoreMenuHandlers?.(container);
-
-    // Gear menus
-    const gearButtons = container.querySelectorAll("[data-settings-dropdown]");
-    gearButtons.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        const idx = btn.getAttribute("data-settings-dropdown");
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
-        if (dropdown) dropdown.classList.toggle("hidden");
-      });
-    });
-
-    // Edit button
-    const editButtons = container.querySelectorAll("[data-edit-index]");
-    editButtons.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        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");
-        const eventId = btn.getAttribute("data-edit-event-id") || "";
-        window.app?.handleEditVideo({
-          eventId,
-          index: Number.isNaN(idx) ? null : idx,
-        });
-      });
-    });
-
-    // Revert
-    const revertButtons = container.querySelectorAll("[data-revert-index]");
-    revertButtons.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        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");
-        const eventId = btn.getAttribute("data-revert-event-id") || "";
-        window.app?.handleRevertVideo({
-          eventId,
-          index: Number.isNaN(idx) ? null : idx,
-        });
-      });
-    });
-
-    // Delete All
-    const deleteAllButtons = container.querySelectorAll(
-      "[data-delete-all-index]"
-    );
-    deleteAllButtons.forEach((btn) => {
-      btn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        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");
-        const eventId = btn.getAttribute("data-delete-all-event-id") || "";
-        window.app?.handleFullDeleteVideo({
-          eventId,
-          index: Number.isNaN(idx) ? null : idx,
-        });
-      });
-    });
-
-    // Now fetch author profiles
-    const authorPics = container.querySelectorAll(".author-pic");
-    const authorNames = container.querySelectorAll(".author-name");
-
-    // We only declare localAuthorSet once at the top
-    // so we don't cause a "duplicate" variable error.
-    authorPics.forEach((pic) => {
-      localAuthorSet.add(pic.getAttribute("data-pubkey"));
-    });
-    authorNames.forEach((nameEl) => {
-      localAuthorSet.add(nameEl.getAttribute("data-pubkey"));
-    });
-
-    if (window.app?.batchFetchProfiles && localAuthorSet.size > 0) {
-      window.app.batchFetchProfiles(localAuthorSet);
+    const listView = this.getListView(container, app);
+    if (!listView) {
+      container.innerHTML = `
+        <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
+          Unable to render subscriptions feed.
+        </p>`;
+      return;
     }
 
-    // Make author name/pic clickable => open channel
-    authorPics.forEach((pic) => {
-      pic.style.cursor = "pointer";
-      pic.addEventListener("click", (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const pubkey = pic.getAttribute("data-pubkey");
-        window.app?.goToProfile(pubkey);
+    listView.mount(container);
+
+    if (app?.videosMap instanceof Map) {
+      listView.state.videosMap = app.videosMap;
+    }
+
+    const enrichedMetadata = {
+      ...metadata,
+      feed: "subscriptions",
+    };
+    if (limit) {
+      enrichedMetadata.limit = limit;
+    }
+    if (typeof options?.reason === "string" && options.reason) {
+      enrichedMetadata.reason = options.reason;
+    }
+
+    listView.state.feedMetadata = enrichedMetadata;
+    listView.render(videos, enrichedMetadata);
+  }
+
+  getListView(container, app) {
+    if (this.subscriptionListView) {
+      return this.subscriptionListView;
+    }
+
+    if (!container) {
+      return null;
+    }
+
+    const doc = container.ownerDocument || document;
+    const baseView = app?.videoListView || null;
+
+    const badgeHelpers = baseView?.badgeHelpers || {
+      attachHealthBadges: () => {},
+      attachUrlHealthBadges: () => {},
+    };
+
+    const formatTimeAgo = (timestamp) => {
+      if (typeof app?.formatTimeAgo === "function") {
+        return app.formatTimeAgo(timestamp);
+      }
+      if (typeof baseView?.formatters?.formatTimeAgo === "function") {
+        return baseView.formatters.formatTimeAgo(timestamp);
+      }
+      return timestamp;
+    };
+
+    const formatViewCountLabel = (total) => {
+      if (typeof baseView?.formatters?.formatViewCountLabel === "function") {
+        return baseView.formatters.formatViewCountLabel(total);
+      }
+      return typeof total === "number" ? total.toLocaleString() : `${total}`;
+    };
+
+    const assets = baseView?.assets || {
+      fallbackThumbnailSrc: "assets/jpg/video-thumbnail-fallback.jpg",
+      unsupportedBtihMessage:
+        "This magnet link is missing a compatible BitTorrent v1 info hash.",
+    };
+
+    const loadedThumbnails =
+      app?.loadedThumbnails instanceof Map
+        ? app.loadedThumbnails
+        : baseView?.state?.loadedThumbnails instanceof Map
+        ? baseView.state.loadedThumbnails
+        : new Map();
+
+    const videosMap =
+      app?.videosMap instanceof Map
+        ? app.videosMap
+        : baseView?.state?.videosMap instanceof Map
+        ? baseView.state.videosMap
+        : new Map();
+
+    const urlHealthCache =
+      app?.urlHealthSnapshots instanceof Map
+        ? app.urlHealthSnapshots
+        : baseView?.state?.urlHealthByVideoId instanceof Map
+        ? baseView.state.urlHealthByVideoId
+        : new Map();
+
+    const streamHealthCache =
+      app?.streamHealthSnapshots instanceof Map
+        ? app.streamHealthSnapshots
+        : baseView?.state?.streamHealthByVideoId instanceof Map
+        ? baseView.state.streamHealthByVideoId
+        : new Map();
+
+    const listViewConfig = {
+      document: doc,
+      container,
+      mediaLoader: app?.mediaLoader || baseView?.mediaLoader || null,
+      badgeHelpers,
+      formatters: {
+        formatTimeAgo,
+        formatViewCountLabel,
+      },
+      helpers: {
+        escapeHtml: (value) => app?.escapeHTML?.(value) ?? value,
+        isMagnetSupported: (magnet) =>
+          app?.isMagnetUriSupported?.(magnet) ?? false,
+        toLocaleString: (value) =>
+          typeof value === "number" ? value.toLocaleString() : value,
+      },
+      assets,
+      state: {
+        loadedThumbnails,
+        videosMap,
+        urlHealthByVideoId: urlHealthCache,
+        streamHealthByVideoId: streamHealthCache,
+      },
+      utils: {
+        dedupeVideos: (videos) => (Array.isArray(videos) ? [...videos] : []),
+        getAllEvents: () => Array.from(nostrClient.allEvents.values()),
+        hasOlderVersion: (video, events) =>
+          app?.hasOlderVersion?.(video, events) ?? false,
+        derivePointerInfo: (video) =>
+          app?.deriveVideoPointerInfo?.(video) ?? null,
+        persistWatchHistoryMetadata: (video, pointerInfo) =>
+          app?.persistWatchHistoryMetadataForVideo?.(video, pointerInfo),
+        getShareUrlBase: () => app?.getShareUrlBase?.() ?? "",
+        buildShareUrlFromNevent: (nevent) =>
+          app?.buildShareUrlFromNevent?.(nevent) ?? "",
+        buildShareUrlFromEventId: (eventId) =>
+          app?.buildShareUrlFromEventId?.(eventId) ?? "",
+        canManageBlacklist: () =>
+          app?.canCurrentUserManageBlacklist?.() ?? false,
+        canEditVideo: (video) => video?.pubkey === app?.pubkey,
+        canDeleteVideo: (video) => video?.pubkey === app?.pubkey,
+        batchFetchProfiles: (authorSet) =>
+          app?.batchFetchProfiles?.(authorSet),
+        bindThumbnailFallbacks: (target) =>
+          app?.bindThumbnailFallbacks?.(target),
+        handleUrlHealthBadge: (payload) =>
+          app?.handleUrlHealthBadge?.(payload),
+        refreshDiscussionCounts: (videosList, { container: root } = {}) =>
+          app?.refreshVideoDiscussionCounts?.(videosList, {
+            videoListRoot: root || container || null,
+          }),
+        ensureGlobalMoreMenuHandlers: () =>
+          app?.ensureGlobalMoreMenuHandlers?.(),
+        closeAllMenus: () => app?.closeAllMoreMenus?.(),
+      },
+      renderers: {
+        getLoadingMarkup: (message) => getSidebarLoadingMarkup(message),
+      },
+    };
+
+    const listView = new VideoListView(listViewConfig);
+
+    listView.setPlaybackHandler((detail) => {
+      if (!detail) {
+        return;
+      }
+      if (detail.videoId) {
+        Promise.resolve(
+          app?.playVideoByEventId?.(detail.videoId, {
+            url: detail.url,
+            magnet: detail.magnet,
+          })
+        ).catch(
+          (error) => {
+            console.error(
+              "[SubscriptionsManager] Failed to play by event id:",
+              error
+            );
+          }
+        );
+        return;
+      }
+      Promise.resolve(
+        app?.playVideoWithFallback?.({ url: detail.url, magnet: detail.magnet })
+      ).catch((error) => {
+        console.error(
+          "[SubscriptionsManager] Failed to start playback:",
+          error
+        );
       });
     });
 
-    authorNames.forEach((nameEl) => {
-      nameEl.style.cursor = "pointer";
-      nameEl.addEventListener("click", (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const pubkey = nameEl.getAttribute("data-pubkey");
-        window.app?.goToProfile(pubkey);
+    listView.setEditHandler(({ video, index }) => {
+      if (!video?.id) {
+        return;
+      }
+      app?.handleEditVideo?.({
+        eventId: video.id,
+        index: Number.isFinite(index) ? index : null,
       });
     });
+
+    listView.setRevertHandler(({ video, index }) => {
+      if (!video?.id) {
+        return;
+      }
+      app?.handleRevertVideo?.({
+        eventId: video.id,
+        index: Number.isFinite(index) ? index : null,
+      });
+    });
+
+    listView.setDeleteHandler(({ video, index }) => {
+      if (!video?.id) {
+        return;
+      }
+      app?.handleFullDeleteVideo?.({
+        eventId: video.id,
+        index: Number.isFinite(index) ? index : null,
+      });
+    });
+
+    listView.setBlacklistHandler(({ video, dataset }) => {
+      const detail = {
+        ...(dataset || {}),
+        author: dataset?.author || video?.pubkey || "",
+        context: dataset?.context || "subscriptions",
+      };
+      app?.handleMoreMenuAction?.("blacklist-author", detail);
+    });
+
+    listView.addEventListener("video:share", (event) => {
+      const detail = event?.detail || {};
+      const dataset = {
+        ...(detail.dataset || {}),
+        eventId:
+          detail.eventId ||
+          detail.dataset?.eventId ||
+          detail.video?.id ||
+          "",
+        context: detail.dataset?.context || "subscriptions",
+      };
+      app?.handleMoreMenuAction?.(detail.action || "copy-link", dataset);
+    });
+
+    listView.addEventListener("video:context-action", (event) => {
+      const detail = event?.detail || {};
+      const dataset = {
+        ...(detail.dataset || {}),
+        eventId: detail.dataset?.eventId || detail.video?.id || "",
+        context: detail.dataset?.context || "subscriptions",
+      };
+      app?.handleMoreMenuAction?.(detail.action, dataset);
+    });
+
+    this.subscriptionListView = listView;
+    return this.subscriptionListView;
+  }
+
+  async refreshActiveFeed(options = {}) {
+    if (!this.lastRunOptions) {
+      return null;
+    }
+
+    const { actorPubkey, containerId, limit } = this.lastRunOptions;
+    if (!actorPubkey || !containerId) {
+      return null;
+    }
+
+    const reason =
+      typeof options?.reason === "string" && options.reason.trim()
+        ? options.reason.trim()
+        : this.lastRunOptions.reason;
+
+    return this.showSubscriptionVideos(actorPubkey, containerId, {
+      limit,
+      reason,
+    });
   }
 
   convertEventToVideo(evt) {
     return sharedConvertEventToVideo(evt);
   }
 
-  dedupeToNewestByRoot(videos) {
-    const map = new Map();
-    for (const v of videos) {
-      const rootId = v.videoRootId || v.id;
-      const existing = map.get(rootId);
-      if (!existing || v.created_at > existing.created_at) {
-        map.set(rootId, v);
-      }
-    }
-    return Array.from(map.values());
-  }
 }
 
 export const subscriptions = new SubscriptionsManager();
diff --git a/js/ui/components/EditModal.js b/js/ui/components/EditModal.js
new file mode 100644
index 00000000..ff410f1a
--- /dev/null
+++ b/js/ui/components/EditModal.js
@@ -0,0 +1,885 @@
+import { extractMagnetHints, normalizeAndAugmentMagnet } from "../../magnet.js";
+import { Nip71FormManager } from "./nip71FormManager.js";
+
+export class EditModal {
+  constructor({
+    removeTrackingScripts,
+    setGlobalModalState,
+    sanitizers = {},
+    escapeHtml,
+    showError,
+    getMode,
+    eventTarget,
+    container,
+  } = {}) {
+    this.removeTrackingScripts =
+      typeof removeTrackingScripts === "function" ? removeTrackingScripts : () => {};
+    this.setGlobalModalState =
+      typeof setGlobalModalState === "function" ? setGlobalModalState : () => {};
+    this.escapeHtml = typeof escapeHtml === "function" ? escapeHtml : (value) => `${value ?? ""}`;
+    this.showError = typeof showError === "function" ? showError : () => {};
+    this.getMode = typeof getMode === "function" ? getMode : () => "live";
+    this.eventTarget = eventTarget instanceof EventTarget ? eventTarget : new EventTarget();
+    this.container = container || null;
+
+    this.sanitizers = {
+      text:
+        typeof sanitizers.text === "function"
+          ? sanitizers.text
+          : (value) => (typeof value === "string" ? value.trim() : ""),
+      url:
+        typeof sanitizers.url === "function"
+          ? sanitizers.url
+          : (value) => (typeof value === "string" ? value.trim() : ""),
+      magnet:
+        typeof sanitizers.magnet === "function"
+          ? sanitizers.magnet
+          : (value) => (typeof value === "string" ? value.trim() : ""),
+      checkbox:
+        typeof sanitizers.checkbox === "function"
+          ? sanitizers.checkbox
+          : (value) => !!value,
+    };
+
+    this.root = null;
+    this.overlay = null;
+    this.form = null;
+    this.closeButton = null;
+    this.cancelButton = null;
+    this.submitButton = null;
+    this.fieldButtons = [];
+    this.fields = {};
+    this.visibility = {
+      container: null,
+      buttons: [],
+    };
+
+    this.activeVideo = null;
+    this.isVisible = false;
+    this.eventsBound = false;
+    this.loadPromise = null;
+
+    this.pendingSubmit = false;
+    this.pendingSubmitVideo = null;
+
+    this.nip71FormManager = new Nip71FormManager();
+    this.nip71SectionKey = "edit";
+    this.originalNip71Metadata = null;
+    this.originalNip71MetadataJson = null;
+  }
+
+  addEventListener(type, listener, options) {
+    this.eventTarget.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type, listener, options) {
+    this.eventTarget.removeEventListener(type, listener, options);
+  }
+
+  emit(type, detail) {
+    this.eventTarget.dispatchEvent(new CustomEvent(type, { detail }));
+  }
+
+  getRoot() {
+    return this.root;
+  }
+
+  async load({ container } = {}) {
+    if (this.root) {
+      return this.root;
+    }
+
+    if (this.loadPromise) {
+      return this.loadPromise;
+    }
+
+    this.loadPromise = (async () => {
+      const targetContainer =
+        container || this.container || document.getElementById("modalContainer");
+      if (!targetContainer) {
+        throw new Error("Modal container element not found!");
+      }
+
+      let modal = targetContainer.querySelector("#editVideoModal");
+      if (!modal) {
+        const response = await fetch("components/edit-video-modal.html");
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const html = await response.text();
+        const wrapper = document.createElement("div");
+        wrapper.innerHTML = html;
+        this.removeTrackingScripts(wrapper);
+        targetContainer.appendChild(wrapper);
+        modal = wrapper.querySelector("#editVideoModal");
+      }
+
+      if (!modal) {
+        throw new Error("Edit video modal markup missing after load.");
+      }
+
+      this.container = targetContainer;
+      this.root = modal;
+
+      this.cacheElements(modal);
+      if (!this.eventsBound) {
+        this.bindEvents();
+        this.eventsBound = true;
+      }
+      this.reset();
+
+      return this.root;
+    })();
+
+    try {
+      return await this.loadPromise;
+    } finally {
+      this.loadPromise = null;
+    }
+  }
+
+  cacheElements(context) {
+    this.overlay = context.querySelector("#editVideoModalOverlay") || null;
+    this.form = context.querySelector("#editVideoForm") || null;
+    this.closeButton = context.querySelector("#closeEditVideoModal") || null;
+    this.cancelButton = context.querySelector("#cancelEditVideo") || null;
+    this.submitButton = context.querySelector("#submitEditVideo") || null;
+
+    this.updateSubmitButtonState();
+
+    this.fieldButtons = Array.from(context.querySelectorAll("[data-edit-target]"));
+
+    this.fields = {
+      title: context.querySelector("#editVideoTitle") || null,
+      url: context.querySelector("#editVideoUrl") || null,
+      magnet: context.querySelector("#editVideoMagnet") || null,
+      ws: context.querySelector("#editVideoWs") || null,
+      xs: context.querySelector("#editVideoXs") || null,
+      thumbnail: context.querySelector("#editVideoThumbnail") || null,
+      description: context.querySelector("#editVideoDescription") || null,
+      isPrivate: context.querySelector("#editVideoIsPrivate") || null,
+      enableComments: context.querySelector("#editEnableComments") || null,
+    };
+
+    this.visibility = {
+      container: context.querySelector("[data-visibility-toggle]") || null,
+      buttons: Array.from(
+        context.querySelectorAll("[data-visibility-option]") || []
+      ),
+      helper: context.querySelector("[data-visibility-helper]") || null,
+      helperDefault: "",
+    };
+
+    if (this.visibility.helper) {
+      this.visibility.helperDefault = this.visibility.helper.textContent || "";
+    }
+
+    const nip71Context = this.form || context;
+    this.nip71FormManager.registerSection(this.nip71SectionKey, nip71Context);
+  }
+
+  bindEvents() {
+    if (this.form) {
+      this.form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        this.submit();
+      });
+    }
+
+    const cancelHandler = (event) => {
+      event?.preventDefault?.();
+      this.close({ emitCancel: true });
+    };
+
+    if (this.overlay) {
+      this.overlay.addEventListener("click", cancelHandler);
+    }
+
+    if (this.closeButton) {
+      this.closeButton.addEventListener("click", cancelHandler);
+    }
+
+    if (this.cancelButton) {
+      this.cancelButton.addEventListener("click", cancelHandler);
+    }
+
+    if (Array.isArray(this.fieldButtons)) {
+      this.fieldButtons.forEach((button) => {
+        if (!button || button.dataset.editListenerAttached === "true") {
+          return;
+        }
+        button.addEventListener("click", (event) => {
+          this.handleEditFieldToggle(event);
+        });
+        button.dataset.editListenerAttached = "true";
+      });
+    }
+
+    if (Array.isArray(this.visibility?.buttons)) {
+      this.visibility.buttons.forEach((button) => {
+        button.addEventListener("click", (event) => {
+          const option = event?.currentTarget?.dataset?.visibilityOption;
+          if (!option) {
+            return;
+          }
+          this.setVisibility(option);
+        });
+      });
+    }
+
+    if (this.fields.isPrivate) {
+      this.fields.isPrivate.addEventListener("change", () => {
+        this.handleIsPrivateChange({ emit: true });
+      });
+    }
+
+    if (this.fields.enableComments) {
+      this.fields.enableComments.addEventListener("change", (event) => {
+        const target = event.currentTarget;
+        const value = this.sanitizers.checkbox(target?.checked);
+        const detail = {
+          field: "enableComments",
+          value,
+          videoId: this.escapeHtml(this.activeVideo?.id || ""),
+        };
+        this.emit("video:edit-visibility-change", detail);
+      });
+    }
+
+    this.nip71FormManager.bindSection(this.nip71SectionKey);
+  }
+
+  reset() {
+    if (!this.root) {
+      this.activeVideo = null;
+      this.nip71FormManager.resetSection(this.nip71SectionKey);
+      this.originalNip71Metadata = null;
+      this.originalNip71MetadataJson = null;
+      this.setSubmitState({ pending: false });
+      return;
+    }
+
+    const inputs = Object.values(this.fields);
+    inputs.forEach((input) => {
+      if (!input) {
+        return;
+      }
+      if (input.type === "checkbox") {
+        const defaultAttr = input.dataset?.defaultChecked;
+        const defaultChecked =
+          defaultAttr === "true"
+            ? true
+            : defaultAttr === "false"
+            ? false
+            : input.defaultChecked;
+        input.checked = defaultChecked;
+        input.disabled = false;
+        input.removeAttribute("disabled");
+        delete input.dataset.isEditing;
+      } else {
+        input.value = "";
+        input.readOnly = false;
+        input.removeAttribute("readonly");
+        input.classList.remove("locked-input");
+        delete input.dataset.isEditing;
+      }
+      delete input.dataset.originalValue;
+    });
+
+    if (Array.isArray(this.fieldButtons)) {
+      this.fieldButtons.forEach((button) => {
+        button.classList.add("hidden");
+        button.dataset.mode = "locked";
+        button.textContent = "Edit field";
+      });
+    }
+
+    this.handleIsPrivateChange({ emit: false });
+
+    this.nip71FormManager.resetSection(this.nip71SectionKey);
+    this.originalNip71Metadata = null;
+    this.originalNip71MetadataJson = null;
+    this.activeVideo = null;
+    this.setSubmitState({ pending: false });
+  }
+
+  async open(video) {
+    await this.load();
+
+    if (!video) {
+      throw new Error("No video provided for editing.");
+    }
+
+    this.reset();
+
+    const magnetSource = video.magnet || video.rawMagnet || "";
+    const magnetHints = extractMagnetHints(magnetSource);
+    const effectiveWs = video.ws || magnetHints.ws || "";
+    const effectiveXs = video.xs || magnetHints.xs || "";
+    const enableCommentsValue =
+      typeof video.enableComments === "boolean" ? video.enableComments : true;
+    const isPrivateValue = video.isPrivate === true;
+
+    const editContext = {
+      ...video,
+      ws: effectiveWs,
+      xs: effectiveXs,
+      enableComments: enableCommentsValue,
+      isPrivate: isPrivateValue,
+    };
+
+    this.applyVideoToForm(editContext);
+    this.nip71FormManager.resetSection(this.nip71SectionKey);
+    if (video.nip71 && typeof video.nip71 === "object") {
+      this.nip71FormManager.hydrateSection(this.nip71SectionKey, video.nip71);
+    }
+    const initialNip71 = this.nip71FormManager.collectSection(this.nip71SectionKey);
+    this.originalNip71Metadata = this.cloneNip71Metadata(initialNip71);
+    this.originalNip71MetadataJson = JSON.stringify(this.originalNip71Metadata);
+    this.activeVideo = editContext;
+
+    if (this.root) {
+      this.root.classList.remove("hidden");
+      this.isVisible = true;
+      this.setGlobalModalState("editVideo", true);
+    }
+
+    return true;
+  }
+
+  applyVideoToForm(editContext) {
+    if (!editContext) {
+      return;
+    }
+
+    const fieldMap = {
+      title: editContext.title || "",
+      url: editContext.url || "",
+      magnet: editContext.magnet || "",
+      ws: editContext.ws || "",
+      xs: editContext.xs || "",
+      thumbnail: editContext.thumbnail || "",
+      description: editContext.description || "",
+      isPrivate: editContext.isPrivate,
+      enableComments: editContext.enableComments,
+    };
+
+    Object.entries(fieldMap).forEach(([key, rawValue]) => {
+      const input = this.fields[key];
+      const targetId = this.fieldIdForKey(key);
+      const button = this.fieldButtons.find(
+        (item) => item?.dataset?.editTarget === targetId
+      );
+
+      if (!input) {
+        if (button) {
+          button.classList.add("hidden");
+          button.dataset.mode = "locked";
+          button.textContent = "Edit field";
+        }
+        return;
+      }
+
+      if (targetId) {
+        input.id = targetId;
+      }
+
+      const isCheckbox = input.type === "checkbox";
+      if (isCheckbox) {
+        const hasValue = rawValue !== undefined;
+        const boolValue = rawValue === true;
+        input.checked = boolValue;
+        input.disabled = hasValue;
+        if (hasValue) {
+          input.setAttribute("disabled", "disabled");
+        } else {
+          input.removeAttribute("disabled");
+        }
+        input.dataset.originalValue = boolValue ? "true" : "false";
+        input.dataset.isEditing = hasValue ? "false" : "true";
+        if (button) {
+          if (hasValue) {
+            button.classList.remove("hidden");
+            button.dataset.mode = "locked";
+            button.textContent = "Edit field";
+          } else {
+            button.classList.add("hidden");
+            button.dataset.mode = "locked";
+            button.textContent = "Edit field";
+          }
+        }
+        return;
+      }
+
+      const value = typeof rawValue === "string" ? rawValue : "";
+      const hasValue = value.trim().length > 0;
+
+      input.value = value;
+      input.dataset.originalValue = value;
+      input.dataset.isEditing = hasValue ? "false" : "true";
+      if (hasValue) {
+        input.readOnly = true;
+        input.setAttribute("readonly", "readonly");
+        input.classList.add("locked-input");
+      } else {
+        input.readOnly = false;
+        input.removeAttribute("readonly");
+        input.classList.remove("locked-input");
+      }
+
+      if (button) {
+        if (hasValue) {
+          button.classList.remove("hidden");
+          button.dataset.mode = "locked";
+          button.textContent = "Edit field";
+        } else {
+          button.classList.add("hidden");
+          button.dataset.mode = "locked";
+          button.textContent = "Edit field";
+        }
+      }
+    });
+
+    this.handleIsPrivateChange({ emit: false });
+  }
+
+  fieldIdForKey(key) {
+    switch (key) {
+      case "title":
+        return "editVideoTitle";
+      case "url":
+        return "editVideoUrl";
+      case "magnet":
+        return "editVideoMagnet";
+      case "ws":
+        return "editVideoWs";
+      case "xs":
+        return "editVideoXs";
+      case "thumbnail":
+        return "editVideoThumbnail";
+      case "description":
+        return "editVideoDescription";
+      case "isPrivate":
+        return "editVideoIsPrivate";
+      case "enableComments":
+        return "editEnableComments";
+      default:
+        return null;
+    }
+  }
+
+  close({ emitCancel = false } = {}) {
+    if (this.root) {
+      this.root.classList.add("hidden");
+    }
+    this.isVisible = false;
+    this.setGlobalModalState("editVideo", false);
+    const cancelledVideo = this.activeVideo;
+    this.reset();
+
+    if (emitCancel) {
+      this.emit("video:edit-cancel", {
+        videoId: this.escapeHtml(cancelledVideo?.id || ""),
+        pubkey: this.escapeHtml(cancelledVideo?.pubkey || ""),
+      });
+    }
+  }
+
+  handleEditFieldToggle(event) {
+    const button = event?.currentTarget;
+    if (!button) {
+      return;
+    }
+
+    const targetId = button.dataset?.editTarget;
+    if (!targetId) {
+      return;
+    }
+
+    const input = this.root?.querySelector(`#${targetId}`);
+    if (!input) {
+      return;
+    }
+
+    const isCheckbox = input.type === "checkbox";
+    const isLocked = isCheckbox
+      ? input.disabled === true
+      : input.readOnly === true;
+
+    if (isLocked) {
+      if (isCheckbox) {
+        input.disabled = false;
+        input.removeAttribute("disabled");
+        input.dataset.isEditing = "true";
+      } else {
+        input.disabled = false;
+        input.readOnly = false;
+        input.removeAttribute("readonly");
+        input.classList.remove("locked-input");
+        input.dataset.isEditing = "true";
+      }
+      button.dataset.mode = "editing";
+      button.textContent = "Restore original";
+      if (!isCheckbox && typeof input.focus === "function") {
+        input.focus();
+        if (typeof input.setSelectionRange === "function") {
+          const length = input.value.length;
+          try {
+            input.setSelectionRange(length, length);
+          } catch (error) {
+            // Ignore selection errors (e.g. unsupported input types)
+          }
+        }
+      }
+      if (input === this.fields.isPrivate) {
+        this.updateVisibilityToggleUI();
+      }
+      return;
+    }
+
+    const originalValue = input.dataset?.originalValue || "";
+
+    if (isCheckbox) {
+      input.checked = originalValue === "true";
+      input.disabled = true;
+      input.setAttribute("disabled", "disabled");
+      input.dataset.isEditing = "false";
+      button.dataset.mode = "locked";
+      button.textContent = "Edit field";
+      if (input === this.fields.isPrivate) {
+        this.updateVisibilityToggleUI();
+      }
+      return;
+    }
+
+    input.value = originalValue;
+
+    if (originalValue) {
+      input.readOnly = true;
+      input.setAttribute("readonly", "readonly");
+      input.classList.add("locked-input");
+      input.dataset.isEditing = "false";
+      button.dataset.mode = "locked";
+      button.textContent = "Edit field";
+    } else {
+      input.readOnly = false;
+      input.removeAttribute("readonly");
+      input.classList.remove("locked-input");
+      input.dataset.isEditing = "true";
+      button.classList.add("hidden");
+      button.dataset.mode = "locked";
+      button.textContent = "Edit field";
+    }
+  }
+
+  setVisibility(option, { emit = true } = {}) {
+    const checkbox = this.fields.isPrivate;
+    if (!checkbox) {
+      return;
+    }
+
+    const normalized = typeof option === "string" ? option.toLowerCase() : "";
+    if (normalized !== "public" && normalized !== "private") {
+      return;
+    }
+
+    if (checkbox.disabled) {
+      this.updateVisibilityToggleUI();
+      return;
+    }
+
+    const wantPrivate = normalized === "private";
+    if (checkbox.checked === wantPrivate) {
+      this.updateVisibilityToggleUI();
+      return;
+    }
+
+    checkbox.checked = wantPrivate;
+    this.handleIsPrivateChange({ emit });
+  }
+
+  updateVisibilityToggleUI() {
+    const checkbox = this.fields.isPrivate;
+    const buttons = Array.isArray(this.visibility?.buttons)
+      ? this.visibility.buttons
+      : [];
+    if (!checkbox) {
+      return;
+    }
+
+    const isPrivate = checkbox.checked === true;
+    const disabled = checkbox.disabled === true;
+
+    buttons.forEach((button) => {
+      if (!button) {
+        return;
+      }
+      const option = button.dataset?.visibilityOption || "";
+      const normalized = option.toLowerCase();
+      const isActive =
+        (normalized === "private" && isPrivate) ||
+        (normalized === "public" && !isPrivate);
+      button.dataset.active = isActive ? "true" : "false";
+      button.setAttribute("aria-pressed", isActive ? "true" : "false");
+      if (disabled) {
+        button.classList.add("is-disabled");
+        button.setAttribute("aria-disabled", "true");
+        button.tabIndex = -1;
+      } else {
+        button.classList.remove("is-disabled");
+        button.removeAttribute("aria-disabled");
+        button.tabIndex = 0;
+      }
+    });
+
+    if (this.visibility?.container) {
+      this.visibility.container.dataset.state = isPrivate ? "private" : "public";
+      if (disabled) {
+        this.visibility.container.dataset.disabled = "true";
+      } else {
+        delete this.visibility.container.dataset.disabled;
+      }
+    }
+
+    const helper = this.visibility?.helper;
+    if (helper) {
+      const privateCopy = this.visibility.helperDefault || helper.textContent;
+      const publicCopy =
+        "Public notes appear in feeds for everyone who can view your channel.";
+      helper.textContent = isPrivate ? privateCopy : publicCopy;
+    }
+  }
+
+  handleIsPrivateChange({ emit = true } = {}) {
+    const checkbox = this.fields.isPrivate;
+    if (!checkbox) {
+      return;
+    }
+
+    this.updateVisibilityToggleUI();
+
+    if (!emit) {
+      return;
+    }
+
+    const value = this.sanitizers.checkbox(checkbox.checked);
+    const detail = {
+      field: "isPrivate",
+      value,
+      videoId: this.escapeHtml(this.activeVideo?.id || ""),
+    };
+    this.emit("video:edit-visibility-change", detail);
+  }
+
+  cloneNip71Metadata(metadata) {
+    if (metadata == null) {
+      return null;
+    }
+    try {
+      return JSON.parse(JSON.stringify(metadata));
+    } catch (error) {
+      return metadata;
+    }
+  }
+
+  submit() {
+    if (this.pendingSubmit) {
+      return;
+    }
+
+    if (!this.activeVideo || !this.root) {
+      this.showError("No video selected for editing.");
+      return;
+    }
+
+    this.setSubmitState({ pending: true, video: this.activeVideo });
+
+    const fieldValue = (key) => {
+      const input = this.fields[key];
+      if (!input || typeof input.value !== "string") {
+        return "";
+      }
+      if (key === "url" || key === "ws" || key === "xs") {
+        return this.sanitizers.url(input.value);
+      }
+      if (key === "magnet") {
+        return this.sanitizers.magnet(input.value);
+      }
+      return this.sanitizers.text(input.value);
+    };
+
+    const original = this.pendingSubmitVideo || this.activeVideo;
+
+    const titleInput = this.fields.title;
+    const urlInput = this.fields.url;
+    const magnetInput = this.fields.magnet;
+    const wsInput = this.fields.ws;
+    const xsInput = this.fields.xs;
+    const thumbnailInput = this.fields.thumbnail;
+    const descriptionInput = this.fields.description;
+    const commentsInput = this.fields.enableComments;
+    const privateInput = this.fields.isPrivate;
+
+    const newTitle = fieldValue("title");
+    const newUrl = fieldValue("url");
+    const newMagnet = fieldValue("magnet");
+    const newWs = fieldValue("ws");
+    const newXs = fieldValue("xs");
+    const newThumbnail = fieldValue("thumbnail");
+    const newDescription = fieldValue("description");
+
+    const isEditing = (input) => {
+      if (!input) {
+        return true;
+      }
+      if (input.dataset?.isEditing === "true") {
+        return true;
+      }
+      if (input.type === "checkbox") {
+        return input.disabled === false;
+      }
+      return input.readOnly === false;
+    };
+
+    const titleWasEdited = isEditing(titleInput);
+    const urlWasEdited = isEditing(urlInput);
+    const magnetWasEdited = isEditing(magnetInput);
+
+    const finalTitle = titleWasEdited ? newTitle : original.title || "";
+    const finalUrl = urlWasEdited ? newUrl : original.url || "";
+    const shouldUseOriginalWs = wsInput ? wsInput.readOnly !== false : true;
+    const shouldUseOriginalXs = xsInput ? xsInput.readOnly !== false : true;
+    let finalWs = shouldUseOriginalWs ? original.ws || "" : newWs;
+    let finalXs = shouldUseOriginalXs ? original.xs || "" : newXs;
+    let finalMagnet = magnetWasEdited ? newMagnet : original.magnet || "";
+    const finalThumbnail = isEditing(thumbnailInput)
+      ? newThumbnail
+      : original.thumbnail || "";
+    const finalDescription = isEditing(descriptionInput)
+      ? newDescription
+      : original.description || "";
+    const originalEnableComments =
+      typeof original.enableComments === "boolean" ? original.enableComments : true;
+    const originalIsPrivate = original.isPrivate === true;
+
+    const currentNip71 = this.cloneNip71Metadata(
+      this.nip71FormManager.collectSection(this.nip71SectionKey)
+    );
+    const hasImetaSource = Array.isArray(currentNip71?.imeta)
+      ? currentNip71.imeta.some((variant) => {
+          if (!variant || typeof variant !== "object") {
+            return false;
+          }
+          const hasUrl = typeof variant.url === "string" && variant.url.trim();
+          const hasMagnet = typeof variant.x === "string" && variant.x.trim();
+          return Boolean(hasUrl || hasMagnet);
+        })
+      : false;
+
+    let finalEnableComments = originalEnableComments;
+    if (commentsInput) {
+      if (commentsInput.disabled) {
+        finalEnableComments = commentsInput.dataset.originalValue === "true";
+      } else {
+        finalEnableComments = this.sanitizers.checkbox(commentsInput.checked);
+      }
+    }
+
+    let finalIsPrivate = originalIsPrivate;
+    if (privateInput) {
+      if (privateInput.disabled) {
+        finalIsPrivate = privateInput.dataset.originalValue === "true";
+      } else {
+        finalIsPrivate = this.sanitizers.checkbox(privateInput.checked);
+      }
+    }
+
+    if (!finalTitle || (!finalUrl && !finalMagnet && !hasImetaSource)) {
+      this.showError(
+        "Title and at least one of URL, Magnet, or a NIP-71 media variant is required."
+      );
+      return;
+    }
+
+    if (finalUrl && !/^https:\/\//i.test(finalUrl)) {
+      this.showError("Hosted video URLs must use HTTPS.");
+      return;
+    }
+
+    if (finalMagnet) {
+      const normalizedMagnet = normalizeAndAugmentMagnet(finalMagnet, {
+        ws: finalWs,
+        xs: finalXs,
+      });
+      finalMagnet = normalizedMagnet;
+      const hints = extractMagnetHints(normalizedMagnet);
+      finalWs = hints.ws;
+      finalXs = hints.xs;
+    } else {
+      finalWs = "";
+      finalXs = "";
+    }
+
+    const updatedData = {
+      version: original.version || 2,
+      title: finalTitle,
+      magnet: finalMagnet,
+      url: finalUrl,
+      thumbnail: finalThumbnail,
+      description: finalDescription,
+      mode: this.getMode(),
+      ws: finalWs,
+      xs: finalXs,
+      wsEdited: !shouldUseOriginalWs,
+      xsEdited: !shouldUseOriginalXs,
+      urlEdited: urlWasEdited,
+      magnetEdited: magnetWasEdited,
+      enableComments: finalEnableComments,
+      isPrivate: finalIsPrivate,
+    };
+
+    const currentNip71Json = JSON.stringify(currentNip71);
+    const nip71Edited = currentNip71Json !== this.originalNip71MetadataJson;
+    updatedData.nip71 = currentNip71;
+    updatedData.nip71Edited = nip71Edited;
+
+    const originalEvent = {
+      id: this.sanitizers.text(original.id || ""),
+      pubkey: this.sanitizers.text(original.pubkey || ""),
+      videoRootId: this.sanitizers.text(original.videoRootId || ""),
+    };
+
+    this.emit("video:edit-submit", {
+      originalEvent,
+      updatedData,
+      video: { ...original },
+    });
+  }
+
+  setSubmitState({ pending = false, video } = {}) {
+    const nextPending = Boolean(pending);
+    if (nextPending) {
+      this.pendingSubmitVideo = video || this.activeVideo || this.pendingSubmitVideo;
+    } else {
+      this.pendingSubmitVideo = null;
+    }
+
+    this.pendingSubmit = nextPending;
+    this.updateSubmitButtonState();
+  }
+
+  updateSubmitButtonState() {
+    if (!this.submitButton) {
+      return;
+    }
+
+    if (this.pendingSubmit) {
+      this.submitButton.disabled = true;
+      this.submitButton.setAttribute("disabled", "disabled");
+    } else {
+      this.submitButton.disabled = false;
+      this.submitButton.removeAttribute("disabled");
+    }
+  }
+}
diff --git a/js/ui/components/RevertModal.js b/js/ui/components/RevertModal.js
new file mode 100644
index 00000000..5e287b69
--- /dev/null
+++ b/js/ui/components/RevertModal.js
@@ -0,0 +1,1547 @@
+import { Nip71FormManager } from "./nip71FormManager.js";
+
+// NOTE: Any metadata field added to the Upload or Edit modals must also be
+// rendered inside the Revert modal to keep the experiences aligned.
+export class RevertModal {
+  constructor({
+    removeTrackingScripts,
+    setGlobalModalState,
+    formatAbsoluteTimestamp,
+    formatTimeAgo,
+    escapeHTML,
+    truncateMiddle,
+    fallbackThumbnailSrc,
+    container,
+  }) {
+    this.removeTrackingScripts = removeTrackingScripts;
+    this.setGlobalModalState = setGlobalModalState;
+    this.formatAbsoluteTimestamp = formatAbsoluteTimestamp;
+    this.formatTimeAgo = formatTimeAgo;
+    this.escapeHTML = escapeHTML;
+    this.truncateMiddle = truncateMiddle;
+    this.fallbackThumbnailSrc = fallbackThumbnailSrc || "";
+    this.container = container || document.getElementById("modalContainer");
+
+    this.nip71Formatter = new Nip71FormManager();
+
+    this.eventTarget = new EventTarget();
+
+    this.modal = null;
+    this.overlay = null;
+    this.list = null;
+    this.details = null;
+    this.placeholder = null;
+    this.detailsDefaultHTML = "";
+    this.historyCount = null;
+    this.statusLabel = null;
+    this.title = null;
+    this.subtitle = null;
+    this.closeButton = null;
+    this.cancelButton = null;
+    this.confirmButton = null;
+
+    this.activeVideo = null;
+    this.revisions = [];
+    this.selectedRevision = null;
+    this.pendingEntries = [];
+    this.busy = false;
+    this.context = null;
+
+    this.confirmDefaultLabel = "Revert to selected version";
+
+    this.bound = false;
+    this.boundHandlers = {
+      listClick: (event) => this.handleListClick(event),
+      confirm: () => this.handleConfirmClick(),
+      cancel: () => this.handleCancelInteraction(),
+      overlay: () => this.handleCancelInteraction(),
+      close: () => this.handleCloseInteraction(),
+    };
+
+    this.reset();
+  }
+
+  addEventListener(type, listener, options) {
+    this.eventTarget.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type, listener, options) {
+    this.eventTarget.removeEventListener(type, listener, options);
+  }
+
+  dispatch(type, detail) {
+    this.eventTarget.dispatchEvent(
+      new CustomEvent(type, {
+        detail,
+      })
+    );
+  }
+
+  async load() {
+    if (this.modal) {
+      return true;
+    }
+
+    let modal = document.getElementById("revertVideoModal");
+    if (!modal) {
+      const response = await fetch("components/revert-video-modal.html");
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const html = await response.text();
+      const modalContainer = this.container;
+      if (!modalContainer) {
+        throw new Error("Modal container element not found!");
+      }
+
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = html;
+      if (typeof this.removeTrackingScripts === "function") {
+        this.removeTrackingScripts(wrapper);
+      }
+      modalContainer.appendChild(wrapper);
+
+      modal = wrapper.querySelector("#revertVideoModal");
+    }
+
+    if (!modal) {
+      throw new Error("Revert video modal markup missing after load.");
+    }
+
+    this.cacheElements(modal);
+    this.bindEvents();
+    this.reset();
+
+    return true;
+  }
+
+  cacheElements(modal) {
+    this.modal = modal;
+    this.overlay = modal.querySelector("#revertVideoModalOverlay") || null;
+    this.list = modal.querySelector("#revertVersionsList") || null;
+    this.details = modal.querySelector("#revertVersionDetails") || null;
+    this.placeholder = modal.querySelector("#revertVersionPlaceholder") || null;
+    this.detailsDefaultHTML = this.details ? this.details.innerHTML : "";
+    this.historyCount = modal.querySelector("#revertHistoryCount") || null;
+    this.statusLabel = modal.querySelector("#revertSelectionStatus") || null;
+    this.title = modal.querySelector("#revertModalTitle") || null;
+    this.subtitle = modal.querySelector("#revertModalSubtitle") || null;
+    this.closeButton = modal.querySelector("#closeRevertVideoModal") || null;
+    this.cancelButton = modal.querySelector("#cancelRevertVideo") || null;
+    this.confirmButton = modal.querySelector("#confirmRevertVideo") || null;
+
+    if (this.confirmButton) {
+      const text = this.confirmButton.textContent?.trim();
+      if (text) {
+        this.confirmDefaultLabel = text;
+      }
+    }
+  }
+
+  bindEvents() {
+    if (this.bound || !this.modal) {
+      return;
+    }
+
+    if (this.list) {
+      this.list.addEventListener("click", this.boundHandlers.listClick);
+    }
+    if (this.confirmButton) {
+      this.confirmButton.addEventListener("click", this.boundHandlers.confirm);
+    }
+    if (this.cancelButton) {
+      this.cancelButton.addEventListener("click", this.boundHandlers.cancel);
+    }
+    if (this.overlay) {
+      this.overlay.addEventListener("click", this.boundHandlers.overlay);
+    }
+    if (this.closeButton) {
+      this.closeButton.addEventListener("click", this.boundHandlers.close);
+    }
+
+    this.bound = true;
+  }
+
+  reset() {
+    this.activeVideo = null;
+    this.revisions = [];
+    this.selectedRevision = null;
+    this.pendingEntries = [];
+    this.busy = false;
+    this.context = null;
+
+    if (this.historyCount) {
+      this.historyCount.textContent = "";
+    }
+
+    if (this.statusLabel) {
+      this.statusLabel.textContent =
+        "Select an older revision to inspect its metadata before reverting.";
+    }
+
+    if (this.title) {
+      this.title.textContent = "Revert Video Note";
+    }
+
+    if (this.subtitle) {
+      this.subtitle.textContent =
+        "Review previous versions before restoring an older state.";
+    }
+
+    if (this.list) {
+      this.list.innerHTML = "";
+    }
+
+    if (this.details) {
+      if (this.detailsDefaultHTML) {
+        this.details.innerHTML = this.detailsDefaultHTML;
+        this.placeholder = this.details.querySelector("#revertVersionPlaceholder");
+      } else {
+        this.details.innerHTML = "";
+      }
+    }
+
+    if (this.confirmButton) {
+      this.confirmButton.disabled = true;
+      this.confirmButton.textContent = this.confirmDefaultLabel;
+      this.confirmButton.classList.remove("cursor-wait");
+    }
+
+    const toggleDisabledStyles = (button) => {
+      if (!button) {
+        return;
+      }
+      button.disabled = false;
+      button.classList.remove("opacity-60", "cursor-not-allowed");
+    };
+
+    toggleDisabledStyles(this.cancelButton);
+    toggleDisabledStyles(this.closeButton);
+  }
+
+  open(context = {}) {
+    if (!this.modal) {
+      throw new Error("Revert modal has not been loaded.");
+    }
+
+    this.context = context || {};
+    this.modal.classList.remove("hidden");
+    if (typeof this.setGlobalModalState === "function") {
+      this.setGlobalModalState("revertVideo", true);
+    }
+    this.dispatch("video:revert-open", {
+      context: this.context,
+      video: this.activeVideo,
+    });
+  }
+
+  close() {
+    if (!this.modal) {
+      return;
+    }
+
+    const detail = {
+      context: this.context,
+      video: this.activeVideo,
+    };
+
+    this.modal.classList.add("hidden");
+    if (typeof this.setGlobalModalState === "function") {
+      this.setGlobalModalState("revertVideo", false);
+    }
+    this.dispatch("video:revert-close", detail);
+    this.reset();
+  }
+
+  setHistory(video, history = []) {
+    if (!this.modal) {
+      return;
+    }
+
+    this.reset();
+
+    if (!video || typeof video !== "object") {
+      if (this.statusLabel) {
+        this.statusLabel.textContent =
+          "Unable to load revision history for this note.";
+      }
+      return;
+    }
+
+    this.activeVideo = video;
+
+    const merged = Array.isArray(history) ? history.slice() : [];
+    if (video.id && !merged.some((entry) => entry && entry.id === video.id)) {
+      merged.push(video);
+    }
+
+    const deduped = new Map();
+    for (const entry of merged) {
+      if (!entry || typeof entry !== "object" || !entry.id) {
+        continue;
+      }
+      deduped.set(entry.id, entry);
+    }
+
+    this.revisions = Array.from(deduped.values()).sort(
+      (a, b) => (b?.created_at || 0) - (a?.created_at || 0)
+    );
+
+    this.selectedRevision = null;
+    if (this.revisions.length > 1 && video.created_at) {
+      const firstOlder = this.revisions.find(
+        (entry) =>
+          entry &&
+          entry.id !== video.id &&
+          entry.deleted !== true &&
+          typeof entry.created_at === "number" &&
+          entry.created_at < video.created_at
+      );
+      if (firstOlder) {
+        this.selectedRevision = firstOlder;
+      }
+    }
+
+    if (this.historyCount) {
+      this.historyCount.textContent = `${this.revisions.length}`;
+    }
+
+    if (this.title) {
+      this.title.textContent = video.title
+        ? `Revert “${video.title}”`
+        : "Revert Video Note";
+    }
+
+    if (this.subtitle) {
+      const subtitleParts = [];
+      const dTagValue = this.extractDTagValue(video.tags);
+      if (dTagValue) {
+        subtitleParts.push(`d=${dTagValue}`);
+      }
+      if (video.videoRootId) {
+        const truncated = this.truncateMiddle
+          ? this.truncateMiddle(video.videoRootId, 40)
+          : video.videoRootId;
+        subtitleParts.push(`root=${truncated}`);
+      }
+      this.subtitle.textContent = subtitleParts.length
+        ? `History grouped by ${subtitleParts.join(" • ")}`
+        : "Review previous versions before restoring an older state.";
+    }
+
+    this.renderRevertVersionsList();
+
+    if (this.selectedRevision) {
+      this.renderRevertVersionDetails(this.selectedRevision);
+    } else {
+      this.renderRevertVersionDetails(null);
+    }
+
+    if (this.revisions.length <= 1) {
+      if (this.statusLabel) {
+        this.statusLabel.textContent =
+          "No earlier revisions are available for this note.";
+      }
+      this.updateConfirmationState();
+      return;
+    }
+
+    this.updateConfirmationState();
+  }
+
+  renderRevertVersionsList() {
+    if (!this.list) {
+      return;
+    }
+
+    const selectedId = this.selectedRevision?.id || "";
+    const currentId = this.activeVideo?.id || "";
+
+    this.list.innerHTML = "";
+
+    if (!this.revisions.length) {
+      this.list.innerHTML =
+        '<p class="text-xs text-gray-500">No revisions found.</p>';
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+
+    this.revisions.forEach((entry) => {
+      if (!entry || !entry.id) {
+        return;
+      }
+
+      const isCurrent = entry.id === currentId;
+      const isSelected = entry.id === selectedId;
+      const isDeleted = entry.deleted === true;
+
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.revertVersionId = entry.id;
+
+      const classes = [
+        "w-full",
+        "text-left",
+        "rounded-md",
+        "border",
+        "px-3",
+        "py-3",
+        "text-sm",
+        "transition",
+        "duration-150",
+        "focus:outline-none",
+        "focus:ring-2",
+        "focus:ring-offset-2",
+        "focus:ring-offset-gray-900",
+      ];
+
+      if (isSelected) {
+        classes.push(
+          "border-blue-500",
+          "bg-blue-500/20",
+          "text-blue-100",
+          "focus:ring-blue-500"
+        );
+      } else if (isCurrent) {
+        classes.push(
+          "border-green-500/60",
+          "bg-green-500/10",
+          "text-green-100",
+          "focus:ring-green-500/80"
+        );
+      } else if (isDeleted) {
+        classes.push(
+          "border-red-800/70",
+          "bg-red-900/30",
+          "text-red-200/90",
+          "hover:bg-red-900/40"
+        );
+      } else {
+        classes.push(
+          "border-gray-800",
+          "bg-gray-800/60",
+          "hover:bg-gray-700/70",
+          "text-gray-200"
+        );
+      }
+
+      button.className = classes.join(" ");
+      button.setAttribute("aria-pressed", isSelected ? "true" : "false");
+      if (isCurrent) {
+        button.setAttribute("aria-current", "true");
+      }
+
+      const createdAt = typeof entry.created_at === "number" ? entry.created_at : 0;
+      const relative = this.formatTimeAgo
+        ? this.formatTimeAgo(createdAt)
+        : "";
+      const absolute = this.formatAbsoluteTimestamp
+        ? this.formatAbsoluteTimestamp(createdAt)
+        : "";
+      const versionLabel =
+        entry.version !== undefined ? `v${entry.version}` : "v?";
+
+      const metaParts = [];
+      if (isCurrent) {
+        metaParts.push("Current version");
+      }
+      if (entry.deleted) {
+        metaParts.push("Marked deleted");
+      }
+      if (entry.isPrivate) {
+        metaParts.push("Private");
+      }
+      const meta = metaParts.join(" • ");
+      const metaClass = entry.deleted
+        ? "text-red-200/80"
+        : "text-gray-400";
+
+      const escape = (value) =>
+        this.escapeHTML ? this.escapeHTML(String(value ?? "")) : String(value ?? "");
+
+      button.innerHTML = `
+        <div class="flex items-start justify-between gap-3">
+          <div class="space-y-1">
+            <p class="font-semibold">${escape(entry.title || "Untitled")}</p>
+            <p class="text-xs text-gray-300">${escape(relative)} • ${escape(absolute)}</p>
+            ${meta ? `<p class="text-xs ${metaClass}">${escape(meta)}</p>` : ""}
+          </div>
+          <div class="text-xs uppercase tracking-wide text-gray-400">
+            ${escape(versionLabel)}
+          </div>
+        </div>
+      `;
+
+      fragment.appendChild(button);
+    });
+
+    this.list.appendChild(fragment);
+  }
+
+  handleListClick(event) {
+    if (this.busy) {
+      return;
+    }
+
+    const button = event?.target?.closest?.("[data-revert-version-id]");
+    if (!button || !button.dataset) {
+      return;
+    }
+
+    const versionId = button.dataset.revertVersionId;
+    if (!versionId) {
+      return;
+    }
+
+    const match = (this.revisions || []).find(
+      (entry) => entry && entry.id === versionId
+    );
+    if (!match) {
+      return;
+    }
+
+    this.selectedRevision = match;
+    this.renderRevertVersionsList();
+    this.renderRevertVersionDetails(match);
+    this.updateConfirmationState();
+
+    this.dispatch("video:revert-select", {
+      revision: match,
+      video: this.activeVideo,
+    });
+  }
+
+  renderRevertVersionDetails(version) {
+    if (!this.details) {
+      return;
+    }
+
+    if (!version) {
+      if (this.detailsDefaultHTML) {
+        this.details.innerHTML = this.detailsDefaultHTML;
+        this.placeholder = this.details.querySelector("#revertVersionPlaceholder");
+      } else {
+        this.details.innerHTML = "";
+      }
+      return;
+    }
+
+    const createdAt = typeof version.created_at === "number" ? version.created_at : 0;
+    const absolute = this.formatAbsoluteTimestamp
+      ? this.formatAbsoluteTimestamp(createdAt)
+      : "";
+    const relative = this.formatTimeAgo ? this.formatTimeAgo(createdAt) : "";
+    const description =
+      typeof version.description === "string" ? version.description : "";
+    const thumbnail =
+      typeof version.thumbnail === "string" ? version.thumbnail.trim() : "";
+    const url = typeof version.url === "string" ? version.url.trim() : "";
+    const magnet =
+      typeof version.magnet === "string" ? version.magnet.trim() : "";
+    const rawMagnet =
+      typeof version.rawMagnet === "string" ? version.rawMagnet.trim() : "";
+    const displayMagnet = magnet || rawMagnet;
+    const isPrivate = version.isPrivate === true;
+    const dTagValue = this.extractDTagValue(version.tags);
+
+    const escape = this.getEscapeFn();
+    const nip71Metadata = this.buildNip71DisplayMetadata(version);
+
+    const fallbackThumbnail = escape(this.fallbackThumbnailSrc);
+    const thumbnailSrc = thumbnail ? escape(thumbnail) : fallbackThumbnail;
+    const thumbnailAlt = thumbnail ? "Revision thumbnail" : "Fallback thumbnail";
+
+    let urlHtml = this.renderPlaceholder("None");
+    if (url) {
+      urlHtml = this.buildLinkMarkup(url);
+    }
+
+    let magnetHtml = this.renderPlaceholder("None");
+    if (displayMagnet) {
+      const labelRaw = this.truncateMiddle
+        ? this.truncateMiddle(displayMagnet, 72)
+        : displayMagnet;
+      const label = escape(labelRaw);
+      const caption = isPrivate
+        ? '<span class="block text-xs text-purple-200/90 mt-1">Magnet stays visible only to you — private notes keep the raw string local.</span>'
+        : "";
+      magnetHtml = `<div class="break-all">${label}${caption}</div>`;
+    }
+
+    const chips = [];
+    if (version.deleted) {
+      chips.push(
+        '<span class="inline-flex items-center rounded-full border border-red-700/70 bg-red-900/40 px-2 py-0.5 text-xs text-red-200/90">Marked deleted</span>'
+      );
+    }
+    if (isPrivate) {
+      chips.push(
+        '<span class="inline-flex items-center rounded-full border border-purple-600/60 bg-purple-900/40 px-2 py-0.5 text-xs text-purple-200/90">Private</span>'
+      );
+    }
+    if (version.version !== undefined) {
+      chips.push(
+        `<span class="inline-flex items-center rounded-full border border-gray-700 bg-gray-800/80 px-2 py-0.5 text-xs text-gray-200">Schema v${escape(
+          String(version.version)
+        )}</span>`
+      );
+    }
+
+    const descriptionHtml = description
+      ? `<p class="whitespace-pre-wrap text-gray-200">${escape(description)}</p>`
+      : '<p class="text-gray-500">No description provided.</p>';
+
+    const rootId =
+      typeof version.videoRootId === "string" ? version.videoRootId : "";
+    const rootDisplay = rootId
+      ? this.truncateMiddle
+        ? escape(this.truncateMiddle(rootId, 64))
+        : escape(rootId)
+      : "";
+    const eventDisplay = version.id
+      ? this.truncateMiddle
+        ? escape(this.truncateMiddle(version.id, 64))
+        : escape(version.id)
+      : "";
+
+    const timestampParts = [];
+    if (absolute) {
+      timestampParts.push(escape(absolute));
+    }
+    if (relative) {
+      timestampParts.push(`(${escape(relative)})`);
+    }
+    const timestampHtml = timestampParts.length
+      ? timestampParts.join(" ")
+      : escape(absolute || relative || "");
+
+    const formatTimestamp = (seconds, raw) => {
+      if (Number.isFinite(seconds)) {
+        const absoluteLabel = this.formatAbsoluteTimestamp
+          ? this.formatAbsoluteTimestamp(seconds)
+          : `${seconds}`;
+        const relativeLabel = this.formatTimeAgo
+          ? this.formatTimeAgo(seconds)
+          : "";
+        const parts = [];
+        if (absoluteLabel) {
+          parts.push(`<span class="text-gray-200">${escape(absoluteLabel)}</span>`);
+        }
+        if (relativeLabel) {
+          parts.push(`<span class="text-gray-400">(${escape(relativeLabel)})</span>`);
+        }
+        if (parts.length) {
+          return parts.join(" ");
+        }
+      }
+      if (raw) {
+        return `<span class="text-gray-200">${escape(raw)}</span>`;
+      }
+      return this.renderPlaceholder();
+    };
+
+    const formatDuration = (seconds, raw) => {
+      if (Number.isFinite(seconds)) {
+        const display = this.formatDurationSeconds(seconds);
+        const suffix = seconds === 1 ? "second" : "seconds";
+        return `<span class="text-gray-200">${escape(display)}</span> <span class="text-gray-500">(${escape(
+          `${seconds} ${suffix}`
+        )})</span>`;
+      }
+      if (raw) {
+        return `<span class="text-gray-200">${escape(raw)}</span>`;
+      }
+      return this.renderPlaceholder();
+    };
+
+    const kindValue = nip71Metadata.kind;
+    let kindHtml = this.renderPlaceholder();
+    if (kindValue !== "" && kindValue !== null && kindValue !== undefined) {
+      const label = typeof kindValue === "number" ? kindValue : `${kindValue}`;
+      const numeric = Number(label);
+      let suffix = "";
+      if (Number.isFinite(numeric)) {
+        if (numeric === 22) {
+          suffix = "short";
+        } else if (numeric === 21) {
+          suffix = "video";
+        }
+      }
+      const badge = `<code class="rounded bg-gray-800/80 px-1.5 py-0.5 text-gray-100">kind ${escape(
+        label
+      )}</code>`;
+      kindHtml = suffix
+        ? `${badge} <span class="text-gray-400">(${escape(suffix)})</span>`
+        : badge;
+    }
+
+    const summaryHtml = nip71Metadata.summary
+      ? `<p class="whitespace-pre-wrap text-gray-200">${escape(
+          nip71Metadata.summary
+        )}</p>`
+      : this.renderPlaceholder("Not provided");
+    const contentWarningHtml = nip71Metadata.contentWarning
+      ? `<span class="inline-flex items-center rounded-full border border-amber-700/70 bg-amber-900/40 px-2 py-0.5 text-xs text-amber-200/90">${escape(
+          nip71Metadata.contentWarning
+        )}</span>`
+      : this.renderPlaceholder("Not provided");
+    const publishedAtHtml = formatTimestamp(
+      nip71Metadata.publishedAtSeconds,
+      nip71Metadata.publishedAtRaw
+    );
+    const durationHtml = formatDuration(
+      nip71Metadata.durationSeconds,
+      nip71Metadata.durationRaw
+    );
+    const altHtml = nip71Metadata.alt
+      ? `<p class="whitespace-pre-wrap text-gray-200">${escape(nip71Metadata.alt)}</p>`
+      : this.renderPlaceholder("Not provided");
+
+    const definition = (label, valueHtml, { span = 1 } = {}) => {
+      const colSpan = span > 1 ? "sm:col-span-2" : "";
+      return `
+        <div class="${colSpan}">
+          <dt class="font-semibold text-gray-200">${escape(label)}</dt>
+          <dd class="mt-1">${valueHtml}</dd>
+        </div>
+      `;
+    };
+
+    const eventMetadataRows = [
+      definition("NIP-71 kind", kindHtml),
+      definition("Summary", summaryHtml, { span: 2 }),
+      definition("Content warning", contentWarningHtml, { span: 2 }),
+      definition("Published timestamp", publishedAtHtml),
+      definition("Duration", durationHtml),
+      definition("Alt text", altHtml, { span: 2 }),
+    ].join("");
+
+    this.details.innerHTML = `
+      <div class="space-y-6">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-start">
+          <div class="overflow-hidden rounded-md border border-gray-800 bg-black/40 w-full max-w-sm">
+            <img
+              src="${thumbnailSrc}"
+              alt="${escape(thumbnailAlt)}"
+              class="w-full h-auto object-cover"
+              loading="lazy"
+            />
+          </div>
+          <div class="flex-1 space-y-3">
+            <div class="space-y-1">
+              <h3 class="text-lg font-semibold text-white">${escape(
+                version.title || "Untitled"
+              )}</h3>
+              <p class="text-xs text-gray-400">${timestampHtml}</p>
+            </div>
+            ${
+              chips.length
+                ? `<div class="flex flex-wrap gap-2">${chips.join("")}</div>`
+                : ""
+            }
+            <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+              <div>
+                <dt class="font-semibold text-gray-200">Hosted URL</dt>
+                <dd class="mt-1">${urlHtml}</dd>
+              </div>
+              <div>
+                <dt class="font-semibold text-gray-200">Magnet</dt>
+                <dd class="mt-1">${magnetHtml}</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+
+        <section class="space-y-2">
+          <h4 class="text-sm font-semibold text-gray-200">Description</h4>
+          ${descriptionHtml}
+        </section>
+
+        <section class="space-y-2">
+          <h4 class="text-sm font-semibold text-gray-200">NIP-71 event metadata</h4>
+          <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+            ${eventMetadataRows}
+          </dl>
+        </section>
+
+        <section class="space-y-2">
+          <h4 class="text-sm font-semibold text-gray-200">Note pointers</h4>
+          <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+            <div>
+              <dt class="font-semibold text-gray-200">Mode</dt>
+              <dd class="mt-1">${escape(version.mode || "live")}</dd>
+            </div>
+            <div>
+              <dt class="font-semibold text-gray-200">d tag</dt>
+              <dd class="mt-1">
+                ${
+                  dTagValue
+                    ? `<code class="rounded bg-gray-800/80 px-1.5 py-0.5">${escape(
+                        dTagValue
+                      )}</code>`
+                    : '<span class="text-gray-500">Not provided</span>'
+                }
+              </dd>
+            </div>
+            <div>
+              <dt class="font-semibold text-gray-200">videoRootId</dt>
+              <dd class="mt-1">
+                ${
+                  rootDisplay
+                    ? `<code class="break-all rounded bg-gray-800/80 px-1.5 py-0.5" title="${escape(
+                        rootId
+                      )}">${rootDisplay}</code>`
+                    : '<span class="text-gray-500">Not provided</span>'
+                }
+              </dd>
+            </div>
+            <div>
+              <dt class="font-semibold text-gray-200">Event ID</dt>
+              <dd class="mt-1">
+                ${
+                  eventDisplay
+                    ? `<code class="break-all rounded bg-gray-800/80 px-1.5 py-0.5" title="${escape(
+                        version.id || ""
+                      )}">${eventDisplay}</code>`
+                    : '<span class="text-gray-500">Unknown</span>'
+                }
+              </dd>
+            </div>
+          </dl>
+        </section>
+
+        <section class="space-y-4">
+          <h4 class="text-sm font-semibold text-gray-200">NIP-71 media metadata</h4>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Media variants (imeta)</h5>
+              ${this.renderImetaVariants(nip71Metadata.imeta)}
+            </div>
+            <div class="space-y-2">
+              <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Caption tracks</h5>
+              ${this.renderTextTracks(nip71Metadata.textTracks)}
+            </div>
+            <div class="space-y-2">
+              <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Chapters</h5>
+              ${this.renderSegments(nip71Metadata.segments)}
+            </div>
+            <div class="space-y-2">
+              <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Hashtags</h5>
+              ${this.renderHashtags(nip71Metadata.hashtags)}
+            </div>
+            <div class="space-y-2">
+              <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Participants</h5>
+              ${this.renderParticipants(nip71Metadata.participants)}
+            </div>
+            <div class="space-y-2">
+              <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-400">References</h5>
+              ${this.renderReferences(nip71Metadata.references)}
+            </div>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+
+  updateConfirmationState() {
+    if (!this.confirmButton) {
+      return;
+    }
+
+    if (!this.selectedRevision || !this.activeVideo) {
+      this.pendingEntries = [];
+      this.confirmButton.disabled = true;
+      if (!this.busy) {
+        this.confirmButton.textContent = this.confirmDefaultLabel;
+      }
+      if (this.statusLabel && (this.revisions || []).length > 1) {
+        this.statusLabel.textContent =
+          "Select an older revision to enable reverting.";
+      }
+      return;
+    }
+
+    const target = this.selectedRevision;
+    const activePubkey =
+      typeof this.activeVideo.pubkey === "string"
+        ? this.activeVideo.pubkey.toLowerCase()
+        : "";
+
+    const revertCandidates = (this.revisions || []).filter((entry) => {
+      if (!entry || entry.id === target.id) {
+        return false;
+      }
+      if (entry.deleted) {
+        return false;
+      }
+      if (typeof entry.created_at !== "number") {
+        return false;
+      }
+      if (entry.created_at <= target.created_at) {
+        return false;
+      }
+      if (!entry.pubkey) {
+        return false;
+      }
+      const entryPubkey =
+        typeof entry.pubkey === "string" ? entry.pubkey.toLowerCase() : "";
+      if (activePubkey && entryPubkey !== activePubkey) {
+        return false;
+      }
+      return true;
+    });
+
+    this.pendingEntries = revertCandidates;
+
+    const disable =
+      this.busy || target.deleted === true || revertCandidates.length === 0;
+
+    this.confirmButton.disabled = disable;
+    if (!this.busy) {
+      this.confirmButton.textContent = this.confirmDefaultLabel;
+    }
+
+    if (!this.statusLabel) {
+      return;
+    }
+
+    if (target.deleted) {
+      this.statusLabel.textContent =
+        "This revision was previously marked as deleted and cannot become active.";
+      return;
+    }
+
+    if (revertCandidates.length === 0) {
+      this.statusLabel.textContent =
+        "The selected revision is already the latest active version.";
+      return;
+    }
+
+    const suffix = revertCandidates.length === 1 ? "revision" : "revisions";
+    this.statusLabel.textContent = `Reverting will mark ${revertCandidates.length} newer ${suffix} as reverted.`;
+  }
+
+  setBusy(isBusy, label) {
+    this.busy = Boolean(isBusy);
+
+    if (this.confirmButton) {
+      const disableConfirm =
+        this.busy ||
+        !this.selectedRevision ||
+        !this.pendingEntries ||
+        this.pendingEntries.length === 0 ||
+        (this.selectedRevision && this.selectedRevision.deleted === true);
+      this.confirmButton.disabled = disableConfirm;
+      this.confirmButton.textContent = this.busy
+        ? label || "Reverting…"
+        : this.confirmDefaultLabel;
+      this.confirmButton.classList.toggle("cursor-wait", this.busy);
+    }
+
+    const toggleDisabledStyles = (button) => {
+      if (!button) {
+        return;
+      }
+      button.disabled = this.busy;
+      button.classList.toggle("opacity-60", this.busy);
+      button.classList.toggle("cursor-not-allowed", this.busy);
+    };
+
+    toggleDisabledStyles(this.cancelButton);
+    toggleDisabledStyles(this.closeButton);
+
+    if (!this.busy) {
+      this.updateConfirmationState();
+    }
+  }
+
+  handleConfirmClick() {
+    if (this.busy) {
+      return;
+    }
+
+    if (!this.selectedRevision) {
+      return;
+    }
+
+    const entries = Array.isArray(this.pendingEntries)
+      ? this.pendingEntries.slice()
+      : [];
+    if (!entries.length) {
+      this.updateConfirmationState();
+      return;
+    }
+
+    this.dispatch("video:revert-confirm", {
+      target: this.selectedRevision,
+      entries,
+      video: this.activeVideo,
+      context: this.context,
+    });
+  }
+
+  handleCancelInteraction() {
+    if (this.busy) {
+      return;
+    }
+
+    this.dispatch("video:revert-cancel", {
+      context: this.context,
+      video: this.activeVideo,
+    });
+    this.close();
+  }
+
+  handleCloseInteraction() {
+    if (this.busy) {
+      return;
+    }
+    this.close();
+  }
+
+  getEscapeFn() {
+    return (value) =>
+      this.escapeHTML ? this.escapeHTML(String(value ?? "")) : String(value ?? "");
+  }
+
+  renderPlaceholder(text = "Not provided") {
+    const escape = this.getEscapeFn();
+    return `<span class="text-gray-500">${escape(text)}</span>`;
+  }
+
+  renderListEmpty(text) {
+    const escape = this.getEscapeFn();
+    return `<p class="text-xs text-gray-500">${escape(text)}</p>`;
+  }
+
+  buildLinkMarkup(value, { breakAll = true } = {}) {
+    if (value == null) {
+      return "";
+    }
+
+    const escape = this.getEscapeFn();
+    const raw = typeof value === "string" ? value.trim() : String(value ?? "").trim();
+    if (!raw) {
+      return "";
+    }
+
+    const displayRaw = this.truncateMiddle
+      ? this.truncateMiddle(raw, 96)
+      : raw;
+    const safeDisplay = escape(displayRaw);
+    const safeValue = escape(raw);
+    const breakClass = breakAll ? " break-all" : " break-words";
+
+    if (/^https?:/i.test(raw)) {
+      return `<a href="${safeValue}" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300${breakClass}">${safeDisplay}</a>`;
+    }
+
+    return `<code class="rounded bg-gray-800/70 px-1.5 py-0.5 text-[0.75rem] text-gray-200${breakClass}">${safeDisplay}</code>`;
+  }
+
+  formatDurationSeconds(seconds) {
+    if (!Number.isFinite(seconds)) {
+      return "";
+    }
+
+    const total = Math.max(0, Math.floor(seconds));
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const secs = total % 60;
+
+    if (hours > 0) {
+      return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+    }
+
+    return `${minutes}:${String(secs).padStart(2, "0")}`;
+  }
+
+  buildNip71DisplayMetadata(version) {
+    const raw =
+      version && typeof version === "object" && version.nip71 && typeof version.nip71 === "object"
+        ? version.nip71
+        : {};
+
+    const { normalizeNumber, toInputValue } = this.nip71Formatter || {};
+
+    const toString = (value) => {
+      if (value == null) {
+        return "";
+      }
+      if (typeof value === "string") {
+        return value.trim();
+      }
+      if (typeof value === "number" || typeof value === "boolean") {
+        const converted = toInputValue ? toInputValue(value) : `${value}`;
+        return typeof converted === "string" ? converted.trim() : "";
+      }
+      return "";
+    };
+
+    const parseNumeric = (value) => {
+      if (value == null) {
+        return null;
+      }
+      if (typeof value === "string" && value.includes(":")) {
+        return null;
+      }
+      if (normalizeNumber) {
+        const parsed = normalizeNumber(value);
+        if (typeof parsed === "number" && Number.isFinite(parsed)) {
+          return parsed;
+        }
+      }
+      if (typeof value === "number" && Number.isFinite(value)) {
+        return value;
+      }
+      if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (!trimmed) {
+          return null;
+        }
+        const numeric = Number(trimmed);
+        return Number.isFinite(numeric) ? numeric : null;
+      }
+      return null;
+    };
+
+    const parseTimestamp = (value) => {
+      const rawValue = toString(value);
+      if (!rawValue) {
+        return { raw: "", seconds: null };
+      }
+
+      if (/^\d+(?:\.\d+)?$/.test(rawValue)) {
+        const numeric = Number(rawValue);
+        if (Number.isFinite(numeric)) {
+          const normalized = numeric > 1e12 ? Math.floor(numeric / 1000) : Math.floor(numeric);
+          return { raw: rawValue, seconds: normalized };
+        }
+      }
+
+      const parsed = Date.parse(rawValue);
+      if (!Number.isNaN(parsed)) {
+        return { raw: rawValue, seconds: Math.floor(parsed / 1000) };
+      }
+
+      return { raw: rawValue, seconds: null };
+    };
+
+    const collectStrings = (values) => {
+      if (!Array.isArray(values)) {
+        return [];
+      }
+      return values
+        .map((entry) => toString(entry))
+        .map((entry) => entry.trim())
+        .filter((entry) => Boolean(entry));
+    };
+
+    const collectObjects = (values, mapFn) => {
+      if (!Array.isArray(values)) {
+        return [];
+      }
+      return values
+        .map((entry) => (entry && typeof entry === "object" ? mapFn(entry) : null))
+        .filter((entry) => entry);
+    };
+
+    const kindValue = parseNumeric(raw.kind);
+    const publishedAt = parseTimestamp(
+      raw.publishedAt ?? raw.published_at ?? raw["published-at"]
+    );
+
+    const durationNumeric = parseNumeric(raw.duration);
+    const durationRaw = durationNumeric != null ? `${durationNumeric}` : toString(raw.duration);
+
+    const imeta = collectObjects(raw.imeta, (variant) => {
+      const mapped = {
+        m: toString(variant.m),
+        dim: toString(variant.dim),
+        url: toString(variant.url),
+        x: toString(variant.x),
+        image: collectStrings(variant.image),
+        fallback: collectStrings(variant.fallback),
+        service: collectStrings(variant.service),
+        autoGenerated: variant.autoGenerated === true,
+      };
+
+      const hasContent =
+        mapped.m ||
+        mapped.dim ||
+        mapped.url ||
+        mapped.x ||
+        mapped.image.length ||
+        mapped.fallback.length ||
+        mapped.service.length;
+
+      return hasContent ? mapped : null;
+    });
+
+    const textTracks = collectObjects(raw.textTracks, (track) => {
+      const mapped = {
+        url: toString(track.url),
+        type: toString(track.type),
+        language: toString(track.language),
+      };
+      return mapped.url || mapped.type || mapped.language ? mapped : null;
+    });
+
+    const segments = collectObjects(raw.segments, (segment) => {
+      const startNumeric = parseNumeric(segment.start);
+      const endNumeric = parseNumeric(segment.end);
+      const mapped = {
+        startSeconds: startNumeric != null ? Math.max(0, startNumeric) : null,
+        endSeconds: endNumeric != null ? Math.max(0, endNumeric) : null,
+        startRaw: toString(segment.start),
+        endRaw: toString(segment.end),
+        title: toString(segment.title),
+        thumbnail: toString(segment.thumbnail),
+      };
+      return mapped.startRaw || mapped.endRaw || mapped.title || mapped.thumbnail
+        ? mapped
+        : null;
+    });
+
+    const hashtags = collectStrings(raw.hashtags);
+    const participants = collectObjects(raw.participants, (participant) => {
+      const mapped = {
+        pubkey: toString(participant.pubkey),
+        relay: toString(participant.relay),
+      };
+      return mapped.pubkey || mapped.relay ? mapped : null;
+    });
+    const references = collectStrings(raw.references);
+
+    return {
+      kind: kindValue != null ? kindValue : toString(raw.kind),
+      summary: toString(raw.summary),
+      contentWarning:
+        toString(raw.contentWarning ?? raw["content-warning"] ?? raw.content_warning),
+      publishedAtSeconds: publishedAt.seconds,
+      publishedAtRaw: publishedAt.raw,
+      durationSeconds: durationNumeric != null ? Math.max(0, durationNumeric) : null,
+      durationRaw,
+      alt: toString(raw.alt),
+      imeta,
+      textTracks,
+      segments,
+      hashtags,
+      participants,
+      references,
+    };
+  }
+
+  renderImetaVariants(variants) {
+    if (!Array.isArray(variants) || variants.length === 0) {
+      return this.renderListEmpty("No media variants provided.");
+    }
+
+    const escape = this.getEscapeFn();
+
+    return `<ol class="space-y-3">${variants
+      .map((variant, index) => {
+        if (!variant) {
+          return "";
+        }
+
+        const badges = [];
+        if (variant.autoGenerated) {
+          badges.push(
+            '<span class="inline-flex items-center rounded-full border border-amber-600/70 bg-amber-900/30 px-2 py-0.5 text-[0.65rem] uppercase tracking-wide text-amber-200/90">Auto-generated</span>'
+          );
+        }
+
+        const variantNumber = `Variant ${index + 1}`;
+
+        const mimeHtml = variant.m
+          ? `<code class="rounded bg-gray-800/80 px-1.5 py-0.5 text-gray-100">${escape(
+              variant.m
+            )}</code>`
+          : this.renderPlaceholder();
+        const dimHtml = variant.dim
+          ? `<code class="rounded bg-gray-800/80 px-1.5 py-0.5 text-gray-100">${escape(
+              variant.dim
+            )}</code>`
+          : this.renderPlaceholder();
+        const urlHtml = variant.url
+          ? this.buildLinkMarkup(variant.url)
+          : this.renderPlaceholder("No URL");
+        const hashHtml = variant.x
+          ? `<code class="break-all rounded bg-gray-800/80 px-1.5 py-0.5 text-gray-100">${escape(
+              variant.x
+            )}</code>`
+          : this.renderPlaceholder("Not provided");
+
+        const renderNestedList = (label, values, emptyLabel) => {
+          if (!Array.isArray(values) || values.length === 0) {
+            return `<div><p class="text-[0.7rem] uppercase tracking-wide text-gray-500">${escape(
+              label
+            )}</p>${this.renderListEmpty(emptyLabel)}</div>`;
+          }
+
+          const items = values
+            .map((entry) => this.buildLinkMarkup(entry))
+            .filter(Boolean)
+            .map((markup) => `<li>${markup}</li>`);
+
+          if (!items.length) {
+            return `<div><p class="text-[0.7rem] uppercase tracking-wide text-gray-500">${escape(
+              label
+            )}</p>${this.renderListEmpty(emptyLabel)}</div>`;
+          }
+
+          return `
+            <div>
+              <p class="text-[0.7rem] uppercase tracking-wide text-gray-500">${escape(
+                label
+              )}</p>
+              <ul class="mt-1 space-y-1 text-xs text-gray-200">${items.join("")}</ul>
+            </div>
+          `;
+        };
+
+        const nestedSections = [
+          renderNestedList("Images", variant.image, "No image URLs."),
+          renderNestedList("Fallbacks", variant.fallback, "No fallback URLs."),
+          renderNestedList("Services", variant.service, "No service hints."),
+        ].join("");
+
+        return `
+          <li class="rounded-md border border-gray-800/70 bg-black/30 p-3 space-y-3">
+            <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-400">
+              <span class="font-semibold text-gray-200">${escape(variantNumber)}</span>
+              ${badges.length ? `<div class="flex flex-wrap gap-2">${badges.join("")}</div>` : ""}
+            </div>
+            <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+              <div>
+                <dt class="font-semibold text-gray-200">MIME type</dt>
+                <dd class="mt-1">${mimeHtml}</dd>
+              </div>
+              <div>
+                <dt class="font-semibold text-gray-200">Dimensions</dt>
+                <dd class="mt-1">${dimHtml}</dd>
+              </div>
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">URL</dt>
+                <dd class="mt-1">${urlHtml}</dd>
+              </div>
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">Content hash</dt>
+                <dd class="mt-1">${hashHtml}</dd>
+              </div>
+            </dl>
+            <div class="grid gap-3 sm:grid-cols-3 text-xs text-gray-300">
+              ${nestedSections}
+            </div>
+          </li>
+        `;
+      })
+      .join("")}</ol>`;
+  }
+
+  renderTextTracks(tracks) {
+    if (!Array.isArray(tracks) || tracks.length === 0) {
+      return this.renderListEmpty("No caption tracks.");
+    }
+
+    const escape = this.getEscapeFn();
+
+    return `<ol class="space-y-3">${tracks
+      .map((track, index) => {
+        const headerLabel = `Track ${index + 1}`;
+        const urlHtml = track.url
+          ? this.buildLinkMarkup(track.url)
+          : this.renderPlaceholder("No URL");
+        const typeHtml = track.type
+          ? `<code class="rounded bg-gray-800/80 px-1.5 py-0.5 text-gray-100">${escape(
+              track.type
+            )}</code>`
+          : this.renderPlaceholder();
+        const languageHtml = track.language
+          ? `<span class="inline-flex items-center rounded-full border border-gray-700 bg-gray-800/70 px-2 py-0.5 text-[0.7rem] uppercase tracking-wide text-gray-200">${escape(
+              track.language
+            )}</span>`
+          : this.renderPlaceholder();
+
+        return `
+          <li class="rounded-md border border-gray-800/70 bg-black/30 p-3 space-y-3">
+            <div class="flex items-center justify-between text-xs text-gray-400">
+              <span class="font-semibold text-gray-200">${escape(headerLabel)}</span>
+              ${track.language ? languageHtml : ""}
+            </div>
+            <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">URL</dt>
+                <dd class="mt-1">${urlHtml}</dd>
+              </div>
+              <div>
+                <dt class="font-semibold text-gray-200">Type</dt>
+                <dd class="mt-1">${typeHtml}</dd>
+              </div>
+              <div>
+                <dt class="font-semibold text-gray-200">Language</dt>
+                <dd class="mt-1">${track.language ? languageHtml : this.renderPlaceholder()}</dd>
+              </div>
+            </dl>
+          </li>
+        `;
+      })
+      .join("")}</ol>`;
+  }
+
+  renderSegments(segments) {
+    if (!Array.isArray(segments) || segments.length === 0) {
+      return this.renderListEmpty("No chapter segments.");
+    }
+
+    const escape = this.getEscapeFn();
+
+    const formatTime = (seconds, raw) => {
+      if (Number.isFinite(seconds)) {
+        const display = this.formatDurationSeconds(seconds);
+        const suffix = seconds === 1 ? "second" : "seconds";
+        return `<span class="text-gray-200">${escape(display)}</span> <span class="text-gray-500">(${escape(
+          `${seconds} ${suffix}`
+        )})</span>`;
+      }
+      if (raw) {
+        return `<span class="text-gray-200">${escape(raw)}</span>`;
+      }
+      return this.renderPlaceholder();
+    };
+
+    return `<ol class="space-y-3">${segments
+      .map((segment, index) => {
+        const headerLabel = `Chapter ${index + 1}`;
+        const startHtml = formatTime(segment.startSeconds, segment.startRaw);
+        const endHtml = formatTime(segment.endSeconds, segment.endRaw);
+        const titleHtml = segment.title
+          ? `<p class="whitespace-pre-wrap text-gray-200">${escape(segment.title)}</p>`
+          : this.renderPlaceholder("No title");
+        const thumbnailHtml = segment.thumbnail
+          ? this.buildLinkMarkup(segment.thumbnail)
+          : this.renderPlaceholder("No thumbnail");
+
+        return `
+          <li class="rounded-md border border-gray-800/70 bg-black/30 p-3 space-y-3">
+            <div class="text-xs font-semibold text-gray-200">${escape(headerLabel)}</div>
+            <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+              <div>
+                <dt class="font-semibold text-gray-200">Start</dt>
+                <dd class="mt-1">${startHtml}</dd>
+              </div>
+              <div>
+                <dt class="font-semibold text-gray-200">End</dt>
+                <dd class="mt-1">${endHtml}</dd>
+              </div>
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">Title</dt>
+                <dd class="mt-1">${titleHtml}</dd>
+              </div>
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">Thumbnail</dt>
+                <dd class="mt-1">${thumbnailHtml}</dd>
+              </div>
+            </dl>
+          </li>
+        `;
+      })
+      .join("")}</ol>`;
+  }
+
+  renderHashtags(hashtags) {
+    if (!Array.isArray(hashtags) || hashtags.length === 0) {
+      return this.renderListEmpty("No hashtags provided.");
+    }
+
+    const escape = this.getEscapeFn();
+
+    const chips = hashtags.map((tag) => {
+      const label = tag.startsWith("#") ? tag : `#${tag}`;
+      return `<span class="inline-flex items-center rounded-full border border-gray-700 bg-gray-800/70 px-2 py-0.5 text-xs text-gray-200">${escape(
+        label
+      )}</span>`;
+    });
+
+    return `<div class="flex flex-wrap gap-2">${chips.join("")}</div>`;
+  }
+
+  renderParticipants(participants) {
+    if (!Array.isArray(participants) || participants.length === 0) {
+      return this.renderListEmpty("No participants listed.");
+    }
+
+    const escape = this.getEscapeFn();
+
+    return `<ol class="space-y-3">${participants
+      .map((participant, index) => {
+        const label = `Participant ${index + 1}`;
+        const displayPubkey = participant.pubkey
+          ? this.truncateMiddle
+            ? this.truncateMiddle(participant.pubkey, 48)
+            : participant.pubkey
+          : "";
+        const pubkeyHtml = participant.pubkey
+          ? `<code class="break-all rounded bg-gray-800/80 px-1.5 py-0.5 text-gray-100" title="${escape(
+              participant.pubkey
+            )}">${escape(displayPubkey)}</code>`
+          : this.renderPlaceholder("No pubkey");
+        const relayHtml = participant.relay
+          ? this.buildLinkMarkup(participant.relay, { breakAll: false })
+          : this.renderPlaceholder("No relay specified");
+
+        return `
+          <li class="rounded-md border border-gray-800/70 bg-black/30 p-3 space-y-2">
+            <div class="text-xs font-semibold text-gray-200">${escape(label)}</div>
+            <dl class="grid gap-3 sm:grid-cols-2 text-xs text-gray-300">
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">Pubkey</dt>
+                <dd class="mt-1">${pubkeyHtml}</dd>
+              </div>
+              <div class="sm:col-span-2">
+                <dt class="font-semibold text-gray-200">Relay</dt>
+                <dd class="mt-1">${relayHtml}</dd>
+              </div>
+            </dl>
+          </li>
+        `;
+      })
+      .join("")}</ol>`;
+  }
+
+  renderReferences(references) {
+    if (!Array.isArray(references) || references.length === 0) {
+      return this.renderListEmpty("No external references.");
+    }
+
+    const items = references
+      .map((entry) => this.buildLinkMarkup(entry))
+      .filter(Boolean)
+      .map((markup) => `<li>${markup}</li>`);
+
+    if (!items.length) {
+      return this.renderListEmpty("No external references.");
+    }
+
+    return `<ul class="space-y-1 text-xs text-gray-200">${items.join("")}</ul>`;
+  }
+
+  extractDTagValue(tags) {
+    if (!Array.isArray(tags)) {
+      return "";
+    }
+    for (const tag of tags) {
+      if (!Array.isArray(tag) || tag.length < 2) {
+        continue;
+      }
+      if (tag[0] === "d" && typeof tag[1] === "string") {
+        return tag[1];
+      }
+    }
+    return "";
+  }
+}
+
diff --git a/js/ui/components/UploadModal.js b/js/ui/components/UploadModal.js
new file mode 100644
index 00000000..200a89f9
--- /dev/null
+++ b/js/ui/components/UploadModal.js
@@ -0,0 +1,765 @@
+// NOTE: Keep the Upload, Edit, and Revert modals in lockstep when updating NIP-71 form features.
+
+import { Nip71FormManager } from "./nip71FormManager.js";
+
+export class UploadModal {
+  constructor({
+    authService,
+    r2Service,
+    publishVideoNote,
+    removeTrackingScripts,
+    setGlobalModalState,
+    showError,
+    showSuccess,
+    getCurrentPubkey,
+    safeEncodeNpub,
+    eventTarget,
+    container,
+  } = {}) {
+    this.authService = authService || null;
+    this.r2Service = r2Service || null;
+    this.publishVideoNote = typeof publishVideoNote === "function" ? publishVideoNote : null;
+    this.removeTrackingScripts =
+      typeof removeTrackingScripts === "function" ? removeTrackingScripts : () => {};
+    this.setGlobalModalState =
+      typeof setGlobalModalState === "function" ? setGlobalModalState : () => {};
+    this.showError = typeof showError === "function" ? showError : () => {};
+    this.showSuccess = typeof showSuccess === "function" ? showSuccess : () => {};
+    this.getCurrentPubkey = typeof getCurrentPubkey === "function" ? getCurrentPubkey : null;
+    this.safeEncodeNpub = typeof safeEncodeNpub === "function" ? safeEncodeNpub : () => "";
+    this.eventTarget = eventTarget instanceof EventTarget ? eventTarget : new EventTarget();
+    this.container = container || null;
+
+    this.root = null;
+    this.activeMode = "custom";
+    this.isVisible = false;
+    this.cloudflareSettings = this.r2Service?.getSettings?.() || null;
+    this.cloudflareAdvancedVisible =
+      this.r2Service?.getCloudflareAdvancedVisibility?.() || false;
+    this.r2Unsubscribes = [];
+
+    this.uploadModeButtons = [];
+    this.customSection = null;
+    this.cloudflareSection = null;
+
+    this.customForm = null;
+    this.customFormInputs = {};
+
+    this.cloudflareSettingsForm = null;
+    this.cloudflareClearSettingsButton = null;
+    this.cloudflareSettingsStatus = null;
+    this.cloudflareBucketPreview = null;
+    this.cloudflareUploadForm = null;
+    this.cloudflareFileInput = null;
+    this.cloudflareUploadButton = null;
+    this.cloudflareUploadStatus = null;
+    this.cloudflareProgressBar = null;
+    this.cloudflareProgressFill = null;
+    this.cloudflareTitleInput = null;
+    this.cloudflareDescriptionInput = null;
+    this.cloudflareThumbnailInput = null;
+    this.cloudflareMagnetInput = null;
+    this.cloudflareWsInput = null;
+    this.cloudflareXsInput = null;
+    this.cloudflareEnableCommentsInput = null;
+    this.cloudflareAdvancedToggle = null;
+    this.cloudflareAdvancedToggleLabel = null;
+    this.cloudflareAdvancedToggleIcon = null;
+    this.cloudflareAdvancedFields = null;
+    this.r2AccountIdInput = null;
+    this.r2AccessKeyIdInput = null;
+    this.r2SecretAccessKeyInput = null;
+    this.r2ApiTokenInput = null;
+    this.r2ZoneIdInput = null;
+    this.r2BaseDomainInput = null;
+
+    this.nip71FormManager = new Nip71FormManager();
+  }
+
+  addEventListener(type, listener, options) {
+    if (!this.eventTarget) {
+      return;
+    }
+    this.eventTarget.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type, listener, options) {
+    if (!this.eventTarget) {
+      return;
+    }
+    this.eventTarget.removeEventListener(type, listener, options);
+  }
+
+  emit(type, detail) {
+    if (!this.eventTarget) {
+      return;
+    }
+    this.eventTarget.dispatchEvent(new CustomEvent(type, { detail }));
+  }
+
+  getRoot() {
+    return this.root;
+  }
+
+  async load({ container } = {}) {
+    if (this.root) {
+      return this.root;
+    }
+
+    const targetContainer =
+      container || this.container || document.getElementById("modalContainer");
+    if (!targetContainer) {
+      throw new Error("Modal container element not found!");
+    }
+
+    const response = await fetch("components/upload-modal.html");
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const html = await response.text();
+
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = html;
+    this.removeTrackingScripts(wrapper);
+    targetContainer.appendChild(wrapper);
+
+    this.container = targetContainer;
+    this.root = wrapper.querySelector("#uploadModal");
+    if (!this.root) {
+      throw new Error("Upload modal markup missing after load.");
+    }
+
+    this.cacheElements(wrapper);
+    this.bindEvents();
+    this.registerR2Subscriptions();
+
+    this.renderCloudflareAdvancedVisibility(
+      this.r2Service?.getCloudflareAdvancedVisibility?.()
+    );
+
+    try {
+      await this.loadR2Settings();
+    } catch (error) {
+      // Errors already surfaced via the service listeners.
+    }
+
+    await this.refreshCloudflareBucketPreview();
+    this.setMode(this.activeMode);
+    this.updateCloudflareProgress(Number.NaN);
+
+    return this.root;
+  }
+
+  cacheElements(context) {
+    this.uploadModeButtons = Array.from(
+      context.querySelectorAll(".upload-mode-toggle[data-upload-mode]")
+    );
+    this.customSection = context.querySelector("#customUploadSection") || null;
+    this.cloudflareSection = context.querySelector("#cloudflareUploadSection") || null;
+
+    this.customForm = context.querySelector("#uploadForm") || null;
+    this.customFormInputs = {
+      title: context.querySelector("#uploadTitle") || null,
+      url: context.querySelector("#uploadUrl") || null,
+      magnet: context.querySelector("#uploadMagnet") || null,
+      ws: context.querySelector("#uploadWs") || null,
+      xs: context.querySelector("#uploadXs") || null,
+      thumbnail: context.querySelector("#uploadThumbnail") || null,
+      description: context.querySelector("#uploadDescription") || null,
+      enableComments: context.querySelector("#uploadEnableComments") || null,
+      isPrivate: context.querySelector("#uploadIsPrivate") || null,
+    };
+
+    this.closeButton = context.querySelector("#closeUploadModal") || null;
+
+    this.cloudflareSettingsForm = context.querySelector("#cloudflareSettingsForm") || null;
+    this.cloudflareClearSettingsButton =
+      context.querySelector("#cloudflareClearSettings") || null;
+    this.cloudflareSettingsStatus =
+      context.querySelector("#cloudflareSettingsStatus") || null;
+    this.cloudflareBucketPreview =
+      context.querySelector("#cloudflareBucketPreview") || null;
+    this.cloudflareUploadForm = context.querySelector("#cloudflareUploadForm") || null;
+    this.cloudflareFileInput = context.querySelector("#cloudflareFile") || null;
+    this.cloudflareUploadButton = context.querySelector("#cloudflareUploadButton") || null;
+    this.cloudflareUploadStatus =
+      context.querySelector("#cloudflareUploadStatus") || null;
+    this.cloudflareProgressBar = context.querySelector("#cloudflareProgressBar") || null;
+    this.cloudflareProgressFill = context.querySelector("#cloudflareProgressFill") || null;
+    this.cloudflareTitleInput = context.querySelector("#cloudflareTitle") || null;
+    this.cloudflareDescriptionInput =
+      context.querySelector("#cloudflareDescription") || null;
+    this.cloudflareThumbnailInput =
+      context.querySelector("#cloudflareThumbnail") || null;
+    this.cloudflareMagnetInput = context.querySelector("#cloudflareMagnet") || null;
+    this.cloudflareWsInput = context.querySelector("#cloudflareWs") || null;
+    this.cloudflareXsInput = context.querySelector("#cloudflareXs") || null;
+    this.cloudflareEnableCommentsInput =
+      context.querySelector("#cloudflareEnableComments") || null;
+    this.cloudflareAdvancedToggle =
+      context.querySelector("#cloudflareAdvancedToggle") || null;
+    this.cloudflareAdvancedToggleLabel =
+      context.querySelector("#cloudflareAdvancedToggleLabel") || null;
+    this.cloudflareAdvancedToggleIcon =
+      context.querySelector("#cloudflareAdvancedToggleIcon") || null;
+    this.cloudflareAdvancedFields =
+      context.querySelector("#cloudflareAdvancedFields") || null;
+    this.r2AccountIdInput = context.querySelector("#r2AccountId") || null;
+    this.r2AccessKeyIdInput = context.querySelector("#r2AccessKeyId") || null;
+    this.r2SecretAccessKeyInput = context.querySelector("#r2SecretAccessKey") || null;
+    this.r2ApiTokenInput = context.querySelector("#r2ApiToken") || null;
+    this.r2ZoneIdInput = context.querySelector("#r2ZoneId") || null;
+    this.r2BaseDomainInput = context.querySelector("#r2BaseDomain") || null;
+
+    this.nip71FormManager.registerSection("custom", this.customSection);
+    this.nip71FormManager.registerSection("cloudflare", this.cloudflareSection);
+  }
+
+  buildAutoGeneratedImetaVariant(file) {
+    if (!file) {
+      return null;
+    }
+    const mimeType = typeof file.type === "string" ? file.type.trim() : "";
+    if (!mimeType) {
+      return null;
+    }
+    return {
+      m: mimeType,
+      dim: "",
+      url: "",
+      x: "",
+      image: [],
+      fallback: [],
+      service: [],
+      autoGenerated: true,
+    };
+  }
+
+  bindEvents() {
+    if (this.closeButton) {
+      this.closeButton.addEventListener("click", () => {
+        this.close();
+      });
+    }
+
+    if (this.customForm) {
+      this.customForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+        this.handleCustomSubmit();
+      });
+    }
+
+    if (Array.isArray(this.uploadModeButtons)) {
+      this.uploadModeButtons.forEach((button) => {
+        if (!button) return;
+        button.addEventListener("click", () => {
+          const mode = button.dataset.uploadMode || "custom";
+          this.setMode(mode);
+        });
+      });
+    }
+
+    if (this.cloudflareSettingsForm) {
+      this.cloudflareSettingsForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        await this.handleCloudflareSettingsSubmit();
+      });
+    }
+
+    if (this.cloudflareClearSettingsButton) {
+      this.cloudflareClearSettingsButton.addEventListener("click", async () => {
+        await this.handleCloudflareClearSettings();
+      });
+    }
+
+    if (this.cloudflareUploadForm) {
+      this.cloudflareUploadForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        await this.handleCloudflareUploadSubmit();
+      });
+    }
+
+    if (this.cloudflareAdvancedToggle) {
+      this.cloudflareAdvancedToggle.addEventListener("click", () => {
+        if (this.r2Service?.setCloudflareAdvancedVisibility &&
+            this.r2Service?.getCloudflareAdvancedVisibility) {
+          const nextState = !this.r2Service.getCloudflareAdvancedVisibility();
+          this.r2Service.setCloudflareAdvancedVisibility(nextState);
+        } else {
+          this.renderCloudflareAdvancedVisibility(!this.cloudflareAdvancedVisible);
+        }
+      });
+    }
+
+    this.nip71FormManager.bindSection("custom");
+    this.nip71FormManager.bindSection("cloudflare");
+  }
+
+  registerR2Subscriptions() {
+    if (!this.r2Service?.on) {
+      return;
+    }
+
+    if (Array.isArray(this.r2Unsubscribes)) {
+      this.r2Unsubscribes.forEach((unsubscribe) => {
+        try {
+          if (typeof unsubscribe === "function") {
+            unsubscribe();
+          }
+        } catch (error) {
+          console.warn("[UploadModal] Failed to remove R2 listener", error);
+        }
+      });
+    }
+    this.r2Unsubscribes = [];
+
+    const register = (unsubscribe) => {
+      if (typeof unsubscribe === "function") {
+        this.r2Unsubscribes.push(unsubscribe);
+      }
+    };
+
+    register(
+      this.r2Service.on("advancedVisibilityChange", ({ visible } = {}) => {
+        this.renderCloudflareAdvancedVisibility(visible);
+      })
+    );
+
+    register(
+      this.r2Service.on("settingsStatus", ({ message, variant } = {}) => {
+        this.applyCloudflareStatus(this.cloudflareSettingsStatus, message, variant);
+      })
+    );
+
+    register(
+      this.r2Service.on("uploadStatus", ({ message, variant } = {}) => {
+        this.applyCloudflareStatus(this.cloudflareUploadStatus, message, variant);
+      })
+    );
+
+    register(
+      this.r2Service.on("uploadStateChange", ({ isUploading } = {}) => {
+        this.renderCloudflareUploadingState(isUploading);
+      })
+    );
+
+    register(
+      this.r2Service.on("uploadProgress", ({ fraction } = {}) => {
+        this.updateCloudflareProgress(fraction);
+      })
+    );
+
+    register(
+      this.r2Service.on("settingsPopulated", ({ settings } = {}) => {
+        this.fillCloudflareSettingsInputs(settings);
+      })
+    );
+
+    register(
+      this.r2Service.on("settingsChanged", ({ settings } = {}) => {
+        this.cloudflareSettings = settings || this.cloudflareSettings;
+      })
+    );
+
+    register(
+      this.r2Service.on("bucketPreview", (detail = {}) => {
+        this.renderCloudflareBucketPreview(detail);
+      })
+    );
+  }
+
+  open() {
+    if (!this.root) {
+      return;
+    }
+    if (!this.root.classList.contains("hidden")) {
+      this.isVisible = true;
+      return;
+    }
+    this.root.classList.remove("hidden");
+    this.isVisible = true;
+    this.setGlobalModalState("upload", true);
+    this.emit("upload:open", { mode: this.activeMode });
+  }
+
+  close() {
+    if (!this.root) {
+      return;
+    }
+    if (this.root.classList.contains("hidden")) {
+      this.isVisible = false;
+      return;
+    }
+    this.root.classList.add("hidden");
+    this.isVisible = false;
+    this.setGlobalModalState("upload", false);
+    this.emit("upload:close", { mode: this.activeMode });
+  }
+
+  setMode(mode) {
+    const normalized = mode === "cloudflare" ? "cloudflare" : "custom";
+    this.activeMode = normalized;
+
+    if (this.customSection) {
+      if (normalized === "custom") {
+        this.customSection.classList.remove("hidden");
+      } else {
+        this.customSection.classList.add("hidden");
+      }
+    }
+
+    if (this.cloudflareSection) {
+      if (normalized === "cloudflare") {
+        this.cloudflareSection.classList.remove("hidden");
+      } else {
+        this.cloudflareSection.classList.add("hidden");
+      }
+    }
+
+    if (Array.isArray(this.uploadModeButtons)) {
+      this.uploadModeButtons.forEach((button) => {
+        if (!button?.dataset) {
+          return;
+        }
+        const isActive = button.dataset.uploadMode === normalized;
+        button.classList.toggle("bg-blue-500", isActive);
+        button.classList.toggle("text-white", isActive);
+        button.classList.toggle("shadow", isActive);
+        button.classList.toggle("text-gray-300", !isActive);
+        button.setAttribute("aria-pressed", isActive ? "true" : "false");
+      });
+    }
+
+    if (normalized === "cloudflare") {
+      this.refreshCloudflareBucketPreview();
+    }
+  }
+
+  handleCustomSubmit() {
+    const payload = {
+      title: this.customFormInputs.title?.value?.trim() || "",
+      url: this.customFormInputs.url?.value?.trim() || "",
+      magnet: this.customFormInputs.magnet?.value?.trim() || "",
+      ws: this.customFormInputs.ws?.value?.trim() || "",
+      xs: this.customFormInputs.xs?.value?.trim() || "",
+      thumbnail: this.customFormInputs.thumbnail?.value?.trim() || "",
+      description: this.customFormInputs.description?.value?.trim() || "",
+      enableComments: this.customFormInputs.enableComments
+        ? !!this.customFormInputs.enableComments.checked
+        : true,
+    };
+
+    if (this.customFormInputs.isPrivate) {
+      payload.isPrivate = !!this.customFormInputs.isPrivate.checked;
+    }
+
+    const nip71Metadata = this.nip71FormManager.collectSection("custom");
+    if (nip71Metadata) {
+      payload.nip71 = nip71Metadata;
+    }
+
+    this.emit("upload:submit", { payload });
+  }
+
+  collectCloudflareSettingsFormValues() {
+    return {
+      accountId: this.r2AccountIdInput?.value?.trim() || "",
+      accessKeyId: this.r2AccessKeyIdInput?.value?.trim() || "",
+      secretAccessKey: this.r2SecretAccessKeyInput?.value?.trim() || "",
+      apiToken: this.r2ApiTokenInput?.value?.trim() || "",
+      zoneId: this.r2ZoneIdInput?.value?.trim() || "",
+      baseDomain: this.r2BaseDomainInput?.value || "",
+    };
+  }
+
+  applyCloudflareStatus(element, message = "", variant = "info") {
+    if (!element) {
+      return;
+    }
+
+    element.textContent = message || "";
+    element.classList.remove(
+      "text-green-400",
+      "text-red-400",
+      "text-yellow-400",
+      "text-gray-400"
+    );
+
+    if (!message) {
+      element.classList.add("text-gray-400");
+      return;
+    }
+
+    let className = "text-gray-400";
+    if (variant === "success") {
+      className = "text-green-400";
+    } else if (variant === "error") {
+      className = "text-red-400";
+    } else if (variant === "warning") {
+      className = "text-yellow-400";
+    }
+    element.classList.add(className);
+  }
+
+  renderCloudflareAdvancedVisibility(visible) {
+    const isVisible = Boolean(visible);
+    this.cloudflareAdvancedVisible = isVisible;
+
+    if (this.cloudflareAdvancedFields) {
+      if (isVisible) {
+        this.cloudflareAdvancedFields.classList.remove("hidden");
+      } else {
+        this.cloudflareAdvancedFields.classList.add("hidden");
+      }
+    }
+
+    if (this.cloudflareAdvancedToggle) {
+      this.cloudflareAdvancedToggle.setAttribute(
+        "aria-expanded",
+        isVisible ? "true" : "false"
+      );
+    }
+
+    if (this.cloudflareAdvancedToggleLabel) {
+      this.cloudflareAdvancedToggleLabel.textContent = isVisible
+        ? "Hide advanced options"
+        : "Show advanced options";
+    }
+
+    if (this.cloudflareAdvancedToggleIcon) {
+      this.cloudflareAdvancedToggleIcon.classList.toggle("rotate-90", isVisible);
+    }
+  }
+
+  renderCloudflareUploadingState(isUploading) {
+    if (this.cloudflareUploadButton) {
+      this.cloudflareUploadButton.disabled = Boolean(isUploading);
+      this.cloudflareUploadButton.textContent = isUploading
+        ? "Uploading…"
+        : "Upload to R2 & publish";
+    }
+
+    if (this.cloudflareFileInput) {
+      this.cloudflareFileInput.disabled = Boolean(isUploading);
+    }
+
+    if (this.cloudflareEnableCommentsInput) {
+      this.cloudflareEnableCommentsInput.disabled = Boolean(isUploading);
+    }
+  }
+
+  fillCloudflareSettingsInputs(settings) {
+    const data = settings || {};
+
+    if (this.r2AccountIdInput) {
+      this.r2AccountIdInput.value = data.accountId || "";
+    }
+    if (this.r2AccessKeyIdInput) {
+      this.r2AccessKeyIdInput.value = data.accessKeyId || "";
+    }
+    if (this.r2SecretAccessKeyInput) {
+      this.r2SecretAccessKeyInput.value = data.secretAccessKey || "";
+    }
+    if (this.r2ApiTokenInput) {
+      this.r2ApiTokenInput.value = data.apiToken || "";
+    }
+    if (this.r2ZoneIdInput) {
+      this.r2ZoneIdInput.value = data.zoneId || "";
+    }
+    if (this.r2BaseDomainInput) {
+      this.r2BaseDomainInput.value = data.baseDomain || "";
+    }
+  }
+
+  renderCloudflareBucketPreview({ text = "", title = "" } = {}) {
+    if (!this.cloudflareBucketPreview) {
+      return;
+    }
+
+    this.cloudflareBucketPreview.textContent = text || "";
+    if (title) {
+      this.cloudflareBucketPreview.setAttribute("title", title);
+    } else {
+      this.cloudflareBucketPreview.removeAttribute("title");
+    }
+  }
+
+  async refreshCloudflareBucketPreview() {
+    if (!this.r2Service?.updateCloudflareBucketPreview) {
+      return;
+    }
+
+    const pubkey =
+      (this.getCurrentPubkey && this.getCurrentPubkey()) ||
+      (this.authService?.getActivePubkey?.() ?? null);
+    const hasPubkey = Boolean(pubkey);
+    const npub = hasPubkey ? this.safeEncodeNpub(pubkey) : "";
+
+    await this.r2Service.updateCloudflareBucketPreview({ hasPubkey, npub });
+  }
+
+  updateCloudflareProgress(fraction) {
+    if (!this.cloudflareProgressBar || !this.cloudflareProgressFill) {
+      this.emit("upload:r2-progress", { fraction: null });
+      return;
+    }
+
+    if (!Number.isFinite(fraction) || fraction < 0) {
+      this.cloudflareProgressBar.classList.add("hidden");
+      this.cloudflareProgressBar.setAttribute("aria-hidden", "true");
+      this.cloudflareProgressFill.style.width = "0%";
+      this.cloudflareProgressFill.setAttribute("aria-valuenow", "0");
+      this.emit("upload:r2-progress", { fraction: null });
+      return;
+    }
+
+    const clamped = Math.max(0, Math.min(1, fraction));
+    const percent = Math.round(clamped * 100);
+
+    this.cloudflareProgressBar.classList.remove("hidden");
+    this.cloudflareProgressBar.setAttribute("aria-hidden", "false");
+    this.cloudflareProgressFill.style.width = `${percent}%`;
+    this.cloudflareProgressFill.setAttribute("aria-valuenow", `${percent}`);
+    this.emit("upload:r2-progress", { fraction: clamped });
+  }
+
+  resetCloudflareUploadForm() {
+    if (this.cloudflareTitleInput) this.cloudflareTitleInput.value = "";
+    if (this.cloudflareDescriptionInput) this.cloudflareDescriptionInput.value = "";
+    if (this.cloudflareThumbnailInput) this.cloudflareThumbnailInput.value = "";
+    if (this.cloudflareMagnetInput) this.cloudflareMagnetInput.value = "";
+    if (this.cloudflareWsInput) this.cloudflareWsInput.value = "";
+    if (this.cloudflareXsInput) this.cloudflareXsInput.value = "";
+    if (this.cloudflareEnableCommentsInput)
+      this.cloudflareEnableCommentsInput.checked = true;
+    if (this.cloudflareFileInput) this.cloudflareFileInput.value = "";
+    this.nip71FormManager.resetSection("cloudflare");
+    this.updateCloudflareProgress(Number.NaN);
+  }
+
+  resetCustomForm() {
+    if (this.customFormInputs.title) this.customFormInputs.title.value = "";
+    if (this.customFormInputs.url) this.customFormInputs.url.value = "";
+    if (this.customFormInputs.magnet) this.customFormInputs.magnet.value = "";
+    if (this.customFormInputs.ws) this.customFormInputs.ws.value = "";
+    if (this.customFormInputs.xs) this.customFormInputs.xs.value = "";
+    if (this.customFormInputs.thumbnail) this.customFormInputs.thumbnail.value = "";
+    if (this.customFormInputs.description)
+      this.customFormInputs.description.value = "";
+    if (this.customFormInputs.enableComments)
+      this.customFormInputs.enableComments.checked = true;
+    if (this.customFormInputs.isPrivate)
+      this.customFormInputs.isPrivate.checked = false;
+    this.nip71FormManager.resetSection("custom");
+  }
+
+  async loadR2Settings() {
+    if (!this.r2Service?.loadSettings) {
+      return null;
+    }
+    const settings = await this.r2Service.loadSettings();
+    this.cloudflareSettings = settings;
+    return settings;
+  }
+
+  async handleCloudflareSettingsSubmit() {
+    if (!this.r2Service?.saveSettings) {
+      return;
+    }
+    try {
+      const formValues = this.collectCloudflareSettingsFormValues();
+      const saved = await this.r2Service.saveSettings(formValues);
+      if (saved) {
+        await this.refreshCloudflareBucketPreview();
+      }
+    } catch (error) {
+      console.error("[UploadModal] Failed to save Cloudflare settings", error);
+    }
+  }
+
+  async handleCloudflareClearSettings() {
+    if (!this.r2Service?.clearSettings) {
+      return;
+    }
+    try {
+      const cleared = await this.r2Service.clearSettings();
+      if (cleared) {
+        await this.refreshCloudflareBucketPreview();
+      }
+    } catch (error) {
+      console.error("[UploadModal] Failed to clear Cloudflare settings", error);
+    }
+  }
+
+  async handleCloudflareUploadSubmit() {
+    if (!this.r2Service?.uploadVideo) {
+      return;
+    }
+
+    const pubkey =
+      (this.getCurrentPubkey && this.getCurrentPubkey()) ||
+      (this.authService?.getActivePubkey?.() ?? null);
+    if (!pubkey) {
+      this.showError("Please login to post a video.");
+      return;
+    }
+
+    const npub = this.safeEncodeNpub(pubkey) || "";
+    const file = this.cloudflareFileInput?.files?.[0] || null;
+    const metadata = {
+      title: this.cloudflareTitleInput?.value?.trim() || "",
+      description: this.cloudflareDescriptionInput?.value?.trim() || "",
+      thumbnail: this.cloudflareThumbnailInput?.value?.trim() || "",
+      magnet: this.cloudflareMagnetInput?.value?.trim() || "",
+      ws: this.cloudflareWsInput?.value?.trim() || "",
+      xs: this.cloudflareXsInput?.value?.trim() || "",
+      enableComments: this.cloudflareEnableCommentsInput
+        ? !!this.cloudflareEnableCommentsInput.checked
+        : true,
+    };
+
+    const nip71Metadata = this.nip71FormManager.collectSection("cloudflare");
+    if (nip71Metadata) {
+      const imetaList = Array.isArray(nip71Metadata.imeta)
+        ? [...nip71Metadata.imeta]
+        : [];
+      const autoImeta = this.buildAutoGeneratedImetaVariant(file);
+      if (autoImeta && !imetaList.some((variant) => variant?.autoGenerated)) {
+        imetaList.push(autoImeta);
+      }
+      metadata.nip71 = {
+        ...nip71Metadata,
+        imeta: imetaList,
+      };
+    }
+
+    try {
+      await this.r2Service.uploadVideo({
+        npub,
+        file,
+        metadata,
+        settingsInput: this.collectCloudflareSettingsFormValues(),
+        publishVideoNote: (payload, options) =>
+          this.publishVideoNote ? this.publishVideoNote(payload, options) : null,
+        onReset: () => this.resetCloudflareUploadForm(),
+      });
+    } catch (error) {
+      console.error("[UploadModal] Cloudflare upload failed", error);
+    }
+  }
+
+  destroy() {
+    if (Array.isArray(this.r2Unsubscribes)) {
+      this.r2Unsubscribes.forEach((unsubscribe) => {
+        try {
+          if (typeof unsubscribe === "function") {
+            unsubscribe();
+          }
+        } catch (error) {
+          console.warn("[UploadModal] Failed to cleanup R2 listener", error);
+        }
+      });
+    }
+    this.r2Unsubscribes = [];
+  }
+}
diff --git a/js/ui/components/VideoCard.js b/js/ui/components/VideoCard.js
new file mode 100644
index 00000000..d741d224
--- /dev/null
+++ b/js/ui/components/VideoCard.js
@@ -0,0 +1,1602 @@
+export class VideoCard {
+  constructor({
+    document: doc,
+    video,
+    index = 0,
+    shareUrl = "#",
+    timeAgo = "",
+    postedAt = null,
+    pointerInfo = null,
+    highlightClass = "",
+    animationClass = "",
+    capabilities = {},
+    formatters = {},
+    helpers = {},
+    assets = {},
+    state = {},
+    ensureGlobalMoreMenuHandlers,
+    onRequestCloseAllMenus,
+  } = {}) {
+    if (!doc) {
+      throw new Error("VideoCard requires a document reference.");
+    }
+    if (!video || !video.id || !video.title) {
+      throw new Error("VideoCard requires a video with id and title.");
+    }
+
+    this.document = doc;
+    this.window = doc.defaultView || globalThis;
+    this.video = video;
+    this.index = index;
+    this.shareUrl = shareUrl;
+    this.highlightClass =
+      typeof highlightClass === "string" ? highlightClass : "";
+    this.animationClass = animationClass || "";
+    this.pointerInfo = pointerInfo;
+    this.capabilities = {
+      canEdit: false,
+      canDelete: false,
+      canRevert: false,
+      canManageBlacklist: false,
+      ...capabilities,
+    };
+    this.formatters = {
+      formatTimeAgo: formatters.formatTimeAgo,
+      formatNumber: formatters.formatNumber,
+    };
+    this.helpers = {
+      escapeHtml: helpers.escapeHtml,
+      isMagnetSupported: helpers.isMagnetSupported,
+      toLocaleString: helpers.toLocaleString,
+    };
+    this.assets = {
+      fallbackThumbnailSrc: assets.fallbackThumbnailSrc || "",
+      unsupportedBtihMessage: assets.unsupportedBtihMessage || "",
+    };
+    this.state = {
+      loadedThumbnails:
+        state.loadedThumbnails instanceof Map ? state.loadedThumbnails : null,
+      urlHealthByVideoId:
+        state.urlHealthByVideoId instanceof Map ? state.urlHealthByVideoId : null,
+      streamHealthByVideoId:
+        state.streamHealthByVideoId instanceof Map
+          ? state.streamHealthByVideoId
+          : null,
+    };
+    this.ensureGlobalMoreMenuHandlers =
+      typeof ensureGlobalMoreMenuHandlers === "function"
+        ? ensureGlobalMoreMenuHandlers
+        : null;
+    this.onRequestCloseAllMenus =
+      typeof onRequestCloseAllMenus === "function"
+        ? onRequestCloseAllMenus
+        : null;
+
+    this.callbacks = {
+      onPlay: null,
+      onEdit: null,
+      onRevert: null,
+      onDelete: null,
+      onMoreAction: null,
+      onAuthorNavigate: null,
+    };
+
+    this.root = null;
+    this.anchorEl = null;
+    this.titleEl = null;
+    this.thumbnailEl = null;
+    this.settingsButton = null;
+    this.settingsDropdown = null;
+    this.editButton = null;
+    this.revertButton = null;
+    this.deleteButton = null;
+    this.moreMenuButton = null;
+    this.moreMenu = null;
+    this.urlHealthBadgeEl = null;
+    this.torrentHealthBadgeEl = null;
+    this.viewCountEl = null;
+    this.discussionCountEl = null;
+    this.authorPicEl = null;
+    this.authorNameEl = null;
+    this.timestampEl = null;
+
+    this.playbackUrl =
+      typeof video.url === "string" ? video.url.trim() : "";
+    const magnet =
+      (typeof video.magnet === "string" ? video.magnet.trim() : "") ||
+      (typeof video.infoHash === "string" ? video.infoHash.trim() : "");
+    this.playbackMagnet = magnet;
+    this.magnetProvided = magnet.length > 0;
+    this.magnetSupported = this.helpers.isMagnetSupported
+      ? this.helpers.isMagnetSupported(magnet)
+      : false;
+    this.showUnsupportedTorrentBadge =
+      !this.playbackUrl && this.magnetProvided && !this.magnetSupported;
+
+    const normalizedPostedAt = Number.isFinite(postedAt)
+      ? Math.floor(postedAt)
+      : null;
+    this.postedAt = normalizedPostedAt;
+
+    if (this.postedAt !== null && this.video && typeof this.video === "object") {
+      this.video.rootCreatedAt = this.postedAt;
+    }
+
+    const fallbackTimestamp =
+      this.postedAt !== null
+        ? this.postedAt
+        : Number.isFinite(video?.created_at)
+          ? Math.floor(video.created_at)
+          : null;
+
+    this.timeAgo =
+      typeof timeAgo === "string" && timeAgo
+        ? timeAgo
+        : this.formatTimestampForLabel(fallbackTimestamp);
+
+    this.build();
+  }
+
+  set onPlay(fn) {
+    this.callbacks.onPlay = typeof fn === "function" ? fn : null;
+  }
+
+  set onEdit(fn) {
+    this.callbacks.onEdit = typeof fn === "function" ? fn : null;
+  }
+
+  set onRevert(fn) {
+    this.callbacks.onRevert = typeof fn === "function" ? fn : null;
+  }
+
+  set onDelete(fn) {
+    this.callbacks.onDelete = typeof fn === "function" ? fn : null;
+  }
+
+  set onMoreAction(fn) {
+    this.callbacks.onMoreAction = typeof fn === "function" ? fn : null;
+  }
+
+  set onAuthorNavigate(fn) {
+    this.callbacks.onAuthorNavigate = typeof fn === "function" ? fn : null;
+  }
+
+  getRoot() {
+    return this.root;
+  }
+
+  getUrlHealthBadgeElement() {
+    return this.urlHealthBadgeEl;
+  }
+
+  getTorrentHealthBadgeElement() {
+    return this.torrentHealthBadgeEl;
+  }
+
+  getViewCountElement() {
+    return this.viewCountEl;
+  }
+
+  getDiscussionCountElement() {
+    return this.discussionCountEl;
+  }
+
+  closeMoreMenu() {
+    if (this.moreMenu) {
+      this.moreMenu.classList.add("hidden");
+    }
+    if (this.moreMenuButton) {
+      this.moreMenuButton.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  closeSettingsMenu() {
+    if (this.settingsDropdown) {
+      this.settingsDropdown.classList.add("hidden");
+    }
+  }
+
+  build() {
+    const doc = this.document;
+
+    const root = this.createElement("div", {
+      classNames: [
+        "video-card",
+        "bg-gray-900",
+        "rounded-lg",
+        "shadow-lg",
+        "hover:shadow-2xl",
+        "transition-all",
+        "duration-300",
+      ],
+    });
+
+    this.applyClassListFromString(root, this.highlightClass);
+    this.applyClassListFromString(root, this.animationClass);
+
+    this.root = root;
+
+    if (this.video?.id) {
+      root.dataset.videoId = this.video.id;
+    }
+
+    this.applyPointerDataset();
+    this.applyOwnerDataset();
+    this.applySourceDatasets();
+
+    const anchor = this.createElement("a", {
+      classNames: [
+        "block",
+        "cursor-pointer",
+        "relative",
+        "group",
+        "rounded-t-lg",
+        "overflow-hidden",
+      ],
+      attrs: {
+        href: this.shareUrl,
+      },
+    });
+    anchor.dataset.videoId = this.video.id;
+    this.anchorEl = anchor;
+
+    const ratio = this.createElement("div", {
+      classNames: ["ratio-16-9"],
+    });
+    const thumbnail = this.buildThumbnail();
+    ratio.appendChild(thumbnail);
+    anchor.appendChild(ratio);
+
+    const content = this.createElement("div", { classNames: ["p-4"] });
+
+    const title = this.createElement("h3", {
+      classNames: [
+        "text-lg",
+        "font-bold",
+        "text-white",
+        "line-clamp-2",
+        "hover:text-blue-400",
+        "cursor-pointer",
+        "mb-3",
+      ],
+      textContent: this.video.title,
+    });
+    title.dataset.videoId = this.video.id;
+    this.titleEl = title;
+
+    const header = this.createElement("div", {
+      classNames: ["flex", "items-center", "justify-between"],
+    });
+
+    const authorSection = this.buildAuthorSection();
+    const controls = this.buildControls();
+
+    header.appendChild(authorSection);
+    if (controls) {
+      header.appendChild(controls);
+    }
+
+    content.appendChild(title);
+    content.appendChild(header);
+
+    const badgesContainer = this.buildBadgesContainer();
+    if (badgesContainer) {
+      content.appendChild(badgesContainer);
+    }
+
+    const discussion = this.buildDiscussionCount();
+    if (discussion) {
+      content.appendChild(discussion);
+    }
+
+    if (this.showUnsupportedTorrentBadge) {
+      const warning = this.createElement("p", {
+        classNames: ["mt-3", "text-xs", "text-amber-300"],
+        attrs: { title: this.assets.unsupportedBtihMessage || "" },
+        textContent:
+          "WebTorrent fallback unavailable (magnet missing btih info hash)",
+      });
+      warning.dataset.torrentStatus = "unsupported";
+      content.appendChild(warning);
+    }
+
+    root.appendChild(anchor);
+    root.appendChild(content);
+
+    this.applyPlaybackDatasets();
+    this.bindEvents();
+  }
+
+  buildThumbnail() {
+    const img = this.createElement("img");
+    img.dataset.videoThumbnail = "true";
+
+    const fallbackSrc = this.assets.fallbackThumbnailSrc || "";
+    const thumbnailUrl =
+      typeof this.video.thumbnail === "string"
+        ? this.video.thumbnail.trim()
+        : "";
+
+    const cachedValue = this.state.loadedThumbnails?.get(this.video.id) || "";
+    const shouldLazyLoad = !!thumbnailUrl && cachedValue !== thumbnailUrl;
+    const shouldAnimate = !!thumbnailUrl && cachedValue !== thumbnailUrl;
+
+    if (shouldLazyLoad) {
+      if (fallbackSrc) {
+        img.src = fallbackSrc;
+        img.dataset.fallbackSrc = fallbackSrc;
+      }
+      img.dataset.lazy = thumbnailUrl;
+    } else {
+      img.src = thumbnailUrl || fallbackSrc;
+      if (fallbackSrc) {
+        img.dataset.fallbackSrc = fallbackSrc;
+      }
+    }
+
+    img.loading = "lazy";
+    img.decoding = "async";
+    img.alt = this.video.title || "";
+
+    this.thumbnailEl = img;
+
+    const markThumbnailAsLoaded = () => {
+      if (!thumbnailUrl) {
+        return;
+      }
+
+      if (shouldAnimate) {
+        if (img.dataset.thumbnailLoaded !== "true") {
+          img.dataset.thumbnailLoaded = "true";
+        }
+      } else if (img.dataset.thumbnailLoaded) {
+        delete img.dataset.thumbnailLoaded;
+      }
+
+      if (this.state.loadedThumbnails) {
+        this.state.loadedThumbnails.set(this.video.id, thumbnailUrl);
+      }
+    };
+
+    const handleLoad = () => {
+      if (img.dataset.thumbnailLoaded === "true") {
+        return;
+      }
+
+      const hasPendingLazySrc =
+        typeof img.dataset.lazy === "string" && img.dataset.lazy.trim().length;
+
+      if (hasPendingLazySrc) {
+        return;
+      }
+
+      if (img.dataset.thumbnailFailed || !thumbnailUrl) {
+        return;
+      }
+
+      const fallbackAttr =
+        (typeof img.dataset.fallbackSrc === "string"
+          ? img.dataset.fallbackSrc.trim()
+          : "") || fallbackSrc || "";
+
+      const currentSrc = img.currentSrc || img.src || "";
+      const isFallback =
+        !!fallbackAttr &&
+        !!currentSrc &&
+        (currentSrc === fallbackAttr || currentSrc.endsWith(fallbackAttr));
+
+      if (isFallback) {
+        return;
+      }
+
+      if ((img.naturalWidth === 0 && img.naturalHeight === 0) || !currentSrc) {
+        return;
+      }
+
+      markThumbnailAsLoaded();
+      img.removeEventListener("load", handleLoad);
+    };
+
+    const handleError = () => {
+      if (thumbnailUrl && this.state.loadedThumbnails) {
+        const cached = this.state.loadedThumbnails.get(this.video.id);
+        if (cached === thumbnailUrl) {
+          this.state.loadedThumbnails.delete(this.video.id);
+        }
+      }
+
+      if (img.dataset.thumbnailLoaded) {
+        delete img.dataset.thumbnailLoaded;
+      }
+
+      img.removeEventListener("load", handleLoad);
+    };
+
+    img.addEventListener("load", handleLoad);
+    img.addEventListener("error", handleError, { once: true });
+
+    if (img.complete) {
+      handleLoad();
+    }
+
+    return img;
+  }
+
+  buildAuthorSection() {
+    const wrapper = this.createElement("div", {
+      classNames: ["flex", "items-center", "space-x-3"],
+    });
+
+    const avatarWrapper = this.createElement("div", {
+      classNames: [
+        "w-8",
+        "h-8",
+        "rounded-full",
+        "bg-gray-700",
+        "overflow-hidden",
+        "flex",
+        "items-center",
+        "justify-center",
+      ],
+    });
+
+    const avatar = this.createElement("img", {
+      attrs: {
+        src: "assets/svg/default-profile.svg",
+        alt: "Placeholder",
+      },
+    });
+    avatar.classList.add("author-pic");
+    if (this.video.pubkey) {
+      avatar.dataset.pubkey = this.video.pubkey;
+    }
+    avatar.style.cursor = "pointer";
+
+    avatarWrapper.appendChild(avatar);
+
+    const authorMeta = this.createElement("div", { classNames: ["min-w-0"] });
+
+    const authorName = this.createElement("p", {
+      classNames: ["text-sm", "text-gray-400", "author-name"],
+      textContent: "Loading name...",
+    });
+    if (this.video.pubkey) {
+      authorName.dataset.pubkey = this.video.pubkey;
+    }
+    authorName.style.cursor = "pointer";
+
+    const metadata = this.createElement("div", {
+      classNames: ["flex", "items-center", "text-xs", "text-gray-500", "mt-1"],
+    });
+
+    const timeEl = this.createElement("span", {
+      textContent: this.timeAgo,
+    });
+    metadata.appendChild(timeEl);
+    this.timestampEl = timeEl;
+
+    if (this.pointerInfo && this.pointerInfo.key) {
+      const dot = this.createElement("span", {
+        classNames: ["mx-1", "text-gray-600"],
+        textContent: "•",
+      });
+      dot.setAttribute("aria-hidden", "true");
+
+      const view = this.createElement("span", {
+        classNames: ["view-count-text"],
+        textContent: "– views",
+      });
+      view.dataset.viewCount = "";
+      view.dataset.viewPointer = this.pointerInfo.key;
+
+      metadata.appendChild(dot);
+      metadata.appendChild(view);
+
+      this.viewCountEl = view;
+    }
+
+    authorMeta.appendChild(authorName);
+    authorMeta.appendChild(metadata);
+
+    wrapper.appendChild(avatarWrapper);
+    wrapper.appendChild(authorMeta);
+
+    this.authorPicEl = avatar;
+    this.authorNameEl = authorName;
+
+    return wrapper;
+  }
+
+  buildControls() {
+    const doc = this.document;
+    const container = this.createElement("div", {
+      classNames: ["flex", "items-center"],
+    });
+
+    const moreMenu = this.buildMoreMenu();
+    if (moreMenu) {
+      container.appendChild(moreMenu);
+    }
+
+    if (this.capabilities.canEdit) {
+      const wrapper = this.createElement("div", {
+        classNames: ["relative", "inline-block", "ml-3", "overflow-visible"],
+      });
+      const button = this.createElement("button", {
+        classNames: [
+          "inline-flex",
+          "items-center",
+          "p-2",
+          "rounded-full",
+          "text-gray-400",
+          "hover:text-gray-200",
+          "hover:bg-gray-800",
+          "focus:outline-none",
+          "focus:ring-2",
+          "focus:ring-blue-500",
+        ],
+        attrs: {
+          type: "button",
+        },
+      });
+      button.dataset.settingsDropdown = String(this.index);
+
+      const icon = doc.createElement("img");
+      icon.src = "assets/svg/video-settings-gear.svg";
+      icon.alt = "Settings";
+      icon.classList.add("w-5", "h-5");
+      button.appendChild(icon);
+
+      const dropdown = this.createElement("div", {
+        classNames: [
+          "hidden",
+          "absolute",
+          "right-0",
+          "bottom-full",
+          "mb-2",
+          "w-32",
+          "rounded-md",
+          "shadow-lg",
+          "bg-gray-800",
+          "ring-1",
+          "ring-black",
+          "ring-opacity-5",
+          "z-50",
+        ],
+      });
+      dropdown.id = `settingsDropdown-${this.index}`;
+
+      const list = this.createElement("div", {
+        classNames: ["py-1"],
+      });
+
+      const editButton = this.createElement("button", {
+        classNames: [
+          "block",
+          "w-full",
+          "text-left",
+          "px-4",
+          "py-2",
+          "text-sm",
+          "text-gray-100",
+          "hover:bg-gray-700",
+        ],
+        textContent: "Edit",
+      });
+      editButton.dataset.editIndex = String(this.index);
+      editButton.dataset.editEventId = this.video.id;
+      list.appendChild(editButton);
+      this.editButton = editButton;
+
+      if (this.capabilities.canRevert) {
+        const revertButton = this.createElement("button", {
+          classNames: [
+            "block",
+            "w-full",
+            "text-left",
+            "px-4",
+            "py-2",
+            "text-sm",
+            "text-red-400",
+            "hover:bg-red-700",
+            "hover:text-white",
+          ],
+          textContent: "Revert",
+        });
+        revertButton.dataset.revertIndex = String(this.index);
+        revertButton.dataset.revertEventId = this.video.id;
+        list.appendChild(revertButton);
+        this.revertButton = revertButton;
+      }
+
+      if (this.capabilities.canDelete) {
+        const deleteButton = this.createElement("button", {
+          classNames: [
+            "block",
+            "w-full",
+            "text-left",
+            "px-4",
+            "py-2",
+            "text-sm",
+            "text-red-400",
+            "hover:bg-red-700",
+            "hover:text-white",
+          ],
+          textContent: "Delete All",
+        });
+        deleteButton.dataset.deleteAllIndex = String(this.index);
+        deleteButton.dataset.deleteAllEventId = this.video.id;
+        list.appendChild(deleteButton);
+        this.deleteButton = deleteButton;
+      }
+
+      dropdown.appendChild(list);
+      wrapper.appendChild(button);
+      wrapper.appendChild(dropdown);
+
+      container.appendChild(wrapper);
+
+      this.settingsButton = button;
+      this.settingsDropdown = dropdown;
+    }
+
+    return container;
+  }
+
+  buildMoreMenu() {
+    const wrapper = this.createElement("div", {
+      classNames: ["relative", "inline-block", "ml-1", "overflow-visible"],
+    });
+    wrapper.dataset.moreMenuWrapper = "true";
+
+    const button = this.createElement("button", {
+      classNames: [
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "w-10",
+        "h-10",
+        "p-2",
+        "rounded-full",
+        "text-gray-400",
+        "hover:text-gray-200",
+        "hover:bg-gray-800",
+        "focus:outline-none",
+        "focus:ring-2",
+        "focus:ring-blue-500",
+      ],
+      attrs: {
+        type: "button",
+        "aria-haspopup": "true",
+        "aria-expanded": "false",
+        "aria-label": "More options",
+      },
+    });
+    button.dataset.moreDropdown = String(this.index);
+    button.dataset.moreMenuToggleBound = "true";
+
+    const icon = this.document.createElement("img");
+    icon.src = "assets/svg/ellipsis.svg";
+    icon.alt = "More";
+    icon.classList.add("w-5", "h-5", "object-contain");
+    button.appendChild(icon);
+
+    const dropdown = this.createElement("div", {
+      classNames: [
+        "hidden",
+        "absolute",
+        "right-0",
+        "bottom-full",
+        "mb-2",
+        "w-40",
+        "rounded-md",
+        "shadow-lg",
+        "bg-gray-800",
+        "ring-1",
+        "ring-black",
+        "ring-opacity-5",
+        "z-50",
+      ],
+    });
+    dropdown.id = `moreDropdown-${this.index}`;
+    dropdown.dataset.moreMenu = "true";
+    dropdown.setAttribute("role", "menu");
+
+    const list = this.createElement("div", {
+      classNames: ["py-1"],
+    });
+
+    const addActionButton = (text, action, extraDataset = {}, classes = []) => {
+      const btn = this.createElement("button", {
+        classNames: [
+          "block",
+          "w-full",
+          "text-left",
+          "px-4",
+          "py-2",
+          "text-sm",
+          ...classes,
+        ],
+        textContent: text,
+      });
+      btn.dataset.action = action;
+      Object.entries(extraDataset || {}).forEach(([key, value]) => {
+        if (value === undefined || value === null) {
+          return;
+        }
+        btn.dataset[key] = String(value);
+      });
+      list.appendChild(btn);
+      return btn;
+    };
+
+    addActionButton("Open channel", "open-channel", {
+      author: this.video.pubkey || "",
+    }, ["text-gray-100", "hover:bg-gray-700"]);
+
+    addActionButton("Copy link", "copy-link", {
+      eventId: this.video.id || "",
+    }, ["text-gray-100", "hover:bg-gray-700"]);
+
+    const pointer = Array.isArray(this.pointerInfo?.pointer)
+      ? this.pointerInfo.pointer
+      : null;
+    const pointerType = pointer && pointer.length >= 2 ? pointer[0] : "";
+    const pointerValue = pointer && pointer.length >= 2 ? pointer[1] : "";
+    const pointerRelay = pointer && pointer.length >= 3 ? pointer[2] || "" : "";
+    const numericKind =
+      Number.isFinite(this.video.kind) && this.video.kind > 0
+        ? Math.floor(this.video.kind)
+        : null;
+
+    const baseBoostDataset = {
+      eventId: this.video.id || "",
+      author: this.video.pubkey || "",
+    };
+
+    if (pointerType && pointerValue) {
+      baseBoostDataset.pointerType = pointerType;
+      baseBoostDataset.pointerValue = pointerValue;
+    }
+    if (pointerRelay) {
+      baseBoostDataset.pointerRelay = pointerRelay;
+    }
+    if (Number.isFinite(numericKind)) {
+      baseBoostDataset.kind = String(numericKind);
+    }
+
+    const boostLabel = this.createElement("div", {
+      classNames: [
+        "px-4",
+        "pt-2",
+        "pb-1",
+        "text-xs",
+        "font-semibold",
+        "uppercase",
+        "tracking-wide",
+        "text-gray-400",
+      ],
+      textContent: "Boost on Nostr…",
+    });
+    list.appendChild(boostLabel);
+
+    addActionButton(
+      "Repost (kind 6)",
+      "repost-event",
+      baseBoostDataset,
+      ["text-gray-100", "hover:bg-gray-700"],
+    );
+
+    if (this.playbackUrl && this.video.isPrivate !== true) {
+      const mirrorDataset = {
+        ...baseBoostDataset,
+        url: this.playbackUrl,
+        magnet: this.playbackMagnet || "",
+        thumbnail: typeof this.video.thumbnail === "string" ? this.video.thumbnail : "",
+        description:
+          typeof this.video.description === "string" ? this.video.description : "",
+        title: typeof this.video.title === "string" ? this.video.title : "",
+        isPrivate: this.video.isPrivate === true ? "true" : "false",
+      };
+
+      addActionButton(
+        "Mirror (kind 1063)",
+        "mirror-video",
+        mirrorDataset,
+        ["text-gray-100", "hover:bg-gray-700"],
+      );
+    }
+
+    const ensureDataset = {
+      ...baseBoostDataset,
+      pubkey: this.video.pubkey || "",
+    };
+
+    addActionButton(
+      "Rebroadcast",
+      "ensure-presence",
+      ensureDataset,
+      ["text-gray-100", "hover:bg-gray-700"],
+    );
+
+    list.appendChild(
+      this.createElement("div", {
+        classNames: ["my-1", "border-t", "border-gray-700", "opacity-70"],
+      })
+    );
+
+    if (this.pointerInfo && this.pointerInfo.key && this.pointerInfo.pointer) {
+      const [historyPointerType, historyPointerValue, historyPointerRelay] =
+        this.pointerInfo.pointer;
+      if (historyPointerType && historyPointerValue) {
+        const removeButton = addActionButton(
+          "Remove from history",
+          "remove-history",
+          {
+            pointerKey: this.pointerInfo.key,
+            pointerType: historyPointerType,
+            pointerValue: historyPointerValue,
+            pointerRelay: historyPointerRelay || "",
+            reason: "remove-item",
+          },
+          ["text-gray-100", "hover:bg-gray-700"]
+        );
+        removeButton.setAttribute(
+          "title",
+          "Remove this entry from your encrypted history. Relay sync may take a moment."
+        );
+        removeButton.setAttribute(
+          "aria-label",
+          "Remove from history (updates encrypted history and may take a moment to sync to relays)"
+        );
+      }
+    }
+
+    if (this.capabilities.canManageBlacklist) {
+      addActionButton(
+        "Blacklist creator",
+        "blacklist-author",
+        { author: this.video.pubkey || "" },
+        ["text-red-400", "hover:bg-red-700", "hover:text-white"]
+      );
+    }
+
+    addActionButton(
+      "Block creator",
+      "block-author",
+      { author: this.video.pubkey || "" },
+      ["text-red-400", "hover:bg-red-700", "hover:text-white"]
+    );
+
+    addActionButton(
+      "Report",
+      "report",
+      { eventId: this.video.id || "" },
+      ["text-gray-100", "hover:bg-gray-700"]
+    );
+
+    dropdown.appendChild(list);
+    wrapper.appendChild(button);
+    wrapper.appendChild(dropdown);
+
+    this.moreMenuButton = button;
+    this.moreMenu = dropdown;
+
+    return wrapper;
+  }
+
+  buildBadgesContainer() {
+    const pieces = [];
+
+    if (this.playbackUrl) {
+      const badge = this.createElement("div", {
+        classNames: [
+          "url-health-badge",
+          "text-xs",
+          "font-semibold",
+          "px-2",
+          "py-1",
+          "rounded",
+          "transition-colors",
+          "duration-200",
+        ],
+      });
+      badge.setAttribute("aria-live", "polite");
+      badge.setAttribute("role", "status");
+      this.applyUrlBadgeVisualState(badge, this.getCachedUrlHealthEntry());
+      this.urlHealthBadgeEl = badge;
+      pieces.push(badge);
+    }
+
+    if (this.magnetSupported && this.magnetProvided) {
+      const badge = this.createElement("div", {
+        classNames: [
+          "torrent-health-badge",
+          "text-xs",
+          "font-semibold",
+          "px-2",
+          "py-1",
+          "rounded",
+          "transition-colors",
+          "duration-200",
+        ],
+      });
+      badge.setAttribute("aria-live", "polite");
+      badge.setAttribute("role", "status");
+      this.applyStreamBadgeVisualState(badge, this.getCachedStreamHealthEntry());
+      this.torrentHealthBadgeEl = badge;
+      pieces.push(badge);
+    }
+
+    if (!pieces.length) {
+      return null;
+    }
+
+    const container = this.createElement("div", {
+      classNames: ["mt-3", "flex", "flex-wrap", "items-center", "gap-2"],
+    });
+    pieces.forEach((el) => container.appendChild(el));
+    return container;
+  }
+
+  getCachedUrlHealthEntry() {
+    if (!this.video?.id || !(this.state.urlHealthByVideoId instanceof Map)) {
+      return null;
+    }
+
+    const entry = this.state.urlHealthByVideoId.get(this.video.id);
+    if (!entry || typeof entry !== "object") {
+      return null;
+    }
+
+    const normalized = {};
+    if (typeof entry.status === "string" && entry.status) {
+      normalized.status = entry.status;
+    }
+    if (typeof entry.message === "string" && entry.message) {
+      normalized.message = entry.message;
+    }
+    if (Number.isFinite(entry.lastCheckedAt)) {
+      normalized.lastCheckedAt = Math.floor(entry.lastCheckedAt);
+    }
+
+    return Object.keys(normalized).length ? normalized : null;
+  }
+
+  getCachedStreamHealthEntry() {
+    if (!this.video?.id || !(this.state.streamHealthByVideoId instanceof Map)) {
+      return null;
+    }
+
+    const entry = this.state.streamHealthByVideoId.get(this.video.id);
+    if (!entry || typeof entry !== "object") {
+      return null;
+    }
+
+    const normalized = {};
+    if (typeof entry.state === "string" && entry.state) {
+      normalized.state = entry.state;
+    }
+    if (Number.isFinite(entry.peers)) {
+      normalized.peers = Math.max(0, Number(entry.peers));
+    }
+    if (typeof entry.reason === "string" && entry.reason) {
+      normalized.reason = entry.reason;
+    }
+    if (Number.isFinite(entry.checkedAt)) {
+      normalized.checkedAt = Math.floor(entry.checkedAt);
+    }
+    if (typeof entry.text === "string" && entry.text) {
+      normalized.text = entry.text;
+    }
+    if (typeof entry.tooltip === "string" && entry.tooltip) {
+      normalized.tooltip = entry.tooltip;
+    }
+    if (entry.role === "alert" || entry.role === "status") {
+      normalized.role = entry.role;
+    }
+    if (entry.ariaLive === "assertive" || entry.ariaLive === "polite") {
+      normalized.ariaLive = entry.ariaLive;
+    }
+
+    return Object.keys(normalized).length ? normalized : null;
+  }
+
+  formatTorrentCheckedTime(timestamp) {
+    if (!Number.isFinite(timestamp)) {
+      return "";
+    }
+
+    try {
+      return new Date(timestamp).toLocaleTimeString([], { hour12: false });
+    } catch (error) {
+      try {
+        return new Date(timestamp).toLocaleTimeString();
+      } catch (err) {
+        return "";
+      }
+    }
+  }
+
+  buildTorrentTooltip({ peers = null, checkedAt = null, reason = null } = {}) {
+    const parts = [];
+    if (Number.isFinite(peers)) {
+      parts.push(`Peers: ${Math.max(0, Number(peers))}`);
+    }
+    if (Number.isFinite(checkedAt)) {
+      const formatted = this.formatTorrentCheckedTime(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(" • ")}`;
+  }
+
+  applyUrlBadgeVisualState(badge, entry) {
+    if (!(badge instanceof HTMLElement)) {
+      return;
+    }
+
+    const status =
+      typeof entry?.status === "string" && entry.status ? entry.status : "checking";
+    const message =
+      typeof entry?.message === "string" && entry.message
+        ? entry.message
+        : "Checking hosted URL…";
+
+    const hadMargin = badge.classList.contains("mt-3");
+    const baseClasses = [
+      "url-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "transition-colors",
+      "duration-200",
+    ];
+    if (hadMargin) {
+      baseClasses.unshift("mt-3");
+    }
+    badge.className = baseClasses.join(" ");
+
+    const common = ["inline-flex", "items-center", "gap-1"];
+    const addClasses = (classes) => {
+      classes.forEach((cls) => badge.classList.add(cls));
+    };
+
+    if (status === "healthy") {
+      addClasses([...common, "bg-green-900", "text-green-200"]);
+    } else if (status === "offline") {
+      addClasses([...common, "bg-red-900", "text-red-200"]);
+    } else if (status === "unknown" || status === "timeout") {
+      addClasses([...common, "bg-amber-900", "text-amber-200"]);
+    } else {
+      addClasses([...common, "bg-gray-800", "text-gray-300"]);
+    }
+
+    badge.dataset.urlHealthState = status;
+    badge.textContent = message;
+    badge.setAttribute("aria-live", "polite");
+    badge.setAttribute("role", status === "offline" ? "alert" : "status");
+  }
+
+  applyStreamBadgeVisualState(badge, entry) {
+    if (!(badge instanceof HTMLElement)) {
+      return;
+    }
+
+    const state =
+      typeof entry?.state === "string" && entry.state ? entry.state : "checking";
+    const peersValue = Number.isFinite(entry?.peers)
+      ? Math.max(0, Number(entry.peers))
+      : null;
+    const reason = typeof entry?.reason === "string" && entry.reason ? entry.reason : null;
+    const text = typeof entry?.text === "string" && entry.text ? entry.text : null;
+    const tooltip =
+      typeof entry?.tooltip === "string" && entry.tooltip ? entry.tooltip : null;
+    const role = entry?.role === "alert" || entry?.role === "status" ? entry.role : null;
+    const ariaLive =
+      entry?.ariaLive === "assertive" || entry?.ariaLive === "polite"
+        ? entry.ariaLive
+        : role === "alert"
+        ? "assertive"
+        : "polite";
+
+    const hadMargin = badge.classList.contains("mt-3");
+    const baseClasses = [
+      "torrent-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "transition-colors",
+      "duration-200",
+    ];
+    if (hadMargin) {
+      baseClasses.unshift("mt-3");
+    }
+    badge.className = baseClasses.join(" ");
+
+    const common = ["inline-flex", "items-center", "gap-1"];
+    const addClasses = (classes) => {
+      classes.forEach((cls) => badge.classList.add(cls));
+    };
+
+    if (state === "healthy") {
+      addClasses([...common, "bg-green-900", "text-green-200"]);
+    } else if (state === "unhealthy") {
+      addClasses([...common, "bg-red-900", "text-red-200"]);
+    } else {
+      addClasses([...common, "bg-gray-800", "text-gray-300"]);
+    }
+
+    const map = {
+      healthy: {
+        icon: "🟢",
+        aria: "WebTorrent peers available",
+      },
+      unhealthy: {
+        icon: "🔴",
+        aria: "WebTorrent peers unavailable",
+      },
+      checking: {
+        icon: "⏳",
+        aria: "Checking WebTorrent peers",
+      },
+      unknown: {
+        icon: "⚪",
+        aria: "WebTorrent status unknown",
+      },
+    };
+
+    const descriptor = map[state] || map.unknown;
+    const peersText = state === "healthy" && peersValue > 0 ? ` (${peersValue})` : "";
+    const iconPrefix = descriptor.icon ? `${descriptor.icon} ` : "";
+    const computedText = `${iconPrefix}WebTorrent${peersText}`;
+    badge.textContent = text || computedText;
+
+    const tooltipValue =
+      tooltip ||
+      (state === "checking" || state === "unknown"
+        ? descriptor.aria
+        : this.buildTorrentTooltip({
+            peers: peersValue,
+            checkedAt: Number.isFinite(entry?.checkedAt) ? entry.checkedAt : null,
+            reason,
+          }));
+
+    badge.setAttribute("aria-label", tooltipValue);
+    badge.setAttribute("title", tooltipValue);
+    badge.setAttribute("aria-live", ariaLive);
+    badge.setAttribute("role", role || (state === "unhealthy" ? "alert" : "status"));
+
+    badge.dataset.streamHealthState = state;
+    if (reason) {
+      badge.dataset.streamHealthReason = reason;
+    } else if (badge.dataset.streamHealthReason) {
+      delete badge.dataset.streamHealthReason;
+    }
+
+    if (Number.isFinite(peersValue) && peersValue !== null) {
+      badge.dataset.streamHealthPeers = String(peersValue);
+    } else if (badge.dataset.streamHealthPeers) {
+      delete badge.dataset.streamHealthPeers;
+    }
+  }
+
+  buildDiscussionCount() {
+    if (this.video.enableComments === false) {
+      return null;
+    }
+
+    let initialCount = null;
+    if (typeof this.video.discussionCount === "number") {
+      initialCount = this.video.discussionCount;
+    } else if (typeof this.video.discussionCount === "string") {
+      const trimmed = this.video.discussionCount.trim();
+      if (trimmed) {
+        const parsed = Number.parseInt(trimmed, 10);
+        if (Number.isFinite(parsed)) {
+          initialCount = parsed;
+        }
+      }
+    }
+
+    if (
+      initialCount === null ||
+      !Number.isFinite(initialCount) ||
+      initialCount < 0
+    ) {
+      return null;
+    }
+
+    const safeCount = Math.floor(initialCount);
+    const displayValue = this.helpers.toLocaleString
+      ? this.helpers.toLocaleString(safeCount)
+      : safeCount.toLocaleString();
+
+    const container = this.createElement("div", {
+      classNames: ["flex", "items-center", "text-xs", "text-gray-500", "mt-3"],
+    });
+    container.dataset.discussionCount = this.video.id;
+    container.dataset.countState = "ready";
+
+    const valueEl = this.createElement("span", {
+      textContent: displayValue,
+    });
+    valueEl.dataset.discussionCountValue = "";
+
+    const labelEl = this.createElement("span", {
+      classNames: ["ml-1"],
+      textContent: "notes",
+    });
+
+    container.appendChild(valueEl);
+    container.appendChild(labelEl);
+
+    this.discussionCountEl = container;
+
+    return container;
+  }
+
+  applyPointerDataset() {
+    if (!this.root) {
+      return;
+    }
+    if (this.pointerInfo && this.pointerInfo.key) {
+      this.root.dataset.pointerKey = this.pointerInfo.key;
+      const pointer = Array.isArray(this.pointerInfo.pointer)
+        ? this.pointerInfo.pointer
+        : null;
+      if (pointer && pointer.length) {
+        const [type, value, relay] = pointer;
+        if (type) {
+          this.root.dataset.pointerType = type;
+        }
+        if (value) {
+          this.root.dataset.pointerValue = value;
+        }
+        if (relay) {
+          this.root.dataset.pointerRelay = relay;
+        }
+      }
+    }
+  }
+
+  applyOwnerDataset() {
+    if (!this.root) {
+      return;
+    }
+    this.root.dataset.ownerIsViewer = this.capabilities.canEdit ? "true" : "false";
+    if (this.video.pubkey) {
+      this.root.dataset.ownerPubkey = this.video.pubkey;
+    }
+  }
+
+  applySourceDatasets() {
+    if (!this.root) {
+      return;
+    }
+
+    const cachedUrlHealth = this.getCachedUrlHealthEntry();
+    if (this.playbackUrl) {
+      const status =
+        typeof cachedUrlHealth?.status === "string" && cachedUrlHealth.status
+          ? cachedUrlHealth.status
+          : "checking";
+      this.root.dataset.urlHealthState = status;
+      delete this.root.dataset.urlHealthReason;
+      this.root.dataset.urlHealthEventId = this.video.id || "";
+      this.root.dataset.urlHealthUrl = encodeURIComponent(this.playbackUrl);
+    } else {
+      this.root.dataset.urlHealthState = "offline";
+      this.root.dataset.urlHealthReason = "missing-source";
+      delete this.root.dataset.urlHealthEventId;
+      delete this.root.dataset.urlHealthUrl;
+    }
+
+    const cachedStreamHealth = this.getCachedStreamHealthEntry();
+    if (this.magnetProvided && this.magnetSupported) {
+      const state =
+        typeof cachedStreamHealth?.state === "string" && cachedStreamHealth.state
+          ? cachedStreamHealth.state
+          : "checking";
+      this.root.dataset.streamHealthState = state;
+      if (cachedStreamHealth?.reason) {
+        this.root.dataset.streamHealthReason = cachedStreamHealth.reason;
+      } else if (this.root.dataset.streamHealthReason) {
+        delete this.root.dataset.streamHealthReason;
+      }
+      if (Number.isFinite(cachedStreamHealth?.peers)) {
+        this.root.dataset.streamHealthPeers = String(
+          Math.max(0, Number(cachedStreamHealth.peers))
+        );
+      } else if (this.root.dataset.streamHealthPeers) {
+        delete this.root.dataset.streamHealthPeers;
+      }
+    } else {
+      this.root.dataset.streamHealthState = "unhealthy";
+      this.root.dataset.streamHealthReason = this.magnetProvided
+        ? "unsupported"
+        : "missing-source";
+      if (this.root.dataset.streamHealthPeers) {
+        delete this.root.dataset.streamHealthPeers;
+      }
+    }
+
+    if (this.magnetProvided) {
+      this.root.dataset.magnet = this.playbackMagnet;
+    } else {
+      delete this.root.dataset.magnet;
+    }
+
+    if (this.showUnsupportedTorrentBadge) {
+      this.root.dataset.torrentSupported = "false";
+    } else if (this.magnetProvided && this.magnetSupported) {
+      this.root.dataset.torrentSupported = "true";
+    }
+  }
+
+  applyPlaybackDatasets() {
+    const elements = [this.anchorEl, this.titleEl].filter(Boolean);
+    elements.forEach((el) => {
+      if (!el) return;
+      el.dataset.playUrl = encodeURIComponent(this.playbackUrl || "");
+      el.dataset.playMagnet = this.playbackMagnet || "";
+      if (this.magnetProvided) {
+        el.dataset.torrentSupported = this.magnetSupported ? "true" : "false";
+      } else if (el.dataset.torrentSupported) {
+        delete el.dataset.torrentSupported;
+      }
+    });
+
+    if (this.urlHealthBadgeEl && this.playbackUrl) {
+      this.urlHealthBadgeEl.dataset.urlHealthEventId = this.video.id || "";
+      this.urlHealthBadgeEl.dataset.urlHealthUrl = encodeURIComponent(
+        this.playbackUrl
+      );
+    } else if (this.urlHealthBadgeEl) {
+      delete this.urlHealthBadgeEl.dataset.urlHealthEventId;
+      delete this.urlHealthBadgeEl.dataset.urlHealthUrl;
+    }
+  }
+
+  formatTimestampForLabel(timestamp) {
+    if (!Number.isFinite(timestamp)) {
+      return "";
+    }
+
+    const normalized = Math.floor(timestamp);
+    if (typeof this.formatters.formatTimeAgo === "function") {
+      try {
+        const formatted = this.formatters.formatTimeAgo(normalized);
+        return typeof formatted === "string" ? formatted : "";
+      } catch (error) {
+        if (this.window?.console?.warn) {
+          this.window.console.warn(
+            "[VideoCard] formatTimeAgo formatter threw",
+            error
+          );
+        }
+      }
+    }
+
+    return "";
+  }
+
+  updatePostedAt(timestamp) {
+    if (!Number.isFinite(timestamp)) {
+      return;
+    }
+
+    const normalized = Math.floor(timestamp);
+    this.postedAt = normalized;
+
+    if (this.video && typeof this.video === "object") {
+      this.video.rootCreatedAt = normalized;
+    }
+
+    const label = this.formatTimestampForLabel(normalized);
+    this.timeAgo = label;
+
+    if (this.timestampEl) {
+      this.timestampEl.textContent = label;
+    }
+  }
+
+  bindEvents() {
+    if (this.ensureGlobalMoreMenuHandlers) {
+      this.ensureGlobalMoreMenuHandlers();
+    }
+
+    const MouseEventCtor = this.window?.MouseEvent || globalThis.MouseEvent;
+
+    [this.anchorEl, this.titleEl].forEach((el) => {
+      if (!el) return;
+      el.addEventListener("click", (event) => {
+        if (!this.callbacks.onPlay) {
+          return;
+        }
+
+        const isMouseEvent =
+          typeof MouseEventCtor !== "undefined" && event instanceof MouseEventCtor;
+        if (isMouseEvent) {
+          const isPrimaryClick =
+            typeof event.button !== "number" || event.button === 0;
+          const hasModifier =
+            event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
+          if (!isPrimaryClick || hasModifier) {
+            return;
+          }
+        }
+
+        if (typeof event.preventDefault === "function") {
+          event.preventDefault();
+        }
+        if (typeof event.stopPropagation === "function") {
+          event.stopPropagation();
+        }
+
+        this.callbacks.onPlay({ event, video: this.video, card: this });
+      });
+    });
+
+    if (this.settingsButton && this.settingsDropdown) {
+      this.settingsButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const willOpen = this.settingsDropdown.classList.contains("hidden");
+        if (this.onRequestCloseAllMenus) {
+          this.onRequestCloseAllMenus(this);
+        } else {
+          this.closeSettingsMenu();
+        }
+        if (willOpen) {
+          this.settingsDropdown.classList.remove("hidden");
+        }
+      });
+    }
+
+    if (this.editButton) {
+      this.editButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.closeSettingsMenu();
+        if (this.callbacks.onEdit) {
+          this.callbacks.onEdit({
+            event,
+            video: this.video,
+            index: this.index,
+            card: this,
+          });
+        }
+      });
+    }
+
+    if (this.revertButton) {
+      this.revertButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.closeSettingsMenu();
+        if (this.callbacks.onRevert) {
+          this.callbacks.onRevert({
+            event,
+            video: this.video,
+            index: this.index,
+            card: this,
+          });
+        }
+      });
+    }
+
+    if (this.deleteButton) {
+      this.deleteButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.closeSettingsMenu();
+        if (this.callbacks.onDelete) {
+          this.callbacks.onDelete({
+            event,
+            video: this.video,
+            index: this.index,
+            card: this,
+          });
+        }
+      });
+    }
+
+    if (this.moreMenuButton && this.moreMenu) {
+      this.moreMenuButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const willOpen = this.moreMenu.classList.contains("hidden");
+        if (this.onRequestCloseAllMenus) {
+          this.onRequestCloseAllMenus(this);
+        }
+        if (willOpen) {
+          this.moreMenu.classList.remove("hidden");
+          this.moreMenuButton.setAttribute("aria-expanded", "true");
+        }
+      });
+
+      const actionButtons = this.moreMenu.querySelectorAll(
+        "button[data-action]"
+      );
+      actionButtons.forEach((button) => {
+        button.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (this.callbacks.onMoreAction) {
+            const dataset = { ...button.dataset };
+            this.callbacks.onMoreAction({
+              event,
+              video: this.video,
+              card: this,
+              dataset,
+            });
+          }
+          this.closeMoreMenu();
+        });
+      });
+    }
+
+    [this.authorPicEl, this.authorNameEl].forEach((el) => {
+      if (!el) return;
+      el.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.callbacks.onAuthorNavigate) {
+          this.callbacks.onAuthorNavigate({
+            event,
+            video: this.video,
+            card: this,
+            pubkey: this.video.pubkey || "",
+          });
+        }
+      });
+    });
+  }
+
+  applyClassListFromString(el, classString) {
+    if (!el || !classString) {
+      return;
+    }
+    classString
+      .split(/\s+/)
+      .map((cls) => cls.trim())
+      .filter(Boolean)
+      .forEach((cls) => el.classList.add(cls));
+  }
+
+  createElement(tagName, { classNames = [], attrs = {}, textContent } = {}) {
+    const el = this.document.createElement(tagName);
+    classNames
+      .filter((cls) => typeof cls === "string" && cls.trim())
+      .forEach((cls) => el.classList.add(cls));
+    Object.entries(attrs || {}).forEach(([key, value]) => {
+      if (value === undefined || value === null || value === "") {
+        return;
+      }
+      el.setAttribute(key, value);
+    });
+    if (typeof textContent === "string") {
+      el.textContent = textContent;
+    }
+    return el;
+  }
+}
diff --git a/js/ui/components/VideoModal.js b/js/ui/components/VideoModal.js
new file mode 100644
index 00000000..a01036b7
--- /dev/null
+++ b/js/ui/components/VideoModal.js
@@ -0,0 +1,1234 @@
+export class VideoModal {
+  constructor({
+    removeTrackingScripts,
+    setGlobalModalState,
+    document: doc,
+    logger,
+  } = {}) {
+    if (!doc) {
+      throw new Error("VideoModal requires a document reference.");
+    }
+    if (typeof setGlobalModalState !== "function") {
+      throw new Error("VideoModal requires setGlobalModalState helper.");
+    }
+
+    this.document = doc;
+    this.window = doc.defaultView || globalThis;
+    this.removeTrackingScripts =
+      typeof removeTrackingScripts === "function"
+        ? removeTrackingScripts
+        : () => {};
+    this.setGlobalModalState = setGlobalModalState;
+    this.logger = logger || console;
+    this.eventTarget = new EventTarget();
+
+    this.loaded = false;
+
+    this.playerModal = null;
+    this.scrollRegion = null;
+    this.modalVideo = null;
+    this.modalStatus = null;
+    this.modalProgress = null;
+    this.modalPeers = null;
+    this.modalSpeed = null;
+    this.modalDownloaded = null;
+    this.videoTitle = null;
+    this.videoDescription = null;
+    this.videoTimestamp = null;
+    this.videoEditedTimestamp = null;
+    this.videoViewCountEl = null;
+    this.creatorAvatar = null;
+    this.creatorName = null;
+    this.creatorNpub = null;
+    this.copyMagnetBtn = null;
+    this.shareBtn = null;
+    this.modalZapBtn = null;
+    this.modalMoreBtn = null;
+    this.modalMoreMenu = null;
+
+    this.modalZapDialog = null;
+    this.modalZapForm = null;
+    this.modalZapAmountInput = null;
+    this.modalZapCommentInput = null;
+    this.modalZapSplitSummary = null;
+    this.modalZapStatusEl = null;
+    this.modalZapReceipts = null;
+    this.modalZapSendBtn = null;
+    this.modalZapCloseBtn = null;
+    this.modalZapWalletPrompt = null;
+    this.modalZapWalletLink = null;
+    this.modalZapDialogOpen = false;
+    this.modalZapPending = false;
+
+    this.modalPosterCleanup = null;
+    this.videoEventCleanup = null;
+
+    this.activeVideo = null;
+
+    this.handleCopyRequest = this.handleCopyRequest.bind(this);
+    this.handleShareRequest = this.handleShareRequest.bind(this);
+    this.handleCreatorNavigation = this.handleCreatorNavigation.bind(this);
+
+    this.MODAL_LOADING_POSTER = "assets/gif/please-stand-by.gif";
+  }
+
+  log(message, ...args) {
+    if (!message) {
+      return;
+    }
+    if (this.logger && typeof this.logger.log === "function") {
+      this.logger.log(message, ...args);
+      return;
+    }
+    if (typeof this.logger === "function") {
+      this.logger(message, ...args);
+      return;
+    }
+    console.log(message, ...args);
+  }
+
+  addEventListener(type, listener, options) {
+    this.eventTarget.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type, listener, options) {
+    this.eventTarget.removeEventListener(type, listener, options);
+  }
+
+  dispatch(type, detail) {
+    const event = new CustomEvent(type, { detail });
+    this.eventTarget.dispatchEvent(event);
+  }
+
+  getRoot() {
+    return this.playerModal;
+  }
+
+  getVideoElement() {
+    return this.modalVideo;
+  }
+
+  setVideoElement(videoElement) {
+    this.detachVideoEvents();
+    this.clearPosterCleanup();
+
+    if (
+      this.window &&
+      typeof this.window.HTMLVideoElement !== "undefined" &&
+      videoElement instanceof this.window.HTMLVideoElement
+    ) {
+      this.modalVideo = videoElement;
+      this.bindVideoEvents();
+    } else {
+      this.modalVideo = null;
+    }
+
+    return this.modalVideo;
+  }
+
+  async load() {
+    if (this.loaded) {
+      const root = this.playerModal;
+      const rootConnected = root && root.isConnected;
+      if (rootConnected) {
+        const video = this.modalVideo;
+        const videoConnected = video && video.isConnected;
+        if (!videoConnected) {
+          const existingVideo = root.querySelector("#modalVideo");
+          if (existingVideo) {
+            this.hydrate(root);
+            if (this.modalVideo && this.modalVideo.isConnected) {
+              return this.playerModal;
+            }
+          }
+          this.loaded = false;
+        } else {
+          return this.playerModal;
+        }
+      } else {
+        this.loaded = false;
+        this.playerModal = null;
+      }
+    }
+
+    const existing = this.document.getElementById("playerModal");
+    if (existing) {
+      this.hydrate(existing);
+      this.loaded = true;
+      return this.playerModal;
+    }
+
+    const response = await fetch("components/video-modal.html");
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const html = await response.text();
+    const container = this.document.getElementById("modalContainer");
+    if (!container) {
+      throw new Error("Modal container element not found!");
+    }
+
+    const wrapper = this.document.createElement("div");
+    wrapper.innerHTML = html;
+    this.removeTrackingScripts(wrapper);
+
+    const fragment = this.document.createDocumentFragment();
+    while (wrapper.firstChild) {
+      fragment.appendChild(wrapper.firstChild);
+    }
+    container.appendChild(fragment);
+
+    const playerModal = container.querySelector("#playerModal");
+    if (!playerModal) {
+      throw new Error("Player modal root not found in markup.");
+    }
+
+    this.hydrate(playerModal);
+    this.loaded = true;
+    return this.playerModal;
+  }
+
+  hydrate(playerModal) {
+    this.playerModal = playerModal;
+    this.scrollRegion =
+      playerModal.querySelector(".player-modal__content") || playerModal;
+
+    this.modalVideo = playerModal.querySelector("#modalVideo") || null;
+    this.modalStatus = playerModal.querySelector("#modalStatus") || null;
+    this.modalProgress = playerModal.querySelector("#modalProgress") || null;
+    this.modalPeers = playerModal.querySelector("#modalPeers") || null;
+    this.modalSpeed = playerModal.querySelector("#modalSpeed") || null;
+    this.modalDownloaded =
+      playerModal.querySelector("#modalDownloaded") || null;
+    this.videoTitle = playerModal.querySelector("#videoTitle") || null;
+    this.videoDescription =
+      playerModal.querySelector("#videoDescription") || null;
+    this.videoTimestamp =
+      playerModal.querySelector("#videoTimestamp") || null;
+    this.videoEditedTimestamp =
+      playerModal.querySelector("#videoEditedTimestamp") || null;
+    this.videoViewCountEl =
+      playerModal.querySelector("#videoViewCount") || null;
+    this.creatorAvatar =
+      playerModal.querySelector("#creatorAvatar") || null;
+    this.creatorName = playerModal.querySelector("#creatorName") || null;
+    this.creatorNpub = playerModal.querySelector("#creatorNpub") || null;
+    this.copyMagnetBtn = playerModal.querySelector("#copyMagnetBtn") || null;
+    this.shareBtn = playerModal.querySelector("#shareBtn") || null;
+    this.modalZapBtn = playerModal.querySelector("#modalZapBtn") || null;
+    this.modalMoreBtn = playerModal.querySelector("#modalMoreBtn") || null;
+    this.modalMoreMenu =
+      playerModal.querySelector("#moreDropdown-modal") || null;
+
+    this.modalZapDialog =
+      playerModal.querySelector("#modalZapDialog") || null;
+    this.modalZapForm = playerModal.querySelector("#modalZapForm") || null;
+    this.modalZapAmountInput =
+      playerModal.querySelector("#modalZapAmountInput") || null;
+    this.modalZapCommentInput =
+      playerModal.querySelector("#modalZapCommentInput") || null;
+    this.modalZapSplitSummary =
+      playerModal.querySelector("#modalZapSplitSummary") || null;
+    this.modalZapStatusEl =
+      playerModal.querySelector("#modalZapStatus") || null;
+    this.modalZapReceipts =
+      playerModal.querySelector("#modalZapReceipts") || null;
+    this.modalZapSendBtn =
+      playerModal.querySelector("#modalZapSendBtn") || null;
+    this.modalZapCloseBtn =
+      playerModal.querySelector("#modalZapCloseBtn") || null;
+    this.modalZapWalletPrompt =
+      playerModal.querySelector("#modalZapWalletPrompt") || null;
+    this.modalZapWalletLink =
+      playerModal.querySelector("#modalZapWalletLink") || null;
+
+    const closeButton = playerModal.querySelector("#closeModal");
+    if (closeButton) {
+      closeButton.addEventListener("click", () => {
+        this.dispatch("modal:close", { video: this.activeVideo });
+      });
+    }
+
+    const modalNav = playerModal.querySelector("#modalNav");
+    if (modalNav && this.scrollRegion) {
+      let lastScrollY = 0;
+      this.scrollRegion.addEventListener("scroll", () => {
+        const currentScrollY = this.scrollRegion.scrollTop;
+        const shouldShowNav =
+          currentScrollY <= lastScrollY || currentScrollY < 50;
+        modalNav.style.transform = shouldShowNav
+          ? "translateY(0)"
+          : "translateY(-100%)";
+        lastScrollY = currentScrollY;
+      });
+    }
+
+    this.bindVideoEvents();
+    this.bindActionButtons();
+    this.setZapVisibility(false);
+    this.setCopyEnabled(false);
+    this.setShareEnabled(false);
+    this.resetStats();
+  }
+
+  bindVideoEvents() {
+    if (
+      !this.modalVideo ||
+      !this.window ||
+      typeof this.window.HTMLVideoElement === "undefined" ||
+      !(this.modalVideo instanceof this.window.HTMLVideoElement)
+    ) {
+      return;
+    }
+
+    const loadedHandler = () => {
+      this.dispatch("playback:loadeddata", {
+        video: this.modalVideo,
+        active: this.activeVideo,
+      });
+    };
+    const playingHandler = () => {
+      this.dispatch("playback:playing", {
+        video: this.modalVideo,
+        active: this.activeVideo,
+      });
+    };
+
+    this.modalVideo.addEventListener("loadeddata", loadedHandler);
+    this.modalVideo.addEventListener("playing", playingHandler);
+
+    this.videoEventCleanup = () => {
+      if (!this.modalVideo) {
+        return;
+      }
+      this.modalVideo.removeEventListener("loadeddata", loadedHandler);
+      this.modalVideo.removeEventListener("playing", playingHandler);
+      this.videoEventCleanup = null;
+    };
+  }
+
+  detachVideoEvents() {
+    if (typeof this.videoEventCleanup === "function") {
+      this.videoEventCleanup();
+    }
+    this.videoEventCleanup = null;
+  }
+
+  bindActionButtons() {
+    if (this.copyMagnetBtn) {
+      this.copyMagnetBtn.addEventListener("click", this.handleCopyRequest);
+    }
+    if (this.shareBtn) {
+      this.shareBtn.addEventListener("click", this.handleShareRequest);
+    }
+
+    if (this.modalZapBtn) {
+      this.modalZapBtn.addEventListener("click", (event) => {
+        event?.preventDefault?.();
+        if (this.modalZapBtn?.disabled) {
+          return;
+        }
+        this.openZapDialog();
+        this.dispatch("zap:open", { video: this.activeVideo });
+      });
+    }
+
+    if (this.modalZapCloseBtn) {
+      this.modalZapCloseBtn.addEventListener("click", (event) => {
+        event?.preventDefault?.();
+        this.closeZapDialog();
+      });
+    }
+
+    if (this.modalZapWalletLink) {
+      this.modalZapWalletLink.addEventListener("click", (event) => {
+        event?.preventDefault?.();
+        this.dispatch("zap:wallet-link", { video: this.activeVideo });
+      });
+    }
+
+    if (this.modalZapForm) {
+      this.modalZapForm.addEventListener("submit", (event) => {
+        event?.preventDefault?.();
+        if (this.modalZapSendBtn?.dataset.completed === "true") {
+          this.closeZapDialog();
+          return;
+        }
+        if (this.modalZapSendBtn?.disabled) {
+          return;
+        }
+        this.dispatch("video:zap", {
+          video: this.activeVideo,
+          amount: this.getZapAmountValue(),
+          comment: this.getZapCommentValue(),
+        });
+      });
+    }
+
+    if (this.modalZapSendBtn) {
+      this.modalZapSendBtn.addEventListener("click", (event) => {
+        if (this.modalZapSendBtn?.dataset.completed === "true") {
+          event?.preventDefault?.();
+          this.closeZapDialog();
+        }
+      });
+    }
+
+    if (this.modalZapAmountInput) {
+      const amountHandler = () => {
+        this.dispatch("zap:amount-change", {
+          video: this.activeVideo,
+          amount: this.getZapAmountValue(),
+        });
+      };
+      this.modalZapAmountInput.addEventListener("input", amountHandler);
+      this.modalZapAmountInput.addEventListener("change", amountHandler);
+    }
+
+    if (this.modalZapCommentInput) {
+      const commentHandler = () => {
+        this.dispatch("zap:comment-change", {
+          video: this.activeVideo,
+          comment: this.getZapCommentValue(),
+        });
+      };
+      this.modalZapCommentInput.addEventListener("input", commentHandler);
+    }
+
+    if (this.creatorAvatar) {
+      this.creatorAvatar.style.cursor = "pointer";
+      this.creatorAvatar.addEventListener("click", this.handleCreatorNavigation);
+    }
+    if (this.creatorName) {
+      this.creatorName.style.cursor = "pointer";
+      this.creatorName.addEventListener("click", this.handleCreatorNavigation);
+    }
+  }
+
+  handleCopyRequest(event) {
+    event?.preventDefault?.();
+    if (this.copyMagnetBtn?.disabled) {
+      return;
+    }
+    this.dispatch("video:copy-magnet", { video: this.activeVideo });
+  }
+
+  handleShareRequest(event) {
+    event?.preventDefault?.();
+    if (this.shareBtn?.disabled) {
+      return;
+    }
+    this.dispatch("video:share", { video: this.activeVideo });
+  }
+
+  handleCreatorNavigation(event) {
+    event?.preventDefault?.();
+    this.dispatch("creator:navigate", { video: this.activeVideo });
+  }
+
+  toggleBackgroundInert(enable) {
+    const ids = ["sidebar", "sidebarOverlay"];
+    for (const id of ids) {
+      const element = this.document.getElementById(id);
+      if (!element) {
+        continue;
+      }
+
+      if (enable) {
+        if (!element.hasAttribute("inert")) {
+          element.setAttribute("inert", "");
+        }
+        element.dataset.modalInert = "true";
+        element.setAttribute("aria-hidden", "true");
+        element.classList.add("is-modal-hidden");
+      } else {
+        if (element.dataset.modalInert === "true") {
+          element.removeAttribute("inert");
+          delete element.dataset.modalInert;
+        }
+        if (element.getAttribute("aria-hidden") === "true") {
+          element.removeAttribute("aria-hidden");
+        }
+        element.classList.remove("is-modal-hidden");
+      }
+    }
+  }
+
+  open(video) {
+    this.activeVideo = video || null;
+    if (!this.playerModal) {
+      return;
+    }
+
+    this.playerModal.style.display = "flex";
+    this.playerModal.classList.remove("hidden");
+    this.document.body.classList.add("modal-open");
+    this.document.documentElement.classList.add("modal-open");
+    this.toggleBackgroundInert(true);
+    if (this.scrollRegion) {
+      this.scrollRegion.scrollTop = 0;
+    }
+    this.setGlobalModalState("player", true);
+    this.applyLoadingPoster();
+  }
+
+  close() {
+    this.activeVideo = null;
+    if (this.playerModal) {
+      this.playerModal.style.display = "none";
+      this.playerModal.classList.add("hidden");
+    }
+    this.document.body.classList.remove("modal-open");
+    this.document.documentElement.classList.remove("modal-open");
+    this.toggleBackgroundInert(false);
+    this.setGlobalModalState("player", false);
+    this.forceRemovePoster("close");
+  }
+
+  applyLoadingPoster() {
+    if (!this.modalVideo) {
+      return;
+    }
+
+    this.clearPosterCleanup();
+
+    const clearPoster = () => {
+      this.forceRemovePoster("playback-event");
+    };
+
+    this.modalVideo.addEventListener("loadeddata", clearPoster);
+    this.modalVideo.addEventListener("playing", clearPoster);
+    this.modalVideo.poster = this.MODAL_LOADING_POSTER;
+
+    this.modalPosterCleanup = () => {
+      if (!this.modalVideo) {
+        return;
+      }
+      this.modalVideo.removeEventListener("loadeddata", clearPoster);
+      this.modalVideo.removeEventListener("playing", clearPoster);
+      this.modalPosterCleanup = null;
+    };
+  }
+
+  clearPosterCleanup() {
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+    }
+    this.modalPosterCleanup = null;
+  }
+
+  forceRemovePoster(reason = "manual-clear") {
+    if (!this.modalVideo) {
+      return false;
+    }
+
+    this.clearPosterCleanup();
+
+    const videoEl = this.modalVideo;
+    const hadPoster =
+      videoEl.hasAttribute("poster") ||
+      (typeof videoEl.poster === "string" && videoEl.poster !== "");
+
+    if (!hadPoster) {
+      return false;
+    }
+
+    videoEl.poster = "";
+    if (videoEl.hasAttribute("poster")) {
+      videoEl.removeAttribute("poster");
+    }
+
+    this.log(`[VideoModal] Cleared loading poster (${reason}).`);
+    return true;
+  }
+
+  resetStats() {
+    this.updatePeers("");
+    this.updateSpeed("");
+    this.updateDownloaded("");
+    this.updateProgress("0%");
+  }
+
+  updateStatus(message) {
+    if (this.modalStatus) {
+      this.modalStatus.textContent = message || "";
+    }
+  }
+
+  updatePeers(text) {
+    if (this.modalPeers) {
+      this.modalPeers.textContent = text || "";
+    }
+  }
+
+  updateSpeed(text) {
+    if (this.modalSpeed) {
+      this.modalSpeed.textContent = text || "";
+    }
+  }
+
+  updateDownloaded(text) {
+    if (this.modalDownloaded) {
+      this.modalDownloaded.textContent = text || "";
+    }
+  }
+
+  updateProgress(value) {
+    if (!this.modalProgress) {
+      return;
+    }
+    if (typeof value === "number" && Number.isFinite(value)) {
+      this.modalProgress.style.width = `${Math.max(0, value)}%`;
+      return;
+    }
+    if (typeof value === "string") {
+      this.modalProgress.style.width = value;
+      return;
+    }
+    this.modalProgress.style.width = "0%";
+  }
+
+  setCopyEnabled(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);
+  }
+
+  setShareEnabled(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);
+  }
+
+  setZapVisibility(visible) {
+    const shouldShow = !!visible;
+    if (this.modalZapBtn) {
+      this.modalZapBtn.classList.toggle("hidden", !shouldShow);
+      const disableButton = !shouldShow || this.modalZapPending;
+      this.modalZapBtn.disabled = disableButton;
+      this.modalZapBtn.setAttribute("aria-disabled", (!shouldShow).toString());
+      this.modalZapBtn.setAttribute("aria-hidden", (!shouldShow).toString());
+      this.modalZapBtn.setAttribute("aria-expanded", "false");
+      if (shouldShow) {
+        this.modalZapBtn.removeAttribute("tabindex");
+      } else {
+        this.modalZapBtn.setAttribute("tabindex", "-1");
+      }
+      if (this.modalZapPending) {
+        this.modalZapBtn.setAttribute("aria-busy", "true");
+        this.modalZapBtn.classList.add("opacity-50", "pointer-events-none");
+      } else {
+        this.modalZapBtn.removeAttribute("aria-busy");
+        this.modalZapBtn.classList.remove("opacity-50", "pointer-events-none");
+      }
+    }
+
+    if (!shouldShow) {
+      this.closeZapDialog({ silent: true });
+    }
+  }
+
+  setWalletPromptVisible(visible) {
+    if (!this.modalZapWalletPrompt) {
+      return;
+    }
+    const shouldShow = !!visible;
+    this.modalZapWalletPrompt.classList.toggle("hidden", !shouldShow);
+    this.modalZapWalletPrompt.setAttribute(
+      "aria-hidden",
+      (!shouldShow).toString()
+    );
+  }
+
+  openZapDialog() {
+    if (!this.modalZapDialog) {
+      return;
+    }
+    this.modalZapDialog.classList.remove("hidden");
+    this.modalZapDialogOpen = true;
+    this.modalZapDialog.setAttribute("aria-hidden", "false");
+    if (this.modalZapBtn) {
+      this.modalZapBtn.setAttribute("aria-expanded", "true");
+    }
+    this.focusZapAmount();
+  }
+
+  closeZapDialog({ silent = false } = {}) {
+    if (!this.modalZapDialog) {
+      return;
+    }
+    if (this.modalZapDialogOpen) {
+      this.modalZapDialog.classList.add("hidden");
+      this.modalZapDialog.setAttribute("aria-hidden", "true");
+      this.modalZapDialogOpen = false;
+      if (this.modalZapBtn) {
+        this.modalZapBtn.setAttribute("aria-expanded", "false");
+      }
+      if (!silent) {
+        this.dispatch("zap:close", { video: this.activeVideo });
+      }
+    }
+  }
+
+  isZapDialogOpen() {
+    return !!this.modalZapDialogOpen;
+  }
+
+  focusZapAmount() {
+    if (
+      this.modalZapAmountInput &&
+      typeof this.modalZapAmountInput.focus === "function"
+    ) {
+      this.modalZapAmountInput.focus();
+    }
+  }
+
+  getZapAmountValue() {
+    if (!this.modalZapAmountInput) {
+      return 0;
+    }
+    const numeric = Number(this.modalZapAmountInput.value);
+    if (!Number.isFinite(numeric)) {
+      return 0;
+    }
+    return Math.max(0, Math.round(numeric));
+  }
+
+  setZapAmount(value) {
+    if (!this.modalZapAmountInput) {
+      return;
+    }
+    if (value === null || value === undefined || value === "") {
+      this.modalZapAmountInput.value = "";
+      return;
+    }
+    const numeric = Number(value);
+    if (Number.isFinite(numeric)) {
+      this.modalZapAmountInput.value = Math.max(0, Math.round(numeric));
+      return;
+    }
+    this.modalZapAmountInput.value = value;
+  }
+
+  getZapCommentValue() {
+    if (!this.modalZapCommentInput) {
+      return "";
+    }
+    return (this.modalZapCommentInput.value || "").trim();
+  }
+
+  setZapComment(value) {
+    if (!this.modalZapCommentInput) {
+      return;
+    }
+    this.modalZapCommentInput.value = typeof value === "string" ? value : "";
+  }
+
+  resetZapForm({ amount = "", comment = "" } = {}) {
+    this.setZapAmount(amount);
+    this.setZapComment(comment);
+    this.setZapStatus("", "neutral");
+    this.clearZapReceipts();
+    this.setZapRetryPending(false);
+    this.setZapCompleted(false);
+  }
+
+  setZapSplitSummary(text) {
+    if (!this.modalZapSplitSummary) {
+      return;
+    }
+    const message = typeof text === "string" ? text : "";
+    this.modalZapSplitSummary.textContent = message || "Enter an amount to view the split.";
+  }
+
+  setZapStatus(message, tone = "neutral") {
+    if (!this.modalZapStatusEl) {
+      return;
+    }
+
+    const normalizedTone = typeof tone === "string" ? tone : "neutral";
+    const text = typeof message === "string" ? message : "";
+    this.modalZapStatusEl.textContent = text;
+    this.modalZapStatusEl.classList.remove(
+      "text-gray-300",
+      "text-gray-400",
+      "text-green-300",
+      "text-red-300",
+      "text-yellow-300"
+    );
+
+    if (!text) {
+      this.modalZapStatusEl.classList.add("text-gray-400");
+      return;
+    }
+
+    if (normalizedTone === "success") {
+      this.modalZapStatusEl.classList.add("text-green-300");
+    } else if (normalizedTone === "error") {
+      this.modalZapStatusEl.classList.add("text-red-300");
+    } else if (normalizedTone === "warning") {
+      this.modalZapStatusEl.classList.add("text-yellow-300");
+    } else {
+      this.modalZapStatusEl.classList.add("text-gray-300");
+    }
+  }
+
+  clearZapReceipts() {
+    if (!this.modalZapReceipts) {
+      return;
+    }
+    while (this.modalZapReceipts.firstChild) {
+      this.modalZapReceipts.removeChild(this.modalZapReceipts.firstChild);
+    }
+  }
+
+  renderZapReceipts(receipts = [], { partial = false } = {}) {
+    if (!this.modalZapReceipts || !this.document) {
+      return;
+    }
+
+    this.clearZapReceipts();
+
+    if (!Array.isArray(receipts) || receipts.length === 0) {
+      if (partial) {
+        const empty = this.document.createElement("li");
+        empty.className = "text-sm text-gray-300";
+        empty.textContent = "No zap receipts available.";
+        this.modalZapReceipts.appendChild(empty);
+      }
+      return;
+    }
+
+    receipts.forEach((receipt) => {
+      const li = this.document.createElement("li");
+      li.className = "rounded border border-gray-700 p-3 bg-gray-800/70";
+
+      const header = this.document.createElement("div");
+      header.className = "flex items-center justify-between gap-2 text-xs text-gray-300";
+
+      const shareType = receipt.recipientType || receipt.type || "creator";
+      const shareLabel = this.document.createElement("span");
+      const label =
+        shareType === "platform"
+          ? "Platform"
+          : shareType === "creator"
+          ? "Creator"
+          : "Lightning";
+      shareLabel.textContent = `${label} • ${Math.max(
+        0,
+        Math.round(Number(receipt.amount || 0))
+      )} sats`;
+
+      const status = this.document.createElement("span");
+      const isSuccess = receipt.status
+        ? receipt.status === "success"
+        : !receipt.error;
+      status.textContent = isSuccess ? "Success" : "Failed";
+      status.className = isSuccess ? "text-green-300" : "text-red-300";
+
+      header.appendChild(shareLabel);
+      header.appendChild(status);
+      li.appendChild(header);
+
+      const address = this.document.createElement("p");
+      address.className = "mt-1 text-xs text-gray-300 break-all";
+      if (receipt.address) {
+        address.textContent = receipt.address;
+        li.appendChild(address);
+      }
+
+      const detail = this.document.createElement("p");
+      detail.className = "mt-2 text-xs text-gray-400";
+      if (isSuccess) {
+        let detailMessage = "Invoice settled.";
+        const preimage = receipt.payment?.result?.preimage;
+        if (typeof preimage === "string" && preimage) {
+          detailMessage = `Preimage: ${preimage.slice(0, 18)}${
+            preimage.length > 18 ? "…" : ""
+          }`;
+        }
+        detail.textContent = detailMessage;
+      } else {
+        const errorMessage =
+          (receipt.error && receipt.error.message) ||
+          (typeof receipt.error === "string"
+            ? receipt.error
+            : "Payment failed.");
+        detail.textContent = errorMessage;
+      }
+      li.appendChild(detail);
+
+      this.modalZapReceipts.appendChild(li);
+    });
+  }
+
+  setZapPending(pending) {
+    const isPending = !!pending;
+    this.modalZapPending = isPending;
+
+    if (this.modalZapSendBtn) {
+      this.modalZapSendBtn.disabled = isPending;
+      this.modalZapSendBtn.setAttribute(
+        "aria-busy",
+        isPending ? "true" : "false"
+      );
+      this.modalZapSendBtn.classList.toggle("opacity-50", isPending);
+      this.modalZapSendBtn.classList.toggle("pointer-events-none", isPending);
+    }
+
+    if (this.modalZapAmountInput) {
+      this.modalZapAmountInput.disabled = isPending;
+    }
+
+    if (this.modalZapCommentInput) {
+      this.modalZapCommentInput.disabled = isPending;
+    }
+
+    if (this.modalZapCloseBtn) {
+      this.modalZapCloseBtn.disabled = isPending;
+      this.modalZapCloseBtn.classList.toggle("opacity-50", isPending);
+      this.modalZapCloseBtn.classList.toggle("pointer-events-none", isPending);
+    }
+
+    if (this.modalZapBtn) {
+      if (isPending) {
+        this.modalZapBtn.disabled = true;
+        this.modalZapBtn.setAttribute("aria-busy", "true");
+        this.modalZapBtn.classList.add("opacity-50", "pointer-events-none");
+      } else if (!this.modalZapBtn.classList.contains("hidden")) {
+        this.modalZapBtn.disabled = false;
+        this.modalZapBtn.removeAttribute("aria-busy");
+        this.modalZapBtn.classList.remove("opacity-50", "pointer-events-none");
+      } else {
+        this.modalZapBtn.removeAttribute("aria-busy");
+        this.modalZapBtn.classList.remove("opacity-50", "pointer-events-none");
+        this.modalZapBtn.disabled = true;
+      }
+    }
+  }
+
+  setZapRetryPending(pending, { summary = "" } = {}) {
+    if (!this.modalZapSendBtn) {
+      return;
+    }
+
+    if (pending) {
+      delete this.modalZapSendBtn.dataset.completed;
+      this.modalZapSendBtn.dataset.retryPending = "true";
+      if (summary) {
+        this.modalZapSendBtn.dataset.retrySummary = summary;
+      } else {
+        delete this.modalZapSendBtn.dataset.retrySummary;
+      }
+    } else {
+      delete this.modalZapSendBtn.dataset.retryPending;
+      delete this.modalZapSendBtn.dataset.retrySummary;
+    }
+
+    this.applyZapSendButtonState();
+  }
+
+  setZapCompleted(completed) {
+    if (!this.modalZapSendBtn) {
+      return;
+    }
+
+    if (completed) {
+      delete this.modalZapSendBtn.dataset.retryPending;
+      delete this.modalZapSendBtn.dataset.retrySummary;
+      this.modalZapSendBtn.dataset.completed = "true";
+    } else {
+      delete this.modalZapSendBtn.dataset.completed;
+    }
+
+    this.applyZapSendButtonState();
+  }
+
+  applyZapSendButtonState() {
+    if (!this.modalZapSendBtn) {
+      return;
+    }
+
+    if (this.modalZapSendBtn.dataset.completed === "true") {
+      this.modalZapSendBtn.textContent = "Done";
+      this.modalZapSendBtn.setAttribute("aria-label", "Close zap dialog");
+      this.modalZapSendBtn.title = "Close zap dialog";
+      return;
+    }
+
+    if (this.modalZapSendBtn.dataset.retryPending === "true") {
+      this.modalZapSendBtn.textContent = "Retry";
+      this.modalZapSendBtn.setAttribute(
+        "aria-label",
+        "Retry failed zap shares"
+      );
+      const summary = this.modalZapSendBtn.dataset.retrySummary;
+      if (summary) {
+        this.modalZapSendBtn.title = summary;
+      } else {
+        this.modalZapSendBtn.removeAttribute("title");
+      }
+      return;
+    }
+
+    this.modalZapSendBtn.textContent = "Send";
+    this.modalZapSendBtn.setAttribute("aria-label", "Send a zap");
+    this.modalZapSendBtn.removeAttribute("title");
+  }
+
+  getViewCountElement() {
+    return this.videoViewCountEl;
+  }
+
+  updateViewCountLabel(text) {
+    if (this.videoViewCountEl) {
+      this.videoViewCountEl.textContent = text || "";
+    }
+  }
+
+  setViewCountPointer(pointerKey) {
+    if (!this.videoViewCountEl) {
+      return;
+    }
+    if (pointerKey) {
+      this.videoViewCountEl.dataset.viewPointer = pointerKey;
+    } else if (this.videoViewCountEl.dataset?.viewPointer) {
+      delete this.videoViewCountEl.dataset.viewPointer;
+    }
+  }
+
+  updateMetadata({
+    title,
+    description,
+    timestamp,
+    timestamps,
+    viewCount,
+    creator,
+  } = {}) {
+    if (this.videoTitle && title !== undefined) {
+      this.videoTitle.textContent = title || "Untitled";
+    }
+    if (this.videoDescription && description !== undefined) {
+      this.videoDescription.textContent = description || "";
+    }
+    if (timestamps) {
+      this.updateTimestamps(timestamps);
+    } else if (timestamp !== undefined) {
+      this.updateTimestamps({ posted: timestamp });
+    }
+    if (this.videoViewCountEl && viewCount !== undefined) {
+      if (typeof viewCount === "string") {
+        this.updateViewCountLabel(viewCount);
+      } else {
+        this.updateViewCountLabel("");
+      }
+    }
+    if (creator !== undefined) {
+      this.updateCreator(creator);
+    }
+  }
+
+  updateTimestamps({ posted, edited } = {}) {
+    if (this.videoTimestamp) {
+      if (posted) {
+        this.videoTimestamp.textContent = posted;
+        this.videoTimestamp.classList.remove("hidden");
+      } else {
+        this.videoTimestamp.textContent = "";
+        this.videoTimestamp.classList.add("hidden");
+      }
+    }
+
+    if (this.videoEditedTimestamp) {
+      if (edited) {
+        this.videoEditedTimestamp.textContent = edited;
+        this.videoEditedTimestamp.classList.remove("hidden");
+      } else {
+        this.videoEditedTimestamp.textContent = "";
+        this.videoEditedTimestamp.classList.add("hidden");
+      }
+    }
+  }
+
+  updateCreator({ name, avatarUrl, npub } = {}) {
+    if (this.creatorName) {
+      this.creatorName.textContent = name || "Unknown";
+    }
+    if (this.creatorAvatar) {
+      this.creatorAvatar.src = avatarUrl || "assets/svg/default-profile.svg";
+      this.creatorAvatar.alt = name || "Unknown";
+    }
+    if (this.creatorNpub) {
+      this.creatorNpub.textContent = npub || "";
+    }
+  }
+
+  syncMoreMenuData({ currentVideo, canManageBlacklist }) {
+    if (!this.modalMoreMenu) {
+      return;
+    }
+
+    const buttons = this.modalMoreMenu.querySelectorAll("button[data-action]");
+    const HTMLElementCtor =
+      this.window && typeof this.window.HTMLElement !== "undefined"
+        ? this.window.HTMLElement
+        : null;
+
+    buttons.forEach((button) => {
+      if (HTMLElementCtor && !(button instanceof HTMLElementCtor)) {
+        return;
+      }
+
+      const action = button.dataset.action || "";
+      if (action === "blacklist-author") {
+        if (canManageBlacklist && currentVideo?.pubkey) {
+          button.dataset.author = currentVideo.pubkey;
+          button.classList.remove("hidden");
+          button.setAttribute("aria-hidden", "false");
+        } else {
+          delete button.dataset.author;
+          button.classList.add("hidden");
+          button.setAttribute("aria-hidden", "true");
+        }
+        return;
+      }
+
+      if (action === "repost-event") {
+        if (currentVideo?.id) {
+          button.dataset.eventId = currentVideo.id;
+        } else {
+          delete button.dataset.eventId;
+        }
+
+        if (currentVideo?.pubkey) {
+          button.dataset.author = currentVideo.pubkey;
+        } else {
+          delete button.dataset.author;
+        }
+
+        if (
+          Array.isArray(currentVideo?.pointer) &&
+          currentVideo.pointer.length >= 2
+        ) {
+          const [pointerType, pointerValue, pointerRelay] = currentVideo.pointer;
+          button.dataset.pointerType = pointerType || "";
+          button.dataset.pointerValue = pointerValue || "";
+          if (pointerRelay) {
+            button.dataset.pointerRelay = pointerRelay;
+          } else {
+            delete button.dataset.pointerRelay;
+          }
+        } else {
+          delete button.dataset.pointerType;
+          delete button.dataset.pointerValue;
+          delete button.dataset.pointerRelay;
+        }
+
+        if (Number.isFinite(currentVideo?.kind)) {
+          button.dataset.kind = String(Math.floor(currentVideo.kind));
+        } else {
+          delete button.dataset.kind;
+        }
+        return;
+      }
+
+      if (action === "mirror-video") {
+        const hasUrl =
+          typeof currentVideo?.url === "string" && currentVideo.url.trim();
+        const isPrivate = currentVideo?.isPrivate === true;
+
+        if (hasUrl && !isPrivate) {
+          button.classList.remove("hidden");
+          button.setAttribute("aria-hidden", "false");
+          button.dataset.eventId = currentVideo.id || "";
+          button.dataset.author = currentVideo.pubkey || "";
+          button.dataset.url = currentVideo.url || "";
+          button.dataset.magnet =
+            currentVideo.magnet || currentVideo.originalMagnet || "";
+          button.dataset.thumbnail = currentVideo.thumbnail || "";
+          button.dataset.description = currentVideo.description || "";
+          button.dataset.title = currentVideo.title || "";
+          button.dataset.isPrivate = "false";
+        } else {
+          delete button.dataset.eventId;
+          delete button.dataset.author;
+          delete button.dataset.url;
+          delete button.dataset.magnet;
+          delete button.dataset.thumbnail;
+          delete button.dataset.description;
+          delete button.dataset.title;
+          button.dataset.isPrivate = "true";
+          button.classList.add("hidden");
+          button.setAttribute("aria-hidden", "true");
+        }
+        return;
+      }
+
+      if (action === "ensure-presence") {
+        if (currentVideo?.id) {
+          button.dataset.eventId = currentVideo.id;
+        } else {
+          delete button.dataset.eventId;
+        }
+
+        if (currentVideo?.pubkey) {
+          button.dataset.author = currentVideo.pubkey;
+          button.dataset.pubkey = currentVideo.pubkey;
+        } else {
+          delete button.dataset.author;
+          delete button.dataset.pubkey;
+        }
+
+        if (
+          Array.isArray(currentVideo?.pointer) &&
+          currentVideo.pointer.length >= 2
+        ) {
+          const [pointerType, pointerValue, pointerRelay] = currentVideo.pointer;
+          button.dataset.pointerType = pointerType || "";
+          button.dataset.pointerValue = pointerValue || "";
+          if (pointerRelay) {
+            button.dataset.pointerRelay = pointerRelay;
+          } else {
+            delete button.dataset.pointerRelay;
+          }
+        } else {
+          delete button.dataset.pointerType;
+          delete button.dataset.pointerValue;
+          delete button.dataset.pointerRelay;
+        }
+        return;
+      }
+
+      if (action === "open-channel" || action === "block-author") {
+        if (currentVideo?.pubkey) {
+          button.dataset.author = currentVideo.pubkey;
+        } else {
+          delete button.dataset.author;
+        }
+      }
+
+      if (action === "copy-link" || action === "report") {
+        if (currentVideo?.id) {
+          button.dataset.eventId = currentVideo.id;
+        } else {
+          delete button.dataset.eventId;
+        }
+      }
+    });
+  }
+}
diff --git a/js/ui/components/nip71FormManager.js b/js/ui/components/nip71FormManager.js
new file mode 100644
index 00000000..05f6a43f
--- /dev/null
+++ b/js/ui/components/nip71FormManager.js
@@ -0,0 +1,782 @@
+// NOTE: Keep the Upload, Edit, and Revert modals in lockstep when updating NIP-71 form features.
+
+const REPEATER_KEYS = ["imeta", "text-track", "segment", "t", "p", "r"];
+
+export class Nip71FormManager {
+  constructor({ defaultFocusSelector } = {}) {
+    this.defaultFocusSelector =
+      typeof defaultFocusSelector === "string"
+        ? defaultFocusSelector
+        : "[data-nip71-field], [data-nip71-nested-field]";
+    this.sections = new Map();
+  }
+
+  registerSection(key, root) {
+    if (!key) {
+      return null;
+    }
+
+    if (!root) {
+      this.sections.delete(key);
+      return null;
+    }
+
+    const store = this.cacheSection(root);
+    this.sections.set(key, store);
+    return store;
+  }
+
+  bindSection(key) {
+    const store = this.getSection(key);
+    if (!store?.root) {
+      return;
+    }
+
+    if (store.handlers?.click) {
+      try {
+        store.root.removeEventListener("click", store.handlers.click);
+      } catch (error) {
+        console.warn("[Nip71FormManager] Failed to detach previous handler", error);
+      }
+    }
+
+    const handleClick = (event) => {
+      const addTrigger = event.target?.closest?.("[data-nip71-add]");
+      if (addTrigger && store.root.contains(addTrigger)) {
+        event.preventDefault();
+        const targetKey = addTrigger.dataset?.nip71Add || "";
+        const entry = this.addRepeaterEntry(key, targetKey);
+        if (entry) {
+          this.focusFirstField(entry, store.focusSelector);
+        }
+        return;
+      }
+
+      const nestedAddTrigger = event.target?.closest?.("[data-nip71-nested-add]");
+      if (nestedAddTrigger && store.root.contains(nestedAddTrigger)) {
+        event.preventDefault();
+        const nestedKey = nestedAddTrigger.dataset?.nip71NestedAdd || "";
+        const container = nestedAddTrigger.closest(
+          `[data-nip71-nested="${nestedKey}"]`
+        );
+        const entry = this.addNestedEntry(container, nestedKey);
+        if (entry) {
+          this.focusFirstField(
+            entry,
+            `[data-nip71-nested-field="${nestedKey}"]`
+          );
+        }
+        return;
+      }
+
+      const removeTrigger = event.target?.closest?.("[data-nip71-remove]");
+      if (removeTrigger && store.root.contains(removeTrigger)) {
+        event.preventDefault();
+        const targetKey = removeTrigger.dataset?.nip71Remove || "";
+        if (!targetKey) {
+          return;
+        }
+
+        if (targetKey === "nested") {
+          const nestedEntry = removeTrigger.closest("[data-nip71-nested-entry]");
+          this.removeNestedEntry(nestedEntry);
+          return;
+        }
+
+        this.removeRepeaterEntry(key, targetKey, removeTrigger);
+      }
+    };
+
+    store.root.addEventListener("click", handleClick);
+    store.handlers.click = handleClick;
+  }
+
+  resetSection(key) {
+    const store = this.getSection(key);
+    if (!store) {
+      return;
+    }
+
+    if (Array.isArray(store.kindInputs)) {
+      store.kindInputs.forEach((input) => {
+        if (!input) {
+          return;
+        }
+        input.checked = Boolean(input.defaultChecked);
+      });
+    }
+
+    if (store.summaryInput) {
+      store.summaryInput.value = "";
+    }
+    if (store.publishedAtInput) {
+      store.publishedAtInput.value = "";
+    }
+    if (store.altInput) {
+      store.altInput.value = "";
+    }
+    if (store.durationInput) {
+      store.durationInput.value = "";
+    }
+    if (store.contentWarningInput) {
+      store.contentWarningInput.value = "";
+    }
+
+    if (store.repeaters) {
+      Object.entries(store.repeaters).forEach(([repeaterKey, repeater]) => {
+        if (!repeater?.list) {
+          return;
+        }
+        const entries = Array.from(
+          repeater.list.querySelectorAll(
+            `[data-nip71-entry="${repeaterKey}"]`
+          )
+        );
+        entries.forEach((entry) => {
+          if (entry.dataset?.nip71Primary === "true") {
+            this.resetEntry(entry);
+          } else {
+            entry.remove();
+          }
+        });
+      });
+    }
+  }
+
+  hydrateSection(key, metadata) {
+    const store = this.getSection(key);
+    if (!store) {
+      return;
+    }
+
+    this.resetSection(key);
+
+    if (!metadata || typeof metadata !== "object") {
+      return;
+    }
+
+    if (Array.isArray(store.kindInputs)) {
+      const targetValue = metadata.kind != null ? `${metadata.kind}`.trim() : "";
+      if (targetValue) {
+        store.kindInputs.forEach((input) => {
+          if (!input) {
+            return;
+          }
+          input.checked = `${input.value}` === targetValue;
+        });
+      }
+    }
+
+    if (store.summaryInput) {
+      store.summaryInput.value = this.toInputValue(metadata.summary);
+    }
+    if (store.publishedAtInput) {
+      const value =
+        metadata.publishedAt ?? metadata.published_at ?? metadata["published-at"];
+      store.publishedAtInput.value = this.toInputValue(value);
+    }
+    if (store.altInput) {
+      store.altInput.value = this.toInputValue(metadata.alt);
+    }
+    if (store.durationInput) {
+      const duration = this.normalizeNumber(metadata.duration);
+      store.durationInput.value = duration != null ? `${duration}` : "";
+    }
+    if (store.contentWarningInput) {
+      const value =
+        metadata.contentWarning ??
+        metadata["content-warning"] ??
+        metadata.content_warning;
+      store.contentWarningInput.value = this.toInputValue(value);
+    }
+
+    this.hydrateRepeater(key, "imeta", metadata.imeta, (entry, value) => {
+      if (!value || typeof value !== "object") {
+        return;
+      }
+      this.setFieldValue(entry, "m", value.m);
+      this.setFieldValue(entry, "dim", value.dim);
+      this.setFieldValue(entry, "url", value.url);
+      this.setFieldValue(entry, "x", value.x);
+      this.hydrateNested(entry, "image", value.image);
+      this.hydrateNested(entry, "fallback", value.fallback);
+      this.hydrateNested(entry, "service", value.service);
+    });
+
+    this.hydrateRepeater(
+      key,
+      "text-track",
+      metadata.textTracks ?? metadata["text-track"] ?? metadata.text_track,
+      (entry, value) => {
+        if (!value || typeof value !== "object") {
+          return;
+        }
+        this.setFieldValue(entry, "url", value.url);
+        this.setFieldValue(entry, "type", value.type);
+        this.setFieldValue(entry, "language", value.language);
+      }
+    );
+
+    this.hydrateRepeater(key, "segment", metadata.segments, (entry, value) => {
+      if (!value || typeof value !== "object") {
+        return;
+      }
+      this.setFieldValue(entry, "start", value.start);
+      this.setFieldValue(entry, "end", value.end);
+      this.setFieldValue(entry, "title", value.title);
+      this.setFieldValue(entry, "thumbnail", value.thumbnail);
+    });
+
+    const sanitizedHashtags = this.sanitizeHashtags(
+      metadata.hashtags ?? metadata.t,
+      { dedupe: true }
+    );
+    this.hydrateRepeater(key, "t", sanitizedHashtags, (entry, value) => {
+      this.setFieldValue(entry, "value", this.renderHashtagValue(value));
+    });
+
+    this.hydrateRepeater(
+      key,
+      "p",
+      metadata.participants ?? metadata.p,
+      (entry, value) => {
+        if (!value || typeof value !== "object") {
+          return;
+        }
+        this.setFieldValue(entry, "pubkey", value.pubkey ?? value["pubkey"]);
+        this.setFieldValue(entry, "relay", value.relay ?? value["relay"]);
+      }
+    );
+
+    this.hydrateRepeater(
+      key,
+      "r",
+      metadata.references ?? metadata.r,
+      (entry, value) => {
+        this.setFieldValue(entry, "url", value);
+      }
+    );
+  }
+
+  collectSection(key) {
+    const store = this.getSection(key);
+    if (!store) {
+      return null;
+    }
+
+    const kindInput = Array.isArray(store.kindInputs)
+      ? store.kindInputs.find((input) => input?.checked)
+      : null;
+    let kind = null;
+    if (kindInput?.value != null) {
+      const parsed = Number(kindInput.value);
+      kind = Number.isFinite(parsed) ? parsed : String(kindInput.value).trim();
+    }
+
+    const summary = this.getTrimmedValue(store.summaryInput);
+    const publishedAt = this.getTrimmedValue(store.publishedAtInput);
+    const alt = this.getTrimmedValue(store.altInput);
+
+    let duration = null;
+    if (store.durationInput) {
+      const rawValue = store.durationInput.value;
+      if (rawValue !== "" && rawValue != null) {
+        const parsed = Number(rawValue);
+        if (Number.isFinite(parsed)) {
+          duration = parsed;
+        }
+      }
+    }
+
+    const contentWarning = this.getTrimmedValue(store.contentWarningInput);
+
+    const imeta = this.collectRepeaterValues(key, "imeta", (entry) => {
+      const variant = {
+        m: this.getFieldValue(entry, "m"),
+        dim: this.getFieldValue(entry, "dim"),
+        url: this.getFieldValue(entry, "url"),
+        x: this.getFieldValue(entry, "x"),
+        image: this.collectNestedValues(entry, "image"),
+        fallback: this.collectNestedValues(entry, "fallback"),
+        service: this.collectNestedValues(entry, "service"),
+      };
+
+      const hasContent =
+        variant.m ||
+        variant.dim ||
+        variant.url ||
+        variant.x ||
+        variant.image.length > 0 ||
+        variant.fallback.length > 0 ||
+        variant.service.length > 0;
+
+      return hasContent ? variant : null;
+    });
+
+    const textTracks = this.collectRepeaterValues(
+      key,
+      "text-track",
+      (entry) => {
+        const track = {
+          url: this.getFieldValue(entry, "url"),
+          type: this.getFieldValue(entry, "type"),
+          language: this.getFieldValue(entry, "language"),
+        };
+
+        const hasContent = track.url || track.type || track.language;
+        return hasContent ? track : null;
+      }
+    );
+
+    const segments = this.collectRepeaterValues(key, "segment", (entry) => {
+      const segment = {
+        start: this.getFieldValue(entry, "start"),
+        end: this.getFieldValue(entry, "end"),
+        title: this.getFieldValue(entry, "title"),
+        thumbnail: this.getFieldValue(entry, "thumbnail"),
+      };
+
+      const hasContent =
+        segment.start || segment.end || segment.title || segment.thumbnail;
+      return hasContent ? segment : null;
+    });
+
+    const hashtags = this.sanitizeHashtags(
+      this.collectRepeaterValues(key, "t", (entry) => {
+        const value = this.getFieldValue(entry, "value");
+        return value || null;
+      }),
+      { dedupe: true }
+    );
+
+    const participants = this.collectRepeaterValues(key, "p", (entry) => {
+      const participant = {
+        pubkey: this.getFieldValue(entry, "pubkey"),
+        relay: this.getFieldValue(entry, "relay"),
+      };
+
+      const hasContent = participant.pubkey || participant.relay;
+      return hasContent ? participant : null;
+    });
+
+    const references = this.collectRepeaterValues(key, "r", (entry) => {
+      const url = this.getFieldValue(entry, "url");
+      return url || null;
+    });
+
+    return {
+      kind,
+      summary,
+      publishedAt,
+      alt,
+      duration,
+      contentWarning,
+      imeta,
+      textTracks,
+      segments,
+      hashtags,
+      participants,
+      references,
+    };
+  }
+
+  collectRepeaterValues(sectionKey, repeaterKey, mapFn) {
+    const store = this.getSection(sectionKey);
+    const repeater = store?.repeaters?.[repeaterKey];
+    if (!repeater?.list) {
+      return [];
+    }
+
+    const entries = Array.from(
+      repeater.list.querySelectorAll(`[data-nip71-entry="${repeaterKey}"]`)
+    );
+
+    const results = [];
+    entries.forEach((entry) => {
+      const value = typeof mapFn === "function" ? mapFn(entry) : null;
+      if (value == null) {
+        return;
+      }
+      if (typeof value === "string") {
+        if (value.trim()) {
+          results.push(value.trim());
+        }
+        return;
+      }
+      results.push(value);
+    });
+
+    return results;
+  }
+
+  sanitizeHashtags(values, { dedupe = false } = {}) {
+    if (!Array.isArray(values)) {
+      return [];
+    }
+
+    const results = [];
+    const seen = new Set();
+
+    values.forEach((value) => {
+      const sanitized = this.sanitizeHashtagValue(value);
+      if (!sanitized) {
+        return;
+      }
+      const dedupeKey = sanitized.toLowerCase();
+      if (dedupe) {
+        if (seen.has(dedupeKey)) {
+          return;
+        }
+        seen.add(dedupeKey);
+      }
+      results.push(sanitized);
+    });
+
+    return results;
+  }
+
+  sanitizeHashtagValue(value) {
+    if (typeof value === "number") {
+      value = Number.isFinite(value) ? `${value}` : "";
+    }
+    if (typeof value !== "string") {
+      value = `${value ?? ""}`;
+    }
+
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+
+    const withoutHash = trimmed.replace(/^#+/, "").trim();
+    if (!withoutHash) {
+      return "";
+    }
+
+    return withoutHash.toLowerCase();
+  }
+
+  renderHashtagValue(value) {
+    const sanitized = this.sanitizeHashtagValue(value);
+    return sanitized ? `#${sanitized}` : "";
+  }
+
+  collectNestedValues(entry, nestedKey) {
+    if (!entry || !nestedKey) {
+      return [];
+    }
+
+    const container = entry.querySelector(
+      `[data-nip71-nested="${nestedKey}"]`
+    );
+    if (!container) {
+      return [];
+    }
+
+    const fields = Array.from(
+      container.querySelectorAll(`[data-nip71-nested-field="${nestedKey}"]`)
+    );
+
+    return fields
+      .map((field) => this.getTrimmedValue(field))
+      .filter((value) => Boolean(value));
+  }
+
+  addRepeaterEntry(sectionKey, repeaterKey) {
+    if (!repeaterKey) {
+      return null;
+    }
+
+    const store = this.getSection(sectionKey);
+    if (!store?.repeaters || !store.repeaters[repeaterKey]) {
+      return null;
+    }
+
+    const { list, template } = store.repeaters[repeaterKey];
+    if (!list || !template) {
+      return null;
+    }
+
+    const fragment = template.content
+      ? template.content.cloneNode(true)
+      : template.cloneNode(true);
+
+    const entry =
+      fragment.querySelector?.(`[data-nip71-entry="${repeaterKey}"]`) ||
+      fragment.firstElementChild ||
+      null;
+
+    list.appendChild(fragment);
+
+    return entry;
+  }
+
+  removeRepeaterEntry(sectionKey, repeaterKey, trigger) {
+    if (!repeaterKey || !trigger) {
+      return;
+    }
+
+    const store = this.getSection(sectionKey);
+    if (!store?.repeaters?.[repeaterKey]?.list) {
+      return;
+    }
+
+    const entry = trigger.closest(`[data-nip71-entry="${repeaterKey}"]`);
+    if (!entry) {
+      return;
+    }
+
+    if (entry.dataset?.nip71Primary === "true") {
+      this.resetEntry(entry);
+      return;
+    }
+
+    entry.remove();
+  }
+
+  addNestedEntry(container, nestedKey) {
+    if (!container || !nestedKey) {
+      return null;
+    }
+
+    const list = container.querySelector(
+      `[data-nip71-nested-list="${nestedKey}"]`
+    );
+    const template = container.querySelector(
+      `[data-nip71-nested-template="${nestedKey}"]`
+    );
+
+    if (!list || !template) {
+      return null;
+    }
+
+    const fragment = template.content
+      ? template.content.cloneNode(true)
+      : template.cloneNode(true);
+
+    const entry =
+      fragment.querySelector?.(`[data-nip71-nested-entry="${nestedKey}"]`) ||
+      fragment.firstElementChild ||
+      null;
+
+    list.appendChild(fragment);
+
+    return entry;
+  }
+
+  removeNestedEntry(entry) {
+    if (!entry) {
+      return;
+    }
+    entry.remove();
+  }
+
+  resetEntry(entry) {
+    if (!entry) {
+      return;
+    }
+
+    const fields = entry.querySelectorAll("[data-nip71-field]");
+    fields.forEach((field) => {
+      if (field) {
+        field.value = "";
+      }
+    });
+
+    const nestedContainers = entry.querySelectorAll("[data-nip71-nested]");
+    nestedContainers.forEach((container) => {
+      if (!container?.dataset?.nip71Nested) {
+        return;
+      }
+      const list = container.querySelector(
+        `[data-nip71-nested-list="${container.dataset.nip71Nested}"]`
+      );
+      if (list) {
+        list.innerHTML = "";
+      }
+    });
+  }
+
+  hydrateRepeater(sectionKey, repeaterKey, rawValues, applyValue) {
+    const values = Array.isArray(rawValues) ? rawValues : [];
+    if (!values.length) {
+      return;
+    }
+
+    const store = this.getSection(sectionKey);
+    const repeater = store?.repeaters?.[repeaterKey];
+    if (!repeater?.list) {
+      return;
+    }
+
+    let entries = Array.from(
+      repeater.list.querySelectorAll(`[data-nip71-entry="${repeaterKey}"]`)
+    );
+
+    values.forEach((value, index) => {
+      let entry = entries[index];
+      if (!entry) {
+        entry = this.addRepeaterEntry(sectionKey, repeaterKey);
+        if (entry) {
+          entries.push(entry);
+        }
+      }
+      if (!entry) {
+        return;
+      }
+      if (typeof applyValue === "function") {
+        applyValue(entry, value, index);
+      }
+    });
+  }
+
+  hydrateNested(entry, nestedKey, rawValues) {
+    if (!entry) {
+      return;
+    }
+
+    const values = Array.isArray(rawValues)
+      ? rawValues.filter((value) => this.toInputValue(value))
+      : [];
+    if (!values.length) {
+      return;
+    }
+
+    const container = entry.querySelector(`[data-nip71-nested="${nestedKey}"]`);
+    if (!container) {
+      return;
+    }
+
+    values.forEach((value) => {
+      const nestedEntry = this.addNestedEntry(container, nestedKey);
+      if (!nestedEntry) {
+        return;
+      }
+      const field = nestedEntry.querySelector(
+        `[data-nip71-nested-field="${nestedKey}"]`
+      );
+      if (field) {
+        field.value = this.toInputValue(value);
+      }
+    });
+  }
+
+  setFieldValue(entry, field, value) {
+    if (!entry || !field) {
+      return;
+    }
+    const element = entry.querySelector(`[data-nip71-field="${field}"]`);
+    if (!element) {
+      return;
+    }
+    element.value = this.toInputValue(value);
+  }
+
+  focusFirstField(container, selector) {
+    if (!container) {
+      return;
+    }
+    const targetSelector = selector || this.defaultFocusSelector;
+    const target = container.querySelector(targetSelector);
+    if (target?.focus) {
+      target.focus();
+    }
+  }
+
+  getFieldValue(entry, field) {
+    if (!entry || !field) {
+      return "";
+    }
+    const element = entry.querySelector(`[data-nip71-field="${field}"]`);
+    return this.getTrimmedValue(element);
+  }
+
+  getTrimmedValue(element) {
+    if (!element) {
+      return "";
+    }
+    const { value } = element;
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? String(value).trim() : "";
+    }
+    if (typeof value === "string") {
+      return value.trim();
+    }
+    return String(value ?? "").trim();
+  }
+
+  toInputValue(value) {
+    if (value == null) {
+      return "";
+    }
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? `${value}` : "";
+    }
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    return `${value ?? ""}`;
+  }
+
+  normalizeNumber(value) {
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string" && value.trim()) {
+      const parsed = Number(value.trim());
+      return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+  }
+
+  cacheSection(section) {
+    const repeaters = {};
+    REPEATER_KEYS.forEach((key) => {
+      repeaters[key] = this.cacheRepeater(section, key);
+    });
+
+    return {
+      root: section,
+      focusSelector: this.defaultFocusSelector,
+      kindInputs: Array.from(section.querySelectorAll('[data-nip71-input="kind"]')),
+      publishedAtInput:
+        section.querySelector('[data-nip71-input="published_at"]') || null,
+      altInput: section.querySelector('[data-nip71-input="alt"]') || null,
+      durationInput:
+        section.querySelector('[data-nip71-input="duration"]') || null,
+      contentWarningInput:
+        section.querySelector('[data-nip71-input="content-warning"]') || null,
+      summaryInput: section.querySelector('[data-nip71-input="summary"]') || null,
+      repeaters,
+      handlers: {},
+    };
+  }
+
+  cacheRepeater(section, key) {
+    if (!section || !key) {
+      return null;
+    }
+
+    const repeaterRoot = section.querySelector(
+      `[data-nip71-repeater="${key}"]`
+    );
+    if (!repeaterRoot) {
+      return null;
+    }
+
+    return {
+      root: repeaterRoot,
+      list: repeaterRoot.querySelector(`[data-nip71-list="${key}"]`) || null,
+      template:
+        repeaterRoot.querySelector(`[data-nip71-template="${key}"]`) || null,
+    };
+  }
+
+  getSection(key) {
+    if (!key) {
+      return null;
+    }
+    return this.sections.get(key) || null;
+  }
+}
+
diff --git a/js/ui/moreMenuController.js b/js/ui/moreMenuController.js
new file mode 100644
index 00000000..aac09fe8
--- /dev/null
+++ b/js/ui/moreMenuController.js
@@ -0,0 +1,598 @@
+export default class MoreMenuController {
+  constructor(options = {}) {
+    const {
+      document: doc = typeof document !== "undefined" ? document : null,
+      accessControl = null,
+      userBlocks = null,
+      subscriptions = null,
+      clipboard = typeof navigator !== "undefined" ? navigator.clipboard : null,
+      isDevMode = false,
+      callbacks = {},
+    } = options;
+
+    this.document = doc;
+    this.accessControl = accessControl;
+    this.userBlocks = userBlocks;
+    this.subscriptions = subscriptions;
+    this.clipboard = clipboard;
+    this.isDevMode = Boolean(isDevMode);
+
+    this.callbacks = {
+      getCurrentVideo: callbacks.getCurrentVideo || (() => null),
+      getCurrentUserNpub: callbacks.getCurrentUserNpub || (() => null),
+      getCurrentUserPubkey: callbacks.getCurrentUserPubkey || (() => null),
+      canCurrentUserManageBlacklist:
+        callbacks.canCurrentUserManageBlacklist || (() => false),
+      openCreatorChannel: callbacks.openCreatorChannel || (() => {}),
+      goToProfile: callbacks.goToProfile || (() => {}),
+      showError: callbacks.showError || (() => {}),
+      showSuccess: callbacks.showSuccess || (() => {}),
+      safeEncodeNpub: callbacks.safeEncodeNpub || (() => ""),
+      safeDecodeNpub: callbacks.safeDecodeNpub || (() => ""),
+      buildShareUrlFromEventId:
+        callbacks.buildShareUrlFromEventId || (() => ""),
+      handleRemoveHistoryAction:
+        callbacks.handleRemoveHistoryAction || (() => Promise.resolve()),
+      handleRepostAction:
+        callbacks.handleRepostAction || (() => Promise.resolve()),
+      handleMirrorAction:
+        callbacks.handleMirrorAction || (() => Promise.resolve()),
+      handleEnsurePresenceAction:
+        callbacks.handleEnsurePresenceAction || (() => Promise.resolve()),
+      loadVideos: callbacks.loadVideos || (() => Promise.resolve()),
+      onUserBlocksUpdated: callbacks.onUserBlocksUpdated || (() => {}),
+    };
+
+    this.moreMenuGlobalHandlerBound = false;
+    this.boundDocumentClick = null;
+    this.boundDocumentKeydown = null;
+
+    this.videoListView = null;
+    this.videoModal = null;
+
+    this.boundVideoListShareListener = null;
+    this.boundVideoListContextListener = null;
+    this.boundVideoListBlacklistHandler = null;
+  }
+
+  setVideoModal(videoModal) {
+    this.videoModal = videoModal || null;
+  }
+
+  attachVideoListView(view) {
+    if (view === this.videoListView) {
+      return;
+    }
+
+    this.detachVideoListView();
+
+    if (!view) {
+      return;
+    }
+
+    this.videoListView = view;
+
+    this.boundVideoListBlacklistHandler = ({ video, dataset }) => {
+      const detail = {
+        ...(dataset || {}),
+        author: dataset?.author || video?.pubkey || "",
+      };
+      this.handleMoreMenuAction("blacklist-author", detail);
+    };
+
+    if (typeof view.setBlacklistHandler === "function") {
+      view.setBlacklistHandler(this.boundVideoListBlacklistHandler);
+    }
+
+    this.boundVideoListShareListener = (event) => {
+      const detail = event?.detail || {};
+      const dataset = {
+        ...(detail.dataset || {}),
+        eventId:
+          detail.eventId ||
+          detail.dataset?.eventId ||
+          detail.video?.id ||
+          "",
+        context: detail.dataset?.context || "card",
+      };
+      const action = detail.action || "copy-link";
+      this.handleMoreMenuAction(action, dataset);
+    };
+
+    if (typeof view.addEventListener === "function") {
+      view.addEventListener("video:share", this.boundVideoListShareListener);
+    }
+
+    this.boundVideoListContextListener = (event) => {
+      const detail = event?.detail || {};
+      const dataset = {
+        ...(detail.dataset || {}),
+        eventId: detail.dataset?.eventId || detail.video?.id || "",
+      };
+      this.handleMoreMenuAction(detail.action, dataset);
+    };
+
+    if (typeof view.addEventListener === "function") {
+      view.addEventListener(
+        "video:context-action",
+        this.boundVideoListContextListener,
+      );
+    }
+  }
+
+  detachVideoListView() {
+    if (!this.videoListView) {
+      return;
+    }
+
+    if (
+      this.boundVideoListShareListener &&
+      typeof this.videoListView.removeEventListener === "function"
+    ) {
+      this.videoListView.removeEventListener(
+        "video:share",
+        this.boundVideoListShareListener,
+      );
+    }
+
+    if (
+      this.boundVideoListContextListener &&
+      typeof this.videoListView.removeEventListener === "function"
+    ) {
+      this.videoListView.removeEventListener(
+        "video:context-action",
+        this.boundVideoListContextListener,
+      );
+    }
+
+    if (typeof this.videoListView.setBlacklistHandler === "function") {
+      this.videoListView.setBlacklistHandler(null);
+    }
+
+    this.boundVideoListShareListener = null;
+    this.boundVideoListContextListener = null;
+    this.boundVideoListBlacklistHandler = null;
+    this.videoListView = null;
+  }
+
+  destroy() {
+    this.detachVideoListView();
+    this.setVideoModal(null);
+
+    if (this.document && this.boundDocumentClick) {
+      this.document.removeEventListener("click", this.boundDocumentClick);
+    }
+    if (this.document && this.boundDocumentKeydown) {
+      this.document.removeEventListener("keydown", this.boundDocumentKeydown);
+    }
+
+    this.boundDocumentClick = null;
+    this.boundDocumentKeydown = null;
+    this.moreMenuGlobalHandlerBound = false;
+  }
+
+  ensureGlobalMoreMenuHandlers() {
+    if (this.moreMenuGlobalHandlerBound) {
+      return;
+    }
+
+    if (!this.document) {
+      return;
+    }
+
+    this.moreMenuGlobalHandlerBound = true;
+
+    this.boundDocumentClick = (event) => {
+      const target = event?.target;
+      if (!target || typeof target.closest !== "function") {
+        this.closeAllMoreMenus();
+        return;
+      }
+      if (
+        target.closest("[data-more-menu-wrapper]") ||
+        target.closest("[data-more-menu]")
+      ) {
+        return;
+      }
+      this.closeAllMoreMenus();
+    };
+
+    this.boundDocumentKeydown = (event) => {
+      if (event?.key === "Escape") {
+        this.closeAllMoreMenus();
+      }
+    };
+
+    this.document.addEventListener("click", this.boundDocumentClick);
+    this.document.addEventListener("keydown", this.boundDocumentKeydown);
+  }
+
+  closeAllMoreMenus() {
+    if (
+      this.videoListView &&
+      typeof this.videoListView.closeAllMenus === "function"
+    ) {
+      this.videoListView.closeAllMenus();
+    }
+
+    if (!this.document || typeof this.document.querySelectorAll !== "function") {
+      return;
+    }
+
+    const HTMLElementCtor =
+      this.document?.defaultView?.HTMLElement ||
+      (typeof HTMLElement !== "undefined" ? HTMLElement : null);
+
+    const menus = this.document.querySelectorAll("[data-more-menu]");
+    menus.forEach((menu) => {
+      if (!HTMLElementCtor || menu instanceof HTMLElementCtor) {
+        menu.classList.add("hidden");
+      }
+    });
+
+    const buttons = this.document.querySelectorAll("[data-more-dropdown]");
+    buttons.forEach((button) => {
+      if (!HTMLElementCtor || button instanceof HTMLElementCtor) {
+        button.setAttribute("aria-expanded", "false");
+      }
+    });
+  }
+
+  attachMoreMenuHandlers(container) {
+    if (!container || typeof container.querySelectorAll !== "function") {
+      return;
+    }
+
+    if (!this.document) {
+      return;
+    }
+
+    const buttons = container.querySelectorAll("[data-more-dropdown]");
+    if (!buttons.length) {
+      return;
+    }
+
+    this.ensureGlobalMoreMenuHandlers();
+
+    const HTMLElementCtor =
+      this.document?.defaultView?.HTMLElement ||
+      (typeof HTMLElement !== "undefined" ? HTMLElement : null);
+
+    buttons.forEach((button) => {
+      if (HTMLElementCtor && !(button instanceof HTMLElementCtor)) {
+        return;
+      }
+      if (button.dataset.moreMenuToggleBound === "true") {
+        return;
+      }
+      button.dataset.moreMenuToggleBound = "true";
+      button.setAttribute("aria-expanded", "false");
+
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const key = button.getAttribute("data-more-dropdown") || "";
+        const dropdown = this.document.getElementById(`moreDropdown-${key}`);
+        if (HTMLElementCtor && !(dropdown instanceof HTMLElementCtor)) {
+          return;
+        }
+
+        const willOpen = dropdown.classList.contains("hidden");
+        this.closeAllMoreMenus();
+
+        if (willOpen) {
+          dropdown.classList.remove("hidden");
+          button.setAttribute("aria-expanded", "true");
+        }
+      });
+    });
+
+    const actionButtons = container.querySelectorAll(
+      "[data-more-menu] button[data-action]",
+    );
+    actionButtons.forEach((button) => {
+      if (HTMLElementCtor && !(button instanceof HTMLElementCtor)) {
+        return;
+      }
+      if (button.dataset.moreMenuActionBound === "true") {
+        return;
+      }
+      button.dataset.moreMenuActionBound = "true";
+
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const { action } = button.dataset;
+        this.handleMoreMenuAction(action, button.dataset);
+        this.closeAllMoreMenus();
+      });
+    });
+  }
+
+  syncModalMoreMenuData() {
+    if (!this.videoModal || typeof this.videoModal.syncMoreMenuData !== "function") {
+      return;
+    }
+
+    const currentVideo = this.callbacks.getCurrentVideo();
+    const canManageBlacklist = this.callbacks.canCurrentUserManageBlacklist();
+
+    this.videoModal.syncMoreMenuData({
+      currentVideo,
+      canManageBlacklist,
+    });
+  }
+
+  async handleMoreMenuAction(action, dataset = {}) {
+    const normalized = typeof action === "string" ? action.trim() : "";
+    const context = dataset.context || "";
+    const currentVideo = this.callbacks.getCurrentVideo();
+
+    switch (normalized) {
+      case "open-channel": {
+        if (context === "modal") {
+          this.callbacks.openCreatorChannel();
+          break;
+        }
+
+        const author =
+          dataset.author || (currentVideo ? currentVideo.pubkey : "");
+        if (author) {
+          this.callbacks.goToProfile(author);
+        } else {
+          this.callbacks.showError("No creator info available.");
+        }
+        break;
+      }
+      case "copy-link": {
+        const eventId =
+          dataset.eventId || (context === "modal" ? currentVideo?.id : "");
+        if (!eventId) {
+          this.callbacks.showError("Could not generate link.");
+          break;
+        }
+        const shareUrl = this.callbacks.buildShareUrlFromEventId(eventId);
+        if (!shareUrl) {
+          this.callbacks.showError("Could not generate link.");
+          break;
+        }
+
+        if (!this.clipboard || typeof this.clipboard.writeText !== "function") {
+          this.callbacks.showError("Failed to copy the link.");
+          break;
+        }
+
+        this.clipboard
+          .writeText(shareUrl)
+          .then(() =>
+            this.callbacks.showSuccess("Video link copied to clipboard!"),
+          )
+          .catch(() => this.callbacks.showError("Failed to copy the link."));
+        break;
+      }
+      case "remove-history": {
+        await this.callbacks.handleRemoveHistoryAction(dataset);
+        break;
+      }
+      case "repost-event": {
+        await this.callbacks.handleRepostAction(dataset);
+        break;
+      }
+      case "mirror-video": {
+        await this.callbacks.handleMirrorAction(dataset);
+        break;
+      }
+      case "ensure-presence": {
+        await this.callbacks.handleEnsurePresenceAction(dataset);
+        break;
+      }
+      case "copy-npub": {
+        const explicitNpub =
+          typeof dataset.npub === "string" && dataset.npub.trim()
+            ? dataset.npub.trim()
+            : "";
+        const authorCandidate = dataset.author || "";
+        const fallbackNpub = this.callbacks.safeEncodeNpub(authorCandidate);
+        const valueToCopy = explicitNpub || fallbackNpub;
+
+        if (!valueToCopy) {
+          this.callbacks.showError("No npub available to copy.");
+          break;
+        }
+
+        if (!this.clipboard || typeof this.clipboard.writeText !== "function") {
+          this.callbacks.showError("Failed to copy the npub.");
+          break;
+        }
+
+        try {
+          await this.clipboard.writeText(valueToCopy);
+          this.callbacks.showSuccess("Channel npub copied to clipboard!");
+        } catch (error) {
+          console.error("Failed to copy npub:", error);
+          this.callbacks.showError("Failed to copy the npub.");
+        }
+        break;
+      }
+      case "blacklist-author": {
+        const actorNpub = this.callbacks.getCurrentUserNpub();
+        if (!actorNpub) {
+          this.callbacks.showError(
+            "Please login as a moderator to manage the blacklist.",
+          );
+          break;
+        }
+
+        try {
+          await this.accessControl?.ensureReady?.();
+        } catch (error) {
+          console.warn(
+            "Failed to refresh moderation state before blacklisting:",
+            error,
+          );
+        }
+
+        if (!this.accessControl?.canEditAdminLists?.(actorNpub)) {
+          this.callbacks.showError("Only moderators can manage the blacklist.");
+          break;
+        }
+
+        let author = dataset.author || "";
+        if (!author && context === "modal" && currentVideo?.pubkey) {
+          author = currentVideo.pubkey;
+        }
+        if (!author && currentVideo?.pubkey) {
+          author = currentVideo.pubkey;
+        }
+
+        const explicitNpub =
+          typeof dataset.npub === "string" && dataset.npub.trim()
+            ? dataset.npub.trim()
+            : "";
+        const targetNpub = explicitNpub || this.callbacks.safeEncodeNpub(author);
+
+        if (!targetNpub) {
+          this.callbacks.showError("Unable to determine the creator npub.");
+          break;
+        }
+
+        try {
+          const result = await this.accessControl.addToBlacklist(
+            actorNpub,
+            targetNpub,
+          );
+
+          if (result?.ok) {
+            this.callbacks.showSuccess("Creator added to the blacklist.");
+            try {
+              await this.subscriptions?.refreshActiveFeed?.({
+                reason: "admin-blacklist-update",
+              });
+            } catch (error) {
+              if (this.isDevMode) {
+                console.warn(
+                  "[Subscriptions] Failed to refresh after blacklist update:",
+                  error,
+                );
+              }
+            }
+          } else {
+            const code = result?.error || "unknown";
+            switch (code) {
+              case "self":
+                this.callbacks.showError("You cannot blacklist yourself.");
+                break;
+              case "immutable":
+                this.callbacks.showError(
+                  "Moderators cannot blacklist the super admin or fellow moderators.",
+                );
+                break;
+              case "invalid npub":
+                this.callbacks.showError("Unable to blacklist this creator.");
+                break;
+              case "forbidden":
+                this.callbacks.showError("Only moderators can manage the blacklist.");
+                break;
+              default:
+                this.callbacks.showError(
+                  "Failed to update the blacklist. Please try again.",
+                );
+                break;
+            }
+          }
+        } catch (error) {
+          console.error("Failed to add creator to blacklist:", error);
+          this.callbacks.showError(
+            "Failed to update the blacklist. Please try again.",
+          );
+        }
+        break;
+      }
+      case "block-author": {
+        const currentUserPubkey = this.callbacks.getCurrentUserPubkey();
+        if (!currentUserPubkey) {
+          this.callbacks.showError("Please login to manage your block list.");
+          break;
+        }
+
+        const authorCandidate =
+          dataset.author || (currentVideo && currentVideo.pubkey) || "";
+
+        const trimmed =
+          typeof authorCandidate === "string" ? authorCandidate.trim() : "";
+        if (!trimmed) {
+          this.callbacks.showError("Unable to determine the creator to block.");
+          break;
+        }
+
+        let normalizedHex = "";
+        if (trimmed.startsWith("npub1")) {
+          normalizedHex = this.callbacks.safeDecodeNpub(trimmed) || "";
+        } else if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+          normalizedHex = trimmed.toLowerCase();
+        }
+
+        if (!normalizedHex) {
+          this.callbacks.showError("Unable to determine the creator to block.");
+          break;
+        }
+
+        if (normalizedHex === currentUserPubkey) {
+          this.callbacks.showError("You cannot block yourself.");
+          break;
+        }
+
+        try {
+          await this.userBlocks?.ensureLoaded?.(currentUserPubkey);
+
+          if (this.userBlocks?.isBlocked?.(normalizedHex)) {
+            this.callbacks.showSuccess("You already blocked this creator.");
+          } else {
+            await this.userBlocks?.addBlock?.(normalizedHex, currentUserPubkey);
+            this.callbacks.showSuccess(
+              "Creator blocked. You won't see their videos anymore.",
+            );
+          }
+
+          try {
+            this.callbacks.onUserBlocksUpdated();
+          } catch (error) {
+            console.warn(
+              "[MoreMenu] Failed to refresh blocked list after update:",
+              error,
+            );
+          }
+
+          await this.callbacks.loadVideos();
+          try {
+            await this.subscriptions?.refreshActiveFeed?.({
+              reason: "user-block-update",
+            });
+          } catch (error) {
+            if (this.isDevMode) {
+              console.warn(
+                "[Subscriptions] Failed to refresh after user block update:",
+                error,
+              );
+            }
+          }
+        } catch (error) {
+          console.error("Failed to update personal block list:", error);
+          const message =
+            error?.code === "nip04-missing"
+              ? "Your Nostr extension must support NIP-04 to manage private lists."
+              : "Failed to update your block list. Please try again.";
+          this.callbacks.showError(message);
+        }
+        break;
+      }
+      case "report": {
+        this.callbacks.showSuccess("Reporting coming soon.");
+        break;
+      }
+      default:
+        break;
+    }
+  }
+}
diff --git a/js/ui/profileModalController.js b/js/ui/profileModalController.js
new file mode 100644
index 00000000..0566d61d
--- /dev/null
+++ b/js/ui/profileModalController.js
@@ -0,0 +1,4129 @@
+import {
+  isDevMode,
+  ADMIN_SUPER_NPUB as CONFIG_ADMIN_SUPER_NPUB,
+  ADMIN_DM_IMAGE_URL as CONFIG_ADMIN_DM_IMAGE_URL,
+  BITVID_WEBSITE_URL as CONFIG_BITVID_WEBSITE_URL,
+  MAX_WALLET_DEFAULT_ZAP as CONFIG_MAX_WALLET_DEFAULT_ZAP,
+} from "../config.js";
+
+const noop = () => {};
+
+const FALLBACK_PROFILE_AVATAR = "assets/svg/default-profile.svg";
+const DEFAULT_ADMIN_DM_IMAGE_URL =
+  "https://beta.bitvid.network/assets/jpg/video-thumbnail-fallback.jpg";
+const DEFAULT_BITVID_WEBSITE_URL = "https://bitvid.network/";
+const NWC_URI_SCHEME = "nostr+walletconnect://";
+const DEFAULT_MAX_WALLET_DEFAULT_ZAP = 100000000;
+
+const DEFAULT_INTERNAL_NWC_SETTINGS = Object.freeze({
+  nwcUri: "",
+  defaultZap: null,
+  lastChecked: null,
+});
+
+function createInternalDefaultNwcSettings() {
+  return { ...DEFAULT_INTERNAL_NWC_SETTINGS };
+}
+
+function ensureInternalWalletSettings(internalState) {
+  if (!internalState || typeof internalState !== "object") {
+    return createInternalDefaultNwcSettings();
+  }
+
+  if (
+    !internalState.walletSettings ||
+    typeof internalState.walletSettings !== "object" ||
+    internalState.walletSettings === null
+  ) {
+    internalState.walletSettings = createInternalDefaultNwcSettings();
+  }
+
+  return internalState.walletSettings;
+}
+
+const SERVICE_CONTRACT = [
+  {
+    key: "normalizeHexPubkey",
+    type: "function",
+    description:
+      "Normalizes a provided pubkey (hex or npub) so profile lookups are stable.",
+    fallback: () => (value) => {
+      if (typeof value !== "string") {
+        return null;
+      }
+      const trimmed = value.trim();
+      if (!trimmed) {
+        return null;
+      }
+      if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+        return trimmed.toLowerCase();
+      }
+      return trimmed;
+    },
+  },
+  {
+    key: "safeEncodeNpub",
+    type: "function",
+    description:
+      "Encodes a hex pubkey as an npub for display. Expected to be resilient to bad input.",
+    fallback: () => (pubkey) => {
+      if (typeof pubkey === "string" && pubkey.trim()) {
+        return pubkey.trim();
+      }
+      return null;
+    },
+  },
+  {
+    key: "safeDecodeNpub",
+    type: "function",
+    description:
+      "Decodes an npub back to its hex form. Should return null/undefined for invalid payloads.",
+    fallback: () => () => null,
+  },
+  {
+    key: "truncateMiddle",
+    type: "function",
+    description:
+      "Utility used for shortening long identifiers in the modal without losing context.",
+    fallback: () => (value) => value,
+  },
+  {
+    key: "getProfileCacheEntry",
+    type: "function",
+    description:
+      "Returns the cached profile metadata for a normalized pubkey (if available).",
+    fallback: () => () => null,
+  },
+  {
+    key: "batchFetchProfiles",
+    type: "function",
+    description:
+      "Fetches and caches profile metadata for a set of pubkeys so the modal can hydrate avatars/names in bulk.",
+    fallback: () => async () => [],
+  },
+  {
+    key: "switchProfile",
+    type: "function",
+    description:
+      "Switches the active application profile to the provided pubkey and updates state accordingly.",
+    fallback: () => async () => ({ switched: false }),
+  },
+  {
+    key: "removeSavedProfile",
+    type: "function",
+    description:
+      "Removes a saved profile entry and persists the updated collection to storage.",
+    fallback: () => () => ({ removed: false }),
+  },
+  {
+    key: "relayManager",
+    type: "object",
+    description:
+      "Shared relay manager instance responsible for the user\'s relay configuration.",
+  },
+  {
+    key: "userBlocks",
+    type: "object",
+    description: "User blocks helper used to read and mutate the local block list.",
+  },
+  {
+    key: "nostrClient",
+    type: "object",
+    description: "Reference to the nostr client powering subscriptions and profile fetches.",
+  },
+  {
+    key: "accessControl",
+    type: "object",
+    description:
+      "Access control module required for admin list permission checks and updates.",
+  },
+  {
+    key: "getCurrentUserNpub",
+    type: "function",
+    description: "Returns the active user\'s npub so UI actions can target the correct actor.",
+    fallback: () => () => null,
+  },
+  {
+    key: "nwcSettings",
+    type: "object",
+    description:
+      "Service that manages Nostr Wallet Connect settings and interactions for the active profile.",
+    fallback: ({ internalState }) => {
+      const ensure = () => ensureInternalWalletSettings(internalState);
+      const service = {};
+
+      service.createDefaultNwcSettings = () => createInternalDefaultNwcSettings();
+
+      service.getActiveNwcSettings = () => {
+        const current = ensure();
+        return { ...current };
+      };
+
+      service.updateActiveNwcSettings = (partial = {}) => {
+        const current = ensure();
+        const next = {
+          ...current,
+          ...(partial && typeof partial === "object" ? partial : {}),
+        };
+        internalState.walletSettings = next;
+        return { ...next };
+      };
+
+      service.hydrateNwcSettingsForPubkey = async () => {
+        return service.getActiveNwcSettings();
+      };
+
+      service.handleProfileWalletPersist = async (options = {}) => {
+        const { nwcUri, defaultZap, lastChecked } =
+          options && typeof options === "object" ? options : {};
+        const partial = {};
+        if (nwcUri !== undefined) {
+          partial.nwcUri = nwcUri;
+        }
+        if (defaultZap !== undefined) {
+          partial.defaultZap = defaultZap;
+        }
+        if (lastChecked !== undefined) {
+          partial.lastChecked = lastChecked;
+        }
+        if (!Object.keys(partial).length) {
+          return service.getActiveNwcSettings();
+        }
+        return service.updateActiveNwcSettings(partial);
+      };
+
+      service.hasActiveWalletConnection = () => {
+        const settings = ensure();
+        const candidate =
+          typeof settings?.nwcUri === "string" ? settings.nwcUri.trim() : "";
+        return candidate.length > 0;
+      };
+
+      service.validateWalletUri = (uri, { requireValue = false } = {}) => {
+        const value = typeof uri === "string" ? uri.trim() : "";
+
+        if (!value) {
+          if (requireValue) {
+            return {
+              valid: false,
+              sanitized: "",
+              message: "Enter a wallet connect URI before continuing.",
+            };
+          }
+          return { valid: true, sanitized: "" };
+        }
+
+        if (!value.toLowerCase().startsWith(NWC_URI_SCHEME)) {
+          return {
+            valid: false,
+            sanitized: value,
+            message: `Wallet URI must start with ${NWC_URI_SCHEME}.`,
+          };
+        }
+
+        return { valid: true, sanitized: value };
+      };
+
+      service.ensureWallet = async ({ nwcUri } = {}) => {
+        const settings = service.getActiveNwcSettings();
+        const candidate =
+          typeof nwcUri === "string" && nwcUri.trim()
+            ? nwcUri.trim()
+            : settings.nwcUri || "";
+        const { valid, sanitized, message } = service.validateWalletUri(
+          candidate,
+          { requireValue: true },
+        );
+        if (!valid) {
+          throw new Error(message || "Invalid wallet URI provided.");
+        }
+        return { ...settings, nwcUri: sanitized };
+      };
+
+      service.clearStoredNwcSettings = async () => true;
+
+      service.onLogin = async () => service.getActiveNwcSettings();
+
+      service.onLogout = async () => service.createDefaultNwcSettings();
+
+      service.onIdentityChanged = () => {
+        internalState.walletSettings = createInternalDefaultNwcSettings();
+      };
+
+      return service;
+    },
+  },
+  {
+    key: "loadVideos",
+    type: "function",
+    description: "Triggers a video reload so UI reflects profile or permission changes.",
+    fallback: () => async () => undefined,
+  },
+  {
+    key: "onVideosShouldRefresh",
+    type: "function",
+    description:
+      "Signals that video listings should be refreshed after a profile-driven mutation.",
+    fallback: ({ services, resolved }) => async (context = {}) => {
+      const loader =
+        typeof services.loadVideos === "function"
+          ? services.loadVideos
+          : typeof resolved.loadVideos === "function"
+          ? resolved.loadVideos
+          : null;
+      if (loader) {
+        return loader(true, context);
+      }
+      return undefined;
+    },
+  },
+  {
+    key: "sendAdminListNotification",
+    type: "function",
+    description:
+      "Sends an administrative notification when moderators/whitelist/blacklist entries change.",
+    optional: true,
+  },
+  {
+    key: "describeAdminError",
+    type: "function",
+    description:
+      "Maps low-level admin errors to readable copy for surfaced error messages.",
+    fallback: () => () => "",
+  },
+  {
+    key: "describeNotificationError",
+    type: "function",
+    description:
+      "Maps notification send errors to human readable descriptions for toast/banner messaging.",
+    fallback: () => () => "",
+  },
+  {
+    key: "onAccessControlUpdated",
+    type: "function",
+    description:
+      "Callback invoked after access control mutations so the app can refresh dependent UI.",
+    fallback: () => async () => undefined,
+  },
+  {
+    key: "persistSavedProfiles",
+    type: "function",
+    description:
+      "Persists the saved profile collection (and optionally the active profile) to storage.",
+    fallback: () => () => undefined,
+  },
+];
+
+const STATE_CONTRACT = [
+  {
+    key: "getSavedProfiles",
+    type: "function",
+    description:
+      "Returns the saved profile entries that populate the account switcher UI.",
+    fallback: (internal) => () => internal.savedProfiles.slice(),
+  },
+  {
+    key: "setSavedProfiles",
+    type: "function",
+    description:
+      "Replaces the saved profile entries and returns the newly stored collection.",
+    fallback: (internal) => (profiles = []) => {
+      internal.savedProfiles = Array.isArray(profiles)
+        ? profiles.slice()
+        : [];
+      return internal.savedProfiles;
+    },
+  },
+  {
+    key: "persistSavedProfiles",
+    type: "function",
+    description:
+      "Persists the saved profile collection (and optionally the active profile) to storage.",
+    fallback: () => noop,
+  },
+  {
+    key: "getActivePubkey",
+    type: "function",
+    description: "Returns the currently active profile pubkey.",
+    fallback: (internal) => () => internal.activePubkey,
+  },
+  {
+    key: "setActivePubkey",
+    type: "function",
+    description: "Updates the active profile pubkey and returns the stored value.",
+    fallback: (internal) => (pubkey) => {
+      if (typeof pubkey === "string") {
+        const trimmed = pubkey.trim();
+        internal.activePubkey = trimmed ? trimmed : null;
+      } else {
+        internal.activePubkey = null;
+      }
+      return internal.activePubkey;
+    },
+  },
+  {
+    key: "getCachedSelection",
+    type: "function",
+    description:
+      "Reads the cached profile selection used to restore switcher focus after reloads.",
+    fallback: (internal) => () => internal.cachedSelection,
+  },
+  {
+    key: "setCachedSelection",
+    type: "function",
+    description:
+      "Caches the last selected profile identifier and returns the stored value.",
+    fallback: (internal) => (value) => {
+      if (typeof value === "string") {
+        const trimmed = value.trim();
+        internal.cachedSelection = trimmed || null;
+      } else {
+        internal.cachedSelection = null;
+      }
+      return internal.cachedSelection;
+    },
+  },
+  {
+    key: "getActivePane",
+    type: "function",
+    description: "Returns the identifier for the currently visible profile modal pane.",
+    fallback: (internal) => () => internal.activePane,
+  },
+  {
+    key: "setActivePane",
+    type: "function",
+    description: "Updates the active pane identifier and returns the stored value.",
+    fallback: (internal) => (pane) => {
+      if (typeof pane === "string") {
+        const trimmed = pane.trim().toLowerCase();
+        internal.activePane = trimmed || "account";
+      } else {
+        internal.activePane = "account";
+      }
+      return internal.activePane;
+    },
+  },
+  {
+    key: "getWalletBusy",
+    type: "function",
+    description:
+      "Indicates whether wallet-related actions are currently in-flight (disables UI as needed).",
+    fallback: (internal) => () => internal.walletBusy,
+  },
+  {
+    key: "setWalletBusy",
+    type: "function",
+    description: "Updates the wallet busy flag and returns the new boolean state.",
+    fallback: (internal) => (isBusy) => {
+      internal.walletBusy = Boolean(isBusy);
+      return internal.walletBusy;
+    },
+  },
+];
+
+function buildServicesContract(services = {}, internalState) {
+  const resolved = {};
+  const missing = [];
+
+  SERVICE_CONTRACT.forEach((definition) => {
+    const provided = services[definition.key];
+
+    if (provided == null) {
+      if (typeof definition.fallback === "function") {
+        const fallbackValue = definition.fallback({
+          services,
+          resolved,
+          internalState,
+          definition,
+        });
+
+        if (definition.type === "function" && typeof fallbackValue === "function") {
+          resolved[definition.key] = fallbackValue;
+          return;
+        }
+        if (
+          definition.type === "object" &&
+          typeof fallbackValue === "object" &&
+          fallbackValue !== null
+        ) {
+          resolved[definition.key] = fallbackValue;
+          return;
+        }
+      }
+
+      if (definition.optional) {
+        return;
+      }
+
+      missing.push(`- ${definition.key}: ${definition.description}`);
+      return;
+    }
+
+    if (definition.type === "function" && typeof provided !== "function") {
+      throw new TypeError(
+        `Expected service \"${definition.key}\" to be a function. Received ${typeof provided}.`,
+      );
+    }
+    if (
+      definition.type === "object" &&
+      (typeof provided !== "object" || provided === null)
+    ) {
+      throw new TypeError(
+        `Expected service \"${definition.key}\" to be an object. Received ${typeof provided}.`,
+      );
+    }
+
+    resolved[definition.key] = provided;
+  });
+
+  if (missing.length) {
+    throw new Error(
+      [
+        "[ProfileModalController] Missing required services for profile modal controller:",
+        ...missing,
+      ].join("\n"),
+    );
+  }
+
+  return Object.freeze({ ...services, ...resolved });
+}
+
+function buildStateContract(state = {}, internalState) {
+  const resolved = {};
+
+  STATE_CONTRACT.forEach((definition) => {
+    const value = state[definition.key];
+    if (typeof value === definition.type) {
+      resolved[definition.key] = value;
+      return;
+    }
+
+    if (definition.fallback) {
+      const fallback = definition.fallback(internalState);
+      if (typeof fallback === definition.type) {
+        resolved[definition.key] = fallback;
+        return;
+      }
+    }
+
+    throw new Error(
+      `[ProfileModalController] Missing state handler \"${definition.key}\" (${definition.description}).`,
+    );
+  });
+
+  return { ...state, ...resolved };
+}
+
+export class ProfileModalController {
+  constructor(options = {}) {
+    const {
+      modalContainer = null,
+      removeTrackingScripts = noop,
+      createWatchHistoryRenderer = null,
+      setGlobalModalState = noop,
+      showError = noop,
+      showSuccess = noop,
+      showStatus = noop,
+      callbacks = {},
+      services = {},
+      state = {},
+      constants: providedConstants = {},
+    } = options;
+
+    this.modalContainer = modalContainer;
+    this.removeTrackingScripts = removeTrackingScripts;
+    this.createWatchHistoryRenderer = createWatchHistoryRenderer;
+    this.setGlobalModalState = setGlobalModalState;
+    this.showError = showError;
+    this.showSuccess = showSuccess;
+    this.showStatus = showStatus;
+
+    const resolvedMaxWalletDefaultZap =
+      typeof providedConstants.MAX_WALLET_DEFAULT_ZAP === "number" &&
+      Number.isFinite(providedConstants.MAX_WALLET_DEFAULT_ZAP)
+        ? providedConstants.MAX_WALLET_DEFAULT_ZAP
+        : typeof CONFIG_MAX_WALLET_DEFAULT_ZAP === "number" &&
+          Number.isFinite(CONFIG_MAX_WALLET_DEFAULT_ZAP)
+        ? CONFIG_MAX_WALLET_DEFAULT_ZAP
+        : DEFAULT_MAX_WALLET_DEFAULT_ZAP;
+
+    const resolvedAdminSuperNpub = (() => {
+      const fromOptions =
+        typeof providedConstants.ADMIN_SUPER_NPUB === "string"
+          ? providedConstants.ADMIN_SUPER_NPUB.trim()
+          : "";
+      if (fromOptions) {
+        return fromOptions;
+      }
+      const fromConfig =
+        typeof CONFIG_ADMIN_SUPER_NPUB === "string"
+          ? CONFIG_ADMIN_SUPER_NPUB.trim()
+          : "";
+      return fromConfig || null;
+    })();
+
+    const resolvedAdminDmImageUrl = (() => {
+      const fromOptions =
+        typeof providedConstants.ADMIN_DM_IMAGE_URL === "string"
+          ? providedConstants.ADMIN_DM_IMAGE_URL.trim()
+          : "";
+      if (fromOptions) {
+        return fromOptions;
+      }
+      const fromConfig =
+        typeof CONFIG_ADMIN_DM_IMAGE_URL === "string"
+          ? CONFIG_ADMIN_DM_IMAGE_URL.trim()
+          : "";
+      return fromConfig || DEFAULT_ADMIN_DM_IMAGE_URL;
+    })();
+
+    const resolvedBitvidWebsiteUrl = (() => {
+      const fromOptions =
+        typeof providedConstants.BITVID_WEBSITE_URL === "string"
+          ? providedConstants.BITVID_WEBSITE_URL.trim()
+          : "";
+      if (fromOptions) {
+        return fromOptions;
+      }
+      const fromConfig =
+        typeof CONFIG_BITVID_WEBSITE_URL === "string"
+          ? CONFIG_BITVID_WEBSITE_URL.trim()
+          : "";
+      return fromConfig || DEFAULT_BITVID_WEBSITE_URL;
+    })();
+
+    this.maxWalletDefaultZap = resolvedMaxWalletDefaultZap;
+    this.adminSuperNpub = resolvedAdminSuperNpub;
+    this.adminDmImageUrl = resolvedAdminDmImageUrl;
+    this.bitvidWebsiteUrl = resolvedBitvidWebsiteUrl;
+
+    this.internalState = {
+      savedProfiles: [],
+      activePubkey: null,
+      cachedSelection: null,
+      activePane: "account",
+      walletBusy: false,
+      walletSettings: createInternalDefaultNwcSettings(),
+    };
+
+    this.services = buildServicesContract(services, this.internalState);
+    this.state = buildStateContract(state, this.internalState);
+
+    this.normalizeHexPubkey = this.services.normalizeHexPubkey;
+    this.safeEncodeNpub = this.services.safeEncodeNpub;
+    this.safeDecodeNpub = this.services.safeDecodeNpub;
+    this.truncateMiddle = this.services.truncateMiddle;
+    this.sendAdminListNotificationService =
+      typeof this.services.sendAdminListNotification === "function"
+        ? this.services.sendAdminListNotification
+        : null;
+    this.describeAdminErrorService = this.services.describeAdminError;
+    this.describeNotificationErrorService =
+      this.services.describeNotificationError;
+
+    this.callbacks = {
+      onClose: callbacks.onClose || noop,
+      onLogout: callbacks.onLogout || noop,
+      onChannelLink: callbacks.onChannelLink || noop,
+      onAddAccount: callbacks.onAddAccount || noop,
+      onSelectPane: callbacks.onSelectPane || noop,
+      onPaneShown: callbacks.onPaneShown || noop,
+      onAddRelay: callbacks.onAddRelay || noop,
+      onRestoreRelays: callbacks.onRestoreRelays || noop,
+      onAddBlocked: callbacks.onAddBlocked || noop,
+      onWalletSave: callbacks.onWalletSave || noop,
+      onWalletTest: callbacks.onWalletTest || noop,
+      onWalletDisconnect: callbacks.onWalletDisconnect || noop,
+      onAdminAddModerator: callbacks.onAdminAddModerator || noop,
+      onAdminAddWhitelist: callbacks.onAdminAddWhitelist || noop,
+      onAdminAddBlacklist: callbacks.onAdminAddBlacklist || noop,
+      onAdminRemoveModerator: callbacks.onAdminRemoveModerator || noop,
+      onAdminRemoveWhitelist: callbacks.onAdminRemoveWhitelist || noop,
+      onAdminRemoveBlacklist: callbacks.onAdminRemoveBlacklist || noop,
+      onHistoryReady: callbacks.onHistoryReady || noop,
+      onRequestSwitchProfile: callbacks.onRequestSwitchProfile || noop,
+      onRelayOperation: callbacks.onRelayOperation || noop,
+      onRelayModeToggle: callbacks.onRelayModeToggle || noop,
+      onRelayRestore: callbacks.onRelayRestore || noop,
+      onBlocklistMutation: callbacks.onBlocklistMutation || noop,
+      onWalletPersist: callbacks.onWalletPersist || noop,
+      onWalletTestRequest: callbacks.onWalletTestRequest || callbacks.onWalletTest || noop,
+      onWalletDisconnectRequest:
+        callbacks.onWalletDisconnectRequest || callbacks.onWalletDisconnect || noop,
+      onAdminMutation: callbacks.onAdminMutation || noop,
+      onAdminNotifyError: callbacks.onAdminNotifyError || noop,
+    };
+
+    this.profileModal = null;
+    this.profileAvatar = null;
+    this.profileName = null;
+    this.profileNpub = null;
+    this.switcherList = null;
+    this.profileModalAvatar = null;
+    this.profileModalName = null;
+    this.profileModalNpub = null;
+    this.profileSwitcherList = null;
+    this.globalProfileAvatar = null;
+    this.closeButton = null;
+    this.logoutButton = null;
+    this.channelLink = null;
+    this.addAccountButton = null;
+    this.navButtons = {
+      account: null,
+      relays: null,
+      wallet: null,
+      blocked: null,
+      history: null,
+      admin: null,
+    };
+    this.panes = {
+      account: null,
+      relays: null,
+      wallet: null,
+      blocked: null,
+      history: null,
+      admin: null,
+    };
+    this.relayList = null;
+    this.relayInput = null;
+    this.addRelayButton = null;
+    this.restoreRelaysButton = null;
+    this.profileRelayList = null;
+    this.profileRelayInput = null;
+    this.profileAddRelayBtn = null;
+    this.profileRestoreRelaysBtn = null;
+    this.blockList = null;
+    this.blockListEmpty = null;
+    this.blockInput = null;
+    this.addBlockedButton = null;
+    this.profileBlockedList = null;
+    this.profileBlockedEmpty = null;
+    this.profileBlockedInput = null;
+    this.profileAddBlockedBtn = null;
+    this.walletUriInput = null;
+    this.walletDefaultZapInput = null;
+    this.walletSaveButton = null;
+    this.walletTestButton = null;
+    this.walletDisconnectButton = null;
+    this.walletStatusText = null;
+    this.profileWalletStatusText = null;
+    this.moderatorSection = null;
+    this.moderatorEmpty = null;
+    this.adminModeratorList = null;
+    this.addModeratorButton = null;
+    this.moderatorInput = null;
+    this.adminModeratorsSection = null;
+    this.adminModeratorsEmpty = null;
+    this.adminAddModeratorButton = null;
+    this.adminModeratorInput = null;
+    this.whitelistSection = null;
+    this.whitelistEmpty = null;
+    this.whitelistList = null;
+    this.addWhitelistButton = null;
+    this.whitelistInput = null;
+    this.adminWhitelistSection = null;
+    this.adminWhitelistEmpty = null;
+    this.adminWhitelistList = null;
+    this.adminAddWhitelistButton = null;
+    this.adminWhitelistInput = null;
+    this.blacklistSection = null;
+    this.blacklistEmpty = null;
+    this.blacklistList = null;
+    this.addBlacklistButton = null;
+    this.blacklistInput = null;
+    this.adminBlacklistSection = null;
+    this.adminBlacklistEmpty = null;
+    this.adminBlacklistList = null;
+    this.adminAddBlacklistButton = null;
+    this.adminBlacklistInput = null;
+
+    this.profileHistoryRenderer = null;
+    this.profileHistoryRendererConfig = null;
+    this.boundProfileHistoryVisibility = null;
+    this.boundKeydown = null;
+    this.boundFocusIn = null;
+    this.focusableElements = [];
+    this.profileSwitcherSelectionPubkey = null;
+    this.previouslyFocusedElement = null;
+    this.setActivePane(this.getActivePane());
+    this.setWalletPaneBusy(this.isWalletBusy());
+    this.adminEmptyMessages = new Map();
+  }
+
+  async load() {
+    if (!(this.modalContainer instanceof HTMLElement)) {
+      throw new Error("profile modal container missing");
+    }
+
+    const response = await fetch("components/profile-modal.html");
+    if (!response.ok) {
+      throw new Error(`Failed to load profile modal HTML (${response.status})`);
+    }
+
+    const html = await response.text();
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    this.removeTrackingScripts(template.content);
+
+    const modalRoot = template.content.querySelector("#profileModal");
+    if (!(modalRoot instanceof HTMLElement)) {
+      throw new Error("profile modal markup missing expected #profileModal root");
+    }
+
+    this.modalContainer.appendChild(template.content);
+    this.profileModal = modalRoot;
+
+    this.cacheDomReferences();
+    this.registerEventListeners();
+    this.updateFocusTrap();
+    this.callbacks.onPaneShown(this.getActivePane(), { controller: this });
+
+    return true;
+  }
+
+  cacheDomReferences() {
+    this.profileModal = document.getElementById("profileModal") || null;
+    this.closeButton = document.getElementById("closeProfileModal") || null;
+    this.logoutButton = document.getElementById("profileLogoutBtn") || null;
+    this.channelLink = document.getElementById("profileChannelLink") || null;
+    this.addAccountButton =
+      document.getElementById("profileAddAccountBtn") || null;
+    this.profileAvatar = document.getElementById("profileModalAvatar") || null;
+    this.profileName = document.getElementById("profileModalName") || null;
+    this.profileNpub = document.getElementById("profileModalNpub") || null;
+    this.switcherList = document.getElementById("profileSwitcherList") || null;
+
+    this.profileModalAvatar = this.profileAvatar;
+    this.profileModalName = this.profileName;
+    this.profileModalNpub = this.profileNpub;
+    this.profileSwitcherList = this.switcherList;
+
+    const topLevelProfileAvatar =
+      document.getElementById("profileAvatar") || null;
+    if (topLevelProfileAvatar) {
+      this.globalProfileAvatar = topLevelProfileAvatar;
+    }
+
+    this.navButtons.account =
+      document.getElementById("profileNavAccount") || null;
+    this.navButtons.relays = document.getElementById("profileNavRelays") || null;
+    this.navButtons.wallet = document.getElementById("profileNavWallet") || null;
+    this.navButtons.blocked =
+      document.getElementById("profileNavBlocked") || null;
+    this.navButtons.history =
+      document.getElementById("profileNavHistory") || null;
+    this.navButtons.admin = document.getElementById("profileNavAdmin") || null;
+
+    this.panes.account = document.getElementById("profilePaneAccount") || null;
+    this.panes.relays = document.getElementById("profilePaneRelays") || null;
+    this.panes.wallet = document.getElementById("profilePaneWallet") || null;
+    this.panes.blocked = document.getElementById("profilePaneBlocked") || null;
+    this.panes.history = document.getElementById("profilePaneHistory") || null;
+    this.panes.admin = document.getElementById("profilePaneAdmin") || null;
+
+    this.relayList = document.getElementById("relayList") || null;
+    this.relayInput = document.getElementById("relayInput") || null;
+    this.addRelayButton = document.getElementById("addRelayBtn") || null;
+    this.restoreRelaysButton =
+      document.getElementById("restoreRelaysBtn") || null;
+
+    this.blockList = document.getElementById("blockedList") || null;
+    this.blockListEmpty = document.getElementById("blockedEmpty") || null;
+    this.blockInput = document.getElementById("blockedInput") || null;
+    this.addBlockedButton = document.getElementById("addBlockedBtn") || null;
+
+    this.walletUriInput = document.getElementById("profileWalletUri") || null;
+    this.walletDefaultZapInput =
+      document.getElementById("profileWalletDefaultZap") || null;
+    this.walletSaveButton =
+      document.getElementById("profileWalletSave") || null;
+    this.walletTestButton =
+      document.getElementById("profileWalletTest") || null;
+    this.walletDisconnectButton =
+      document.getElementById("profileWalletDisconnect") || null;
+    this.walletStatusText =
+      document.getElementById("profileWalletStatus") || null;
+
+    this.profileRelayList = this.relayList;
+    this.profileRelayInput = this.relayInput;
+    this.profileAddRelayBtn = this.addRelayButton;
+    this.profileRestoreRelaysBtn = this.restoreRelaysButton;
+    this.profileBlockedList = this.blockList;
+    this.profileBlockedEmpty = this.blockListEmpty;
+    this.profileBlockedInput = this.blockInput;
+    this.profileAddBlockedBtn = this.addBlockedButton;
+    this.profileWalletStatusText = this.walletStatusText;
+
+    this.moderatorSection =
+      document.getElementById("adminModeratorsSection") || null;
+    this.moderatorEmpty =
+      document.getElementById("adminModeratorsEmpty") || null;
+    this.adminModeratorList =
+      document.getElementById("adminModeratorList") || null;
+    this.addModeratorButton =
+      document.getElementById("adminAddModeratorBtn") || null;
+    this.moderatorInput =
+      document.getElementById("adminModeratorInput") || null;
+
+    // Backwards-compatible aliases retained for application code that still
+    // mirrors DOM references from the controller. These should be removed once
+    // the application stops reaching through the controller.
+    this.adminModeratorsSection = this.moderatorSection;
+    this.adminModeratorsEmpty = this.moderatorEmpty;
+    this.adminAddModeratorButton = this.addModeratorButton;
+    this.adminModeratorInput = this.moderatorInput;
+    this.whitelistSection =
+      document.getElementById("adminWhitelistSection") || null;
+    this.whitelistEmpty =
+      document.getElementById("adminWhitelistEmpty") || null;
+    this.whitelistList =
+      document.getElementById("adminWhitelistList") || null;
+    this.addWhitelistButton =
+      document.getElementById("adminAddWhitelistBtn") || null;
+    this.whitelistInput =
+      document.getElementById("adminWhitelistInput") || null;
+    this.blacklistSection =
+      document.getElementById("adminBlacklistSection") || null;
+    this.blacklistEmpty =
+      document.getElementById("adminBlacklistEmpty") || null;
+    this.blacklistList =
+      document.getElementById("adminBlacklistList") || null;
+    this.addBlacklistButton =
+      document.getElementById("adminAddBlacklistBtn") || null;
+    this.blacklistInput =
+      document.getElementById("adminBlacklistInput") || null;
+
+    this.adminWhitelistSection = this.whitelistSection;
+    this.adminWhitelistEmpty = this.whitelistEmpty;
+    this.adminWhitelistList = this.whitelistList;
+    this.adminAddWhitelistButton = this.addWhitelistButton;
+    this.adminWhitelistInput = this.whitelistInput;
+    this.adminBlacklistSection = this.blacklistSection;
+    this.adminBlacklistEmpty = this.blacklistEmpty;
+    this.adminBlacklistList = this.blacklistList;
+    this.adminAddBlacklistButton = this.addBlacklistButton;
+    this.adminBlacklistInput = this.blacklistInput;
+
+    if (this.createWatchHistoryRenderer) {
+      this.ensureProfileHistoryRenderer();
+    }
+  }
+
+  ensureProfileHistoryRenderer() {
+    if (this.profileHistoryRenderer) {
+      return this.profileHistoryRenderer;
+    }
+
+    if (!this.createWatchHistoryRenderer) {
+      return null;
+    }
+
+    const config = this.getProfileHistoryRendererConfig();
+
+    try {
+      this.profileHistoryRenderer = this.createWatchHistoryRenderer(config);
+    } catch (error) {
+      console.error(
+        "[profileModal] Failed to create watch history renderer:",
+        error,
+      );
+      this.profileHistoryRenderer = null;
+    }
+
+    return this.profileHistoryRenderer;
+  }
+
+  getProfileHistoryRendererConfig() {
+    if (this.profileHistoryRendererConfig) {
+      return this.profileHistoryRendererConfig;
+    }
+
+    this.profileHistoryRendererConfig = {
+      viewSelector: "#profilePaneHistory",
+      gridSelector: "#profileHistoryGrid",
+      loadingSelector: "#profileHistoryLoading",
+      statusSelector: "#profileHistoryStatus",
+      emptySelector: "#profileHistoryEmpty",
+      sentinelSelector: "#profileHistorySentinel",
+      scrollContainerSelector: "#profileHistoryScroll",
+      errorBannerSelector: "#profileHistoryError",
+      clearButtonSelector: "#profileHistoryClear",
+      republishButtonSelector: "#profileHistoryRepublish",
+      featureBannerSelector: "#profileHistoryFeatureBanner",
+      toastRegionSelector: "#profileHistoryToastRegion",
+      sessionWarningSelector: "#profileHistorySessionWarning",
+      metadataToggleSelector: "#profileHistoryMetadataToggle",
+      metadataThumbSelector: "#profileHistoryMetadataThumb",
+      metadataLabelSelector: "#profileHistoryMetadataLabel",
+      metadataDescriptionSelector: "#profileHistoryMetadataDescription",
+      emptyCopy: "You haven’t watched any videos yet.",
+      remove: (payload) =>
+        this.callbacks.onHistoryReady({
+          ...(typeof payload === "object" && payload ? payload : {}),
+          controller: this,
+          renderer: this.profileHistoryRenderer,
+        }),
+    };
+
+    return this.profileHistoryRendererConfig;
+  }
+
+  registerEventListeners() {
+    if (this.closeButton instanceof HTMLElement) {
+      this.closeButton.addEventListener("click", () => {
+        this.hide();
+      });
+    }
+
+    if (this.logoutButton instanceof HTMLElement) {
+      this.logoutButton.addEventListener("click", async () => {
+        try {
+          await this.callbacks.onLogout(this);
+        } catch (error) {
+          this.showError("Failed to logout. Please try again.");
+        }
+        this.hide();
+      });
+    }
+
+    if (this.channelLink instanceof HTMLElement) {
+      this.channelLink.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.callbacks.onChannelLink(this.channelLink, this);
+      });
+    }
+
+    if (this.addAccountButton instanceof HTMLElement) {
+      this.addAccountButton.addEventListener("click", () => {
+        this.callbacks.onAddAccount(this);
+      });
+    }
+
+    Object.entries(this.navButtons).forEach(([name, button]) => {
+      if (button instanceof HTMLElement) {
+        button.addEventListener("click", () => {
+          this.selectPane(name);
+        });
+      }
+    });
+
+    if (this.addRelayButton instanceof HTMLElement) {
+      this.addRelayButton.addEventListener("click", () => {
+        void this.handleAddRelay();
+      });
+    }
+
+    if (this.restoreRelaysButton instanceof HTMLElement) {
+      this.restoreRelaysButton.addEventListener("click", () => {
+        void this.handleRestoreRelays();
+      });
+    }
+
+    if (this.addBlockedButton instanceof HTMLElement) {
+      this.addBlockedButton.addEventListener("click", () => {
+        void this.handleAddBlockedCreator();
+      });
+    }
+
+    if (this.blockInput instanceof HTMLElement) {
+      this.blockInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAddBlockedCreator();
+        }
+      });
+    }
+
+    if (this.walletUriInput instanceof HTMLElement) {
+      this.walletUriInput.addEventListener("input", () => {
+        this.applyWalletControlState();
+      });
+    }
+
+    if (this.walletDefaultZapInput instanceof HTMLElement) {
+      this.walletDefaultZapInput.addEventListener("input", () => {
+        this.applyWalletControlState();
+      });
+    }
+
+    if (this.walletSaveButton instanceof HTMLElement) {
+      this.walletSaveButton.addEventListener("click", () => {
+        void this.handleWalletSave();
+      });
+    }
+
+    if (this.walletTestButton instanceof HTMLElement) {
+      this.walletTestButton.addEventListener("click", () => {
+        void this.handleWalletTest();
+      });
+    }
+
+    if (this.walletDisconnectButton instanceof HTMLElement) {
+      this.walletDisconnectButton.addEventListener("click", () => {
+        void this.handleWalletDisconnect();
+      });
+    }
+
+    if (this.addModeratorButton instanceof HTMLElement) {
+      this.addModeratorButton.addEventListener("click", () => {
+        void this.handleAddModerator();
+      });
+    }
+
+    if (this.moderatorInput instanceof HTMLElement) {
+      this.moderatorInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAddModerator();
+        }
+      });
+    }
+
+    if (this.addWhitelistButton instanceof HTMLElement) {
+      this.addWhitelistButton.addEventListener("click", () => {
+        void this.handleAdminListMutation("whitelist", "add");
+      });
+    }
+
+    if (this.whitelistInput instanceof HTMLElement) {
+      this.whitelistInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAdminListMutation("whitelist", "add");
+        }
+      });
+    }
+
+    if (this.addBlacklistButton instanceof HTMLElement) {
+      this.addBlacklistButton.addEventListener("click", () => {
+        void this.handleAdminListMutation("blacklist", "add");
+      });
+    }
+
+    if (this.blacklistInput instanceof HTMLElement) {
+      this.blacklistInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAdminListMutation("blacklist", "add");
+        }
+      });
+    }
+  }
+
+  renderSavedProfiles() {
+    const normalizedActive = this.normalizeHexPubkey(this.getActivePubkey());
+    const entriesNeedingFetch = new Set();
+    const savedProfiles = this.getSavedProfiles();
+
+    const resolveMeta = (entry) => {
+      if (!entry || typeof entry !== "object") {
+        return {
+          name: "",
+          picture: FALLBACK_PROFILE_AVATAR,
+          npub: null,
+        };
+      }
+
+      const normalizedPubkey = this.normalizeHexPubkey(entry.pubkey);
+      let cacheEntry = null;
+      if (normalizedPubkey) {
+        cacheEntry = this.services.getProfileCacheEntry(normalizedPubkey);
+      }
+      const cachedProfile = cacheEntry?.profile || {};
+
+      const hasStoredName =
+        typeof entry.name === "string" && entry.name.trim().length > 0;
+      const hasStoredPicture =
+        typeof entry.picture === "string" && entry.picture.trim().length > 0;
+
+      if (
+        !cacheEntry &&
+        normalizedPubkey &&
+        (!hasStoredName || !hasStoredPicture)
+      ) {
+        entriesNeedingFetch.add(normalizedPubkey);
+      }
+
+      let resolvedNpub =
+        typeof entry.npub === "string" && entry.npub.trim()
+          ? entry.npub.trim()
+          : null;
+      if (!resolvedNpub && entry.pubkey) {
+        resolvedNpub = this.safeEncodeNpub(entry.pubkey);
+      }
+
+      return {
+        name: cachedProfile.name || entry.name || "",
+        picture: cachedProfile.picture || entry.picture || FALLBACK_PROFILE_AVATAR,
+        npub: resolvedNpub,
+      };
+    };
+
+    const savedEntries = Array.isArray(savedProfiles)
+      ? savedProfiles.filter((entry) => entry && entry.pubkey)
+      : [];
+
+    let activeEntry = null;
+    if (normalizedActive) {
+      activeEntry = savedEntries.find(
+        (entry) => this.normalizeHexPubkey(entry.pubkey) === normalizedActive,
+      );
+    }
+    if (!activeEntry && savedEntries.length) {
+      activeEntry = savedEntries[0];
+    }
+
+    const activeMeta = activeEntry ? resolveMeta(activeEntry) : null;
+    const hasActiveProfile = Boolean(activeEntry && activeMeta);
+    const truncate = this.truncateMiddle || ((value) => value);
+    const activeNameFallback = activeMeta?.npub
+      ? truncate(activeMeta.npub, 32)
+      : "Saved profile";
+    const activeDisplayName = hasActiveProfile
+      ? activeMeta?.name?.trim() || activeNameFallback
+      : "No active profile";
+    const activeAvatarSrc = hasActiveProfile
+      ? activeMeta?.picture || FALLBACK_PROFILE_AVATAR
+      : FALLBACK_PROFILE_AVATAR;
+
+    if (this.profileName) {
+      this.profileName.textContent = activeDisplayName;
+    }
+
+    if (this.profileAvatar instanceof HTMLImageElement) {
+      if (this.profileAvatar.src !== activeAvatarSrc) {
+        this.profileAvatar.src = activeAvatarSrc;
+      }
+      this.profileAvatar.alt = hasActiveProfile
+        ? `${activeDisplayName} avatar`
+        : "Default profile avatar";
+    } else if (this.profileAvatar instanceof HTMLElement) {
+      this.profileAvatar.setAttribute("data-avatar-src", activeAvatarSrc);
+    }
+
+    if (this.profileNpub) {
+      if (hasActiveProfile && activeMeta?.npub) {
+        this.profileNpub.textContent = truncate(activeMeta.npub, 48);
+      } else if (hasActiveProfile) {
+        this.profileNpub.textContent = "npub unavailable";
+      } else {
+        this.profileNpub.textContent = "Link a profile to get started";
+      }
+    }
+
+    if (this.channelLink instanceof HTMLElement) {
+      if (hasActiveProfile && activeMeta?.npub) {
+        const encodedNpub = activeMeta.npub;
+        this.channelLink.href = `#view=channel-profile&npub=${encodeURIComponent(
+          encodedNpub,
+        )}`;
+        this.channelLink.dataset.targetNpub = encodedNpub;
+        this.channelLink.classList.remove("hidden");
+        this.channelLink.setAttribute("aria-hidden", "false");
+      } else {
+        this.channelLink.classList.add("hidden");
+        this.channelLink.removeAttribute("href");
+        if (this.channelLink.dataset) {
+          delete this.channelLink.dataset.targetNpub;
+        }
+        this.channelLink.setAttribute("aria-hidden", "true");
+      }
+    }
+
+    if (this.globalProfileAvatar instanceof HTMLImageElement) {
+      if (this.globalProfileAvatar.src !== activeAvatarSrc) {
+        this.globalProfileAvatar.src = activeAvatarSrc;
+      }
+      this.globalProfileAvatar.alt = hasActiveProfile
+        ? `${activeDisplayName} avatar`
+        : this.globalProfileAvatar.alt || "Profile avatar";
+    }
+
+    const listEl = this.switcherList;
+    if (listEl instanceof HTMLElement) {
+      listEl.innerHTML = "";
+      let normalizedSelection = this.normalizeHexPubkey(
+        this.profileSwitcherSelectionPubkey,
+      );
+      if (normalizedSelection && normalizedSelection === normalizedActive) {
+        normalizedSelection = null;
+        this.profileSwitcherSelectionPubkey = null;
+      }
+
+      const entriesToRender = savedEntries.filter((entry) => {
+        const normalized = this.normalizeHexPubkey(entry.pubkey);
+        return normalized && normalized !== normalizedActive;
+      });
+
+      if (!entriesToRender.length) {
+        listEl.setAttribute("data-profile-switcher-empty", "true");
+        const helper = document.createElement("p");
+        helper.className = "profile-switcher__empty text-sm text-gray-400";
+        helper.textContent = "No other profiles saved yet.";
+        helper.setAttribute("role", "note");
+        listEl.appendChild(helper);
+      } else {
+        listEl.removeAttribute("data-profile-switcher-empty");
+
+        entriesToRender.forEach((entry) => {
+          const meta = resolveMeta(entry);
+          const button = document.createElement("button");
+          button.type = "button";
+          button.classList.add("profile-card");
+          button.dataset.pubkey = entry.pubkey;
+          if (meta.npub) {
+            button.dataset.npub = meta.npub;
+          }
+          if (entry.authType) {
+            button.dataset.authType = entry.authType;
+          }
+
+          const normalizedPubkey = this.normalizeHexPubkey(entry.pubkey);
+          const isSelected =
+            normalizedSelection && normalizedPubkey === normalizedSelection;
+          if (isSelected) {
+            button.classList.add("profile-card--active");
+            button.setAttribute("aria-pressed", "true");
+          } else {
+            button.setAttribute("aria-pressed", "false");
+          }
+
+          const avatarSpan = document.createElement("span");
+          avatarSpan.className = "profile-card__avatar";
+          const avatarImg = document.createElement("img");
+          avatarImg.src = meta.picture || FALLBACK_PROFILE_AVATAR;
+          const cardDisplayName =
+            meta.name?.trim() ||
+            (meta.npub ? truncate(meta.npub, 32) : "Saved profile");
+          avatarImg.alt = `${cardDisplayName} avatar`;
+          avatarSpan.appendChild(avatarImg);
+
+          const metaSpan = document.createElement("span");
+          metaSpan.className = "profile-card__meta";
+
+          const topLine = document.createElement("span");
+          topLine.className = "profile-card__topline";
+
+          const label = document.createElement("span");
+          label.className = "profile-card__label";
+          label.textContent =
+            entry.authType === "nsec" ? "Direct key" : "Saved profile";
+
+          const action = document.createElement("span");
+          action.className = "profile-card__action";
+          action.setAttribute("aria-hidden", "true");
+          action.textContent = isSelected ? "Selected" : "Switch";
+
+          topLine.append(label, action);
+
+          const nameSpan = document.createElement("span");
+          nameSpan.className = "profile-card__name";
+          nameSpan.textContent = cardDisplayName;
+
+          const npubSpan = document.createElement("span");
+          npubSpan.className = "profile-card__npub";
+          npubSpan.textContent = meta.npub
+            ? truncate(meta.npub, 48)
+            : "npub unavailable";
+
+          metaSpan.append(topLine, nameSpan, npubSpan);
+          button.append(avatarSpan, metaSpan);
+
+          const ariaLabel = isSelected
+            ? `${cardDisplayName} selected`
+            : `Switch to ${cardDisplayName}`;
+          button.setAttribute("aria-label", ariaLabel);
+
+          const activateProfile = async (event) => {
+            if (event) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+
+            if (button.dataset.loading === "true") {
+              return;
+            }
+
+            button.dataset.loading = "true";
+            button.setAttribute("aria-busy", "true");
+
+          try {
+            await this.switchProfile(entry.pubkey, { entry });
+          } catch (error) {
+            console.error("Failed to switch profile:", error);
+          } finally {
+            button.dataset.loading = "false";
+            button.setAttribute("aria-busy", "false");
+            }
+          };
+
+          button.addEventListener("click", activateProfile);
+          button.addEventListener("keydown", (event) => {
+            const key = event?.key;
+            if (key === "Enter" || key === " " || key === "Spacebar") {
+              activateProfile(event);
+            }
+          });
+
+          listEl.appendChild(button);
+        });
+      }
+
+      this.updateFocusTrap();
+    } else {
+      this.updateFocusTrap();
+    }
+
+    if (entriesNeedingFetch.size) {
+      this.services.batchFetchProfiles(entriesNeedingFetch);
+    }
+  }
+
+  selectPane(name = "account") {
+    const normalized = typeof name === "string" ? name.toLowerCase() : "account";
+    const previous = this.getActivePane();
+    const availableKeys = Object.keys(this.panes).filter((key) => {
+      const pane = this.panes[key];
+      if (!(pane instanceof HTMLElement)) {
+        return false;
+      }
+      const button = this.navButtons[key];
+      if (button instanceof HTMLElement && button.classList.contains("hidden")) {
+        return false;
+      }
+      return true;
+    });
+
+    const fallbackTarget = availableKeys.includes("account")
+      ? "account"
+      : availableKeys[0] || "account";
+    const target = availableKeys.includes(normalized)
+      ? normalized
+      : fallbackTarget;
+
+    if (previous === "history" && target !== "history") {
+      try {
+        this.profileHistoryRenderer?.pause();
+      } catch (error) {
+        console.warn("[profileModal] Failed to pause history renderer:", error);
+      }
+    }
+
+    Object.entries(this.panes).forEach(([key, pane]) => {
+      if (!(pane instanceof HTMLElement)) {
+        return;
+      }
+      const isActive = key === target;
+      pane.classList.toggle("hidden", !isActive);
+      pane.setAttribute("aria-hidden", (!isActive).toString());
+    });
+
+    Object.entries(this.navButtons).forEach(([key, button]) => {
+      if (!(button instanceof HTMLElement)) {
+        return;
+      }
+      const isActive = key === target;
+      button.setAttribute("aria-selected", isActive ? "true" : "false");
+      button.classList.toggle("bg-gray-800", isActive);
+      button.classList.toggle("text-white", isActive);
+      button.classList.toggle("text-gray-400", !isActive);
+    });
+
+    this.setActivePane(target);
+    this.updateFocusTrap();
+
+    if (target === "history") {
+      void this.populateProfileWatchHistory();
+    } else if (target === "wallet") {
+      this.refreshWalletPaneState();
+    } else if (target === "blocked") {
+      this.populateBlockedList();
+    }
+
+    this.callbacks.onSelectPane(target, { controller: this });
+    this.callbacks.onPaneShown(target, { controller: this });
+  }
+
+  populateProfileRelays(relayEntries = null) {
+    if (!this.relayList) {
+      return;
+    }
+
+    const sourceEntries = Array.isArray(relayEntries)
+      ? relayEntries
+      : this.services.relayManager.getEntries();
+
+    const relays = sourceEntries
+      .map((entry) => {
+        if (typeof entry === "string") {
+          const trimmed = entry.trim();
+          return trimmed ? { url: trimmed, mode: "both" } : null;
+        }
+        if (entry && typeof entry === "object") {
+          const url = typeof entry.url === "string" ? entry.url.trim() : "";
+          if (!url) {
+            return null;
+          }
+          const mode = typeof entry.mode === "string" ? entry.mode : "both";
+          const normalizedMode =
+            mode === "read" || mode === "write" ? mode : "both";
+          return {
+            url,
+            mode: normalizedMode,
+            read: entry.read !== false,
+            write: entry.write !== false,
+          };
+        }
+        return null;
+      })
+      .filter((entry) => entry && typeof entry.url === "string");
+
+    this.relayList.innerHTML = "";
+
+    if (!relays.length) {
+      const emptyState = document.createElement("li");
+      emptyState.className =
+        "rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400";
+      emptyState.textContent = "No relays configured.";
+      this.relayList.appendChild(emptyState);
+      return;
+    }
+
+    relays.forEach((entry) => {
+      const item = document.createElement("li");
+      item.className =
+        "flex items-start justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
+
+      const info = document.createElement("div");
+      info.className = "flex-1 min-w-0";
+
+      const urlEl = document.createElement("p");
+      urlEl.className = "text-sm font-medium text-gray-100 break-all";
+      urlEl.textContent = entry.url;
+
+      const statusEl = document.createElement("p");
+      statusEl.className = "mt-1 text-xs text-gray-400";
+      let modeLabel = "Read & write";
+      if (entry.mode === "read") {
+        modeLabel = "Read only";
+      } else if (entry.mode === "write") {
+        modeLabel = "Write only";
+      }
+      statusEl.textContent = modeLabel;
+
+      info.appendChild(urlEl);
+      info.appendChild(statusEl);
+
+      const actions = document.createElement("div");
+      actions.className = "flex items-center gap-2";
+
+      const editBtn = document.createElement("button");
+      editBtn.type = "button";
+      editBtn.className =
+        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+      editBtn.textContent = "Change mode";
+      editBtn.title = "Cycle between read-only, write-only, or read/write modes.";
+      editBtn.addEventListener("click", () => {
+        void this.handleRelayModeToggle(entry.url);
+      });
+
+      const removeBtn = document.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.className =
+        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+      removeBtn.textContent = "Remove";
+      removeBtn.addEventListener("click", () => {
+        void this.handleRemoveRelay(entry.url);
+      });
+
+      actions.appendChild(editBtn);
+      actions.appendChild(removeBtn);
+
+      item.appendChild(info);
+      item.appendChild(actions);
+
+      this.relayList.appendChild(item);
+    });
+  }
+
+  async handleRelayOperation(meta = {}, {
+    successMessage = "Relay preferences updated.",
+    skipPublishIfUnchanged = true,
+    unchangedMessage = null,
+  } = {}) {
+    const operationContext = {
+      ...meta,
+      ok: false,
+      changed: false,
+      reason: null,
+      error: null,
+      publishResult: null,
+      operationResult: null,
+    };
+
+    const activePubkey = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!activePubkey) {
+      this.showError("Please login to manage your relays.");
+      operationContext.reason = "no-active-pubkey";
+      return operationContext;
+    }
+
+    let result;
+    try {
+      result = await this.runRelayOperation({
+        ...meta,
+        activePubkey,
+        skipPublishIfUnchanged,
+      });
+    } catch (error) {
+      const message =
+        error && typeof error.message === "string" && error.message.trim()
+          ? error.message.trim()
+          : "Failed to update relay preferences.";
+      operationContext.reason = error?.code || "callback-error";
+      operationContext.error = error;
+      this.showError(message);
+      return operationContext;
+    }
+
+    if (result && typeof result === "object") {
+      operationContext.ok = Boolean(result.ok);
+      operationContext.changed = Boolean(result.changed);
+      operationContext.reason =
+        typeof result.reason === "string" ? result.reason : operationContext.reason;
+      operationContext.error = result.error ?? operationContext.error;
+      operationContext.publishResult =
+        result.publishResult ?? operationContext.publishResult;
+      operationContext.operationResult =
+        result.operationResult ?? operationContext.operationResult;
+    }
+
+    if (!operationContext.changed && skipPublishIfUnchanged) {
+      const reason = operationContext.reason || "unchanged";
+      operationContext.reason = reason;
+      if (reason === "duplicate") {
+        this.showSuccess("Relay is already configured.");
+      } else if (typeof unchangedMessage === "string" && unchangedMessage) {
+        this.showSuccess(unchangedMessage);
+      }
+      this.populateProfileRelays();
+      return operationContext;
+    }
+
+    this.populateProfileRelays();
+
+    if (operationContext.ok) {
+      if (successMessage) {
+        this.showSuccess(successMessage);
+      }
+      return operationContext;
+    }
+
+    const message =
+      operationContext.error &&
+      typeof operationContext.error.message === "string" &&
+      operationContext.error.message.trim()
+        ? operationContext.error.message.trim()
+        : "Failed to publish relay configuration. Please try again.";
+
+    if (operationContext.reason !== "no-active-pubkey") {
+      this.showError(message);
+    }
+
+    return operationContext;
+  }
+
+  async handleAddRelay() {
+    const rawValue =
+      typeof this.relayInput?.value === "string"
+        ? this.relayInput.value
+        : "";
+    const trimmed = rawValue.trim();
+
+    const context = {
+      input: this.relayInput,
+      rawValue,
+      url: trimmed,
+      result: null,
+      success: false,
+      reason: null,
+    };
+
+    if (!trimmed) {
+      this.showError("Enter a relay URL to add.");
+      context.reason = "empty";
+      this.callbacks.onAddRelay(context, this);
+      return context;
+    }
+
+    const operationResult = await this.handleRelayOperation(
+      { action: "add", url: trimmed },
+      {
+        successMessage: "Relay saved.",
+        unchangedMessage: "Relay is already configured.",
+      },
+    );
+
+    if (this.relayInput) {
+      this.relayInput.value = "";
+    }
+
+    context.result = operationResult;
+    context.success = !!operationResult?.ok;
+    context.reason = operationResult?.reason || null;
+
+    this.callbacks.onAddRelay(context, this);
+    return context;
+  }
+
+  async handleRestoreRelays() {
+    const context = {
+      confirmed: false,
+      result: null,
+      success: false,
+      reason: null,
+    };
+
+    const confirmed = window.confirm("Restore the recommended relay defaults?");
+    context.confirmed = confirmed;
+    if (!confirmed) {
+      context.reason = "cancelled";
+      this.callbacks.onRestoreRelays(context, this);
+      return context;
+    }
+
+    const operationResult = await this.handleRelayOperation(
+      { action: "restore" },
+      {
+        successMessage: "Relay defaults restored.",
+        unchangedMessage: "Relay defaults are already in use.",
+      },
+    );
+
+    context.result = operationResult;
+    context.success = !!operationResult?.ok;
+    context.reason = operationResult?.reason || null;
+
+    this.callbacks.onRestoreRelays(context, this);
+    this.callbacks.onRelayRestore({
+      controller: this,
+      context,
+    });
+    return context;
+  }
+
+  async handleRelayModeToggle(url) {
+    if (!url) {
+      return;
+    }
+    const context = await this.handleRelayOperation(
+      { action: "mode-toggle", url },
+      { successMessage: "Relay mode updated." },
+    );
+    this.callbacks.onRelayModeToggle({
+      controller: this,
+      url,
+      context,
+    });
+  }
+
+  async handleRemoveRelay(url) {
+    if (!url) {
+      return;
+    }
+
+    const confirmed = window.confirm(
+      `Remove ${url} from your relay list?`,
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    await this.handleRelayOperation(
+      { action: "remove", url },
+      { successMessage: "Relay removed." },
+    );
+  }
+
+  populateBlockedList(blocked = null) {
+    if (!this.blockList || !this.blockListEmpty) {
+      return;
+    }
+
+    const sourceEntries =
+      Array.isArray(blocked) && blocked.length
+        ? blocked
+        : this.services.userBlocks.getBlockedPubkeys();
+
+    const normalizedEntries = [];
+    const pushEntry = (hex, label) => {
+      if (!hex || !label) {
+        return;
+      }
+      normalizedEntries.push({ hex, label });
+    };
+
+    sourceEntries.forEach((entry) => {
+      if (typeof entry === "string") {
+        const trimmed = entry.trim();
+        if (!trimmed) {
+          return;
+        }
+
+        if (trimmed.startsWith("npub1")) {
+          const decoded = this.safeDecodeNpub(trimmed);
+          if (!decoded) {
+            return;
+          }
+          const label = this.safeEncodeNpub(decoded) || trimmed;
+          pushEntry(decoded, label);
+          return;
+        }
+
+        if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+          const hex = trimmed.toLowerCase();
+          const label = this.safeEncodeNpub(hex) || hex;
+          pushEntry(hex, label);
+        }
+        return;
+      }
+
+      if (entry && typeof entry === "object") {
+        const candidateNpub =
+          typeof entry.npub === "string" ? entry.npub.trim() : "";
+        const candidateHex =
+          typeof entry.pubkey === "string" ? entry.pubkey.trim() : "";
+
+        if (candidateHex && /^[0-9a-f]{64}$/i.test(candidateHex)) {
+          const normalizedHex = candidateHex.toLowerCase();
+          const label =
+            candidateNpub && candidateNpub.startsWith("npub1")
+              ? candidateNpub
+              : this.safeEncodeNpub(normalizedHex) || normalizedHex;
+          pushEntry(normalizedHex, label);
+          return;
+        }
+
+        if (candidateNpub && candidateNpub.startsWith("npub1")) {
+          const decoded = this.safeDecodeNpub(candidateNpub);
+          if (!decoded) {
+            return;
+          }
+          const label = this.safeEncodeNpub(decoded) || candidateNpub;
+          pushEntry(decoded, label);
+        }
+      }
+    });
+
+    const deduped = [];
+    const seenHex = new Set();
+    normalizedEntries.forEach((entry) => {
+      if (!seenHex.has(entry.hex)) {
+        seenHex.add(entry.hex);
+        deduped.push(entry);
+      }
+    });
+
+    this.blockList.innerHTML = "";
+
+    if (!deduped.length) {
+      this.blockListEmpty.classList.remove("hidden");
+      this.blockList.classList.add("hidden");
+      return;
+    }
+
+    this.blockListEmpty.classList.add("hidden");
+    this.blockList.classList.remove("hidden");
+
+    deduped.forEach(({ hex, label }) => {
+      const item = document.createElement("li");
+      item.className =
+        "flex items-center justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
+
+      const info = document.createElement("div");
+      info.className = "min-w-0";
+
+      const title = document.createElement("p");
+      title.className = "text-sm font-medium text-gray-100 break-all";
+      title.textContent = label;
+
+      info.appendChild(title);
+
+      const actionBtn = document.createElement("button");
+      actionBtn.type = "button";
+      actionBtn.className =
+        "px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+      actionBtn.textContent = "Remove";
+      actionBtn.dataset.blockedHex = hex;
+      actionBtn.addEventListener("click", () => {
+        void this.handleRemoveBlockedCreator(hex);
+      });
+
+      item.appendChild(info);
+      item.appendChild(actionBtn);
+
+      this.blockList.appendChild(item);
+    });
+  }
+
+  async handleAddBlockedCreator() {
+    const input = this.blockInput || null;
+    const rawValue = typeof input?.value === "string" ? input.value : "";
+    const trimmed = rawValue.trim();
+
+    const context = {
+      input,
+      rawValue,
+      value: trimmed,
+      success: false,
+      reason: null,
+      error: null,
+    };
+
+    if (!input) {
+      context.reason = "missing-input";
+      this.callbacks.onAddBlocked(context, this);
+      return context;
+    }
+
+    if (!trimmed) {
+      this.showError("Enter an npub to block.");
+      context.reason = "empty";
+      this.callbacks.onAddBlocked(context, this);
+      return context;
+    }
+
+    const activePubkey = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!activePubkey) {
+      this.showError("Please login to manage your block list.");
+      context.reason = "no-active-pubkey";
+      this.callbacks.onAddBlocked(context, this);
+      return context;
+    }
+
+    const actorHex = activePubkey;
+    let targetHex = "";
+
+    if (trimmed.startsWith("npub1")) {
+      targetHex = this.safeDecodeNpub(trimmed) || "";
+      if (!targetHex) {
+        this.showError("Invalid npub. Please double-check and try again.");
+        context.reason = "invalid-npub";
+        this.callbacks.onAddBlocked(context, this);
+        return context;
+      }
+    } else if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+      targetHex = trimmed.toLowerCase();
+    } else {
+      this.showError("Enter a valid npub or hex pubkey.");
+      context.reason = "invalid-value";
+      this.callbacks.onAddBlocked(context, this);
+      return context;
+    }
+
+    if (targetHex === actorHex) {
+      this.showError("You cannot block yourself.");
+      context.reason = "self";
+      this.callbacks.onAddBlocked(context, this);
+      return context;
+    }
+
+    context.targetHex = targetHex;
+
+    try {
+      const mutationResult = await this.mutateBlocklist({
+        action: "add",
+        actorHex,
+        targetHex,
+        controller: this,
+      });
+
+      context.result = mutationResult;
+
+      if (mutationResult?.ok) {
+        this.showSuccess(
+          "Creator blocked. You won't see their videos anymore.",
+        );
+        context.success = true;
+        context.reason = mutationResult.reason || "blocked";
+      } else if (mutationResult?.reason === "already-blocked") {
+        this.showSuccess("You already blocked this creator.");
+        context.reason = "already-blocked";
+      } else {
+        const message =
+          mutationResult?.error?.code === "nip04-missing"
+            ? "Your Nostr extension must support NIP-04 to manage private lists."
+            : mutationResult?.error?.message ||
+              "Failed to update your block list. Please try again.";
+        context.error = mutationResult?.error || null;
+        context.reason = mutationResult?.reason || "service-error";
+        if (message) {
+          this.showError(message);
+        }
+      }
+
+      if (this.blockInput) {
+        this.blockInput.value = "";
+      }
+      this.populateBlockedList();
+    } catch (error) {
+      console.error("Failed to add creator to personal block list:", error);
+      context.error = error;
+      context.reason = error?.code || "service-error";
+      const message =
+        error?.code === "nip04-missing"
+          ? "Your Nostr extension must support NIP-04 to manage private lists."
+          : "Failed to update your block list. Please try again.";
+      this.showError(message);
+    }
+
+    this.callbacks.onAddBlocked(context, this);
+    return context;
+  }
+
+  async handleRemoveBlockedCreator(candidate) {
+    const activePubkey = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!activePubkey) {
+      this.showError("Please login to manage your block list.");
+      return;
+    }
+
+    let targetHex = "";
+    if (typeof candidate === "string") {
+      const trimmed = candidate.trim();
+      if (!trimmed) {
+        return;
+      }
+
+      if (trimmed.startsWith("npub1")) {
+        targetHex = this.safeDecodeNpub(trimmed) || "";
+      } else if (/^[0-9a-f]{64}$/i.test(trimmed)) {
+        targetHex = trimmed.toLowerCase();
+      }
+    }
+
+    if (!targetHex) {
+      console.warn("No valid pubkey to remove from block list:", candidate);
+      return;
+    }
+
+    try {
+      const mutationResult = await this.mutateBlocklist({
+        action: "remove",
+        actorHex: activePubkey,
+        targetHex,
+        controller: this,
+      });
+
+      if (mutationResult?.ok) {
+        this.showSuccess("Creator removed from your block list.");
+      } else if (mutationResult?.reason === "not-blocked") {
+        this.showSuccess("Creator already removed from your block list.");
+      } else if (mutationResult?.error) {
+        const message =
+          mutationResult.error.code === "nip04-missing"
+            ? "Your Nostr extension must support NIP-04 to manage private lists."
+            : mutationResult.error.message ||
+              "Failed to update your block list. Please try again.";
+        if (message) {
+          this.showError(message);
+        }
+      }
+
+      this.populateBlockedList();
+    } catch (error) {
+      console.error(
+        "Failed to remove creator from personal block list:",
+        error,
+      );
+      const message =
+        error?.code === "nip04-missing"
+          ? "Your Nostr extension must support NIP-04 to manage private lists."
+          : "Failed to update your block list. Please try again.";
+      this.showError(message);
+    }
+  }
+
+  async populateProfileWatchHistory() {
+    const renderer = this.ensureProfileHistoryRenderer();
+    if (!renderer) {
+      return;
+    }
+
+    let primaryActor = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!primaryActor && this.services.nostrClient?.sessionActor?.pubkey) {
+      const candidate = this.services.nostrClient.sessionActor.pubkey;
+      if (typeof candidate === "string" && candidate) {
+        primaryActor = candidate;
+      }
+    }
+
+    try {
+      await renderer.ensureInitialLoad({ actor: primaryActor });
+      await renderer.refresh({
+        actor: primaryActor,
+        force: true,
+      });
+
+      if (!this.boundProfileHistoryVisibility) {
+        this.boundProfileHistoryVisibility = () => {
+          if (!this.profileHistoryRenderer) {
+            return;
+          }
+          if (document.visibilityState === "visible") {
+            this.profileHistoryRenderer.resume();
+          } else {
+            this.profileHistoryRenderer.pause();
+          }
+        };
+        document.addEventListener(
+          "visibilitychange",
+          this.boundProfileHistoryVisibility,
+        );
+      }
+
+      if (document.visibilityState === "hidden") {
+        renderer.pause();
+      } else {
+        renderer.resume();
+      }
+    } catch (error) {
+      console.error(
+        "[profileModal] Failed to populate watch history pane:",
+        error,
+      );
+    }
+  }
+
+  applyWalletControlState() {
+    const hasActive = Boolean(this.normalizeHexPubkey(this.getActivePubkey()));
+    const busy = this.isWalletBusy();
+    const uriValue =
+      typeof this.walletUriInput?.value === "string"
+        ? this.walletUriInput.value.trim()
+        : "";
+    const hasUri = uriValue.length > 0;
+
+    const applyDisabledState = (element, disabled) => {
+      if (!(element instanceof HTMLElement)) {
+        return;
+      }
+      if ("disabled" in element) {
+        element.disabled = disabled;
+      }
+      if (disabled) {
+        element.setAttribute("aria-disabled", "true");
+      } else {
+        element.removeAttribute("aria-disabled");
+      }
+    };
+
+    applyDisabledState(this.walletUriInput, busy || !hasActive);
+    applyDisabledState(this.walletDefaultZapInput, busy || !hasActive);
+    applyDisabledState(this.walletSaveButton, busy || !hasActive);
+
+    const testDisabled = busy || !hasActive || !hasUri;
+    applyDisabledState(this.walletTestButton, testDisabled);
+
+    const disconnectDisabled = busy || !hasActive || !hasUri;
+    applyDisabledState(this.walletDisconnectButton, disconnectDisabled);
+    if (this.walletDisconnectButton instanceof HTMLElement) {
+      this.walletDisconnectButton.classList.toggle("hidden", !hasUri);
+      if (!hasUri) {
+        this.walletDisconnectButton.setAttribute("aria-hidden", "true");
+      } else {
+        this.walletDisconnectButton.removeAttribute("aria-hidden");
+      }
+    }
+  }
+
+  updateWalletStatus(message, variant = "info") {
+    if (!(this.walletStatusText instanceof HTMLElement)) {
+      return;
+    }
+
+    const element = this.walletStatusText;
+    const variants = {
+      success: "text-green-400",
+      error: "text-red-400",
+      info: "text-gray-400",
+    };
+
+    element.classList.remove("text-gray-400", "text-green-400", "text-red-400");
+    const variantClass = variants[variant] || variants.info;
+    element.classList.add(variantClass);
+    element.textContent = message || "";
+  }
+
+  refreshWalletPaneState() {
+    const hasActive = Boolean(this.normalizeHexPubkey(this.getActivePubkey()));
+    const setInputValue = (element, value) => {
+      if (element && typeof element === "object" && "value" in element) {
+        try {
+          element.value = value;
+        } catch (error) {
+          if (element instanceof HTMLElement) {
+            element.setAttribute("data-value", value);
+          }
+        }
+      }
+    };
+    if (!hasActive) {
+      setInputValue(this.walletUriInput, "");
+      setInputValue(this.walletDefaultZapInput, "");
+      this.updateWalletStatus("Sign in to connect a wallet.", "info");
+      this.applyWalletControlState();
+      return;
+    }
+
+    let settings = this.services.nwcSettings.getActiveNwcSettings();
+    if (!settings || typeof settings !== "object") {
+      settings = this.services.nwcSettings.createDefaultNwcSettings();
+    }
+    setInputValue(this.walletUriInput, settings.nwcUri || "");
+    setInputValue(
+      this.walletDefaultZapInput,
+      settings.defaultZap === null || settings.defaultZap === undefined
+        ? ""
+        : String(settings.defaultZap),
+    );
+
+    if (settings.nwcUri) {
+      this.updateWalletStatus(
+        "Wallet connected via Nostr Wallet Connect.",
+        "success",
+      );
+    } else {
+      this.updateWalletStatus("No wallet connected yet.", "info");
+    }
+
+    this.applyWalletControlState();
+  }
+
+  getWalletFormValues() {
+    const uri =
+      typeof this.walletUriInput?.value === "string"
+        ? this.walletUriInput.value.trim()
+        : "";
+    const defaultZapRaw =
+      typeof this.walletDefaultZapInput?.value === "string"
+        ? this.walletDefaultZapInput.value.trim()
+        : "";
+
+    if (defaultZapRaw) {
+      const numeric = Number(defaultZapRaw);
+      if (!Number.isFinite(numeric)) {
+        return { uri, error: "Default zap amount must be a number." };
+      }
+      const rounded = Math.round(numeric);
+      if (!Number.isFinite(rounded) || rounded < 0) {
+        return {
+          uri,
+          error: "Default zap amount must be a positive whole number.",
+        };
+      }
+      const clamped = Math.min(this.maxWalletDefaultZap, rounded);
+      return { uri, defaultZap: clamped };
+    }
+
+    return { uri, defaultZap: null };
+  }
+
+  validateWalletUri(uri, { requireValue = false } = {}) {
+    const value = typeof uri === "string" ? uri.trim() : "";
+    if (!value) {
+      if (requireValue) {
+        return {
+          valid: false,
+          sanitized: "",
+          message: "Enter a wallet connect URI before continuing.",
+        };
+      }
+      return { valid: true, sanitized: "" };
+    }
+
+    if (!value.toLowerCase().startsWith(NWC_URI_SCHEME)) {
+      return {
+        valid: false,
+        sanitized: value,
+        message: `Wallet URI must start with ${NWC_URI_SCHEME}.`,
+      };
+    }
+
+    return { valid: true, sanitized: value };
+  }
+
+  async handleWalletSave() {
+    const { uri, defaultZap, error } = this.getWalletFormValues();
+    const context = {
+      uri,
+      defaultZap: defaultZap ?? null,
+      sanitizedUri: null,
+      success: false,
+      reason: null,
+      error: error || null,
+      status: null,
+      variant: null,
+    };
+
+    if (this.isWalletBusy()) {
+      context.reason = "busy";
+      this.callbacks.onWalletSave(context, this);
+      return context;
+    }
+
+    if (error) {
+      this.updateWalletStatus(error, "error");
+      this.showError(error);
+      context.reason = "invalid-default-zap";
+      if (this.walletDefaultZapInput instanceof HTMLElement) {
+        this.walletDefaultZapInput.focus();
+      }
+      this.callbacks.onWalletSave(context, this);
+      return context;
+    }
+
+    const { valid, sanitized, message } = this.validateWalletUri(uri);
+    context.sanitizedUri = sanitized;
+    if (!valid) {
+      this.updateWalletStatus(message, "error");
+      this.showError(message);
+      context.reason = "invalid-uri";
+      context.error = message;
+      if (this.walletUriInput instanceof HTMLElement) {
+        this.walletUriInput.focus();
+      }
+      this.callbacks.onWalletSave(context, this);
+      return context;
+    }
+
+    const normalizedActive = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!normalizedActive) {
+      const loginMessage = "Sign in to save wallet settings.";
+      this.updateWalletStatus(loginMessage, "error");
+      this.showError(loginMessage);
+      context.reason = "no-active-pubkey";
+      context.error = loginMessage;
+      this.callbacks.onWalletSave(context, this);
+      return context;
+    }
+
+    this.setWalletPaneBusy(true);
+    let finalStatus = null;
+    let finalVariant = "info";
+    try {
+      const persistResult = await this.persistWalletSettings({
+        nwcUri: sanitized,
+        defaultZap,
+        activePubkey: normalizedActive,
+      });
+      context.persistResult = persistResult || null;
+
+      if (sanitized) {
+        finalStatus = "Wallet settings saved.";
+        finalVariant = "success";
+        this.showSuccess("Wallet settings saved.");
+        context.reason = "saved";
+      } else {
+        finalStatus = "Wallet connection removed.";
+        finalVariant = "info";
+        this.showStatus("Wallet connection removed.");
+        context.reason = "cleared";
+      }
+      context.success = true;
+    } catch (error) {
+      const fallbackMessage = "Failed to save wallet settings.";
+      const detail =
+        error && typeof error.message === "string" && error.message.trim()
+          ? error.message.trim()
+          : fallbackMessage;
+      finalStatus = detail;
+      finalVariant = "error";
+      context.error = detail;
+      context.reason = error?.code || "service-error";
+      this.showError(detail);
+    } finally {
+      this.setWalletPaneBusy(false);
+      this.refreshWalletPaneState();
+      if (finalStatus) {
+        this.updateWalletStatus(finalStatus, finalVariant);
+      }
+      context.status = finalStatus;
+      context.variant = finalVariant;
+      this.callbacks.onWalletSave(context, this);
+    }
+
+    return context;
+  }
+
+  async handleWalletTest() {
+    const { uri, defaultZap, error } = this.getWalletFormValues();
+    const context = {
+      uri,
+      defaultZap: defaultZap ?? null,
+      sanitizedUri: null,
+      success: false,
+      reason: null,
+      error: error || null,
+      status: null,
+      variant: null,
+      result: null,
+    };
+
+    if (this.isWalletBusy()) {
+      context.reason = "busy";
+      this.callbacks.onWalletTest(context, this);
+      return context.result;
+    }
+
+    if (error) {
+      this.updateWalletStatus(error, "error");
+      this.showError(error);
+      context.reason = "invalid-default-zap";
+      if (this.walletDefaultZapInput instanceof HTMLElement) {
+        this.walletDefaultZapInput.focus();
+      }
+      this.callbacks.onWalletTest(context, this);
+      return context.result;
+    }
+
+    const { valid, sanitized, message } = this.validateWalletUri(uri, {
+      requireValue: true,
+    });
+    context.sanitizedUri = sanitized;
+    if (!valid) {
+      this.updateWalletStatus(message, "error");
+      this.showError(message);
+      context.reason = "invalid-uri";
+      context.error = message;
+      if (this.walletUriInput instanceof HTMLElement) {
+        this.walletUriInput.focus();
+      }
+      this.callbacks.onWalletTest(context, this);
+      return context.result;
+    }
+
+    const normalizedActive = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!normalizedActive) {
+      const loginMessage = "Sign in to test your wallet connection.";
+      this.updateWalletStatus(loginMessage, "error");
+      this.showError(loginMessage);
+      context.reason = "no-active-pubkey";
+      context.error = loginMessage;
+      this.callbacks.onWalletTest(context, this);
+      return context.result;
+    }
+
+    this.setWalletPaneBusy(true);
+    let finalStatus = null;
+    let finalVariant = "info";
+    try {
+      const result = await this.testWalletConnection({
+        nwcUri: sanitized,
+        defaultZap,
+        activePubkey: normalizedActive,
+      });
+      finalStatus = "Wallet connection confirmed.";
+      finalVariant = "success";
+      this.showSuccess("Wallet connection confirmed.");
+      context.result = result;
+      context.success = true;
+      context.reason = "tested";
+
+      let currentSettings = this.services.nwcSettings.getActiveNwcSettings();
+      if (!currentSettings || typeof currentSettings !== "object") {
+        currentSettings = this.services.nwcSettings.createDefaultNwcSettings();
+      }
+      if (currentSettings.nwcUri === sanitized) {
+        await this.persistWalletSettings({
+          lastChecked: Date.now(),
+          activePubkey: normalizedActive,
+        });
+      }
+    } catch (error) {
+      const fallbackMessage = "Failed to reach wallet.";
+      const detail =
+        error && typeof error.message === "string" && error.message.trim()
+          ? error.message.trim()
+          : fallbackMessage;
+      finalStatus = detail;
+      finalVariant = "error";
+      context.error = detail;
+      context.reason = error?.code || "service-error";
+      this.showError(detail);
+    } finally {
+      this.setWalletPaneBusy(false);
+      this.refreshWalletPaneState();
+      if (finalStatus) {
+        this.updateWalletStatus(finalStatus, finalVariant);
+      }
+      context.status = finalStatus;
+      context.variant = finalVariant;
+      this.callbacks.onWalletTest(context, this);
+    }
+
+    return context.result;
+  }
+
+  async handleWalletDisconnect() {
+    const context = {
+      success: false,
+      reason: null,
+      error: null,
+      status: null,
+      variant: null,
+    };
+
+    if (this.isWalletBusy()) {
+      context.reason = "busy";
+      this.callbacks.onWalletDisconnect(context, this);
+      return context;
+    }
+
+    const normalizedActive = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!normalizedActive) {
+      const loginMessage = "Sign in to disconnect your wallet.";
+      this.updateWalletStatus(loginMessage, "error");
+      this.showError(loginMessage);
+      context.reason = "no-active-pubkey";
+      context.error = loginMessage;
+      this.callbacks.onWalletDisconnect(context, this);
+      return context;
+    }
+
+    this.setWalletPaneBusy(true);
+    let finalStatus = null;
+    let finalVariant = "info";
+    try {
+      const disconnectResult = await this.disconnectWallet({
+        activePubkey: normalizedActive,
+      });
+      context.result = disconnectResult || null;
+      finalStatus = "Wallet disconnected.";
+      this.showStatus("Wallet disconnected.");
+      context.success = true;
+      context.reason = "disconnected";
+    } catch (error) {
+      const fallbackMessage = "Failed to disconnect wallet.";
+      const detail =
+        error && typeof error.message === "string" && error.message.trim()
+          ? error.message.trim()
+          : fallbackMessage;
+      finalStatus = detail;
+      finalVariant = "error";
+      context.error = detail;
+      context.reason = error?.code || "service-error";
+      this.showError(detail);
+    } finally {
+      this.setWalletPaneBusy(false);
+      this.refreshWalletPaneState();
+      if (finalStatus) {
+        this.updateWalletStatus(finalStatus, finalVariant);
+      }
+      context.status = finalStatus;
+      context.variant = finalVariant;
+      this.callbacks.onWalletDisconnect(context, this);
+    }
+
+    return context;
+  }
+
+  storeAdminEmptyMessages() {
+    const capture = (element) => {
+      if (element instanceof HTMLElement && !element.dataset.defaultMessage) {
+        element.dataset.defaultMessage = element.textContent || "";
+      }
+    };
+
+    capture(this.moderatorEmpty);
+    capture(this.whitelistEmpty);
+    capture(this.blacklistEmpty);
+  }
+
+  setAdminLoading(isLoading) {
+    this.storeAdminEmptyMessages();
+    if (this.panes.admin instanceof HTMLElement) {
+      this.panes.admin.setAttribute("aria-busy", isLoading ? "true" : "false");
+    }
+
+    const toggleMessage = (element, message) => {
+      if (!(element instanceof HTMLElement)) {
+        return;
+      }
+      if (isLoading) {
+        element.textContent = message;
+        element.classList.remove("hidden");
+      } else {
+        element.textContent = element.dataset.defaultMessage || element.textContent;
+      }
+    };
+
+    toggleMessage(this.moderatorEmpty, "Loading moderators…");
+    toggleMessage(this.whitelistEmpty, "Loading whitelist…");
+    toggleMessage(this.blacklistEmpty, "Loading blacklist…");
+  }
+
+  clearAdminLists() {
+    this.storeAdminEmptyMessages();
+    if (this.adminModeratorList) {
+      this.adminModeratorList.innerHTML = "";
+    }
+    if (this.whitelistList) {
+      this.whitelistList.innerHTML = "";
+    }
+    if (this.blacklistList) {
+      this.blacklistList.innerHTML = "";
+    }
+    if (this.moderatorEmpty instanceof HTMLElement) {
+      this.moderatorEmpty.textContent =
+        this.moderatorEmpty.dataset.defaultMessage ||
+        this.moderatorEmpty.textContent;
+      this.moderatorEmpty.classList.remove("hidden");
+    }
+    if (this.whitelistEmpty instanceof HTMLElement) {
+      this.whitelistEmpty.textContent =
+        this.whitelistEmpty.dataset.defaultMessage ||
+        this.whitelistEmpty.textContent;
+      this.whitelistEmpty.classList.remove("hidden");
+    }
+    if (this.blacklistEmpty instanceof HTMLElement) {
+      this.blacklistEmpty.textContent =
+        this.blacklistEmpty.dataset.defaultMessage ||
+        this.blacklistEmpty.textContent;
+      this.blacklistEmpty.classList.remove("hidden");
+    }
+  }
+
+  renderAdminList(listEl, emptyEl, entries, options = {}) {
+    if (!(listEl instanceof HTMLElement) || !(emptyEl instanceof HTMLElement)) {
+      return;
+    }
+
+    const { onRemove, removeLabel = "Remove", confirmMessage, removable = true } =
+      options;
+
+    listEl.innerHTML = "";
+    const values = Array.isArray(entries) ? [...entries] : [];
+    values.sort((a, b) => a.localeCompare(b));
+
+    if (!values.length) {
+      emptyEl.classList.remove("hidden");
+      listEl.classList.add("hidden");
+      return;
+    }
+
+    emptyEl.classList.add("hidden");
+    listEl.classList.remove("hidden");
+
+    values.forEach((npub) => {
+      const item = document.createElement("li");
+      item.className =
+        "flex flex-col gap-2 rounded-lg bg-gray-800 px-4 py-3 sm:flex-row sm:items-center sm:justify-between";
+
+      const label = document.createElement("p");
+      label.className = "text-sm font-medium text-gray-100 break-all";
+      label.textContent = npub;
+      item.appendChild(label);
+
+      if (removable && typeof onRemove === "function") {
+        const removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className =
+          "self-start rounded-md bg-gray-700 px-3 py-1 text-xs font-medium text-gray-100 transition hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
+        removeBtn.textContent = removeLabel;
+        removeBtn.addEventListener("click", () => {
+          if (confirmMessage) {
+            const message = confirmMessage.replace("{npub}", npub);
+            if (!window.confirm(message)) {
+              return;
+            }
+          }
+          removeBtn.disabled = true;
+          removeBtn.setAttribute("aria-busy", "true");
+          onRemove(npub, removeBtn);
+        });
+        item.appendChild(removeBtn);
+      }
+
+      listEl.appendChild(item);
+    });
+  }
+
+  populateAdminLists() {
+    const actorNpub = this.services.getCurrentUserNpub();
+    if (!actorNpub || !this.services.accessControl.canEditAdminLists(actorNpub)) {
+      this.clearAdminLists();
+      return;
+    }
+
+    const isSuperAdmin = this.services.accessControl.isSuperAdmin(actorNpub);
+    const editors = this.services.accessControl
+      .getEditors()
+      .filter((npub) => npub && npub !== this.adminSuperNpub);
+    const whitelist = this.services.accessControl.getWhitelist();
+    const blacklist = this.services.accessControl.getBlacklist();
+
+    this.renderAdminList(
+      this.adminModeratorList,
+      this.moderatorEmpty,
+      editors,
+      {
+        onRemove: (npub, button) => this.handleRemoveModerator(npub, button),
+        removeLabel: "Remove",
+        confirmMessage:
+          "Remove moderator {npub}? They will immediately lose access to the admin panel.",
+        removable: isSuperAdmin,
+      },
+    );
+
+    this.renderAdminList(
+      this.whitelistList,
+      this.whitelistEmpty,
+      whitelist,
+      {
+        onRemove: (npub, button) =>
+          this.handleAdminListMutation("whitelist", "remove", npub, button),
+        removeLabel: "Remove",
+        confirmMessage: "Remove {npub} from the whitelist?",
+        removable: true,
+      },
+    );
+
+    this.renderAdminList(
+      this.blacklistList,
+      this.blacklistEmpty,
+      blacklist,
+      {
+        onRemove: (npub, button) =>
+          this.handleAdminListMutation("blacklist", "remove", npub, button),
+        removeLabel: "Unblock",
+        confirmMessage: "Remove {npub} from the blacklist?",
+        removable: true,
+      },
+    );
+  }
+
+  async refreshAdminPaneState() {
+    const adminNav = this.navButtons.admin;
+    const adminPane = this.panes.admin;
+
+    let loadError = null;
+    this.setAdminLoading(true);
+    this.showStatus("Fetching moderation filters…");
+    try {
+      const ensureResult = await this.runAdminMutation({
+        action: "ensure-ready",
+      });
+      if (ensureResult?.error && ensureResult.ok === false) {
+        loadError = ensureResult.error;
+      }
+    } catch (error) {
+      loadError = error;
+    }
+
+    const actorNpub = this.services.getCurrentUserNpub();
+    const canEdit =
+      !!actorNpub && this.services.accessControl.canEditAdminLists(actorNpub);
+    const isSuperAdmin =
+      !!actorNpub && this.services.accessControl.isSuperAdmin(actorNpub);
+
+    if (adminNav instanceof HTMLElement) {
+      adminNav.classList.toggle("hidden", !canEdit);
+      if (!canEdit) {
+        adminNav.setAttribute("aria-selected", "false");
+      }
+    }
+
+    if (adminPane instanceof HTMLElement) {
+      adminPane.classList.toggle("hidden", !canEdit);
+      adminPane.setAttribute("aria-hidden", (!canEdit).toString());
+    }
+
+    if (loadError) {
+      if (loadError?.code === "nostr-unavailable") {
+        console.info("Moderation lists are still syncing with relays.");
+        return;
+      }
+
+      console.error("Failed to load admin lists:", loadError);
+      this.showStatus(null);
+      this.showError("Unable to load moderation lists. Please try again.");
+      this.clearAdminLists();
+      this.setAdminLoading(false);
+      return;
+    }
+
+    if (!canEdit) {
+      this.clearAdminLists();
+      this.showStatus(null);
+      this.setAdminLoading(false);
+      if (
+        adminNav instanceof HTMLElement &&
+        adminNav.classList.contains("bg-gray-800")
+      ) {
+        this.selectPane("account");
+      }
+      return;
+    }
+
+    if (this.moderatorSection instanceof HTMLElement) {
+      this.moderatorSection.classList.toggle("hidden", !isSuperAdmin);
+      this.moderatorSection.setAttribute(
+        "aria-hidden",
+        (!isSuperAdmin).toString(),
+      );
+    }
+    this.populateAdminLists();
+    this.showStatus(null);
+    this.setAdminLoading(false);
+  }
+
+  normalizeNpubValue(value) {
+    if (typeof value !== "string") {
+      return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return null;
+    }
+    if (trimmed.startsWith("npub1")) {
+      return trimmed;
+    }
+    const normalizedHex = this.normalizeHexPubkey(trimmed);
+    if (!normalizedHex) {
+      return null;
+    }
+    return this.safeEncodeNpub(normalizedHex);
+  }
+
+  ensureAdminActor(requireSuperAdmin = false) {
+    const actorNpub = this.services.getCurrentUserNpub();
+    if (!actorNpub) {
+      this.showError("Please login with a Nostr account to manage admin settings.");
+      return null;
+    }
+    if (!this.services.accessControl.canEditAdminLists(actorNpub)) {
+      this.showError("You do not have permission to manage BitVid moderation lists.");
+      return null;
+    }
+    if (requireSuperAdmin && !this.services.accessControl.isSuperAdmin(actorNpub)) {
+      this.showError("Only the Super Admin can manage moderators or whitelist mode.");
+      return null;
+    }
+    return actorNpub;
+  }
+
+  async handleAddModerator() {
+    const input = this.moderatorInput || null;
+    const rawValue = typeof input?.value === "string" ? input.value : "";
+    const trimmed = rawValue.trim();
+    const normalizedValue = this.normalizeNpubValue(trimmed);
+    const context = {
+      input,
+      rawValue,
+      value: trimmed,
+      normalizedValue,
+      actorNpub: null,
+      success: false,
+      reason: null,
+      error: null,
+      result: null,
+    };
+
+    let preloadError = null;
+    try {
+      const ensureResult = await this.runAdminMutation({ action: "ensure-ready" });
+      if (ensureResult?.error && ensureResult.ok === false) {
+        preloadError = ensureResult.error;
+      }
+    } catch (error) {
+      preloadError = error;
+      console.error("Failed to load admin lists before adding moderator:", error);
+    }
+
+    if (preloadError) {
+      this.showError(this.describeAdminError(preloadError.code || "storage-error"));
+      context.reason = preloadError.code || "storage-error";
+      context.error = preloadError;
+      this.callbacks.onAdminAddModerator(context, this);
+      return context;
+    }
+
+    const actorNpub = this.ensureAdminActor(true);
+    context.actorNpub = actorNpub;
+    if (!actorNpub || !input) {
+      context.reason = actorNpub ? "missing-input" : "unauthorized";
+      this.callbacks.onAdminAddModerator(context, this);
+      return context;
+    }
+
+    if (!trimmed) {
+      this.showError("Enter an npub to add as a moderator.");
+      context.reason = "empty";
+      this.callbacks.onAdminAddModerator(context, this);
+      return context;
+    }
+
+    if (!normalizedValue) {
+      this.showError("Enter a valid npub before adding it as a moderator.");
+      context.reason = "invalid";
+      this.callbacks.onAdminAddModerator(context, this);
+      return context;
+    }
+
+    if (this.addModeratorButton) {
+      this.addModeratorButton.disabled = true;
+      this.addModeratorButton.setAttribute("aria-busy", "true");
+    }
+
+    try {
+      const mutationResult = await this.runAdminMutation({
+        action: "add-moderator",
+        actorNpub,
+        targetNpub: normalizedValue,
+      });
+      context.result = mutationResult?.result || null;
+      if (!mutationResult?.ok) {
+        const errorCode = mutationResult?.result?.error || mutationResult?.error?.code;
+        this.showError(this.describeAdminError(errorCode || "service-error"));
+        context.reason = errorCode || "service-error";
+        context.error = mutationResult?.error || mutationResult?.result || null;
+        return context;
+      }
+
+      this.moderatorInput.value = "";
+      this.showSuccess("Moderator added successfully.");
+      await this.services.onAccessControlUpdated();
+      context.success = true;
+      context.reason = "added";
+    } finally {
+      if (this.addModeratorButton) {
+        this.addModeratorButton.disabled = false;
+        this.addModeratorButton.removeAttribute("aria-busy");
+      }
+      this.callbacks.onAdminAddModerator(context, this);
+    }
+
+    return context;
+  }
+
+  async handleRemoveModerator(npub, button) {
+    const context = {
+      npub,
+      normalizedNpub: this.normalizeNpubValue(npub),
+      button,
+      actorNpub: null,
+      success: false,
+      reason: null,
+      error: null,
+      result: null,
+    };
+
+    const releaseButton = () => {
+      if (button instanceof HTMLElement) {
+        button.disabled = false;
+        button.removeAttribute("aria-busy");
+      }
+    };
+
+    if (!context.normalizedNpub) {
+      this.showError("Unable to remove moderator: invalid npub.");
+      context.reason = "invalid";
+      releaseButton();
+      this.callbacks.onAdminRemoveModerator(context, this);
+      return context;
+    }
+
+    let preloadError = null;
+    try {
+      const ensureResult = await this.runAdminMutation({ action: "ensure-ready" });
+      if (ensureResult?.error && ensureResult.ok === false) {
+        preloadError = ensureResult.error;
+      }
+    } catch (error) {
+      preloadError = error;
+      console.error("Failed to load admin lists before removing moderator:", error);
+    }
+
+    if (preloadError) {
+      this.showError(this.describeAdminError(preloadError.code || "storage-error"));
+      context.reason = preloadError.code || "storage-error";
+      context.error = preloadError;
+      releaseButton();
+      this.callbacks.onAdminRemoveModerator(context, this);
+      return context;
+    }
+
+    const actorNpub = this.ensureAdminActor(true);
+    context.actorNpub = actorNpub;
+    if (!actorNpub) {
+      context.reason = "unauthorized";
+      releaseButton();
+      this.callbacks.onAdminRemoveModerator(context, this);
+      return context;
+    }
+
+    const mutationResult = await this.runAdminMutation({
+      action: "remove-moderator",
+      actorNpub,
+      targetNpub: context.normalizedNpub,
+    });
+    context.result = mutationResult?.result || null;
+    if (!mutationResult?.ok) {
+      const errorCode = mutationResult?.result?.error || mutationResult?.error?.code;
+      this.showError(this.describeAdminError(errorCode || "service-error"));
+      context.reason = errorCode || "service-error";
+      context.error = mutationResult?.error || mutationResult?.result || null;
+      releaseButton();
+      this.callbacks.onAdminRemoveModerator(context, this);
+      return context;
+    }
+
+    this.showSuccess("Moderator removed.");
+    await this.services.onAccessControlUpdated();
+    context.success = true;
+    context.reason = "removed";
+
+    releaseButton();
+    this.callbacks.onAdminRemoveModerator(context, this);
+    return context;
+  }
+
+  async handleAdminListMutation(listType, action, explicitNpub = null, sourceButton = null) {
+    const isWhitelist = listType === "whitelist";
+    const input = isWhitelist ? this.whitelistInput : this.blacklistInput;
+    const addButton = isWhitelist ? this.addWhitelistButton : this.addBlacklistButton;
+    const isAdd = action === "add";
+    let buttonToToggle = sourceButton || (isAdd ? addButton : null);
+
+    const context = {
+      listType,
+      action,
+      explicitNpub,
+      sourceButton,
+      actorNpub: null,
+      targetNpub: null,
+      success: false,
+      reason: null,
+      error: null,
+      result: null,
+      notificationResult: null,
+      notificationError: null,
+    };
+
+    const callbackMap = {
+      whitelist: {
+        add: this.callbacks.onAdminAddWhitelist,
+        remove: this.callbacks.onAdminRemoveWhitelist,
+      },
+      blacklist: {
+        add: this.callbacks.onAdminAddBlacklist,
+        remove: this.callbacks.onAdminRemoveBlacklist,
+      },
+    };
+
+    const adminCallback = callbackMap[listType]?.[action] || noop;
+
+    const setBusy = (element, busy) => {
+      if (!(element instanceof HTMLElement)) {
+        return;
+      }
+      element.disabled = !!busy;
+      if (busy) {
+        element.setAttribute("aria-busy", "true");
+      } else {
+        element.removeAttribute("aria-busy");
+      }
+    };
+
+    const finalize = () => {
+      setBusy(buttonToToggle, false);
+      adminCallback(context, this);
+    };
+
+    let preloadError = null;
+    try {
+      const ensureResult = await this.runAdminMutation({ action: "ensure-ready" });
+      if (ensureResult?.error && ensureResult.ok === false) {
+        preloadError = ensureResult.error;
+      }
+    } catch (error) {
+      preloadError = error;
+      console.error("Failed to load admin lists before updating entries:", error);
+    }
+
+    if (preloadError) {
+      this.showError(this.describeAdminError(preloadError.code || "storage-error"));
+      context.reason = preloadError.code || "storage-error";
+      context.error = preloadError;
+      finalize();
+      return context;
+    }
+
+    const actorNpub = this.ensureAdminActor(false);
+    context.actorNpub = actorNpub;
+    if (!actorNpub) {
+      context.reason = "unauthorized";
+      finalize();
+      return context;
+    }
+
+    let target = typeof explicitNpub === "string" ? explicitNpub.trim() : "";
+    if (!target && input instanceof HTMLInputElement) {
+      target = input.value.trim();
+    }
+    context.targetNpub = target;
+
+    if (isAdd && !target) {
+      this.showError("Enter an npub before adding it to the list.");
+      context.reason = "empty";
+      finalize();
+      return context;
+    }
+
+    buttonToToggle = buttonToToggle || (isAdd ? addButton : null);
+    setBusy(buttonToToggle, true);
+
+    const mutationResult = await this.runAdminMutation({
+      action: "list-mutation",
+      listType,
+      mode: action,
+      actorNpub,
+      targetNpub: target,
+    });
+
+    context.result = mutationResult?.result || null;
+
+    if (!mutationResult?.ok) {
+      const errorCode = mutationResult?.result?.error || mutationResult?.error?.code;
+      this.showError(this.describeAdminError(errorCode || "service-error"));
+      context.reason = errorCode || "service-error";
+      context.error = mutationResult?.error || mutationResult?.result || null;
+      finalize();
+      return context;
+    }
+
+    if (isAdd && input instanceof HTMLInputElement) {
+      input.value = "";
+    }
+
+    const successMessage = isWhitelist
+      ? isAdd
+        ? "Added to the whitelist."
+        : "Removed from the whitelist."
+      : isAdd
+      ? "Added to the blacklist."
+      : "Removed from the blacklist.";
+    this.showSuccess(successMessage);
+    await this.services.onAccessControlUpdated();
+
+    context.success = true;
+    context.reason = isAdd ? "added" : "removed";
+
+    if (isAdd) {
+      try {
+        const notifyResult = await this.sendAdminListNotification({
+          listType,
+          actorNpub,
+          targetNpub: target,
+        });
+        context.notificationResult = notifyResult;
+        if (!notifyResult?.ok) {
+          const errorMessage = this.describeNotificationError(notifyResult?.error);
+          if (errorMessage) {
+            this.showError(errorMessage);
+          }
+          if (isDevMode && notifyResult?.error) {
+            console.warn(
+              "[admin] Failed to send list notification DM:",
+              notifyResult,
+            );
+          }
+          this.notifyAdminError({
+            listType,
+            action,
+            actorNpub,
+            targetNpub: target,
+            error: notifyResult?.error || null,
+            result: notifyResult,
+          });
+        }
+      } catch (error) {
+        context.notificationError = error;
+        console.error("Failed to send list notification DM:", error);
+        if (isDevMode) {
+          console.warn(
+            "List update succeeded, but DM notification threw an unexpected error.",
+            error,
+          );
+        }
+        this.notifyAdminError({
+          listType,
+          action,
+          actorNpub,
+          targetNpub: target,
+          error,
+        });
+      }
+    }
+
+    finalize();
+    return context;
+  }
+
+  describeAdminError(code) {
+    if (typeof this.describeAdminErrorService === "function") {
+      const result = this.describeAdminErrorService(code);
+      if (typeof result === "string" && result) {
+        return result;
+      }
+    }
+
+    switch (code) {
+      case "invalid npub":
+        return "Please provide a valid npub address.";
+      case "immutable":
+        return "That account cannot be modified.";
+      case "self":
+        return "You cannot blacklist yourself.";
+      case "forbidden":
+        return "You do not have permission to perform that action.";
+      case "nostr-unavailable":
+        return "Unable to reach the configured Nostr relays. Please retry once your connection is restored.";
+      case "nostr-extension-missing":
+        return "Connect a Nostr extension before editing moderation lists.";
+      case "signature-failed":
+        return "We couldn’t sign the update with your Nostr key. Please reconnect your extension and try again.";
+      case "publish-failed":
+        return "Failed to publish the update to Nostr relays. Please try again.";
+      case "storage-error":
+        return "Unable to update moderation settings. Please try again.";
+      default:
+        return "Unable to update moderation settings. Please try again.";
+    }
+  }
+
+  describeNotificationError(code) {
+    if (typeof this.describeNotificationErrorService === "function") {
+      const result = this.describeNotificationErrorService(code);
+      if (typeof result === "string") {
+        return result;
+      }
+    }
+
+    switch (code) {
+      case "nostr-extension-missing":
+        return "List updated, but the DM notification failed because no Nostr extension is connected.";
+      case "nostr-uninitialized":
+        return "List updated, but the DM notification system is still connecting to Nostr relays. Please try again in a moment.";
+      case "nip04-unavailable":
+        return "List updated, but your Nostr extension does not support NIP-04 encryption, so the DM notification was not sent.";
+      case "sign-event-unavailable":
+        return "List updated, but your Nostr extension could not sign the DM notification.";
+      case "missing-actor-pubkey":
+        return "List updated, but we could not determine your public key to send the DM notification.";
+      case "publish-failed":
+        return "List updated, but the DM notification could not be delivered to any relay.";
+      case "encryption-failed":
+      case "signature-failed":
+        return "List updated, but the DM notification failed while preparing the encrypted message.";
+      case "invalid-target":
+      case "empty-message":
+        return "";
+      default:
+        return "List updated, but the DM notification could not be sent.";
+    }
+  }
+
+  async sendAdminListNotification({ listType, actorNpub, targetNpub }) {
+    if (typeof this.sendAdminListNotificationService === "function") {
+      return this.sendAdminListNotificationService({ listType, actorNpub, targetNpub });
+    }
+
+    const normalizedTarget = this.normalizeNpubValue(targetNpub);
+    if (!normalizedTarget) {
+      return { ok: false, error: "invalid-target" };
+    }
+
+    const activeHex = this.normalizeHexPubkey(this.getActivePubkey());
+    if (!activeHex) {
+      return { ok: false, error: "missing-actor-pubkey" };
+    }
+
+    const fallbackActor = this.safeEncodeNpub(activeHex) || "a BitVid moderator";
+    const actorDisplay = this.normalizeNpubValue(actorNpub) || fallbackActor;
+    const isWhitelist = listType === "whitelist";
+
+    const introLine = isWhitelist
+      ? `Great news—your npub ${normalizedTarget} has been added to the BitVid whitelist by ${actorDisplay}.`
+      : `We wanted to let you know that your npub ${normalizedTarget} has been placed on the BitVid blacklist by ${actorDisplay}.`;
+
+    const statusLine = isWhitelist
+      ? `You now have full creator access across BitVid (${this.bitvidWebsiteUrl}).`
+      : `This hides your channel and prevents uploads across BitVid (${this.bitvidWebsiteUrl}) for now.`;
+
+    const followUpLine = isWhitelist
+      ? "Please take a moment to review our community guidelines (https://bitvid.network/#view=community-guidelines), and reply to this DM if you have any questions."
+      : "Please review our community guidelines (https://bitvid.network/#view=community-guidelines). If you believe this was a mistake, you can submit an appeal at https://bitvid.network/?modal=appeals to request reinstatement, or reply to this DM with any questions.";
+
+    const messageBody = [
+      "Hi there,",
+      "",
+      introLine,
+      "",
+      statusLine,
+      "",
+      followUpLine,
+      "",
+      "— The BitVid Team",
+    ].join("\n");
+
+    const message = `![BitVid status update](${this.adminDmImageUrl})\n\n${messageBody}`;
+
+    return this.services.nostrClient.sendDirectMessage(
+      normalizedTarget,
+      message,
+      activeHex,
+    );
+  }
+
+  async requestSwitchProfile({ pubkey, entry } = {}) {
+    const callback = this.callbacks.onRequestSwitchProfile;
+    if (callback && callback !== noop) {
+      return callback({ controller: this, pubkey, entry });
+    }
+
+    if (!pubkey) {
+      throw new Error("Missing target pubkey for switch request.");
+    }
+
+    return this.services.switchProfile(pubkey);
+  }
+
+  async runRelayOperation({
+    action,
+    url,
+    activePubkey,
+    skipPublishIfUnchanged = true,
+  } = {}) {
+    const callback = this.callbacks.onRelayOperation;
+    if (callback && callback !== noop) {
+      const result = await callback({
+        controller: this,
+        action,
+        url,
+        activePubkey,
+        skipPublishIfUnchanged,
+      });
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    const context = {
+      ok: false,
+      changed: false,
+      reason: null,
+      error: null,
+      publishResult: null,
+      operationResult: null,
+    };
+
+    if (!activePubkey) {
+      context.reason = "no-active-pubkey";
+      return context;
+    }
+
+    const previous = this.services.relayManager.snapshot();
+
+    const runOperation = () => {
+      switch (action) {
+        case "add":
+          return this.services.relayManager.addRelay(url);
+        case "remove":
+          return this.services.relayManager.removeRelay(url);
+        case "restore":
+          return this.services.relayManager.restoreDefaults();
+        case "mode-toggle":
+          return this.services.relayManager.cycleRelayMode(url);
+        default:
+          throw Object.assign(new Error("Unknown relay operation."), {
+            code: "invalid-operation",
+          });
+      }
+    };
+
+    let operationResult;
+    try {
+      operationResult = runOperation();
+      context.operationResult = operationResult;
+    } catch (error) {
+      context.reason = error?.code || "operation-error";
+      context.error = error;
+      return context;
+    }
+
+    context.changed = Boolean(operationResult?.changed);
+    if (!context.changed && skipPublishIfUnchanged) {
+      context.reason = operationResult?.reason || "unchanged";
+      return context;
+    }
+
+    try {
+      const publishResult = await this.services.relayManager.publishRelayList(
+        activePubkey,
+      );
+      if (!publishResult?.ok) {
+        throw new Error("No relays accepted the update.");
+      }
+      context.ok = true;
+      context.publishResult = publishResult;
+      return context;
+    } catch (error) {
+      this.services.relayManager.setEntries(previous, { allowEmpty: false });
+      context.reason = error?.code || "publish-failed";
+      context.error = error;
+      return context;
+    }
+  }
+
+  async mutateBlocklist({ action, actorHex, targetHex } = {}) {
+    const callback = this.callbacks.onBlocklistMutation;
+    if (callback && callback !== noop) {
+      const result = await callback({
+        controller: this,
+        action,
+        actorHex,
+        targetHex,
+      });
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    const context = { ok: false, reason: null, error: null };
+    if (!actorHex || !targetHex) {
+      context.reason = "invalid-target";
+      return context;
+    }
+
+    try {
+      await this.services.userBlocks.ensureLoaded(actorHex);
+      const isBlocked = this.services.userBlocks.isBlocked(targetHex);
+
+      if (action === "add") {
+        if (isBlocked) {
+          context.reason = "already-blocked";
+          return context;
+        }
+        await this.services.userBlocks.addBlock(targetHex, actorHex);
+        context.ok = true;
+        context.reason = "blocked";
+      } else if (action === "remove") {
+        if (!isBlocked) {
+          context.reason = "not-blocked";
+          return context;
+        }
+        await this.services.userBlocks.removeBlock(targetHex, actorHex);
+        context.ok = true;
+        context.reason = "unblocked";
+      } else {
+        context.reason = "invalid-action";
+        return context;
+      }
+
+      if (context.ok) {
+        try {
+          await this.services.onVideosShouldRefresh({
+            reason: `blocklist-${action}`,
+            actorHex,
+            targetHex,
+          });
+        } catch (refreshError) {
+          console.warn(
+            "[ProfileModalController] Failed to refresh videos after blocklist mutation:",
+            refreshError,
+          );
+        }
+      }
+
+      return context;
+    } catch (error) {
+      context.error = error;
+      context.reason = error?.code || "service-error";
+      return context;
+    }
+  }
+
+  async persistWalletSettings({
+    nwcUri,
+    defaultZap,
+    lastChecked,
+    activePubkey,
+  } = {}) {
+    const callback = this.callbacks.onWalletPersist;
+    if (callback && callback !== noop) {
+      const result = await callback({
+        controller: this,
+        nwcUri,
+        defaultZap,
+        lastChecked,
+        activePubkey,
+      });
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    return this.services.nwcSettings.handleProfileWalletPersist({
+      nwcUri,
+      defaultZap,
+      lastChecked,
+    });
+  }
+
+  async testWalletConnection({ nwcUri, defaultZap, activePubkey } = {}) {
+    const callback = this.callbacks.onWalletTestRequest;
+    if (callback && callback !== noop) {
+      const result = await callback({
+        controller: this,
+        nwcUri,
+        defaultZap,
+        activePubkey,
+      });
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    return this.services.nwcSettings.ensureWallet({ nwcUri, defaultZap });
+  }
+
+  async disconnectWallet({ activePubkey } = {}) {
+    const callback = this.callbacks.onWalletDisconnectRequest;
+    if (callback && callback !== noop) {
+      const result = await callback({ controller: this, activePubkey });
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    return this.services.nwcSettings.updateActiveNwcSettings(
+      this.services.nwcSettings.createDefaultNwcSettings(),
+    );
+  }
+
+  async runAdminMutation(payload = {}) {
+    const callback = this.callbacks.onAdminMutation;
+    if (callback && callback !== noop) {
+      const result = await callback({ ...payload, controller: this });
+      if (result !== undefined) {
+        return result;
+      }
+    }
+
+    const action = payload?.action;
+    const resultContext = { ok: false, error: null, result: null };
+
+    try {
+      switch (action) {
+        case "ensure-ready":
+          await this.services.accessControl.ensureReady();
+          resultContext.ok = true;
+          break;
+        case "add-moderator":
+          resultContext.result = await this.services.accessControl.addModerator(
+            payload.actorNpub,
+            payload.targetNpub,
+          );
+          resultContext.ok = !!resultContext.result?.ok;
+          break;
+        case "remove-moderator":
+          resultContext.result =
+            await this.services.accessControl.removeModerator(
+              payload.actorNpub,
+              payload.targetNpub,
+            );
+          resultContext.ok = !!resultContext.result?.ok;
+          break;
+        case "list-mutation":
+          if (payload.listType === "whitelist") {
+            resultContext.result = payload.mode === "add"
+              ? await this.services.accessControl.addToWhitelist(
+                  payload.actorNpub,
+                  payload.targetNpub,
+                )
+              : await this.services.accessControl.removeFromWhitelist(
+                  payload.actorNpub,
+                  payload.targetNpub,
+                );
+          } else {
+            resultContext.result = payload.mode === "add"
+              ? await this.services.accessControl.addToBlacklist(
+                  payload.actorNpub,
+                  payload.targetNpub,
+                )
+              : await this.services.accessControl.removeFromBlacklist(
+                  payload.actorNpub,
+                  payload.targetNpub,
+                );
+          }
+          resultContext.ok = !!resultContext.result?.ok;
+          break;
+        default:
+          resultContext.error = Object.assign(
+            new Error("Unknown admin mutation."),
+            { code: "invalid-action" },
+          );
+      }
+    } catch (error) {
+      resultContext.error = error;
+      return resultContext;
+    }
+
+    return resultContext;
+  }
+
+  notifyAdminError(payload = {}) {
+    const callback = this.callbacks.onAdminNotifyError;
+    if (callback && callback !== noop) {
+      callback({ ...payload, controller: this });
+    }
+  }
+
+  updateFocusTrap() {
+    if (!(this.profileModal instanceof HTMLElement)) {
+      this.focusableElements = [];
+      return;
+    }
+
+    const selector =
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+    const nodes = Array.from(
+      this.profileModal.querySelectorAll(selector),
+    );
+    this.focusableElements = nodes.filter((node) => {
+      if (!(node instanceof HTMLElement)) {
+        return false;
+      }
+      const style = window.getComputedStyle(node);
+      if (style.display === "none" || style.visibility === "hidden") {
+        return false;
+      }
+      if (node.hasAttribute("disabled")) {
+        return false;
+      }
+      if (node.getAttribute("aria-hidden") === "true") {
+        return false;
+      }
+      return true;
+    });
+
+    this.bindFocusTrap();
+  }
+
+  bindFocusTrap() {
+    if (!(this.profileModal instanceof HTMLElement)) {
+      return;
+    }
+
+    if (!this.boundKeydown) {
+      this.boundKeydown = (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          this.hide();
+          return;
+        }
+
+        if (event.key !== "Tab") {
+          return;
+        }
+
+        if (!this.focusableElements.length) {
+          event.preventDefault();
+          if (typeof this.profileModal.focus === "function") {
+            this.profileModal.focus();
+          }
+          return;
+        }
+
+        const first = this.focusableElements[0];
+        const last = this.focusableElements[this.focusableElements.length - 1];
+        const active = document.activeElement;
+
+        if (event.shiftKey) {
+          if (active === first || !this.profileModal.contains(active)) {
+            event.preventDefault();
+            if (typeof last?.focus === "function") {
+              last.focus();
+            }
+          }
+          return;
+        }
+
+        if (active === last) {
+          event.preventDefault();
+          if (typeof first?.focus === "function") {
+            first.focus();
+          }
+        }
+      };
+    }
+
+    if (!this.boundFocusIn) {
+      this.boundFocusIn = (event) => {
+        if (
+          !this.profileModal ||
+          this.profileModal.classList.contains("hidden") ||
+          this.profileModal.contains(event.target)
+        ) {
+          return;
+        }
+
+        const target = this.focusableElements[0] || this.profileModal;
+        if (typeof target?.focus === "function") {
+          target.focus();
+        }
+      };
+    }
+
+    this.profileModal.addEventListener("keydown", this.boundKeydown);
+    document.addEventListener("focusin", this.boundFocusIn);
+  }
+
+  async show(targetPane = "account") {
+    const pane =
+      typeof targetPane === "string" && targetPane.trim()
+        ? targetPane.trim()
+        : "account";
+
+    const activeElement =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    if (
+      activeElement &&
+      this.profileModal instanceof HTMLElement &&
+      this.profileModal.contains(activeElement)
+    ) {
+      this.previouslyFocusedElement = null;
+    } else {
+      this.previouslyFocusedElement = activeElement;
+    }
+
+    this.renderSavedProfiles();
+
+    try {
+      await this.refreshAdminPaneState();
+    } catch (error) {
+      console.error(
+        "Failed to refresh admin pane while opening profile modal:",
+        error,
+      );
+    }
+
+    this.refreshWalletPaneState();
+    this.populateProfileRelays();
+
+    if (
+      this.services.userBlocks &&
+      typeof this.services.userBlocks.ensureLoaded === "function"
+    ) {
+      try {
+        const activeHex = this.normalizeHexPubkey(this.getActivePubkey());
+        await this.services.userBlocks.ensureLoaded(activeHex);
+      } catch (error) {
+        console.warn(
+          "Failed to refresh user block list while opening profile modal:",
+          error,
+        );
+      }
+    }
+
+    this.populateBlockedList();
+
+    this.open(pane);
+    return true;
+  }
+
+  showWalletPane() {
+    return this.show("wallet");
+  }
+
+  open(pane = "account") {
+    if (!(this.profileModal instanceof HTMLElement)) {
+      return;
+    }
+
+    this.profileModal.classList.remove("hidden");
+    this.profileModal.setAttribute("aria-hidden", "false");
+    this.setGlobalModalState("profile", true);
+    this.selectPane(pane);
+
+    const focusTarget = this.focusableElements[0] || this.profileModal;
+    window.requestAnimationFrame(() => {
+      if (typeof focusTarget?.focus === "function") {
+        focusTarget.focus();
+      }
+    });
+  }
+
+  hide(options = {}) {
+    const { silent = false } =
+      options && typeof options === "object" ? options : {};
+
+    const modalElement =
+      this.profileModal instanceof HTMLElement ? this.profileModal : null;
+
+    if (modalElement) {
+      modalElement.classList.add("hidden");
+      modalElement.setAttribute("aria-hidden", "true");
+      this.setGlobalModalState("profile", false);
+
+      if (this.boundKeydown) {
+        modalElement.removeEventListener("keydown", this.boundKeydown);
+      }
+    }
+
+    if (this.boundFocusIn) {
+      document.removeEventListener("focusin", this.boundFocusIn);
+    }
+
+    if (
+      this.boundProfileHistoryVisibility &&
+      typeof document !== "undefined" &&
+      typeof document.removeEventListener === "function"
+    ) {
+      document.removeEventListener(
+        "visibilitychange",
+        this.boundProfileHistoryVisibility,
+      );
+      this.boundProfileHistoryVisibility = null;
+    }
+
+    if (this.profileHistoryRenderer) {
+      try {
+        if (typeof this.profileHistoryRenderer.destroy === "function") {
+          this.profileHistoryRenderer.destroy();
+        }
+      } catch (error) {
+        console.warn(
+          "[profileModal] Failed to reset watch history renderer on close:",
+          error,
+        );
+      }
+      this.profileHistoryRenderer = null;
+      this.profileHistoryRendererConfig = null;
+    }
+
+    this.setActivePane(null);
+    this.setWalletPaneBusy(false);
+
+    const previous = this.previouslyFocusedElement;
+    this.previouslyFocusedElement = null;
+
+    if (
+      previous &&
+      typeof previous.focus === "function" &&
+      (!modalElement || !modalElement.contains(previous))
+    ) {
+      const shouldRestore =
+        "isConnected" in previous ? previous.isConnected !== false : true;
+      if (shouldRestore) {
+        window.requestAnimationFrame(() => {
+          try {
+            previous.focus();
+          } catch (error) {
+            console.warn(
+              "[profileModal] Failed to restore focus after closing modal:",
+              error,
+            );
+          }
+        });
+      }
+    }
+
+    if (!silent) {
+      try {
+        this.callbacks.onClose(this);
+      } catch (error) {
+        console.warn(
+          "[profileModal] onClose callback threw while hiding modal:",
+          error,
+        );
+      }
+    }
+  }
+
+  async handleAuthLogin(detail = {}) {
+    const postLoginPromise =
+      detail && typeof detail.postLoginPromise?.then === "function"
+        ? detail.postLoginPromise
+        : Promise.resolve(detail?.postLogin ?? null);
+
+    const savedProfiles = Array.isArray(detail?.savedProfiles)
+      ? detail.savedProfiles
+      : null;
+    if (savedProfiles) {
+      try {
+        this.setSavedProfiles(savedProfiles, {
+          persist: false,
+          persistActive: false,
+        });
+      } catch (error) {
+        console.warn(
+          "[profileModal] Failed to sync saved profiles during login:",
+          error,
+        );
+      }
+    }
+
+    const activePubkey =
+      detail?.activeProfilePubkey ?? detail?.pubkey ?? undefined;
+    if (activePubkey !== undefined) {
+      this.setActivePubkey(activePubkey);
+    }
+
+    await this.hydrateActiveWalletSettings(activePubkey);
+
+    this.renderSavedProfiles();
+
+    try {
+      await this.refreshAdminPaneState();
+    } catch (error) {
+      console.warn("Failed to refresh admin pane after login:", error);
+    }
+
+    this.populateBlockedList();
+    this.populateProfileRelays();
+    this.refreshWalletPaneState();
+
+    postLoginPromise
+      .then(() => {
+        this.populateBlockedList();
+        this.populateProfileRelays();
+        this.refreshWalletPaneState();
+      })
+      .catch((error) => {
+        console.warn(
+          "[profileModal] Failed to hydrate deferred login data:",
+          error,
+        );
+      });
+
+    return true;
+  }
+
+  async handleAuthLogout(detail = {}) {
+    const savedProfiles = Array.isArray(detail?.savedProfiles)
+      ? detail.savedProfiles
+      : null;
+    if (savedProfiles) {
+      try {
+        this.setSavedProfiles(savedProfiles, {
+          persist: false,
+          persistActive: false,
+        });
+      } catch (error) {
+        console.warn(
+          "[profileModal] Failed to sync saved profiles during logout:",
+          error,
+        );
+      }
+    }
+
+    if (detail?.activeProfilePubkey !== undefined) {
+      this.setActivePubkey(detail.activeProfilePubkey);
+    } else {
+      this.setActivePubkey(null);
+    }
+
+    this.profileSwitcherSelectionPubkey = null;
+    this.renderSavedProfiles();
+
+    try {
+      await this.refreshAdminPaneState();
+    } catch (error) {
+      console.warn("Failed to refresh admin pane after logout:", error);
+    }
+
+    this.populateBlockedList();
+    this.populateProfileRelays();
+    this.refreshWalletPaneState();
+
+    return true;
+  }
+
+  handleProfileUpdated(detail = {}) {
+    if (Array.isArray(detail?.savedProfiles)) {
+      try {
+        this.setSavedProfiles(detail.savedProfiles, {
+          persist: false,
+          persistActive: false,
+        });
+      } catch (error) {
+        console.warn(
+          "[profileModal] Failed to sync saved profiles after profile update:",
+          error,
+        );
+      }
+    }
+
+    if (detail?.activeProfilePubkey !== undefined) {
+      this.setActivePubkey(detail.activeProfilePubkey);
+    } else if (detail?.pubkey) {
+      this.setActivePubkey(detail.pubkey);
+    }
+
+    this.renderSavedProfiles();
+  }
+
+  removeSavedProfile(pubkey) {
+    if (!pubkey) {
+      return { removed: false };
+    }
+
+    let result;
+    try {
+      result = this.services.removeSavedProfile(pubkey) || { removed: false };
+    } catch (error) {
+      console.error("Failed to remove saved profile:", error);
+      result = { removed: false, error };
+    }
+
+    if (result?.removed) {
+      if (
+        this.normalizeHexPubkey(pubkey) ===
+        this.normalizeHexPubkey(this.getActivePubkey())
+      ) {
+        this.setActivePubkey(null);
+      }
+      this.renderSavedProfiles();
+    }
+
+    return result;
+  }
+
+  async hydrateActiveWalletSettings(pubkey) {
+    const hydrate = this.services.nwcSettings?.hydrateNwcSettingsForPubkey;
+    if (typeof hydrate !== "function") {
+      return null;
+    }
+
+    const normalized = this.normalizeHexPubkey(
+      pubkey !== undefined ? pubkey : this.getActivePubkey(),
+    );
+    if (!normalized) {
+      return null;
+    }
+
+    try {
+      return await hydrate(normalized);
+    } catch (error) {
+      console.warn(
+        `[ProfileModalController] Failed to hydrate wallet settings for ${normalized}:`,
+        error,
+      );
+      return null;
+    }
+  }
+
+  async switchProfile(pubkey, { entry } = {}) {
+    if (!pubkey) {
+      return { switched: false, reason: "missing-pubkey" };
+    }
+
+    let result;
+    try {
+      result = await this.requestSwitchProfile({ pubkey, entry });
+    } catch (error) {
+      const message =
+        error && typeof error.message === "string" && error.message.trim()
+          ? error.message.trim()
+          : "Failed to switch profiles. Please try again.";
+      this.showError(message);
+      return {
+        switched: false,
+        error,
+        reason: error?.code || "switch-error",
+      };
+    }
+
+    if (!result?.switched) {
+      this.hide();
+      return result || { switched: false };
+    }
+
+    await this.hydrateActiveWalletSettings(pubkey);
+
+    this.profileSwitcherSelectionPubkey = null;
+    this.renderSavedProfiles();
+    this.hide();
+
+    return result;
+  }
+
+  getSavedProfiles() {
+    return this.state.getSavedProfiles();
+  }
+
+  setSavedProfiles(...args) {
+    return this.state.setSavedProfiles(...args);
+  }
+
+  persistSavedProfiles(...args) {
+    if (typeof this.services.persistSavedProfiles === "function") {
+      try {
+        return this.services.persistSavedProfiles(...args);
+      } catch (error) {
+        console.warn(
+          "[ProfileModalController] Persist saved profiles service threw:",
+          error,
+        );
+      }
+    }
+    return this.state.persistSavedProfiles(...args);
+  }
+
+  getActivePubkey() {
+    return this.state.getActivePubkey();
+  }
+
+  setActivePubkey(...args) {
+    return this.state.setActivePubkey(...args);
+  }
+
+  getCachedProfileSelection() {
+    return this.state.getCachedSelection();
+  }
+
+  setCachedProfileSelection(...args) {
+    return this.state.setCachedSelection(...args);
+  }
+
+  getActivePane() {
+    return this.state.getActivePane();
+  }
+
+  setActivePane(...args) {
+    return this.state.setActivePane(...args);
+  }
+
+  isWalletBusy() {
+    return Boolean(this.state.getWalletBusy());
+  }
+
+  setWalletPaneBusy(isBusy) {
+    const result = this.state.setWalletBusy(Boolean(isBusy));
+    if (this.panes.wallet instanceof HTMLElement) {
+      this.panes.wallet.setAttribute(
+        "aria-busy",
+        this.isWalletBusy() ? "true" : "false",
+      );
+    }
+    this.applyWalletControlState();
+    return result;
+  }
+}
+
+export default ProfileModalController;
diff --git a/js/ui/views/VideoListView.js b/js/ui/views/VideoListView.js
new file mode 100644
index 00000000..3bee2039
--- /dev/null
+++ b/js/ui/views/VideoListView.js
@@ -0,0 +1,996 @@
+import { VideoCard } from "../components/VideoCard.js";
+import {
+  subscribeToVideoViewCount,
+  unsubscribeFromVideoViewCount,
+} from "../../viewCounter.js";
+
+const EMPTY_VIDEO_LIST_SIGNATURE = "__EMPTY__";
+
+export class VideoListView {
+  constructor(options = {}) {
+    const {
+      document: doc = typeof document !== "undefined" ? document : null,
+      container = null,
+      mediaLoader = null,
+      badgeHelpers = {},
+      formatters = {},
+      helpers = {},
+      assets = {},
+      state = {},
+      utils = {},
+      renderers = {},
+    } = options;
+
+    this.document = doc;
+    this.window = this.document?.defaultView ||
+      (typeof window !== "undefined" ? window : null);
+    this.container = null;
+    this.mediaLoader = mediaLoader;
+
+    this.badgeHelpers = {
+      attachHealthBadges: badgeHelpers.attachHealthBadges || (() => {}),
+      attachUrlHealthBadges:
+        badgeHelpers.attachUrlHealthBadges || (() => {}),
+    };
+
+    this.formatters = {
+      formatTimeAgo: formatters.formatTimeAgo || ((timestamp) => timestamp),
+      formatViewCountLabel:
+        formatters.formatViewCountLabel || ((total) => `${total}`),
+    };
+
+    this.helpers = {
+      escapeHtml: helpers.escapeHtml || ((value) => value),
+      isMagnetSupported: helpers.isMagnetSupported || (() => false),
+      toLocaleString: helpers.toLocaleString || ((value) => value),
+    };
+
+    this.assets = {
+      fallbackThumbnailSrc: assets.fallbackThumbnailSrc || "",
+      unsupportedBtihMessage: assets.unsupportedBtihMessage || "",
+    };
+
+    this.state = {
+      loadedThumbnails:
+        state.loadedThumbnails instanceof Map ? state.loadedThumbnails : new Map(),
+      videosMap: state.videosMap instanceof Map ? state.videosMap : new Map(),
+      urlHealthByVideoId:
+        state.urlHealthByVideoId instanceof Map
+          ? state.urlHealthByVideoId
+          : new Map(),
+      streamHealthByVideoId:
+        state.streamHealthByVideoId instanceof Map
+          ? state.streamHealthByVideoId
+          : new Map(),
+      feedMetadata:
+        state.feedMetadata && typeof state.feedMetadata === "object"
+          ? { ...state.feedMetadata }
+          : null,
+    };
+
+    this.renderers = {
+      getLoadingMarkup:
+        typeof renderers.getLoadingMarkup === "function"
+          ? renderers.getLoadingMarkup
+          : () => "",
+    };
+
+    this.utils = {
+      dedupeVideos:
+        typeof utils.dedupeVideos === "function"
+          ? utils.dedupeVideos
+          : (videos) => (Array.isArray(videos) ? [...videos] : []),
+      getAllEvents:
+        typeof utils.getAllEvents === "function" ? utils.getAllEvents : () => [],
+      hasOlderVersion:
+        typeof utils.hasOlderVersion === "function"
+          ? utils.hasOlderVersion
+          : () => false,
+      derivePointerInfo:
+        typeof utils.derivePointerInfo === "function"
+          ? utils.derivePointerInfo
+          : () => null,
+      persistWatchHistoryMetadata:
+        typeof utils.persistWatchHistoryMetadata === "function"
+          ? utils.persistWatchHistoryMetadata
+          : () => {},
+      getShareUrlBase:
+        typeof utils.getShareUrlBase === "function"
+          ? utils.getShareUrlBase
+          : () => "",
+      buildShareUrlFromNevent:
+        typeof utils.buildShareUrlFromNevent === "function"
+          ? utils.buildShareUrlFromNevent
+          : () => "",
+      buildShareUrlFromEventId:
+        typeof utils.buildShareUrlFromEventId === "function"
+          ? utils.buildShareUrlFromEventId
+          : () => "",
+      getKnownVideoPostedAt:
+        typeof utils.getKnownVideoPostedAt === "function"
+          ? utils.getKnownVideoPostedAt
+          : () => null,
+      resolveVideoPostedAt:
+        typeof utils.resolveVideoPostedAt === "function"
+          ? utils.resolveVideoPostedAt
+          : null,
+      canManageBlacklist:
+        typeof utils.canManageBlacklist === "function"
+          ? utils.canManageBlacklist
+          : () => false,
+      canEditVideo:
+        typeof utils.canEditVideo === "function" ? utils.canEditVideo : () => false,
+      canDeleteVideo:
+        typeof utils.canDeleteVideo === "function"
+          ? utils.canDeleteVideo
+          : (video) => this.utils.canEditVideo(video),
+      batchFetchProfiles:
+        typeof utils.batchFetchProfiles === "function"
+          ? utils.batchFetchProfiles
+          : () => {},
+      bindThumbnailFallbacks:
+        typeof utils.bindThumbnailFallbacks === "function"
+          ? utils.bindThumbnailFallbacks
+          : () => {},
+      handleUrlHealthBadge:
+        typeof utils.handleUrlHealthBadge === "function"
+          ? utils.handleUrlHealthBadge
+          : () => {},
+      refreshDiscussionCounts:
+        typeof utils.refreshDiscussionCounts === "function"
+          ? utils.refreshDiscussionCounts
+          : () => {},
+      ensureGlobalMoreMenuHandlers:
+        typeof utils.ensureGlobalMoreMenuHandlers === "function"
+          ? utils.ensureGlobalMoreMenuHandlers
+          : () => {},
+      closeAllMenus:
+        typeof utils.closeAllMenus === "function" ? utils.closeAllMenus : () => {},
+    };
+
+    this.renderedVideoIds = new Set();
+    this.videoCardInstances = [];
+    this.viewCountSubscriptions = new Map();
+    this.currentVideos = [];
+    this.lastRenderedVideoSignature = null;
+    this._lastRenderedVideoListElement = null;
+
+    this.handlers = {
+      playback: null,
+      edit: null,
+      revert: null,
+      delete: null,
+      blacklist: null,
+    };
+
+    this.emitter = typeof EventTarget !== "undefined" ? new EventTarget() : null;
+    this._boundClickHandler = this.handleContainerClick.bind(this);
+
+    if (container) {
+      this.setContainer(container);
+    }
+  }
+
+  addEventListener(type, listener, options) {
+    if (!this.emitter) return;
+    this.emitter.addEventListener(type, listener, options);
+  }
+
+  removeEventListener(type, listener, options) {
+    if (!this.emitter) return;
+    this.emitter.removeEventListener(type, listener, options);
+  }
+
+  dispatchEvent(event) {
+    if (!this.emitter) {
+      return false;
+    }
+    return this.emitter.dispatchEvent(event);
+  }
+
+  setContainer(container) {
+    if (container === this.container) {
+      return;
+    }
+
+    if (this.container) {
+      this.container.removeEventListener("click", this._boundClickHandler);
+    }
+
+    this.container = container || null;
+
+    if (this.container) {
+      this.container.addEventListener("click", this._boundClickHandler);
+    }
+  }
+
+  mount(container) {
+    this.setContainer(container);
+    return this.container;
+  }
+
+  unmount() {
+    this.setContainer(null);
+  }
+
+  showLoading(message = "") {
+    if (!this.container) {
+      return;
+    }
+
+    const markup = this.renderers.getLoadingMarkup(message);
+    if (typeof markup === "string") {
+      this.container.innerHTML = markup;
+    }
+  }
+
+  destroy() {
+    this.unmount();
+    this.teardownAllViewCountSubscriptions();
+    this.renderedVideoIds.clear();
+    this.videoCardInstances = [];
+    this.currentVideos = [];
+    this.lastRenderedVideoSignature = null;
+    this._lastRenderedVideoListElement = null;
+  }
+
+  setPlaybackHandler(handler) {
+    this.handlers.playback = typeof handler === "function" ? handler : null;
+  }
+
+  setEditHandler(handler) {
+    this.handlers.edit = typeof handler === "function" ? handler : null;
+  }
+
+  setRevertHandler(handler) {
+    this.handlers.revert = typeof handler === "function" ? handler : null;
+  }
+
+  setDeleteHandler(handler) {
+    this.handlers.delete = typeof handler === "function" ? handler : null;
+  }
+
+  setBlacklistHandler(handler) {
+    this.handlers.blacklist = typeof handler === "function" ? handler : null;
+  }
+
+  render(videos, metadata = null) {
+    if (!this.container) {
+      return [];
+    }
+
+    if (this._lastRenderedVideoListElement !== this.container) {
+      this.lastRenderedVideoSignature = null;
+      this._lastRenderedVideoListElement = this.container;
+    }
+
+    const normalizedMetadata =
+      metadata && typeof metadata === "object" ? { ...metadata } : null;
+    this.state.feedMetadata = normalizedMetadata;
+
+    const source = Array.isArray(videos) ? videos : [];
+    const dedupedVideos = this.utils.dedupeVideos(source);
+    const displayVideos = dedupedVideos.filter(
+      (video) => this.utils.canEditVideo(video) || !video?.isPrivate
+    );
+
+    this.syncViewCountSubscriptions(displayVideos);
+    this.cleanupThumbnailCache(displayVideos);
+    this.cleanupHealthCache(displayVideos);
+
+    if (!displayVideos.length) {
+      this.renderedVideoIds.clear();
+      this.videoCardInstances = [];
+      if (this.lastRenderedVideoSignature === EMPTY_VIDEO_LIST_SIGNATURE) {
+        return displayVideos;
+      }
+      this.lastRenderedVideoSignature = EMPTY_VIDEO_LIST_SIGNATURE;
+      this.container.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!
+        </p>`;
+      return displayVideos;
+    }
+
+    displayVideos.sort((a, b) => (b?.created_at || 0) - (a?.created_at || 0));
+    this.currentVideos = displayVideos.slice();
+
+    const signaturePayload = displayVideos.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 : "",
+      enableComments: video?.enableComments === false ? false : true,
+    }));
+    const signature = JSON.stringify(signaturePayload);
+
+    if (signature === this.lastRenderedVideoSignature) {
+      return displayVideos;
+    }
+    this.lastRenderedVideoSignature = signature;
+
+    const previouslyRenderedIds = new Set(this.renderedVideoIds);
+    this.renderedVideoIds.clear();
+
+    const allEvents = this.utils.getAllEvents();
+    const fragment = this.document?.createDocumentFragment?.();
+    if (!fragment) {
+      return displayVideos;
+    }
+
+    const authorSet = new Set();
+    const shareBase = this.computeShareBase();
+    const canManageBlacklist = this.utils.canManageBlacklist();
+    this.videoCardInstances = [];
+
+    displayVideos.forEach((video, index) => {
+      if (!video || !video.id || !video.title) {
+        return;
+      }
+
+      authorSet.add(video.pubkey);
+
+      const shareUrl = this.buildShareUrl(video, shareBase);
+      const canEdit = this.utils.canEditVideo(video);
+      const canDelete = this.utils.canDeleteVideo(video);
+      const highlightClass =
+        canEdit && video.isPrivate ? "video-card--owner-private" : "";
+      const isNewlyRendered = !previouslyRenderedIds.has(video.id);
+      const animationClass = isNewlyRendered ? "video-card--enter" : "";
+      const knownPostedAt = this.utils.getKnownVideoPostedAt(video);
+      const normalizedPostedAt = Number.isFinite(knownPostedAt)
+        ? Math.floor(knownPostedAt)
+        : null;
+      const fallbackTimestamp =
+        normalizedPostedAt !== null
+          ? normalizedPostedAt
+          : Number.isFinite(video?.created_at)
+            ? Math.floor(video.created_at)
+            : null;
+      const timeAgo =
+        fallbackTimestamp !== null
+          ? this.formatters.formatTimeAgo(fallbackTimestamp)
+          : "";
+
+      let hasOlder = false;
+      if (canEdit && video.videoRootId) {
+        hasOlder = this.utils.hasOlderVersion(video, allEvents);
+      }
+
+      const pointerInfo = this.utils.derivePointerInfo(video);
+      if (pointerInfo) {
+        this.utils.persistWatchHistoryMetadata(video, pointerInfo);
+      }
+
+      const videoCard = new VideoCard({
+        document: this.document,
+        video,
+        index,
+        shareUrl,
+        pointerInfo,
+        timeAgo,
+        postedAt: normalizedPostedAt,
+        highlightClass,
+        animationClass,
+        capabilities: {
+          canEdit,
+          canDelete,
+          canRevert: hasOlder,
+          canManageBlacklist,
+        },
+        helpers: {
+          escapeHtml: this.helpers.escapeHtml,
+          isMagnetSupported: this.helpers.isMagnetSupported,
+          toLocaleString: this.helpers.toLocaleString,
+        },
+        assets: {
+          fallbackThumbnailSrc: this.assets.fallbackThumbnailSrc,
+          unsupportedBtihMessage: this.assets.unsupportedBtihMessage,
+        },
+        state: {
+          loadedThumbnails: this.state.loadedThumbnails,
+          urlHealthByVideoId: this.state.urlHealthByVideoId,
+          streamHealthByVideoId: this.state.streamHealthByVideoId,
+        },
+        ensureGlobalMoreMenuHandlers: () =>
+          this.utils.ensureGlobalMoreMenuHandlers(),
+        onRequestCloseAllMenus: () => this.closeAllMenus(),
+        formatters: {
+          formatTimeAgo: this.formatters.formatTimeAgo,
+        },
+      });
+
+      videoCard.onPlay = ({ event: domEvent, video: cardVideo }) => {
+        const trigger = domEvent?.currentTarget || domEvent?.target;
+        const detail = this.extractPlaybackDetail(trigger, cardVideo || video);
+        this.emitSelected(detail);
+      };
+
+      videoCard.onEdit = ({ video: editVideo, index: editIndex }) => {
+        if (this.handlers.edit) {
+          this.handlers.edit({ video: editVideo, index: editIndex });
+        }
+      };
+
+      videoCard.onRevert = ({ video: revertVideo, index: revertIndex }) => {
+        if (this.handlers.revert) {
+          this.handlers.revert({ video: revertVideo, index: revertIndex });
+        }
+      };
+
+      videoCard.onDelete = ({ video: deleteVideo, index: deleteIndex }) => {
+        if (this.handlers.delete) {
+          this.handlers.delete({ video: deleteVideo, index: deleteIndex });
+        }
+      };
+
+      videoCard.onMoreAction = ({ dataset }) => {
+        const action = dataset?.action || "";
+        if (action === "blacklist-author") {
+          if (this.handlers.blacklist) {
+            this.handlers.blacklist({ video, dataset });
+          }
+          return;
+        }
+
+        if (action === "copy-link") {
+          const shareDetail = this.buildShareDetail(video, dataset);
+          this.emitShare(shareDetail);
+          return;
+        }
+
+        this.emitContextAction(action, { video, dataset });
+      };
+
+      videoCard.onAuthorNavigate = ({ pubkey }) => {
+        this.emitContextAction("open-channel", {
+          video,
+          dataset: { author: pubkey || video.pubkey || "", context: "card" },
+        });
+      };
+
+      const cardEl = videoCard.getRoot();
+      if (!cardEl) {
+        return;
+      }
+
+      if (pointerInfo) {
+        this.registerVideoViewCountElement(cardEl, pointerInfo);
+      }
+
+      if (video && video.id) {
+        this.state.videosMap.set(video.id, video);
+      }
+
+      fragment.appendChild(cardEl);
+      this.renderedVideoIds.add(video.id);
+      this.videoCardInstances.push(videoCard);
+
+      const shouldResolvePostedAt =
+        normalizedPostedAt === null &&
+        typeof this.utils.resolveVideoPostedAt === "function";
+
+      if (shouldResolvePostedAt) {
+        Promise.resolve(this.utils.resolveVideoPostedAt(video))
+          .then((resolvedPostedAt) => {
+            if (!Number.isFinite(resolvedPostedAt)) {
+              return;
+            }
+            if (!this.videoCardInstances.includes(videoCard)) {
+              return;
+            }
+            if (videoCard.video?.id !== video.id) {
+              return;
+            }
+            videoCard.updatePostedAt(Math.floor(resolvedPostedAt));
+          })
+          .catch((error) => {
+            if (this.window?.console?.warn) {
+              this.window.console.warn(
+                "[VideoListView] Failed to resolve posted timestamp:",
+                error
+              );
+            }
+          });
+      }
+    });
+
+    this.container.innerHTML = "";
+    this.container.appendChild(fragment);
+
+    this.badgeHelpers.attachHealthBadges(this.container);
+    this.badgeHelpers.attachUrlHealthBadges(this.container, ({ badgeEl, url, eventId }) => {
+      this.utils.handleUrlHealthBadge({
+        video: this.state.videosMap.get(eventId) || { id: eventId },
+        url,
+        badgeEl,
+      });
+    });
+
+    this.utils.bindThumbnailFallbacks(this.container);
+
+    if (this.mediaLoader && typeof this.mediaLoader.observe === "function") {
+      const lazyEls = this.container.querySelectorAll("[data-lazy]");
+      lazyEls.forEach((el) => this.mediaLoader.observe(el));
+    }
+
+    if (authorSet.size) {
+      this.utils.batchFetchProfiles(authorSet);
+    }
+    this.utils.refreshDiscussionCounts(displayVideos, {
+      container: this.container,
+    });
+    this.pruneDetachedViewCountElements();
+
+    return displayVideos;
+  }
+
+  cacheUrlHealth(videoId, entry) {
+    if (!videoId || !(this.state.urlHealthByVideoId instanceof Map)) {
+      return;
+    }
+
+    if (!entry || typeof entry !== "object") {
+      this.state.urlHealthByVideoId.delete(videoId);
+      return;
+    }
+
+    const normalized = {
+      status:
+        typeof entry.status === "string" && entry.status ? entry.status : "checking",
+      message:
+        typeof entry.message === "string" && entry.message
+          ? entry.message
+          : "Checking hosted URL…",
+    };
+
+    if (Number.isFinite(entry.lastCheckedAt)) {
+      normalized.lastCheckedAt = Math.floor(entry.lastCheckedAt);
+    }
+
+    this.state.urlHealthByVideoId.set(videoId, normalized);
+  }
+
+  cacheStreamHealth(videoId, entry) {
+    if (!videoId || !(this.state.streamHealthByVideoId instanceof Map)) {
+      return;
+    }
+
+    if (!entry || typeof entry !== "object") {
+      this.state.streamHealthByVideoId.delete(videoId);
+      return;
+    }
+
+    const normalized = {
+      state:
+        typeof entry.state === "string" && entry.state ? entry.state : "unknown",
+    };
+
+    if (Number.isFinite(entry.peers)) {
+      normalized.peers = Math.max(0, Number(entry.peers));
+    }
+    if (typeof entry.reason === "string" && entry.reason) {
+      normalized.reason = entry.reason;
+    }
+    if (Number.isFinite(entry.checkedAt)) {
+      normalized.checkedAt = Math.floor(entry.checkedAt);
+    }
+    if (typeof entry.text === "string" && entry.text) {
+      normalized.text = entry.text;
+    }
+    if (typeof entry.tooltip === "string" && entry.tooltip) {
+      normalized.tooltip = entry.tooltip;
+    }
+    if (entry.role === "alert" || entry.role === "status") {
+      normalized.role = entry.role;
+    }
+    if (entry.ariaLive === "assertive" || entry.ariaLive === "polite") {
+      normalized.ariaLive = entry.ariaLive;
+    }
+
+    this.state.streamHealthByVideoId.set(videoId, normalized);
+  }
+
+  cleanupHealthCache(videos) {
+    const activeIds = new Set();
+    if (Array.isArray(videos)) {
+      videos.forEach((video) => {
+        if (video && typeof video.id === "string" && video.id) {
+          activeIds.add(video.id);
+        }
+      });
+    }
+
+    if (this.state.urlHealthByVideoId instanceof Map) {
+      Array.from(this.state.urlHealthByVideoId.keys()).forEach((videoId) => {
+        if (!activeIds.has(videoId)) {
+          this.state.urlHealthByVideoId.delete(videoId);
+        }
+      });
+    }
+
+    if (this.state.streamHealthByVideoId instanceof Map) {
+      Array.from(this.state.streamHealthByVideoId.keys()).forEach((videoId) => {
+        if (!activeIds.has(videoId)) {
+          this.state.streamHealthByVideoId.delete(videoId);
+        }
+      });
+    }
+  }
+
+  updateVideo(videoId, patch) {
+    if (!videoId) {
+      return null;
+    }
+
+    const index = this.currentVideos.findIndex((video) => video?.id === videoId);
+    if (index === -1) {
+      return null;
+    }
+
+    const current = this.currentVideos[index] || {};
+    const next =
+      typeof patch === "function" ? patch({ ...current }) : { ...current, ...patch };
+
+    this.currentVideos[index] = next;
+    this.state.videosMap.set(videoId, next);
+    this.render(this.currentVideos.slice(), this.state.feedMetadata);
+    return next;
+  }
+
+  computeShareBase() {
+    const explicit = this.utils.getShareUrlBase();
+    if (explicit) {
+      return explicit;
+    }
+
+    const win = this.window;
+    if (win?.location) {
+      const origin = win.location.origin || "";
+      const pathname = win.location.pathname || "";
+      if (origin || pathname) {
+        return `${origin}${pathname}`;
+      }
+      if (win.location.href) {
+        return win.location.href.split(/[?#]/)[0];
+      }
+    }
+    return "";
+  }
+
+  buildShareUrl(video, shareBase) {
+    if (!video?.id) {
+      return "#";
+    }
+
+    const win = this.window;
+    try {
+      const nevent = win?.NostrTools?.nip19?.neventEncode({ id: video.id });
+      if (nevent) {
+        const explicit = this.utils.buildShareUrlFromNevent(nevent);
+        if (explicit) {
+          return explicit;
+        }
+        if (shareBase) {
+          return `${shareBase}?v=${encodeURIComponent(nevent)}`;
+        }
+      }
+    } catch (error) {
+      // ignore and fall back below
+    }
+
+    if (shareBase) {
+      return `${shareBase}?v=${encodeURIComponent(video.id)}`;
+    }
+
+    return "#";
+  }
+
+  syncViewCountSubscriptions(videos) {
+    const activePointerKeys = new Set();
+    videos.forEach((video) => {
+      const pointerInfo = this.utils.derivePointerInfo(video);
+      if (pointerInfo?.key) {
+        activePointerKeys.add(pointerInfo.key);
+      }
+    });
+
+    const keysToRemove = [];
+    for (const [key, entry] of this.viewCountSubscriptions.entries()) {
+      if (!activePointerKeys.has(key)) {
+        keysToRemove.push(key);
+        continue;
+      }
+      if (entry && entry.elements instanceof Set) {
+        entry.elements.clear();
+      }
+    }
+
+    keysToRemove.forEach((key) => {
+      const entry = this.viewCountSubscriptions.get(key);
+      if (entry && entry.pointer && entry.token) {
+        try {
+          unsubscribeFromVideoViewCount(entry.pointer, entry.token);
+        } catch (error) {
+          console.warn(
+            `[viewCount] Failed to unsubscribe from stale pointer ${key}:`,
+            error
+          );
+        }
+      }
+      this.viewCountSubscriptions.delete(key);
+    });
+  }
+
+  cleanupThumbnailCache(videos) {
+    const cache = this.state.loadedThumbnails;
+    if (!cache || !cache.size) {
+      return;
+    }
+
+    const activeIds = new Set();
+    videos.forEach((video) => {
+      if (video && typeof video.id === "string" && video.id) {
+        activeIds.add(video.id);
+      }
+    });
+
+    Array.from(cache.keys()).forEach((videoId) => {
+      if (!activeIds.has(videoId)) {
+        cache.delete(videoId);
+      }
+    });
+  }
+
+  extractPlaybackDetail(trigger, video) {
+    const element = trigger instanceof HTMLElement ? trigger : null;
+    const target = element?.closest("[data-play-url],[data-play-magnet]") || element;
+
+    const rawUrlValue =
+      (target?.dataset && typeof target.dataset.playUrl === "string"
+        ? target.dataset.playUrl
+        : null) ?? target?.getAttribute?.("data-play-url") ?? "";
+    const rawMagnetValue =
+      (target?.dataset && typeof target.dataset.playMagnet === "string"
+        ? target.dataset.playMagnet
+        : null) ?? target?.getAttribute?.("data-play-magnet") ?? "";
+
+    let url = "";
+    if (rawUrlValue) {
+      try {
+        url = decodeURIComponent(rawUrlValue);
+      } catch (error) {
+        url = rawUrlValue;
+      }
+    }
+
+    const magnet = typeof rawMagnetValue === "string" ? rawMagnetValue : "";
+    const videoId =
+      target?.dataset?.videoId || target?.getAttribute?.("data-video-id") || video?.id || "";
+
+    return { videoId, url, magnet, video };
+  }
+
+  emitSelected(detail) {
+    const enriched = {
+      ...detail,
+      video: detail?.video || this.state.videosMap.get(detail?.videoId) || null,
+    };
+
+    if (this.handlers.playback) {
+      this.handlers.playback(enriched);
+    }
+
+    this.emit("video:selected", enriched);
+  }
+
+  buildShareDetail(video, dataset = {}) {
+    const eventId = dataset.eventId || video?.id || "";
+    const shareUrl = this.utils.buildShareUrlFromEventId(eventId);
+    return {
+      action: "copy-link",
+      video,
+      eventId,
+      shareUrl,
+      dataset,
+    };
+  }
+
+  emitShare(detail) {
+    this.emit("video:share", detail);
+  }
+
+  emitContextAction(action, payload = {}) {
+    if (!action) {
+      return;
+    }
+    this.emit("video:context-action", { action, ...payload });
+  }
+
+  emit(type, detail) {
+    if (this.emitter) {
+      this.emitter.dispatchEvent(new CustomEvent(type, { detail }));
+    }
+    if (this.container) {
+      this.container.dispatchEvent(
+        new CustomEvent(type, { detail, bubbles: true, composed: true })
+      );
+    }
+  }
+
+  ensureViewCountSubscription(pointerInfo) {
+    if (!pointerInfo || !pointerInfo.key || !pointerInfo.pointer) {
+      return null;
+    }
+
+    const existing = this.viewCountSubscriptions.get(pointerInfo.key);
+    if (existing) {
+      return existing;
+    }
+
+    const entry = {
+      pointer: pointerInfo.pointer,
+      key: pointerInfo.key,
+      token: null,
+      elements: new Set(),
+      lastTotal: null,
+      lastStatus: "idle",
+      lastText: "– views",
+    };
+
+    try {
+      const token = subscribeToVideoViewCount(pointerInfo.pointer, ({ total, status }) => {
+        let text;
+        if (Number.isFinite(total)) {
+          const numeric = Number(total);
+          entry.lastTotal = numeric;
+          text = this.formatters.formatViewCountLabel(numeric);
+        } else if (status === "hydrating") {
+          text = "Loading views…";
+        } else {
+          text = "– views";
+        }
+
+        entry.lastStatus = status;
+        entry.lastText = text;
+
+        for (const el of Array.from(entry.elements)) {
+          if (!el || !el.isConnected) {
+            entry.elements.delete(el);
+            continue;
+          }
+          el.textContent = text;
+        }
+      });
+      entry.token = token;
+      this.viewCountSubscriptions.set(pointerInfo.key, entry);
+      return entry;
+    } catch (error) {
+      console.warn("[viewCount] Failed to subscribe to view counter:", error);
+      return null;
+    }
+  }
+
+  registerVideoViewCountElement(cardEl, pointerInfo) {
+    if (!cardEl || !pointerInfo) {
+      return;
+    }
+
+    const viewCountEl = cardEl.querySelector("[data-view-count]");
+    if (!viewCountEl) {
+      return;
+    }
+
+    if (!viewCountEl.textContent || !viewCountEl.textContent.trim()) {
+      viewCountEl.textContent = "– views";
+    }
+
+    const entry = this.ensureViewCountSubscription(pointerInfo);
+    if (!entry) {
+      return;
+    }
+
+    entry.elements.add(viewCountEl);
+    if (typeof pointerInfo.key === "string") {
+      viewCountEl.dataset.viewPointer = pointerInfo.key;
+    }
+    viewCountEl.textContent = entry.lastText;
+  }
+
+  pruneDetachedViewCountElements() {
+    for (const entry of this.viewCountSubscriptions.values()) {
+      if (!entry || !(entry.elements instanceof Set)) {
+        continue;
+      }
+      for (const el of Array.from(entry.elements)) {
+        if (!el || !el.isConnected) {
+          entry.elements.delete(el);
+        }
+      }
+    }
+  }
+
+  teardownAllViewCountSubscriptions() {
+    const keys = Array.from(this.viewCountSubscriptions.keys());
+    keys.forEach((key) => {
+      const entry = this.viewCountSubscriptions.get(key);
+      if (entry && entry.token && entry.pointer) {
+        try {
+          unsubscribeFromVideoViewCount(entry.pointer, entry.token);
+        } catch (error) {
+          console.warn(
+            `[viewCount] Failed to unsubscribe from pointer ${key}:`,
+            error
+          );
+        }
+      }
+      this.viewCountSubscriptions.delete(key);
+    });
+  }
+
+  closeAllMenus() {
+    if (Array.isArray(this.videoCardInstances) && this.videoCardInstances.length) {
+      this.videoCardInstances.forEach((card) => {
+        if (!card) {
+          return;
+        }
+        if (typeof card.closeMoreMenu === "function") {
+          card.closeMoreMenu();
+        }
+        if (typeof card.closeSettingsMenu === "function") {
+          card.closeSettingsMenu();
+        }
+      });
+    }
+
+    if (!this.document) {
+      return;
+    }
+
+    const menus = this.document.querySelectorAll("[data-more-menu]");
+    menus.forEach((menu) => {
+      if (menu instanceof HTMLElement) {
+        menu.classList.add("hidden");
+      }
+    });
+
+    const buttons = this.document.querySelectorAll("[data-more-dropdown]");
+    buttons.forEach((btn) => {
+      if (btn instanceof HTMLElement) {
+        btn.setAttribute("aria-expanded", "false");
+      }
+    });
+  }
+
+  handleContainerClick(event) {
+    if (!event || !this.container) {
+      return;
+    }
+
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (!target) {
+      return;
+    }
+
+    const trigger = target.closest("[data-play-magnet],[data-play-url]");
+    if (!trigger || !this.container.contains(trigger)) {
+      return;
+    }
+
+    const isPrimaryClick =
+      typeof event.button !== "number" || event.button === 0;
+    if (!isPrimaryClick || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const detail = this.extractPlaybackDetail(trigger, null);
+    this.emitSelected(detail);
+  }
+}
diff --git a/js/ui/watchHistoryController.js b/js/ui/watchHistoryController.js
new file mode 100644
index 00000000..f2d3058d
--- /dev/null
+++ b/js/ui/watchHistoryController.js
@@ -0,0 +1,367 @@
+import { isDevMode } from "../config.js";
+import {
+  normalizePointerInput,
+  pointerKey as derivePointerKey,
+} from "../nostr.js";
+
+const noop = () => {};
+
+function resolveCardElement(trigger) {
+  if (!(trigger instanceof HTMLElement)) {
+    return null;
+  }
+  const candidate = trigger.closest(".video-card");
+  return candidate instanceof HTMLElement ? candidate : null;
+}
+
+function safeInvoke(callback, payload) {
+  if (typeof callback !== "function") {
+    return;
+  }
+  try {
+    callback(payload);
+  } catch (error) {
+    if (isDevMode) {
+      console.warn(
+        "[watchHistoryController] onStateChange handler failed:",
+        error,
+      );
+    }
+  }
+}
+
+export default class WatchHistoryController {
+  constructor({
+    watchHistoryService,
+    nostrClient,
+    showError,
+    showSuccess,
+    dropWatchHistoryMetadata,
+    getActivePubkey,
+  } = {}) {
+    this.watchHistoryService = watchHistoryService || null;
+    this.nostrClient = nostrClient || null;
+    this.showError = typeof showError === "function" ? showError : noop;
+    this.showSuccess = typeof showSuccess === "function" ? showSuccess : noop;
+    this.dropWatchHistoryMetadata =
+      typeof dropWatchHistoryMetadata === "function"
+        ? dropWatchHistoryMetadata
+        : noop;
+    this.getActivePubkey =
+      typeof getActivePubkey === "function" ? getActivePubkey : () => "";
+  }
+
+  buildPointerFromDataset(dataset = {}) {
+    if (!dataset || typeof dataset !== "object") {
+      return null;
+    }
+
+    const typeValue =
+      typeof dataset.pointerType === "string" ? dataset.pointerType : "";
+    const normalizedType = typeValue === "a" ? "a" : typeValue === "e" ? "e" : "";
+    const value =
+      typeof dataset.pointerValue === "string" && dataset.pointerValue.trim()
+        ? dataset.pointerValue.trim()
+        : "";
+
+    if (!normalizedType || !value) {
+      return null;
+    }
+
+    const pointer = { type: normalizedType, value };
+
+    if (typeof dataset.pointerRelay === "string" && dataset.pointerRelay.trim()) {
+      pointer.relay = dataset.pointerRelay.trim();
+    }
+
+    if (typeof dataset.pointerWatchedAt === "string" && dataset.pointerWatchedAt) {
+      const parsed = Number.parseInt(dataset.pointerWatchedAt, 10);
+      if (Number.isFinite(parsed)) {
+        pointer.watchedAt = parsed;
+      }
+    }
+
+    if (dataset.pointerSession === "true") {
+      pointer.session = true;
+    }
+
+    return pointer;
+  }
+
+  resolvePointerKey(pointer, explicitKey) {
+    if (typeof explicitKey === "string" && explicitKey.trim()) {
+      return explicitKey.trim();
+    }
+
+    const normalized = normalizePointerInput(pointer);
+    if (!normalized) {
+      return "";
+    }
+
+    try {
+      return derivePointerKey(normalized) || "";
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(
+          "[watchHistoryController] Failed to derive pointer key:",
+          error,
+        );
+      }
+      return "";
+    }
+  }
+
+  applyCardState(card, { status, removeCard } = {}) {
+    if (!(card instanceof HTMLElement)) {
+      return;
+    }
+
+    if (status === "pending") {
+      card.dataset.historyRemovalPending = "true";
+      card.classList.add("opacity-60");
+      card.classList.add("pointer-events-none");
+      return;
+    }
+
+    delete card.dataset.historyRemovalPending;
+    card.classList.remove("opacity-60", "pointer-events-none");
+
+    if (status === "removed" && removeCard) {
+      card.remove();
+    }
+  }
+
+  resolveActor(actor) {
+    if (typeof actor === "string" && actor.trim()) {
+      return actor.trim();
+    }
+
+    const candidate = this.getActivePubkey();
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+
+    const sessionPubkey = this.nostrClient?.sessionActor?.pubkey;
+    if (typeof sessionPubkey === "string" && sessionPubkey.trim()) {
+      return sessionPubkey.trim();
+    }
+
+    return "";
+  }
+
+  async removeEntry(options = {}) {
+    if (!this.watchHistoryService?.isEnabled?.()) {
+      this.showError("Watch history sync is not available right now.");
+      const error = new Error("watch-history-disabled");
+      error.handled = true;
+      throw error;
+    }
+
+    const {
+      dataset = {},
+      pointer: pointerInput = null,
+      pointerKey: explicitPointerKey = "",
+      reason: providedReason,
+      trigger = null,
+      removeCard = false,
+      actor,
+      items,
+      onStateChange,
+    } = options;
+
+    const pointer = pointerInput || this.buildPointerFromDataset(dataset);
+    const pointerKey = this.resolvePointerKey(pointer, explicitPointerKey || dataset.pointerKey);
+
+    if (!pointerKey) {
+      this.showError("Unable to determine which history entry to remove.");
+      return null;
+    }
+
+    const reason =
+      typeof providedReason === "string" && providedReason.trim()
+        ? providedReason.trim()
+        : typeof dataset.reason === "string" && dataset.reason.trim()
+        ? dataset.reason.trim()
+        : "remove-item";
+
+    const card = resolveCardElement(trigger);
+    this.applyCardState(card, { status: "pending" });
+    safeInvoke(onStateChange, { status: "pending", card, removeCard });
+
+    try {
+      const result = await this.handleWatchHistoryRemoval({
+        actor,
+        items,
+        reason,
+        removed: {
+          pointer,
+          pointerKey,
+        },
+      });
+
+      this.applyCardState(card, { status: removeCard ? "removed" : "idle", removeCard });
+      safeInvoke(onStateChange, {
+        status: removeCard ? "removed" : "idle",
+        card,
+        removeCard,
+        result,
+      });
+
+      return result;
+    } catch (error) {
+      this.applyCardState(card, { status: "idle" });
+      safeInvoke(onStateChange, { status: "error", card, error, removeCard });
+
+      if (!error?.handled) {
+        this.showError("Failed to remove from history. Please try again.");
+      }
+
+      throw error;
+    }
+  }
+
+  async handleWatchHistoryRemoval(payload = {}) {
+    if (!this.watchHistoryService?.isEnabled?.()) {
+      const error = new Error("watch-history-disabled");
+      error.handled = true;
+      this.showError("Watch history sync is not available right now.");
+      throw error;
+    }
+
+    const reason =
+      typeof payload.reason === "string" && payload.reason.trim()
+        ? payload.reason.trim()
+        : "remove-item";
+
+    const actorCandidate = this.resolveActor(payload.actor);
+
+    const removedPointerRaw =
+      payload?.removed?.pointer || payload?.removed?.raw || payload?.removed || null;
+    const removedPointerNormalized = normalizePointerInput(removedPointerRaw);
+    let removedPointerKey =
+      typeof payload?.removed?.pointerKey === "string"
+        ? payload.removed.pointerKey
+        : "";
+    if (!removedPointerKey && removedPointerNormalized) {
+      removedPointerKey = derivePointerKey(removedPointerNormalized) || "";
+    }
+
+    if (removedPointerKey) {
+      this.dropWatchHistoryMetadata(removedPointerKey);
+    }
+
+    const normalizeEntry = (entry) => {
+      if (!entry) {
+        return null;
+      }
+      const pointer = normalizePointerInput(entry.pointer || entry);
+      if (!pointer) {
+        return null;
+      }
+      if (Number.isFinite(entry.watchedAt)) {
+        pointer.watchedAt = Math.floor(entry.watchedAt);
+      } else if (Number.isFinite(entry.pointer?.watchedAt)) {
+        pointer.watchedAt = Math.floor(entry.pointer.watchedAt);
+      }
+      if (entry.pointer?.session === true || entry.session === true) {
+        pointer.session = true;
+      }
+      return pointer;
+    };
+
+    let normalizedItems = null;
+
+    if (Array.isArray(payload.items) && payload.items.length) {
+      normalizedItems = payload.items.map(normalizeEntry).filter(Boolean);
+    }
+
+    if (!normalizedItems) {
+      try {
+        const latest = await this.watchHistoryService.loadLatest(
+          actorCandidate,
+          { allowStale: false },
+        );
+        normalizedItems = Array.isArray(latest)
+          ? latest.map(normalizeEntry).filter(Boolean)
+          : [];
+      } catch (error) {
+        this.showError("Failed to load watch history. Please try again.");
+        if (error && typeof error === "object") {
+          error.handled = true;
+        }
+        throw error;
+      }
+    }
+
+    if (removedPointerKey) {
+      normalizedItems = normalizedItems.filter((entry) => {
+        try {
+          return derivePointerKey(entry) !== removedPointerKey;
+        } catch (error) {
+          return true;
+        }
+      });
+    }
+
+    this.showSuccess("Removing from history…");
+
+    try {
+      const snapshotResult = await this.watchHistoryService.snapshot(normalizedItems, {
+        actor: actorCandidate || undefined,
+        reason,
+      });
+
+      try {
+        await this.nostrClient?.updateWatchHistoryList?.(normalizedItems, {
+          actorPubkey: actorCandidate || undefined,
+          replace: true,
+          source: reason,
+        });
+      } catch (updateError) {
+        if (isDevMode) {
+          console.warn(
+            "[watchHistoryController] Failed to update local watch history list:",
+            updateError,
+          );
+        }
+      }
+
+      this.showSuccess(
+        "Removed from encrypted history. Relay sync may take a moment.",
+      );
+
+      return { handledToasts: true, snapshot: snapshotResult };
+    } catch (error) {
+      let message = "Failed to remove from history. Please try again.";
+      if (error?.result?.retryable) {
+        message =
+          "Removal will retry once encrypted history is accepted by your relays.";
+      }
+      this.showError(message);
+      if (error && typeof error === "object") {
+        error.handled = true;
+      }
+      throw error;
+    }
+  }
+
+  flush(reason = "session-end", context = "watch-history") {
+    if (!this.watchHistoryService?.isEnabled?.()) {
+      return Promise.resolve();
+    }
+    try {
+      const result = this.watchHistoryService.snapshot(undefined, { reason });
+      return Promise.resolve(result).catch((error) => {
+        if (isDevMode) {
+          console.warn(`[${context}] Watch history flush failed:`, error);
+        }
+        throw error;
+      });
+    } catch (error) {
+      if (isDevMode) {
+        console.warn(`[${context}] Failed to queue watch history flush:`, error);
+      }
+      return Promise.reject(error);
+    }
+  }
+}
diff --git a/js/ui/zapController.js b/js/ui/zapController.js
new file mode 100644
index 00000000..d3b95da6
--- /dev/null
+++ b/js/ui/zapController.js
@@ -0,0 +1,988 @@
+import { isDevMode } from "../config.js";
+import {
+  calculateZapShares,
+  fetchLightningMetadata,
+  formatMinRequirement,
+  getCachedLightningEntry,
+  getCachedMetadataByUrl,
+  getCachedPlatformLightningAddress,
+  isMetadataEntryFresh,
+  normalizeLightningAddressKey,
+  rememberLightningMetadata,
+  setCachedPlatformLightningAddress,
+  validateInvoiceAmount,
+} from "../payments/zapSharedState.js";
+import {
+  resolveLightningAddress,
+  fetchPayServiceData,
+  requestInvoice,
+} from "../payments/lnurl.js";
+import { getPlatformLightningAddress } from "../payments/platformAddress.js";
+import {
+  ensureWallet as ensureWalletDefault,
+  sendPayment as sendPaymentDefault,
+} from "../payments/nwcClient.js";
+
+const DEFAULT_SPLIT_SUMMARY = "Enter an amount to view the split.";
+
+export default class ZapController {
+  constructor({
+    videoModal,
+    getCurrentVideo,
+    nwcSettings,
+    getActiveNwcSettings,
+    isUserLoggedIn,
+    hasActiveWalletConnection,
+    splitAndZap,
+    payments = {},
+    callbacks = {},
+    requestWalletPane,
+  } = {}) {
+    this.videoModal = videoModal || null;
+    this.getCurrentVideo =
+      typeof getCurrentVideo === "function" ? getCurrentVideo : () => null;
+    this.nwcSettings =
+      nwcSettings &&
+      typeof nwcSettings === "object" &&
+      typeof nwcSettings.getActiveNwcSettings === "function"
+        ? nwcSettings
+        : null;
+    if (this.nwcSettings) {
+      this.getActiveNwcSettings = () =>
+        this.nwcSettings.getActiveNwcSettings();
+    } else if (typeof getActiveNwcSettings === "function") {
+      this.getActiveNwcSettings = getActiveNwcSettings;
+    } else {
+      this.getActiveNwcSettings = () => ({});
+    }
+    this.isUserLoggedIn =
+      typeof isUserLoggedIn === "function" ? isUserLoggedIn : () => false;
+    if (
+      this.nwcSettings &&
+      typeof this.nwcSettings.hasActiveWalletConnection === "function"
+    ) {
+      this.hasActiveWalletConnection = () =>
+        this.nwcSettings.hasActiveWalletConnection();
+    } else if (typeof hasActiveWalletConnection === "function") {
+      this.hasActiveWalletConnection = hasActiveWalletConnection;
+    } else {
+      this.hasActiveWalletConnection = () => false;
+    }
+    this.splitAndZap =
+      typeof splitAndZap === "function" ? splitAndZap : () => Promise.resolve();
+    this.payments = payments || {};
+    this.callbacks = {
+      onSuccess: typeof callbacks.onSuccess === "function" ? callbacks.onSuccess : null,
+      onError: typeof callbacks.onError === "function" ? callbacks.onError : null,
+    };
+    this.requestWalletPane =
+      typeof requestWalletPane === "function" ? requestWalletPane : null;
+
+    this.modalZapInFlight = false;
+    this.modalZapRetryState = null;
+    this.modalZapAmountValue = 0;
+    this.modalZapCommentValue = "";
+  }
+
+  /** Public API **/
+
+  setVisibility(visible) {
+    const lightningVisible = !!visible;
+    const shouldShow = lightningVisible && this.isUserLoggedIn();
+    const hasWallet = this.hasActiveWalletConnection();
+    if (this.videoModal) {
+      this.videoModal.setZapVisibility(shouldShow);
+      this.videoModal.setWalletPromptVisible(shouldShow && !hasWallet);
+    }
+  }
+
+  resetState({ preserveAmount = false } = {}) {
+    if (!preserveAmount) {
+      this.modalZapAmountValue = 0;
+    }
+    this.modalZapCommentValue = "";
+    this.modalZapInFlight = false;
+    this.resetRetryState();
+    if (this.videoModal) {
+      this.videoModal.setZapCompleted(false);
+      this.videoModal.resetZapForm({
+        amount: preserveAmount ? this.modalZapAmountValue || "" : "",
+        comment: "",
+      });
+      this.videoModal.setZapPending(false);
+      this.videoModal.setZapSplitSummary(DEFAULT_SPLIT_SUMMARY);
+    }
+  }
+
+  open() {
+    this.resetFeedback();
+    this.applyDefaultAmount();
+    this.preloadLightningMetadata().catch((error) => {
+      if (isDevMode) {
+        console.warn("[zap] Preload metadata error:", error);
+      }
+    });
+  }
+
+  close() {
+    this.resetFeedback();
+  }
+
+  setAmount(amount) {
+    const rawAmount = Number(amount);
+    const fallback = this.videoModal?.getZapAmountValue?.() || 0;
+    const value = Number.isFinite(rawAmount) ? rawAmount : fallback;
+    this.modalZapAmountValue = Math.max(0, Math.round(value || 0));
+    this.resetFeedback();
+    this.updateSplitSummary();
+  }
+
+  setComment(comment) {
+    if (typeof comment === "string") {
+      this.modalZapCommentValue = comment.trim();
+      return;
+    }
+    const fallback = this.videoModal?.getZapCommentValue?.();
+    this.modalZapCommentValue = typeof fallback === "string" ? fallback : "";
+  }
+
+  async sendZap({ amount, comment } = {}) {
+    if (this.modalZapInFlight) {
+      return;
+    }
+
+    this.videoModal?.setZapCompleted(false);
+
+    const numericAmount = Number.isFinite(Number(amount))
+      ? Number(amount)
+      : this.modalZapAmountValue;
+    const roundedAmount = Math.max(0, Math.round(numericAmount || 0));
+    this.modalZapAmountValue = roundedAmount;
+
+    const trimmedComment =
+      typeof comment === "string" ? comment.trim() : this.modalZapCommentValue;
+    this.modalZapCommentValue = trimmedComment;
+
+    if (!roundedAmount) {
+      const message = "Enter a zap amount greater than zero.";
+      this.videoModal?.setZapStatus(message, "error");
+      this.notifyError(message);
+      return;
+    }
+
+    const walletSettings = this.getWalletSettingsOrPrompt();
+    if (!walletSettings) {
+      return;
+    }
+
+    this.modalZapInFlight = true;
+    this.videoModal?.setZapPending(true);
+    this.videoModal?.setZapStatus(`Sending ${roundedAmount} sats…`, "warning");
+    this.videoModal?.clearZapReceipts();
+
+    try {
+      if (
+        Array.isArray(this.modalZapRetryState?.shares) &&
+        this.modalZapRetryState.shares.length
+      ) {
+        const retrySuccess = await this.executeRetry({
+          walletSettings,
+          comment: trimmedComment,
+        });
+        if (retrySuccess) {
+          this.modalZapCommentValue = "";
+          this.videoModal?.resetZapForm({ amount: "", comment: "" });
+          this.videoModal?.setZapCompleted(true);
+        }
+        this.applyDefaultAmount();
+        return;
+      }
+
+      const attempt = await this.runZapAttempt({
+        amount: roundedAmount,
+        walletSettings,
+        comment: trimmedComment,
+      });
+      if (!attempt) {
+        this.videoModal?.setZapStatus("", "neutral");
+        return;
+      }
+
+      const { context, result } = attempt;
+      const receipts = Array.isArray(result?.receipts) ? result.receipts : [];
+      this.videoModal?.renderZapReceipts(receipts, { partial: false });
+
+      const creatorShare = context.shares.creatorShare;
+      const platformShare = context.shares.platformShare;
+      const summary = platformShare
+        ? `Sent ${context.shares.total} sats (creator ${creatorShare}, platform ${platformShare}).`
+        : `Sent ${context.shares.total} sats to the creator.`;
+      this.videoModal?.setZapStatus(summary, "success");
+      this.notifySuccess("Zap sent successfully!");
+
+      this.resetRetryState();
+      this.modalZapCommentValue = "";
+      this.videoModal?.resetZapForm({ amount: "", comment: "" });
+      this.videoModal?.setZapCompleted(true);
+      this.applyDefaultAmount();
+    } catch (error) {
+      this.handleZapError({ error, amount: roundedAmount, comment: trimmedComment, walletSettings });
+    } finally {
+      this.modalZapInFlight = false;
+      this.videoModal?.setZapPending(false);
+    }
+  }
+
+  handleWalletLink() {
+    if (this.requestWalletPane) {
+      Promise.resolve()
+        .then(() => this.requestWalletPane())
+        .catch((error) => {
+          console.error("Failed to open wallet pane:", error);
+        });
+    }
+  }
+
+  /** Internal helpers **/
+
+  resetFeedback() {
+    if (!this.videoModal) {
+      return;
+    }
+    this.videoModal.setZapCompleted(false);
+    this.videoModal.setZapStatus("", "neutral");
+    this.videoModal.clearZapReceipts();
+    this.videoModal.setZapRetryPending(false);
+    this.videoModal.setZapPending(false);
+  }
+
+  applyDefaultAmount() {
+    const settings = this.getActiveNwcSettings();
+    let defaultAmount = 0;
+    if (Number.isFinite(settings?.defaultZap) && settings.defaultZap > 0) {
+      defaultAmount = Math.max(0, Math.round(settings.defaultZap));
+    }
+    this.modalZapAmountValue = defaultAmount;
+    if (this.videoModal) {
+      this.videoModal.setZapAmount(defaultAmount || "");
+    }
+    this.updateSplitSummary();
+  }
+
+  updateSplitSummary() {
+    if (!this.videoModal) {
+      return;
+    }
+
+    const amount = Math.max(0, Math.round(Number(this.modalZapAmountValue || 0)));
+    if (!amount) {
+      this.videoModal.setZapSplitSummary(DEFAULT_SPLIT_SUMMARY);
+      return;
+    }
+
+    const shares = calculateZapShares(amount);
+    const parts = [];
+    const lightningAddress = this.getCurrentVideo()?.lightningAddress || "";
+    const creatorEntry = getCachedLightningEntry(lightningAddress);
+    const creatorMin = formatMinRequirement(creatorEntry?.metadata);
+    let creatorText = `Creator: ${shares.creatorShare} sats`;
+    if (Number.isFinite(creatorMin) && creatorMin > 0) {
+      creatorText += ` (min ${creatorMin})`;
+    }
+    parts.push(creatorText);
+
+    if (shares.platformShare > 0) {
+      const platformEntry = getCachedLightningEntry(
+        getCachedPlatformLightningAddress()
+      );
+      const platformMin = formatMinRequirement(platformEntry?.metadata);
+      let platformText = `Platform: ${shares.platformShare} sats`;
+      if (Number.isFinite(platformMin) && platformMin > 0) {
+        platformText += ` (min ${platformMin})`;
+      }
+      parts.push(platformText);
+    }
+
+    this.videoModal.setZapSplitSummary(parts.join(" • "));
+  }
+
+  async preloadLightningMetadata() {
+    const lightningAddress = this.getCurrentVideo()?.lightningAddress || "";
+    if (lightningAddress) {
+      try {
+        await fetchLightningMetadata(lightningAddress);
+      } catch (error) {
+        if (isDevMode) {
+          console.warn("[zap] Failed to preload creator metadata:", error);
+        }
+      }
+    }
+
+    const amount = Math.max(0, Math.round(Number(this.modalZapAmountValue || 0)));
+    if (!amount) {
+      return;
+    }
+
+    const shares = calculateZapShares(amount);
+    if (shares.platformShare > 0) {
+      let platformAddress = getCachedPlatformLightningAddress();
+      if (!platformAddress) {
+        try {
+          platformAddress = await getPlatformLightningAddress({
+            forceRefresh: false,
+          });
+          setCachedPlatformLightningAddress(platformAddress || "");
+        } catch (error) {
+          if (isDevMode) {
+            console.warn("[zap] Failed to load platform Lightning address:", error);
+          }
+        }
+      }
+      if (platformAddress) {
+        try {
+          await fetchLightningMetadata(platformAddress);
+        } catch (error) {
+          if (isDevMode) {
+            console.warn("[zap] Failed to preload platform metadata:", error);
+          }
+        }
+      }
+    }
+  }
+
+  getWalletSettingsOrPrompt() {
+    const settings = this.getActiveNwcSettings();
+    const normalizedUri =
+      typeof settings?.nwcUri === "string" ? settings.nwcUri.trim() : "";
+    if (!normalizedUri) {
+      this.notifyError("Connect a Lightning wallet to send zaps.");
+      if (this.requestWalletPane) {
+        this.handleWalletLink();
+      }
+      return null;
+    }
+    return {
+      ...settings,
+      nwcUri: normalizedUri,
+    };
+  }
+
+  createDependencies({ creatorEntry, platformEntry, shares, shareTracker }) {
+    const summarizeTracker = (tracker) =>
+      Array.isArray(tracker)
+        ? tracker.map((entry) => ({
+            type: entry?.type || "unknown",
+            status: entry?.status || "unknown",
+            amount:
+              Number.isFinite(entry?.amount) && entry.amount >= 0
+                ? entry.amount
+                : undefined,
+            address: entry?.address || undefined,
+            hasPayment: Boolean(entry?.payment),
+            errorMessage:
+              typeof entry?.error?.message === "string"
+                ? entry.error.message
+                : entry?.error
+                ? String(entry.error)
+                : undefined,
+          }))
+        : undefined;
+    const logZapError = (stage, details, error) => {
+      const summary = {
+        stage,
+        shareType: details?.shareType,
+        address: details?.address,
+        amount:
+          Number.isFinite(details?.amount) && details.amount >= 0
+            ? details.amount
+            : undefined,
+        overrideFee:
+          typeof details?.overrideFee === "number"
+            ? details.overrideFee
+            : undefined,
+        commentLength:
+          typeof details?.comment === "string"
+            ? details.comment.length
+            : undefined,
+        wallet:
+          details?.walletSettings
+            ? {
+                hasUri: Boolean(details.walletSettings.nwcUri),
+                type:
+                  details.walletSettings.type ||
+                  details.walletSettings.name ||
+                  details.walletSettings.client ||
+                  undefined,
+              }
+            : undefined,
+        shares: details?.context?.shares
+          ? {
+              total: details.context.shares.total,
+              creator: details.context.shares.creatorShare,
+              platform: details.context.shares.platformShare,
+            }
+          : undefined,
+        tracker: summarizeTracker(details?.tracker),
+        retryAttempt:
+          Number.isInteger(details?.retryAttempt) && details.retryAttempt >= 0
+            ? details.retryAttempt
+            : undefined,
+      };
+      console.error("[zap] Modal zap failure", summary, error);
+    };
+
+    const lightningAddress = this.getCurrentVideo()?.lightningAddress || "";
+    const creatorKey = normalizeLightningAddressKey(
+      creatorEntry?.address || lightningAddress
+    );
+    const platformKey = normalizeLightningAddressKey(
+      platformEntry?.address || getCachedPlatformLightningAddress()
+    );
+
+    const ensureWalletFn =
+      typeof this.payments?.ensureWallet === "function"
+        ? (options) => this.payments.ensureWallet(options)
+        : (options) => ensureWalletDefault(options);
+    const sendPaymentFn =
+      typeof this.payments?.sendPayment === "function"
+        ? (bolt11, params) => this.payments.sendPayment(bolt11, params)
+        : (bolt11, params) => sendPaymentDefault(bolt11, params);
+
+    let activeShare = null;
+
+    return {
+      lnurl: {
+        resolveLightningAddress: (value) => {
+          const normalized = normalizeLightningAddressKey(value);
+          if (normalized && normalized === creatorKey) {
+            activeShare = "creator";
+            if (creatorEntry?.resolved) {
+              return { ...creatorEntry.resolved };
+            }
+          } else if (normalized && normalized === platformKey) {
+            activeShare = "platform";
+            if (platformEntry?.resolved) {
+              return { ...platformEntry.resolved };
+            }
+          } else {
+            activeShare = null;
+          }
+
+          const resolved = resolveLightningAddress(value);
+          if (normalized) {
+            rememberLightningMetadata({
+              key: normalized,
+              address: resolved.address || value,
+              resolved,
+              fetchedAt: Date.now(),
+            });
+          }
+          return resolved;
+        },
+        fetchPayServiceData: async (url) => {
+          const cached = getCachedMetadataByUrl(url);
+          if (cached?.metadata && isMetadataEntryFresh(cached)) {
+            return cached.metadata;
+          }
+
+          const metadata = await fetchPayServiceData(url);
+          if (cached) {
+            rememberLightningMetadata({
+              ...cached,
+              metadata,
+              fetchedAt: Date.now(),
+            });
+          }
+          return metadata;
+        },
+        validateInvoiceAmount,
+        requestInvoice,
+      },
+      wallet: {
+        ensureWallet: async (options) => {
+          try {
+            return await ensureWalletFn(options);
+          } catch (error) {
+            logZapError(
+              "wallet.ensureWallet",
+              {
+                tracker: shareTracker,
+                context: { shares },
+                walletSettings: options?.settings,
+              },
+              error
+            );
+            throw error;
+          }
+        },
+        sendPayment: async (bolt11, params) => {
+          try {
+            const payment = await sendPaymentFn(bolt11, params);
+            if (Array.isArray(shareTracker)) {
+              const shareType = activeShare || "unknown";
+              const amount =
+                shareType === "platform"
+                  ? shares.platformShare
+                  : shares.creatorShare;
+              const address =
+                shareType === "platform"
+                  ? platformEntry?.address || getCachedPlatformLightningAddress()
+                  : creatorEntry?.address || lightningAddress;
+              shareTracker.push({
+                type: shareType,
+                status: "success",
+                amount,
+                address,
+                payment,
+              });
+            }
+            return payment;
+          } catch (error) {
+            if (Array.isArray(shareTracker)) {
+              const shareType = activeShare || "unknown";
+              const amount =
+                shareType === "platform"
+                  ? shares.platformShare
+                  : shares.creatorShare;
+              const address =
+                shareType === "platform"
+                  ? platformEntry?.address || getCachedPlatformLightningAddress()
+                  : creatorEntry?.address || lightningAddress;
+              shareTracker.push({
+                type: shareType,
+                status: "error",
+                amount,
+                address,
+                error,
+              });
+            }
+            logZapError(
+              "wallet.sendPayment",
+              {
+                shareType: activeShare || "unknown",
+                amount,
+                address,
+                tracker: shareTracker,
+                context: { shares },
+              },
+              error
+            );
+            throw error;
+          } finally {
+            activeShare = null;
+          }
+        },
+      },
+      platformAddress: {
+        getPlatformLightningAddress: async () => {
+          if (platformEntry?.address) {
+            return platformEntry.address;
+          }
+          const cachedAddress = getCachedPlatformLightningAddress();
+          if (cachedAddress) {
+            return cachedAddress;
+          }
+          const fallback = await getPlatformLightningAddress({
+            forceRefresh: false,
+          });
+          setCachedPlatformLightningAddress(fallback || "");
+          return fallback;
+        },
+      },
+    };
+  }
+
+  async prepareLightningContext({ amount, overrideFee = null }) {
+    const lightningAddress = this.getCurrentVideo()?.lightningAddress || "";
+    if (!lightningAddress) {
+      throw new Error("This creator has not configured a Lightning address yet.");
+    }
+
+    const shares = calculateZapShares(amount, overrideFee);
+    if (!shares.total) {
+      throw new Error("Enter a zap amount greater than zero.");
+    }
+
+    const creatorEntry = await fetchLightningMetadata(lightningAddress);
+    if (shares.creatorShare > 0) {
+      try {
+        validateInvoiceAmount(creatorEntry.metadata, shares.creatorShare);
+      } catch (error) {
+        const detail = error?.message || "Unable to validate creator share.";
+        throw new Error(`Creator share error: ${detail}`);
+      }
+    }
+
+    let platformEntry = null;
+    let platformAddress = "";
+    if (shares.platformShare > 0) {
+      platformAddress = getCachedPlatformLightningAddress();
+      if (!platformAddress) {
+        platformAddress = await getPlatformLightningAddress({
+          forceRefresh: false,
+        });
+        setCachedPlatformLightningAddress(platformAddress || "");
+      }
+      if (!platformAddress) {
+        throw new Error("Platform Lightning address is unavailable.");
+      }
+
+      platformEntry = await fetchLightningMetadata(platformAddress);
+      try {
+        validateInvoiceAmount(platformEntry.metadata, shares.platformShare);
+      } catch (error) {
+        const detail = error?.message || "Unable to validate platform share.";
+        throw new Error(`Platform share error: ${detail}`);
+      }
+    }
+
+    this.updateSplitSummary();
+
+    return {
+      shares,
+      creatorEntry,
+      platformEntry,
+      platformAddress,
+    };
+  }
+
+  getActiveVideoEvent() {
+    const video = this.getCurrentVideo() || {};
+    const lightningAddress = video.lightningAddress || "";
+    return {
+      kind: typeof video.kind === "number" ? video.kind : 0,
+      id: typeof video.id === "string" ? video.id : "",
+      pubkey: typeof video.pubkey === "string" ? video.pubkey : "",
+      tags: Array.isArray(video.tags) ? [...video.tags] : [],
+      content: typeof video.content === "string" ? video.content : "",
+      created_at: Number.isFinite(video.created_at)
+        ? video.created_at
+        : Math.floor(Date.now() / 1000),
+      lightningAddress,
+    };
+  }
+
+  async runZapAttempt({ amount, overrideFee = null, walletSettings, comment }) {
+    const settings = walletSettings || this.getWalletSettingsOrPrompt();
+    if (!settings) {
+      return null;
+    }
+
+    let context;
+    try {
+      context = await this.prepareLightningContext({
+        amount,
+        overrideFee,
+      });
+    } catch (error) {
+      console.error(
+        "[zap] Modal lightning context failed",
+        {
+          amount,
+          overrideFee,
+          commentLength: typeof comment === "string" ? comment.length : undefined,
+          wallet: {
+            hasUri: Boolean(settings?.nwcUri),
+            type:
+              settings?.type || settings?.name || settings?.client || undefined,
+          },
+        },
+        error
+      );
+      throw error;
+    }
+    const shareTracker = [];
+    const dependencies = this.createDependencies({
+      ...context,
+      shareTracker,
+    });
+    const videoEvent = this.getActiveVideoEvent();
+
+    let previousOverride;
+    const hasGlobal = typeof globalThis !== "undefined";
+    if (hasGlobal && typeof overrideFee === "number" && Number.isFinite(overrideFee)) {
+      previousOverride = globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+      globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = overrideFee;
+    }
+
+    try {
+      const result = await this.splitAndZap(
+        {
+          videoEvent,
+          amountSats: context.shares.total,
+          comment: typeof comment === "string" ? comment : "",
+          walletSettings: settings,
+        },
+        dependencies
+      );
+      return { context, result, shareTracker };
+    } catch (error) {
+      if (Array.isArray(shareTracker) && shareTracker.length) {
+        error.__zapShareTracker = shareTracker;
+      }
+      console.error(
+        "[zap] splitAndZap failed",
+        {
+          amount,
+          overrideFee,
+          commentLength: typeof comment === "string" ? comment.length : undefined,
+          wallet: {
+            hasUri: Boolean(settings?.nwcUri),
+            type:
+              settings?.type || settings?.name || settings?.client || undefined,
+          },
+          shares: {
+            total: context?.shares?.total,
+            creator: context?.shares?.creatorShare,
+            platform: context?.shares?.platformShare,
+          },
+          tracker: Array.isArray(shareTracker)
+            ? shareTracker.map((entry) => ({
+                type: entry?.type || "unknown",
+                status: entry?.status || "unknown",
+                amount: entry?.amount,
+                address: entry?.address,
+                errorMessage:
+                  typeof entry?.error?.message === "string"
+                    ? entry.error.message
+                    : entry?.error
+                    ? String(entry.error)
+                    : undefined,
+              }))
+            : undefined,
+        },
+        error
+      );
+      throw error;
+    } finally {
+      if (hasGlobal && typeof overrideFee === "number" && Number.isFinite(overrideFee)) {
+        if (typeof previousOverride === "number") {
+          globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = previousOverride;
+        } else if (
+          globalThis &&
+          Object.prototype.hasOwnProperty.call(globalThis, "__BITVID_PLATFORM_FEE_OVERRIDE__")
+        ) {
+          delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+        }
+      }
+    }
+  }
+
+  async executeRetry({ walletSettings, comment }) {
+    const retryState = this.modalZapRetryState;
+    const shares = Array.isArray(retryState?.shares) ? retryState.shares : [];
+    if (!shares.length) {
+      this.resetRetryState();
+      return null;
+    }
+
+    const summary = shares
+      .map((share) => {
+        const label =
+          share.type === "platform"
+            ? "Platform"
+            : share.type === "creator"
+            ? "Creator"
+            : "Lightning";
+        return `${label} ${share.amount} sats`;
+      })
+      .join(", ");
+    this.videoModal?.setZapStatus(
+      `Retrying failed share(s): ${summary}`,
+      "warning"
+    );
+    this.videoModal?.clearZapReceipts();
+
+    const aggregatedReceipts = [];
+    const aggregatedTracker = [];
+
+    for (const share of shares) {
+      const overrideFee = share.type === "platform" ? 100 : 0;
+      try {
+        const attempt = await this.runZapAttempt({
+          amount: share.amount,
+          overrideFee,
+          walletSettings,
+          comment: retryState?.comment || comment || "",
+        });
+        if (!attempt) {
+          this.videoModal?.setZapStatus("", "neutral");
+          return null;
+        }
+        if (Array.isArray(attempt?.result?.receipts)) {
+          aggregatedReceipts.push(...attempt.result.receipts);
+        } else if (Array.isArray(attempt?.shareTracker)) {
+          aggregatedTracker.push(...attempt.shareTracker);
+        }
+      } catch (error) {
+        const tracker = Array.isArray(error?.__zapShareTracker)
+          ? error.__zapShareTracker
+          : [];
+        console.error(
+          "[zap] Modal zap retry failed",
+          {
+            shareType: share?.type || "unknown",
+            amount: share?.amount,
+            address: share?.address,
+            commentLength:
+              typeof (retryState?.comment || comment) === "string"
+                ? (retryState?.comment || comment).length
+                : undefined,
+            tracker: tracker.map((entry) => ({
+              type: entry?.type || "unknown",
+              status: entry?.status || "unknown",
+              amount: entry?.amount,
+              address: entry?.address,
+              errorMessage:
+                typeof entry?.error?.message === "string"
+                  ? entry.error.message
+                  : entry?.error
+                  ? String(entry.error)
+                  : undefined,
+            })),
+          },
+          error
+        );
+        if (tracker.length) {
+          aggregatedTracker.push(...tracker);
+        }
+        throw error;
+      }
+    }
+
+    if (aggregatedReceipts.length) {
+      this.videoModal?.renderZapReceipts(aggregatedReceipts, { partial: false });
+    } else if (aggregatedTracker.length) {
+      this.videoModal?.renderZapReceipts(aggregatedTracker, { partial: true });
+    }
+
+    const total = shares.reduce((sum, share) => {
+      const value = Math.max(0, Math.round(Number(share.amount) || 0));
+      return sum + value;
+    }, 0);
+    const successMessage =
+      total > 0
+        ? `Retried ${total} sats successfully.`
+        : "Retried zap shares successfully.";
+    this.videoModal?.setZapStatus(successMessage, "success");
+    this.notifySuccess("Zap shares retried successfully!");
+    this.resetRetryState();
+    return true;
+  }
+
+  markRetryPending(shares, comment = "") {
+    const validShares = Array.isArray(shares)
+      ? shares.filter((share) => share && share.amount > 0)
+      : [];
+    if (!validShares.length) {
+      this.resetRetryState();
+      return;
+    }
+
+    this.modalZapRetryState = {
+      shares: validShares,
+      comment: typeof comment === "string" ? comment : this.modalZapCommentValue,
+      createdAt: Date.now(),
+    };
+
+    const summary = validShares
+      .map((share) => {
+        const label =
+          share.type === "platform"
+            ? "Platform"
+            : share.type === "creator"
+            ? "Creator"
+            : "Lightning";
+        return `${label} ${share.amount} sats`;
+      })
+      .join(", ");
+    this.videoModal?.setZapRetryPending(true, { summary });
+  }
+
+  resetRetryState() {
+    this.modalZapRetryState = null;
+    this.videoModal?.setZapRetryPending(false);
+  }
+
+  handleZapError({ error, amount, comment, walletSettings }) {
+    const tracker = Array.isArray(error?.__zapShareTracker)
+      ? error.__zapShareTracker
+      : [];
+    console.error(
+      "[zap] Modal zap attempt failed",
+      {
+        amount,
+        commentLength: typeof comment === "string" ? comment.length : undefined,
+        wallet: {
+          hasUri: Boolean(walletSettings?.nwcUri),
+          type:
+            walletSettings?.type ||
+            walletSettings?.name ||
+            walletSettings?.client ||
+            undefined,
+        },
+        tracker: tracker.map((entry) => ({
+          type: entry?.type || "unknown",
+          status: entry?.status || "unknown",
+          amount: entry?.amount,
+          address: entry?.address,
+          errorMessage:
+            typeof entry?.error?.message === "string"
+              ? entry.error.message
+              : entry?.error
+              ? String(entry.error)
+              : undefined,
+        })),
+        retryPending: Array.isArray(this.modalZapRetryState?.shares)
+          ? this.modalZapRetryState.shares.length
+          : 0,
+      },
+      error
+    );
+    if (tracker.length) {
+      this.videoModal?.renderZapReceipts(tracker, { partial: true });
+    }
+
+    const failureShares = tracker.filter(
+      (entry) => entry && entry.status !== "success" && entry.amount > 0
+    );
+    if (failureShares.length) {
+      this.markRetryPending(failureShares, comment);
+      const summary = failureShares
+        .map((share) => {
+          const label =
+            share.type === "platform"
+              ? "Platform"
+              : share.type === "creator"
+              ? "Creator"
+              : "Lightning";
+          return `${label} ${share.amount} sats`;
+        })
+        .join(", ");
+      const tone = tracker.length > failureShares.length ? "warning" : "error";
+      const statusMessage =
+        tracker.length > failureShares.length
+          ? `Partial zap failure. Press Send again to retry: ${summary}.`
+          : `Zap failed. Press Send again to retry: ${summary}.`;
+      this.videoModal?.setZapStatus(statusMessage, tone);
+      this.notifyError(error?.message || statusMessage);
+    } else {
+      this.resetRetryState();
+      const message = error?.message || "Zap failed. Please try again.";
+      this.videoModal?.setZapStatus(message, "error");
+      this.notifyError(message);
+    }
+  }
+
+  notifySuccess(message) {
+    if (this.callbacks.onSuccess) {
+      this.callbacks.onSuccess(message);
+    }
+  }
+
+  notifyError(message) {
+    if (this.callbacks.onError) {
+      this.callbacks.onError(message);
+    }
+  }
+}
diff --git a/js/userBlocks.js b/js/userBlocks.js
index 30228d81..2703efdb 100644
--- a/js/userBlocks.js
+++ b/js/userBlocks.js
@@ -6,6 +6,10 @@ import {
   assertAnyRelayAccepted,
 } from "./nostrPublish.js";
 
+const FAST_BLOCKLIST_RELAY_LIMIT = 3;
+const FAST_BLOCKLIST_TIMEOUT_MS = 2500;
+const BACKGROUND_BLOCKLIST_TIMEOUT_MS = 6000;
+
 function normalizeHex(pubkey) {
   if (typeof pubkey !== "string") {
     return null;
@@ -86,63 +90,214 @@ class UserBlockListManager {
         limit: 1,
       };
 
-      const events = [];
-      for (const relay of nostrClient.relays) {
-        try {
-          const res = await nostrClient.pool.list([relay], [filter]);
-          if (Array.isArray(res) && res.length) {
-            events.push(...res);
-          }
-        } catch (err) {
-          console.error(`[UserBlockList] Relay error at ${relay}:`, err);
-        }
-      }
+      const relays = Array.isArray(nostrClient.relays)
+        ? nostrClient.relays.filter((relay) => typeof relay === "string" && relay)
+        : [];
 
-      if (!events.length) {
+      if (!relays.length) {
         this.blockedPubkeys.clear();
         this.blockEventId = null;
         this.loaded = true;
         return;
       }
 
-      events.sort((a, b) => b.created_at - a.created_at);
-      const newest = events[0];
-      this.blockEventId = newest.id;
+      const fastRelays = relays.slice(0, FAST_BLOCKLIST_RELAY_LIMIT);
+      const backgroundRelays = relays.slice(fastRelays.length);
 
-      let decrypted = "";
-      try {
-        decrypted = await window.nostr.nip04.decrypt(
-          normalized,
-          newest.content
-        );
-      } catch (err) {
-        console.error("[UserBlockList] Failed to decrypt block list:", err);
-        this.blockedPubkeys.clear();
-        this.loaded = true;
+      const fetchFromRelay = (relayUrl, timeoutMs, requireEvent) =>
+        new Promise((resolve, reject) => {
+          let settled = false;
+          const timer = setTimeout(() => {
+            if (settled) {
+              return;
+            }
+            settled = true;
+            const timeoutError = new Error(
+              `Timed out fetching block list from ${relayUrl} after ${timeoutMs}ms`
+            );
+            timeoutError.code = "timeout";
+            timeoutError.relay = relayUrl;
+            timeoutError.timeoutMs = timeoutMs;
+            reject(timeoutError);
+          }, timeoutMs);
+
+          Promise.resolve()
+            .then(() => nostrClient.pool.list([relayUrl], [filter]))
+            .then((result) => {
+              if (settled) {
+                return;
+              }
+              settled = true;
+              clearTimeout(timer);
+              const events = Array.isArray(result)
+                ? result.filter((event) => event && event.pubkey === normalized)
+                : [];
+              if (requireEvent && !events.length) {
+                const emptyError = new Error(
+                  `No block list events returned from ${relayUrl}`
+                );
+                emptyError.code = "empty";
+                emptyError.relay = relayUrl;
+                reject(emptyError);
+                return;
+              }
+              resolve({ relayUrl, events });
+            })
+            .catch((error) => {
+              if (settled) {
+                return;
+              }
+              settled = true;
+              clearTimeout(timer);
+              const wrapped =
+                error instanceof Error ? error : new Error(String(error));
+              wrapped.relay = relayUrl;
+              reject(wrapped);
+            });
+        });
+
+      const fastPromises = fastRelays.map((relayUrl) =>
+        fetchFromRelay(relayUrl, FAST_BLOCKLIST_TIMEOUT_MS, true)
+      );
+      const backgroundPromises = backgroundRelays.map((relayUrl) =>
+        fetchFromRelay(relayUrl, BACKGROUND_BLOCKLIST_TIMEOUT_MS, false)
+      );
+
+      const applyEvents = async (events, { skipIfEmpty = false } = {}) => {
+        if (!Array.isArray(events) || !events.length) {
+          if (skipIfEmpty) {
+            return;
+          }
+          this.blockedPubkeys.clear();
+          this.blockEventId = null;
+          return;
+        }
+
+        const sorted = events
+          .filter((event) => event && event.pubkey === normalized)
+          .sort((a, b) => (b?.created_at || 0) - (a?.created_at || 0));
+
+        if (!sorted.length) {
+          if (skipIfEmpty) {
+            return;
+          }
+          this.blockedPubkeys.clear();
+          this.blockEventId = null;
+          return;
+        }
+
+        const newest = sorted[0];
+        if (newest?.id && newest.id === this.blockEventId && this.blockedPubkeys.size) {
+          return;
+        }
+
+        this.blockEventId = newest?.id || null;
+
+        if (!newest?.content) {
+          this.blockedPubkeys.clear();
+          return;
+        }
+
+        let decrypted = "";
+        try {
+          decrypted = await window.nostr.nip04.decrypt(normalized, newest.content);
+        } catch (err) {
+          console.error("[UserBlockList] Failed to decrypt block list:", err);
+          this.blockedPubkeys.clear();
+          return;
+        }
+
+        try {
+          const parsed = JSON.parse(decrypted);
+          const list = Array.isArray(parsed?.blockedPubkeys)
+            ? parsed.blockedPubkeys
+            : [];
+          const sanitized = list
+            .map((entry) => normalizeHex(entry))
+            .filter((candidate) => {
+              if (!candidate) {
+                return false;
+              }
+              if (candidate === normalized) {
+                return false;
+              }
+              return true;
+            });
+          this.blockedPubkeys = new Set(sanitized);
+        } catch (err) {
+          console.error("[UserBlockList] Failed to parse block list:", err);
+          this.blockedPubkeys.clear();
+        }
+      };
+
+      const background = Promise.allSettled([
+        ...fastPromises,
+        ...backgroundPromises,
+      ])
+        .then(async (outcomes) => {
+          const aggregated = [];
+          for (const outcome of outcomes) {
+            if (outcome.status === "fulfilled") {
+              const events = Array.isArray(outcome.value?.events)
+                ? outcome.value.events
+                : [];
+              if (events.length) {
+                aggregated.push(...events);
+              }
+            } else {
+              const reason = outcome.reason;
+              if (reason?.code === "timeout") {
+                console.warn(
+                  `[UserBlockList] Relay ${reason.relay} timed out while loading block list (${reason.timeoutMs}ms)`
+                );
+              } else {
+                const relay = reason?.relay || reason?.relayUrl;
+                console.error(
+                  `[UserBlockList] Relay error at ${relay}:`,
+                  reason?.error ?? reason
+                );
+              }
+            }
+          }
+
+          if (!aggregated.length) {
+            return;
+          }
+
+          await applyEvents(aggregated, { skipIfEmpty: true });
+        })
+        .catch((error) => {
+          console.error("[UserBlockList] background block list refresh failed:", error);
+        });
+
+      let fastResult = null;
+      if (fastPromises.length) {
+        try {
+          fastResult = await Promise.any(fastPromises);
+        } catch (error) {
+          if (error instanceof AggregateError) {
+            error.errors?.forEach((err) => {
+              if (err?.code === "timeout") {
+                console.warn(
+                  `[UserBlockList] Relay ${err.relay} timed out while loading block list (${err.timeoutMs}ms)`
+                );
+              }
+            });
+          } else {
+            console.error("[UserBlockList] Fast block list fetch failed:", error);
+          }
+        }
+      }
+
+      if (fastResult?.events?.length) {
+        await applyEvents(fastResult.events);
+        background.catch(() => {});
         return;
       }
 
-      try {
-        const parsed = JSON.parse(decrypted);
-        const list = Array.isArray(parsed?.blockedPubkeys)
-          ? parsed.blockedPubkeys
-          : [];
-        const sanitized = list
-          .map((entry) => normalizeHex(entry))
-          .filter((candidate) => {
-            if (!candidate) {
-              return false;
-            }
-            if (candidate === normalized) {
-              return false;
-            }
-            return true;
-          });
-        this.blockedPubkeys = new Set(sanitized);
-      } catch (err) {
-        console.error("[UserBlockList] Failed to parse block list:", err);
-        this.blockedPubkeys.clear();
-      }
+      this.blockedPubkeys.clear();
+      this.blockEventId = null;
+      background.catch(() => {});
     } catch (error) {
       console.error("[UserBlockList] loadBlocks failed:", error);
       this.blockedPubkeys.clear();
diff --git a/js/utils/domUtils.js b/js/utils/domUtils.js
new file mode 100644
index 00000000..c41d0099
--- /dev/null
+++ b/js/utils/domUtils.js
@@ -0,0 +1,35 @@
+// js/utils/domUtils.js
+
+const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
+
+/**
+ * Removes script tags that match known tracking script patterns.
+ */
+export 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();
+    }
+  });
+}
+
+/**
+ * Escapes HTML entities in a string to prevent XSS when injecting content.
+ */
+export function escapeHTML(unsafe) {
+  if (unsafe === null || typeof unsafe === "undefined") {
+    return "";
+  }
+
+  return String(unsafe)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
diff --git a/js/utils/formatters.js b/js/utils/formatters.js
new file mode 100644
index 00000000..020e0150
--- /dev/null
+++ b/js/utils/formatters.js
@@ -0,0 +1,70 @@
+// js/utils/formatters.js
+
+/**
+ * Shortens a string by replacing the middle with an ellipsis when it exceeds
+ * the desired length. Ensures the returned string never exceeds `maxLength`.
+ */
+export function truncateMiddle(text, maxLength = 72) {
+  if (!text || typeof text !== "string") {
+    return "";
+  }
+
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  const ellipsis = "…";
+  const charsToShow = maxLength - ellipsis.length;
+  const front = Math.ceil(charsToShow / 2);
+  const back = Math.floor(charsToShow / 2);
+  return `${text.slice(0, front)}${ellipsis}${text.slice(text.length - back)}`;
+}
+
+/**
+ * Formats a timestamp (in seconds) to a localized string. Falls back to
+ * ISO-8601 formatting if locale formatting fails.
+ */
+export function formatAbsoluteTimestamp(timestamp) {
+  if (!Number.isFinite(timestamp)) {
+    return "Unknown date";
+  }
+
+  const date = new Date(timestamp * 1000);
+  if (Number.isNaN(date.getTime())) {
+    return "Unknown date";
+  }
+
+  try {
+    return date.toLocaleString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch (err) {
+    return date.toISOString();
+  }
+}
+
+/**
+ * Returns a human readable "time ago" string for a timestamp (in seconds).
+ */
+export function formatTimeAgo(timestamp) {
+  const seconds = Math.floor(Date.now() / 1000 - timestamp);
+  const intervals = {
+    year: 31536000,
+    month: 2592000,
+    week: 604800,
+    day: 86400,
+    hour: 3600,
+    minute: 60,
+  };
+  for (const [unit, secInUnit] of Object.entries(intervals)) {
+    const int = Math.floor(seconds / secInUnit);
+    if (int >= 1) {
+      return `${int} ${unit}${int > 1 ? "s" : ""} ago`;
+    }
+  }
+  return "just now";
+}
diff --git a/js/utils/magnetValidators.js b/js/utils/magnetValidators.js
new file mode 100644
index 00000000..123c5706
--- /dev/null
+++ b/js/utils/magnetValidators.js
@@ -0,0 +1,59 @@
+// js/utils/magnetValidators.js
+
+import { safeDecodeMagnet } from "../magnetUtils.js";
+
+/**
+ * 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.
+ */
+export 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;
+  }
+}
+
+export default isValidMagnetUri;
diff --git a/js/utils/mediaLoader.js b/js/utils/mediaLoader.js
new file mode 100644
index 00000000..0955b09c
--- /dev/null
+++ b/js/utils/mediaLoader.js
@@ -0,0 +1,82 @@
+// js/utils/mediaLoader.js
+
+/**
+ * Simple IntersectionObserver-based lazy loader for images (or videos).
+ *
+ * Usage:
+ *   const mediaLoader = new MediaLoader();
+ *   mediaLoader.observe(imgElement);
+ *
+ * This will load the real image source from `imgElement.dataset.lazy`
+ * once the image enters the viewport.
+ */
+export class MediaLoader {
+  constructor(rootMargin = "50px") {
+    this.observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) {
+          continue;
+        }
+
+        const el = entry.target;
+        const lazySrc =
+          typeof el.dataset.lazy === "string" ? el.dataset.lazy.trim() : "";
+
+        if (!lazySrc) {
+          continue;
+        }
+
+        const fallbackSrc =
+          (typeof el.dataset.fallbackSrc === "string"
+            ? el.dataset.fallbackSrc.trim()
+            : "") ||
+          el.getAttribute("data-fallback-src") ||
+          "";
+
+        if (el.tagName === "IMG" || el.tagName === "IMAGE") {
+          el.src = lazySrc;
+          if (fallbackSrc) {
+            el.onerror = () => {
+              el.src = fallbackSrc;
+            };
+          }
+        } else if (el.tagName === "VIDEO") {
+          el.src = lazySrc;
+          if (fallbackSrc) {
+            el.poster = fallbackSrc;
+          }
+        } else {
+          el.style.backgroundImage = `url('${lazySrc}')`;
+        }
+
+        delete el.dataset.lazy;
+        this.observer.unobserve(el);
+      }
+    }, {
+      rootMargin,
+      threshold: 0.01,
+    });
+  }
+
+  observe(el) {
+    if (!el || typeof el !== "object") {
+      return;
+    }
+
+    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);
+    }
+  }
+
+  disconnect() {
+    this.observer.disconnect();
+  }
+}
+
+export default MediaLoader;
diff --git a/js/utils/pointer.js b/js/utils/pointer.js
new file mode 100644
index 00000000..a0dd1211
--- /dev/null
+++ b/js/utils/pointer.js
@@ -0,0 +1,27 @@
+// js/utils/pointer.js
+
+export function pointerArrayToKey(pointer) {
+  if (!Array.isArray(pointer) || pointer.length < 2) {
+    return "";
+  }
+
+  const type = pointer[0] === "a" ? "a" : pointer[0] === "e" ? "e" : "";
+  if (!type) {
+    return "";
+  }
+
+  const value =
+    typeof pointer[1] === "string" ? pointer[1].trim().toLowerCase() : "";
+  if (!value) {
+    return "";
+  }
+
+  const relay =
+    pointer.length > 2 && typeof pointer[2] === "string"
+      ? pointer[2].trim()
+      : "";
+
+  return relay ? `${type}:${value}:${relay}` : `${type}:${value}`;
+}
+
+export default pointerArrayToKey;
diff --git a/js/utils/storage.js b/js/utils/storage.js
new file mode 100644
index 00000000..7bd5766f
--- /dev/null
+++ b/js/utils/storage.js
@@ -0,0 +1,56 @@
+// js/utils/storage.js
+
+const URL_HEALTH_STORAGE_PREFIX = "bitvid:urlHealth:";
+
+export function getUrlHealthStorageKey(eventId) {
+  return `${URL_HEALTH_STORAGE_PREFIX}${eventId}`;
+}
+
+export 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;
+}
+
+export 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);
+  }
+}
+
+export 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);
+  }
+}
diff --git a/js/utils/videoDeduper.js b/js/utils/videoDeduper.js
new file mode 100644
index 00000000..76575c42
--- /dev/null
+++ b/js/utils/videoDeduper.js
@@ -0,0 +1,29 @@
+// js/utils/videoDeduper.js
+
+/**
+ * Given an array of video objects, return only the newest (by created_at) for
+ * each videoRootId. If no videoRootId is present, treat the video’s own ID as
+ * its root.
+ */
+export function dedupeToNewestByRoot(videos) {
+  const map = new Map();
+
+  for (const vid of videos || []) {
+    if (!vid) {
+      continue;
+    }
+    const rootId = vid.videoRootId || vid.id;
+    if (!rootId) {
+      continue;
+    }
+
+    const existing = map.get(rootId);
+    if (!existing || vid.created_at > existing.created_at) {
+      map.set(rootId, vid);
+    }
+  }
+
+  return Array.from(map.values());
+}
+
+export default dedupeToNewestByRoot;
diff --git a/js/utils/videoPointer.js b/js/utils/videoPointer.js
new file mode 100644
index 00000000..35193e92
--- /dev/null
+++ b/js/utils/videoPointer.js
@@ -0,0 +1,51 @@
+// js/utils/videoPointer.js
+
+import { pointerArrayToKey } from "./pointer.js";
+
+const DEFAULT_VIDEO_KIND = 30078;
+
+function normalizeString(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+export function resolveVideoPointer({
+  kind,
+  pubkey,
+  videoRootId,
+  dTag,
+  fallbackEventId,
+} = {}) {
+  const normalizedPubkey = normalizeString(pubkey).toLowerCase();
+  const normalizedKind =
+    typeof kind === "number" && Number.isFinite(kind) ? kind : DEFAULT_VIDEO_KIND;
+  const pointerCandidates = [];
+
+  const rootId = normalizeString(videoRootId);
+  if (rootId && normalizedPubkey) {
+    pointerCandidates.push(["a", `${normalizedKind}:${normalizedPubkey}:${rootId}`]);
+  }
+
+  const normalizedDTag = normalizeString(dTag);
+  if (normalizedDTag && normalizedPubkey) {
+    pointerCandidates.push([
+      "a",
+      `${normalizedKind}:${normalizedPubkey}:${normalizedDTag}`,
+    ]);
+  }
+
+  const fallbackId = normalizeString(fallbackEventId);
+  if (fallbackId) {
+    pointerCandidates.push(["e", fallbackId]);
+  }
+
+  for (const pointer of pointerCandidates) {
+    const key = pointerArrayToKey(pointer);
+    if (key) {
+      return { pointer, key };
+    }
+  }
+
+  return null;
+}
+
+export default resolveVideoPointer;
diff --git a/js/utils/videoTimestamps.js b/js/utils/videoTimestamps.js
new file mode 100644
index 00000000..9f35c964
--- /dev/null
+++ b/js/utils/videoTimestamps.js
@@ -0,0 +1,102 @@
+export function getVideoRootIdentifier(video) {
+  if (!video || typeof video !== "object") {
+    return "";
+  }
+
+  if (typeof video.videoRootId === "string" && video.videoRootId) {
+    return video.videoRootId;
+  }
+
+  if (typeof video.id === "string" && video.id) {
+    return video.id;
+  }
+
+  return "";
+}
+
+export function applyRootTimestampToVideosMap({
+  videosMap,
+  video,
+  rootId = "",
+  timestamp,
+}) {
+  if (!(videosMap instanceof Map)) {
+    return;
+  }
+
+  if (video?.id) {
+    const existing = videosMap.get(video.id);
+    if (existing && typeof existing === "object") {
+      existing.rootCreatedAt = timestamp;
+    }
+  }
+
+  if (!rootId) {
+    return;
+  }
+
+  for (const stored of videosMap.values()) {
+    if (!stored || typeof stored !== "object") {
+      continue;
+    }
+    if (stored === video) {
+      continue;
+    }
+    const storedRootId = getVideoRootIdentifier(stored);
+    if (storedRootId && storedRootId === rootId) {
+      stored.rootCreatedAt = timestamp;
+    }
+  }
+}
+
+export function syncActiveVideoRootTimestamp({
+  activeVideo,
+  rootId = "",
+  timestamp = null,
+  buildModalTimestampPayload,
+  videoModal,
+}) {
+  if (!Number.isFinite(timestamp)) {
+    return false;
+  }
+
+  const normalized = Math.floor(timestamp);
+  if (!activeVideo || typeof activeVideo !== "object") {
+    return false;
+  }
+
+  const activeRootId = getVideoRootIdentifier(activeVideo);
+  if (!activeRootId) {
+    return false;
+  }
+
+  if (rootId && activeRootId !== rootId) {
+    return false;
+  }
+
+  if (activeVideo.rootCreatedAt === normalized) {
+    return false;
+  }
+
+  activeVideo.rootCreatedAt = normalized;
+
+  const editedAt = Number.isFinite(activeVideo.lastEditedAt)
+    ? Math.floor(activeVideo.lastEditedAt)
+    : Number.isFinite(activeVideo.created_at)
+      ? Math.floor(activeVideo.created_at)
+      : null;
+
+  if (
+    typeof buildModalTimestampPayload === "function" &&
+    videoModal &&
+    typeof videoModal.updateMetadata === "function"
+  ) {
+    const payload = buildModalTimestampPayload({
+      postedAt: normalized,
+      editedAt,
+    });
+    videoModal.updateMetadata({ timestamps: payload });
+  }
+
+  return true;
+}
diff --git a/js/viewManager.js b/js/viewManager.js
index 30671ed8..fbce3088 100644
--- a/js/viewManager.js
+++ b/js/viewManager.js
@@ -1,19 +1,31 @@
 // js/viewManager.js
 import { initChannelProfileView } from "./channelProfile.js";
 import { subscriptions } from "./subscriptions.js";
+import { getApplication } from "./applicationContext.js";
+import { ASSET_VERSION } from "../config/asset-version.js";
 
 const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
 
+const withAssetVersion = (url) => {
+  if (typeof url !== "string" || url.length === 0) {
+    return url;
+  }
+
+  const separator = url.includes("?") ? "&" : "?";
+  return `${url}${separator}v=${encodeURIComponent(ASSET_VERSION)}`;
+};
+
 /**
  * Load a partial view by URL into the #viewContainer.
  */
 export async function loadView(viewUrl) {
   try {
-    if (window.app && typeof window.app.prepareForViewLoad === "function") {
-      window.app.prepareForViewLoad();
+    const app = getApplication();
+    if (app && typeof app.prepareForViewLoad === "function") {
+      app.prepareForViewLoad();
     }
 
-    const res = await fetch(viewUrl);
+    const res = await fetch(withAssetVersion(viewUrl), { cache: "no-store" });
     if (!res.ok) {
       throw new Error(`Failed to load view: ${res.status}`);
     }
@@ -52,16 +64,17 @@ export async function loadView(viewUrl) {
  */
 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();
+    const app = getApplication();
+    if (app && typeof app.loadVideos === "function") {
+      if (typeof app.mountVideoListView === "function") {
+        app.mountVideoListView();
       }
-      window.app.loadVideos();
+      app.loadVideos();
     }
     // Force profile updates after the new view is in place.
-    if (window.app && window.app.forceRefreshAllProfiles) {
-      window.app.forceRefreshAllProfiles();
+    const refreshApp = getApplication();
+    if (refreshApp && typeof refreshApp.forceRefreshAllProfiles === "function") {
+      refreshApp.forceRefreshAllProfiles();
     }
   },
   explore: () => {
@@ -86,7 +99,8 @@ export const viewInitRegistry = {
   subscriptions: async () => {
     console.log("Subscriptions view loaded.");
 
-    if (!window.app.pubkey) {
+    const app = getApplication();
+    if (!app?.pubkey) {
       const container = document.getElementById("subscriptionsVideoList");
       if (container) {
         container.innerHTML =
@@ -97,7 +111,7 @@ export const viewInitRegistry = {
 
     // If user is logged in, let the SubscriptionsManager do everything:
     await subscriptions.showSubscriptionVideos(
-      window.app.pubkey,
+      app.pubkey,
       "subscriptionsVideoList"
     );
   },
diff --git a/js/watchHistoryDebug.js b/js/watchHistoryDebug.js
new file mode 100644
index 00000000..64c7e5f8
--- /dev/null
+++ b/js/watchHistoryDebug.js
@@ -0,0 +1,203 @@
+// js/watchHistoryDebug.js
+
+const WATCH_HISTORY_DEBUG_STORAGE_KEY =
+  "bitvid:debug:watch-history";
+
+const globalScope =
+  typeof globalThis !== "undefined"
+    ? globalThis
+    : typeof window !== "undefined"
+    ? window
+    : typeof self !== "undefined"
+    ? self
+    : null;
+
+const TRUTHY_VALUES = new Set([
+  "1",
+  "true",
+  "yes",
+  "on",
+  "enable",
+  "enabled",
+  "debug",
+  "verbose",
+  "watch",
+]);
+
+const FALSY_VALUES = new Set([
+  "0",
+  "false",
+  "no",
+  "off",
+  "disable",
+  "disabled",
+  "quiet",
+  "silent",
+]);
+
+function parseFlagValue(value) {
+  if (value === null || value === undefined) {
+    return true;
+  }
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) {
+    return true;
+  }
+  if (TRUTHY_VALUES.has(normalized)) {
+    return true;
+  }
+  if (FALSY_VALUES.has(normalized)) {
+    return false;
+  }
+  return null;
+}
+
+function safeReadStorageFlag(storage) {
+  if (!storage || typeof storage.getItem !== "function") {
+    return null;
+  }
+  try {
+    const raw = storage.getItem(WATCH_HISTORY_DEBUG_STORAGE_KEY);
+    if (raw === null || raw === undefined) {
+      return null;
+    }
+    return parseFlagValue(String(raw));
+  } catch (error) {
+    return null;
+  }
+}
+
+function safeWriteStorageFlag(storage, value) {
+  if (!storage || typeof storage.setItem !== "function") {
+    return;
+  }
+  try {
+    storage.setItem(WATCH_HISTORY_DEBUG_STORAGE_KEY, value ? "true" : "false");
+  } catch (error) {
+    // Ignore storage errors (e.g., quota exceeded, private mode restrictions).
+  }
+}
+
+function persistFlag(scope, value) {
+  if (value === null) {
+    return;
+  }
+  safeWriteStorageFlag(scope?.sessionStorage, value);
+  safeWriteStorageFlag(scope?.localStorage, value);
+}
+
+function readFlagFromUrl(scope) {
+  if (!scope || typeof scope.location?.search !== "string") {
+    return null;
+  }
+  const search = scope.location.search;
+  if (!search) {
+    return null;
+  }
+  try {
+    const params = new URLSearchParams(search);
+    if (!params.has("watchHistoryDebug")) {
+      return null;
+    }
+    const parsed = parseFlagValue(params.get("watchHistoryDebug"));
+    if (parsed === null) {
+      return null;
+    }
+    persistFlag(scope, parsed);
+    return parsed;
+  } catch (error) {
+    return null;
+  }
+}
+
+function resolveExplicitFlag(scope) {
+  if (!scope) {
+    return null;
+  }
+
+  const runtimeFlag = scope.__BITVID_ENABLE_WATCH_HISTORY_DEBUG__;
+  if (runtimeFlag === true || runtimeFlag === false) {
+    return Boolean(runtimeFlag);
+  }
+
+  const altRuntimeFlag = scope.BITVID_WATCH_HISTORY_DEBUG;
+  if (altRuntimeFlag === true || altRuntimeFlag === false) {
+    return Boolean(altRuntimeFlag);
+  }
+
+  const urlFlag = readFlagFromUrl(scope);
+  if (urlFlag !== null) {
+    return urlFlag;
+  }
+
+  const sessionFlag = safeReadStorageFlag(scope.sessionStorage);
+  if (sessionFlag !== null) {
+    return sessionFlag;
+  }
+
+  const localFlag = safeReadStorageFlag(scope.localStorage);
+  if (localFlag !== null) {
+    return localFlag;
+  }
+
+  return null;
+}
+
+export function isWatchHistoryDebugEnabled() {
+  const scope = globalScope;
+  const explicitFlag = resolveExplicitFlag(scope);
+  if (explicitFlag !== null) {
+    return explicitFlag;
+  }
+
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV) {
+    return process.env.NODE_ENV !== "production";
+  }
+
+  return false;
+}
+
+export function logWatchHistoryDebug(namespace, level, message, details) {
+  if (!isWatchHistoryDebugEnabled()) {
+    return;
+  }
+
+  const scopeConsole =
+    (globalScope && globalScope.console) || (typeof console !== "undefined" ? console : null);
+  if (!scopeConsole) {
+    return;
+  }
+
+  const methodName =
+    typeof level === "string" && level && typeof scopeConsole[level] === "function"
+      ? level
+      : typeof scopeConsole.info === "function"
+      ? "info"
+      : "log";
+
+  const prefix = namespace ? `[${namespace}] ${message}` : message;
+
+  try {
+    if (details && typeof details === "object") {
+      scopeConsole[methodName](prefix, details);
+    } else {
+      scopeConsole[methodName](prefix);
+    }
+  } catch (error) {
+    try {
+      if (details && typeof details === "object") {
+        scopeConsole.log(prefix, details);
+      } else {
+        scopeConsole.log(prefix);
+      }
+    } catch (fallbackError) {
+      // Swallow logging errors entirely.
+    }
+  }
+}
diff --git a/js/watchHistoryMetadata.js b/js/watchHistoryMetadata.js
new file mode 100644
index 00000000..1efda14d
--- /dev/null
+++ b/js/watchHistoryMetadata.js
@@ -0,0 +1,306 @@
+// js/watchHistoryMetadata.js
+
+import { getApplication } from "./applicationContext.js";
+import nostrService from "./services/nostrService.js";
+import { nostrClient } from "./nostr.js";
+import { logWatchHistoryDebug } from "./watchHistoryDebug.js";
+
+function logInfo(message, details) {
+  logWatchHistoryDebug("watchHistoryMetadata", "info", message, details);
+}
+
+function logWarn(message, details) {
+  logWatchHistoryDebug("watchHistoryMetadata", "warn", message, details);
+}
+
+function normalizeVideoCandidate(candidate) {
+  if (!candidate || typeof candidate !== "object") {
+    logInfo("Discarded non-object video candidate while normalizing.");
+    return null;
+  }
+  if (candidate.deleted) {
+    logInfo("Discarded deleted video candidate while normalizing.", {
+      eventId: candidate.id || null,
+    });
+    return null;
+  }
+  return candidate;
+}
+
+export function createWatchHistoryMetadataResolver({
+  appResolver = getApplication,
+  nostr = nostrService,
+  client = nostrClient,
+} = {}) {
+  const caches = {
+    activeVideos: null,
+    catalogPromise: null,
+  };
+
+  function getAppInstance() {
+    try {
+      return typeof appResolver === "function" ? appResolver() : getApplication();
+    } catch (error) {
+      logWarn("Failed to resolve application instance.", { error });
+      return null;
+    }
+  }
+
+  async function resolveVideo(pointer) {
+    if (!pointer || typeof pointer !== "object") {
+      logInfo("Received invalid pointer when resolving video metadata.", {
+        pointerType: typeof pointer,
+      });
+      return null;
+    }
+
+    const app = getAppInstance();
+    const type = pointer.type === "a" ? "a" : "e";
+    const value = typeof pointer.value === "string" ? pointer.value.trim() : "";
+    logInfo("Attempting to resolve watch history pointer.", {
+      pointerType: type,
+      pointerValue: value || null,
+      hasAppInstance: Boolean(app),
+    });
+    if (!value) {
+      logInfo("Pointer value was empty after trimming. Skipping resolution.");
+      return null;
+    }
+
+    if (type === "e") {
+      const fromAppCache = app?.videosMap?.get?.(value);
+      const normalizedAppCache = normalizeVideoCandidate(fromAppCache);
+      if (normalizedAppCache) {
+        logInfo("Resolved pointer from application videos map.", {
+          pointerValue: value,
+        });
+        return normalizedAppCache;
+      }
+
+      const fromClientCache = client?.allEvents instanceof Map
+        ? client.allEvents.get(value)
+        : null;
+      const normalizedClientCache = normalizeVideoCandidate(fromClientCache);
+      if (normalizedClientCache) {
+        logInfo("Resolved pointer from nostr client event cache.", {
+          pointerValue: value,
+        });
+        return normalizedClientCache;
+      }
+
+      if (typeof app?.getOldEventById === "function") {
+        try {
+          const fetched = await app.getOldEventById(value);
+          const normalized = normalizeVideoCandidate(fetched);
+          if (normalized) {
+            logInfo("Resolved pointer via app.getOldEventById.", {
+              pointerValue: value,
+            });
+            return normalized;
+          }
+        } catch (error) {
+          logWarn("Failed to fetch old event by id.", {
+            pointerValue: value,
+            error,
+          });
+        }
+      }
+
+      if (typeof client?.getEventById === "function") {
+        try {
+          const fetched = await client.getEventById(value);
+          const normalized = normalizeVideoCandidate(fetched);
+          if (normalized) {
+            logInfo("Resolved pointer via nostrClient.getEventById.", {
+              pointerValue: value,
+            });
+            return normalized;
+          }
+        } catch (error) {
+          logWarn("Failed to fetch event by id via nostrClient.", {
+            pointerValue: value,
+            error,
+          });
+        }
+      }
+
+      logInfo("Failed to resolve pointer by event id.", { pointerValue: value });
+      return null;
+    }
+
+    const compareAddress = (candidate) => {
+      if (!candidate || typeof candidate !== "object") {
+        return false;
+      }
+      if (typeof app?.getVideoAddressPointer !== "function") {
+        return false;
+      }
+      try {
+        const address = app.getVideoAddressPointer(candidate);
+        const isMatch = typeof address === "string" && address.trim() === value;
+        if (isMatch) {
+          logInfo("Candidate matched address pointer.", {
+            pointerValue: value,
+            candidateId: candidate.id || null,
+          });
+        }
+        return isMatch;
+      } catch (error) {
+        logWarn("Failed to compute address pointer for candidate.", {
+          pointerValue: value,
+          error,
+        });
+        return false;
+      }
+    };
+
+    if (app?.videosMap instanceof Map) {
+      for (const cached of app.videosMap.values()) {
+        if (compareAddress(cached)) {
+          const normalized = normalizeVideoCandidate(cached);
+          if (normalized) {
+            return normalized;
+          }
+        }
+      }
+    }
+
+    const blacklist = app?.blacklistedEventIds instanceof Set
+      ? app.blacklistedEventIds
+      : undefined;
+    const filterOptions = {
+      blacklistedEventIds: blacklist,
+      isAuthorBlocked: (pubkey) => {
+        try {
+          return (
+            typeof app?.isAuthorBlocked === "function" &&
+            app.isAuthorBlocked(pubkey)
+          );
+        } catch (error) {
+          logWarn("Failed to evaluate isAuthorBlocked callback.", {
+            pointerValue: value,
+            error,
+          });
+          return false;
+        }
+      },
+    };
+
+    if (!Array.isArray(caches.activeVideos)) {
+      try {
+        caches.activeVideos = nostr.getFilteredActiveVideos
+          ? nostr.getFilteredActiveVideos(filterOptions)
+          : [];
+        logInfo("Loaded active videos cache for pointer resolution.", {
+          pointerValue: value,
+          candidateCount: Array.isArray(caches.activeVideos)
+            ? caches.activeVideos.length
+            : 0,
+        });
+      } catch (error) {
+        logWarn("Failed to read active videos cache.", {
+          pointerValue: value,
+          error,
+        });
+        caches.activeVideos = [];
+      }
+    }
+
+    for (const candidate of Array.isArray(caches.activeVideos)
+      ? caches.activeVideos
+      : []) {
+      if (compareAddress(candidate)) {
+        const normalized = normalizeVideoCandidate(candidate);
+        if (normalized) {
+          logInfo("Resolved pointer from active videos cache.", {
+            pointerValue: value,
+            candidateId: normalized.id || null,
+          });
+          return normalized;
+        }
+      }
+    }
+
+    if (!caches.catalogPromise && typeof nostr.fetchVideos === "function") {
+      logInfo("Fetching video catalog for pointer resolution.", {
+        pointerValue: value,
+      });
+      caches.catalogPromise = nostr
+        .fetchVideos(filterOptions)
+        .catch((error) => {
+          logWarn("Failed to fetch video catalog while resolving pointer.", {
+            pointerValue: value,
+            error,
+          });
+          return [];
+        });
+    }
+
+    if (caches.catalogPromise) {
+      try {
+        const catalog = await caches.catalogPromise;
+        for (const candidate of Array.isArray(catalog) ? catalog : []) {
+          if (compareAddress(candidate)) {
+            const normalized = normalizeVideoCandidate(candidate);
+            if (normalized) {
+              logInfo("Resolved pointer from fetched video catalog.", {
+                pointerValue: value,
+                candidateId: normalized.id || null,
+              });
+              return normalized;
+            }
+          }
+        }
+      } catch (error) {
+        logWarn("Failed to resolve pointer from fetched catalog.", {
+          pointerValue: value,
+          error,
+        });
+      }
+    }
+
+    logInfo("Failed to resolve pointer after exhausting lookup strategies.", {
+      pointerValue: value,
+    });
+    return null;
+  }
+
+  function resolveProfile(pubkey) {
+    if (typeof pubkey !== "string" || !pubkey.trim()) {
+      return null;
+    }
+    const app = getAppInstance();
+    if (!app) {
+      return null;
+    }
+    try {
+      const cacheEntry =
+        typeof app.getProfileCacheEntry === "function"
+          ? app.getProfileCacheEntry(pubkey)
+          : null;
+      if (cacheEntry && typeof cacheEntry === "object") {
+        logInfo("Resolved profile from application cache.", { pubkey });
+        return cacheEntry.profile || null;
+      }
+    } catch (error) {
+      logWarn("Failed to read profile cache entry.", { pubkey, error });
+    }
+    logInfo("Profile cache miss during watch history hydration.", { pubkey });
+    return null;
+  }
+
+  function reset() {
+    caches.activeVideos = null;
+    logInfo("Reset active videos cache for watch history metadata resolver.");
+    caches.catalogPromise = null;
+    logInfo("Reset catalog promise for watch history metadata resolver.");
+  }
+
+  return {
+    resolveVideo,
+    resolveProfile,
+    reset,
+    caches,
+  };
+}
+
diff --git a/js/watchHistoryService.js b/js/watchHistoryService.js
index 94002c05..052d1453 100644
--- a/js/watchHistoryService.js
+++ b/js/watchHistoryService.js
@@ -15,6 +15,7 @@ import {
   getWatchHistoryV2Enabled,
 } from "./constants.js";
 import { isDevMode } from "./config.js";
+import { getApplication } from "./applicationContext.js";
 
 const SESSION_STORAGE_KEY = "bitvid:watch-history:session:v1";
 const SESSION_STORAGE_VERSION = 1;
@@ -60,7 +61,7 @@ function getLoggedInActorKey() {
 
   if (typeof window !== "undefined") {
     const appCandidate =
-      (window.bitvid && window.bitvid.app) || window.app || null;
+      getApplication() || null;
     if (appCandidate && typeof appCandidate === "object") {
       if (typeof appCandidate.normalizeHexPubkey === "function") {
         try {
@@ -252,6 +253,8 @@ function sanitizeVideoForStorage(video) {
     pubkey: typeof video.pubkey === "string" ? video.pubkey : "",
     created_at: createdAt,
     infoHash: typeof video.infoHash === "string" ? video.infoHash : "",
+    legacyInfoHash:
+      typeof video.legacyInfoHash === "string" ? video.legacyInfoHash : "",
     mode: typeof video.mode === "string" ? video.mode : "",
     isPrivate: video?.isPrivate === true,
     description:
@@ -259,6 +262,30 @@ function sanitizeVideoForStorage(video) {
   };
 }
 
+function sanitizeVideoForHistory(video) {
+  const sanitized = sanitizeVideoForStorage(video);
+  if (!sanitized) {
+    return null;
+  }
+
+  return {
+    id: sanitized.id,
+    title: sanitized.title,
+    thumbnail: sanitized.thumbnail,
+    pubkey: sanitized.pubkey,
+    created_at: sanitized.created_at,
+    url: sanitized.url,
+    magnet: sanitized.magnet,
+    infoHash: sanitized.infoHash,
+    legacyInfoHash:
+      typeof video?.legacyInfoHash === "string"
+        ? video.legacyInfoHash
+        : typeof sanitized.legacyInfoHash === "string"
+        ? sanitized.legacyInfoHash
+        : "",
+  };
+}
+
 function sanitizeProfileForStorage(profile) {
   if (!profile || typeof profile !== "object") {
     return null;
@@ -356,6 +383,41 @@ function restoreMetadataCache() {
   }
 }
 
+function sanitizePointerMetadata(metadata) {
+  if (!metadata || typeof metadata !== "object") {
+    return null;
+  }
+
+  const pointerMetadata = {};
+  const video = sanitizeVideoForHistory(metadata.video);
+  if (video) {
+    pointerMetadata.video = video;
+  }
+
+  const profile = sanitizeProfileForStorage(metadata.profile);
+  if (profile) {
+    pointerMetadata.profile = profile;
+  }
+
+  const resumeCandidates = [
+    metadata.resumeAt,
+    metadata.resume,
+    metadata.resumeSeconds,
+  ];
+  for (const candidate of resumeCandidates) {
+    if (Number.isFinite(candidate)) {
+      pointerMetadata.resumeAt = Math.max(0, Math.floor(candidate));
+      break;
+    }
+  }
+
+  if (metadata.completed === true) {
+    pointerMetadata.completed = true;
+  }
+
+  return Object.keys(pointerMetadata).length ? pointerMetadata : null;
+}
+
 function persistMetadataCache() {
   const storage = getLocalStorage();
   if (!storage) {
@@ -974,6 +1036,33 @@ async function publishView(pointerInput, createdAt, metadata = {}) {
     viewResult?.event?.created_at
   );
 
+  const pointerMetadata = sanitizePointerMetadata(metadata);
+  if (pointerMetadata) {
+    const existingMetadata =
+      typeof normalizedPointer.metadata === "object"
+        ? normalizedPointer.metadata
+        : {};
+    normalizedPointer.metadata = { ...existingMetadata, ...pointerMetadata };
+    if (pointerMetadata.video) {
+      normalizedPointer.video = pointerMetadata.video;
+    }
+    if (pointerMetadata.profile) {
+      normalizedPointer.profile = pointerMetadata.profile;
+    }
+    if (
+      Number.isFinite(pointerMetadata.resumeAt) &&
+      !Number.isFinite(normalizedPointer.resumeAt)
+    ) {
+      normalizedPointer.resumeAt = Math.max(
+        0,
+        Math.floor(pointerMetadata.resumeAt),
+      );
+    }
+    if (pointerMetadata.completed === true) {
+      normalizedPointer.completed = true;
+    }
+  }
+
   const key = pointerKey(normalizedPointer);
   console.info(
     "[watchHistoryService] Watch list process triggered by video view.",
@@ -1199,12 +1288,61 @@ async function snapshot(items, options = {}) {
   return run;
 }
 
-async function loadLatest(actorInput) {
+function scheduleWatchHistoryRefresh(actorKey, cacheEntry = {}) {
+  if (!actorKey) {
+    return Promise.resolve([]);
+  }
+
+  if (cacheEntry && typeof cacheEntry === "object" && cacheEntry.promise) {
+    return cacheEntry.promise;
+  }
+
+  const promise = nostrClient
+    .resolveWatchHistory(actorKey, { forceRefresh: true })
+    .then((resolvedItems) => updateFingerprintCache(actorKey, resolvedItems))
+    .then(() => {
+      const latest = state.fingerprintCache.get(actorKey);
+      return latest?.items || [];
+    })
+    .catch((error) => {
+      if (isDevMode) {
+        console.warn("[watchHistoryService] Failed to load watch history:", error);
+      }
+      throw error;
+    })
+    .finally(() => {
+      const entry = state.fingerprintCache.get(actorKey);
+      if (entry) {
+        delete entry.promise;
+      }
+    });
+
+  console.info("[watchHistoryService] Triggered nostr watch list refresh.", {
+    actor: actorKey,
+  });
+
+  const baseEntry = cacheEntry && typeof cacheEntry === "object" ? cacheEntry : {};
+  state.fingerprintCache.set(actorKey, {
+    ...baseEntry,
+    promise,
+  });
+
+  return promise;
+}
+
+async function loadLatest(actorInput, options = {}) {
   const actorKey = resolveActorKey(actorInput);
   if (!actorKey) {
     return [];
   }
 
+  const normalizedOptions =
+    options && typeof options === "object" ? options : {};
+  // Only callers that can react to a later fingerprint update should opt into
+  // stale cache reads; everyone else waits for the fresh list so they do not
+  // miss entries.
+  const allowStale = normalizedOptions.allowStale === true;
+
   if (!isFeatureEnabled(actorKey)) {
     if (!state.restored) {
       restoreQueueState();
@@ -1230,12 +1368,13 @@ async function loadLatest(actorInput) {
       cacheExpiresAt: cacheEntry?.expiresAt || null,
     }
   );
-  if (
-    cacheEntry?.items &&
-    cacheEntry.expiresAt &&
-    cacheEntry.expiresAt > now &&
-    Array.isArray(cacheEntry.items)
-  ) {
+  const hasCachedItems = Array.isArray(cacheEntry?.items);
+  const cacheIsFresh =
+    hasCachedItems &&
+    cacheEntry?.expiresAt &&
+    cacheEntry.expiresAt > now;
+
+  if (cacheIsFresh) {
     console.info(
       "[watchHistoryService] Returning cached watch list items.",
       {
@@ -1253,42 +1392,35 @@ async function loadLatest(actorInput) {
         actor: actorKey,
       }
     );
+    if (allowStale && hasCachedItems) {
+      console.info(
+        "[watchHistoryService] Returning stale watch list items while refresh completes.",
+        {
+          actor: actorKey,
+          itemCount: cacheEntry.items.length,
+        }
+      );
+      return cacheEntry.items;
+    }
     return cacheEntry.promise;
   }
 
-  const promise = nostrClient
-    .resolveWatchHistory(actorKey, { forceRefresh: true })
-    .then((resolvedItems) => updateFingerprintCache(actorKey, resolvedItems))
-    .then(() => {
-      const latest = state.fingerprintCache.get(actorKey);
-      return latest?.items || [];
-    })
-    .catch((error) => {
-      if (isDevMode) {
-        console.warn("[watchHistoryService] Failed to load watch history:", error);
-      }
-      throw error;
-    })
-    .finally(() => {
-      const entry = state.fingerprintCache.get(actorKey);
-      if (entry) {
-        delete entry.promise;
-      }
-    });
+  if (!allowStale || !hasCachedItems) {
+    return scheduleWatchHistoryRefresh(actorKey, cacheEntry);
+  }
+
+  const refreshPromise = scheduleWatchHistoryRefresh(actorKey, cacheEntry);
+  refreshPromise.catch(() => {});
 
   console.info(
-    "[watchHistoryService] Triggered nostr watch list refresh.",
+    "[watchHistoryService] Returning stale watch list items while refresh is pending.",
     {
       actor: actorKey,
+      itemCount: cacheEntry?.items?.length || 0,
     }
   );
 
-  state.fingerprintCache.set(actorKey, {
-    ...(cacheEntry || {}),
-    promise,
-  });
-
-  return promise;
+  return cacheEntry.items || [];
 }
 
 async function getFingerprint(actorInput) {
diff --git a/package-lock.json b/package-lock.json
index e146d273..b9a3f938 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,12 @@
       "version": "1.0.0",
       "devDependencies": {
         "autoprefixer": "^10.4.19",
+        "jsdom": "^24.0.0",
         "postcss": "^8.4.41",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.5",
+        "stylelint": "^16.8.0",
+        "stylelint-config-standard": "^36.0.1",
         "tailwindcss": "^3.4.13"
       }
     },
@@ -26,6 +31,229 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@cacheable/memoize": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@cacheable/memoize/-/memoize-2.0.3.tgz",
+      "integrity": "sha512-hl9wfQgpiydhQEIv7fkjEzTGE+tcosCXLKFDO707wYJ/78FVOlowb36djex5GdbSyeHnG62pomYLMuV/OT8Pbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/utils": "^2.0.3"
+      }
+    },
+    "node_modules/@cacheable/memory": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.0.3.tgz",
+      "integrity": "sha512-R3UKy/CKOyb1LZG/VRCTMcpiMDyLH7SH3JrraRdK6kf3GweWCOU3sgvE13W3TiDRbxnDKylzKJvhUAvWl9LQOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memoize": "^2.0.3",
+        "@cacheable/utils": "^2.0.3",
+        "@keyv/bigmap": "^1.0.2",
+        "hookified": "^1.12.1",
+        "keyv": "^5.5.3"
+      }
+    },
+    "node_modules/@cacheable/utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.1.0.tgz",
+      "integrity": "sha512-ZdxfOiaarMqMj+H7qwlt5EBKWaeGihSYVHdQv5lUsbn8MJJOTW82OIwirQ39U5tMZkNvy3bQE+ryzC+xTAb9/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "keyv": "^5.5.3"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
+      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@dual-bundle/import-meta-resolve": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.2.1.tgz",
+      "integrity": "sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/JounQin"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -83,6 +311,26 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@keyv/bigmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.0.2.tgz",
+      "integrity": "sha512-KR03xkEZlAZNF4IxXgVXb+uNIVNvwdh8UwI0cnc7WI6a+aQcDp8GL80qVfeB4E5NpsKJzou5jU0r6yLSSbMOtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.12.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -132,6 +380,33 @@
         "node": ">=14"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
@@ -186,6 +461,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -311,6 +620,45 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/cacheable": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.1.0.tgz",
+      "integrity": "sha512-zzL1BxdnqwD69JRT0dihnawAcLkBMwAH+hZSKjUzeBbPedVhk3qYPjRw9VOMYWwt5xRih5xd8S+3kEdGohZm/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memoize": "^2.0.3",
+        "@cacheable/memory": "^2.0.3",
+        "@cacheable/utils": "^2.1.0",
+        "hookified": "^1.12.1",
+        "keyv": "^5.5.3",
+        "qified": "^0.5.0"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -400,6 +748,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -410,6 +778,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -425,6 +820,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-functions-list": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12 || >=16"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -438,6 +857,76 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cssstyle/node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -445,6 +934,19 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -452,6 +954,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -473,6 +990,88 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -483,6 +1082,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -513,6 +1119,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -523,6 +1156,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "10.1.4",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.4.tgz",
+      "integrity": "sha512-5XRUFc0WTtUbjfGzEwXc42tiGxQHBmtbUG1h9L2apu4SulCGN3Hqm//9D6FAolf8MYNL7f/YlJl9vy08pj5JuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.13"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -536,6 +1179,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/flat-cache": {
+      "version": "6.1.17",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.17.tgz",
+      "integrity": "sha512-Jzse4YoiUJBVYTwz5Bwl4h/2VQM7e2KK3MVAMlXzX9uamIHAH/TXUlRKU1AQGQOryQhN0EsmufiiF40G057YXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^2.0.3",
+        "flatted": "^3.3.3",
+        "hookified": "^1.12.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -553,6 +1215,23 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -592,6 +1271,45 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -626,6 +1344,137 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -639,6 +1488,141 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hookified": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.12.1.tgz",
+      "integrity": "sha512-xnKGl+iMIlhrZmGHB729MqlmPoWBznctSQTYCpFKqNsCgimJQmithcW0xSQMMFzYnV2iKUh25alswn6epgxS0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -711,6 +1695,23 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -744,6 +1745,108 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "24.1.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.3.tgz",
+      "integrity": "sha512-MyL55p3Ut3cXbeBEG7Hcv0mVM8pp8PBNWxRqchZnSfAiES1v1mRnMeFfaHWIPULpwsYfvO+ZmMZz5tGCnjzDUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.0.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.4",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/keyv": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.3.tgz",
+      "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/known-css-properties": {
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+      "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -764,6 +1867,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -771,6 +1881,47 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -795,6 +1946,29 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -821,6 +1995,13 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -879,6 +2060,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.22",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.22.tgz",
+      "integrity": "sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -906,6 +2094,51 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -940,6 +2173,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1115,6 +2358,40 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+      "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -1136,6 +2413,152 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.14",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
+      "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qified": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/qified/-/qified-0.5.0.tgz",
+      "integrity": "sha512-Zj6Q/Vc/SQ+Fzc87N90jJUzBzxD7MVQ2ZvGyMmYtnl2u1a07CejAhvtk4ZwASos+SiHKCAIylyGHJKIek75QBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.12.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1180,6 +2603,23 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -1201,6 +2641,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -1212,6 +2662,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -1236,6 +2693,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -1272,6 +2749,50 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1386,6 +2907,207 @@
         "node": ">=8"
       }
     },
+    "node_modules/stylelint": {
+      "version": "16.25.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.25.0.tgz",
+      "integrity": "sha512-Li0avYWV4nfv1zPbdnxLYBGq4z8DVZxbRgx4Kn6V+Uftz1rMoF1qiEI3oL4kgWqyYgCgs7gT5maHNZ82Gk03vQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "@csstools/media-query-list-parser": "^4.0.3",
+        "@csstools/selector-specificity": "^5.0.0",
+        "@dual-bundle/import-meta-resolve": "^4.2.1",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.0",
+        "css-functions-list": "^3.2.3",
+        "css-tree": "^3.1.0",
+        "debug": "^4.4.3",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^10.1.4",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.3.1",
+        "ignore": "^7.0.5",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.37.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^13.2.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.6",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.0",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "supports-hyperlinks": "^3.2.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^5.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz",
+      "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "36.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz",
+      "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended": "^14.0.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
+      "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/stylelint/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stylelint/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -1409,6 +3131,36 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.2.0.tgz",
+      "integrity": "sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -1422,6 +3174,81 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/table/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -1496,6 +3323,35 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -1503,6 +3359,16 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -1534,6 +3400,17 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -1541,6 +3418,66 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -1655,6 +3592,59 @@
         "node": ">=8"
       }
     },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yaml": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
diff --git a/package.json b/package.json
index f52a2303..bbc20f03 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,19 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "build:css": "npx tailwindcss -c tailwind.config.cjs -i css/tailwind.source.css -o css/tailwind.generated.css --minify"
+    "build:css": "npx tailwindcss -c tailwind.config.cjs -i css/tailwind.source.css -o css/tailwind.generated.css --minify",
+    "format": "prettier --cache --write css/style.css css/tailwind.source.css css/tokens.css \"docs/**/*.html\" tailwind.config.cjs README.md",
+    "lint:css": "stylelint css/tailwind.source.css css/tokens.css",
+    "check:css": "npm run build:css && git diff --exit-code -- css/tailwind.generated.css"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "stylelint": "^16.8.0",
+    "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^3.4.13"
   }
 }
diff --git a/prettier.config.cjs b/prettier.config.cjs
new file mode 100644
index 00000000..1f2fba84
--- /dev/null
+++ b/prettier.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+  singleQuote: false,
+  trailingComma: "none"
+};
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
new file mode 100644
index 00000000..53d9d664
--- /dev/null
+++ b/stylelint.config.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  ignoreFiles: ['css/tailwind.generated.css', 'css/style.css'],
+  rules: {
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind', 'layer', 'apply'] }],
+    'import-notation': 'string',
+    'color-no-hex': true,
+    'declaration-property-value-allowed-list': {
+      color: ['var\(--.*\)', 'inherit', 'currentColor'],
+      'background-color': ['var\(--.*\)', 'transparent', 'inherit'],
+      background: ['var\(--.*\)', 'none', 'transparent'],
+      'border-color': ['var\(--.*\)', 'transparent', 'inherit', 'currentColor'],
+      'outline-color': ['var\(--.*\)', 'transparent', 'inherit', 'currentColor'],
+      fill: ['var\(--.*\)', 'none', 'currentColor', 'inherit'],
+      stroke: ['var\(--.*\)', 'none', 'currentColor', 'inherit'],
+      'box-shadow': ['var\(--.*\)', 'none']
+    }
+  }
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e0910ced..ce16944a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,13 +1,113 @@
 module.exports = {
   content: [
-    './index.html',
-    './blog.html',
-    './components/**/*.html',
-    './views/**/*.html',
-    './js/**/*.js'
+    "./index.html",
+    "./blog.html",
+    "./components/**/*.html",
+    "./views/**/*.html",
+    "./js/**/*.js"
   ],
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        page: "var(--color-page)",
+        "page-alt": "var(--color-page-alt)",
+        surface: "var(--color-surface)",
+        "surface-alt": "var(--color-surface-alt)",
+        overlay: "var(--color-overlay)",
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+        panel: {
+          DEFAULT: "var(--color-panel)",
+          hover: "var(--color-panel-hover)"
+        },
+        card: {
+          DEFAULT: "var(--color-card)",
+          private: "var(--color-card-private)",
+          critical: "var(--color-card-critical)"
+        },
+        border: {
+          DEFAULT: "var(--color-border)",
+          subtle: "var(--color-border-subtle)"
+        },
+        text: {
+          DEFAULT: "var(--color-text)",
+          strong: "var(--color-text-strong)",
+          muted: "var(--color-muted)"
+        },
+        muted: {
+          DEFAULT: "var(--color-muted)",
+          strong: "var(--color-muted-strong)",
+          alt: "var(--color-muted-alt)"
+        },
+        info: {
+          DEFAULT: "var(--color-info)",
+          strong: "var(--color-info-strong)",
+          pressed: "var(--color-info-pressed)"
+        },
+        critical: {
+          DEFAULT: "var(--color-critical)",
+          strong: "var(--color-critical-strong)"
+        },
+        neutral: {
+          600: "var(--color-neutral-600)",
+          700: "var(--color-neutral-700)"
+        },
+        white: "var(--color-white)",
+        black: "var(--color-black)"
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+        full: "var(--radius-full)"
+      },
+      boxShadow: {
+        sm: "var(--shadow-sm)",
+        md: "var(--shadow-md)",
+        lg: "var(--shadow-lg)",
+        modal: "var(--shadow-modal)"
+      },
+      spacing: {
+        "2xs": "var(--space-2xs)",
+        xs: "var(--space-xs)",
+        sm: "var(--space-sm)",
+        md: "var(--space-md)",
+        lg: "var(--space-lg)",
+        xl: "var(--space-xl)",
+        "2xl": "var(--space-2xl)"
+      },
+      fontFamily: {
+        sans: ["var(--font-family-sans)"],
+        mono: ["var(--font-family-mono)"]
+      },
+      fontSize: {
+        xs: ["var(--font-size-xs)", { lineHeight: "var(--line-height-tight)" }],
+        sm: ["var(--font-size-sm)", { lineHeight: "var(--line-height-snug)" }],
+        base: [
+          "var(--font-size-base)",
+          { lineHeight: "var(--line-height-base)" }
+        ],
+        lg: ["var(--font-size-lg)", { lineHeight: "var(--line-height-base)" }],
+        xl: [
+          "var(--font-size-xl)",
+          { lineHeight: "var(--line-height-relaxed)" }
+        ],
+        "2xl": [
+          "var(--font-size-2xl)",
+          { lineHeight: "var(--line-height-relaxed)" }
+        ]
+      },
+      transitionDuration: {
+        fast: "var(--motion-duration-fast)",
+        base: "var(--motion-duration-base)",
+        slow: "var(--motion-duration-slow)"
+      },
+      transitionTimingFunction: {
+        "ease-out": "var(--motion-ease-out)",
+        "ease-in-out": "var(--motion-ease-in-out)"
+      }
+    }
   },
   plugins: []
 };
diff --git a/tests/admin-list-store.test.mjs b/tests/admin-list-store.test.mjs
new file mode 100644
index 00000000..33ebf951
--- /dev/null
+++ b/tests/admin-list-store.test.mjs
@@ -0,0 +1,89 @@
+// Run with: node tests/admin-list-store.test.mjs
+
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (!globalThis.window.NostrTools) {
+  globalThis.window.NostrTools = {};
+}
+
+const mockNip19 = {
+  decode(value) {
+    if (typeof value !== "string") {
+      throw new Error("invalid input");
+    }
+    if (value.trim().toLowerCase().startsWith("npub")) {
+      return { type: "npub", data: "mock" };
+    }
+    throw new Error("unsupported value");
+  },
+  npubEncode(hex) {
+    if (typeof hex !== "string") {
+      throw new Error("invalid hex");
+    }
+    const trimmed = hex.trim();
+    if (!trimmed) {
+      throw new Error("empty hex");
+    }
+    return `npub1${trimmed}`;
+  },
+};
+
+globalThis.window.NostrTools.nip19 = mockNip19;
+
+const { __adminListStoreTestHooks } = await import("../js/adminListStore.js");
+
+const { extractNpubsFromEvent, normalizeParticipantTagValue } =
+  __adminListStoreTestHooks;
+
+const sampleHex = "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef";
+const sampleNpub = "npub1existingparticipant";
+
+const event = {
+  tags: [
+    ["p", sampleHex],
+    ["p", sampleNpub],
+    ["p", "  npub1existingparticipant  "],
+    ["p", ""],
+    ["e", "irrelevant"],
+  ],
+};
+
+const normalized = extractNpubsFromEvent(event);
+assert.deepEqual(
+  normalized,
+  [
+    mockNip19.npubEncode(sampleHex),
+    sampleNpub,
+  ],
+  "should return unique npubs from hex and npub participant tags"
+);
+
+mockNip19.decode = () => {
+  throw new Error("decode unavailable");
+};
+
+assert.equal(
+  normalizeParticipantTagValue(sampleNpub),
+  sampleNpub,
+  "should fall back to the raw npub when decode fails"
+);
+
+mockNip19.decode = undefined;
+mockNip19.npubEncode = undefined;
+
+globalThis.window.NostrTools.nip19 = mockNip19;
+
+const fallbackHex = "abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcd";
+
+assert.equal(
+  normalizeParticipantTagValue(fallbackHex),
+  fallbackHex,
+  "should preserve hex when nip19 helpers are unavailable"
+);
+
+console.log("admin-list-store tests passed");
diff --git a/tests/auth-service.test.mjs b/tests/auth-service.test.mjs
new file mode 100644
index 00000000..f11a2596
--- /dev/null
+++ b/tests/auth-service.test.mjs
@@ -0,0 +1,177 @@
+// Run with: node tests/auth-service.test.mjs
+
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+import AuthService from "../js/services/authService.js";
+import {
+  setPubkey,
+  setCurrentUserNpub,
+} from "../js/state/appState.js";
+import {
+  mutateSavedProfiles,
+  setActiveProfilePubkey,
+  getProfileCacheMap,
+} from "../js/state/cache.js";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (!globalThis.window.NostrTools) {
+  globalThis.window.NostrTools = {};
+}
+
+if (!globalThis.window.NostrTools.nip19) {
+  globalThis.window.NostrTools.nip19 = {
+    decode(value) {
+      if (typeof value !== "string") {
+        throw new Error("invalid value");
+      }
+      const trimmed = value.trim();
+      if (!trimmed) {
+        throw new Error("empty value");
+      }
+      if (trimmed.startsWith("npub1")) {
+        return { type: "npub", data: trimmed.slice(5) || "" };
+      }
+      return { type: "hex", data: trimmed };
+    },
+    npubEncode(hex) {
+      if (typeof hex !== "string") {
+        throw new Error("invalid hex");
+      }
+      const trimmed = hex.trim();
+      if (!trimmed) {
+        throw new Error("empty hex");
+      }
+      return `npub1${trimmed}`;
+    },
+  };
+}
+
+const SAMPLE_PUBKEY = "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef";
+
+function resetState() {
+  setPubkey(null);
+  setCurrentUserNpub(null);
+  setActiveProfilePubkey(null, { persist: false });
+  mutateSavedProfiles(() => [], { persist: false, persistActive: false });
+  const cache = getProfileCacheMap();
+  if (cache && typeof cache.clear === "function") {
+    cache.clear();
+  }
+}
+
+await (async () => {
+  resetState();
+  setPubkey(SAMPLE_PUBKEY);
+
+  const calls = [];
+  let resolveBlocks;
+
+  const service = new AuthService({
+    userBlocks: {
+      loadBlocks: () => {
+        calls.push("blocks:start");
+        return new Promise((resolve) => {
+          resolveBlocks = resolve;
+        });
+      },
+    },
+    relayManager: {
+      loadRelayList: () => {
+        calls.push("relays:start");
+        return Promise.resolve("relays");
+      },
+    },
+  });
+
+  service.loadOwnProfile = () => {
+    calls.push("profile:start");
+    return Promise.resolve({ name: "Test User" });
+  };
+
+  const promise = service.applyPostLoginState();
+
+  await Promise.resolve();
+
+  assert.deepEqual(calls, ["blocks:start", "relays:start", "profile:start"]);
+
+  resolveBlocks();
+
+  const detail = await promise;
+
+  assert.equal(detail.pubkey, SAMPLE_PUBKEY);
+  assert.equal(detail.blocksLoaded, true);
+  assert.equal(detail.relaysLoaded, true);
+  assert.deepEqual(detail.profile, { name: "Test User" });
+})();
+
+await (async () => {
+  resetState();
+  setPubkey(SAMPLE_PUBKEY);
+
+  const logs = [];
+  const service = new AuthService({
+    userBlocks: {
+      loadBlocks: () => {
+        throw new Error("blocks failed synchronously");
+      },
+    },
+    relayManager: {
+      loadRelayList: () => Promise.reject(new Error("relays failed")),
+    },
+  });
+
+  service.log = (message, error) => {
+    logs.push({ message, error });
+  };
+
+  service.loadOwnProfile = () => Promise.reject(new Error("profile failed"));
+
+  const detail = await service.applyPostLoginState();
+
+  assert.equal(detail.pubkey, SAMPLE_PUBKEY);
+  assert.equal(detail.blocksLoaded, false);
+  assert.equal(detail.relaysLoaded, false);
+  assert.equal(detail.profile, null);
+
+  assert.equal(logs.length, 3);
+  assert(logs.some(({ message }) => message.includes("block list")));
+  assert(logs.some(({ message }) => message.includes("relay list")));
+  assert(logs.some(({ message }) => message.includes("own profile")));
+})();
+
+await (async () => {
+  resetState();
+
+  const service = new AuthService();
+  const detail = await service.applyPostLoginState();
+
+  assert.deepEqual(detail, {
+    pubkey: null,
+    blocksLoaded: false,
+    relaysLoaded: false,
+    profile: null,
+  });
+})();
+
+await (async () => {
+  resetState();
+
+  const service = new AuthService();
+  const postLogin = {
+    pubkey: SAMPLE_PUBKEY,
+    blocksLoaded: true,
+    relaysLoaded: false,
+    profile: { name: "Stub" },
+  };
+
+  service.applyPostLoginState = async () => postLogin;
+
+  const detail = await service.login(SAMPLE_PUBKEY);
+
+  assert.equal(detail.postLogin, postLogin);
+  assert.deepEqual(detail.postLogin, postLogin);
+})();
diff --git a/tests/discussion-count-service.test.mjs b/tests/discussion-count-service.test.mjs
new file mode 100644
index 00000000..75652af2
--- /dev/null
+++ b/tests/discussion-count-service.test.mjs
@@ -0,0 +1,145 @@
+// Run with: node tests/discussion-count-service.test.mjs
+
+import assert from "node:assert/strict";
+import { JSDOM } from "jsdom";
+
+import DiscussionCountService, {
+  COUNT_UNSUPPORTED_TITLE,
+} from "../js/services/discussionCountService.js";
+
+function createDomWithCountElement(videoId) {
+  const dom = new JSDOM(`
+    <div id="root">
+      <div data-discussion-count="${videoId}" data-count-state="idle">
+        <span data-discussion-count-value>0</span>
+      </div>
+    </div>
+  `);
+  const document = dom.window.document;
+  const container = document.getElementById("root");
+  const target = container.querySelector(
+    `[data-discussion-count="${videoId}"]`
+  );
+  return { dom, document, container, target };
+}
+
+async function testRefreshCountsCachesResults() {
+  const video = {
+    id: "count-video-1",
+    tags: [["d", "identifier-1"]],
+    pubkey: "pubkey-1",
+    kind: 30078,
+  };
+  const { container, target } = createDomWithCountElement(video.id);
+  const service = new DiscussionCountService();
+  const nostrClient = {
+    pool: {},
+    countEventsAcrossRelays: async (filters) => {
+      assert.equal(filters.length, 2, "should request both id and address filters");
+      return {
+        total: 5,
+        perRelay: [{ ok: true }],
+      };
+    },
+  };
+
+  service.refreshCounts([video], {
+    videoListRoot: container,
+    nostrClient,
+  });
+
+  const inFlight = service.inFlightDiscussionCounts.get(video.id);
+  assert.ok(inFlight, "refresh should record an in-flight request");
+  await inFlight;
+
+  assert.equal(
+    service.getCachedCount(video.id),
+    5,
+    "successful responses should be cached"
+  );
+  assert.equal(
+    target.dataset.countState,
+    "ready",
+    "DOM should transition to ready after a successful fetch"
+  );
+  assert.equal(
+    target.querySelector("[data-discussion-count-value]").textContent,
+    "5",
+    "count value should reflect the fetched total"
+  );
+
+  let callCount = 0;
+  nostrClient.countEventsAcrossRelays = async () => {
+    callCount += 1;
+    return { total: 99, perRelay: [{ ok: true }] };
+  };
+
+  service.refreshCounts([video], {
+    videoListRoot: container,
+    nostrClient,
+  });
+
+  assert.equal(
+    callCount,
+    0,
+    "cached videos should not trigger additional COUNT queries"
+  );
+  assert.equal(
+    target.querySelector("[data-discussion-count-value]").textContent,
+    "5",
+    "cached values should remain visible without pending states"
+  );
+}
+
+async function testUnsupportedRelaysUpdateDomState() {
+  const video = {
+    id: "unsupported-video",
+    tags: [["d", "identifier-2"]],
+    pubkey: "pubkey-2",
+    kind: 30078,
+  };
+  const { container, target } = createDomWithCountElement(video.id);
+  const service = new DiscussionCountService();
+  const nostrClient = {
+    pool: {},
+    countEventsAcrossRelays: async () => ({
+      total: 7,
+      perRelay: [{ ok: false }],
+    }),
+  };
+
+  service.refreshCounts([video], {
+    videoListRoot: container,
+    nostrClient,
+  });
+
+  const inFlight = service.inFlightDiscussionCounts.get(video.id);
+  assert.ok(inFlight, "unsupported relays should still trigger in-flight tracking");
+  await inFlight;
+
+  assert.equal(
+    service.getCachedCount(video.id),
+    undefined,
+    "unsupported relay responses should not populate the cache"
+  );
+  assert.equal(
+    target.dataset.countState,
+    "unsupported",
+    "DOM should flag unsupported relays for COUNT queries"
+  );
+  assert.equal(
+    target.querySelector("[data-discussion-count-value]").textContent,
+    "—",
+    "unsupported states should render an em dash for the count value"
+  );
+  assert.equal(
+    target.getAttribute("title"),
+    COUNT_UNSUPPORTED_TITLE,
+    "unsupported states should expose a descriptive tooltip"
+  );
+}
+
+await testRefreshCountsCachesResults();
+await testUnsupportedRelaysUpdateDomState();
+
+console.log("discussion-count-service tests passed");
diff --git a/tests/edit-modal-submit-state.test.mjs b/tests/edit-modal-submit-state.test.mjs
new file mode 100644
index 00000000..4e1a2f80
--- /dev/null
+++ b/tests/edit-modal-submit-state.test.mjs
@@ -0,0 +1,143 @@
+import test, { beforeEach, afterEach } from 'node:test';
+import { strict as assert } from 'node:assert';
+import { readFile } from 'node:fs/promises';
+import { JSDOM } from 'jsdom';
+
+import { EditModal } from '../js/ui/components/EditModal.js';
+
+const editModalHtml = await readFile(
+  new URL('../components/edit-video-modal.html', import.meta.url),
+  'utf8',
+);
+
+let dom;
+let container;
+
+beforeEach(() => {
+  dom = new JSDOM(
+    '<!DOCTYPE html><html><body><div id="modalContainer"></div></body></html>',
+    {
+      url: 'https://example.com',
+      pretendToBeVisual: true,
+    },
+  );
+
+  global.window = dom.window;
+  global.document = dom.window.document;
+  global.HTMLElement = dom.window.HTMLElement;
+  global.HTMLInputElement = dom.window.HTMLInputElement;
+  global.HTMLButtonElement = dom.window.HTMLButtonElement;
+  global.CustomEvent = dom.window.CustomEvent;
+  global.Event = dom.window.Event;
+  global.EventTarget = dom.window.EventTarget;
+
+  container = document.getElementById('modalContainer');
+
+  global.fetch = async (resource) => {
+    if (
+      typeof resource === 'string' &&
+      resource.includes('components/edit-video-modal.html')
+    ) {
+      return {
+        ok: true,
+        status: 200,
+        text: async () => editModalHtml,
+      };
+    }
+
+    throw new Error(`Unexpected fetch: ${resource}`);
+  };
+});
+
+afterEach(() => {
+  delete global.fetch;
+  delete global.EventTarget;
+  delete global.Event;
+  delete global.CustomEvent;
+  delete global.HTMLButtonElement;
+  delete global.HTMLInputElement;
+  delete global.HTMLElement;
+  delete global.document;
+  delete global.window;
+
+  if (dom) {
+    dom.window.close();
+    dom = null;
+  }
+  container = null;
+});
+
+function createModal({
+  showError,
+  eventTarget = new EventTarget(),
+} = {}) {
+  return new EditModal({
+    removeTrackingScripts: () => {},
+    setGlobalModalState: () => {},
+    showError: showError || (() => {}),
+    getMode: () => 'live',
+    eventTarget,
+    container,
+  });
+}
+
+test('ignores additional submissions while pending without spurious errors', async () => {
+  const errorMessages = [];
+  const modalEvents = new EventTarget();
+  const modal = createModal({
+    showError: (message) => {
+      if (message) {
+        errorMessages.push(message);
+      }
+    },
+    eventTarget: modalEvents,
+  });
+
+  await modal.load({ container });
+
+  const video = {
+    id: 'video1',
+    pubkey: 'pubkey1',
+    title: 'Sample video',
+    url: 'https://example.com/video.mp4',
+    thumbnail: '',
+    description: '',
+    enableComments: true,
+    isPrivate: false,
+  };
+
+  await modal.open(video);
+
+  assert.ok(modal.submitButton, 'expected submit button to be cached');
+  assert.equal(modal.submitButton.disabled, false);
+
+  const submissions = [];
+  modal.addEventListener('video:edit-submit', (event) => {
+    submissions.push(event.detail);
+  });
+
+  modal.submit();
+
+  assert.equal(submissions.length, 1, 'first submit should emit once');
+  assert.equal(modal.pendingSubmit, true, 'pending flag should be set after submit');
+  assert.equal(
+    modal.pendingSubmitVideo?.id,
+    video.id,
+    'pending video context should match the edited video',
+  );
+  assert.equal(modal.submitButton.disabled, true, 'button should disable while pending');
+
+  modal.submit();
+
+  assert.equal(submissions.length, 1, 'duplicate submit should be ignored');
+  assert.equal(
+    errorMessages.includes('No video selected for editing.'),
+    false,
+    'should not surface missing video error during pending submit',
+  );
+
+  modal.setSubmitState({ pending: false });
+
+  assert.equal(modal.pendingSubmit, false, 'pending flag should reset after release');
+  assert.equal(modal.submitButton.disabled, false, 'button should re-enable after release');
+});
diff --git a/tests/feed-engine.test.mjs b/tests/feed-engine.test.mjs
new file mode 100644
index 00000000..a1791719
--- /dev/null
+++ b/tests/feed-engine.test.mjs
@@ -0,0 +1,222 @@
+// Run with: node tests/feed-engine.test.mjs
+
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (typeof globalThis.localStorage === "undefined") {
+  const storage = new Map();
+  globalThis.localStorage = {
+    getItem(key) {
+      return storage.has(key) ? storage.get(key) : null;
+    },
+    setItem(key, value) {
+      storage.set(String(key), String(value));
+    },
+    removeItem(key) {
+      storage.delete(key);
+    },
+    clear() {
+      storage.clear();
+    },
+  };
+}
+
+if (typeof window.localStorage === "undefined") {
+  window.localStorage = globalThis.localStorage;
+}
+
+const {
+  createFeedEngine,
+  createDedupeByRootStage,
+  createBlacklistFilterStage,
+  createWatchHistorySuppressionStage,
+  createChronologicalSorter,
+} = await import("../js/feedEngine/index.js");
+
+async function testDedupeOrdering() {
+  const engine = createFeedEngine();
+  const feedName = "dedupe";
+
+  const videoOld = { id: "a-old", videoRootId: "rootA", created_at: 100 };
+  const videoNew = { id: "a-new", videoRootId: "rootA", created_at: 200 };
+  const videoOther = { id: "b", created_at: 150 };
+
+  engine.registerFeed(feedName, {
+    source: async () => [
+      { video: videoOld },
+      { video: videoOther },
+      { video: videoNew },
+    ],
+    stages: [createDedupeByRootStage()],
+    sorter: createChronologicalSorter(),
+  });
+
+  const result = await engine.runFeed(feedName);
+  assert.equal(result.videos.length, 2, "dedupe stage should drop older root entries");
+  assert.deepEqual(
+    result.videos.map((video) => video.id),
+    ["a-new", "b"],
+    "videos should be returned newest first",
+  );
+
+  const dedupeReasons = result.metadata.why.filter(
+    (entry) => entry.reason === "older-root-version",
+  );
+  assert.equal(dedupeReasons.length, 1, "dedupe stage should log one older-root reason");
+  assert.equal(dedupeReasons[0].videoId, "a-old");
+  assert.equal(dedupeReasons[0].rootId, "rootA");
+}
+
+async function testBlacklistFiltering() {
+  const engine = createFeedEngine();
+  const feedName = "blacklist";
+
+  engine.registerFeed(feedName, {
+    source: async () => [
+      { video: { id: "safe", pubkey: "npub1", created_at: 1 } },
+      { video: { id: "blocked", pubkey: "npub2", created_at: 2 } },
+      { video: { id: "blocked-author", pubkey: "blocked", created_at: 3 } },
+    ],
+    stages: [
+      createBlacklistFilterStage({
+        shouldIncludeVideo(video, { blacklistedEventIds, isAuthorBlocked }) {
+          if (blacklistedEventIds.has(video.id)) {
+            return false;
+          }
+          if (isAuthorBlocked(video.pubkey)) {
+            return false;
+          }
+          return true;
+        },
+      }),
+    ],
+    sorter: createChronologicalSorter(),
+  });
+
+  const result = await engine.runFeed(feedName, {
+    runtime: {
+      blacklistedEventIds: new Set(["blocked"]),
+      isAuthorBlocked: (pubkey) => pubkey === "blocked",
+    },
+  });
+
+  assert.deepEqual(result.videos.map((video) => video.id), ["safe"]);
+
+  const blacklistReasons = result.metadata.why.filter(
+    (entry) => entry.reason === "blacklist",
+  );
+  assert.equal(
+    blacklistReasons.length,
+    2,
+    "blacklist stage should log two exclusions (one per blocked item)",
+  );
+  const removedIds = new Set(blacklistReasons.map((entry) => entry.videoId));
+  assert.ok(removedIds.has("blocked"));
+  assert.ok(removedIds.has("blocked-author"));
+}
+
+async function testWatchHistoryHookIsolation() {
+  const engine = createFeedEngine();
+
+  engine.registerFeed("feed-a", {
+    source: async () => [
+      { video: { id: "x1", created_at: 10 }, pointer: { type: "e", value: "x1" } },
+    ],
+    stages: [createWatchHistorySuppressionStage()],
+  });
+
+  engine.registerFeed("feed-b", {
+    source: async () => [
+      { video: { id: "y1", created_at: 20 }, pointer: { type: "e", value: "y1" } },
+    ],
+    stages: [createWatchHistorySuppressionStage()],
+  });
+
+  let hookACount = 0;
+  let hookBCount = 0;
+
+  const resultA = await engine.runFeed("feed-a", {
+    hooks: {
+      watchHistory: {
+        async shouldSuppress(item) {
+          hookACount += 1;
+          return item?.video?.id === "x1";
+        },
+      },
+    },
+  });
+
+  const resultB = await engine.runFeed("feed-b", {
+    hooks: {
+      watchHistory: {
+        async shouldSuppress(item) {
+          hookBCount += 1;
+          return false;
+        },
+      },
+    },
+  });
+
+  assert.equal(hookACount, 1, "feed A hook should run once");
+  assert.equal(hookBCount, 1, "feed B hook should run once");
+
+  assert.equal(resultA.videos.length, 0, "feed A should suppress the single video");
+  assert.equal(resultB.videos.length, 1, "feed B should keep its video");
+
+  const whyA = resultA.metadata.why.find((entry) => entry.reason === "watch-history");
+  assert.ok(whyA, "feed A should report watch-history suppression metadata");
+  assert.equal(whyA.videoId, "x1");
+}
+
+async function testBlacklistOrderingWithRuntimeChanges() {
+  const engine = createFeedEngine();
+  const feedName = "runtime-order";
+
+  engine.registerFeed(feedName, {
+    source: async () => [
+      { video: { id: "v1", created_at: 100 } },
+      { video: { id: "v2", created_at: 200 } },
+      { video: { id: "v3", created_at: 300 } },
+    ],
+    stages: [
+      createBlacklistFilterStage({
+        shouldIncludeVideo(video, { blacklistedEventIds }) {
+          return !blacklistedEventIds.has(video.id);
+        },
+      }),
+    ],
+    sorter: createChronologicalSorter(),
+  });
+
+  const baseline = await engine.runFeed(feedName, {
+    runtime: { blacklistedEventIds: new Set() },
+  });
+  assert.deepEqual(baseline.videos.map((video) => video.id), [
+    "v3",
+    "v2",
+    "v1",
+  ]);
+
+  const withoutTop = await engine.runFeed(feedName, {
+    runtime: { blacklistedEventIds: new Set(["v3"]) },
+  });
+  assert.deepEqual(withoutTop.videos.map((video) => video.id), ["v2", "v1"]);
+
+  const withoutMiddle = await engine.runFeed(feedName, {
+    runtime: { blacklistedEventIds: new Set(["v2"]) },
+  });
+  assert.deepEqual(withoutMiddle.videos.map((video) => video.id), [
+    "v3",
+    "v1",
+  ]);
+}
+
+await testDedupeOrdering();
+await testBlacklistFiltering();
+await testWatchHistoryHookIsolation();
+await testBlacklistOrderingWithRuntimeChanges();
+
+console.log("All feed engine tests passed");
diff --git a/tests/more-menu-controller.test.mjs b/tests/more-menu-controller.test.mjs
new file mode 100644
index 00000000..45564253
--- /dev/null
+++ b/tests/more-menu-controller.test.mjs
@@ -0,0 +1,161 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import MoreMenuController from '../js/ui/moreMenuController.js';
+
+test('copy-link action writes to clipboard and shows success', async () => {
+  let copied = null;
+  const clipboard = {
+    writeText: async (text) => {
+      copied = text;
+    },
+  };
+
+  const messages = { error: [], success: [] };
+
+  const controller = new MoreMenuController({
+    clipboard,
+    callbacks: {
+      buildShareUrlFromEventId: (eventId) => `https://example.com/watch/${eventId}`,
+      showError: (message) => messages.error.push(message),
+      showSuccess: (message) => messages.success.push(message),
+      getCurrentVideo: () => ({ id: 'fallback-id' }),
+    },
+  });
+
+  await controller.handleMoreMenuAction('copy-link', { eventId: 'abc123' });
+  await Promise.resolve();
+
+  assert.equal(copied, 'https://example.com/watch/abc123');
+  assert.deepEqual(messages.error, []);
+  assert.deepEqual(messages.success, ['Video link copied to clipboard!']);
+});
+
+test('blacklist-author requires moderator access and refreshes subscriptions', async () => {
+  const calls = [];
+  const accessControl = {
+    ensureReady: async () => {
+      calls.push('ensureReady');
+    },
+    canEditAdminLists: (actorNpub) => {
+      calls.push(['canEdit', actorNpub]);
+      return true;
+    },
+    addToBlacklist: async (actorNpub, targetNpub) => {
+      calls.push(['add', actorNpub, targetNpub]);
+      return { ok: true };
+    },
+  };
+
+  let refreshedWith = null;
+  const subscriptions = {
+    refreshActiveFeed: async (args) => {
+      refreshedWith = args;
+    },
+  };
+
+  const controller = new MoreMenuController({
+    accessControl,
+    subscriptions,
+    callbacks: {
+      getCurrentUserNpub: () => 'npub1actor',
+      getCurrentVideo: () => ({ pubkey: 'authorhex' }),
+      safeEncodeNpub: (pubkey) => `npub:${pubkey}`,
+      showError: (message) => {
+        throw new Error(`Unexpected error: ${message}`);
+      },
+      showSuccess: (message) => {
+        calls.push(['success', message]);
+      },
+      canCurrentUserManageBlacklist: () => true,
+    },
+  });
+
+  await controller.handleMoreMenuAction('blacklist-author', {
+    author: 'authorhex',
+  });
+
+  assert.deepEqual(calls, [
+    'ensureReady',
+    ['canEdit', 'npub1actor'],
+    ['add', 'npub1actor', 'npub:authorhex'],
+    ['success', 'Creator added to the blacklist.'],
+  ]);
+  assert.deepEqual(refreshedWith, { reason: 'admin-blacklist-update' });
+});
+
+test('blacklist-author shows error when no moderator session is available', async () => {
+  const errors = [];
+  const controller = new MoreMenuController({
+    callbacks: {
+      getCurrentUserNpub: () => null,
+      showError: (message) => errors.push(message),
+      getCurrentVideo: () => ({ pubkey: 'authorhex' }),
+    },
+  });
+
+  await controller.handleMoreMenuAction('blacklist-author', {
+    author: 'authorhex',
+  });
+
+  assert.deepEqual(errors, [
+    'Please login as a moderator to manage the blacklist.',
+  ]);
+});
+
+test('block-author updates user blocks, reloads videos, and refreshes feeds', async () => {
+  const events = [];
+  const userBlocks = {
+    ensureLoaded: async (pubkey) => {
+      events.push(['ensureLoaded', pubkey]);
+    },
+    isBlocked: (pubkey) => {
+      events.push(['isBlocked', pubkey]);
+      return false;
+    },
+    addBlock: async (target, actor) => {
+      events.push(['addBlock', target, actor]);
+    },
+  };
+
+  const subscriptions = {
+    refreshActiveFeed: async (args) => {
+      events.push(['refreshActiveFeed', args]);
+    },
+  };
+
+  const controller = new MoreMenuController({
+    userBlocks,
+    subscriptions,
+    callbacks: {
+      getCurrentUserPubkey: () => 'actorhex',
+      getCurrentVideo: () => ({ pubkey: 'fallbackhex' }),
+      safeDecodeNpub: (npub) => (npub === 'npub1target' ? 'targethex' : ''),
+      showError: (message) => {
+        throw new Error(`Unexpected error: ${message}`);
+      },
+      showSuccess: (message) => {
+        events.push(['success', message]);
+      },
+      loadVideos: async () => {
+        events.push(['loadVideos']);
+      },
+      onUserBlocksUpdated: () => {
+        events.push(['refreshBlockedList']);
+      },
+    },
+  });
+
+  await controller.handleMoreMenuAction('block-author', {
+    author: 'npub1target',
+  });
+
+  assert.deepEqual(events, [
+    ['ensureLoaded', 'actorhex'],
+    ['isBlocked', 'targethex'],
+    ['addBlock', 'targethex', 'actorhex'],
+    ['success', "Creator blocked. You won't see their videos anymore."],
+    ['refreshBlockedList'],
+    ['loadVideos'],
+    ['refreshActiveFeed', { reason: 'user-block-update' }],
+  ]);
+});
diff --git a/tests/nip71-base-event-tags.test.mjs b/tests/nip71-base-event-tags.test.mjs
new file mode 100644
index 00000000..3f45ce9d
--- /dev/null
+++ b/tests/nip71-base-event-tags.test.mjs
@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { buildVideoPostEvent } from "../js/nostrEventSchemas.js";
+import { buildNip71MetadataTags, NostrClient } from "../js/nostr.js";
+
+test("30078 events carry nip71 metadata tags and hydrate fallback metadata", () => {
+  const metadataInput = {
+    hashtags: ["  nostr  ", "BitVid  "],
+    participants: [
+      { pubkey: "a".repeat(64), relay: " wss://relay.example " },
+    ],
+    segments: [
+      { start: " 00:00 ", end: " 00:10 ", title: " Intro " },
+    ],
+    references: [" https://example.com/info "],
+  };
+
+  const additionalTags = buildNip71MetadataTags(metadataInput);
+
+  const event = buildVideoPostEvent({
+    pubkey: "f".repeat(64),
+    created_at: 1_700_000_000,
+    dTagValue: "demo-d-tag",
+    content: {
+      version: 3,
+      title: "Demo Title",
+      url: "https://cdn.example/video.mp4",
+      magnet: "",
+      thumbnail: "",
+      description: "",
+      mode: "live",
+      videoRootId: "root-123",
+      deleted: false,
+      isPrivate: false,
+      enableComments: true,
+    },
+    additionalTags,
+  });
+
+  const hashtagValues = event.tags
+    .filter((tag) => tag[0] === "t")
+    .map((tag) => tag[1])
+    .filter((value) => value && value.toLowerCase() !== "video");
+  assert.deepEqual(hashtagValues, ["nostr", "BitVid"]);
+
+  const participantTag = event.tags.find((tag) => tag[0] === "p");
+  assert.deepEqual(participantTag, [
+    "p",
+    "a".repeat(64),
+    "wss://relay.example",
+  ]);
+
+  const segmentTag = event.tags.find((tag) => tag[0] === "segment");
+  assert.deepEqual(segmentTag, ["segment", "00:00", "00:10", "Intro"]);
+
+  const referenceTag = event.tags.find((tag) => tag[0] === "r");
+  assert.deepEqual(referenceTag, ["r", "https://example.com/info"]);
+
+  const client = new NostrClient();
+  const parsedContent = JSON.parse(event.content);
+  const video = {
+    id: "event-123",
+    videoRootId: parsedContent.videoRootId,
+    tags: event.tags,
+    content: event.content,
+    kind: event.kind,
+    created_at: event.created_at,
+  };
+
+  client.mergeNip71MetadataIntoVideo(video);
+
+  assert.ok(video.nip71, "fallback merge should populate nip71 metadata");
+  assert.deepEqual(video.nip71.hashtags, ["nostr", "BitVid"]);
+  assert.deepEqual(video.nip71.participants, [
+    { pubkey: "a".repeat(64), relay: "wss://relay.example" },
+  ]);
+  assert.deepEqual(video.nip71.segments, [
+    { start: "00:00", end: "00:10", title: "Intro" },
+  ]);
+  assert.deepEqual(video.nip71.references, ["https://example.com/info"]);
+  assert.equal(video.nip71Source?.eventId, "event-123");
+});
diff --git a/tests/nip71-builder.test.mjs b/tests/nip71-builder.test.mjs
new file mode 100644
index 00000000..d4860da9
--- /dev/null
+++ b/tests/nip71-builder.test.mjs
@@ -0,0 +1,242 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  buildNip71VideoEvent,
+  extractNip71MetadataFromTags,
+} from "../js/nostr.js";
+
+test("buildNip71VideoEvent assembles rich metadata", () => {
+  const metadata = {
+    kind: 21,
+    summary: "Custom summary",
+    publishedAt: "1700000000",
+    alt: "Alt text for accessibility",
+    duration: 123,
+    contentWarning: "Flashing lights",
+    imeta: [
+      {
+        dim: "1920x1080",
+        url: "https://cdn.example/video-1080.mp4",
+        x: "abc123",
+        m: "video/mp4",
+        image: [
+          "https://cdn.example/video-1080.jpg",
+          "https://backup.example/video-1080.jpg",
+        ],
+        fallback: ["https://fallback.example/video-1080.mp4"],
+        service: ["nip96"],
+      },
+      {
+        url: "https://cdn.example/video-hls.m3u8",
+        m: "application/x-mpegURL",
+      },
+    ],
+    textTracks: [
+      {
+        url: "https://cdn.example/captions-en.vtt",
+        type: "captions",
+        language: "en",
+      },
+      {
+        url: "https://cdn.example/captions-es.vtt",
+        language: "es",
+      },
+    ],
+    segments: [
+      { start: "00:00:00", end: "00:01:00", title: "Intro" },
+      { start: 120, title: "Middle" },
+    ],
+    hashtags: ["bitvid", "nostr"],
+    participants: [
+      { pubkey: "a".repeat(64), relay: "wss://relay.example" },
+      { pubkey: "b".repeat(64) },
+    ],
+    references: [
+      "https://example.com/info",
+      "https://example.com/docs",
+    ],
+  };
+
+  const event = buildNip71VideoEvent({
+    metadata,
+    pubkey: "f".repeat(64),
+    title: "Test Video",
+    summaryFallback: "Fallback summary",
+    createdAt: 42,
+  });
+
+  assert.ok(event, "builder should return an event");
+  assert.equal(event.kind, 21, "kind should honor metadata");
+  assert.equal(event.pubkey, "f".repeat(64));
+  assert.equal(event.created_at, 42);
+  assert.equal(event.content, "Custom summary");
+
+  const tags = new Map(event.tags.map((tag) => [tag[0], tag]));
+  assert.deepEqual(tags.get("title"), ["title", "Test Video"]);
+  assert.deepEqual(tags.get("published_at"), ["published_at", "1700000000"]);
+  assert.deepEqual(tags.get("alt"), ["alt", "Alt text for accessibility"]);
+  assert.deepEqual(tags.get("duration"), ["duration", "123"]);
+  assert.deepEqual(tags.get("content-warning"), [
+    "content-warning",
+    "Flashing lights",
+  ]);
+
+  const imetaTags = event.tags.filter((tag) => tag[0] === "imeta");
+  assert.equal(imetaTags.length, 2, "should include both imeta variants");
+  assert.deepEqual(imetaTags[0], [
+    "imeta",
+    "dim 1920x1080",
+    "url https://cdn.example/video-1080.mp4",
+    "x abc123",
+    "m video/mp4",
+    "image https://cdn.example/video-1080.jpg",
+    "image https://backup.example/video-1080.jpg",
+    "fallback https://fallback.example/video-1080.mp4",
+    "service nip96",
+  ]);
+  assert.deepEqual(imetaTags[1], [
+    "imeta",
+    "url https://cdn.example/video-hls.m3u8",
+    "m application/x-mpegURL",
+  ]);
+
+  const textTrackTags = event.tags.filter((tag) => tag[0] === "text-track");
+  assert.deepEqual(textTrackTags, [
+    [
+      "text-track",
+      "https://cdn.example/captions-en.vtt",
+      "captions",
+      "en",
+    ],
+    ["text-track", "https://cdn.example/captions-es.vtt", "", "es"],
+  ]);
+
+  const segmentTags = event.tags.filter((tag) => tag[0] === "segment");
+  assert.deepEqual(segmentTags, [
+    ["segment", "00:00:00", "00:01:00", "Intro"],
+    ["segment", "120", "", "Middle"],
+  ]);
+
+  const hashtagTags = event.tags.filter((tag) => tag[0] === "t");
+  assert.deepEqual(hashtagTags, [
+    ["t", "bitvid"],
+    ["t", "nostr"],
+  ]);
+
+  const participantTags = event.tags.filter((tag) => tag[0] === "p");
+  assert.deepEqual(participantTags, [
+    ["p", "a".repeat(64), "wss://relay.example"],
+    ["p", "b".repeat(64)],
+  ]);
+
+  const referenceTags = event.tags.filter((tag) => tag[0] === "r");
+  assert.deepEqual(referenceTags, [
+    ["r", "https://example.com/info"],
+    ["r", "https://example.com/docs"],
+  ]);
+});
+
+test("buildNip71VideoEvent falls back to summary and selects kind", () => {
+  const metadata = {
+    kind: "22",
+    publishedAt: "2024-01-01T12:00:00Z",
+    imeta: [{ url: "https://cdn.example/video.mp4" }],
+  };
+
+  const event = buildNip71VideoEvent({
+    metadata,
+    pubkey: "c".repeat(64),
+    title: "Fallback Title",
+    summaryFallback: "Fallback description",
+    createdAt: 100,
+  });
+
+  assert.ok(event, "builder should create minimal event");
+  assert.equal(event.kind, 22, "string kind should coerce to number");
+  const expectedPublished = String(Math.floor(Date.parse("2024-01-01T12:00:00Z") / 1000));
+  assert.deepEqual(event.tags.find((tag) => tag[0] === "published_at"), [
+    "published_at",
+    expectedPublished,
+  ]);
+  assert.equal(
+    event.content,
+    "Fallback description",
+    "should use fallback summary when metadata summary missing"
+  );
+});
+
+test("buildNip71VideoEvent attaches pointer tags", () => {
+  const metadata = {
+    kind: 21,
+    summary: "Pointer test",
+    imeta: [{ url: "https://cdn.example/clip.mp4" }],
+  };
+
+  const pubkey = "f".repeat(64);
+  const pointerIdentifiers = {
+    videoRootId: "root-123",
+    eventId: "event-456",
+    dTag: "pointer-d-tag",
+  };
+
+  const event = buildNip71VideoEvent({
+    metadata,
+    pubkey,
+    title: "Pointer Demo",
+    pointerIdentifiers,
+  });
+
+  assert.ok(event, "event should be built with pointer tags");
+  const pointerTags = event.tags.filter((tag) =>
+    ["a", "video-root", "e", "d"].includes(tag[0])
+  );
+  assert.deepEqual(pointerTags, [
+    ["a", `30078:${pubkey}:${pointerIdentifiers.videoRootId}`],
+    ["video-root", pointerIdentifiers.videoRootId],
+    ["e", pointerIdentifiers.eventId],
+    ["d", pointerIdentifiers.dTag],
+  ]);
+});
+
+test("extractNip71MetadataFromTags parses metadata and pointers", () => {
+  const event = {
+    id: "nip71-event",
+    kind: 22,
+    created_at: 123,
+    content: "Summary text",
+    tags: [
+      ["title", "Metadata Title"],
+      ["published_at", "1700000100"],
+      ["alt", "alt text"],
+      ["duration", "321"],
+      ["content-warning", "Bright lights"],
+      ["imeta", "url https://cdn.example/video.mp4", "m video/mp4"],
+      ["text-track", "https://cdn.example/captions.vtt", "captions", "en"],
+      ["segment", "00:00", "00:10", "Intro", "https://cdn.example/thumb.jpg"],
+      ["t", "nostr"],
+      ["p", "c".repeat(64), "wss://relay.example"],
+      ["r", "https://example.com/info"],
+      ["a", "30078:deadbeef:root-123"],
+      ["video-root", "root-123"],
+      ["e", "event-456"],
+      ["d", "d-pointer"],
+    ],
+  };
+
+  const parsed = extractNip71MetadataFromTags(event);
+  assert.ok(parsed, "parser should produce a result");
+  assert.deepEqual(parsed.metadata.title, "Metadata Title");
+  assert.deepEqual(parsed.metadata.summary, "Summary text");
+  assert.equal(parsed.metadata.duration, 321);
+  assert.equal(parsed.metadata.alt, "alt text");
+  assert.equal(parsed.metadata.contentWarning, "Bright lights");
+  assert.deepEqual(parsed.metadata.hashtags, ["nostr"]);
+  assert.deepEqual(parsed.metadata.references, ["https://example.com/info"]);
+  assert.equal(parsed.metadata.textTracks.length, 1);
+  assert.equal(parsed.metadata.imeta.length, 1);
+  assert(parsed.pointers.videoRootIds.has("root-123"));
+  assert(parsed.pointers.videoEventIds.has("event-456"));
+  assert(parsed.pointers.dTags.has("d-pointer"));
+  assert(parsed.pointers.pointerValues.has("30078:deadbeef:root-123"));
+});
diff --git a/tests/nip71-form-manager.test.mjs b/tests/nip71-form-manager.test.mjs
new file mode 100644
index 00000000..d121056b
--- /dev/null
+++ b/tests/nip71-form-manager.test.mjs
@@ -0,0 +1,74 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { JSDOM } from "jsdom";
+
+import { Nip71FormManager } from "../js/ui/components/nip71FormManager.js";
+
+function createManagerWithSection(html) {
+  const dom = new JSDOM(html);
+  const document = dom.window.document;
+  const manager = new Nip71FormManager();
+  const sectionRoot = document.querySelector("#nip71-section-root");
+  manager.registerSection("test", sectionRoot);
+  return { manager, document };
+}
+
+test("collectSection sanitizes and deduplicates hashtags", () => {
+  const { manager } = createManagerWithSection(`
+    <form id="nip71-section-root">
+      <section data-nip71-repeater="t">
+        <div data-nip71-list="t">
+          <div data-nip71-entry="t" data-nip71-primary="true">
+            <input data-nip71-field="value" value="  #Nostr  " />
+          </div>
+          <div data-nip71-entry="t">
+            <input data-nip71-field="value" value="#nostr" />
+          </div>
+          <div data-nip71-entry="t">
+            <input data-nip71-field="value" value="  #Video  " />
+          </div>
+        </div>
+        <template data-nip71-template="t">
+          <div data-nip71-entry="t">
+            <input data-nip71-field="value" />
+          </div>
+        </template>
+      </section>
+    </form>
+  `);
+
+  const collected = manager.collectSection("test");
+  assert.deepEqual(collected.hashtags, ["nostr", "video"]);
+});
+
+test("hydrateSection renders sanitized hashtags with prefix", () => {
+  const { manager, document } = createManagerWithSection(`
+    <form id="nip71-section-root">
+      <section data-nip71-repeater="t">
+        <div data-nip71-list="t">
+          <div data-nip71-entry="t" data-nip71-primary="true">
+            <input data-nip71-field="value" value="" />
+          </div>
+        </div>
+        <template data-nip71-template="t">
+          <div data-nip71-entry="t">
+            <input data-nip71-field="value" />
+          </div>
+        </template>
+      </section>
+    </form>
+  `);
+
+  manager.hydrateSection("test", {
+    hashtags: ["  #Nostr  ", "#Nostr", "  #Video  " ],
+  });
+
+  const entries = Array.from(
+    document.querySelectorAll('[data-nip71-entry="t"]')
+  );
+  assert.equal(entries.length, 2);
+  const values = entries.map((entry) =>
+    entry.querySelector('[data-nip71-field="value"]').value
+  );
+  assert.deepEqual(values, ["#nostr", "#video"]);
+});
diff --git a/tests/nostr-boost-actions.test.mjs b/tests/nostr-boost-actions.test.mjs
new file mode 100644
index 00000000..11c8f450
--- /dev/null
+++ b/tests/nostr-boost-actions.test.mjs
@@ -0,0 +1,146 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+const { buildRepostEvent } = await import("../js/nostrEventSchemas.js");
+const { NostrClient } = await import("../js/nostr.js");
+
+function createClientHarness() {
+  const client = new NostrClient();
+  client.relays = ["wss://relay.example" ];
+  client.writeRelays = ["wss://relay.example" ];
+  client.pool = {};
+  client.ensurePool = async () => client.pool;
+  return client;
+}
+
+(function testBuildRepostEventIncludesPointerTags() {
+  const createdAt = 1_700_000_000;
+  const event = buildRepostEvent({
+    pubkey: "actorpubkey",
+    created_at: createdAt,
+    eventId: "event123",
+    eventRelay: "wss://origin",
+    address: "30078:deadbeef:identifier",
+    addressRelay: "wss://address",
+    authorPubkey: "deadbeef",
+  });
+
+  assert.equal(event.kind, 6);
+  assert.equal(event.pubkey, "actorpubkey");
+  assert.equal(event.created_at, createdAt);
+
+  assert.deepEqual(event.tags[0], ["e", "event123", "wss://origin"]);
+  assert.deepEqual(event.tags[1], ["a", "30078:deadbeef:identifier", "wss://address"]);
+  assert.deepEqual(event.tags[2], ["p", "deadbeef"]);
+})();
+
+await (async function testRepostEventUsesSessionActorAndDerivesAddress() {
+  const client = createClientHarness();
+  const eventId = "test-event";
+  const authorPubkey = "f".repeat(64);
+  const sessionPubkey = "a".repeat(64);
+
+  client.sessionActor = { pubkey: sessionPubkey, privateKey: "session-key" };
+  client.ensureSessionActor = async () => sessionPubkey;
+  client.signAndPublishEvent = async (event, opts) => {
+    return {
+      signedEvent: event,
+      summary: { accepted: [{ url: opts.relaysOverride?.[0] || "wss://relay.example" }], failed: [] },
+      signerPubkey: sessionPubkey,
+    };
+  };
+
+  client.allEvents.set(eventId, {
+    id: eventId,
+    pubkey: authorPubkey,
+    videoRootId: "root-id",
+    title: "Video",
+    url: "https://cdn.example/video.mp4",
+  });
+
+  const result = await client.repostEvent(eventId, {
+    pointer: ["e", eventId, "wss://origin"],
+    authorPubkey,
+  });
+
+  assert.equal(result.ok, true);
+  assert.equal(result.sessionActor, true);
+  assert.equal(Array.isArray(result.summary.accepted), true);
+  const tags = result.event?.tags;
+  assert.ok(Array.isArray(tags), "Repost event should include tags");
+  assert.deepEqual(tags[0], ["e", eventId, "wss://origin"]);
+  assert.equal(
+    tags.some((tag) => Array.isArray(tag) && tag[0] === "a" && tag[1].startsWith("30078:")),
+    true,
+    "Repost event should include an address pointer"
+  );
+  assert.equal(
+    tags.some((tag) => Array.isArray(tag) && tag[0] === "p" && tag[1] === authorPubkey),
+    true,
+    "Repost event should include a p tag"
+  );
+})();
+
+await (async function testMirrorEventIncludesHostedMetadata() {
+  const client = createClientHarness();
+  const eventId = "mirror-event";
+  const actorPubkey = "1".repeat(64);
+
+  client.pubkey = actorPubkey;
+  client.signAndPublishEvent = async (event, opts) => {
+    return {
+      signedEvent: event,
+      summary: { accepted: [{ url: opts.relaysOverride?.[0] || "wss://relay.example" }], failed: [] },
+      signerPubkey: actorPubkey,
+    };
+  };
+
+  const result = await client.mirrorVideoEvent(eventId, {
+    url: "https://videos.example/video.mp4",
+    magnet: "magnet:?xt=urn:btih:abc",
+    thumbnail: "https://videos.example/thumb.jpg",
+    description: "Sample clip",
+    title: "Sample",
+  });
+
+  assert.equal(result.ok, true);
+  const tags = result.event?.tags;
+  assert.ok(Array.isArray(tags));
+  const tagValues = Object.fromEntries(tags.map((tag) => [tag[0], tag.slice(1)]));
+  assert.equal(tagValues.url[0], "https://videos.example/video.mp4");
+  assert.equal(tagValues.m[0], "video/mp4");
+  assert.equal(tagValues.thumb[0], "https://videos.example/thumb.jpg");
+  assert.equal(tagValues.alt[0], "Sample clip");
+  assert.equal(tagValues.magnet[0], "magnet:?xt=urn:btih:abc");
+})();
+
+await (async function testMirrorSkipsMagnetWhenPrivate() {
+  const client = createClientHarness();
+  const eventId = "private-mirror";
+  const actorPubkey = "2".repeat(64);
+
+  client.pubkey = actorPubkey;
+  client.signAndPublishEvent = async (event, opts) => {
+    return {
+      signedEvent: event,
+      summary: { accepted: [{ url: opts.relaysOverride?.[0] || "wss://relay.example" }], failed: [] },
+      signerPubkey: actorPubkey,
+    };
+  };
+
+  const result = await client.mirrorVideoEvent(eventId, {
+    url: "https://videos.example/private.mp4",
+    magnet: "magnet:?xt=urn:btih:hidden",
+    isPrivate: true,
+  });
+
+  assert.equal(result.ok, true);
+  const tags = result.event?.tags || [];
+  assert.equal(
+    tags.some((tag) => Array.isArray(tag) && tag[0] === "magnet"),
+    false,
+    "Private mirrors must omit the magnet tag",
+  );
+})();
+
+console.log("nostr boost action tests passed");
diff --git a/tests/nostr-login-permissions.test.mjs b/tests/nostr-login-permissions.test.mjs
new file mode 100644
index 00000000..192b005a
--- /dev/null
+++ b/tests/nostr-login-permissions.test.mjs
@@ -0,0 +1,285 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { nostrClient, __testExports } from "../js/nostr.js";
+import { accessControl } from "../js/accessControl.js";
+
+const { runNip07WithRetry } = __testExports ?? {};
+
+const HEX_PUBKEY = "f".repeat(64);
+
+function setupLoginEnvironment({ enableImpl, getPublicKey = HEX_PUBKEY } = {}) {
+  const previousWindow = typeof global.window === "undefined" ? undefined : global.window;
+  const previousGlobalNostr = global.nostr;
+  const previousGlobalNostrTools = global.NostrTools;
+  const previousCanonicalTools = global.__BITVID_CANONICAL_NOSTR_TOOLS__;
+  const previousNostrToolsReady = global.nostrToolsReady;
+
+  const windowRef = previousWindow ?? global;
+  global.window = windowRef;
+
+  const previousWindowNostr = previousWindow?.nostr;
+  const previousWindowNostrTools = previousWindow?.NostrTools;
+
+  const enableCalls = [];
+  const nostrStub = {
+    enable: (options) => {
+      enableCalls.push(options);
+      if (typeof enableImpl === "function") {
+        return Promise.resolve(enableImpl(options, enableCalls.length));
+      }
+      return Promise.resolve();
+    },
+    getPublicKey: () => Promise.resolve(getPublicKey),
+  };
+
+  windowRef.nostr = nostrStub;
+  global.nostr = nostrStub;
+
+  const toolkitStub = {
+    nip19: {
+      npubEncode: (hex) => `npub${hex}`,
+    },
+  };
+
+  windowRef.NostrTools = toolkitStub;
+  global.NostrTools = toolkitStub;
+  global.__BITVID_CANONICAL_NOSTR_TOOLS__ = toolkitStub;
+  global.nostrToolsReady = Promise.resolve({ ok: true, value: toolkitStub });
+
+  const originalAccessControl = {
+    canAccess: accessControl.canAccess,
+    getWhitelist: accessControl.getWhitelist,
+    getBlacklist: accessControl.getBlacklist,
+    isBlacklisted: accessControl.isBlacklisted,
+  };
+
+  accessControl.canAccess = () => true;
+  accessControl.getWhitelist = () => [];
+  accessControl.getBlacklist = () => [];
+  accessControl.isBlacklisted = () => false;
+
+  if (
+    nostrClient.extensionPermissionCache &&
+    typeof nostrClient.extensionPermissionCache.clear === "function"
+  ) {
+    nostrClient.extensionPermissionCache.clear();
+  }
+
+  return {
+    enableCalls,
+    restore() {
+      accessControl.canAccess = originalAccessControl.canAccess;
+      accessControl.getWhitelist = originalAccessControl.getWhitelist;
+      accessControl.getBlacklist = originalAccessControl.getBlacklist;
+      accessControl.isBlacklisted = originalAccessControl.isBlacklisted;
+
+      if (previousWindow === undefined) {
+        delete global.window;
+      } else {
+        global.window = previousWindow;
+        if (previousWindow) {
+          previousWindow.nostr = previousWindowNostr;
+          previousWindow.NostrTools = previousWindowNostrTools;
+        }
+      }
+
+      if (previousGlobalNostr === undefined) {
+        delete global.nostr;
+      } else {
+        global.nostr = previousGlobalNostr;
+      }
+
+      if (previousGlobalNostrTools === undefined) {
+        delete global.NostrTools;
+      } else {
+        global.NostrTools = previousGlobalNostrTools;
+      }
+
+      global.__BITVID_CANONICAL_NOSTR_TOOLS__ = previousCanonicalTools;
+
+      if (previousNostrToolsReady === undefined) {
+        delete global.nostrToolsReady;
+      } else {
+        global.nostrToolsReady = previousNostrToolsReady;
+      }
+
+      if (
+        nostrClient.extensionPermissionCache &&
+        typeof nostrClient.extensionPermissionCache.clear === "function"
+      ) {
+        nostrClient.extensionPermissionCache.clear();
+      }
+    },
+  };
+}
+
+test("NIP-07 login requests decrypt permissions upfront", async () => {
+  const env = setupLoginEnvironment();
+  try {
+    const pubkey = await nostrClient.login();
+    assert.equal(pubkey, HEX_PUBKEY);
+    assert.ok(env.enableCalls.length >= 1, "extension.enable should be invoked");
+    assert.ok(
+      nostrClient.extensionPermissionCache.has("nip04.decrypt"),
+      "nip04.decrypt permission should be tracked as granted",
+    );
+    assert.ok(
+      nostrClient.extensionPermissionCache.has("nip04.encrypt"),
+      "nip04.encrypt permission should be tracked as granted",
+    );
+    assert.ok(
+      nostrClient.extensionPermissionCache.has("sign_event"),
+      "sign_event permission should be tracked as granted",
+    );
+  } finally {
+    env.restore();
+    nostrClient.logout();
+  }
+});
+
+test("NIP-07 login falls back when structured permissions fail", async () => {
+  const env = setupLoginEnvironment({
+    enableImpl(options) {
+      if (
+        options &&
+        Array.isArray(options.permissions) &&
+        options.permissions.length &&
+        typeof options.permissions[0] === "object"
+      ) {
+        return Promise.reject(new Error("object permissions unsupported"));
+      }
+      if (options && Array.isArray(options.permissions)) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error("unexpected enable invocation"));
+    },
+  });
+
+  try {
+    const pubkey = await nostrClient.login();
+    assert.equal(pubkey, HEX_PUBKEY);
+    assert.equal(env.enableCalls.length >= 3, true, "should retry with alternate payloads");
+    const [firstCall, secondCall, thirdCall] = env.enableCalls;
+    assert.equal(firstCall, undefined, "first attempt should try plain enable() call");
+    assert.ok(Array.isArray(secondCall?.permissions));
+    assert.equal(
+      typeof secondCall.permissions[0],
+      "object",
+      "second attempt should use structured permission objects",
+    );
+    assert.ok(Array.isArray(thirdCall?.permissions));
+    assert.equal(
+      typeof thirdCall.permissions[0],
+      "string",
+      "third attempt should fall back to string permissions",
+    );
+  } finally {
+    env.restore();
+    nostrClient.logout();
+  }
+});
+
+test("NIP-07 login supports extensions that only allow enable() without payload", async () => {
+  const env = setupLoginEnvironment({
+    enableImpl(options) {
+      if (options !== undefined) {
+        return Promise.reject(new Error("payloads not supported"));
+      }
+      return Promise.resolve();
+    },
+  });
+
+  try {
+    const pubkey = await nostrClient.login();
+    assert.equal(pubkey, HEX_PUBKEY);
+    assert.equal(env.enableCalls.length, 1, "should not need alternate payloads when plain enable works");
+    assert.equal(env.enableCalls[0], undefined, "plain enable should be attempted first");
+  } finally {
+    env.restore();
+    nostrClient.logout();
+  }
+});
+
+test("NIP-07 login quickly retries when a permission payload stalls", async () => {
+  const originalOverride = global.__BITVID_NIP07_ENABLE_VARIANT_TIMEOUT_MS__;
+  global.__BITVID_NIP07_ENABLE_VARIANT_TIMEOUT_MS__ = 80;
+
+  const env = setupLoginEnvironment({
+    enableImpl(options) {
+      if (options === undefined) {
+        return Promise.reject(new Error("needs permissions"));
+      }
+      if (
+        options &&
+        Array.isArray(options.permissions) &&
+        options.permissions.length &&
+        typeof options.permissions[0] === "object"
+      ) {
+        return new Promise(() => {});
+      }
+      return Promise.resolve();
+    },
+  });
+
+  try {
+    const start = Date.now();
+    const pubkey = await nostrClient.login();
+    const duration = Date.now() - start;
+    assert.equal(pubkey, HEX_PUBKEY);
+    assert.ok(
+      duration < 500,
+      `login should fall back quickly from stalled enable payloads (duration: ${duration}ms)`,
+    );
+    assert.equal(env.enableCalls.length, 3, "should attempt all payload variants");
+    const [, objectCall, stringCall] = env.enableCalls;
+    assert.ok(Array.isArray(objectCall?.permissions));
+    assert.equal(typeof objectCall.permissions[0], "object");
+    assert.ok(Array.isArray(stringCall?.permissions));
+    assert.equal(typeof stringCall.permissions[0], "string");
+  } finally {
+    env.restore();
+    nostrClient.logout();
+    if (originalOverride === undefined) {
+      delete global.__BITVID_NIP07_ENABLE_VARIANT_TIMEOUT_MS__;
+    } else {
+      global.__BITVID_NIP07_ENABLE_VARIANT_TIMEOUT_MS__ = originalOverride;
+    }
+  }
+});
+
+test("NIP-07 login surfaces enable permission errors", async () => {
+  const env = setupLoginEnvironment({
+    enableImpl() {
+      return Promise.reject(new Error("permission denied"));
+    },
+  });
+
+  try {
+    await assert.rejects(() => nostrClient.login(), /permission denied/);
+  } finally {
+    env.restore();
+    nostrClient.logout();
+  }
+});
+
+if (typeof runNip07WithRetry === "function") {
+  test("runNip07WithRetry respects timeout without retry multiplier", async () => {
+    const start = Date.now();
+    await assert.rejects(
+      () =>
+        runNip07WithRetry(() => new Promise(() => {}), {
+          label: "test-op",
+          timeoutMs: 60,
+          retryMultiplier: 1,
+        }),
+      (error) =>
+        error instanceof Error &&
+        error.message ===
+          "Timed out waiting for the NIP-07 extension. Confirm the extension prompt in your browser toolbar and try again.",
+    );
+    const duration = Date.now() - start;
+    assert.ok(duration < 400, `operation should reject promptly (duration: ${duration}ms)`);
+  });
+}
diff --git a/tests/nostr-publish-rejection.test.mjs b/tests/nostr-publish-rejection.test.mjs
index e02ba6a2..89a18a6b 100644
--- a/tests/nostr-publish-rejection.test.mjs
+++ b/tests/nostr-publish-rejection.test.mjs
@@ -87,9 +87,19 @@ try {
       await assert.rejects(
         nostrClient.publishVideo(
           {
-            title: "Test video",
-            magnet: "magnet:?xt=urn:btih:TESTVIDEO1234567890",
-            mode: "live",
+            legacyFormData: {
+              title: "Test video",
+              magnet: "magnet:?xt=urn:btih:TESTVIDEO1234567890",
+              mode: "live",
+            },
+            nip71: {
+              imeta: [
+                {
+                  m: "video/mp4",
+                  url: "https://cdn.example/test.mp4",
+                },
+              ],
+            },
           },
           "f".repeat(64)
         ),
diff --git a/tests/nostr-rebroadcast-guard.test.mjs b/tests/nostr-rebroadcast-guard.test.mjs
new file mode 100644
index 00000000..c2d48d7c
--- /dev/null
+++ b/tests/nostr-rebroadcast-guard.test.mjs
@@ -0,0 +1,109 @@
+// Run with: node tests/nostr-rebroadcast-guard.test.mjs
+
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+const { ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS } = await import(
+  "../js/config.js"
+);
+const { nostrClient } = await import("../js/nostr.js");
+
+const NostrClient = nostrClient.constructor;
+
+function createRebroadcastHarness() {
+  const client = new NostrClient();
+  client.relays = ["wss://relay.test"];
+
+  const publishCalls = [];
+  const pool = {
+    publish(urls, event) {
+      publishCalls.push({ urls, event });
+      return {
+        on(eventName, handler) {
+          if (eventName === "ok") {
+            handler();
+          }
+          return true;
+        },
+      };
+    },
+  };
+  client.pool = pool;
+
+  const countCalls = [];
+  client.countEventsAcrossRelays = async () => {
+    countCalls.push(Date.now());
+    return { total: 0, perRelay: [] };
+  };
+
+  return { client, publishCalls, countCalls };
+}
+
+async function testRebroadcastCooldownThrottlesUntilWindowExpires() {
+  localStorage.clear();
+
+  const { client, publishCalls, countCalls } = createRebroadcastHarness();
+
+  const eventId = "rebroadcast-test-event";
+  const pubkey = "f".repeat(64);
+  const rawEvent = {
+    id: eventId,
+    pubkey,
+    kind: 30078,
+    created_at: 1_700_000_000,
+    sig: "sig",
+    tags: [],
+    content: "{}",
+  };
+
+  client.rawEvents.set(eventId, rawEvent);
+  client.allEvents.set(eventId, { id: eventId, pubkey });
+
+  const originalNow = Date.now;
+  let nowMs = 1_700_000_000_000;
+  Date.now = () => nowMs;
+
+  const cooldownMs =
+    Number(ENSURE_PRESENCE_REBROADCAST_COOLDOWN_SECONDS) * 1000;
+
+  try {
+    const first = await client.rebroadcastEvent(eventId, { pubkey });
+    assert.equal(first.ok, true, "first attempt should succeed");
+    assert.equal(publishCalls.length, 1, "first attempt should publish once");
+    assert.equal(countCalls.length, 1, "first attempt should issue a count");
+
+    const second = await client.rebroadcastEvent(eventId, { pubkey });
+    assert.equal(
+      second.throttled,
+      true,
+      "cooldown guard should throttle the immediate retry",
+    );
+    assert.equal(
+      publishCalls.length,
+      1,
+      "throttled attempt must not publish again",
+    );
+    assert.equal(
+      countCalls.length,
+      1,
+      "throttled attempt must not issue another COUNT",
+    );
+    assert.ok(
+      Number(second?.cooldown?.remainingMs) > 0,
+      "throttled response should include remaining cooldown",
+    );
+
+    nowMs += cooldownMs + 1_000;
+
+    const third = await client.rebroadcastEvent(eventId, { pubkey });
+    assert.equal(third.ok, true, "attempt after cooldown should succeed");
+    assert.equal(publishCalls.length, 2, "rebroadcast should fire again after cooldown");
+    assert.equal(countCalls.length, 2, "cooldown reset should allow another COUNT");
+  } finally {
+    Date.now = originalNow;
+  }
+}
+
+await testRebroadcastCooldownThrottlesUntilWindowExpires();
+
+console.log("nostr rebroadcast guard tests passed");
diff --git a/tests/nwc-client.test.mjs b/tests/nwc-client.test.mjs
new file mode 100644
index 00000000..3e7cec80
--- /dev/null
+++ b/tests/nwc-client.test.mjs
@@ -0,0 +1,151 @@
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+const nwcModule = await import("../js/payments/nwcClient.js");
+const { __TESTING__, resetWalletClient } = nwcModule;
+const { buildPayInvoiceParams, ensureActiveState, parseNwcUri, getActiveState } = __TESTING__;
+
+await (async () => {
+  const params = buildPayInvoiceParams({
+    invoice: "bolt11-invoice",
+    amountSats: 123,
+    zapRequest: "zap-request-json",
+  });
+
+  assert.equal(params.invoice, "bolt11-invoice");
+  assert.equal(params.amount, 123_000);
+  assert.equal(params.zap_request, "zap-request-json");
+})();
+
+await (async () => {
+  const params = buildPayInvoiceParams({
+    invoice: "bolt11-invoice",
+    amountSats: 0,
+    zapRequest: null,
+  });
+
+  assert.equal(params.invoice, "bolt11-invoice");
+  assert.ok(!("amount" in params));
+  assert.ok(!("zap_request" in params));
+})();
+
+await (async () => {
+  const params = buildPayInvoiceParams({
+    invoice: "bolt11-invoice",
+    amountSats: 42.7,
+  });
+
+  assert.equal(params.amount, 43_000);
+})();
+
+await (async () => {
+  resetWalletClient();
+
+  window.NostrTools = {
+    getPublicKey() {
+      return "c".repeat(64);
+    },
+    nip44: {
+      v2: {
+        async encrypt(plaintext, key) {
+          return `nip44:${key}:${plaintext}`;
+        },
+        async decrypt(ciphertext, key) {
+          return `nip44:${key}:${ciphertext}`;
+        },
+        utils: {
+          getConversationKey(secretBytes, pubkey) {
+            return `key-${pubkey}-${secretBytes.length}`;
+          },
+        },
+      },
+    },
+  };
+
+  const walletPubkey = "b".repeat(64);
+  const secretKey = "a".repeat(64);
+  const relays = ["wss://relay.one.example", "wss://relay.two.example"];
+  const lud16 = "user@example.com";
+  const uri =
+    `nostr+walletconnect://${walletPubkey}` +
+    `?relay=${encodeURIComponent(relays[0])}` +
+    `&relay=${encodeURIComponent(relays[1])}` +
+    `&secret=${secretKey}` +
+    `&lud16=${encodeURIComponent(lud16)}`;
+
+  const context = ensureActiveState({ nwcUri: uri });
+
+  assert.deepEqual(context.relayUrls, relays);
+  assert.equal(context.relayUrl, relays[0]);
+  assert.equal(context.uri.split("?")[0], `nostr+walletconnect://${walletPubkey}`);
+
+  const state = getActiveState();
+  assert.ok(state?.settings?.nwcUri);
+
+  const reparsed = parseNwcUri(state.settings.nwcUri);
+  assert.deepEqual(reparsed.relays, relays);
+  assert.equal(reparsed.secretKey, secretKey);
+  assert.equal(reparsed.queryParams.lud16, lud16);
+
+  context.infoEvent = {
+    kind: 13194,
+    tags: [["encryption", "nip44_v2"]],
+  };
+
+  const encryption = await __TESTING__.ensureEncryptionForContext(context);
+  assert.equal(encryption.scheme, "nip44_v2");
+  const encrypted = await encryption.encrypt("payload");
+  assert.match(encrypted, /^nip44:key-b{64}-/);
+
+  resetWalletClient();
+})();
+
+await (async () => {
+  resetWalletClient();
+
+  window.NostrTools = {
+    getPublicKey() {
+      return "c".repeat(64);
+    },
+    nip04: {
+      async encrypt() {
+        return "nip04";
+      },
+      async decrypt() {
+        return "nip04";
+      },
+    },
+  };
+
+  const walletPubkey = "b".repeat(64);
+  const secretKey = "a".repeat(64);
+  const relays = ["wss://relay.one.example"];
+  const uri =
+    `nostr+walletconnect://${walletPubkey}` +
+    `?relay=${encodeURIComponent(relays[0])}` +
+    `&secret=${secretKey}`;
+
+  const context = ensureActiveState({ nwcUri: uri });
+  context.infoEvent = {
+    kind: 13194,
+    tags: [["encryption", "nip44_v2"]],
+  };
+
+  await assert.rejects(
+    () => __TESTING__.ensureEncryptionForContext(context),
+    (error) => {
+      assert.match(
+        error?.message || "",
+        /Wallet advertises unsupported encryption schemes: nip44_v2\./
+      );
+      return true;
+    }
+  );
+
+  resetWalletClient();
+})();
+
+process.exit(0);
diff --git a/tests/profile-modal-controller.test.mjs b/tests/profile-modal-controller.test.mjs
new file mode 100644
index 00000000..f41b8579
--- /dev/null
+++ b/tests/profile-modal-controller.test.mjs
@@ -0,0 +1,451 @@
+import test, { beforeEach, afterEach } from 'node:test';
+import { strict as assert } from 'node:assert';
+import { readFile } from 'node:fs/promises';
+import { JSDOM } from 'jsdom';
+import ProfileModalController from '../js/ui/profileModalController.js';
+
+const profileModalHtml = await readFile(
+  new URL('../components/profile-modal.html', import.meta.url),
+  'utf8',
+);
+
+const defaultActorNpub = 'npub1actor0exampleexampleexampleexampleexampleex';
+const defaultActorHex = 'a'.repeat(64);
+
+let dom;
+let container;
+
+beforeEach(() => {
+  dom = new JSDOM(
+    '<!DOCTYPE html><html><body><div id="modalMount"></div></body></html>',
+    {
+      url: 'https://example.com',
+      pretendToBeVisual: true,
+    },
+  );
+
+  global.window = dom.window;
+  global.document = dom.window.document;
+  global.HTMLElement = dom.window.HTMLElement;
+  global.HTMLImageElement = dom.window.HTMLImageElement;
+  global.HTMLInputElement = dom.window.HTMLInputElement;
+  global.HTMLButtonElement = dom.window.HTMLButtonElement;
+  global.Node = dom.window.Node;
+  global.CustomEvent = dom.window.CustomEvent;
+  global.Event = dom.window.Event;
+  global.KeyboardEvent = dom.window.KeyboardEvent;
+  global.MutationObserver = dom.window.MutationObserver;
+
+  window.requestAnimationFrame = (callback) => callback(0);
+  window.cancelAnimationFrame = () => {};
+  global.requestAnimationFrame = window.requestAnimationFrame;
+  global.cancelAnimationFrame = window.cancelAnimationFrame;
+
+  window.confirm = () => true;
+  global.confirm = window.confirm;
+
+  container = document.getElementById('modalMount');
+
+  global.fetch = async (resource) => {
+    if (
+      typeof resource === 'string' &&
+      resource.includes('components/profile-modal.html')
+    ) {
+      return {
+        ok: true,
+        status: 200,
+        text: async () => profileModalHtml,
+      };
+    }
+
+    throw new Error(`Unexpected fetch: ${resource}`);
+  };
+});
+
+afterEach(() => {
+  delete global.fetch;
+  delete global.confirm;
+  delete global.requestAnimationFrame;
+  delete global.cancelAnimationFrame;
+  delete global.MutationObserver;
+  delete global.KeyboardEvent;
+  delete global.Event;
+  delete global.CustomEvent;
+  delete global.HTMLButtonElement;
+  delete global.HTMLInputElement;
+  delete global.HTMLImageElement;
+  delete global.Node;
+  delete global.HTMLElement;
+  delete global.document;
+  delete global.window;
+
+  if (dom) {
+    dom.window.close();
+    dom = null;
+  }
+  container = null;
+});
+
+function createController(options = {}) {
+  const {
+    services: serviceOverrides = {},
+    callbacks = {},
+    createWatchHistoryRenderer = options.createWatchHistoryRenderer ?? null,
+  } = options;
+
+  const {
+    relayManager: relayManagerOverrides = {},
+    userBlocks: userBlocksOverrides = {},
+    accessControl: accessControlOverrides = {},
+    nostrClient: nostrClientOverrides = {},
+    ...otherServices
+  } = serviceOverrides;
+
+  const baseRelayManager = {
+    getEntries: () => [],
+    snapshot: () => [],
+    addRelay: () => ({ changed: true }),
+    removeRelay: () => ({ changed: true }),
+    restoreDefaults: () => ({ changed: true }),
+    cycleRelayMode: () => ({ changed: true }),
+    publishRelayList: async () => ({ ok: true }),
+    setEntries: () => {},
+  };
+
+  const baseUserBlocks = {
+    ensureLoaded: async () => {},
+    isBlocked: () => false,
+    addBlock: async () => ({ ok: true }),
+    removeBlock: async () => ({ ok: true }),
+    getBlockedPubkeys: () => [],
+  };
+
+  const baseAccessControl = {
+    ensureReady: async () => {},
+    canEditAdminLists: () => false,
+    isSuperAdmin: () => false,
+    getEditors: () => [],
+    getWhitelist: () => [],
+    getBlacklist: () => [],
+    addModerator: async () => ({ ok: true }),
+    removeModerator: async () => ({ ok: true }),
+    addToWhitelist: async () => ({ ok: true }),
+    removeFromWhitelist: async () => ({ ok: true }),
+    addToBlacklist: async () => ({ ok: true }),
+    removeFromBlacklist: async () => ({ ok: true }),
+  };
+
+  const mergedServices = {
+    relayManager: { ...baseRelayManager, ...relayManagerOverrides },
+    userBlocks: { ...baseUserBlocks, ...userBlocksOverrides },
+    accessControl: { ...baseAccessControl, ...accessControlOverrides },
+    nostrClient: { sessionActor: { pubkey: null }, ...nostrClientOverrides },
+    onAccessControlUpdated: async () => {},
+    describeAdminError: () => 'Unable to update moderation settings. Please try again.',
+    describeNotificationError: () => '',
+    sendAdminListNotification: async () => ({ ok: true }),
+    getCurrentUserNpub: () => defaultActorNpub,
+    ...otherServices,
+  };
+
+  return new ProfileModalController({
+    modalContainer: container,
+    removeTrackingScripts: () => {},
+    setGlobalModalState: () => {},
+    showError: options.showError ?? (() => {}),
+    showSuccess: options.showSuccess ?? (() => {}),
+    showStatus: options.showStatus ?? (() => {}),
+    createWatchHistoryRenderer,
+    callbacks,
+    services: mergedServices,
+    state: options.state ?? {},
+    constants: options.constants ?? {},
+  });
+}
+
+test('load() injects markup and caches expected elements', async () => {
+  const controller = createController();
+  const result = await controller.load();
+
+  assert.equal(result, true);
+  const modal = container.querySelector('#profileModal');
+  assert.ok(modal instanceof window.HTMLElement);
+  assert.strictEqual(controller.profileModal, modal);
+
+  assert.ok(controller.navButtons.account instanceof window.HTMLElement);
+  assert.ok(controller.panes.account instanceof window.HTMLElement);
+  assert.ok(controller.relayList instanceof window.HTMLElement);
+  assert.ok(controller.blockList instanceof window.HTMLElement);
+  assert.ok(controller.walletStatusText instanceof window.HTMLElement);
+});
+
+test('show()/hide() toggle panes, trap focus, and refresh the wallet pane', async () => {
+  const controller = createController();
+  await controller.load();
+
+  let adminRefreshes = 0;
+  controller.refreshAdminPaneState = async () => {
+    adminRefreshes += 1;
+  };
+
+  let walletRefreshes = 0;
+  controller.refreshWalletPaneState = () => {
+    walletRefreshes += 1;
+  };
+
+  let relaysPopulated = 0;
+  controller.populateProfileRelays = () => {
+    relaysPopulated += 1;
+  };
+
+  controller.populateBlockedList = () => {};
+
+  const focusBefore = document.createElement('button');
+  focusBefore.id = 'before';
+  document.body.appendChild(focusBefore);
+  focusBefore.focus();
+
+  await controller.show('wallet');
+
+  assert.equal(adminRefreshes, 1);
+  assert.equal(walletRefreshes, 2);
+  assert.equal(relaysPopulated, 1);
+  assert.equal(controller.getActivePane(), 'wallet');
+  assert.equal(controller.profileModal.getAttribute('aria-hidden'), 'false');
+
+  assert.ok(controller.boundKeydown);
+  assert.ok(controller.focusableElements.length > 0);
+  const first = controller.focusableElements[0];
+  const last = controller.focusableElements[controller.focusableElements.length - 1];
+
+  last.focus();
+  let prevented = false;
+  controller.boundKeydown({
+    key: 'Tab',
+    shiftKey: false,
+    preventDefault: () => {
+      prevented = true;
+    },
+  });
+  assert.equal(document.activeElement, first);
+  assert.equal(prevented, true);
+
+  await controller.hide();
+  assert.equal(controller.profileModal.getAttribute('aria-hidden'), 'true');
+  assert.equal(controller.getActivePane(), 'account');
+});
+
+test('populateProfileRelays renders entries and wires action buttons', async () => {
+  const relays = [
+    { url: 'wss://relay.one', mode: 'write' },
+    { url: 'wss://relay.two', read: true, write: false },
+  ];
+
+  const controller = createController({
+    services: {
+      relayManager: {
+        getEntries: () => relays,
+      },
+    },
+  });
+
+  await controller.load();
+
+  const modeCalls = [];
+  const removeCalls = [];
+  controller.handleRelayModeToggle = (url) => {
+    modeCalls.push(url);
+  };
+  controller.handleRemoveRelay = (url) => {
+    removeCalls.push(url);
+  };
+
+  controller.populateProfileRelays();
+
+  const items = controller.relayList.querySelectorAll('li');
+  assert.equal(items.length, relays.length);
+
+  const firstButtons = items[0].querySelectorAll('button');
+  assert.equal(firstButtons.length, 2);
+
+  firstButtons[0].click();
+  firstButtons[1].click();
+
+  assert.deepEqual(modeCalls, ['wss://relay.one']);
+  assert.deepEqual(removeCalls, ['wss://relay.one']);
+});
+
+test('admin mutations invoke accessControl stubs and update admin DOM', async () => {
+  const successMessages = [];
+  const errorMessages = [];
+  const ensureReadyCalls = [];
+  const accessEvents = [];
+
+  const accessControl = {
+    ensureReady: async () => {
+      ensureReadyCalls.push('ensure');
+    },
+    canEditAdminLists: () => true,
+    isSuperAdmin: () => true,
+    getEditors: () => ['npub1moderator'],
+    getWhitelist: () => ['npub1allow'],
+    getBlacklist: () => ['npub1block'],
+    addModerator: async (actor, target) => {
+      accessEvents.push(['addModerator', actor, target]);
+      return { ok: true };
+    },
+    removeModerator: async (actor, target) => {
+      accessEvents.push(['removeModerator', actor, target]);
+      return { ok: true };
+    },
+    addToWhitelist: async (actor, target) => {
+      accessEvents.push(['addWhitelist', actor, target]);
+      return { ok: true };
+    },
+    removeFromWhitelist: async (actor, target) => {
+      accessEvents.push(['removeWhitelist', actor, target]);
+      return { ok: true };
+    },
+    addToBlacklist: async (actor, target) => {
+      accessEvents.push(['addBlacklist', actor, target]);
+      return { ok: true };
+    },
+    removeFromBlacklist: async (actor, target) => {
+      accessEvents.push(['removeBlacklist', actor, target]);
+      return { ok: true };
+    },
+  };
+
+  const onAccessControlUpdatedCalls = [];
+
+  const controller = createController({
+    showSuccess: (message) => successMessages.push(message),
+    showError: (message) => errorMessages.push(message),
+    services: {
+      accessControl,
+      getCurrentUserNpub: () => defaultActorNpub,
+      onAccessControlUpdated: async () => {
+        onAccessControlUpdatedCalls.push('updated');
+      },
+    },
+  });
+
+  await controller.load();
+  await controller.refreshAdminPaneState();
+
+  assert.ok(controller.navButtons.admin);
+  assert.equal(controller.navButtons.admin.classList.contains('hidden'), false);
+  assert.equal(controller.moderatorSection.classList.contains('hidden'), false);
+  assert.equal(controller.adminModeratorList.querySelectorAll('li').length, 1);
+  assert.equal(
+    controller.whitelistList.querySelectorAll('button').length > 0,
+    true,
+  );
+
+  controller.moderatorInput.value = 'npub1newmoderator';
+  await controller.handleAddModerator();
+
+  assert.deepEqual(accessEvents[0], [
+    'addModerator',
+    defaultActorNpub,
+    'npub1newmoderator',
+  ]);
+  assert.equal(controller.addModeratorButton.disabled, false);
+  assert.equal(
+    controller.addModeratorButton.hasAttribute('aria-busy'),
+    false,
+  );
+  assert.equal(controller.moderatorInput.value, '');
+  assert.ok(onAccessControlUpdatedCalls.length >= 1);
+  assert.ok(successMessages.includes('Moderator added successfully.'));
+
+  controller.whitelistInput.value = 'npub1fresh';
+  const whitelistButton = controller.addWhitelistButton;
+  await controller.handleAdminListMutation('whitelist', 'add');
+  assert.deepEqual(accessEvents[1], [
+    'addWhitelist',
+    defaultActorNpub,
+    'npub1fresh',
+  ]);
+  assert.equal(whitelistButton.disabled, false);
+  assert.equal(whitelistButton.hasAttribute('aria-busy'), false);
+  assert.ok(successMessages.includes('Added to the whitelist.'));
+
+  const removeButton = controller.whitelistList.querySelector('button');
+  await controller.handleAdminListMutation('whitelist', 'remove', 'npub1allow', removeButton);
+  const removeEvent = accessEvents.find((entry) => entry[0] === 'removeWhitelist');
+  assert.deepEqual(removeEvent, [
+    'removeWhitelist',
+    defaultActorNpub,
+    'npub1allow',
+  ]);
+  assert.equal(removeButton.disabled, false);
+  assert.equal(removeButton.hasAttribute('aria-busy'), false);
+  assert.ok(successMessages.includes('Removed from the whitelist.'));
+
+  assert.deepEqual(errorMessages, []);
+  assert.ok(ensureReadyCalls.length >= 3);
+});
+
+test('history pane lazily initializes the watch history renderer', async () => {
+  const historyCalls = [];
+  let capturedConfig = null;
+
+  const fakeRenderer = {
+    ensureInitialLoad: async ({ actor }) => {
+      historyCalls.push(['ensure', actor]);
+    },
+    refresh: async ({ actor, force }) => {
+      historyCalls.push(['refresh', actor, force]);
+    },
+    resume: () => {
+      historyCalls.push(['resume']);
+    },
+    pause: () => {
+      historyCalls.push(['pause']);
+    },
+    destroy: () => {
+      historyCalls.push(['destroy']);
+    },
+  };
+
+  const controller = createController({
+    createWatchHistoryRenderer: (config) => {
+      capturedConfig = config;
+      return fakeRenderer;
+    },
+    services: {
+      nostrClient: { sessionActor: { pubkey: defaultActorHex } },
+      getCurrentUserNpub: () => defaultActorNpub,
+    },
+  });
+
+  await controller.load();
+  controller.refreshAdminPaneState = async () => {};
+  controller.populateProfileRelays = () => {};
+  controller.populateBlockedList = () => {};
+  controller.refreshWalletPaneState = () => {};
+
+  controller.setActivePubkey(defaultActorHex);
+  await controller.show('history');
+  await Promise.resolve();
+
+  assert.ok(capturedConfig);
+  assert.equal(capturedConfig.viewSelector, '#profilePaneHistory');
+  assert.deepEqual(historyCalls.slice(0, 3), [
+    ['ensure', defaultActorHex],
+    ['refresh', defaultActorHex, true],
+    ['resume'],
+  ]);
+  assert.ok(typeof controller.boundProfileHistoryVisibility === 'function');
+
+  await controller.hide();
+  await Promise.resolve();
+
+  assert.equal(
+    historyCalls.some((entry) => Array.isArray(entry) && entry[0] === 'destroy'),
+    true,
+  );
+  assert.equal(controller.profileHistoryRenderer, null);
+  assert.equal(controller.boundProfileHistoryVisibility, null);
+});
diff --git a/tests/subscriptions-feed.test.mjs b/tests/subscriptions-feed.test.mjs
new file mode 100644
index 00000000..71cc90f4
--- /dev/null
+++ b/tests/subscriptions-feed.test.mjs
@@ -0,0 +1,147 @@
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (typeof globalThis.localStorage === "undefined") {
+  const storage = new Map();
+  globalThis.localStorage = {
+    getItem(key) {
+      return storage.has(key) ? storage.get(key) : null;
+    },
+    setItem(key, value) {
+      storage.set(String(key), String(value));
+    },
+    removeItem(key) {
+      storage.delete(key);
+    },
+    clear() {
+      storage.clear();
+    },
+  };
+}
+
+if (typeof window.localStorage === "undefined") {
+  window.localStorage = globalThis.localStorage;
+}
+
+const {
+  createFeedEngine,
+  createSubscriptionAuthorsSource,
+  createBlacklistFilterStage,
+  createDedupeByRootStage,
+  createChronologicalSorter,
+} = await import("../js/feedEngine/index.js");
+
+async function testBlockedCreatorsFiltered() {
+  const engine = createFeedEngine();
+  const feedName = "subscriptions-blocked";
+
+  const videos = [
+    { id: "keep", pubkey: "pub1", created_at: 100, videoRootId: "root-keep" },
+    { id: "blocked-event", pubkey: "pub1", created_at: 200, videoRootId: "root-bad" },
+    { id: "blocked-author-event", pubkey: "blocked", created_at: 150 },
+    { id: "ignored-author", pubkey: "other", created_at: 250 },
+  ];
+
+  const service = {
+    async getFilteredActiveVideos() {
+      return videos;
+    },
+  };
+
+  engine.registerFeed(feedName, {
+    source: createSubscriptionAuthorsSource({ service }),
+    stages: [
+      createBlacklistFilterStage({
+        shouldIncludeVideo(video, { blacklistedEventIds, isAuthorBlocked }) {
+          if (blacklistedEventIds.has(video.id)) {
+            return false;
+          }
+          if (isAuthorBlocked(video.pubkey)) {
+            return false;
+          }
+          return true;
+        },
+      }),
+      createDedupeByRootStage(),
+    ],
+    sorter: createChronologicalSorter(),
+  });
+
+  const result = await engine.runFeed(feedName, {
+    runtime: {
+      subscriptionAuthors: ["pub1", "blocked"],
+      authors: ["pub1", "blocked"],
+      blacklistedEventIds: new Set(["blocked-event"]),
+      isAuthorBlocked: (pubkey) => pubkey === "blocked",
+    },
+  });
+
+  assert.deepEqual(
+    result.videos.map((video) => video.id),
+    ["keep"],
+    "subscriptions feed should drop blocked authors and events"
+  );
+
+  const reasons = result.metadata?.why || [];
+  const blacklistReasons = reasons.filter((entry) => entry.reason === "blacklist");
+  assert.equal(
+    blacklistReasons.length,
+    2,
+    "blocked entries should be logged in metadata"
+  );
+}
+
+async function testDuplicateRootsFiltered() {
+  const engine = createFeedEngine();
+  const feedName = "subscriptions-dedupe";
+
+  const videos = [
+    { id: "older", pubkey: "pub1", created_at: 100, videoRootId: "root-a" },
+    { id: "newer", pubkey: "pub1", created_at: 200, videoRootId: "root-a" },
+    { id: "other", pubkey: "pub1", created_at: 150, videoRootId: "root-b" },
+  ];
+
+  const service = {
+    async getFilteredActiveVideos() {
+      return videos;
+    },
+  };
+
+  engine.registerFeed(feedName, {
+    source: createSubscriptionAuthorsSource({ service }),
+    stages: [
+      createBlacklistFilterStage({ shouldIncludeVideo: () => true }),
+      createDedupeByRootStage(),
+    ],
+    sorter: createChronologicalSorter(),
+  });
+
+  const result = await engine.runFeed(feedName, {
+    runtime: {
+      subscriptionAuthors: ["pub1"],
+      authors: ["pub1"],
+      blacklistedEventIds: new Set(),
+      isAuthorBlocked: () => false,
+    },
+  });
+
+  assert.deepEqual(
+    result.videos.map((video) => video.id),
+    ["newer", "other"],
+    "dedupe stage should keep only the newest root version"
+  );
+
+  const dedupeReasons = result.metadata?.why?.filter(
+    (entry) => entry.reason === "older-root-version"
+  ) || [];
+  assert.equal(dedupeReasons.length, 1, "older version should be recorded");
+  assert.equal(dedupeReasons[0].videoId, "older");
+}
+
+await testBlockedCreatorsFiltered();
+await testDuplicateRootsFiltered();
+
+console.log("subscriptions-feed tests passed");
diff --git a/tests/user-blocks.test.mjs b/tests/user-blocks.test.mjs
new file mode 100644
index 00000000..6c28daa9
--- /dev/null
+++ b/tests/user-blocks.test.mjs
@@ -0,0 +1,115 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+const { userBlocks } = await import("../js/userBlocks.js");
+const { nostrClient } = await import("../js/nostr.js");
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+await (async () => {
+  const actor = "f".repeat(64);
+  const blocked = "e".repeat(64);
+  const relays = [
+    "wss://relay-one.example",
+    "wss://relay-two.example",
+    "wss://relay-three.example",
+  ];
+
+  const originalNostr = window.nostr;
+  const originalPool = nostrClient.pool;
+  const originalRelays = Array.isArray(nostrClient.relays)
+    ? [...nostrClient.relays]
+    : nostrClient.relays;
+  const originalBlocked = new Set(userBlocks.blockedPubkeys);
+  const originalBlockEventId = userBlocks.blockEventId;
+  const originalLoaded = userBlocks.loaded;
+
+  const calls = [];
+  const resolvers = [];
+
+  window.nostr = {
+    ...(originalNostr || {}),
+    nip04: {
+      ...((originalNostr && originalNostr.nip04) || {}),
+      decrypt: async () =>
+        JSON.stringify({
+          blockedPubkeys: [blocked],
+        }),
+    },
+  };
+
+  const pool = originalPool ? { ...originalPool } : {};
+  pool.list = (targets) => {
+    const relay = Array.isArray(targets) ? targets[0] : undefined;
+    calls.push(relay);
+    let resolve;
+    const promise = new Promise((res) => {
+      resolve = res;
+    });
+    resolvers.push({ relay, resolve });
+    return promise;
+  };
+
+  nostrClient.pool = pool;
+  nostrClient.relays = relays;
+
+  userBlocks.blockedPubkeys = new Set();
+  userBlocks.blockEventId = null;
+  userBlocks.loaded = false;
+
+  try {
+    const loadPromise = userBlocks.loadBlocks(actor);
+
+    await Promise.resolve();
+
+    assert.deepEqual(
+      calls,
+      relays,
+      "loadBlocks should initiate queries for all relays concurrently"
+    );
+
+    const responses = {
+      [relays[0]]: [
+        {
+          id: "event-old",
+          created_at: 1700,
+          content: "ciphertext-old",
+        },
+      ],
+      [relays[1]]: [
+        {
+          id: "event-new",
+          created_at: 1800,
+          content: "ciphertext-new",
+        },
+      ],
+      [relays[2]]: [],
+    };
+
+    for (const { relay, resolve } of resolvers) {
+      resolve(responses[relay]);
+    }
+
+    await loadPromise;
+
+    assert.equal(
+      userBlocks.blockEventId,
+      "event-new",
+      "latest event should win after aggregating relay responses"
+    );
+    assert.deepEqual(
+      userBlocks.getBlockedPubkeys(),
+      [blocked],
+      "decrypted block list should hydrate from newest event"
+    );
+  } finally {
+    userBlocks.blockedPubkeys = originalBlocked;
+    userBlocks.blockEventId = originalBlockEventId;
+    userBlocks.loaded = originalLoaded;
+    nostrClient.pool = originalPool;
+    nostrClient.relays = originalRelays;
+    window.nostr = originalNostr;
+  }
+})();
diff --git a/tests/validate-config.test.mjs b/tests/validate-config.test.mjs
new file mode 100644
index 00000000..0244a58e
--- /dev/null
+++ b/tests/validate-config.test.mjs
@@ -0,0 +1,21 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { validateInstanceConfig } from "../config/validate-config.js";
+
+test(
+  "validateInstanceConfig throws when platform fee is positive without a platform override",
+  () => {
+    const overrides = {
+      ADMIN_SUPER_NPUB:
+        "npub1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq",
+      PLATFORM_FEE_PERCENT: 5,
+      PLATFORM_LUD16_OVERRIDE: "   ",
+    };
+
+    assert.throws(() => validateInstanceConfig(overrides), {
+      message:
+        "PLATFORM_FEE_PERCENT is positive but PLATFORM_LUD16_OVERRIDE is empty. Set PLATFORM_LUD16_OVERRIDE to the Lightning address that should receive the platform's split, or publish a lud16 value on the Super Admin profile so BitVid can route platform fees.",
+    });
+  }
+);
diff --git a/tests/video-modal-zap.test.mjs b/tests/video-modal-zap.test.mjs
new file mode 100644
index 00000000..bb6c20f1
--- /dev/null
+++ b/tests/video-modal-zap.test.mjs
@@ -0,0 +1,396 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+const noop = () => {};
+
+class DummyElement {
+  constructor() {
+    this.classList = {
+      add: noop,
+      remove: noop,
+      toggle: noop,
+      contains: () => false,
+    };
+    this.style = {};
+    this.dataset = {};
+    this.children = [];
+  }
+  appendChild(child) {
+    this.children.push(child);
+    return child;
+  }
+  removeChild(child) {
+    const index = this.children.indexOf(child);
+    if (index >= 0) {
+      this.children.splice(index, 1);
+    }
+    return child;
+  }
+  querySelector() {
+    return null;
+  }
+  addEventListener() {}
+  removeEventListener() {}
+  setAttribute() {}
+  removeAttribute() {}
+  focus() {}
+  contains() {
+    return false;
+  }
+}
+
+function createDocumentStub() {
+  const doc = {
+    body: new DummyElement(),
+    documentElement: new DummyElement(),
+    head: new DummyElement(),
+    getElementById: () => null,
+    querySelector: () => null,
+    createElement: () => new DummyElement(),
+    addEventListener: noop,
+    removeEventListener: noop,
+  };
+  doc.body.contains = () => false;
+  doc.defaultView = null;
+  return doc;
+}
+
+function createWindowStub(documentStub) {
+  const nav = { clipboard: { writeText: async () => {} } };
+  const win = {
+    document: documentStub,
+    location: {
+      href: "https://example.com/",
+      origin: "https://example.com",
+      pathname: "/",
+    },
+    history: {
+      pushState: noop,
+      replaceState: noop,
+    },
+    navigator: nav,
+    addEventListener: noop,
+    removeEventListener: noop,
+    requestAnimationFrame: (fn) => {
+      if (typeof fn === "function") {
+        fn();
+      }
+    },
+    setTimeout,
+    clearTimeout,
+    NostrTools: {
+      nip19: {
+        neventEncode: () => "nevent1example",
+        npubEncode: () => "npub1example",
+        decode: (value) => {
+          if (typeof value !== "string") {
+            throw new Error("Invalid nip19 input");
+          }
+          if (value.startsWith("npub")) {
+            return { type: "npub", data: "f".repeat(64) };
+          }
+          if (value.startsWith("nevent")) {
+            return { type: "nevent", data: { id: "f".repeat(64) } };
+          }
+          return null;
+        },
+      },
+    },
+  };
+  win.HTMLElement = DummyElement;
+  win.HTMLImageElement = DummyElement;
+  win.setInterval = setInterval;
+  win.clearInterval = clearInterval;
+  win.console = console;
+  return win;
+}
+
+const documentStub = createDocumentStub();
+const windowStub = createWindowStub(documentStub);
+windowStub.document = documentStub;
+documentStub.defaultView = windowStub;
+windowStub.document.defaultView = windowStub;
+
+globalThis.__BITVID_DISABLE_NETWORK_IMPORTS__ = true;
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = windowStub;
+} else {
+  Object.assign(globalThis.window, windowStub);
+}
+
+globalThis.HTMLElement = DummyElement;
+globalThis.HTMLImageElement = DummyElement;
+
+if (typeof globalThis.self === "undefined") {
+  globalThis.self = globalThis.window;
+} else if (globalThis.self !== globalThis.window) {
+  globalThis.self = globalThis.window;
+}
+
+if (typeof globalThis.WebSocket === "undefined") {
+  globalThis.WebSocket = class {
+    constructor() {
+      throw new Error("WebSocket is not available in tests.");
+    }
+    close() {}
+  };
+}
+
+globalThis.document = documentStub;
+globalThis.navigator = windowStub.navigator;
+globalThis.location = windowStub.location;
+
+if (typeof globalThis.fetch === "undefined") {
+  globalThis.fetch = async () => {
+    throw new Error("Unexpected fetch call in tests.");
+  };
+}
+
+const {
+  rememberLightningMetadata,
+  normalizeLightningAddressKey,
+  setCachedPlatformLightningAddress,
+  clearZapCaches,
+} = await import("../js/payments/zapSharedState.js");
+
+function primeLightningMetadata(address, overrides = {}) {
+  const key = normalizeLightningAddressKey(address);
+  rememberLightningMetadata({
+    key,
+    address,
+    resolved: { address, url: `https://lnurl.test/${address}` },
+    metadata: {
+      callback: `https://lnurl.test/${address}/callback`,
+      minSendable: 1_000,
+      maxSendable: 10_000_000,
+      commentAllowed: 280,
+      allowsNostr: true,
+      ...overrides,
+    },
+    fetchedAt: Date.now(),
+  });
+}
+
+function createVideoModalStub() {
+  const listeners = new Map();
+  return {
+    setCopyEnabled: noop,
+    setShareEnabled: noop,
+    setZapVisibility: noop,
+    resetStats: noop,
+    updateViewCountLabel: noop,
+    setViewCountPointer: noop,
+    addEventListener(type, handler) {
+      listeners.set(type, handler);
+    },
+    removeEventListener(type) {
+      listeners.delete(type);
+    },
+    setZapPendingCalls: [],
+    statusMessages: [],
+    receipts: [],
+    summaries: [],
+    resetForms: [],
+    currentAmount: "",
+    currentComment: "",
+    setZapPending(value) {
+      this.setZapPendingCalls.push(Boolean(value));
+    },
+    setZapStatus(message, tone) {
+      this.statusMessages.push({ message, tone });
+    },
+    clearZapReceipts() {
+      this.receipts.push({ cleared: true });
+    },
+    renderZapReceipts(list, options) {
+      this.receipts.push({ list, options });
+    },
+    setZapSplitSummary(text) {
+      this.summaries.push(text);
+    },
+    setZapRetryPending(pending, { summary } = {}) {
+      this.retryState = { pending, summary };
+    },
+    resetZapForm({ amount, comment }) {
+      this.resetForms.push({ amount, comment });
+      this.currentAmount = amount;
+      this.currentComment = comment;
+    },
+    setZapAmount(value) {
+      this.currentAmount = value;
+    },
+    setZapComment(value) {
+      this.currentComment = value;
+    },
+    getZapCommentValue() {
+      return this.currentComment || "";
+    },
+  };
+}
+
+function createServices({ splitAndZap }) {
+  const nostrService = {
+    getVideoSubscription: () => null,
+    getVideosMap: () => new Map(),
+    on: () => () => {},
+  };
+  const feedEngine = {
+    run: noop,
+    register: noop,
+  };
+  const playbackService = {
+    createSession: () => ({
+      getPlaybackConfig: () => ({}),
+      getMagnetForPlayback: () => "",
+    }),
+  };
+  const authService = {
+    on: () => () => {},
+  };
+  return {
+    nostrService,
+    feedEngine,
+    playbackService,
+    authService,
+    payments: {
+      splitAndZap,
+      ensureWallet: async ({ settings }) => settings,
+      sendPayment: async () => ({}),
+    },
+  };
+}
+
+function createHelpers() {
+  return {
+    mediaLoaderFactory: () => ({ observe: noop, unobserve: noop }),
+  };
+}
+
+async function createApp({ splitAndZap }) {
+  clearZapCaches();
+  const modalStub = createVideoModalStub();
+  const { Application } = await import("../js/app.js");
+  const app = new Application({
+    services: createServices({ splitAndZap }),
+    helpers: createHelpers(),
+    ui: {
+      videoModal: () => modalStub,
+    },
+  });
+
+  const creatorAddress = "creator@example.com";
+  const platformAddress = "platform@example.com";
+  setCachedPlatformLightningAddress(platformAddress);
+  primeLightningMetadata(creatorAddress);
+  primeLightningMetadata(platformAddress);
+
+  app.showError = noop;
+  app.showSuccess = noop;
+  app.showStatus = noop;
+
+  return { app, modalStub, creatorAddress, platformAddress };
+}
+
+await (async () => {
+  // Test: wallet required before zapping
+  const splitCalls = [];
+  const { app, modalStub, creatorAddress } = await createApp({
+    splitAndZap: async (...args) => {
+      splitCalls.push(args);
+      return { receipts: [] };
+    },
+  });
+
+  let walletPaneCalls = 0;
+  app.zapController.requestWalletPane = () => {
+    walletPaneCalls += 1;
+    return Promise.resolve();
+  };
+
+  app.currentVideo = {
+    id: "event123",
+    pubkey: "a".repeat(64),
+    tags: [],
+    content: "",
+    created_at: 1_700_000_000,
+    lightningAddress: creatorAddress,
+  };
+
+  await app.zapController.sendZap({ amount: 500, comment: "Hello" });
+
+  assert.equal(walletPaneCalls, 1, "should prompt to open wallet pane");
+  assert.equal(splitCalls.length, 0, "splitAndZap should not be invoked");
+  assert.deepEqual(modalStub.setZapPendingCalls, [], "zap controls should remain idle");
+
+  app.destroy();
+})();
+
+await (async () => {
+  // Test: splitAndZap invoked with video metadata when wallet is present
+  const splitCalls = [];
+  const splitAndZap = async (payload, deps) => {
+    splitCalls.push({ payload, deps });
+    return {
+      receipts: [
+        {
+          recipientType: "creator",
+          amount: payload.amountSats,
+          address: payload.videoEvent.lightningAddress,
+          payment: { result: { preimage: "ff".repeat(16) } },
+        },
+      ],
+    };
+  };
+  const { app, modalStub, creatorAddress } = await createApp({
+    splitAndZap,
+  });
+
+  const pubkeyHex = "b".repeat(64);
+  app.pubkey = pubkeyHex;
+  const normalized = app.normalizeHexPubkey(pubkeyHex);
+  app.nwcSettingsService.cache.set(normalized, {
+    nwcUri: "nostr+walletconnect://example",
+    defaultZap: null,
+    lastChecked: null,
+    version: "",
+  });
+
+  app.currentVideo = {
+    id: "event456",
+    pubkey: pubkeyHex,
+    tags: [["d", "video123"]],
+    content: "",
+    created_at: 1_700_000_001,
+    lightningAddress: creatorAddress,
+  };
+
+  app.zapController.setAmount(1500);
+  app.zapController.setComment("Great video");
+
+  await app.zapController.sendZap({ amount: 1500, comment: "Great video" });
+
+  assert.equal(splitCalls.length, 1, "splitAndZap should be called once");
+  const call = splitCalls[0];
+  assert.equal(call.payload.amountSats, 1500);
+  assert.equal(call.payload.comment, "Great video");
+  assert.equal(
+    call.payload.videoEvent.lightningAddress,
+    creatorAddress,
+    "video event should include lightning address"
+  );
+  assert.equal(call.payload.walletSettings.nwcUri, "nostr+walletconnect://example");
+  assert.equal(call.payload.videoEvent.pubkey, pubkeyHex);
+  assert.equal(call.payload.videoEvent.id, "event456");
+  assert.deepEqual(call.payload.videoEvent.tags, [["d", "video123"]]);
+
+  const lastStatus = modalStub.statusMessages[modalStub.statusMessages.length - 1];
+  assert(lastStatus.message.includes("Sent 1500 sats"), "should report zap summary");
+  assert.equal(lastStatus.tone, "success");
+  assert.equal(modalStub.resetForms.length > 0, true, "form should reset after success");
+  assert.equal(modalStub.currentComment, "");
+
+  app.destroy();
+})();
+
+process.exit(0);
diff --git a/tests/view-counter.test.mjs b/tests/view-counter.test.mjs
index ac78e4a4..788895fe 100644
--- a/tests/view-counter.test.mjs
+++ b/tests/view-counter.test.mjs
@@ -47,6 +47,14 @@ if (!globalThis.window.NostrTools) {
   globalThis.window.NostrTools = {};
 }
 
+if (typeof globalThis.window.NostrTools.getEventHash !== "function") {
+  globalThis.window.NostrTools.getEventHash = () => "test-event-hash";
+}
+
+if (typeof globalThis.window.NostrTools.signEvent !== "function") {
+  globalThis.window.NostrTools.signEvent = () => "test-event-sig";
+}
+
 setNostrEventSchemaOverrides({});
 
 const canonicalViewEvent = buildViewEvent({
@@ -275,11 +283,84 @@ const {
   unsubscribeFromVideoViewCount,
   ingestLocalViewEvent,
 } = await import("../js/viewCounter.js");
+const { resolveVideoPointer } = await import("../js/utils/videoPointer.js");
+const {
+  getVideoRootIdentifier,
+  applyRootTimestampToVideosMap,
+  syncActiveVideoRootTimestamp,
+} = await import("../js/utils/videoTimestamps.js");
 
 initViewCounter({ nostrClient });
 
 const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0));
 
+function testPointerPrefersVideoRootId() {
+  const info = resolveVideoPointer({
+    pubkey: "ABCDEF1234",
+    videoRootId: "ROOT-POINTER",
+    dTag: "legacy-d-tag",
+    fallbackEventId: "event-fallback",
+    kind: 30078,
+  });
+
+  assert.ok(info, "expected pointer info for root-backed video");
+  assert.deepEqual(
+    info.pointer,
+    ["a", "30078:abcdef1234:ROOT-POINTER"],
+    "videos with a videoRootId should resolve to the root pointer"
+  );
+  assert.equal(
+    info.key,
+    "a:30078:abcdef1234:root-pointer",
+    "root pointer key should be normalized for view counter lookups"
+  );
+}
+
+function testPointerFallsBackToDTag() {
+  const info = resolveVideoPointer({
+    pubkey: "ABCDEF1234",
+    dTag: "legacy-pointer",
+    fallbackEventId: "event-fallback",
+    kind: 30078,
+  });
+
+  assert.ok(info, "expected pointer info when only d-tag is present");
+  assert.deepEqual(
+    info.pointer,
+    ["a", "30078:abcdef1234:legacy-pointer"],
+    "videos without a root should fall back to the d-tag pointer"
+  );
+  assert.equal(
+    info.key,
+    "a:30078:abcdef1234:legacy-pointer",
+    "d-tag pointer key should match the normalized value"
+  );
+}
+
+function testPointerFallsBackToEventId() {
+  const info = resolveVideoPointer({
+    pubkey: "ABCDEF1234",
+    fallbackEventId: "legacy-event-id",
+    kind: 30078,
+  });
+
+  assert.ok(info, "expected pointer info when only event id is present");
+  assert.deepEqual(
+    info.pointer,
+    ["e", "legacy-event-id"],
+    "videos without root or d-tag should fall back to the event pointer"
+  );
+  assert.equal(
+    info.key,
+    "e:legacy-event-id",
+    "event pointer key should normalize correctly"
+  );
+}
+
+testPointerPrefersVideoRootId();
+testPointerFallsBackToDTag();
+testPointerFallsBackToEventId();
+
 async function testDedupesWithinWindow() {
   localStorage.clear();
   harness.reset();
@@ -641,6 +722,99 @@ async function testRecordVideoViewEmitsJsonPayload() {
   );
 }
 
+async function testSignAndPublishFallbackUsesSessionActor() {
+  const originalExtension = window.nostr;
+  const originalPool = nostrClient.pool;
+  const originalRelays = nostrClient.relays;
+  const originalPubkey = nostrClient.pubkey;
+  const originalSessionActor = nostrClient.sessionActor;
+  const originalEnsureSessionActor = nostrClient.ensureSessionActor;
+  const ensureCalls = [];
+  const publishCalls = [];
+
+  try {
+    delete window.nostr;
+
+    nostrClient.pool = {
+      publish(urls, event) {
+        publishCalls.push({ urls, event });
+        return {
+          on(eventName, handler) {
+            if (eventName === "ok") {
+              handler();
+            }
+            return true;
+          },
+        };
+      },
+    };
+    nostrClient.relays = ["wss://relay.fallback"];
+    nostrClient.pubkey = "logged-user";
+    nostrClient.sessionActor = {
+      pubkey: "session-actor",
+      privateKey: "session-private",
+    };
+    nostrClient.ensureSessionActor = async (forceRenew = false) => {
+      ensureCalls.push(forceRenew === true);
+      return nostrClient.sessionActor.pubkey;
+    };
+
+    const event = {
+      kind: 1,
+      pubkey: "session-actor",
+      created_at: 123,
+      tags: [],
+      content: "hello fallback",
+    };
+
+    const result = await nostrClient.signAndPublishEvent(event, {
+      context: "fallback",
+      logName: "fallback",
+    });
+
+    assert.ok(result, "expected a publish result when falling back to the session actor");
+    assert.equal(
+      result.signedEvent.pubkey,
+      "session-actor",
+      "fallback signing should use the session actor pubkey",
+    );
+    assert.equal(
+      result.signerPubkey,
+      "session-actor",
+      "signer pubkey should reflect the session actor when falling back",
+    );
+    assert.ok(
+      ensureCalls.length > 0,
+      "fallback signing should attempt to ensure the session actor",
+    );
+    assert.ok(
+      Array.isArray(result.summary?.accepted) && result.summary.accepted.length > 0,
+      "fallback publish should report accepted relays",
+    );
+    assert.equal(
+      publishCalls.length,
+      result.summary.accepted.length,
+      "each accepted relay should correspond to a publish attempt",
+    );
+    assert.equal(
+      result.summary.accepted[0]?.url,
+      "wss://relay.fallback",
+      "publish summary should surface the accepting relay",
+    );
+  } finally {
+    if (typeof originalExtension === "undefined") {
+      delete window.nostr;
+    } else {
+      window.nostr = originalExtension;
+    }
+    nostrClient.pool = originalPool;
+    nostrClient.relays = originalRelays;
+    nostrClient.pubkey = originalPubkey;
+    nostrClient.sessionActor = originalSessionActor;
+    nostrClient.ensureSessionActor = originalEnsureSessionActor;
+  }
+}
+
 // Cached totals older than VIEW_COUNT_CACHE_TTL_MS should be discarded and rehydrated from relays.
 async function testHydrationRefreshesAfterCacheTtl() {
   harness.reset();
@@ -697,6 +871,168 @@ async function testHydrationRefreshesAfterCacheTtl() {
   }
 }
 
+async function testHydrateHistoryPrefersRootEvent() {
+  const originalPool = nostrClient.pool;
+  const originalRelays = Array.isArray(nostrClient.relays)
+    ? [...nostrClient.relays]
+    : [];
+  const originalPopulate = nostrClient.populateNip71MetadataForVideos;
+  const originalAllEvents = nostrClient.allEvents;
+  const originalActiveMap = nostrClient.activeMap;
+  const originalRootMap = nostrClient.rootCreatedAtByRoot;
+
+  const rootId = "root-event-note";
+  const latestVideo = {
+    id: "latest-edit",
+    videoRootId: rootId,
+    pubkey: "PUBKEY123",
+    created_at: 200,
+    title: "Edited title",
+    url: "https://example.com/edited.mp4",
+    tags: [["t", "video"]],
+    deleted: false,
+  };
+
+  const rootEvent = {
+    id: rootId,
+    pubkey: latestVideo.pubkey,
+    created_at: 100,
+    kind: 30078,
+    content: JSON.stringify({
+      version: 3,
+      title: "Original title",
+      url: "https://example.com/original.mp4",
+      videoRootId: rootId,
+      description: "",
+      mode: "live",
+    }),
+    tags: [["t", "video"]],
+  };
+
+  const getCalls = [];
+
+  try {
+    nostrClient.pool = {
+      get: async (relays, filter) => {
+        getCalls.push({ relays, filter });
+        return rootEvent;
+      },
+      list: async () => [],
+    };
+    nostrClient.relays = ["wss://relay.example"];
+    nostrClient.populateNip71MetadataForVideos = async () => {};
+    nostrClient.allEvents = new Map([[latestVideo.id, latestVideo]]);
+    nostrClient.activeMap = new Map([[`ROOT:${rootId}`, latestVideo]]);
+    nostrClient.rootCreatedAtByRoot = new Map();
+
+    const history = await nostrClient.hydrateVideoHistory(latestVideo);
+
+    assert.equal(
+      getCalls.length,
+      1,
+      "hydrateVideoHistory should fetch the root event when it is missing locally"
+    );
+
+    assert.ok(Array.isArray(history) && history.length >= 2);
+    const fetchedRoot = history.find((entry) => entry.id === rootId);
+    assert.ok(fetchedRoot, "history should include the fetched root event");
+    assert.equal(
+      fetchedRoot.created_at,
+      rootEvent.created_at,
+      "root event should preserve its original created_at timestamp"
+    );
+    assert.equal(
+      latestVideo.rootCreatedAt,
+      rootEvent.created_at,
+      "latest revision should inherit the root created_at timestamp"
+    );
+    assert.equal(
+      nostrClient.rootCreatedAtByRoot.get(rootId),
+      rootEvent.created_at,
+      "nostrClient should cache the earliest created_at per root"
+    );
+  } finally {
+    nostrClient.pool = originalPool;
+    nostrClient.relays = originalRelays;
+    nostrClient.populateNip71MetadataForVideos = originalPopulate;
+    nostrClient.allEvents = originalAllEvents;
+    nostrClient.activeMap = originalActiveMap;
+    nostrClient.rootCreatedAtByRoot = originalRootMap;
+  }
+}
+
+async function testModalPostedTimestampStaysInSync() {
+  const videosMap = new Map();
+  const currentVideo = {
+    id: "latest-edit",
+    videoRootId: "root-event-note",
+    created_at: 260,
+    lastEditedAt: 260,
+  };
+
+  const storedVideo = { id: "latest-edit", videoRootId: "root-event-note" };
+  videosMap.set(storedVideo.id, storedVideo);
+
+  const incomingVideo = { ...currentVideo };
+  const rootId = getVideoRootIdentifier(incomingVideo);
+  const timestamp = 100;
+
+  applyRootTimestampToVideosMap({
+    videosMap,
+    video: incomingVideo,
+    rootId,
+    timestamp,
+  });
+
+  assert.equal(
+    storedVideo.rootCreatedAt,
+    timestamp,
+    "videosMap entries that share the root should receive the cached timestamp",
+  );
+
+  const modalUpdates = [];
+  const videoModal = {
+    updateMetadata: ({ timestamps }) => {
+      if (timestamps) {
+        modalUpdates.push({ ...timestamps });
+      }
+    },
+  };
+
+  const buildModalTimestampPayload = ({ postedAt, editedAt }) => ({
+    posted: postedAt !== null ? `Posted time-${postedAt}` : "",
+    edited: editedAt !== null ? `Last edited time-${editedAt}` : "",
+  });
+
+  const updated = syncActiveVideoRootTimestamp({
+    activeVideo: currentVideo,
+    rootId,
+    timestamp,
+    buildModalTimestampPayload,
+    videoModal,
+  });
+
+  assert.ok(updated, "syncActiveVideoRootTimestamp should record the new root time");
+  assert.equal(
+    currentVideo.rootCreatedAt,
+    timestamp,
+    "current video should stay aligned with the cached root timestamp",
+  );
+
+  const lastModalUpdate = modalUpdates.at(-1);
+  assert.ok(lastModalUpdate, "video modal should receive a timestamp update");
+  assert.equal(
+    lastModalUpdate.posted,
+    "Posted time-100",
+    "modal posted label should reflect the root timestamp",
+  );
+  assert.equal(
+    lastModalUpdate.edited,
+    "Last edited time-260",
+    "modal edited label should continue to show the latest edit time",
+  );
+}
+
 await testHydrationRefreshesAfterCacheTtl();
 await testDedupesWithinWindow();
 await testHydrationSkipsStaleEventsAndRollsOff();
@@ -704,5 +1040,8 @@ await testLocalIngestNotifiesImmediately();
 await testUnsubscribeStopsCallbacks();
 await testRelayCountAggregationUsesBestEstimate();
 await testRecordVideoViewEmitsJsonPayload();
+await testSignAndPublishFallbackUsesSessionActor();
+await testHydrateHistoryPrefersRootEvent();
+await testModalPostedTimestampStaysInSync();
 
 console.log("View counter tests completed successfully.");
diff --git a/tests/watch-history-feed.test.mjs b/tests/watch-history-feed.test.mjs
new file mode 100644
index 00000000..102476d0
--- /dev/null
+++ b/tests/watch-history-feed.test.mjs
@@ -0,0 +1,132 @@
+// Run with: node tests/watch-history-feed.test.mjs
+
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+const noopStorage = {
+  getItem: () => null,
+  setItem: () => {},
+  removeItem: () => {},
+  clear: () => {},
+};
+
+if (typeof globalThis.localStorage === "undefined") {
+  globalThis.localStorage = noopStorage;
+}
+
+if (typeof window.localStorage === "undefined") {
+  window.localStorage = globalThis.localStorage;
+}
+
+const { createFeedEngine, registerWatchHistoryFeed } = await import(
+  "../js/feedEngine/index.js"
+);
+
+function createStubService(history = []) {
+  let loadCount = 0;
+  return {
+    get loadCount() {
+      return loadCount;
+    },
+    loadLatest: async () => {
+      loadCount += 1;
+      return history.map((entry) => ({ ...entry }));
+    },
+    setHistory(next) {
+      history = Array.isArray(next) ? next : [];
+    },
+    shouldStoreMetadata: () => false,
+    getLocalMetadata: () => null,
+    setLocalMetadata: () => {},
+    removeLocalMetadata: () => {},
+  };
+}
+
+function createResolverFactory() {
+  return () => ({
+    resolveVideo: async () => null,
+    resolveProfile: () => null,
+  });
+}
+
+async function testOrderingByWatchedAt() {
+  const service = createStubService([
+    {
+      pointer: { type: "e", value: "earlier" },
+      watchedAt: 100,
+    },
+    {
+      pointer: { type: "e", value: "latest" },
+      watchedAt: 200,
+    },
+  ]);
+
+  const engine = createFeedEngine();
+  registerWatchHistoryFeed(engine, {
+    service,
+    nostr: { shouldIncludeVideo: () => true },
+    metadataResolverFactory: createResolverFactory(),
+  });
+
+  const result = await engine.runFeed("watch-history", {
+    runtime: { watchHistory: { actor: "npub-order" } },
+  });
+
+  assert.equal(result.items.length, 2, "feed should include two watch history entries");
+  assert.equal(
+    result.items[0].metadata.pointerKey,
+    "e:latest",
+    "newest watch event should be first in the feed",
+  );
+  assert.equal(
+    result.items[1].metadata.pointerKey,
+    "e:earlier",
+    "older watch event should be last in the feed",
+  );
+  assert.ok(
+    result.items[0].metadata.watchedAt >= result.items[1].metadata.watchedAt,
+    "items should be sorted by watchedAt descending",
+  );
+}
+
+async function testRemovalRefreshesSource() {
+  const initialHistory = [
+    { pointer: { type: "e", value: "keep" }, watchedAt: 300 },
+    { pointer: { type: "e", value: "remove" }, watchedAt: 250 },
+  ];
+  const service = createStubService(initialHistory);
+  const engine = createFeedEngine();
+  registerWatchHistoryFeed(engine, {
+    service,
+    nostr: { shouldIncludeVideo: () => true },
+    metadataResolverFactory: createResolverFactory(),
+  });
+
+  const firstRun = await engine.runFeed("watch-history", {
+    runtime: { watchHistory: { actor: "npub-refresh" } },
+  });
+  assert.equal(firstRun.items.length, 2, "initial run should return full history");
+  assert.equal(service.loadCount, 1, "loadLatest should be invoked for the initial run");
+
+  service.setHistory([{ pointer: { type: "e", value: "keep" }, watchedAt: 300 }]);
+
+  const secondRun = await engine.runFeed("watch-history", {
+    runtime: { watchHistory: { actor: "npub-refresh" } },
+  });
+
+  assert.equal(service.loadCount, 2, "engine should request fresh history after change");
+  assert.equal(secondRun.items.length, 1, "second run should reflect updated history");
+  assert.equal(
+    secondRun.items[0].metadata.pointerKey,
+    "e:keep",
+    "remaining pointer should persist after refresh",
+  );
+}
+
+await testOrderingByWatchedAt();
+await testRemovalRefreshesSource();
+
+console.log("watch-history-feed.test.mjs completed successfully.");
diff --git a/tests/watch-history.test.mjs b/tests/watch-history.test.mjs
index b9fae06a..285ec24a 100644
--- a/tests/watch-history.test.mjs
+++ b/tests/watch-history.test.mjs
@@ -3,7 +3,15 @@
 import "./test-helpers/setup-localstorage.mjs";
 import assert from "node:assert/strict";
 
-const { WATCH_HISTORY_PAYLOAD_MAX_BYTES, WATCH_HISTORY_MAX_ITEMS } =
+const {
+  WATCH_HISTORY_PAYLOAD_MAX_BYTES,
+  WATCH_HISTORY_MAX_ITEMS,
+  WATCH_HISTORY_CACHE_TTL_MS,
+  WATCH_HISTORY_BATCH_RESOLVE,
+  WATCH_HISTORY_BATCH_PAGE_SIZE,
+  WATCH_HISTORY_LIST_IDENTIFIER,
+  WATCH_HISTORY_KIND,
+} =
   await import("../js/config.js");
 const {
   getWatchHistoryV2Enabled,
@@ -12,8 +20,13 @@ const {
 const {
   nostrClient,
   chunkWatchHistoryPayloadItems,
+  normalizeActorKey,
 } = await import("../js/nostr.js");
 const { watchHistoryService } = await import("../js/watchHistoryService.js");
+const { buildHistoryCard } = await import("../js/historyView.js");
+const { getApplication, setApplication } = await import(
+  "../js/applicationContext.js"
+);
 
 if (typeof globalThis.window === "undefined") {
   globalThis.window = {};
@@ -51,6 +64,14 @@ const originalScheduleWatchHistoryRepublish =
 const originalResolveWatchHistory = nostrClient.resolveWatchHistory;
 const originalGetWatchHistoryFingerprint =
   nostrClient.getWatchHistoryFingerprint;
+const originalExtensionPermissionCache = nostrClient.extensionPermissionCache;
+const originalExtensionPermissionSnapshot = Array.isArray(
+  originalExtensionPermissionCache,
+)
+  ? Array.from(originalExtensionPermissionCache)
+  : [];
+
+nostrClient.extensionPermissionCache = new Set();
 
 nostrClient.watchHistoryCache = new Map();
 nostrClient.watchHistoryStorage = {
@@ -198,6 +219,43 @@ function createFakeSimplePool() {
 
 const poolHarness = createFakeSimplePool();
 nostrClient.pool = poolHarness;
+
+function extractVideoMetadataFromItem(item) {
+  if (!item || typeof item !== "object") {
+    return null;
+  }
+
+  const directVideo = item.video;
+  if (directVideo && typeof directVideo === "object") {
+    return directVideo;
+  }
+
+  const metadataVideo =
+    item.metadata && typeof item.metadata === "object"
+      ? item.metadata.video
+      : null;
+  if (metadataVideo && typeof metadataVideo === "object") {
+    return metadataVideo;
+  }
+
+  const pointer = item.pointer && typeof item.pointer === "object"
+    ? item.pointer
+    : null;
+  if (pointer) {
+    if (pointer.video && typeof pointer.video === "object") {
+      return pointer.video;
+    }
+    const pointerMetadata =
+      pointer.metadata && typeof pointer.metadata === "object"
+        ? pointer.metadata.video
+        : null;
+    if (pointerMetadata && typeof pointerMetadata === "object") {
+      return pointerMetadata;
+    }
+  }
+
+  return null;
+}
 nostrClient.relays = ["wss://relay.test"];
 nostrClient.readRelays = ["wss://relay.test"];
 nostrClient.writeRelays = ["wss://relay.test"];
@@ -248,7 +306,13 @@ function installExtensionCrypto({ actor }) {
   let extensionEncrypts = 0;
   let extensionDecrypts = 0;
   let fallbackEncrypts = 0;
+  const enableCalls = [];
+  const decryptCalls = [];
   window.nostr = {
+    enable: async (options) => {
+      enableCalls.push(options || null);
+      return { ok: true };
+    },
     signEvent: async (event) => ({
       ...event,
       id: `ext-${event.kind}-${event.created_at}`,
@@ -262,6 +326,7 @@ function installExtensionCrypto({ actor }) {
       },
       decrypt: async (target, ciphertext) => {
         extensionDecrypts += 1;
+        decryptCalls.push({ target, ciphertext });
         const prefix = `extension:${target}:`;
         if (!ciphertext.startsWith(prefix)) {
           throw new Error("invalid-extension-ciphertext");
@@ -297,6 +362,8 @@ function installExtensionCrypto({ actor }) {
     getExtensionEncrypts: () => extensionEncrypts,
     getExtensionDecrypts: () => extensionDecrypts,
     getFallbackEncrypts: () => fallbackEncrypts,
+    getEnableCalls: () => [...enableCalls],
+    getDecryptCalls: () => decryptCalls.map((entry) => ({ ...entry })),
   };
 }
 
@@ -320,6 +387,299 @@ function maxCreatedAt(events = []) {
   }, 0);
 }
 
+async function testNormalizeActorKeyShortCircuit() {
+  console.log("Running normalizeActorKey short-circuit test...");
+
+  const actorHex = "f".repeat(64);
+  const actorNpub = "npub1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq";
+  if (!window.NostrTools || typeof window.NostrTools !== "object") {
+    window.NostrTools = {};
+  }
+  const previousNip19 = window.NostrTools.nip19;
+  const previousDecode =
+    previousNip19 && typeof previousNip19.decode === "function"
+      ? previousNip19.decode
+      : null;
+  const decodeCalls = [];
+
+  window.NostrTools.nip19 = {
+    ...(previousNip19 || {}),
+    decode(value) {
+      decodeCalls.push(value);
+      if (value === actorNpub) {
+        return { type: "npub", data: actorHex };
+      }
+      if (typeof previousDecode === "function") {
+        return previousDecode(value);
+      }
+      throw new Error("unsupported-npub");
+    },
+  };
+
+  const originalWarn = console.warn;
+  const warnings = [];
+  console.warn = (...args) => {
+    warnings.push(args);
+  };
+
+  try {
+    const upperHex = actorHex.toUpperCase();
+    const normalizedHex = normalizeActorKey(upperHex);
+    assert.equal(
+      normalizedHex,
+      actorHex,
+      "hex inputs should normalize to lowercase hex",
+    );
+    assert.equal(
+      decodeCalls.length,
+      0,
+      "hex inputs should not invoke nip19.decode",
+    );
+    assert.equal(
+      warnings.length,
+      0,
+      "hex inputs should not emit decode warnings",
+    );
+
+    const normalizedNpub = normalizeActorKey(actorNpub);
+    assert.equal(normalizedNpub, actorHex, "npub inputs should decode to hex");
+    assert.equal(
+      decodeCalls.length,
+      1,
+      "npub inputs should invoke nip19.decode",
+    );
+    assert.equal(
+      warnings.length,
+      0,
+      "successful npub decode should not emit warnings",
+    );
+  } finally {
+    console.warn = originalWarn;
+    if (previousNip19) {
+      window.NostrTools.nip19 = previousNip19;
+    } else if (window.NostrTools) {
+      delete window.NostrTools.nip19;
+    }
+  }
+}
+
+async function testNormalizeActorKeyManualFallback() {
+  console.log("Running normalizeActorKey manual fallback test...");
+
+  const actorHex =
+    "a4a6b5849bc917b3befd5c81865ee0b88773690609c207ba6588ef3e1e05b95b";
+  const actorNpub =
+    "npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx";
+
+  if (!window.NostrTools || typeof window.NostrTools !== "object") {
+    window.NostrTools = {};
+  }
+
+  const previousNip19 = window.NostrTools.nip19;
+  const originalWarn = console.warn;
+  const warnings = [];
+
+  delete window.NostrTools.nip19;
+  console.warn = (...args) => {
+    warnings.push(args);
+  };
+
+  try {
+    const normalized = normalizeActorKey(actorNpub);
+    assert.equal(
+      normalized,
+      actorHex,
+      "manual fallback should decode npub values to hex",
+    );
+    assert.equal(
+      warnings.length,
+      0,
+      "manual fallback decode should not emit warnings",
+    );
+  } finally {
+    console.warn = originalWarn;
+    if (previousNip19 !== undefined) {
+      window.NostrTools.nip19 = previousNip19;
+    } else {
+      delete window.NostrTools.nip19;
+    }
+  }
+}
+
+async function testFetchWatchHistoryExtensionDecryptsHexAndNpub() {
+  const actorHex = "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef";
+  const actorNpub =
+    "npub1testextensiondecryptqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq";
+  const snapshotId = "extension-fetch";
+  const chunkIdentifier = "chunk-extension";
+
+  const fallbackTag = ["e", "fallback-pointer"];
+  const fallbackItem = { type: "e", value: "fallback-pointer", watchedAt: 1_700_800_000 };
+  const chunkItem = { type: "e", value: "chunk-pointer", watchedAt: 1_700_800_100 };
+
+  const chunkPayload = JSON.stringify({
+    version: 1,
+    items: [chunkItem],
+    snapshot: snapshotId,
+    chunkIndex: 0,
+    totalChunks: 1,
+  });
+  const chunkCiphertext = `extension:${actorHex}:${Buffer.from(chunkPayload, "utf8").toString("base64")}`;
+
+  const pointerEvent = {
+    id: "pointer-extension",
+    kind: WATCH_HISTORY_KIND,
+    pubkey: actorHex,
+    created_at: 1_700_800_000,
+    content: JSON.stringify({
+      version: 1,
+      items: [fallbackItem],
+      snapshot: snapshotId,
+      chunkIndex: 0,
+      totalChunks: 1,
+    }),
+    tags: [
+      ["d", WATCH_HISTORY_LIST_IDENTIFIER],
+      ["snapshot", snapshotId],
+      ["encrypted", "nip04"],
+      ["a", `${WATCH_HISTORY_KIND}:${actorHex}:${chunkIdentifier}`],
+      fallbackTag,
+    ],
+  };
+
+  const chunkEvent = {
+    id: "chunk-extension",
+    kind: WATCH_HISTORY_KIND,
+    pubkey: actorHex,
+    created_at: 1_700_800_060,
+    content: chunkCiphertext,
+    tags: [
+      ["d", chunkIdentifier],
+      ["snapshot", snapshotId],
+      ["encrypted", "nip04"],
+    ],
+  };
+
+  if (!window.NostrTools || typeof window.NostrTools !== "object") {
+    window.NostrTools = {};
+  }
+  const previousNip19 = window.NostrTools.nip19;
+  const previousDecode =
+    previousNip19 && typeof previousNip19.decode === "function"
+      ? previousNip19.decode
+      : null;
+
+  window.NostrTools.nip19 = {
+    ...(previousNip19 || {}),
+    decode: (value) => {
+      if (value === actorNpub) {
+        return { type: "npub", data: actorHex };
+      }
+      if (typeof previousDecode === "function") {
+        return previousDecode(value);
+      }
+      throw new Error("unsupported-npub");
+    },
+  };
+
+  const originalEnsure = nostrClient.ensureSessionActor;
+  const originalSession = nostrClient.sessionActor;
+  const originalPub = nostrClient.pubkey;
+  const originalCache = nostrClient.watchHistoryCache;
+  const originalStorage = nostrClient.watchHistoryStorage;
+
+  nostrClient.watchHistoryCache = new Map();
+  nostrClient.watchHistoryStorage = { version: 2, actors: {} };
+
+  const publishEvents = async () => {
+    poolHarness.reset();
+    poolHarness.setResolver(() => ({ ok: true }));
+    poolHarness.publish(["wss://relay.test"], pointerEvent);
+    poolHarness.publish(["wss://relay.test"], chunkEvent);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  };
+
+  const runVariant = async (label, actorInput, pubkeyInput) => {
+    await publishEvents();
+
+    const sessionCrypto = installSessionCrypto({ privateKey: `session-${label}` });
+    const extensionCrypto = installExtensionCrypto({ actor: actorHex });
+
+    const previousEnsure = nostrClient.ensureSessionActor;
+    const previousSession = nostrClient.sessionActor;
+    const previousPub = nostrClient.pubkey;
+    const previousStorage = nostrClient.watchHistoryStorage;
+
+    try {
+      nostrClient.pubkey = pubkeyInput;
+      nostrClient.sessionActor = null;
+      nostrClient.ensureSessionActor = async () => {
+        throw new Error(`session fallback should not run for ${label}`);
+      };
+      nostrClient.watchHistoryCache.clear();
+      nostrClient.watchHistoryStorage = { version: 2, actors: {} };
+
+      const result = await nostrClient.fetchWatchHistory(actorInput, {
+        forceRefresh: true,
+      });
+
+      assert.equal(
+        extensionCrypto.getExtensionDecrypts(),
+        1,
+        `${label} actor should use extension decrypt`,
+      );
+      assert.equal(
+        sessionCrypto.getDecryptCalls(),
+        0,
+        `${label} actor should not trigger session decrypt fallback`,
+      );
+      const decryptCalls = extensionCrypto.getDecryptCalls();
+      assert.equal(
+        decryptCalls.length,
+        1,
+        `${label} actor should invoke extension decrypt exactly once`,
+      );
+      assert.equal(
+        decryptCalls[0]?.target,
+        actorHex,
+        `${label} actor should normalize npub inputs to hex for decrypt`,
+      );
+
+      assert.equal(result.items.length, 1, `${label} actor should return chunk item`);
+      assert.equal(
+        result.items[0]?.value,
+        chunkItem.value,
+        `${label} actor should surface decrypted pointer value`,
+      );
+    } finally {
+      extensionCrypto.restore();
+      sessionCrypto.restore();
+      nostrClient.ensureSessionActor = previousEnsure;
+      nostrClient.sessionActor = previousSession;
+      nostrClient.pubkey = previousPub;
+      nostrClient.watchHistoryStorage = previousStorage;
+      poolHarness.reset();
+    }
+  };
+
+  try {
+    await runVariant("hex", actorHex, actorHex);
+    await runVariant("npub", actorNpub, actorNpub);
+  } finally {
+    if (previousNip19) {
+      window.NostrTools.nip19 = previousNip19;
+    } else if (window.NostrTools) {
+      delete window.NostrTools.nip19;
+    }
+    nostrClient.ensureSessionActor = originalEnsure;
+    nostrClient.sessionActor = originalSession;
+    nostrClient.pubkey = originalPub;
+    nostrClient.watchHistoryCache = originalCache;
+    nostrClient.watchHistoryStorage = originalStorage;
+    poolHarness.reset();
+  }
+}
+
 async function testPublishSnapshotCanonicalizationAndChunking() {
   poolHarness.reset();
   poolHarness.setResolver(() => ({ ok: true }));
@@ -545,6 +905,11 @@ async function testPublishSnapshotUsesExtensionCrypto() {
       result.items.length,
       "decrypted payload should match canonical item count",
     );
+    assert.equal(
+      extension.getEnableCalls().length,
+      1,
+      "extension permissions should be requested once before encrypting",
+    );
   } finally {
     extension.restore();
     sessionRestore.restore();
@@ -554,6 +919,43 @@ async function testPublishSnapshotUsesExtensionCrypto() {
   }
 }
 
+async function testEnsureExtensionPermissionCaching() {
+  const actor = "permission-actor";
+  const extension = installExtensionCrypto({ actor });
+  const previousCache = nostrClient.extensionPermissionCache;
+  nostrClient.extensionPermissionCache = new Set();
+
+  try {
+    const first = await nostrClient.ensureExtensionPermissions([
+      "nip04.decrypt",
+    ]);
+    assert.equal(
+      first.ok,
+      true,
+      "ensureExtensionPermissions should resolve when extension is available",
+    );
+    assert.equal(
+      extension.getEnableCalls().length > 0,
+      true,
+      "ensureExtensionPermissions should invoke extension.enable to request access",
+    );
+
+    const callsAfterFirst = extension.getEnableCalls().length;
+    const second = await nostrClient.ensureExtensionPermissions([
+      "nip04.decrypt",
+    ]);
+    assert.equal(second.ok, true, "cached permission requests should still resolve");
+    assert.equal(
+      extension.getEnableCalls().length,
+      callsAfterFirst,
+      "cached permission requests should not trigger duplicate enable calls",
+    );
+  } finally {
+    extension.restore();
+    nostrClient.extensionPermissionCache = previousCache;
+  }
+}
+
 async function testPublishSnapshotFailureRetry() {
   poolHarness.reset();
   nostrClient.watchHistoryLastCreatedAt = 0;
@@ -845,10 +1247,22 @@ async function testResolveWatchHistoryBatchingWindow() {
       forceRefresh: true,
     });
 
+    const batchPageSizeRaw = Number(WATCH_HISTORY_BATCH_PAGE_SIZE);
+    const hasCustomBatchSize =
+      Boolean(WATCH_HISTORY_BATCH_RESOLVE) &&
+      Number.isFinite(batchPageSizeRaw) &&
+      batchPageSizeRaw > 0;
+    const expectedCount = hasCustomBatchSize
+      ? Math.min(
+          Math.floor(batchPageSizeRaw),
+          WATCH_HISTORY_MAX_ITEMS,
+          syntheticItems.length,
+        )
+      : Math.min(WATCH_HISTORY_MAX_ITEMS, syntheticItems.length);
     assert.equal(
       resolved.length,
-      Math.min(WATCH_HISTORY_MAX_ITEMS, syntheticItems.length),
-      "batched resolve should return the full window when no page size override is configured",
+      expectedCount,
+      "batched resolve should honor the configured page size when batching is enabled",
     );
     assert(resolved.length > 1, "resolved history should include multiple entries");
     assert.equal(
@@ -876,6 +1290,15 @@ async function testWatchHistoryServiceIntegration() {
   poolHarness.setResolver(() => ({ ok: true }));
 
   const actor = "service-actor";
+  const pointerVideo = {
+    id: "video-one",
+    title: "Video One",
+    url: "https://cdn.example/video-one.mp4",
+    magnet:
+      "magnet:?xt=urn:btih:89abcdef0123456789abcdef0123456789abcdef",
+    infoHash: "89abcdef0123456789abcdef0123456789abcdef",
+    legacyInfoHash: "89abcdef0123456789abcdef0123456789abcdef",
+  };
   const restoreCrypto = installSessionCrypto({ privateKey: "service-priv" });
   const originalEnsure = nostrClient.ensureSessionActor;
   const originalSession = nostrClient.sessionActor;
@@ -914,13 +1337,13 @@ async function testWatchHistoryServiceIntegration() {
     await watchHistoryService.publishView(
       { type: "e", value: "video-one" },
       viewCreatedAt,
-      { actor },
+      { actor, video: pointerVideo },
     );
     viewCreatedAt += 60;
     await watchHistoryService.publishView(
       { type: "e", value: "video-one" },
       viewCreatedAt,
-      { actor },
+      { actor, video: pointerVideo },
     );
     viewCreatedAt += 30;
     await watchHistoryService.publishView(
@@ -937,6 +1360,36 @@ async function testWatchHistoryServiceIntegration() {
       reason: "integration",
     });
     assert.ok(snapshotResult.ok, "snapshot should publish queued pointers");
+    const snapshotItems = Array.isArray(snapshotResult.items)
+      ? snapshotResult.items
+      : [];
+    const snapshotVideo = extractVideoMetadataFromItem(
+      snapshotItems.find(
+        (entry) =>
+          (entry?.value || entry?.pointer?.value || "") === "video-one",
+      ),
+    );
+    assert(snapshotVideo, "snapshot should retain pointer video metadata");
+    assert.equal(
+      snapshotVideo?.url,
+      pointerVideo.url,
+      "snapshot pointer video should preserve url",
+    );
+    assert.equal(
+      snapshotVideo?.magnet,
+      pointerVideo.magnet,
+      "snapshot pointer video should preserve magnet",
+    );
+    assert.equal(
+      snapshotVideo?.infoHash,
+      pointerVideo.infoHash,
+      "snapshot pointer video should preserve infoHash",
+    );
+    assert.equal(
+      snapshotVideo?.legacyInfoHash,
+      pointerVideo.legacyInfoHash,
+      "snapshot pointer video should preserve legacy info hash",
+    );
     assert.equal(
       watchHistoryService.getQueuedPointers(actor).length,
       0,
@@ -949,6 +1402,33 @@ async function testWatchHistoryServiceIntegration() {
       snapshotResult.items,
       "loadLatest should return decrypted canonical pointers",
     );
+    const resolvedVideo = extractVideoMetadataFromItem(
+      resolvedItems.find(
+        (entry) =>
+          (entry?.value || entry?.pointer?.value || "") === "video-one",
+      ),
+    );
+    assert(resolvedVideo, "decrypted history should include pointer video");
+    assert.equal(
+      resolvedVideo?.url,
+      pointerVideo.url,
+      "decrypted pointer video should expose url",
+    );
+    assert.equal(
+      resolvedVideo?.magnet,
+      pointerVideo.magnet,
+      "decrypted pointer video should expose magnet",
+    );
+    assert.equal(
+      resolvedVideo?.infoHash,
+      pointerVideo.infoHash,
+      "decrypted pointer video should expose infoHash",
+    );
+    assert.equal(
+      resolvedVideo?.legacyInfoHash,
+      pointerVideo.legacyInfoHash,
+      "decrypted pointer video should expose legacy info hash",
+    );
     assert(resolvedItems[0].watchedAt >= resolvedItems[1].watchedAt);
     assert.equal(
       resolvedItems[0].session,
@@ -983,6 +1463,305 @@ async function testWatchHistoryServiceIntegration() {
   }
 }
 
+async function testHistoryCardsUseDecryptedPlaybackMetadata() {
+  console.log("Running watch history card playback metadata test...");
+
+  const pointerVideo = {
+    id: "history-card",
+    title: "History Card Video",
+    url: "https://cdn.example/history-card.mp4",
+    magnet:
+      "magnet:?xt=urn:btih:0123456789abcdef0123456789abcdef01234567",
+    infoHash: "0123456789abcdef0123456789abcdef01234567",
+    legacyInfoHash: "0123456789abcdef0123456789abcdef01234567",
+  };
+
+  const item = {
+    pointerKey: "e:history-card",
+    pointer: { type: "e", value: "history-card" },
+    watchedAt: 1_700_000_500,
+  };
+
+  const originalDocument = globalThis.document;
+  const originalHTMLElement = globalThis.HTMLElement;
+
+  class FakeClassList {
+    constructor(element) {
+      this.element = element;
+    }
+
+    _sync() {
+      this.element._className = Array.from(this.element._classSet).join(" ");
+    }
+
+    add(...tokens) {
+      tokens.forEach((token) => {
+        if (token) {
+          this.element._classSet.add(token);
+        }
+      });
+      this._sync();
+    }
+
+    remove(...tokens) {
+      tokens.forEach((token) => this.element._classSet.delete(token));
+      this._sync();
+    }
+
+    toggle(token, force) {
+      if (!token) {
+        return false;
+      }
+      if (force === true) {
+        this.element._classSet.add(token);
+        this._sync();
+        return true;
+      }
+      if (force === false) {
+        this.element._classSet.delete(token);
+        this._sync();
+        return false;
+      }
+      if (this.element._classSet.has(token)) {
+        this.element._classSet.delete(token);
+        this._sync();
+        return false;
+      }
+      this.element._classSet.add(token);
+      this._sync();
+      return true;
+    }
+
+    contains(token) {
+      return this.element._classSet.has(token);
+    }
+  }
+
+  class FakeElement {
+    constructor(tagName) {
+      this.tagName = typeof tagName === "string" ? tagName.toUpperCase() : "";
+      this.children = [];
+      this.parentNode = null;
+      this.dataset = {};
+      this.attributes = {};
+      this.textContent = "";
+      this._classSet = new Set();
+      this._className = "";
+      this.classList = new FakeClassList(this);
+    }
+
+    appendChild(child) {
+      if (child && typeof child === "object") {
+        child.parentNode = this;
+      }
+      this.children.push(child);
+      return child;
+    }
+
+    get className() {
+      return this._className;
+    }
+
+    set className(value) {
+      const tokens =
+        typeof value === "string"
+          ? value
+              .split(/\s+/)
+              .map((token) => token.trim())
+              .filter(Boolean)
+          : [];
+      this._classSet = new Set(tokens);
+      this._className = tokens.join(" ");
+    }
+
+    setAttribute(name, value) {
+      this.attributes[name] = String(value);
+    }
+
+    removeAttribute(name) {
+      delete this.attributes[name];
+    }
+  }
+
+  function collectElements(root, predicate, results = []) {
+    if (!(root instanceof FakeElement)) {
+      return results;
+    }
+    if (predicate(root)) {
+      results.push(root);
+    }
+    for (const child of root.children) {
+      collectElements(child, predicate, results);
+    }
+    return results;
+  }
+
+  const fakeDocument = {
+    createElement(tagName) {
+      return new FakeElement(tagName);
+    },
+  };
+
+  globalThis.document = fakeDocument;
+  globalThis.HTMLElement = FakeElement;
+
+  try {
+    const card = buildHistoryCard({
+      item,
+      video: pointerVideo,
+      profile: null,
+      metadataPreference: "encrypted-only",
+    });
+
+    assert(card instanceof FakeElement);
+    assert.equal(card.dataset.pointerKey, item.pointerKey);
+
+    const playLinks = collectElements(
+      card,
+      (element) =>
+        element.tagName === "A" &&
+        element.dataset.historyAction === "play",
+    );
+
+    assert(playLinks.length >= 1, "card should expose play actions");
+    assert.equal(
+      playLinks[0].dataset.playUrl,
+      encodeURIComponent(pointerVideo.url),
+      "play action should encode url from metadata",
+    );
+    assert.equal(
+      playLinks[0].dataset.playMagnet,
+      pointerVideo.magnet,
+      "play action should surface magnet from metadata",
+    );
+  } finally {
+    globalThis.document = originalDocument;
+    globalThis.HTMLElement = originalHTMLElement;
+  }
+}
+
+async function testWatchHistoryStaleCacheRefresh() {
+  console.log("Running watch history stale cache refresh test...");
+
+  const actor = "stale-cache-actor";
+  const originalResolve = nostrClient.resolveWatchHistory;
+  const originalFingerprint = nostrClient.getWatchHistoryFingerprint;
+  const originalDateNow = Date.now;
+
+  try {
+    watchHistoryService.resetProgress(actor);
+
+    nostrClient.getWatchHistoryFingerprint = async (_actor, items) => {
+      const values = (Array.isArray(items) ? items : []).map((entry) => {
+        if (!entry) {
+          return "";
+        }
+        if (typeof entry.value === "string") {
+          return entry.value;
+        }
+        if (
+          entry.pointer &&
+          typeof entry.pointer.value === "string"
+        ) {
+          return entry.pointer.value;
+        }
+        return "";
+      });
+      return `fingerprint:${values.join("|")}`;
+    };
+
+    const firstItems = [
+      { type: "e", value: "watch-history-old", watchedAt: 1_700_000_000 },
+    ];
+
+    let resolveCallCount = 0;
+    nostrClient.resolveWatchHistory = async (requestedActor) => {
+      resolveCallCount += 1;
+      assert.equal(
+        requestedActor,
+        actor,
+        "initial load should request the expected actor",
+      );
+      return firstItems;
+    };
+
+    await watchHistoryService.loadLatest(actor, { allowStale: false });
+
+    const baseNow = originalDateNow();
+    Date.now = () => baseNow + WATCH_HISTORY_CACHE_TTL_MS + 1;
+
+    const refreshedItems = [
+      { type: "e", value: "watch-history-new", watchedAt: 1_700_000_600 },
+    ];
+
+    let refreshResolve;
+    const refreshGate = new Promise((resolve) => {
+      refreshResolve = resolve;
+    });
+
+    resolveCallCount = 0;
+    nostrClient.resolveWatchHistory = async (requestedActor) => {
+      resolveCallCount += 1;
+      assert.equal(
+        requestedActor,
+        actor,
+        "refresh should continue targeting the same actor",
+      );
+      await refreshGate;
+      return refreshedItems;
+    };
+
+    const staleResult = await watchHistoryService.loadLatest(actor, {
+      allowStale: true,
+    });
+    assert.equal(
+      resolveCallCount,
+      1,
+      "stale load should trigger a single background refresh",
+    );
+    assert.equal(
+      staleResult.length,
+      firstItems.length,
+      "stale load should return cached entries immediately",
+    );
+    const staleValue =
+      staleResult[0]?.value || staleResult[0]?.pointer?.value || "";
+    assert.equal(
+      staleValue,
+      "watch-history-old",
+      "stale load should surface the cached pointer value",
+    );
+
+    refreshResolve();
+    await refreshGate;
+    await Promise.resolve();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    nostrClient.resolveWatchHistory = async () => {
+      throw new Error("loadLatest should rely on refreshed cache");
+    };
+
+    const freshResult = await watchHistoryService.loadLatest(actor);
+    assert.equal(
+      freshResult.length,
+      refreshedItems.length,
+      "fresh load should surface refreshed watch history entries",
+    );
+    const freshValue =
+      freshResult[0]?.value || freshResult[0]?.pointer?.value || "";
+    assert.equal(
+      freshValue,
+      "watch-history-new",
+      "fresh load should include the updated pointer",
+    );
+  } finally {
+    Date.now = originalDateNow;
+    nostrClient.resolveWatchHistory = originalResolve;
+    nostrClient.getWatchHistoryFingerprint = originalFingerprint;
+    watchHistoryService.resetProgress(actor);
+  }
+}
+
 async function testWatchHistoryLocalFallbackWhenDisabled() {
   console.log("Running watch history local fallback test...");
 
@@ -1154,7 +1933,7 @@ async function testWatchHistoryAppLoginFallback() {
   const actor = "f".repeat(64);
   const originalPub = nostrClient.pubkey;
   const originalSession = nostrClient.sessionActor;
-  const originalApp = typeof window.app === "undefined" ? undefined : window.app;
+  const originalApp = getApplication();
 
   try {
     setWatchHistoryV2Enabled(false);
@@ -1162,7 +1941,7 @@ async function testWatchHistoryAppLoginFallback() {
     watchHistoryService.resetProgress();
     nostrClient.pubkey = "";
     nostrClient.sessionActor = null;
-    window.app = {
+    setApplication({
       pubkey: actor,
       normalizeHexPubkey(value) {
         if (typeof value === "string" && value.trim()) {
@@ -1170,7 +1949,7 @@ async function testWatchHistoryAppLoginFallback() {
         }
         return null;
       },
-    };
+    });
 
     const enabled =
       typeof watchHistoryService.isEnabled === "function"
@@ -1186,23 +1965,25 @@ async function testWatchHistoryAppLoginFallback() {
     watchHistoryService.resetProgress();
     nostrClient.pubkey = originalPub;
     nostrClient.sessionActor = originalSession;
-    if (typeof originalApp === "undefined") {
-      delete window.app;
-    } else {
-      window.app = originalApp;
-    }
+    setApplication(originalApp || null);
   }
 }
 
 await testPublishSnapshotCanonicalizationAndChunking();
 await testPublishSnapshotUsesExtensionCrypto();
+await testEnsureExtensionPermissionCaching();
+await testFetchWatchHistoryExtensionDecryptsHexAndNpub();
 await testPublishSnapshotFailureRetry();
 await testWatchHistoryPartialRelayRetry();
 await testResolveWatchHistoryBatchingWindow();
 await testWatchHistoryServiceIntegration();
+await testHistoryCardsUseDecryptedPlaybackMetadata();
+await testWatchHistoryStaleCacheRefresh();
 await testWatchHistoryLocalFallbackWhenDisabled();
 await testWatchHistorySyncEnabledForLoggedInUsers();
 await testWatchHistoryAppLoginFallback();
+await testNormalizeActorKeyShortCircuit();
+await testNormalizeActorKeyManualFallback();
 
 console.log("watch-history.test.mjs completed successfully");
 
@@ -1225,6 +2006,14 @@ nostrClient.resolveWatchHistory = originalResolveWatchHistory;
 nostrClient.getWatchHistoryFingerprint =
   originalGetWatchHistoryFingerprint;
 
+if (originalExtensionPermissionCache instanceof Set) {
+  originalExtensionPermissionCache.clear();
+  for (const method of originalExtensionPermissionSnapshot) {
+    originalExtensionPermissionCache.add(method);
+  }
+}
+nostrClient.extensionPermissionCache = originalExtensionPermissionCache;
+
 if (!originalFlag) {
   setWatchHistoryV2Enabled(false);
 }
diff --git a/tests/watchHistory/watch-history-telemetry.test.mjs b/tests/watchHistory/watch-history-telemetry.test.mjs
new file mode 100644
index 00000000..41ca738e
--- /dev/null
+++ b/tests/watchHistory/watch-history-telemetry.test.mjs
@@ -0,0 +1,260 @@
+import "../test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+
+import WatchHistoryTelemetry from "../../js/services/watchHistoryTelemetry.js";
+
+const hexPubkey = "abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789";
+
+function createTelemetry({
+  serviceOverrides = {},
+  controllerOverrides = {},
+  options = {},
+} = {}) {
+  const watchHistoryService = {
+    isEnabled: () => true,
+    getSettings: () => ({ metadata: { storeLocally: true } }),
+    setLocalMetadata: () => {},
+    removeLocalMetadata: () => {},
+    clearLocalMetadata: () => {},
+    publishView: async () => ({ ok: true }),
+    subscribe: () => () => {},
+    ...serviceOverrides,
+  };
+
+  const watchHistoryController = {
+    handleWatchHistoryRemoval: async () => ({}),
+    flush: async () => {},
+    ...controllerOverrides,
+  };
+
+  const telemetry = new WatchHistoryTelemetry({
+    watchHistoryService,
+    watchHistoryController,
+    nostrClient: options.nostrClient || { pubkey: hexPubkey },
+    log: options.log || (() => {}),
+    normalizeHexPubkey:
+      options.normalizeHexPubkey || ((value) => (typeof value === "string" ? value.toLowerCase() : null)),
+    getActiveUserPubkey: options.getActiveUserPubkey || (() => hexPubkey),
+    ingestLocalViewEvent: options.ingestLocalViewEvent || (() => {}),
+    viewThresholdSeconds: options.viewThresholdSeconds,
+  });
+
+  return { telemetry, watchHistoryService, watchHistoryController };
+}
+
+class FakeVideoElement {
+  constructor() {
+    this.listeners = new Map();
+    this.paused = true;
+    this.currentTime = 0;
+  }
+
+  addEventListener(eventName, handler) {
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, new Set());
+    }
+    this.listeners.get(eventName).add(handler);
+  }
+
+  removeEventListener(eventName, handler) {
+    const set = this.listeners.get(eventName);
+    if (!set) {
+      return;
+    }
+    set.delete(handler);
+    if (set.size === 0) {
+      this.listeners.delete(eventName);
+    }
+  }
+
+  emit(eventName) {
+    const set = this.listeners.get(eventName);
+    if (!set) {
+      return;
+    }
+    for (const handler of set) {
+      handler({ type: eventName });
+    }
+  }
+}
+
+async function flushAsyncOperations() {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+async function testMetadataPreferenceSync() {
+  let subscribeTopic = null;
+  let subscribeHandler = null;
+  let cleared = false;
+
+  const { telemetry } = createTelemetry({
+    serviceOverrides: {
+      subscribe: (topic, handler) => {
+        subscribeTopic = topic;
+        subscribeHandler = handler;
+        return () => {};
+      },
+      clearLocalMetadata: () => {
+        cleared = true;
+      },
+      getSettings: () => ({ metadata: { storeLocally: true } }),
+    },
+    options: {
+      getActiveUserPubkey: () => null,
+    },
+  });
+
+  const unsubscribe = await telemetry.initPreferenceSync();
+  assert.equal(subscribeTopic, "metadata-preference");
+  assert.equal(typeof unsubscribe, "function");
+  assert.equal(telemetry.isMetadataPreferenceEnabled(), true);
+
+  subscribeHandler({ enabled: false });
+  assert.equal(telemetry.isMetadataPreferenceEnabled(), false);
+  assert.equal(cleared, true);
+
+  subscribeHandler({ enabled: true });
+  assert.equal(telemetry.isMetadataPreferenceEnabled(), true);
+
+}
+
+async function testPreparePlaybackLoggingPublishesOnce() {
+  const ingestEvents = [];
+  const publishCalls = [];
+
+  const pointer = { type: "e", value: "event-id" };
+  const pointerKey = "event-id::relay";
+
+  const { telemetry } = createTelemetry({
+    serviceOverrides: {
+      publishView: async (ptr, _relay, metadata) => {
+        publishCalls.push({ ptr, metadata });
+        return {
+          ok: true,
+          event: { pubkey: hexPubkey },
+        };
+      },
+    },
+    options: {
+      ingestLocalViewEvent: (payload) => ingestEvents.push(payload),
+    },
+  });
+
+  const videoA = new FakeVideoElement();
+  videoA.paused = false;
+  videoA.currentTime = telemetry.viewThresholdSeconds;
+
+  telemetry.preparePlaybackLogging({
+    videoElement: videoA,
+    pointer,
+    pointerKey,
+  });
+  await flushAsyncOperations();
+
+  assert.equal(publishCalls.length, 1, "publishView should be called once");
+  assert.equal(ingestEvents.length, 1, "ingestLocalViewEvent should run once");
+  assert.deepEqual(publishCalls[0].ptr, pointer);
+  assert.deepEqual(ingestEvents[0].pointer, pointer);
+
+  const videoB = new FakeVideoElement();
+  videoB.paused = false;
+  videoB.currentTime = telemetry.viewThresholdSeconds;
+
+  telemetry.preparePlaybackLogging({
+    videoElement: videoB,
+    pointer,
+    pointerKey,
+  });
+  await flushAsyncOperations();
+
+  assert.equal(
+    publishCalls.length,
+    1,
+    "Repeated preparePlaybackLogging should reuse cooldown cache"
+  );
+}
+
+async function testPreparePlaybackLoggingIncludesVideoMetadata() {
+  const publishCalls = [];
+
+  const pointer = { type: "e", value: "event-id" };
+  const pointerKey = "event-id";
+
+  const { telemetry } = createTelemetry({
+    serviceOverrides: {
+      publishView: async (ptr, _relay, metadata) => {
+        publishCalls.push({ ptr, metadata });
+        return {
+          ok: true,
+          event: { pubkey: hexPubkey },
+        };
+      },
+    },
+  });
+
+  const videoElement = new FakeVideoElement();
+  videoElement.paused = false;
+  videoElement.currentTime = telemetry.viewThresholdSeconds;
+
+  const videoMetadata = {
+    id: "evt1",
+    title: "Example Video",
+    thumbnail: "https://example.com/thumb.jpg",
+    pubkey: hexPubkey,
+    rootCreatedAt: 1_700_000_000,
+    url: "https://example.com/video.mp4",
+  };
+
+  telemetry.preparePlaybackLogging({
+    videoElement,
+    pointer,
+    pointerKey,
+    video: videoMetadata,
+  });
+
+  await flushAsyncOperations();
+
+  assert.equal(publishCalls.length, 1, "publishView should be invoked once");
+  assert.equal(publishCalls[0].ptr, pointer);
+  assert.ok(publishCalls[0].metadata, "metadata payload should exist");
+  assert.deepEqual(publishCalls[0].metadata.video, {
+    id: "evt1",
+    title: "Example Video",
+    thumbnail: "https://example.com/thumb.jpg",
+    pubkey: hexPubkey,
+    created_at: 1_700_000_000,
+  });
+}
+
+async function testCancelPlaybackLoggingFlushes() {
+  let flushArgs = null;
+  const video = new FakeVideoElement();
+  const { telemetry } = createTelemetry({
+    controllerOverrides: {
+      flush: async (reason, context) => {
+        flushArgs = { reason, context };
+      },
+    },
+  });
+
+  video.paused = true;
+  video.currentTime = 0;
+
+  telemetry.preparePlaybackLogging({
+    videoElement: video,
+    pointer: { type: "e", value: "event" },
+    pointerKey: "event",
+  });
+
+  telemetry.cancelPlaybackLogging({ reason: "unit", context: "test" });
+  await flushAsyncOperations();
+
+  assert.deepEqual(flushArgs, { reason: "unit", context: "test" });
+}
+
+await testMetadataPreferenceSync();
+await testPreparePlaybackLoggingPublishesOnce();
+await testPreparePlaybackLoggingIncludesVideoMetadata();
+await testCancelPlaybackLoggingFlushes();
+
+console.log("watch-history-telemetry tests passed");
diff --git a/tests/zap-shared-state.test.mjs b/tests/zap-shared-state.test.mjs
new file mode 100644
index 00000000..f3f11e98
--- /dev/null
+++ b/tests/zap-shared-state.test.mjs
@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+
+const sharedStateModule = await import("../js/payments/zapSharedState.js");
+const feeModule = await import("../js/payments/platformFee.js");
+
+const { calculateZapShares } = sharedStateModule;
+const { resolvePlatformFeePercent } = feeModule;
+
+(function testCalculateZapSharesSupportsRatioOverride() {
+  const result = calculateZapShares(35, "70/30");
+  assert.equal(result.total, 35);
+  assert.equal(result.platformShare, 10);
+  assert.equal(result.creatorShare, 25);
+  assert.equal(result.feePercent, 30);
+})();
+
+(function testCalculateZapSharesHandlesPercentStrings() {
+  const result = calculateZapShares(200, "30% ");
+  assert.equal(result.platformShare, 60);
+  assert.equal(result.creatorShare, 140);
+  assert.equal(result.feePercent, 30);
+})();
+
+(function testResolvePlatformFeePercentFallsBackToDefault() {
+  const percent = resolvePlatformFeePercent("not-a-number");
+  assert.equal(percent, 0);
+})();
+
+console.log("zap-shared-state tests passed");
diff --git a/tests/zap-split.test.mjs b/tests/zap-split.test.mjs
new file mode 100644
index 00000000..b3e2ba34
--- /dev/null
+++ b/tests/zap-split.test.mjs
@@ -0,0 +1,414 @@
+import assert from "node:assert/strict";
+
+if (typeof globalThis.window === "undefined") {
+  globalThis.window = {};
+}
+
+if (typeof globalThis.localStorage === "undefined") {
+  const storage = new Map();
+  globalThis.localStorage = {
+    getItem(key) {
+      return storage.has(key) ? storage.get(key) : null;
+    },
+    setItem(key, value) {
+      storage.set(String(key), String(value));
+    },
+    removeItem(key) {
+      storage.delete(String(key));
+    },
+    clear() {
+      storage.clear();
+    },
+  };
+}
+
+if (typeof window.localStorage === "undefined") {
+  window.localStorage = globalThis.localStorage;
+}
+
+const nostrToolsStub = {
+  getEventHash(event) {
+    const base = JSON.stringify(event);
+    let hash = 0;
+    for (let i = 0; i < base.length; i += 1) {
+      hash = (hash * 33 + base.charCodeAt(i)) % 0xffffffff;
+    }
+    return hash.toString(16).padStart(8, "0");
+  },
+  signEvent(event, secret) {
+    return `sig-${(secret || "").slice(0, 8)}-${event.kind}`;
+  },
+  nip19: {
+    decode(value) {
+      if (typeof value !== "string") {
+        throw new Error("Invalid nip19 input");
+      }
+      if (value.startsWith("npub")) {
+        return { type: "npub", data: "f".repeat(64) };
+      }
+      return null;
+    },
+  },
+  SimplePool: class {
+    async list() {
+      return [];
+    }
+    sub() {
+      return {
+        on() {},
+        unsub() {},
+      };
+    }
+    async get() {
+      return null;
+    }
+    async ensureRelay() {
+      return { close() {}, url: "" };
+    }
+  },
+};
+
+window.NostrTools = nostrToolsStub;
+globalThis.NostrTools = nostrToolsStub;
+
+globalThis.fetch = async () => {
+  throw new Error("Unexpected fetch call during zap split tests.");
+};
+
+const { splitAndZap } = await import("../js/payments/zapSplit.js");
+const platformAddressModule = await import("../js/payments/platformAddress.js");
+const { __resetPlatformAddressCache } = platformAddressModule;
+const { nostrClient } = await import("../js/nostr.js");
+
+function createDeps({
+  commentAllowed = 120,
+  platformAddress = "platform@example.com",
+  minSendable = 1000,
+  maxSendable = 2_000_000,
+  allowsNostr = true,
+} = {}) {
+  let ensureWalletCalls = 0;
+  const sendCalls = [];
+
+  return {
+    deps: {
+      lnurl: {
+        resolveLightningAddress(address) {
+          return {
+            type: address.includes("platform") ? "platform" : "creator",
+            url: `https://lnurl.test/${address}`,
+            address,
+          };
+        },
+        async fetchPayServiceData(url) {
+          const isPlatform = url.includes("platform");
+          return {
+            callback: `${url}/callback`,
+            minSendable,
+            maxSendable,
+            commentAllowed,
+            allowsNostr,
+            nostrPubkey: isPlatform ? "b".repeat(64) : "a".repeat(64),
+            raw: {},
+          };
+        },
+        validateInvoiceAmount(metadata, amount) {
+          if (amount * 1000 < metadata.minSendable) {
+            throw new Error("below-minimum");
+          }
+          if (amount * 1000 > metadata.maxSendable) {
+            throw new Error("above-maximum");
+          }
+          return { amountMsats: amount * 1000 };
+        },
+        async requestInvoice(metadata, { amountMsats, comment, zapRequest }) {
+          return {
+            invoice: `bolt11-${metadata.callback}-${amountMsats}-${comment}-${Boolean(
+              zapRequest
+            )}`,
+            raw: {},
+          };
+        },
+      },
+      wallet: {
+        async ensureWallet() {
+          ensureWalletCalls += 1;
+          return {
+            clientPubkey: "c".repeat(64),
+            secretKey: "1".repeat(64),
+          };
+        },
+        async sendPayment(invoice, { amountSats, zapRequest }) {
+          sendCalls.push({ invoice, amountSats, zapRequest });
+          return {
+            invoice,
+            amountSats,
+            zapRequest,
+          };
+        },
+      },
+      platformAddress: {
+        async getPlatformLightningAddress() {
+          return platformAddress;
+        },
+      },
+    },
+    getEnsureWalletCalls() {
+      return ensureWalletCalls;
+    },
+    getSendCalls() {
+      return sendCalls;
+    },
+  };
+}
+
+async function testSplitMath() {
+  globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = 10;
+  const { deps, getSendCalls, getEnsureWalletCalls } = createDeps();
+
+  const videoEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "creator@example.com",
+    tags: [["d", "pointer"]],
+    kind: 30078,
+  };
+
+  const result = await splitAndZap(
+    { videoEvent, amountSats: 1000, comment: "Great video!" },
+    deps
+  );
+
+  assert.equal(result.totalAmount, 1000);
+  assert.equal(result.creatorShare, 900);
+  assert.equal(result.platformShare, 100);
+  assert.equal(result.receipts.length, 2);
+  assert.equal(getEnsureWalletCalls(), 1);
+
+  const sendCalls = getSendCalls();
+  assert.equal(sendCalls.length, 2, "should send two payments");
+  assert.equal(sendCalls[0].amountSats, 900);
+  assert.equal(sendCalls[1].amountSats, 100);
+
+  const creatorReceipt = result.receipts[0];
+  assert.equal(creatorReceipt.recipientType, "creator");
+  assert(creatorReceipt.zapRequest, "creator zap request should be present");
+  const parsedZap = JSON.parse(creatorReceipt.zapRequest);
+  assert.equal(parsedZap.kind, 9734);
+  assert(parsedZap.tags.some((tag) => tag[0] === "amount" && tag[1] === "900000"));
+
+  delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+}
+
+async function testWaitsForPoolBeforePlatformLookup() {
+  const previousOverride = globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+  globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = 10;
+
+  __resetPlatformAddressCache();
+
+  const originalEnsurePool = nostrClient.ensurePool;
+  const originalPool = nostrClient.pool;
+  const originalPoolPromise = nostrClient.poolPromise;
+
+  nostrClient.pool = null;
+  nostrClient.poolPromise = null;
+
+  let poolReady = false;
+  let listCalls = 0;
+  let ensureCalls = 0;
+
+  const poolStub = {
+    async list(relays, filters) {
+      assert(poolReady, "should wait for ensurePool to resolve before listing metadata");
+      listCalls += 1;
+      return [
+        {
+          pubkey: "f".repeat(64),
+          content: JSON.stringify({ lud16: "platform@example.com" }),
+          created_at: Math.floor(Date.now() / 1000),
+        },
+      ];
+    },
+  };
+
+  nostrClient.ensurePool = () => {
+    ensureCalls += 1;
+    if (nostrClient.poolPromise) {
+      return nostrClient.poolPromise;
+    }
+    const promise = new Promise((resolve) => {
+      setTimeout(() => {
+        poolReady = true;
+        nostrClient.pool = poolStub;
+        nostrClient.poolPromise = Promise.resolve(poolStub);
+        resolve(poolStub);
+      }, 10);
+    });
+    nostrClient.poolPromise = promise;
+    return promise;
+  };
+
+  const { deps: baseDeps } = createDeps();
+  const deps = {
+    lnurl: baseDeps.lnurl,
+    wallet: baseDeps.wallet,
+    platformAddress: platformAddressModule,
+  };
+
+  const videoEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "creator@example.com",
+    tags: [["d", "pointer"]],
+    kind: 30078,
+  };
+
+  try {
+    const result = await splitAndZap(
+      { videoEvent, amountSats: 1000, comment: "Delayed pool" },
+      deps
+    );
+
+    assert.equal(ensureCalls, 1, "should initialize the pool once");
+    assert.equal(listCalls, 1, "should fetch platform metadata once the pool is ready");
+    assert.equal(result.platformShare, 100);
+    assert.equal(result.receipts.length, 2);
+  } finally {
+    nostrClient.ensurePool = originalEnsurePool;
+    nostrClient.pool = originalPool;
+    nostrClient.poolPromise = originalPoolPromise;
+    __resetPlatformAddressCache();
+
+    if (previousOverride === undefined) {
+      delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+    } else {
+      globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = previousOverride;
+    }
+  }
+}
+
+async function testStringFeeOverride() {
+  const videoEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "creator@example.com",
+    tags: [["d", "pointer"]],
+    kind: 30078,
+  };
+
+  globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = "70/30";
+  const seventyThirty = createDeps();
+  const ratioResult = await splitAndZap(
+    { videoEvent, amountSats: 1000, comment: "Great video!" },
+    seventyThirty.deps
+  );
+
+  assert.equal(ratioResult.creatorShare, 700);
+  assert.equal(ratioResult.platformShare, 300);
+  const ratioSendCalls = seventyThirty.getSendCalls();
+  assert.equal(ratioSendCalls.length, 2, "should send two payments for ratio");
+  assert.equal(ratioSendCalls[0].amountSats, 700);
+  assert.equal(ratioSendCalls[1].amountSats, 300);
+
+  globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = "30%";
+  const percentOverride = createDeps();
+  const percentResult = await splitAndZap(
+    { videoEvent, amountSats: 200, comment: "Another zap" },
+    percentOverride.deps
+  );
+
+  assert.equal(percentResult.creatorShare, 140);
+  assert.equal(percentResult.platformShare, 60);
+
+  delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+}
+
+async function testLnurlBounds() {
+  globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = 0;
+  const depsWrapper = createDeps({ minSendable: 5_000 });
+
+  const videoEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "creator@example.com",
+    kind: 30078,
+    tags: [],
+  };
+
+  await assert.rejects(
+    () => splitAndZap({ videoEvent, amountSats: 4 }, depsWrapper.deps),
+    /below-minimum/
+  );
+
+  delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+}
+
+async function testMissingAddress() {
+  globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__ = 15;
+  const depsWrapper = createDeps({ platformAddress: null });
+
+  const noCreatorEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "",
+    kind: 30078,
+    tags: [],
+  };
+
+  await assert.rejects(
+    () => splitAndZap({ videoEvent: noCreatorEvent, amountSats: 100 }, depsWrapper.deps),
+    /Lightning address/
+  );
+
+  const creatorEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "creator@example.com",
+    kind: 30078,
+    tags: [],
+  };
+
+  await assert.rejects(
+    () => splitAndZap({ videoEvent: creatorEvent, amountSats: 100 }, depsWrapper.deps),
+    /Platform Lightning address is unavailable/
+  );
+
+  delete globalThis.__BITVID_PLATFORM_FEE_OVERRIDE__;
+}
+
+async function testWalletFailure() {
+  const deps = {
+    lnurl: createDeps().deps.lnurl,
+    wallet: {
+      async ensureWallet() {
+        throw new Error("wallet offline");
+      },
+      async sendPayment() {
+        throw new Error("should not call sendPayment");
+      },
+    },
+    platformAddress: createDeps().deps.platformAddress,
+  };
+
+  const videoEvent = {
+    id: "event-id",
+    pubkey: "c".repeat(64),
+    lightningAddress: "creator@example.com",
+    kind: 30078,
+    tags: [],
+  };
+
+  await assert.rejects(
+    () => splitAndZap({ videoEvent, amountSats: 100 }, deps),
+    /wallet offline/
+  );
+}
+
+await testSplitMath();
+await testWaitsForPoolBeforePlatformLookup();
+await testLnurlBounds();
+await testMissingAddress();
+await testWalletFailure();
+await testStringFeeOverride();
+
+console.log("zap-split tests passed");
diff --git a/vendor/nostr-tools.LICENSE b/vendor/nostr-tools.LICENSE
new file mode 100644
index 00000000..3c577b03
--- /dev/null
+++ b/vendor/nostr-tools.LICENSE
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>
\ No newline at end of file
diff --git a/vendor/nostr-tools.bundle.min.js b/vendor/nostr-tools.bundle.min.js
new file mode 100644
index 00000000..346a2699
--- /dev/null
+++ b/vendor/nostr-tools.bundle.min.js
@@ -0,0 +1,8 @@
+/**
+ * Minified by jsDelivr using Terser v5.37.0.
+ * Original file: /npm/nostr-tools@2.10.4/lib/nostr.bundle.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+"use strict";var NostrTools=(()=>{var t=Object.defineProperty,e=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyNames,r=Object.prototype.hasOwnProperty,o=(e,n)=>{for(var r in n)t(e,r,{get:n[r],enumerable:!0})},i={};function s(t){if(!Number.isSafeInteger(t)||t<0)throw new Error(`Wrong positive integer: ${t}`)}function a(t,...e){if(!(t instanceof Uint8Array))throw new Error("Expected Uint8Array");if(e.length>0&&!e.includes(t.length))throw new Error(`Expected Uint8Array of length ${e}, not of length=${t.length}`)}function c(t,e=!0){if(t.destroyed)throw new Error("Hash instance has been destroyed");if(e&&t.finished)throw new Error("Hash#digest() has already been called")}o(i,{Relay:()=>Pr,SimplePool:()=>qr,finalizeEvent:()=>qe,fj:()=>xr,generateSecretKey:()=>Pe,getEventHash:()=>$e,getFilterLimit:()=>vr,getPublicKey:()=>Ce,kinds:()=>je,matchFilter:()=>br,matchFilters:()=>mr,mergeFilters:()=>Er,nip04:()=>Ro,nip05:()=>Oi,nip10:()=>Ci,nip11:()=>Mi,nip13:()=>Di,nip18:()=>Wi,nip19:()=>Mr,nip21:()=>Yi,nip25:()=>es,nip27:()=>os,nip28:()=>cs,nip30:()=>ps,nip39:()=>Es,nip42:()=>Lr,nip44:()=>As,nip47:()=>oa,nip57:()=>ca,nip59:()=>pa,nip98:()=>Ua,parseReferences:()=>Oo,serializeEvent:()=>Ne,sortEvents:()=>de,utils:()=>Se,validateEvent:()=>fe,verifiedSymbol:()=>le,verifyEvent:()=>Me});var u="object"==typeof globalThis&&"crypto"in globalThis?globalThis.crypto:void 0,l=t=>t instanceof Uint8Array,h=t=>new DataView(t.buffer,t.byteOffset,t.byteLength),f=(t,e)=>t<<32-e|t>>>e;if(!(68===new Uint8Array(new Uint32Array([287454020]).buffer)[0]))throw new Error("Non little-endian hardware is not supported");function d(t){if("string"==typeof t&&(t=function(t){if("string"!=typeof t)throw new Error("utf8ToBytes expected string, got "+typeof t);return new Uint8Array((new TextEncoder).encode(t))}(t)),!l(t))throw new Error("expected Uint8Array, got "+typeof t);return t}var p=class{clone(){return this._cloneInto()}};function g(t){const e=e=>t().update(d(e)).digest(),n=t();return e.outputLen=n.outputLen,e.blockLen=n.blockLen,e.create=()=>t(),e}function y(t=32){if(u&&"function"==typeof u.getRandomValues)return u.getRandomValues(new Uint8Array(t));throw new Error("crypto.getRandomValues must be defined")}var w=class extends p{constructor(t,e,n,r){super(),this.blockLen=t,this.outputLen=e,this.padOffset=n,this.isLE=r,this.finished=!1,this.length=0,this.pos=0,this.destroyed=!1,this.buffer=new Uint8Array(t),this.view=h(this.buffer)}update(t){c(this);const{view:e,buffer:n,blockLen:r}=this,o=(t=d(t)).length;for(let i=0;i<o;){const s=Math.min(r-this.pos,o-i);if(s!==r)n.set(t.subarray(i,i+s),this.pos),this.pos+=s,i+=s,this.pos===r&&(this.process(e,0),this.pos=0);else{const e=h(t);for(;r<=o-i;i+=r)this.process(e,i)}}return this.length+=t.length,this.roundClean(),this}digestInto(t){c(this),function(t,e){a(t);const n=e.outputLen;if(t.length<n)throw new Error(`digestInto() expects output buffer of length at least ${n}`)}(t,this),this.finished=!0;const{buffer:e,view:n,blockLen:r,isLE:o}=this;let{pos:i}=this;e[i++]=128,this.buffer.subarray(i).fill(0),this.padOffset>r-i&&(this.process(n,0),i=0);for(let t=i;t<r;t++)e[t]=0;!function(t,e,n,r){if("function"==typeof t.setBigUint64)return t.setBigUint64(e,n,r);const o=BigInt(32),i=BigInt(4294967295),s=Number(n>>o&i),a=Number(n&i),c=r?4:0,u=r?0:4;t.setUint32(e+c,s,r),t.setUint32(e+u,a,r)}(n,r-8,BigInt(8*this.length),o),this.process(n,0);const s=h(t),u=this.outputLen;if(u%4)throw new Error("_sha2: outputLen should be aligned to 32bit");const l=u/4,f=this.get();if(l>f.length)throw new Error("_sha2: outputLen bigger than state");for(let t=0;t<l;t++)s.setUint32(4*t,f[t],o)}digest(){const{buffer:t,outputLen:e}=this;this.digestInto(t);const n=t.slice(0,e);return this.destroy(),n}_cloneInto(t){t||(t=new this.constructor),t.set(...this.get());const{blockLen:e,buffer:n,length:r,finished:o,destroyed:i,pos:s}=this;return t.length=r,t.pos=s,t.finished=o,t.destroyed=i,r%e&&t.buffer.set(n),t}},b=(t,e,n)=>t&e^t&n^e&n,m=new Uint32Array([1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298]),E=new Uint32Array([1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225]),v=new Uint32Array(64),x=class extends w{constructor(){super(64,32,8,!1),this.A=0|E[0],this.B=0|E[1],this.C=0|E[2],this.D=0|E[3],this.E=0|E[4],this.F=0|E[5],this.G=0|E[6],this.H=0|E[7]}get(){const{A:t,B:e,C:n,D:r,E:o,F:i,G:s,H:a}=this;return[t,e,n,r,o,i,s,a]}set(t,e,n,r,o,i,s,a){this.A=0|t,this.B=0|e,this.C=0|n,this.D=0|r,this.E=0|o,this.F=0|i,this.G=0|s,this.H=0|a}process(t,e){for(let n=0;n<16;n++,e+=4)v[n]=t.getUint32(e,!1);for(let t=16;t<64;t++){const e=v[t-15],n=v[t-2],r=f(e,7)^f(e,18)^e>>>3,o=f(n,17)^f(n,19)^n>>>10;v[t]=o+v[t-7]+r+v[t-16]|0}let{A:n,B:r,C:o,D:i,E:s,F:a,G:c,H:u}=this;for(let t=0;t<64;t++){const e=u+(f(s,6)^f(s,11)^f(s,25))+((l=s)&a^~l&c)+m[t]+v[t]|0,h=(f(n,2)^f(n,13)^f(n,22))+b(n,r,o)|0;u=c,c=a,a=s,s=i+e|0,i=o,o=r,r=n,n=e+h|0}var l;n=n+this.A|0,r=r+this.B|0,o=o+this.C|0,i=i+this.D|0,s=s+this.E|0,a=a+this.F|0,c=c+this.G|0,u=u+this.H|0,this.set(n,r,o,i,s,a,c,u)}roundClean(){v.fill(0)}destroy(){this.set(0,0,0,0,0,0,0,0),this.buffer.fill(0)}},A=g((()=>new x)),k={};o(k,{bitGet:()=>F,bitLen:()=>D,bitMask:()=>V,bitSet:()=>K,bytesToHex:()=>O,bytesToNumberBE:()=>N,bytesToNumberLE:()=>$,concatBytes:()=>M,createHmacDrbg:()=>G,ensureBytes:()=>q,equalBytes:()=>j,hexToBytes:()=>_,hexToNumber:()=>T,numberToBytesBE:()=>H,numberToBytesLE:()=>P,numberToHexUnpadded:()=>R,numberToVarBytesBE:()=>C,utf8ToBytes:()=>z,validateObject:()=>Y});var S=BigInt(0),B=BigInt(1),U=BigInt(2),I=t=>t instanceof Uint8Array,L=Array.from({length:256},((t,e)=>e.toString(16).padStart(2,"0")));function O(t){if(!I(t))throw new Error("Uint8Array expected");let e="";for(let n=0;n<t.length;n++)e+=L[t[n]];return e}function R(t){const e=t.toString(16);return 1&e.length?`0${e}`:e}function T(t){if("string"!=typeof t)throw new Error("hex string expected, got "+typeof t);return BigInt(""===t?"0":`0x${t}`)}function _(t){if("string"!=typeof t)throw new Error("hex string expected, got "+typeof t);const e=t.length;if(e%2)throw new Error("padded hex string expected, got unpadded hex of length "+e);const n=new Uint8Array(e/2);for(let e=0;e<n.length;e++){const r=2*e,o=t.slice(r,r+2),i=Number.parseInt(o,16);if(Number.isNaN(i)||i<0)throw new Error("Invalid byte sequence");n[e]=i}return n}function N(t){return T(O(t))}function $(t){if(!I(t))throw new Error("Uint8Array expected");return T(O(Uint8Array.from(t).reverse()))}function H(t,e){return _(t.toString(16).padStart(2*e,"0"))}function P(t,e){return H(t,e).reverse()}function C(t){return _(R(t))}function q(t,e,n){let r;if("string"==typeof e)try{r=_(e)}catch(n){throw new Error(`${t} must be valid hex string, got "${e}". Cause: ${n}`)}else{if(!I(e))throw new Error(`${t} must be hex string or Uint8Array`);r=Uint8Array.from(e)}const o=r.length;if("number"==typeof n&&o!==n)throw new Error(`${t} expected ${n} bytes, got ${o}`);return r}function M(...t){const e=new Uint8Array(t.reduce(((t,e)=>t+e.length),0));let n=0;return t.forEach((t=>{if(!I(t))throw new Error("Uint8Array expected");e.set(t,n),n+=t.length})),e}function j(t,e){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}function z(t){if("string"!=typeof t)throw new Error("utf8ToBytes expected string, got "+typeof t);return new Uint8Array((new TextEncoder).encode(t))}function D(t){let e;for(e=0;t>S;t>>=B,e+=1);return e}function F(t,e){return t>>BigInt(e)&B}var K=(t,e,n)=>t|(n?B:S)<<BigInt(e),V=t=>(U<<BigInt(t-1))-B,W=t=>new Uint8Array(t),Z=t=>Uint8Array.from(t);function G(t,e,n){if("number"!=typeof t||t<2)throw new Error("hashLen must be a number");if("number"!=typeof e||e<2)throw new Error("qByteLen must be a number");if("function"!=typeof n)throw new Error("hmacFn must be a function");let r=W(t),o=W(t),i=0;const s=()=>{r.fill(1),o.fill(0),i=0},a=(...t)=>n(o,r,...t),c=(t=W())=>{o=a(Z([0]),t),r=a(),0!==t.length&&(o=a(Z([1]),t),r=a())},u=()=>{if(i++>=1e3)throw new Error("drbg: tried 1000 values");let t=0;const n=[];for(;t<e;){r=a();const e=r.slice();n.push(e),t+=r.length}return M(...n)};return(t,e)=>{let n;for(s(),c(t);!(n=e(u()));)c();return s(),n}}var J={bigint:t=>"bigint"==typeof t,function:t=>"function"==typeof t,boolean:t=>"boolean"==typeof t,string:t=>"string"==typeof t,stringOrUint8Array:t=>"string"==typeof t||t instanceof Uint8Array,isSafeInteger:t=>Number.isSafeInteger(t),array:t=>Array.isArray(t),field:(t,e)=>e.Fp.isValid(t),hash:t=>"function"==typeof t&&Number.isSafeInteger(t.outputLen)};function Y(t,e,n={}){const r=(e,n,r)=>{const o=J[n];if("function"!=typeof o)throw new Error(`Invalid validator "${n}", expected function`);const i=t[e];if(!(r&&void 0===i||o(i,t)))throw new Error(`Invalid param ${String(e)}=${i} (${typeof i}), expected ${n}`)};for(const[t,n]of Object.entries(e))r(t,n,!1);for(const[t,e]of Object.entries(n))r(t,e,!0);return t}var Q=BigInt(0),X=BigInt(1),tt=BigInt(2),et=BigInt(3),nt=BigInt(4),rt=BigInt(5),ot=BigInt(8);BigInt(9),BigInt(16);function it(t,e){const n=t%e;return n>=Q?n:e+n}function st(t,e,n){if(n<=Q||e<Q)throw new Error("Expected power/modulo > 0");if(n===X)return Q;let r=X;for(;e>Q;)e&X&&(r=r*t%n),t=t*t%n,e>>=X;return r}function at(t,e,n){let r=t;for(;e-- >Q;)r*=r,r%=n;return r}function ct(t,e){if(t===Q||e<=Q)throw new Error(`invert: expected positive integers, got n=${t} mod=${e}`);let n=it(t,e),r=e,o=Q,i=X,s=X,a=Q;for(;n!==Q;){const t=r/n,e=r%n,c=o-s*t,u=i-a*t;r=n,n=e,o=s,i=a,s=c,a=u}if(r!==X)throw new Error("invert: does not exist");return it(o,e)}function ut(t){if(t%nt===et){const e=(t+X)/nt;return function(t,n){const r=t.pow(n,e);if(!t.eql(t.sqr(r),n))throw new Error("Cannot find square root");return r}}if(t%ot===rt){const e=(t-rt)/ot;return function(t,n){const r=t.mul(n,tt),o=t.pow(r,e),i=t.mul(n,o),s=t.mul(t.mul(i,tt),o),a=t.mul(i,t.sub(s,t.ONE));if(!t.eql(t.sqr(a),n))throw new Error("Cannot find square root");return a}}return function(t){const e=(t-X)/tt;let n,r,o;for(n=t-X,r=0;n%tt===Q;n/=tt,r++);for(o=tt;o<t&&st(o,e,t)!==t-X;o++);if(1===r){const e=(t+X)/nt;return function(t,n){const r=t.pow(n,e);if(!t.eql(t.sqr(r),n))throw new Error("Cannot find square root");return r}}const i=(n+X)/tt;return function(t,s){if(t.pow(s,e)===t.neg(t.ONE))throw new Error("Cannot find square root");let a=r,c=t.pow(t.mul(t.ONE,o),n),u=t.pow(s,i),l=t.pow(s,n);for(;!t.eql(l,t.ONE);){if(t.eql(l,t.ZERO))return t.ZERO;let e=1;for(let n=t.sqr(l);e<a&&!t.eql(n,t.ONE);e++)n=t.sqr(n);const n=t.pow(c,X<<BigInt(a-e-1));c=t.sqr(n),u=t.mul(u,n),l=t.mul(l,c),a=e}return u}}(t)}var lt=["create","isValid","is0","neg","inv","sqrt","sqr","eql","add","sub","mul","pow","div","addN","subN","mulN","sqrN"];function ht(t,e){const n=void 0!==e?e:t.toString(2).length;return{nBitLength:n,nByteLength:Math.ceil(n/8)}}function ft(t){if("bigint"!=typeof t)throw new Error("field order must be bigint");const e=t.toString(2).length;return Math.ceil(e/8)}function dt(t){const e=ft(t);return e+Math.ceil(e/2)}var pt=BigInt(0),gt=BigInt(1);function yt(t){return Y(t.Fp,lt.reduce(((t,e)=>(t[e]="function",t)),{ORDER:"bigint",MASK:"bigint",BYTES:"isSafeInteger",BITS:"isSafeInteger"})),Y(t,{n:"bigint",h:"bigint",Gx:"field",Gy:"field"},{nBitLength:"isSafeInteger",nByteLength:"isSafeInteger"}),Object.freeze({...ht(t.n,t.nBitLength),...t,p:t.Fp.ORDER})}var{bytesToNumberBE:wt,hexToBytes:bt}=k,mt={Err:class extends Error{constructor(t=""){super(t)}},_parseInt(t){const{Err:e}=mt;if(t.length<2||2!==t[0])throw new e("Invalid signature integer tag");const n=t[1],r=t.subarray(2,n+2);if(!n||r.length!==n)throw new e("Invalid signature integer: wrong length");if(128&r[0])throw new e("Invalid signature integer: negative");if(0===r[0]&&!(128&r[1]))throw new e("Invalid signature integer: unnecessary leading zero");return{d:wt(r),l:t.subarray(n+2)}},toSig(t){const{Err:e}=mt,n="string"==typeof t?bt(t):t;if(!(n instanceof Uint8Array))throw new Error("ui8a expected");let r=n.length;if(r<2||48!=n[0])throw new e("Invalid signature tag");if(n[1]!==r-2)throw new e("Invalid signature: incorrect length");const{d:o,l:i}=mt._parseInt(n.subarray(2)),{d:s,l:a}=mt._parseInt(i);if(a.length)throw new e("Invalid signature: left bytes after parsing");return{r:o,s:s}},hexFromSig(t){const e=t=>8&Number.parseInt(t[0],16)?"00"+t:t,n=t=>{const e=t.toString(16);return 1&e.length?`0${e}`:e},r=e(n(t.s)),o=e(n(t.r)),i=r.length/2,s=o.length/2,a=n(i),c=n(s);return`30${n(s+i+4)}02${c}${o}02${a}${r}`}},Et=BigInt(0),vt=BigInt(1),xt=(BigInt(2),BigInt(3));BigInt(4);function At(t){const e=function(t){const e=yt(t);Y(e,{a:"field",b:"field"},{allowedPrivateKeyLengths:"array",wrapPrivateKey:"boolean",isTorsionFree:"function",clearCofactor:"function",allowInfinityPoint:"boolean",fromBytes:"function",toBytes:"function"});const{endo:n,Fp:r,a:o}=e;if(n){if(!r.eql(o,r.ZERO))throw new Error("Endomorphism can only be defined for Koblitz curves that have a=0");if("object"!=typeof n||"bigint"!=typeof n.beta||"function"!=typeof n.splitScalar)throw new Error("Expected endomorphism with beta: bigint and splitScalar: function")}return Object.freeze({...e})}(t),{Fp:n}=e,r=e.toBytes||((t,e,r)=>{const o=e.toAffine();return M(Uint8Array.from([4]),n.toBytes(o.x),n.toBytes(o.y))}),o=e.fromBytes||(t=>{const e=t.subarray(1);return{x:n.fromBytes(e.subarray(0,n.BYTES)),y:n.fromBytes(e.subarray(n.BYTES,2*n.BYTES))}});function i(t){const{a:r,b:o}=e,i=n.sqr(t),s=n.mul(i,t);return n.add(n.add(s,n.mul(t,r)),o)}if(!n.eql(n.sqr(e.Gy),i(e.Gx)))throw new Error("bad generator point: equation left != right");function s(t){return"bigint"==typeof t&&Et<t&&t<e.n}function a(t){if(!s(t))throw new Error("Expected valid bigint: 0 < bigint < curve.n")}function c(t){const{allowedPrivateKeyLengths:n,nByteLength:r,wrapPrivateKey:o,n:i}=e;if(n&&"bigint"!=typeof t){if(t instanceof Uint8Array&&(t=O(t)),"string"!=typeof t||!n.includes(t.length))throw new Error("Invalid key");t=t.padStart(2*r,"0")}let s;try{s="bigint"==typeof t?t:N(q("private key",t,r))}catch(e){throw new Error(`private key must be ${r} bytes, hex or bigint, not ${typeof t}`)}return o&&(s=it(s,i)),a(s),s}const u=new Map;function l(t){if(!(t instanceof h))throw new Error("ProjectivePoint expected")}class h{constructor(t,e,r){if(this.px=t,this.py=e,this.pz=r,null==t||!n.isValid(t))throw new Error("x required");if(null==e||!n.isValid(e))throw new Error("y required");if(null==r||!n.isValid(r))throw new Error("z required")}static fromAffine(t){const{x:e,y:r}=t||{};if(!t||!n.isValid(e)||!n.isValid(r))throw new Error("invalid affine point");if(t instanceof h)throw new Error("projective point not allowed");const o=t=>n.eql(t,n.ZERO);return o(e)&&o(r)?h.ZERO:new h(e,r,n.ONE)}get x(){return this.toAffine().x}get y(){return this.toAffine().y}static normalizeZ(t){const e=n.invertBatch(t.map((t=>t.pz)));return t.map(((t,n)=>t.toAffine(e[n]))).map(h.fromAffine)}static fromHex(t){const e=h.fromAffine(o(q("pointHex",t)));return e.assertValidity(),e}static fromPrivateKey(t){return h.BASE.multiply(c(t))}_setWindowSize(t){this._WINDOW_SIZE=t,u.delete(this)}assertValidity(){if(this.is0()){if(e.allowInfinityPoint&&!n.is0(this.py))return;throw new Error("bad point: ZERO")}const{x:t,y:r}=this.toAffine();if(!n.isValid(t)||!n.isValid(r))throw new Error("bad point: x or y not FE");const o=n.sqr(r),s=i(t);if(!n.eql(o,s))throw new Error("bad point: equation left != right");if(!this.isTorsionFree())throw new Error("bad point: not in prime-order subgroup")}hasEvenY(){const{y:t}=this.toAffine();if(n.isOdd)return!n.isOdd(t);throw new Error("Field doesn't support isOdd")}equals(t){l(t);const{px:e,py:r,pz:o}=this,{px:i,py:s,pz:a}=t,c=n.eql(n.mul(e,a),n.mul(i,o)),u=n.eql(n.mul(r,a),n.mul(s,o));return c&&u}negate(){return new h(this.px,n.neg(this.py),this.pz)}double(){const{a:t,b:r}=e,o=n.mul(r,xt),{px:i,py:s,pz:a}=this;let c=n.ZERO,u=n.ZERO,l=n.ZERO,f=n.mul(i,i),d=n.mul(s,s),p=n.mul(a,a),g=n.mul(i,s);return g=n.add(g,g),l=n.mul(i,a),l=n.add(l,l),c=n.mul(t,l),u=n.mul(o,p),u=n.add(c,u),c=n.sub(d,u),u=n.add(d,u),u=n.mul(c,u),c=n.mul(g,c),l=n.mul(o,l),p=n.mul(t,p),g=n.sub(f,p),g=n.mul(t,g),g=n.add(g,l),l=n.add(f,f),f=n.add(l,f),f=n.add(f,p),f=n.mul(f,g),u=n.add(u,f),p=n.mul(s,a),p=n.add(p,p),f=n.mul(p,g),c=n.sub(c,f),l=n.mul(p,d),l=n.add(l,l),l=n.add(l,l),new h(c,u,l)}add(t){l(t);const{px:r,py:o,pz:i}=this,{px:s,py:a,pz:c}=t;let u=n.ZERO,f=n.ZERO,d=n.ZERO;const p=e.a,g=n.mul(e.b,xt);let y=n.mul(r,s),w=n.mul(o,a),b=n.mul(i,c),m=n.add(r,o),E=n.add(s,a);m=n.mul(m,E),E=n.add(y,w),m=n.sub(m,E),E=n.add(r,i);let v=n.add(s,c);return E=n.mul(E,v),v=n.add(y,b),E=n.sub(E,v),v=n.add(o,i),u=n.add(a,c),v=n.mul(v,u),u=n.add(w,b),v=n.sub(v,u),d=n.mul(p,E),u=n.mul(g,b),d=n.add(u,d),u=n.sub(w,d),d=n.add(w,d),f=n.mul(u,d),w=n.add(y,y),w=n.add(w,y),b=n.mul(p,b),E=n.mul(g,E),w=n.add(w,b),b=n.sub(y,b),b=n.mul(p,b),E=n.add(E,b),y=n.mul(w,E),f=n.add(f,y),y=n.mul(v,E),u=n.mul(m,u),u=n.sub(u,y),y=n.mul(m,w),d=n.mul(v,d),d=n.add(d,y),new h(u,f,d)}subtract(t){return this.add(t.negate())}is0(){return this.equals(h.ZERO)}wNAF(t){return d.wNAFCached(this,u,t,(t=>{const e=n.invertBatch(t.map((t=>t.pz)));return t.map(((t,n)=>t.toAffine(e[n]))).map(h.fromAffine)}))}multiplyUnsafe(t){const r=h.ZERO;if(t===Et)return r;if(a(t),t===vt)return this;const{endo:o}=e;if(!o)return d.unsafeLadder(this,t);let{k1neg:i,k1:s,k2neg:c,k2:u}=o.splitScalar(t),l=r,f=r,p=this;for(;s>Et||u>Et;)s&vt&&(l=l.add(p)),u&vt&&(f=f.add(p)),p=p.double(),s>>=vt,u>>=vt;return i&&(l=l.negate()),c&&(f=f.negate()),f=new h(n.mul(f.px,o.beta),f.py,f.pz),l.add(f)}multiply(t){a(t);let r,o,i=t;const{endo:s}=e;if(s){const{k1neg:t,k1:e,k2neg:a,k2:c}=s.splitScalar(i);let{p:u,f:l}=this.wNAF(e),{p:f,f:p}=this.wNAF(c);u=d.constTimeNegate(t,u),f=d.constTimeNegate(a,f),f=new h(n.mul(f.px,s.beta),f.py,f.pz),r=u.add(f),o=l.add(p)}else{const{p:t,f:e}=this.wNAF(i);r=t,o=e}return h.normalizeZ([r,o])[0]}multiplyAndAddUnsafe(t,e,n){const r=h.BASE,o=(t,e)=>e!==Et&&e!==vt&&t.equals(r)?t.multiply(e):t.multiplyUnsafe(e),i=o(this,e).add(o(t,n));return i.is0()?void 0:i}toAffine(t){const{px:e,py:r,pz:o}=this,i=this.is0();null==t&&(t=i?n.ONE:n.inv(o));const s=n.mul(e,t),a=n.mul(r,t),c=n.mul(o,t);if(i)return{x:n.ZERO,y:n.ZERO};if(!n.eql(c,n.ONE))throw new Error("invZ was invalid");return{x:s,y:a}}isTorsionFree(){const{h:t,isTorsionFree:n}=e;if(t===vt)return!0;if(n)return n(h,this);throw new Error("isTorsionFree() has not been declared for the elliptic curve")}clearCofactor(){const{h:t,clearCofactor:n}=e;return t===vt?this:n?n(h,this):this.multiplyUnsafe(e.h)}toRawBytes(t=!0){return this.assertValidity(),r(h,this,t)}toHex(t=!0){return O(this.toRawBytes(t))}}h.BASE=new h(e.Gx,e.Gy,n.ONE),h.ZERO=new h(n.ZERO,n.ONE,n.ZERO);const f=e.nBitLength,d=function(t,e){const n=(t,e)=>{const n=e.negate();return t?n:e},r=t=>({windows:Math.ceil(e/t)+1,windowSize:2**(t-1)});return{constTimeNegate:n,unsafeLadder(e,n){let r=t.ZERO,o=e;for(;n>pt;)n&gt&&(r=r.add(o)),o=o.double(),n>>=gt;return r},precomputeWindow(t,e){const{windows:n,windowSize:o}=r(e),i=[];let s=t,a=s;for(let t=0;t<n;t++){a=s,i.push(a);for(let t=1;t<o;t++)a=a.add(s),i.push(a);s=a.double()}return i},wNAF(e,o,i){const{windows:s,windowSize:a}=r(e);let c=t.ZERO,u=t.BASE;const l=BigInt(2**e-1),h=2**e,f=BigInt(e);for(let t=0;t<s;t++){const e=t*a;let r=Number(i&l);i>>=f,r>a&&(r-=h,i+=gt);const s=e,d=e+Math.abs(r)-1,p=t%2!=0,g=r<0;0===r?u=u.add(n(p,o[s])):c=c.add(n(g,o[d]))}return{p:c,f:u}},wNAFCached(t,e,n,r){const o=t._WINDOW_SIZE||1;let i=e.get(t);return i||(i=this.precomputeWindow(t,o),1!==o&&e.set(t,r(i))),this.wNAF(o,i,n)}}}(h,e.endo?Math.ceil(f/2):f);return{CURVE:e,ProjectivePoint:h,normPrivateKeyToScalar:c,weierstrassEquation:i,isWithinCurveOrder:s}}function kt(t){const e=function(t){const e=yt(t);return Y(e,{hash:"hash",hmac:"function",randomBytes:"function"},{bits2int:"function",bits2int_modN:"function",lowS:"boolean"}),Object.freeze({lowS:!0,...e})}(t),{Fp:n,n:r}=e,o=n.BYTES+1,i=2*n.BYTES+1;function s(t){return it(t,r)}function a(t){return ct(t,r)}const{ProjectivePoint:c,normPrivateKeyToScalar:u,weierstrassEquation:l,isWithinCurveOrder:h}=At({...e,toBytes(t,e,r){const o=e.toAffine(),i=n.toBytes(o.x),s=M;return r?s(Uint8Array.from([e.hasEvenY()?2:3]),i):s(Uint8Array.from([4]),i,n.toBytes(o.y))},fromBytes(t){const e=t.length,r=t[0],s=t.subarray(1);if(e!==o||2!==r&&3!==r){if(e===i&&4===r){return{x:n.fromBytes(s.subarray(0,n.BYTES)),y:n.fromBytes(s.subarray(n.BYTES,2*n.BYTES))}}throw new Error(`Point of length ${e} was invalid. Expected ${o} compressed bytes or ${i} uncompressed bytes`)}{const t=N(s);if(!(Et<(a=t)&&a<n.ORDER))throw new Error("Point is not on curve");const e=l(t);let o=n.sqrt(e);return!(1&~r)!==((o&vt)===vt)&&(o=n.neg(o)),{x:t,y:o}}var a}}),f=t=>O(H(t,e.nByteLength));function d(t){return t>r>>vt}const p=(t,e,n)=>N(t.slice(e,n));class g{constructor(t,e,n){this.r=t,this.s=e,this.recovery=n,this.assertValidity()}static fromCompact(t){const n=e.nByteLength;return t=q("compactSignature",t,2*n),new g(p(t,0,n),p(t,n,2*n))}static fromDER(t){const{r:e,s:n}=mt.toSig(q("DER",t));return new g(e,n)}assertValidity(){if(!h(this.r))throw new Error("r must be 0 < r < CURVE.n");if(!h(this.s))throw new Error("s must be 0 < s < CURVE.n")}addRecoveryBit(t){return new g(this.r,this.s,t)}recoverPublicKey(t){const{r:r,s:o,recovery:i}=this,u=m(q("msgHash",t));if(null==i||![0,1,2,3].includes(i))throw new Error("recovery id invalid");const l=2===i||3===i?r+e.n:r;if(l>=n.ORDER)throw new Error("recovery id 2 or 3 invalid");const h=1&i?"03":"02",d=c.fromHex(h+f(l)),p=a(l),g=s(-u*p),y=s(o*p),w=c.BASE.multiplyAndAddUnsafe(d,g,y);if(!w)throw new Error("point at infinify");return w.assertValidity(),w}hasHighS(){return d(this.s)}normalizeS(){return this.hasHighS()?new g(this.r,s(-this.s),this.recovery):this}toDERRawBytes(){return _(this.toDERHex())}toDERHex(){return mt.hexFromSig({r:this.r,s:this.s})}toCompactRawBytes(){return _(this.toCompactHex())}toCompactHex(){return f(this.r)+f(this.s)}}const y={isValidPrivateKey(t){try{return u(t),!0}catch(t){return!1}},normPrivateKeyToScalar:u,randomPrivateKey:()=>{const t=dt(e.n);return function(t,e,n=!1){const r=t.length,o=ft(e),i=dt(e);if(r<16||r<i||r>1024)throw new Error(`expected ${i}-1024 bytes of input, got ${r}`);const s=it(n?N(t):$(t),e-X)+X;return n?P(s,o):H(s,o)}(e.randomBytes(t),e.n)},precompute:(t=8,e=c.BASE)=>(e._setWindowSize(t),e.multiply(BigInt(3)),e)};function w(t){const e=t instanceof Uint8Array,n="string"==typeof t,r=(e||n)&&t.length;return e?r===o||r===i:n?r===2*o||r===2*i:t instanceof c}const b=e.bits2int||function(t){const n=N(t),r=8*t.length-e.nBitLength;return r>0?n>>BigInt(r):n},m=e.bits2int_modN||function(t){return s(b(t))},E=V(e.nBitLength);function v(t){if("bigint"!=typeof t)throw new Error("bigint expected");if(!(Et<=t&&t<E))throw new Error(`bigint expected < 2^${e.nBitLength}`);return H(t,e.nByteLength)}function x(t,r,o=A){if(["recovered","canonical"].some((t=>t in o)))throw new Error("sign() legacy options not supported");const{hash:i,randomBytes:l}=e;let{lowS:f,prehash:p,extraEntropy:y}=o;null==f&&(f=!0),t=q("msgHash",t),p&&(t=q("prehashed msgHash",i(t)));const w=m(t),E=u(r),x=[v(E),v(w)];if(null!=y){const t=!0===y?l(n.BYTES):y;x.push(q("extraEntropy",t))}const k=M(...x),S=w;return{seed:k,k2sig:function(t){const e=b(t);if(!h(e))return;const n=a(e),r=c.BASE.multiply(e).toAffine(),o=s(r.x);if(o===Et)return;const i=s(n*s(S+o*E));if(i===Et)return;let u=(r.x===o?0:2)|Number(r.y&vt),l=i;return f&&d(i)&&(l=function(t){return d(t)?s(-t):t}(i),u^=1),new g(o,l,u)}}}const A={lowS:e.lowS,prehash:!1},k={lowS:e.lowS,prehash:!1};return c.BASE._setWindowSize(8),{CURVE:e,getPublicKey:function(t,e=!0){return c.fromPrivateKey(t).toRawBytes(e)},getSharedSecret:function(t,e,n=!0){if(w(t))throw new Error("first arg must be private key");if(!w(e))throw new Error("second arg must be public key");return c.fromHex(e).multiply(u(t)).toRawBytes(n)},sign:function(t,n,r=A){const{seed:o,k2sig:i}=x(t,n,r),s=e;return G(s.hash.outputLen,s.nByteLength,s.hmac)(o,i)},verify:function(t,n,r,o=k){const i=t;if(n=q("msgHash",n),r=q("publicKey",r),"strict"in o)throw new Error("options.strict was renamed to lowS");const{lowS:u,prehash:l}=o;let h,f;try{if("string"==typeof i||i instanceof Uint8Array)try{h=g.fromDER(i)}catch(t){if(!(t instanceof mt.Err))throw t;h=g.fromCompact(i)}else{if("object"!=typeof i||"bigint"!=typeof i.r||"bigint"!=typeof i.s)throw new Error("PARSE");{const{r:t,s:e}=i;h=new g(t,e)}}f=c.fromHex(r)}catch(t){if("PARSE"===t.message)throw new Error("signature must be Signature instance, Uint8Array or hex string");return!1}if(u&&h.hasHighS())return!1;l&&(n=e.hash(n));const{r:d,s:p}=h,y=m(n),w=a(p),b=s(y*w),E=s(d*w),v=c.BASE.multiplyAndAddUnsafe(f,b,E)?.toAffine();return!!v&&s(v.x)===d},ProjectivePoint:c,Signature:g,utils:y}}var St=class extends p{constructor(t,e){super(),this.finished=!1,this.destroyed=!1,function(t){if("function"!=typeof t||"function"!=typeof t.create)throw new Error("Hash should be wrapped by utils.wrapConstructor");s(t.outputLen),s(t.blockLen)}(t);const n=d(e);if(this.iHash=t.create(),"function"!=typeof this.iHash.update)throw new Error("Expected instance of class which extends utils.Hash");this.blockLen=this.iHash.blockLen,this.outputLen=this.iHash.outputLen;const r=this.blockLen,o=new Uint8Array(r);o.set(n.length>r?t.create().update(n).digest():n);for(let t=0;t<o.length;t++)o[t]^=54;this.iHash.update(o),this.oHash=t.create();for(let t=0;t<o.length;t++)o[t]^=106;this.oHash.update(o),o.fill(0)}update(t){return c(this),this.iHash.update(t),this}digestInto(t){c(this),a(t,this.outputLen),this.finished=!0,this.iHash.digestInto(t),this.oHash.update(t),this.oHash.digestInto(t),this.destroy()}digest(){const t=new Uint8Array(this.oHash.outputLen);return this.digestInto(t),t}_cloneInto(t){t||(t=Object.create(Object.getPrototypeOf(this),{}));const{oHash:e,iHash:n,finished:r,destroyed:o,blockLen:i,outputLen:s}=this;return t.finished=r,t.destroyed=o,t.blockLen=i,t.outputLen=s,t.oHash=e._cloneInto(t.oHash),t.iHash=n._cloneInto(t.iHash),t}destroy(){this.destroyed=!0,this.oHash.destroy(),this.iHash.destroy()}},Bt=(t,e,n)=>new St(t,e).update(n).digest();function Ut(t){return{hash:t,hmac:(e,...n)=>Bt(t,e,function(...t){const e=new Uint8Array(t.reduce(((t,e)=>t+e.length),0));let n=0;return t.forEach((t=>{if(!l(t))throw new Error("Uint8Array expected");e.set(t,n),n+=t.length})),e}(...n)),randomBytes:y}}Bt.create=(t,e)=>new St(t,e);var It=BigInt("0xfffffffffffffffffffffffffffffffffffffffffffffffffffffffefffffc2f"),Lt=BigInt("0xfffffffffffffffffffffffffffffffebaaedce6af48a03bbfd25e8cd0364141"),Ot=BigInt(1),Rt=BigInt(2),Tt=(t,e)=>(t+e/Rt)/e;function _t(t){const e=It,n=BigInt(3),r=BigInt(6),o=BigInt(11),i=BigInt(22),s=BigInt(23),a=BigInt(44),c=BigInt(88),u=t*t*t%e,l=u*u*t%e,h=at(l,n,e)*l%e,f=at(h,n,e)*l%e,d=at(f,Rt,e)*u%e,p=at(d,o,e)*d%e,g=at(p,i,e)*p%e,y=at(g,a,e)*g%e,w=at(y,c,e)*y%e,b=at(w,a,e)*g%e,m=at(b,n,e)*l%e,E=at(m,s,e)*p%e,v=at(E,r,e)*u%e,x=at(v,Rt,e);if(!Nt.eql(Nt.sqr(x),t))throw new Error("Cannot find square root");return x}var Nt=function(t,e,n=!1,r={}){if(t<=Q)throw new Error(`Expected Field ORDER > 0, got ${t}`);const{nBitLength:o,nByteLength:i}=ht(t,e);if(i>2048)throw new Error("Field lengths over 2048 bytes are not supported");const s=ut(t),a=Object.freeze({ORDER:t,BITS:o,BYTES:i,MASK:V(o),ZERO:Q,ONE:X,create:e=>it(e,t),isValid:e=>{if("bigint"!=typeof e)throw new Error("Invalid field element: expected bigint, got "+typeof e);return Q<=e&&e<t},is0:t=>t===Q,isOdd:t=>(t&X)===X,neg:e=>it(-e,t),eql:(t,e)=>t===e,sqr:e=>it(e*e,t),add:(e,n)=>it(e+n,t),sub:(e,n)=>it(e-n,t),mul:(e,n)=>it(e*n,t),pow:(t,e)=>function(t,e,n){if(n<Q)throw new Error("Expected power > 0");if(n===Q)return t.ONE;if(n===X)return e;let r=t.ONE,o=e;for(;n>Q;)n&X&&(r=t.mul(r,o)),o=t.sqr(o),n>>=X;return r}(a,t,e),div:(e,n)=>it(e*ct(n,t),t),sqrN:t=>t*t,addN:(t,e)=>t+e,subN:(t,e)=>t-e,mulN:(t,e)=>t*e,inv:e=>ct(e,t),sqrt:r.sqrt||(t=>s(a,t)),invertBatch:t=>function(t,e){const n=new Array(e.length),r=e.reduce(((e,r,o)=>t.is0(r)?e:(n[o]=e,t.mul(e,r))),t.ONE),o=t.inv(r);return e.reduceRight(((e,r,o)=>t.is0(r)?e:(n[o]=t.mul(e,n[o]),t.mul(e,r))),o),n}(a,t),cmov:(t,e,n)=>n?e:t,toBytes:t=>n?P(t,i):H(t,i),fromBytes:t=>{if(t.length!==i)throw new Error(`Fp.fromBytes: expected ${i}, got ${t.length}`);return n?$(t):N(t)}});return Object.freeze(a)}(It,void 0,void 0,{sqrt:_t}),$t=function(t,e){const n=e=>kt({...t,...Ut(e)});return Object.freeze({...n(e),create:n})}({a:BigInt(0),b:BigInt(7),Fp:Nt,n:Lt,Gx:BigInt("55066263022277343669578718895168534326250603453777594175500187360389116729240"),Gy:BigInt("32670510020758816978083085130507043184471273380659243275938904335757337482424"),h:BigInt(1),lowS:!0,endo:{beta:BigInt("0x7ae96a2b657c07106e64479eac3434e99cf0497512f58995c1396c28719501ee"),splitScalar:t=>{const e=Lt,n=BigInt("0x3086d221a7d46bcde86c90e49284eb15"),r=-Ot*BigInt("0xe4437ed6010e88286f547fa90abfe4c3"),o=BigInt("0x114ca50f7a8e2f3f657c1108d9d44cfd8"),i=n,s=BigInt("0x100000000000000000000000000000000"),a=Tt(i*t,e),c=Tt(-r*t,e);let u=it(t-a*n-c*o,e),l=it(-a*r-c*i,e);const h=u>s,f=l>s;if(h&&(u=e-u),f&&(l=e-l),u>s||l>s)throw new Error("splitScalar: Endomorphism failed, k="+t);return{k1neg:h,k1:u,k2neg:f,k2:l}}}},A),Ht=BigInt(0),Pt=t=>"bigint"==typeof t&&Ht<t&&t<It,Ct={};function qt(t,...e){let n=Ct[t];if(void 0===n){const e=A(Uint8Array.from(t,(t=>t.charCodeAt(0))));n=M(e,e),Ct[t]=n}return A(M(n,...e))}var Mt=t=>t.toRawBytes(!0).slice(1),jt=t=>H(t,32),zt=t=>it(t,It),Dt=t=>it(t,Lt),Ft=$t.ProjectivePoint;function Kt(t){let e=$t.utils.normPrivateKeyToScalar(t),n=Ft.fromPrivateKey(e);return{scalar:n.hasEvenY()?e:Dt(-e),bytes:Mt(n)}}function Vt(t){if(!Pt(t))throw new Error("bad x: need 0 < x < p");const e=zt(t*t);let n=_t(zt(e*t+BigInt(7)));n%Rt!==Ht&&(n=zt(-n));const r=new Ft(t,n,Ot);return r.assertValidity(),r}function Wt(...t){return Dt(N(qt("BIP0340/challenge",...t)))}function Zt(t){return Kt(t).bytes}function Gt(t,e,n=y(32)){const r=q("message",t),{bytes:o,scalar:i}=Kt(e),s=q("auxRand",n,32),a=jt(i^N(qt("BIP0340/aux",s))),c=qt("BIP0340/nonce",a,o,r),u=Dt(N(c));if(u===Ht)throw new Error("sign failed: k is zero");const{bytes:l,scalar:h}=Kt(u),f=Wt(l,o,r),d=new Uint8Array(64);if(d.set(l,0),d.set(jt(Dt(h+f*i)),32),!Jt(d,r,o))throw new Error("sign: Invalid signature produced");return d}function Jt(t,e,n){const r=q("signature",t,64),o=q("message",e),i=q("publicKey",n,32);try{const t=Vt(N(i)),e=N(r.subarray(0,32));if(!Pt(e))return!1;const n=N(r.subarray(32,64));if(!("bigint"==typeof(u=n)&&Ht<u&&u<Lt))return!1;const l=Wt(jt(e),Mt(t),o),h=(s=t,a=n,c=Dt(-l),Ft.BASE.multiplyAndAddUnsafe(s,a,c));return!(!h||!h.hasEvenY()||h.toAffine().x!==e)}catch(t){return!1}var s,a,c,u}var Yt=(()=>({getPublicKey:Zt,sign:Gt,verify:Jt,utils:{randomPrivateKey:$t.utils.randomPrivateKey,lift_x:Vt,pointToBytes:Mt,numberToBytesBE:H,bytesToNumberBE:N,taggedHash:qt,mod:it}}))(),Qt="object"==typeof globalThis&&"crypto"in globalThis?globalThis.crypto:void 0,Xt=t=>t instanceof Uint8Array,te=t=>new DataView(t.buffer,t.byteOffset,t.byteLength),ee=(t,e)=>t<<32-e|t>>>e;if(!(68===new Uint8Array(new Uint32Array([287454020]).buffer)[0]))throw new Error("Non little-endian hardware is not supported");var ne=Array.from({length:256},((t,e)=>e.toString(16).padStart(2,"0")));function re(t){if(!Xt(t))throw new Error("Uint8Array expected");let e="";for(let n=0;n<t.length;n++)e+=ne[t[n]];return e}function oe(t){if("string"!=typeof t)throw new Error("hex string expected, got "+typeof t);const e=t.length;if(e%2)throw new Error("padded hex string expected, got unpadded hex of length "+e);const n=new Uint8Array(e/2);for(let e=0;e<n.length;e++){const r=2*e,o=t.slice(r,r+2),i=Number.parseInt(o,16);if(Number.isNaN(i)||i<0)throw new Error("Invalid byte sequence");n[e]=i}return n}function ie(t){if("string"==typeof t&&(t=function(t){if("string"!=typeof t)throw new Error("utf8ToBytes expected string, got "+typeof t);return new Uint8Array((new TextEncoder).encode(t))}(t)),!Xt(t))throw new Error("expected Uint8Array, got "+typeof t);return t}function se(...t){const e=new Uint8Array(t.reduce(((t,e)=>t+e.length),0));let n=0;return t.forEach((t=>{if(!Xt(t))throw new Error("Uint8Array expected");e.set(t,n),n+=t.length})),e}var ae=class{clone(){return this._cloneInto()}};function ce(t){const e=e=>t().update(ie(e)).digest(),n=t();return e.outputLen=n.outputLen,e.blockLen=n.blockLen,e.create=()=>t(),e}function ue(t=32){if(Qt&&"function"==typeof Qt.getRandomValues)return Qt.getRandomValues(new Uint8Array(t));throw new Error("crypto.getRandomValues must be defined")}var le=Symbol("verified"),he=t=>t instanceof Object;function fe(t){if(!he(t))return!1;if("number"!=typeof t.kind)return!1;if("string"!=typeof t.content)return!1;if("number"!=typeof t.created_at)return!1;if("string"!=typeof t.pubkey)return!1;if(!t.pubkey.match(/^[a-f0-9]{64}$/))return!1;if(!Array.isArray(t.tags))return!1;for(let e=0;e<t.tags.length;e++){let n=t.tags[e];if(!Array.isArray(n))return!1;for(let t=0;t<n.length;t++)if("object"==typeof n[t])return!1}return!0}function de(t){return t.sort(((t,e)=>t.created_at!==e.created_at?e.created_at-t.created_at:t.id.localeCompare(e.id)))}function pe(t){if(!Number.isSafeInteger(t)||t<0)throw new Error(`Wrong positive integer: ${t}`)}function ge(t,...e){if(!(t instanceof Uint8Array))throw new Error("Expected Uint8Array");if(e.length>0&&!e.includes(t.length))throw new Error(`Expected Uint8Array of length ${e}, not of length=${t.length}`)}var ye={number:pe,bool:function(t){if("boolean"!=typeof t)throw new Error(`Expected boolean, not ${t}`)},bytes:ge,hash:function(t){if("function"!=typeof t||"function"!=typeof t.create)throw new Error("Hash should be wrapped by utils.wrapConstructor");pe(t.outputLen),pe(t.blockLen)},exists:function(t,e=!0){if(t.destroyed)throw new Error("Hash instance has been destroyed");if(e&&t.finished)throw new Error("Hash#digest() has already been called")},output:function(t,e){ge(t);const n=e.outputLen;if(t.length<n)throw new Error(`digestInto() expects output buffer of length at least ${n}`)}};var we=class extends ae{constructor(t,e,n,r){super(),this.blockLen=t,this.outputLen=e,this.padOffset=n,this.isLE=r,this.finished=!1,this.length=0,this.pos=0,this.destroyed=!1,this.buffer=new Uint8Array(t),this.view=te(this.buffer)}update(t){ye.exists(this);const{view:e,buffer:n,blockLen:r}=this,o=(t=ie(t)).length;for(let i=0;i<o;){const s=Math.min(r-this.pos,o-i);if(s!==r)n.set(t.subarray(i,i+s),this.pos),this.pos+=s,i+=s,this.pos===r&&(this.process(e,0),this.pos=0);else{const e=te(t);for(;r<=o-i;i+=r)this.process(e,i)}}return this.length+=t.length,this.roundClean(),this}digestInto(t){ye.exists(this),ye.output(t,this),this.finished=!0;const{buffer:e,view:n,blockLen:r,isLE:o}=this;let{pos:i}=this;e[i++]=128,this.buffer.subarray(i).fill(0),this.padOffset>r-i&&(this.process(n,0),i=0);for(let t=i;t<r;t++)e[t]=0;!function(t,e,n,r){if("function"==typeof t.setBigUint64)return t.setBigUint64(e,n,r);const o=BigInt(32),i=BigInt(4294967295),s=Number(n>>o&i),a=Number(n&i),c=r?4:0,u=r?0:4;t.setUint32(e+c,s,r),t.setUint32(e+u,a,r)}(n,r-8,BigInt(8*this.length),o),this.process(n,0);const s=te(t),a=this.outputLen;if(a%4)throw new Error("_sha2: outputLen should be aligned to 32bit");const c=a/4,u=this.get();if(c>u.length)throw new Error("_sha2: outputLen bigger than state");for(let t=0;t<c;t++)s.setUint32(4*t,u[t],o)}digest(){const{buffer:t,outputLen:e}=this;this.digestInto(t);const n=t.slice(0,e);return this.destroy(),n}_cloneInto(t){t||(t=new this.constructor),t.set(...this.get());const{blockLen:e,buffer:n,length:r,finished:o,destroyed:i,pos:s}=this;return t.length=r,t.pos=s,t.finished=o,t.destroyed=i,r%e&&t.buffer.set(n),t}},be=(t,e,n)=>t&e^t&n^e&n,me=new Uint32Array([1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298]),Ee=new Uint32Array([1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225]),ve=new Uint32Array(64),xe=class extends we{constructor(){super(64,32,8,!1),this.A=0|Ee[0],this.B=0|Ee[1],this.C=0|Ee[2],this.D=0|Ee[3],this.E=0|Ee[4],this.F=0|Ee[5],this.G=0|Ee[6],this.H=0|Ee[7]}get(){const{A:t,B:e,C:n,D:r,E:o,F:i,G:s,H:a}=this;return[t,e,n,r,o,i,s,a]}set(t,e,n,r,o,i,s,a){this.A=0|t,this.B=0|e,this.C=0|n,this.D=0|r,this.E=0|o,this.F=0|i,this.G=0|s,this.H=0|a}process(t,e){for(let n=0;n<16;n++,e+=4)ve[n]=t.getUint32(e,!1);for(let t=16;t<64;t++){const e=ve[t-15],n=ve[t-2],r=ee(e,7)^ee(e,18)^e>>>3,o=ee(n,17)^ee(n,19)^n>>>10;ve[t]=o+ve[t-7]+r+ve[t-16]|0}let{A:n,B:r,C:o,D:i,E:s,F:a,G:c,H:u}=this;for(let t=0;t<64;t++){const e=u+(ee(s,6)^ee(s,11)^ee(s,25))+((l=s)&a^~l&c)+me[t]+ve[t]|0,h=(ee(n,2)^ee(n,13)^ee(n,22))+be(n,r,o)|0;u=c,c=a,a=s,s=i+e|0,i=o,o=r,r=n,n=e+h|0}var l;n=n+this.A|0,r=r+this.B|0,o=o+this.C|0,i=i+this.D|0,s=s+this.E|0,a=a+this.F|0,c=c+this.G|0,u=u+this.H|0,this.set(n,r,o,i,s,a,c,u)}roundClean(){ve.fill(0)}destroy(){this.set(0,0,0,0,0,0,0,0),this.buffer.fill(0)}},Ae=class extends xe{constructor(){super(),this.A=-1056596264,this.B=914150663,this.C=812702999,this.D=-150054599,this.E=-4191439,this.F=1750603025,this.G=1694076839,this.H=-1090891868,this.outputLen=28}},ke=ce((()=>new xe)),Se=(ce((()=>new Ae)),{});o(Se,{Queue:()=>_e,QueueNode:()=>Te,binarySearch:()=>Re,insertEventIntoAscendingList:()=>Oe,insertEventIntoDescendingList:()=>Le,normalizeURL:()=>Ie,utf8Decoder:()=>Be,utf8Encoder:()=>Ue});var Be=new TextDecoder("utf-8"),Ue=new TextEncoder;function Ie(t){-1===t.indexOf("://")&&(t="wss://"+t);let e=new URL(t);return e.pathname=e.pathname.replace(/\/+/g,"/"),e.pathname.endsWith("/")&&(e.pathname=e.pathname.slice(0,-1)),("80"===e.port&&"ws:"===e.protocol||"443"===e.port&&"wss:"===e.protocol)&&(e.port=""),e.searchParams.sort(),e.hash="",e.toString()}function Le(t,e){const[n,r]=Re(t,(t=>e.id===t.id?0:e.created_at===t.created_at?-1:t.created_at-e.created_at));return r||t.splice(n,0,e),t}function Oe(t,e){const[n,r]=Re(t,(t=>e.id===t.id?0:e.created_at===t.created_at?-1:e.created_at-t.created_at));return r||t.splice(n,0,e),t}function Re(t,e){let n=0,r=t.length-1;for(;n<=r;){const o=Math.floor((n+r)/2),i=e(t[o]);if(0===i)return[o,!0];i<0?r=o-1:n=o+1}return[n,!1]}var Te=class{value;next=null;prev=null;constructor(t){this.value=t}},_e=class{first;last;constructor(){this.first=null,this.last=null}enqueue(t){const e=new Te(t);return this.last?this.last===this.first?(this.last=e,this.last.prev=this.first,this.first.next=e):(e.prev=this.last,this.last.next=e,this.last=e):(this.first=e,this.last=e),!0}dequeue(){if(!this.first)return null;if(this.first===this.last){const t=this.first;return this.first=null,this.last=null,t.value}const t=this.first;return this.first=t.next,t.value}};function Ne(t){if(!fe(t))throw new Error("can't serialize event with wrong or missing properties");return JSON.stringify([0,t.pubkey,t.created_at,t.kind,t.tags,t.content])}function $e(t){return re(ke(Ue.encode(Ne(t))))}var He=new class{generateSecretKey(){return Yt.utils.randomPrivateKey()}getPublicKey(t){return re(Yt.getPublicKey(t))}finalizeEvent(t,e){const n=t;return n.pubkey=re(Yt.getPublicKey(e)),n.id=$e(n),n.sig=re(Yt.sign($e(n),e)),n[le]=!0,n}verifyEvent(t){if("boolean"==typeof t[le])return t[le];const e=$e(t);if(e!==t.id)return t[le]=!1,!1;try{const n=Yt.verify(t.sig,e,t.pubkey);return t[le]=n,n}catch(e){return t[le]=!1,!1}}},Pe=He.generateSecretKey,Ce=He.getPublicKey,qe=He.finalizeEvent,Me=He.verifyEvent,je={};function ze(t){return 1e3<=t&&t<1e4||[1,2,4,5,6,7,8,16,40,41,42,43,44].includes(t)}function De(t){return[0,3].includes(t)||1e4<=t&&t<2e4}function Fe(t){return 2e4<=t&&t<3e4}function Ke(t){return 3e4<=t&&t<4e4}function Ve(t){return ze(t)?"regular":De(t)?"replaceable":Fe(t)?"ephemeral":Ke(t)?"parameterized":"unknown"}function We(t,e){const n=e instanceof Array?e:[e];return fe(t)&&n.includes(t.kind)||!1}o(je,{Application:()=>sr,BadgeAward:()=>nn,BadgeDefinition:()=>Xn,BlockedRelaysList:()=>Nn,BookmarkList:()=>Rn,Bookmarksets:()=>Jn,Calendar:()=>dr,CalendarEventRSVP:()=>pr,ChannelCreation:()=>an,ChannelHideMessage:()=>ln,ChannelMessage:()=>un,ChannelMetadata:()=>cn,ChannelMuteUser:()=>hn,ClassifiedListing:()=>ur,ClientAuth:()=>zn,CommunitiesList:()=>Tn,CommunityDefinition:()=>wr,CommunityPostApproval:()=>En,Contacts:()=>Ye,CreateOrUpdateProduct:()=>nr,CreateOrUpdateStall:()=>er,Curationsets:()=>Yn,Date:()=>hr,DirectMessageRelaysList:()=>Cn,DraftClassifiedListing:()=>lr,DraftLong:()=>or,Emojisets:()=>ir,EncryptedDirectMessage:()=>Qe,EventDeletion:()=>Xe,FileMetadata:()=>pn,FileServerPreference:()=>qn,Followsets:()=>Wn,GenericRepost:()=>sn,Genericlists:()=>Zn,GiftWrap:()=>dn,HTTPAuth:()=>Vn,Handlerinformation:()=>yr,Handlerrecommendation:()=>gr,Highlights:()=>Un,InterestsList:()=>Hn,Interestsets:()=>tr,JobFeedback:()=>An,JobRequest:()=>vn,JobResult:()=>xn,Label:()=>mn,LightningPubRPC:()=>jn,LiveChatMessage:()=>gn,LiveEvent:()=>ar,LongFormArticle:()=>rr,Metadata:()=>Ze,Mutelist:()=>In,NWCWalletInfo:()=>Mn,NWCWalletRequest:()=>Dn,NWCWalletResponse:()=>Fn,NostrConnect:()=>Kn,OpenTimestamps:()=>fn,Pinlist:()=>Ln,PrivateDirectMessage:()=>on,ProblemTracker:()=>yn,ProfileBadges:()=>Qn,PublicChatsList:()=>_n,Reaction:()=>en,RecommendRelay:()=>Je,RelayList:()=>On,Relaysets:()=>Gn,Report:()=>wn,Reporting:()=>bn,Repost:()=>tn,Seal:()=>rn,SearchRelaysList:()=>$n,ShortTextNote:()=>Ge,Time:()=>fr,UserEmojiList:()=>Pn,UserStatuses:()=>cr,Zap:()=>Bn,ZapGoal:()=>kn,ZapRequest:()=>Sn,classifyKind:()=>Ve,isEphemeralKind:()=>Fe,isKind:()=>We,isParameterizedReplaceableKind:()=>Ke,isRegularKind:()=>ze,isReplaceableKind:()=>De});var Ze=0,Ge=1,Je=2,Ye=3,Qe=4,Xe=5,tn=6,en=7,nn=8,rn=13,on=14,sn=16,an=40,cn=41,un=42,ln=43,hn=44,fn=1040,dn=1059,pn=1063,gn=1311,yn=1971,wn=1984,bn=1984,mn=1985,En=4550,vn=5999,xn=6999,An=7e3,kn=9041,Sn=9734,Bn=9735,Un=9802,In=1e4,Ln=10001,On=10002,Rn=10003,Tn=10004,_n=10005,Nn=10006,$n=10007,Hn=10015,Pn=10030,Cn=10050,qn=10096,Mn=13194,jn=21e3,zn=22242,Dn=23194,Fn=23195,Kn=24133,Vn=27235,Wn=3e4,Zn=30001,Gn=30002,Jn=30003,Yn=30004,Qn=30008,Xn=30009,tr=30015,er=30017,nr=30018,rr=30023,or=30024,ir=30030,sr=30078,ar=30311,cr=30315,ur=30402,lr=30403,hr=31922,fr=31923,dr=31924,pr=31925,gr=31989,yr=31990,wr=34550;function br(t,e){if(t.ids&&-1===t.ids.indexOf(e.id))return!1;if(t.kinds&&-1===t.kinds.indexOf(e.kind))return!1;if(t.authors&&-1===t.authors.indexOf(e.pubkey))return!1;for(let n in t)if("#"===n[0]){let r=t[`#${n.slice(1)}`];if(r&&!e.tags.find((([t,e])=>t===n.slice(1)&&-1!==r.indexOf(e))))return!1}return!(t.since&&e.created_at<t.since)&&!(t.until&&e.created_at>t.until)}function mr(t,e){for(let n=0;n<t.length;n++)if(br(t[n],e))return!0;return!1}function Er(...t){let e={};for(let n=0;n<t.length;n++){let r=t[n];Object.entries(r).forEach((([t,n])=>{if("kinds"===t||"ids"===t||"authors"===t||"#"===t[0]){e[t]=e[t]||[];for(let r=0;r<n.length;r++){let o=n[r];e[t].includes(o)||e[t].push(o)}}})),r.limit&&(!e.limit||r.limit>e.limit)&&(e.limit=r.limit),r.until&&(!e.until||r.until>e.until)&&(e.until=r.until),r.since&&(!e.since||r.since<e.since)&&(e.since=r.since)}return e}function vr(t){if(t.ids&&!t.ids.length)return 0;if(t.kinds&&!t.kinds.length)return 0;if(t.authors&&!t.authors.length)return 0;for(const[e,n]of Object.entries(t))if("#"===e[0]&&Array.isArray(n)&&!n.length)return 0;return Math.min(Math.max(0,t.limit??1/0),t.ids?.length??1/0,t.authors?.length&&t.kinds?.every((t=>De(t)))?t.authors.length*t.kinds.length:1/0,t.authors?.length&&t.kinds?.every((t=>Ke(t)))&&t["#d"]?.length?t.authors.length*t.kinds.length*t["#d"].length:1/0)}var xr={};function Ar(t,e){let n=e.length+3,r=t.indexOf(`"${e}":`)+n,o=t.slice(r).indexOf('"')+r+1;return t.slice(o,o+64)}function kr(t,e){let n=e.length,r=t.indexOf(`"${e}":`)+n+3,o=t.slice(r),i=Math.min(o.indexOf(","),o.indexOf("}"));return parseInt(o.slice(0,i),10)}function Sr(t){let e=t.slice(0,22).indexOf('"EVENT"');if(-1===e)return null;let n=t.slice(e+7+1).indexOf('"');if(-1===n)return null;let r=e+7+1+n,o=t.slice(r+1,80).indexOf('"');if(-1===o)return null;let i=r+1+o;return t.slice(r+1,i)}function Br(t,e){return e===Ar(t,"id")}function Ur(t,e){return e===Ar(t,"pubkey")}function Ir(t,e){return e===kr(t,"kind")}o(xr,{getHex64:()=>Ar,getInt:()=>kr,getSubscriptionId:()=>Sr,matchEventId:()=>Br,matchEventKind:()=>Ir,matchEventPubkey:()=>Ur});var Lr={};function Or(t,e){return{kind:zn,created_at:Math.floor(Date.now()/1e3),tags:[["relay",t],["challenge",e]],content:""}}async function Rr(){return new Promise((t=>{const e=new MessageChannel,n=()=>{e.port1.removeEventListener("message",n),t()};e.port1.addEventListener("message",n),e.port2.postMessage(0),e.port1.start()}))}o(Lr,{makeAuthEvent:()=>Or});var Tr,_r=t=>(t[le]=!0,!0),Nr=class{url;_connected=!1;onclose=null;onnotice=t=>console.debug(`NOTICE from ${this.url}: ${t}`);_onauth=null;baseEoseTimeout=4400;connectionTimeout=4400;publishTimeout=4400;openSubs=new Map;connectionTimeoutHandle;connectionPromise;openCountRequests=new Map;openEventPublishes=new Map;ws;incomingMessageQueue=new _e;queueRunning=!1;challenge;serial=0;verifyEvent;_WebSocket;constructor(t,e){this.url=Ie(t),this.verifyEvent=e.verifyEvent,this._WebSocket=e.websocketImplementation||WebSocket}static async connect(t,e){const n=new Nr(t,e);return await n.connect(),n}closeAllSubscriptions(t){for(let[e,n]of this.openSubs)n.close(t);this.openSubs.clear();for(let[e,n]of this.openEventPublishes)n.reject(new Error(t));this.openEventPublishes.clear();for(let[e,n]of this.openCountRequests)n.reject(new Error(t));this.openCountRequests.clear()}get connected(){return this._connected}async connect(){return this.connectionPromise||(this.challenge=void 0,this.connectionPromise=new Promise(((t,e)=>{this.connectionTimeoutHandle=setTimeout((()=>{e("connection timed out"),this.connectionPromise=void 0,this.onclose?.(),this.closeAllSubscriptions("relay connection timed out")}),this.connectionTimeout);try{this.ws=new this._WebSocket(this.url)}catch(t){return void e(t)}this.ws.onopen=()=>{clearTimeout(this.connectionTimeoutHandle),this._connected=!0,t()},this.ws.onerror=t=>{e(t.message||"websocket error"),this._connected&&(this._connected=!1,this.connectionPromise=void 0,this.onclose?.(),this.closeAllSubscriptions("relay connection errored"))},this.ws.onclose=async()=>{this._connected&&(this._connected=!1,this.connectionPromise=void 0,this.onclose?.(),this.closeAllSubscriptions("relay connection closed"))},this.ws.onmessage=this._onmessage.bind(this)}))),this.connectionPromise}async runQueue(){for(this.queueRunning=!0;!1!==this.handleNext();)await Rr();this.queueRunning=!1}handleNext(){const t=this.incomingMessageQueue.dequeue();if(!t)return!1;const e=Sr(t);if(e){const n=this.openSubs.get(e);if(!n)return;const r=Ar(t,"id"),o=n.alreadyHaveEvent?.(r);if(n.receivedEvent?.(this,r),o)return}try{let e=JSON.parse(t);switch(e[0]){case"EVENT":{const t=this.openSubs.get(e[1]),n=e[2];return void(this.verifyEvent(n)&&mr(t.filters,n)&&t.onevent(n))}case"COUNT":{const t=e[1],n=e[2],r=this.openCountRequests.get(t);return void(r&&(r.resolve(n.count),this.openCountRequests.delete(t)))}case"EOSE":{const t=this.openSubs.get(e[1]);if(!t)return;return void t.receivedEose()}case"OK":{const t=e[1],n=e[2],r=e[3],o=this.openEventPublishes.get(t);return void(o&&(n?o.resolve(r):o.reject(new Error(r)),this.openEventPublishes.delete(t)))}case"CLOSED":{const t=e[1],n=this.openSubs.get(t);if(!n)return;return n.closed=!0,void n.close(e[2])}case"NOTICE":return void this.onnotice(e[1]);case"AUTH":return this.challenge=e[1],void this._onauth?.(e[1])}}catch(t){return}}async send(t){if(!this.connectionPromise)throw new Error("sending on closed connection");this.connectionPromise.then((()=>{this.ws?.send(t)}))}async auth(t){if(!this.challenge)throw new Error("can't perform auth, no challenge was received");const e=await t(Or(this.url,this.challenge)),n=new Promise(((t,n)=>{this.openEventPublishes.set(e.id,{resolve:t,reject:n})}));return this.send('["AUTH",'+JSON.stringify(e)+"]"),n}async publish(t){const e=new Promise(((e,n)=>{this.openEventPublishes.set(t.id,{resolve:e,reject:n})}));return this.send('["EVENT",'+JSON.stringify(t)+"]"),setTimeout((()=>{const e=this.openEventPublishes.get(t.id);e&&(e.reject(new Error("publish timed out")),this.openEventPublishes.delete(t.id))}),this.publishTimeout),e}async count(t,e){this.serial++;const n=e?.id||"count:"+this.serial,r=new Promise(((t,e)=>{this.openCountRequests.set(n,{resolve:t,reject:e})}));return this.send('["COUNT","'+n+'",'+JSON.stringify(t).substring(1)),r}subscribe(t,e){const n=this.prepareSubscription(t,e);return n.fire(),n}prepareSubscription(t,e){this.serial++;const n=e.id||"sub:"+this.serial,r=new $r(this,n,t,e);return this.openSubs.set(n,r),r}close(){this.closeAllSubscriptions("relay connection closed by us"),this._connected=!1,this.ws?.close()}_onmessage(t){this.incomingMessageQueue.enqueue(t.data),this.queueRunning||this.runQueue()}},$r=class{relay;id;closed=!1;eosed=!1;filters;alreadyHaveEvent;receivedEvent;onevent;oneose;onclose;eoseTimeout;eoseTimeoutHandle;constructor(t,e,n,r){this.relay=t,this.filters=n,this.id=e,this.alreadyHaveEvent=r.alreadyHaveEvent,this.receivedEvent=r.receivedEvent,this.eoseTimeout=r.eoseTimeout||t.baseEoseTimeout,this.oneose=r.oneose,this.onclose=r.onclose,this.onevent=r.onevent||(t=>{console.warn(`onevent() callback not defined for subscription '${this.id}' in relay ${this.relay.url}. event received:`,t)})}fire(){this.relay.send('["REQ","'+this.id+'",'+JSON.stringify(this.filters).substring(1)),this.eoseTimeoutHandle=setTimeout(this.receivedEose.bind(this),this.eoseTimeout)}receivedEose(){this.eosed||(clearTimeout(this.eoseTimeoutHandle),this.eosed=!0,this.oneose?.())}close(t="closed by caller"){!this.closed&&this.relay.connected&&(this.relay.send('["CLOSE",'+JSON.stringify(this.id)+"]"),this.closed=!0),this.relay.openSubs.delete(this.id),this.onclose?.(t)}};try{Tr=WebSocket}catch{}var Hr,Pr=class extends Nr{constructor(t){super(t,{verifyEvent:Me,websocketImplementation:Tr})}static async connect(t){const e=new Pr(t);return await e.connect(),e}},Cr=class{relays=new Map;seenOn=new Map;trackRelays=!1;verifyEvent;trustedRelayURLs=new Set;_WebSocket;constructor(t){this.verifyEvent=t.verifyEvent,this._WebSocket=t.websocketImplementation}async ensureRelay(t,e){t=Ie(t);let n=this.relays.get(t);return n||(n=new Nr(t,{verifyEvent:this.trustedRelayURLs.has(t)?_r:this.verifyEvent,websocketImplementation:this._WebSocket}),e?.connectionTimeout&&(n.connectionTimeout=e.connectionTimeout),this.relays.set(t,n)),await n.connect(),n}close(t){t.map(Ie).forEach((t=>{this.relays.get(t)?.close()}))}subscribeMany(t,e,n){return this.subscribeManyMap(Object.fromEntries(t.map((t=>[t,e]))),n)}subscribeManyMap(t,e){this.trackRelays&&(e.receivedEvent=(t,e)=>{let n=this.seenOn.get(e);n||(n=new Set,this.seenOn.set(e,n)),n.add(t)});const n=new Set,r=[],o=Object.keys(t).length,i=[];let s=t=>{i[t]=!0,i.filter((t=>t)).length===o&&(e.oneose?.(),s=()=>{})};const a=[];let c=(t,n)=>{s(t),a[t]=n,a.filter((t=>t)).length===o&&(e.onclose?.(a),c=()=>{})};const u=t=>{if(e.alreadyHaveEvent?.(t))return!0;const r=n.has(t);return n.add(t),r},l=Promise.all(Object.entries(t).map((async(t,n,o)=>{if(o.indexOf(t)!==n)return void c(n,"duplicate url");let i,[a,l]=t;a=Ie(a);try{i=await this.ensureRelay(a,{connectionTimeout:e.maxWait?Math.max(.8*e.maxWait,e.maxWait-1e3):void 0})}catch(t){return void c(n,t?.message||String(t))}let h=i.subscribe(l,{...e,oneose:()=>s(n),onclose:t=>c(n,t),alreadyHaveEvent:u,eoseTimeout:e.maxWait});r.push(h)})));return{async close(){await l,r.forEach((t=>{t.close()}))}}}subscribeManyEose(t,e,n){const r=this.subscribeMany(t,e,{...n,oneose(){r.close()}});return r}async querySync(t,e,n){return new Promise((async r=>{const o=[];this.subscribeManyEose(t,[e],{...n,onevent(t){o.push(t)},onclose(t){r(o)}})}))}async get(t,e,n){e.limit=1;const r=await this.querySync(t,e,n);return r.sort(((t,e)=>e.created_at-t.created_at)),r[0]||null}publish(t,e){return t.map(Ie).map((async(t,n,r)=>{if(r.indexOf(t)!==n)return Promise.reject("duplicate url");let o=await this.ensureRelay(t);return o.publish(e).then((t=>{if(this.trackRelays){let t=this.seenOn.get(e.id);t||(t=new Set,this.seenOn.set(e.id,t)),t.add(o)}return t}))}))}listConnectionStatus(){const t=new Map;return this.relays.forEach(((e,n)=>t.set(n,e.connected))),t}destroy(){this.relays.forEach((t=>t.close())),this.relays=new Map}};try{Hr=WebSocket}catch{}var qr=class extends Cr{constructor(){super({verifyEvent:Me,websocketImplementation:Hr})}},Mr={};function jr(t){if(!Number.isSafeInteger(t))throw new Error(`Wrong integer: ${t}`)}function zr(...t){const e=(t,e)=>n=>t(e(n));return{encode:Array.from(t).reverse().reduce(((t,n)=>t?e(t,n.encode):n.encode),void 0),decode:t.reduce(((t,n)=>t?e(t,n.decode):n.decode),void 0)}}function Dr(t){return{encode:e=>{if(!Array.isArray(e)||e.length&&"number"!=typeof e[0])throw new Error("alphabet.encode input should be an array of numbers");return e.map((e=>{if(jr(e),e<0||e>=t.length)throw new Error(`Digit index outside alphabet: ${e} (alphabet: ${t.length})`);return t[e]}))},decode:e=>{if(!Array.isArray(e)||e.length&&"string"!=typeof e[0])throw new Error("alphabet.decode input should be array of strings");return e.map((e=>{if("string"!=typeof e)throw new Error(`alphabet.decode: not string element=${e}`);const n=t.indexOf(e);if(-1===n)throw new Error(`Unknown letter: "${e}". Allowed: ${t}`);return n}))}}}function Fr(t=""){if("string"!=typeof t)throw new Error("join separator should be string");return{encode:e=>{if(!Array.isArray(e)||e.length&&"string"!=typeof e[0])throw new Error("join.encode input should be array of strings");for(let t of e)if("string"!=typeof t)throw new Error(`join.encode: non-string input=${t}`);return e.join(t)},decode:e=>{if("string"!=typeof e)throw new Error("join.decode input should be string");return e.split(t)}}}function Kr(t,e="="){if(jr(t),"string"!=typeof e)throw new Error("padding chr should be string");return{encode(n){if(!Array.isArray(n)||n.length&&"string"!=typeof n[0])throw new Error("padding.encode input should be array of strings");for(let t of n)if("string"!=typeof t)throw new Error(`padding.encode: non-string input=${t}`);for(;n.length*t%8;)n.push(e);return n},decode(n){if(!Array.isArray(n)||n.length&&"string"!=typeof n[0])throw new Error("padding.encode input should be array of strings");for(let t of n)if("string"!=typeof t)throw new Error(`padding.decode: non-string input=${t}`);let r=n.length;if(r*t%8)throw new Error("Invalid padding: string should have whole number of bytes");for(;r>0&&n[r-1]===e;r--)if(!((r-1)*t%8))throw new Error("Invalid padding: string has too much padding");return n.slice(0,r)}}}function Vr(t){if("function"!=typeof t)throw new Error("normalize fn should be function");return{encode:t=>t,decode:e=>t(e)}}function Wr(t,e,n){if(e<2)throw new Error(`convertRadix: wrong from=${e}, base cannot be less than 2`);if(n<2)throw new Error(`convertRadix: wrong to=${n}, base cannot be less than 2`);if(!Array.isArray(t))throw new Error("convertRadix: data should be array");if(!t.length)return[];let r=0;const o=[],i=Array.from(t);for(i.forEach((t=>{if(jr(t),t<0||t>=e)throw new Error(`Wrong integer: ${t}`)}));;){let t=0,s=!0;for(let o=r;o<i.length;o++){const a=i[o],c=e*t+a;if(!Number.isSafeInteger(c)||e*t/e!==t||c-a!=e*t)throw new Error("convertRadix: carry overflow");if(t=c%n,i[o]=Math.floor(c/n),!Number.isSafeInteger(i[o])||i[o]*n+t!==c)throw new Error("convertRadix: carry overflow");s&&(i[o]?s=!1:r=o)}if(o.push(t),s)break}for(let e=0;e<t.length-1&&0===t[e];e++)o.push(0);return o.reverse()}o(Mr,{BECH32_REGEX:()=>wo,Bech32MaxSize:()=>yo,NostrTypeGuard:()=>go,decode:()=>bo,encodeBytes:()=>ko,naddrEncode:()=>Uo,neventEncode:()=>Bo,noteEncode:()=>xo,nprofileEncode:()=>So,npubEncode:()=>vo,nsecEncode:()=>Eo});var Zr=(t,e)=>e?Zr(e,t%e):t,Gr=(t,e)=>t+(e-Zr(t,e));function Jr(t,e,n,r){if(!Array.isArray(t))throw new Error("convertRadix2: data should be array");if(e<=0||e>32)throw new Error(`convertRadix2: wrong from=${e}`);if(n<=0||n>32)throw new Error(`convertRadix2: wrong to=${n}`);if(Gr(e,n)>32)throw new Error(`convertRadix2: carry overflow from=${e} to=${n} carryBits=${Gr(e,n)}`);let o=0,i=0;const s=2**n-1,a=[];for(const r of t){if(jr(r),r>=2**e)throw new Error(`convertRadix2: invalid data word=${r} from=${e}`);if(o=o<<e|r,i+e>32)throw new Error(`convertRadix2: carry overflow pos=${i} from=${e}`);for(i+=e;i>=n;i-=n)a.push((o>>i-n&s)>>>0);o&=2**i-1}if(o=o<<n-i&s,!r&&i>=e)throw new Error("Excess padding");if(!r&&o)throw new Error(`Non-zero padding: ${o}`);return r&&i>0&&a.push(o>>>0),a}function Yr(t,e=!1){if(jr(t),t<=0||t>32)throw new Error("radix2: bits should be in (0..32]");if(Gr(8,t)>32||Gr(t,8)>32)throw new Error("radix2: carry overflow");return{encode:n=>{if(!(n instanceof Uint8Array))throw new Error("radix2.encode input should be Uint8Array");return Jr(Array.from(n),8,t,!e)},decode:n=>{if(!Array.isArray(n)||n.length&&"number"!=typeof n[0])throw new Error("radix2.decode input should be array of strings");return Uint8Array.from(Jr(n,t,8,e))}}}function Qr(t){if("function"!=typeof t)throw new Error("unsafeWrapper fn should be function");return function(...e){try{return t.apply(null,e)}catch(t){}}}var Xr=zr(Yr(4),Dr("0123456789ABCDEF"),Fr("")),to=zr(Yr(5),Dr("ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"),Kr(5),Fr("")),eo=(zr(Yr(5),Dr("0123456789ABCDEFGHIJKLMNOPQRSTUV"),Kr(5),Fr("")),zr(Yr(5),Dr("0123456789ABCDEFGHJKMNPQRSTVWXYZ"),Fr(""),Vr((t=>t.toUpperCase().replace(/O/g,"0").replace(/[IL]/g,"1")))),zr(Yr(6),Dr("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"),Kr(6),Fr(""))),no=zr(Yr(6),Dr("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_"),Kr(6),Fr("")),ro=t=>{return zr((jr(e=58),{encode:t=>{if(!(t instanceof Uint8Array))throw new Error("radix.encode input should be Uint8Array");return Wr(Array.from(t),256,e)},decode:t=>{if(!Array.isArray(t)||t.length&&"number"!=typeof t[0])throw new Error("radix.decode input should be array of strings");return Uint8Array.from(Wr(t,e,256))}}),Dr(t),Fr(""));var e},oo=ro("123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz"),io=(ro("123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"),ro("rpshnaf39wBUDNEGHJKLM4PQRST7VWXYZ2bcdeCg65jkm8oFqi1tuvAxyz"),[0,2,3,5,6,7,9,10,11]),so={encode(t){let e="";for(let n=0;n<t.length;n+=8){const r=t.subarray(n,n+8);e+=oo.encode(r).padStart(io[r.length],"1")}return e},decode(t){let e=[];for(let n=0;n<t.length;n+=11){const r=t.slice(n,n+11),o=io.indexOf(r.length),i=oo.decode(r);for(let t=0;t<i.length-o;t++)if(0!==i[t])throw new Error("base58xmr: wrong padding");e=e.concat(Array.from(i.slice(i.length-o)))}return Uint8Array.from(e)}},ao=zr(Dr("qpzry9x8gf2tvdw0s3jn54khce6mua7l"),Fr("")),co=[996825010,642813549,513874426,1027748829,705979059];function uo(t){const e=t>>25;let n=(33554431&t)<<5;for(let t=0;t<co.length;t++)1==(e>>t&1)&&(n^=co[t]);return n}function lo(t,e,n=1){const r=t.length;let o=1;for(let e=0;e<r;e++){const n=t.charCodeAt(e);if(n<33||n>126)throw new Error(`Invalid prefix (${t})`);o=uo(o)^n>>5}o=uo(o);for(let e=0;e<r;e++)o=uo(o)^31&t.charCodeAt(e);for(let t of e)o=uo(o)^t;for(let t=0;t<6;t++)o=uo(o);return o^=n,ao.encode(Jr([o%2**30],30,5,!1))}function ho(t){const e="bech32"===t?1:734539939,n=Yr(5),r=n.decode,o=n.encode,i=Qr(r);function s(t,n=90){if("string"!=typeof t)throw new Error("bech32.decode input should be string, not "+typeof t);if(t.length<8||!1!==n&&t.length>n)throw new TypeError(`Wrong string length: ${t.length} (${t}). Expected (8..${n})`);const r=t.toLowerCase();if(t!==r&&t!==t.toUpperCase())throw new Error("String must be lowercase or uppercase");const o=(t=r).lastIndexOf("1");if(0===o||-1===o)throw new Error('Letter "1" must be present between prefix and data only');const i=t.slice(0,o),s=t.slice(o+1);if(s.length<6)throw new Error("Data must be at least 6 characters long");const a=ao.decode(s).slice(0,-6),c=lo(i,a,e);if(!s.endsWith(c))throw new Error(`Invalid checksum in ${t}: expected "${c}"`);return{prefix:i,words:a}}return{encode:function(t,n,r=90){if("string"!=typeof t)throw new Error("bech32.encode prefix should be string, not "+typeof t);if(!Array.isArray(n)||n.length&&"number"!=typeof n[0])throw new Error("bech32.encode words should be array of numbers, not "+typeof n);const o=t.length+7+n.length;if(!1!==r&&o>r)throw new TypeError(`Length ${o} exceeds limit ${r}`);return`${t=t.toLowerCase()}1${ao.encode(n)}${lo(t,n,e)}`},decode:s,decodeToBytes:function(t){const{prefix:e,words:n}=s(t,!1);return{prefix:e,words:n,bytes:r(n)}},decodeUnsafe:Qr(s),fromWords:r,fromWordsUnsafe:i,toWords:o}}var fo=ho("bech32"),po=(ho("bech32m"),{utf8:{encode:t=>(new TextDecoder).decode(t),decode:t=>(new TextEncoder).encode(t)},hex:zr(Yr(4),Dr("0123456789abcdef"),Fr(""),Vr((t=>{if("string"!=typeof t||t.length%2)throw new TypeError(`hex.decode: expected string, got ${typeof t} with length ${t.length}`);return t.toLowerCase()}))),base16:Xr,base32:to,base64:eo,base64url:no,base58:oo,base58xmr:so}),go=(Object.keys(po).join(", "),{isNProfile:t=>/^nprofile1[a-z\d]+$/.test(t||""),isNEvent:t=>/^nevent1[a-z\d]+$/.test(t||""),isNAddr:t=>/^naddr1[a-z\d]+$/.test(t||""),isNSec:t=>/^nsec1[a-z\d]{58}$/.test(t||""),isNPub:t=>/^npub1[a-z\d]{58}$/.test(t||""),isNote:t=>/^note1[a-z\d]+$/.test(t||""),isNcryptsec:t=>/^ncryptsec1[a-z\d]+$/.test(t||"")}),yo=5e3,wo=/[\x21-\x7E]{1,83}1[023456789acdefghjklmnpqrstuvwxyz]{6,}/;function bo(t){let{prefix:e,words:n}=fo.decode(t,yo),r=new Uint8Array(fo.fromWords(n));switch(e){case"nprofile":{let t=mo(r);if(!t[0]?.[0])throw new Error("missing TLV 0 for nprofile");if(32!==t[0][0].length)throw new Error("TLV 0 should be 32 bytes");return{type:"nprofile",data:{pubkey:re(t[0][0]),relays:t[1]?t[1].map((t=>Be.decode(t))):[]}}}case"nevent":{let t=mo(r);if(!t[0]?.[0])throw new Error("missing TLV 0 for nevent");if(32!==t[0][0].length)throw new Error("TLV 0 should be 32 bytes");if(t[2]&&32!==t[2][0].length)throw new Error("TLV 2 should be 32 bytes");if(t[3]&&4!==t[3][0].length)throw new Error("TLV 3 should be 4 bytes");return{type:"nevent",data:{id:re(t[0][0]),relays:t[1]?t[1].map((t=>Be.decode(t))):[],author:t[2]?.[0]?re(t[2][0]):void 0,kind:t[3]?.[0]?parseInt(re(t[3][0]),16):void 0}}}case"naddr":{let t=mo(r);if(!t[0]?.[0])throw new Error("missing TLV 0 for naddr");if(!t[2]?.[0])throw new Error("missing TLV 2 for naddr");if(32!==t[2][0].length)throw new Error("TLV 2 should be 32 bytes");if(!t[3]?.[0])throw new Error("missing TLV 3 for naddr");if(4!==t[3][0].length)throw new Error("TLV 3 should be 4 bytes");return{type:"naddr",data:{identifier:Be.decode(t[0][0]),pubkey:re(t[2][0]),kind:parseInt(re(t[3][0]),16),relays:t[1]?t[1].map((t=>Be.decode(t))):[]}}}case"nsec":return{type:e,data:r};case"npub":case"note":return{type:e,data:re(r)};default:throw new Error(`unknown prefix ${e}`)}}function mo(t){let e={},n=t;for(;n.length>0;){let t=n[0],r=n[1],o=n.slice(2,2+r);if(n=n.slice(2+r),o.length<r)throw new Error(`not enough data to read on TLV ${t}`);e[t]=e[t]||[],e[t].push(o)}return e}function Eo(t){return ko("nsec",t)}function vo(t){return ko("npub",oe(t))}function xo(t){return ko("note",oe(t))}function Ao(t,e){let n=fo.toWords(e);return fo.encode(t,n,yo)}function ko(t,e){return Ao(t,e)}function So(t){return Ao("nprofile",Io({0:[oe(t.pubkey)],1:(t.relays||[]).map((t=>Ue.encode(t)))}))}function Bo(t){let e;return void 0!==t.kind&&(e=function(t){const e=new Uint8Array(4);return e[0]=t>>24&255,e[1]=t>>16&255,e[2]=t>>8&255,e[3]=255&t,e}(t.kind)),Ao("nevent",Io({0:[oe(t.id)],1:(t.relays||[]).map((t=>Ue.encode(t))),2:t.author?[oe(t.author)]:[],3:e?[new Uint8Array(e)]:[]}))}function Uo(t){let e=new ArrayBuffer(4);return new DataView(e).setUint32(0,t.kind,!1),Ao("naddr",Io({0:[Ue.encode(t.identifier)],1:(t.relays||[]).map((t=>Ue.encode(t))),2:[oe(t.pubkey)],3:[new Uint8Array(e)]}))}function Io(t){let e=[];return Object.entries(t).reverse().forEach((([t,n])=>{n.forEach((n=>{let r=new Uint8Array(n.length+2);r.set([parseInt(t)],0),r.set([n.length],1),r.set(n,2),e.push(r)}))})),se(...e)}var Lo=/\bnostr:((note|npub|naddr|nevent|nprofile)1\w+)\b|#\[(\d+)\]/g;function Oo(t){let e=[];for(let n of t.content.matchAll(Lo))if(n[2])try{let{type:t,data:r}=bo(n[1]);switch(t){case"npub":e.push({text:n[0],profile:{pubkey:r,relays:[]}});break;case"nprofile":e.push({text:n[0],profile:r});break;case"note":e.push({text:n[0],event:{id:r,relays:[]}});break;case"nevent":e.push({text:n[0],event:r});break;case"naddr":e.push({text:n[0],address:r})}}catch(t){}else if(n[3]){let r=parseInt(n[3],10),o=t.tags[r];if(!o)continue;switch(o[0]){case"p":e.push({text:n[0],profile:{pubkey:o[1],relays:o[2]?[o[2]]:[]}});break;case"e":e.push({text:n[0],event:{id:o[1],relays:o[2]?[o[2]]:[]}});break;case"a":try{let[t,r,i]=o[1].split(":");e.push({text:n[0],address:{identifier:i,pubkey:r,kind:parseInt(t,10),relays:o[2]?[o[2]]:[]}})}catch(t){}}}return e}var Ro={};function To(t){if(!Number.isSafeInteger(t)||t<0)throw new Error(`positive integer expected, not ${t}`)}function _o(t){if("boolean"!=typeof t)throw new Error(`boolean expected, not ${t}`)}function No(t){return t instanceof Uint8Array||null!=t&&"object"==typeof t&&"Uint8Array"===t.constructor.name}function $o(t,...e){if(!No(t))throw new Error("Uint8Array expected");if(e.length>0&&!e.includes(t.length))throw new Error(`Uint8Array expected of length ${e}, not of length=${t.length}`)}function Ho(t,e=!0){if(t.destroyed)throw new Error("Hash instance has been destroyed");if(e&&t.finished)throw new Error("Hash#digest() has already been called")}function Po(t,e){$o(t);const n=e.outputLen;if(t.length<n)throw new Error(`digestInto() expects output buffer of length at least ${n}`)}o(Ro,{decrypt:()=>Ii,encrypt:()=>Ui});var Co=t=>new Uint8Array(t.buffer,t.byteOffset,t.byteLength),qo=t=>new Uint32Array(t.buffer,t.byteOffset,Math.floor(t.byteLength/4)),Mo=t=>new DataView(t.buffer,t.byteOffset,t.byteLength);if(!(68===new Uint8Array(new Uint32Array([287454020]).buffer)[0]))throw new Error("Non little-endian hardware is not supported");function jo(t){if("string"!=typeof t)throw new Error("string expected, got "+typeof t);return new Uint8Array((new TextEncoder).encode(t))}function zo(t){if("string"==typeof t)t=jo(t);else{if(!No(t))throw new Error("Uint8Array expected, got "+typeof t);t=t.slice()}return t}function Do(t,e){if(t.length!==e.length)return!1;let n=0;for(let r=0;r<t.length;r++)n|=t[r]^e[r];return 0===n}var Fo=(t,e)=>(Object.assign(e,t),e);function Ko(t,e,n,r){if("function"==typeof t.setBigUint64)return t.setBigUint64(e,n,r);const o=BigInt(32),i=BigInt(4294967295),s=Number(n>>o&i),a=Number(n&i),c=r?4:0,u=r?0:4;t.setUint32(e+c,s,r),t.setUint32(e+u,a,r)}var Vo=16,Wo=new Uint8Array(16),Zo=qo(Wo),Go=t=>(t>>>0&255)<<24|(t>>>8&255)<<16|(t>>>16&255)<<8|t>>>24&255;var Jo=class{constructor(t,e){this.blockLen=Vo,this.outputLen=Vo,this.s0=0,this.s1=0,this.s2=0,this.s3=0,this.finished=!1,$o(t=zo(t),16);const n=Mo(t);let r=n.getUint32(0,!1),o=n.getUint32(4,!1),i=n.getUint32(8,!1),s=n.getUint32(12,!1);const a=[];for(let t=0;t<128;t++)a.push({s0:Go(r),s1:Go(o),s2:Go(i),s3:Go(s)}),({s0:r,s1:o,s2:i,s3:s}={s3:(l=i)<<31|(h=s)>>>1,s2:(u=o)<<31|l>>>1,s1:(c=r)<<31|u>>>1,s0:c>>>1^225<<24&-(1&h)});var c,u,l,h;const f=(d=e||1024)>65536?8:d>1024?4:2;var d;if(![1,2,4,8].includes(f))throw new Error(`ghash: wrong window size=${f}, should be 2, 4 or 8`);this.W=f;const p=128/f,g=this.windowSize=2**f,y=[];for(let t=0;t<p;t++)for(let e=0;e<g;e++){let n=0,r=0,o=0,i=0;for(let s=0;s<f;s++){if(!(e>>>f-s-1&1))continue;const{s0:c,s1:u,s2:l,s3:h}=a[f*t+s];n^=c,r^=u,o^=l,i^=h}y.push({s0:n,s1:r,s2:o,s3:i})}this.t=y}_updateBlock(t,e,n,r){t^=this.s0,e^=this.s1,n^=this.s2,r^=this.s3;const{W:o,t:i,windowSize:s}=this;let a=0,c=0,u=0,l=0;const h=(1<<o)-1;let f=0;for(const d of[t,e,n,r])for(let t=0;t<4;t++){const e=d>>>8*t&255;for(let t=8/o-1;t>=0;t--){const n=e>>>o*t&h,{s0:r,s1:d,s2:p,s3:g}=i[f*s+n];a^=r,c^=d,u^=p,l^=g,f+=1}}this.s0=a,this.s1=c,this.s2=u,this.s3=l}update(t){t=zo(t),Ho(this);const e=qo(t),n=Math.floor(t.length/Vo),r=t.length%Vo;for(let t=0;t<n;t++)this._updateBlock(e[4*t+0],e[4*t+1],e[4*t+2],e[4*t+3]);return r&&(Wo.set(t.subarray(n*Vo)),this._updateBlock(Zo[0],Zo[1],Zo[2],Zo[3]),Zo.fill(0)),this}destroy(){const{t:t}=this;for(const e of t)e.s0=0,e.s1=0,e.s2=0,e.s3=0}digestInto(t){Ho(this),Po(t,this),this.finished=!0;const{s0:e,s1:n,s2:r,s3:o}=this,i=qo(t);return i[0]=e,i[1]=n,i[2]=r,i[3]=o,t}digest(){const t=new Uint8Array(Vo);return this.digestInto(t),this.destroy(),t}},Yo=class extends Jo{constructor(t,e){const n=function(t){t.reverse();const e=1&t[15];let n=0;for(let e=0;e<t.length;e++){const r=t[e];t[e]=r>>>1|n,n=(1&r)<<7}return t[0]^=225&-e,t}((t=zo(t)).slice());super(n,e),n.fill(0)}update(t){t=zo(t),Ho(this);const e=qo(t),n=t.length%Vo,r=Math.floor(t.length/Vo);for(let t=0;t<r;t++)this._updateBlock(Go(e[4*t+3]),Go(e[4*t+2]),Go(e[4*t+1]),Go(e[4*t+0]));return n&&(Wo.set(t.subarray(r*Vo)),this._updateBlock(Go(Zo[3]),Go(Zo[2]),Go(Zo[1]),Go(Zo[0])),Zo.fill(0)),this}digestInto(t){Ho(this),Po(t,this),this.finished=!0;const{s0:e,s1:n,s2:r,s3:o}=this,i=qo(t);return i[0]=e,i[1]=n,i[2]=r,i[3]=o,t.reverse()}};function Qo(t){const e=(e,n)=>t(n,e.length).update(zo(e)).digest(),n=t(new Uint8Array(16),0);return e.outputLen=n.outputLen,e.blockLen=n.blockLen,e.create=(e,n)=>t(e,n),e}var Xo=Qo(((t,e)=>new Jo(t,e))),ti=Qo(((t,e)=>new Yo(t,e))),ei=16,ni=new Uint8Array(ei);function ri(t){return t<<1^283&-(t>>7)}function oi(t,e){let n=0;for(;e>0;e>>=1)n^=t&-(1&e),t=ri(t);return n}var ii=(()=>{let t=new Uint8Array(256);for(let e=0,n=1;e<256;e++,n^=ri(n))t[e]=n;const e=new Uint8Array(256);e[0]=99;for(let n=0;n<255;n++){let r=t[255-n];r|=r<<8,e[t[n]]=255&(r^r>>4^r>>5^r>>6^r>>7^99)}return e})(),si=ii.map(((t,e)=>ii.indexOf(e))),ai=t=>t<<8|t>>>24;function ci(t,e){if(256!==t.length)throw new Error("Wrong sbox length");const n=new Uint32Array(256).map(((n,r)=>e(t[r]))),r=n.map(ai),o=r.map(ai),i=o.map(ai),s=new Uint32Array(65536),a=new Uint32Array(65536),c=new Uint16Array(65536);for(let e=0;e<256;e++)for(let u=0;u<256;u++){const l=256*e+u;s[l]=n[e]^r[u],a[l]=o[e]^i[u],c[l]=t[e]<<8|t[u]}return{sbox:t,sbox2:c,T0:n,T1:r,T2:o,T3:i,T01:s,T23:a}}var ui=ci(ii,(t=>oi(t,3)<<24|t<<16|t<<8|oi(t,2))),li=ci(si,(t=>oi(t,11)<<24|oi(t,13)<<16|oi(t,9)<<8|oi(t,14))),hi=(()=>{const t=new Uint8Array(16);for(let e=0,n=1;e<16;e++,n=ri(n))t[e]=n;return t})();function fi(t){$o(t);const e=t.length;if(![16,24,32].includes(e))throw new Error(`aes: wrong key size: should be 16, 24 or 32, got: ${e}`);const{sbox2:n}=ui,r=qo(t),o=r.length,i=t=>gi(n,t,t,t,t),s=new Uint32Array(e+28);s.set(r);for(let t=o;t<s.length;t++){let e=s[t-1];t%o==0?e=i((a=e)<<24|a>>>8)^hi[t/o-1]:o>6&&t%o==4&&(e=i(e)),s[t]=s[t-o]^e}var a;return s}function di(t){const e=fi(t),n=e.slice(),r=e.length,{sbox2:o}=ui,{T0:i,T1:s,T2:a,T3:c}=li;for(let t=0;t<r;t+=4)for(let o=0;o<4;o++)n[t+o]=e[r-t-4+o];e.fill(0);for(let t=4;t<r-4;t++){const e=n[t],r=gi(o,e,e,e,e);n[t]=i[255&r]^s[r>>>8&255]^a[r>>>16&255]^c[r>>>24]}return n}function pi(t,e,n,r,o,i){return t[n<<8&65280|r>>>8&255]^e[o>>>8&65280|i>>>24&255]}function gi(t,e,n,r,o){return t[255&e|65280&n]|t[r>>>16&255|o>>>16&65280]<<16}function yi(t,e,n,r,o){const{sbox2:i,T01:s,T23:a}=ui;let c=0;e^=t[c++],n^=t[c++],r^=t[c++],o^=t[c++];const u=t.length/4-2;for(let i=0;i<u;i++){const i=t[c++]^pi(s,a,e,n,r,o),u=t[c++]^pi(s,a,n,r,o,e),l=t[c++]^pi(s,a,r,o,e,n),h=t[c++]^pi(s,a,o,e,n,r);e=i,n=u,r=l,o=h}return{s0:t[c++]^gi(i,e,n,r,o),s1:t[c++]^gi(i,n,r,o,e),s2:t[c++]^gi(i,r,o,e,n),s3:t[c++]^gi(i,o,e,n,r)}}function wi(t,e,n,r,o){const{sbox2:i,T01:s,T23:a}=li;let c=0;e^=t[c++],n^=t[c++],r^=t[c++],o^=t[c++];const u=t.length/4-2;for(let i=0;i<u;i++){const i=t[c++]^pi(s,a,e,o,r,n),u=t[c++]^pi(s,a,n,e,o,r),l=t[c++]^pi(s,a,r,n,e,o),h=t[c++]^pi(s,a,o,r,n,e);e=i,n=u,r=l,o=h}return{s0:t[c++]^gi(i,e,o,r,n),s1:t[c++]^gi(i,n,e,o,r),s2:t[c++]^gi(i,r,n,e,o),s3:t[c++]^gi(i,o,r,n,e)}}function bi(t,e){if(!e)return new Uint8Array(t);if($o(e),e.length<t)throw new Error(`aes: wrong destination length, expected at least ${t}, got: ${e.length}`);return e}function mi(t,e,n,r,o){$o(n,ei),$o(r),o=bi(r.length,o);const i=n,s=qo(i),a=Mo(i),c=qo(r),u=qo(o),l=e?0:12,h=r.length;let f=a.getUint32(l,e),{s0:d,s1:p,s2:g,s3:y}=yi(t,s[0],s[1],s[2],s[3]);for(let n=0;n+4<=c.length;n+=4)u[n+0]=c[n+0]^d,u[n+1]=c[n+1]^p,u[n+2]=c[n+2]^g,u[n+3]=c[n+3]^y,f=f+1>>>0,a.setUint32(l,f,e),({s0:d,s1:p,s2:g,s3:y}=yi(t,s[0],s[1],s[2],s[3]));const w=ei*Math.floor(c.length/4);if(w<h){const t=new Uint32Array([d,p,g,y]),e=Co(t);for(let t=w,n=0;t<h;t++,n++)o[t]=r[t]^e[n]}return o}Fo({blockSize:16,nonceLength:16},(function(t,e){function n(n,r){const o=fi(t),i=e.slice(),s=function(t,e,n,r){$o(e,ei),$o(n);const o=n.length;r=bi(o,r);const i=e,s=qo(i);let{s0:a,s1:c,s2:u,s3:l}=yi(t,s[0],s[1],s[2],s[3]);const h=qo(n),f=qo(r);for(let e=0;e+4<=h.length;e+=4){f[e+0]=h[e+0]^a,f[e+1]=h[e+1]^c,f[e+2]=h[e+2]^u,f[e+3]=h[e+3]^l;let n=1;for(let t=i.length-1;t>=0;t--)n=n+(255&i[t])|0,i[t]=255&n,n>>>=8;({s0:a,s1:c,s2:u,s3:l}=yi(t,s[0],s[1],s[2],s[3]))}const d=ei*Math.floor(h.length/4);if(d<o){const t=new Uint32Array([a,c,u,l]),e=Co(t);for(let t=d,i=0;t<o;t++,i++)r[t]=n[t]^e[i]}return r}(o,i,n,r);return o.fill(0),i.fill(0),s}return $o(t),$o(e,ei),{encrypt:(t,e)=>n(t,e),decrypt:(t,e)=>n(t,e)}}));function Ei(t){if($o(t),t.length%ei!=0)throw new Error("aes/(cbc-ecb).decrypt ciphertext should consist of blocks with size 16")}function vi(t,e,n){let r=t.length;const o=r%ei;if(!e&&0!==o)throw new Error("aec/(cbc-ecb): unpadded plaintext with disabled padding");const i=qo(t);if(e){let t=ei-o;t||(t=ei),r+=t}const s=bi(r,n);return{b:i,o:qo(s),out:s}}function xi(t,e){if(!e)return t;const n=t.length;if(!n)throw new Error("aes/pcks5: empty ciphertext not allowed");const r=t[n-1];if(r<=0||r>16)throw new Error(`aes/pcks5: wrong padding byte: ${r}`);const o=t.subarray(0,-r);for(let e=0;e<r;e++)if(t[n-e-1]!==r)throw new Error("aes/pcks5: wrong padding");return o}function Ai(t){const e=new Uint8Array(16),n=qo(e);e.set(t);const r=ei-t.length;for(let t=ei-r;t<ei;t++)e[t]=r;return n}Fo({blockSize:16},(function(t,e={}){$o(t);const n=!e.disablePadding;return{encrypt:(e,r)=>{$o(e);const{b:o,o:i,out:s}=vi(e,n,r),a=fi(t);let c=0;for(;c+4<=o.length;){const{s0:t,s1:e,s2:n,s3:r}=yi(a,o[c+0],o[c+1],o[c+2],o[c+3]);i[c++]=t,i[c++]=e,i[c++]=n,i[c++]=r}if(n){const t=Ai(e.subarray(4*c)),{s0:n,s1:r,s2:o,s3:s}=yi(a,t[0],t[1],t[2],t[3]);i[c++]=n,i[c++]=r,i[c++]=o,i[c++]=s}return a.fill(0),s},decrypt:(e,r)=>{Ei(e);const o=di(t),i=bi(e.length,r),s=qo(e),a=qo(i);for(let t=0;t+4<=s.length;){const{s0:e,s1:n,s2:r,s3:i}=wi(o,s[t+0],s[t+1],s[t+2],s[t+3]);a[t++]=e,a[t++]=n,a[t++]=r,a[t++]=i}return o.fill(0),xi(i,n)}}}));var ki=Fo({blockSize:16,nonceLength:16},(function(t,e,n={}){$o(t),$o(e,16);const r=!n.disablePadding;return{encrypt:(n,o)=>{const i=fi(t),{b:s,o:a,out:c}=vi(n,r,o),u=qo(e);let l=u[0],h=u[1],f=u[2],d=u[3],p=0;for(;p+4<=s.length;)l^=s[p+0],h^=s[p+1],f^=s[p+2],d^=s[p+3],({s0:l,s1:h,s2:f,s3:d}=yi(i,l,h,f,d)),a[p++]=l,a[p++]=h,a[p++]=f,a[p++]=d;if(r){const t=Ai(n.subarray(4*p));l^=t[0],h^=t[1],f^=t[2],d^=t[3],({s0:l,s1:h,s2:f,s3:d}=yi(i,l,h,f,d)),a[p++]=l,a[p++]=h,a[p++]=f,a[p++]=d}return i.fill(0),c},decrypt:(n,o)=>{Ei(n);const i=di(t),s=qo(e),a=bi(n.length,o),c=qo(n),u=qo(a);let l=s[0],h=s[1],f=s[2],d=s[3];for(let t=0;t+4<=c.length;){const e=l,n=h,r=f,o=d;l=c[t+0],h=c[t+1],f=c[t+2],d=c[t+3];const{s0:s,s1:a,s2:p,s3:g}=wi(i,l,h,f,d);u[t++]=s^e,u[t++]=a^n,u[t++]=p^r,u[t++]=g^o}return i.fill(0),xi(a,r)}}}));function Si(t,e,n,r,o){const i=t.create(n,r.length+(o?.length||0));o&&i.update(o),i.update(r);const s=new Uint8Array(16),a=Mo(s);return o&&Ko(a,0,BigInt(8*o.length),e),Ko(a,8,BigInt(8*r.length),e),i.update(s),i.digest()}Fo({blockSize:16,nonceLength:12,tagLength:16},(function(t,e,n){if($o(e),0===e.length)throw new Error("aes/gcm: empty nonce");const r=16;function o(t,e,r){const o=Si(Xo,!1,t,r,n);for(let t=0;t<e.length;t++)o[t]^=e[t];return o}function i(){const n=fi(t),r=ni.slice(),o=ni.slice();if(mi(n,!1,o,o,r),12===e.length)o.set(e);else{const t=ni.slice();Ko(Mo(t),8,BigInt(8*e.length),!1),Xo.create(r).update(e).update(t).digestInto(o)}return{xk:n,authKey:r,counter:o,tagMask:mi(n,!1,o,ni)}}return{encrypt:t=>{$o(t);const{xk:e,authKey:n,counter:s,tagMask:a}=i(),c=new Uint8Array(t.length+r);mi(e,!1,s,t,c);const u=o(n,a,c.subarray(0,c.length-r));return c.set(u,t.length),e.fill(0),c},decrypt:t=>{if($o(t),t.length<r)throw new Error("aes/gcm: ciphertext less than tagLen (16)");const{xk:e,authKey:n,counter:s,tagMask:a}=i(),c=t.subarray(0,-16),u=t.subarray(-16);if(!Do(o(n,a,c),u))throw new Error("aes/gcm: invalid ghash tag");const l=mi(e,!1,s,c);return n.fill(0),a.fill(0),e.fill(0),l}}}));var Bi=(t,e,n)=>r=>{if(!Number.isSafeInteger(r)||e>r||r>n)throw new Error(`${t}: invalid value=${r}, must be [${e}..${n}]`)};Fo({blockSize:16,nonceLength:12,tagLength:16},(function(t,e,n){const r=Bi("AAD",0,2**36),o=Bi("plaintext",0,2**36),i=Bi("nonce",12,12),s=Bi("ciphertext",16,2**36+16);function a(){const n=t.length;if(16!==n&&24!==n&&32!==n)throw new Error(`key length must be 16, 24 or 32 bytes, got: ${n} bytes`);const r=fi(t),o=new Uint8Array(n),i=new Uint8Array(16),s=qo(e);let a=0,c=s[0],u=s[1],l=s[2],h=0;for(const t of[i,o].map(qo)){const e=qo(t);for(let t=0;t<e.length;t+=2){const{s0:n,s1:o}=yi(r,a,c,u,l);e[t+0]=n,e[t+1]=o,a=++h}}return r.fill(0),{authKey:i,encKey:fi(o)}}function c(t,r,o){const i=Si(ti,!0,r,o,n);for(let t=0;t<12;t++)i[t]^=e[t];i[15]&=127;const s=qo(i);let a=s[0],c=s[1],u=s[2],l=s[3];return({s0:a,s1:c,s2:u,s3:l}=yi(t,a,c,u,l)),s[0]=a,s[1]=c,s[2]=u,s[3]=l,i}function u(t,e,n){let r=e.slice();return r[15]|=128,mi(t,!0,r,n)}return $o(e),i(e.length),n&&($o(n),r(n.length)),{encrypt:t=>{$o(t),o(t.length);const{encKey:e,authKey:n}=a(),r=c(e,n,t),i=new Uint8Array(t.length+16);return i.set(r,t.length),i.set(u(e,r,t)),e.fill(0),n.fill(0),i},decrypt:t=>{$o(t),s(t.length);const e=t.subarray(-16),{encKey:n,authKey:r}=a(),o=u(n,e,t.subarray(0,-16)),i=c(n,r,o);if(n.fill(0),r.fill(0),!Do(e,i))throw new Error("invalid polyval tag");return o}}}));async function Ui(t,e,n){const r=t instanceof Uint8Array?re(t):t,o=Li($t.getSharedSecret(r,"02"+e));let i=Uint8Array.from(ue(16)),s=Ue.encode(n),a=ki(o,i).encrypt(s);return`${eo.encode(new Uint8Array(a))}?iv=${eo.encode(new Uint8Array(i.buffer))}`}async function Ii(t,e,n){const r=t instanceof Uint8Array?re(t):t;let[o,i]=n.split("?iv="),s=Li($t.getSharedSecret(r,"02"+e)),a=eo.decode(i),c=eo.decode(o),u=ki(s,a).decrypt(c);return Be.decode(u)}function Li(t){return t.slice(1,33)}var Oi={};o(Oi,{NIP05_REGEX:()=>Ti,isNip05:()=>_i,isValid:()=>Pi,queryProfile:()=>Hi,searchDomain:()=>$i,useFetchImplementation:()=>Ni});var Ri,Ti=/^(?:([\w.+-]+)@)?([\w_-]+(\.[\w_-]+)+)$/,_i=t=>Ti.test(t||"");try{Ri=fetch}catch(t){}function Ni(t){Ri=t}async function $i(t,e=""){try{const n=`https://${t}/.well-known/nostr.json?name=${e}`,r=await Ri(n,{redirect:"manual"});if(200!==r.status)throw Error("Wrong response code");return(await r.json()).names}catch(t){return{}}}async function Hi(t){const e=t.match(Ti);if(!e)return null;const[,n="_",r]=e;try{const t=`https://${r}/.well-known/nostr.json?name=${n}`,e=await Ri(t,{redirect:"manual"});if(200!==e.status)throw Error("Wrong response code");const o=await e.json(),i=o.names[n];return i?{pubkey:i,relays:o.relays?.[i]}:null}catch(t){return null}}async function Pi(t,e){const n=await Hi(e);return!!n&&n.pubkey===t}var Ci={};function qi(t){const e={reply:void 0,root:void 0,mentions:[],profiles:[],quotes:[]};let n,r;for(let o=t.tags.length-1;o>=0;o--){const i=t.tags[o];if("e"===i[0]&&i[1]){const[t,o,s,a,c]=i,u={id:o,relays:s?[s]:[],author:c};if("root"===a){e.root=u;continue}if("reply"===a){e.reply=u;continue}if("mention"===a){e.mentions.push(u);continue}n?r=u:n=u,e.mentions.push(u)}else{if("q"===i[0]&&i[1]){const[t,n,r]=i;e.quotes.push({id:n,relays:r?[r]:[]})}"p"===i[0]&&i[1]&&e.profiles.push({pubkey:i[1],relays:i[2]?[i[2]]:[]})}}return e.root||(e.root=r||n||e.reply),e.reply||(e.reply=n||e.root),[e.reply,e.root].forEach((t=>{if(!t)return;let n=e.mentions.indexOf(t);if(-1!==n&&e.mentions.splice(n,1),t.author){let n=e.profiles.find((e=>e.pubkey===t.author));n&&n.relays&&(t.relays||(t.relays=[]),n.relays.forEach((e=>{-1===t.relays?.indexOf(e)&&t.relays.push(e)})),n.relays=t.relays)}})),e.mentions.forEach((t=>{if(t.author){let n=e.profiles.find((e=>e.pubkey===t.author));n&&n.relays&&(t.relays||(t.relays=[]),n.relays.forEach((e=>{-1===t.relays.indexOf(e)&&t.relays.push(e)})),n.relays=t.relays)}})),e}o(Ci,{parse:()=>qi});var Mi={};o(Mi,{fetchRelayInformation:()=>zi,useFetchImplementation:()=>ji});try{fetch}catch{}function ji(t){0}async function zi(t){return await(await fetch(t.replace("ws://","http://").replace("wss://","https://"),{headers:{Accept:"application/nostr+json"}})).json()}var Di={};function Fi(t){let e=0;for(let n=0;n<64;n+=8){const r=parseInt(t.substring(n,n+8),16);if(0!==r){e+=Math.clz32(r);break}e+=32}return e}function Ki(t,e){let n=0;const r=t,o=["nonce",n.toString(),e.toString()];for(r.tags.push(o);;){const t=Math.floor((new Date).getTime()/1e3);if(t!==r.created_at&&(n=0,r.created_at=t),o[1]=(++n).toString(),r.id=Vi(r),Fi(r.id)>=e)break}return r}function Vi(t){return re(ke(Ue.encode(JSON.stringify([0,t.pubkey,t.created_at,t.kind,t.tags,t.content]))))}o(Di,{fastEventHash:()=>Vi,getPow:()=>Fi,minePow:()=>Ki});var Wi={};function Zi(t,e,n,r){return qe({kind:tn,tags:[...t.tags??[],["e",e.id,n],["p",e.pubkey]],content:""===t.content?"":JSON.stringify(e),created_at:t.created_at},r)}function Gi(t){if(t.kind!==tn)return;let e,n;for(let r=t.tags.length-1;r>=0&&(void 0===e||void 0===n);r--){const o=t.tags[r];o.length>=2&&("e"===o[0]&&void 0===e?e=o:"p"===o[0]&&void 0===n&&(n=o))}return void 0!==e?{id:e[1],relays:[e[2],n?.[2]].filter((t=>"string"==typeof t)),author:n?.[1]}:void 0}function Ji(t,{skipVerification:e}={}){const n=Gi(t);if(void 0===n||""===t.content)return;let r;try{r=JSON.parse(t.content)}catch(t){return}return r.id===n.id&&(e||Me(r))?r:void 0}o(Wi,{finishRepostEvent:()=>Zi,getRepostedEvent:()=>Ji,getRepostedEventPointer:()=>Gi});var Yi={};o(Yi,{NOSTR_URI_REGEX:()=>Qi,parse:()=>ts,test:()=>Xi});var Qi=new RegExp(`nostr:(${wo.source})`);function Xi(t){return"string"==typeof t&&new RegExp(`^${Qi.source}$`).test(t)}function ts(t){const e=t.match(new RegExp(`^${Qi.source}$`));if(!e)throw new Error(`Invalid Nostr URI: ${t}`);return{uri:e[0],value:e[1],decoded:bo(e[1])}}var es={};function ns(t,e,n){const r=e.tags.filter((t=>t.length>=2&&("e"===t[0]||"p"===t[0])));return qe({...t,kind:en,tags:[...t.tags??[],...r,["e",e.id],["p",e.pubkey]],content:t.content??"+"},n)}function rs(t){if(t.kind!==en)return;let e,n;for(let r=t.tags.length-1;r>=0&&(void 0===e||void 0===n);r--){const o=t.tags[r];o.length>=2&&("e"===o[0]&&void 0===e?e=o:"p"===o[0]&&void 0===n&&(n=o))}return void 0!==e&&void 0!==n?{id:e[1],relays:[e[2],n[2]].filter((t=>void 0!==t)),author:n[1]}:void 0}o(es,{finishReactionEvent:()=>ns,getReactedEventPointer:()=>rs});var os={};o(os,{matchAll:()=>ss,regex:()=>is,replaceAll:()=>as});var is=()=>new RegExp(`\\b${Qi.source}\\b`,"g");function*ss(t){const e=t.matchAll(is());for(const t of e)try{const[e,n]=t;yield{uri:e,value:n,decoded:bo(n),start:t.index,end:t.index+e.length}}catch(t){}}function as(t,e){return t.replaceAll(is(),((t,n)=>e({uri:t,value:n,decoded:bo(n)})))}var cs={};o(cs,{channelCreateEvent:()=>us,channelHideMessageEvent:()=>fs,channelMessageEvent:()=>hs,channelMetadataEvent:()=>ls,channelMuteUserEvent:()=>ds});var us=(t,e)=>{let n;if("object"==typeof t.content)n=JSON.stringify(t.content);else{if("string"!=typeof t.content)return;n=t.content}return qe({kind:an,tags:[...t.tags??[]],content:n,created_at:t.created_at},e)},ls=(t,e)=>{let n;if("object"==typeof t.content)n=JSON.stringify(t.content);else{if("string"!=typeof t.content)return;n=t.content}return qe({kind:cn,tags:[["e",t.channel_create_event_id],...t.tags??[]],content:n,created_at:t.created_at},e)},hs=(t,e)=>{const n=[["e",t.channel_create_event_id,t.relay_url,"root"]];return t.reply_to_channel_message_event_id&&n.push(["e",t.reply_to_channel_message_event_id,t.relay_url,"reply"]),qe({kind:un,tags:[...n,...t.tags??[]],content:t.content,created_at:t.created_at},e)},fs=(t,e)=>{let n;if("object"==typeof t.content)n=JSON.stringify(t.content);else{if("string"!=typeof t.content)return;n=t.content}return qe({kind:ln,tags:[["e",t.channel_message_event_id],...t.tags??[]],content:n,created_at:t.created_at},e)},ds=(t,e)=>{let n;if("object"==typeof t.content)n=JSON.stringify(t.content);else{if("string"!=typeof t.content)return;n=t.content}return qe({kind:hn,tags:[["p",t.pubkey_to_mute],...t.tags??[]],content:n,created_at:t.created_at},e)},ps={};o(ps,{EMOJI_SHORTCODE_REGEX:()=>gs,matchAll:()=>ws,regex:()=>ys,replaceAll:()=>bs});var gs=/:(\w+):/,ys=()=>new RegExp(`\\B${gs.source}\\B`,"g");function*ws(t){const e=t.matchAll(ys());for(const t of e)try{const[e,n]=t;yield{shortcode:e,name:n,start:t.index,end:t.index+e.length}}catch(t){}}function bs(t,e){return t.replaceAll(ys(),((t,n)=>e({shortcode:t,name:n})))}var ms,Es={};o(Es,{useFetchImplementation:()=>vs,validateGithub:()=>xs});try{ms=fetch}catch{}function vs(t){ms=t}async function xs(t,e,n){try{return await(await ms(`https://gist.github.com/${e}/${n}/raw`)).text()===`Verifying that I control the following Nostr public key: ${t}`}catch(t){return!1}}var As={};o(As,{decrypt:()=>na,encrypt:()=>ea,getConversationKey:()=>Js,v2:()=>ra});var ks=(t,e)=>255&t[e++]|(255&t[e++])<<8,Ss=class{constructor(t){this.blockLen=16,this.outputLen=16,this.buffer=new Uint8Array(16),this.r=new Uint16Array(10),this.h=new Uint16Array(10),this.pad=new Uint16Array(8),this.pos=0,this.finished=!1,$o(t=zo(t),32);const e=ks(t,0),n=ks(t,2),r=ks(t,4),o=ks(t,6),i=ks(t,8),s=ks(t,10),a=ks(t,12),c=ks(t,14);this.r[0]=8191&e,this.r[1]=8191&(e>>>13|n<<3),this.r[2]=7939&(n>>>10|r<<6),this.r[3]=8191&(r>>>7|o<<9),this.r[4]=255&(o>>>4|i<<12),this.r[5]=i>>>1&8190,this.r[6]=8191&(i>>>14|s<<2),this.r[7]=8065&(s>>>11|a<<5),this.r[8]=8191&(a>>>8|c<<8),this.r[9]=c>>>5&127;for(let e=0;e<8;e++)this.pad[e]=ks(t,16+2*e)}process(t,e,n=!1){const r=n?0:2048,{h:o,r:i}=this,s=i[0],a=i[1],c=i[2],u=i[3],l=i[4],h=i[5],f=i[6],d=i[7],p=i[8],g=i[9],y=ks(t,e+0),w=ks(t,e+2),b=ks(t,e+4),m=ks(t,e+6),E=ks(t,e+8),v=ks(t,e+10),x=ks(t,e+12),A=ks(t,e+14);let k=o[0]+(8191&y),S=o[1]+(8191&(y>>>13|w<<3)),B=o[2]+(8191&(w>>>10|b<<6)),U=o[3]+(8191&(b>>>7|m<<9)),I=o[4]+(8191&(m>>>4|E<<12)),L=o[5]+(E>>>1&8191),O=o[6]+(8191&(E>>>14|v<<2)),R=o[7]+(8191&(v>>>11|x<<5)),T=o[8]+(8191&(x>>>8|A<<8)),_=o[9]+(A>>>5|r),N=0,$=N+k*s+S*(5*g)+B*(5*p)+U*(5*d)+I*(5*f);N=$>>>13,$&=8191,$+=L*(5*h)+O*(5*l)+R*(5*u)+T*(5*c)+_*(5*a),N+=$>>>13,$&=8191;let H=N+k*a+S*s+B*(5*g)+U*(5*p)+I*(5*d);N=H>>>13,H&=8191,H+=L*(5*f)+O*(5*h)+R*(5*l)+T*(5*u)+_*(5*c),N+=H>>>13,H&=8191;let P=N+k*c+S*a+B*s+U*(5*g)+I*(5*p);N=P>>>13,P&=8191,P+=L*(5*d)+O*(5*f)+R*(5*h)+T*(5*l)+_*(5*u),N+=P>>>13,P&=8191;let C=N+k*u+S*c+B*a+U*s+I*(5*g);N=C>>>13,C&=8191,C+=L*(5*p)+O*(5*d)+R*(5*f)+T*(5*h)+_*(5*l),N+=C>>>13,C&=8191;let q=N+k*l+S*u+B*c+U*a+I*s;N=q>>>13,q&=8191,q+=L*(5*g)+O*(5*p)+R*(5*d)+T*(5*f)+_*(5*h),N+=q>>>13,q&=8191;let M=N+k*h+S*l+B*u+U*c+I*a;N=M>>>13,M&=8191,M+=L*s+O*(5*g)+R*(5*p)+T*(5*d)+_*(5*f),N+=M>>>13,M&=8191;let j=N+k*f+S*h+B*l+U*u+I*c;N=j>>>13,j&=8191,j+=L*a+O*s+R*(5*g)+T*(5*p)+_*(5*d),N+=j>>>13,j&=8191;let z=N+k*d+S*f+B*h+U*l+I*u;N=z>>>13,z&=8191,z+=L*c+O*a+R*s+T*(5*g)+_*(5*p),N+=z>>>13,z&=8191;let D=N+k*p+S*d+B*f+U*h+I*l;N=D>>>13,D&=8191,D+=L*u+O*c+R*a+T*s+_*(5*g),N+=D>>>13,D&=8191;let F=N+k*g+S*p+B*d+U*f+I*h;N=F>>>13,F&=8191,F+=L*l+O*u+R*c+T*a+_*s,N+=F>>>13,F&=8191,N=(N<<2)+N|0,N=N+$|0,$=8191&N,N>>>=13,H+=N,o[0]=$,o[1]=H,o[2]=P,o[3]=C,o[4]=q,o[5]=M,o[6]=j,o[7]=z,o[8]=D,o[9]=F}finalize(){const{h:t,pad:e}=this,n=new Uint16Array(10);let r=t[1]>>>13;t[1]&=8191;for(let e=2;e<10;e++)t[e]+=r,r=t[e]>>>13,t[e]&=8191;t[0]+=5*r,r=t[0]>>>13,t[0]&=8191,t[1]+=r,r=t[1]>>>13,t[1]&=8191,t[2]+=r,n[0]=t[0]+5,r=n[0]>>>13,n[0]&=8191;for(let e=1;e<10;e++)n[e]=t[e]+r,r=n[e]>>>13,n[e]&=8191;n[9]-=8192;let o=(1^r)-1;for(let t=0;t<10;t++)n[t]&=o;o=~o;for(let e=0;e<10;e++)t[e]=t[e]&o|n[e];t[0]=65535&(t[0]|t[1]<<13),t[1]=65535&(t[1]>>>3|t[2]<<10),t[2]=65535&(t[2]>>>6|t[3]<<7),t[3]=65535&(t[3]>>>9|t[4]<<4),t[4]=65535&(t[4]>>>12|t[5]<<1|t[6]<<14),t[5]=65535&(t[6]>>>2|t[7]<<11),t[6]=65535&(t[7]>>>5|t[8]<<8),t[7]=65535&(t[8]>>>8|t[9]<<5);let i=t[0]+e[0];t[0]=65535&i;for(let n=1;n<8;n++)i=(t[n]+e[n]|0)+(i>>>16)|0,t[n]=65535&i}update(t){Ho(this);const{buffer:e,blockLen:n}=this,r=(t=zo(t)).length;for(let o=0;o<r;){const i=Math.min(n-this.pos,r-o);if(i!==n)e.set(t.subarray(o,o+i),this.pos),this.pos+=i,o+=i,this.pos===n&&(this.process(e,0,!1),this.pos=0);else for(;n<=r-o;o+=n)this.process(t,o)}return this}destroy(){this.h.fill(0),this.r.fill(0),this.buffer.fill(0),this.pad.fill(0)}digestInto(t){Ho(this),Po(t,this),this.finished=!0;const{buffer:e,h:n}=this;let{pos:r}=this;if(r){for(e[r++]=1;r<16;r++)e[r]=0;this.process(e,0,!0)}this.finalize();let o=0;for(let e=0;e<8;e++)t[o++]=n[e]>>>0,t[o++]=n[e]>>>8;return t}digest(){const{buffer:t,outputLen:e}=this;this.digestInto(t);const n=t.slice(0,e);return this.destroy(),n}};var Bs=function(t){const e=(e,n)=>t(n).update(zo(e)).digest(),n=t(new Uint8Array(32));return e.outputLen=n.outputLen,e.blockLen=n.blockLen,e.create=e=>t(e),e}((t=>new Ss(t))),Us=jo("expand 16-byte k"),Is=jo("expand 32-byte k"),Ls=qo(Us),Os=qo(Is);function Rs(t,e){return t<<e|t>>>32-e}function Ts(t){return t.byteOffset%4==0}var _s=2**32-1,Ns=new Uint32Array;function $s(t,e){const{allowShortKeys:n,extendNonceFn:r,counterLength:o,counterRight:i,rounds:s}=function(t,e){if(null==e||"object"!=typeof e)throw new Error("options must be defined");return Object.assign(t,e)}({allowShortKeys:!1,counterLength:8,counterRight:!1,rounds:20},e);if("function"!=typeof t)throw new Error("core must be a function");return To(o),To(s),_o(i),_o(n),(e,a,c,u,l=0)=>{$o(e),$o(a),$o(c);const h=c.length;if(u||(u=new Uint8Array(h)),$o(u),To(l),l<0||l>=_s)throw new Error("arx: counter overflow");if(u.length<h)throw new Error(`arx: output (${u.length}) is shorter than data (${h})`);const f=[];let d,p,g=e.length;if(32===g)d=e.slice(),f.push(d),p=Os;else{if(16!==g||!n)throw new Error(`arx: invalid 32-byte key, got length=${g}`);d=new Uint8Array(32),d.set(e),d.set(e,16),p=Ls,f.push(d)}Ts(a)||(a=a.slice(),f.push(a));const y=qo(d);if(r){if(24!==a.length)throw new Error("arx: extended nonce must be 24 bytes");r(p,y,qo(a.subarray(0,16)),y),a=a.subarray(16)}const w=16-o;if(w!==a.length)throw new Error(`arx: nonce must be ${w} or 16 bytes`);if(12!==w){const t=new Uint8Array(12);t.set(a,i?0:12-a.length),a=t,f.push(a)}const b=qo(a);for(!function(t,e,n,r,o,i,s,a){const c=o.length,u=new Uint8Array(64),l=qo(u),h=Ts(o)&&Ts(i),f=h?qo(o):Ns,d=h?qo(i):Ns;for(let p=0;p<c;s++){if(t(e,n,r,l,s,a),s>=_s)throw new Error("arx: counter overflow");const g=Math.min(64,c-p);if(h&&64===g){const t=p/4;if(p%4!=0)throw new Error("arx: invalid block position");for(let e,n=0;n<16;n++)e=t+n,d[e]=f[e]^l[n];p+=64}else{for(let t,e=0;e<g;e++)t=p+e,i[t]=o[t]^u[e];p+=g}}}(t,p,y,b,c,u,l,s);f.length>0;)f.pop().fill(0);return u}}function Hs(t,e,n,r,o,i=20){let s=t[0],a=t[1],c=t[2],u=t[3],l=e[0],h=e[1],f=e[2],d=e[3],p=e[4],g=e[5],y=e[6],w=e[7],b=o,m=n[0],E=n[1],v=n[2],x=s,A=a,k=c,S=u,B=l,U=h,I=f,L=d,O=p,R=g,T=y,_=w,N=b,$=m,H=E,P=v;for(let t=0;t<i;t+=2)x=x+B|0,N=Rs(N^x,16),O=O+N|0,B=Rs(B^O,12),x=x+B|0,N=Rs(N^x,8),O=O+N|0,B=Rs(B^O,7),A=A+U|0,$=Rs($^A,16),R=R+$|0,U=Rs(U^R,12),A=A+U|0,$=Rs($^A,8),R=R+$|0,U=Rs(U^R,7),k=k+I|0,H=Rs(H^k,16),T=T+H|0,I=Rs(I^T,12),k=k+I|0,H=Rs(H^k,8),T=T+H|0,I=Rs(I^T,7),S=S+L|0,P=Rs(P^S,16),_=_+P|0,L=Rs(L^_,12),S=S+L|0,P=Rs(P^S,8),_=_+P|0,L=Rs(L^_,7),x=x+U|0,P=Rs(P^x,16),T=T+P|0,U=Rs(U^T,12),x=x+U|0,P=Rs(P^x,8),T=T+P|0,U=Rs(U^T,7),A=A+I|0,N=Rs(N^A,16),_=_+N|0,I=Rs(I^_,12),A=A+I|0,N=Rs(N^A,8),_=_+N|0,I=Rs(I^_,7),k=k+L|0,$=Rs($^k,16),O=O+$|0,L=Rs(L^O,12),k=k+L|0,$=Rs($^k,8),O=O+$|0,L=Rs(L^O,7),S=S+B|0,H=Rs(H^S,16),R=R+H|0,B=Rs(B^R,12),S=S+B|0,H=Rs(H^S,8),R=R+H|0,B=Rs(B^R,7);let C=0;r[C++]=s+x|0,r[C++]=a+A|0,r[C++]=c+k|0,r[C++]=u+S|0,r[C++]=l+B|0,r[C++]=h+U|0,r[C++]=f+I|0,r[C++]=d+L|0,r[C++]=p+O|0,r[C++]=g+R|0,r[C++]=y+T|0,r[C++]=w+_|0,r[C++]=b+N|0,r[C++]=m+$|0,r[C++]=E+H|0,r[C++]=v+P|0}var Ps=$s(Hs,{counterRight:!1,counterLength:4,allowShortKeys:!1}),Cs=$s(Hs,{counterRight:!1,counterLength:8,extendNonceFn:function(t,e,n,r){let o=t[0],i=t[1],s=t[2],a=t[3],c=e[0],u=e[1],l=e[2],h=e[3],f=e[4],d=e[5],p=e[6],g=e[7],y=n[0],w=n[1],b=n[2],m=n[3];for(let t=0;t<20;t+=2)o=o+c|0,y=Rs(y^o,16),f=f+y|0,c=Rs(c^f,12),o=o+c|0,y=Rs(y^o,8),f=f+y|0,c=Rs(c^f,7),i=i+u|0,w=Rs(w^i,16),d=d+w|0,u=Rs(u^d,12),i=i+u|0,w=Rs(w^i,8),d=d+w|0,u=Rs(u^d,7),s=s+l|0,b=Rs(b^s,16),p=p+b|0,l=Rs(l^p,12),s=s+l|0,b=Rs(b^s,8),p=p+b|0,l=Rs(l^p,7),a=a+h|0,m=Rs(m^a,16),g=g+m|0,h=Rs(h^g,12),a=a+h|0,m=Rs(m^a,8),g=g+m|0,h=Rs(h^g,7),o=o+u|0,m=Rs(m^o,16),p=p+m|0,u=Rs(u^p,12),o=o+u|0,m=Rs(m^o,8),p=p+m|0,u=Rs(u^p,7),i=i+l|0,y=Rs(y^i,16),g=g+y|0,l=Rs(l^g,12),i=i+l|0,y=Rs(y^i,8),g=g+y|0,l=Rs(l^g,7),s=s+h|0,w=Rs(w^s,16),f=f+w|0,h=Rs(h^f,12),s=s+h|0,w=Rs(w^s,8),f=f+w|0,h=Rs(h^f,7),a=a+c|0,b=Rs(b^a,16),d=d+b|0,c=Rs(c^d,12),a=a+c|0,b=Rs(b^a,8),d=d+b|0,c=Rs(c^d,7);let E=0;r[E++]=o,r[E++]=i,r[E++]=s,r[E++]=a,r[E++]=y,r[E++]=w,r[E++]=b,r[E++]=m},allowShortKeys:!1}),qs=new Uint8Array(16),Ms=(t,e)=>{t.update(e);const n=e.length%16;n&&t.update(qs.subarray(n))},js=new Uint8Array(32);function zs(t,e,n,r,o){const i=t(e,n,js),s=Bs.create(i);o&&Ms(s,o),Ms(s,r);const a=new Uint8Array(16),c=Mo(a);Ko(c,0,BigInt(o?o.length:0),!0),Ko(c,8,BigInt(r.length),!0),s.update(a);const u=s.digest();return i.fill(0),u}var Ds=t=>(e,n,r)=>{const o=16;return $o(e,32),$o(n),{encrypt:(i,s)=>{const a=i.length,c=a+o;s?$o(s,c):s=new Uint8Array(c),t(e,n,i,s,1);const u=zs(t,e,n,s.subarray(0,-16),r);return s.set(u,a),s},decrypt:(i,s)=>{const a=i.length,c=a-o;if(a<o)throw new Error("encrypted data must be at least 16 bytes");s?$o(s,c):s=new Uint8Array(c);const u=i.subarray(0,-16);if(!Do(i.subarray(-16),zs(t,e,n,u,r)))throw new Error("invalid tag");return t(e,n,u,s,1),s}}},Fs=(Ds(Ps),Ds(Cs),class extends ae{constructor(t,e){super(),this.finished=!1,this.destroyed=!1,ye.hash(t);const n=ie(e);if(this.iHash=t.create(),"function"!=typeof this.iHash.update)throw new Error("Expected instance of class which extends utils.Hash");this.blockLen=this.iHash.blockLen,this.outputLen=this.iHash.outputLen;const r=this.blockLen,o=new Uint8Array(r);o.set(n.length>r?t.create().update(n).digest():n);for(let t=0;t<o.length;t++)o[t]^=54;this.iHash.update(o),this.oHash=t.create();for(let t=0;t<o.length;t++)o[t]^=106;this.oHash.update(o),o.fill(0)}update(t){return ye.exists(this),this.iHash.update(t),this}digestInto(t){ye.exists(this),ye.bytes(t,this.outputLen),this.finished=!0,this.iHash.digestInto(t),this.oHash.update(t),this.oHash.digestInto(t),this.destroy()}digest(){const t=new Uint8Array(this.oHash.outputLen);return this.digestInto(t),t}_cloneInto(t){t||(t=Object.create(Object.getPrototypeOf(this),{}));const{oHash:e,iHash:n,finished:r,destroyed:o,blockLen:i,outputLen:s}=this;return t.finished=r,t.destroyed=o,t.blockLen=i,t.outputLen=s,t.oHash=e._cloneInto(t.oHash),t.iHash=n._cloneInto(t.iHash),t}destroy(){this.destroyed=!0,this.oHash.destroy(),this.iHash.destroy()}}),Ks=(t,e,n)=>new Fs(t,e).update(n).digest();Ks.create=(t,e)=>new Fs(t,e);var Vs=new Uint8Array([0]),Ws=new Uint8Array;var Zs=1,Gs=65535;function Js(t,e){const n=$t.getSharedSecret(t,"02"+e).subarray(1,33);return r=ke,o=n,i="nip44-v2",ye.hash(r),void 0===i&&(i=new Uint8Array(r.outputLen)),Ks(r,ie(i),ie(o));var r,o,i}function Ys(t,e){const n=function(t,e,n,r=32){if(ye.hash(t),ye.number(r),r>255*t.outputLen)throw new Error("Length should be <= 255*HashLen");const o=Math.ceil(r/t.outputLen);void 0===n&&(n=Ws);const i=new Uint8Array(o*t.outputLen),s=Ks.create(t,e),a=s._cloneInto(),c=new Uint8Array(s.outputLen);for(let e=0;e<o;e++)Vs[0]=e+1,a.update(0===e?Ws:c).update(n).update(Vs).digestInto(c),i.set(c,t.outputLen*e),s._cloneInto(a);return s.destroy(),a.destroy(),c.fill(0),Vs.fill(0),i.slice(0,r)}(ke,t,e,76);return{chacha_key:n.subarray(0,32),chacha_nonce:n.subarray(32,44),hmac_key:n.subarray(44,76)}}function Qs(t){if(!Number.isSafeInteger(t)||t<1)throw new Error("expected positive integer");if(t<=32)return 32;const e=1<<Math.floor(Math.log2(t-1))+1,n=e<=256?32:e/8;return n*(Math.floor((t-1)/n)+1)}function Xs(t){const e=Ue.encode(t),n=e.length;return se(function(t){if(!Number.isSafeInteger(t)||t<Zs||t>Gs)throw new Error("invalid plaintext size: must be between 1 and 65535 bytes");const e=new Uint8Array(2);return new DataView(e.buffer).setUint16(0,t,!1),e}(n),e,new Uint8Array(Qs(n)-n))}function ta(t,e,n){if(32!==n.length)throw new Error("AAD associated data must be 32 bytes");const r=se(n,e);return Ks(ke,t,r)}function ea(t,e,n=ue(32)){const{chacha_key:r,chacha_nonce:o,hmac_key:i}=Ys(e,n),s=Xs(t),a=Ps(r,o,s),c=ta(i,a,n);return eo.encode(se(new Uint8Array([2]),n,a,c))}function na(t,e){const{nonce:n,ciphertext:r,mac:o}=function(t){if("string"!=typeof t)throw new Error("payload must be a valid string");const e=t.length;if(e<132||e>87472)throw new Error("invalid payload length: "+e);if("#"===t[0])throw new Error("unknown encryption version");let n;try{n=eo.decode(t)}catch(t){throw new Error("invalid base64: "+t.message)}const r=n.length;if(r<99||r>65603)throw new Error("invalid data length: "+r);const o=n[0];if(2!==o)throw new Error("unknown encryption version "+o);return{nonce:n.subarray(1,33),ciphertext:n.subarray(33,-32),mac:n.subarray(-32)}}(t),{chacha_key:i,chacha_nonce:s,hmac_key:a}=Ys(e,n);if(!Do(ta(a,r,n),o))throw new Error("invalid MAC");return function(t){const e=new DataView(t.buffer).getUint16(0),n=t.subarray(2,2+e);if(e<Zs||e>Gs||n.length!==e||t.length!==2+Qs(e))throw new Error("invalid padding");return Be.decode(n)}(Ps(i,s,r))}var ra={utils:{getConversationKey:Js,calcPaddedLen:Qs},encrypt:ea,decrypt:na},oa={};function ia(t){const{pathname:e,searchParams:n}=new URL(t),r=e,o=n.get("relay"),i=n.get("secret");if(!r||!o||!i)throw new Error("invalid connection string");return{pubkey:r,relay:o,secret:i}}async function sa(t,e,n){const r={method:"pay_invoice",params:{invoice:n}},o=await Ui(e,t,JSON.stringify(r)),i={kind:Dn,created_at:Math.round(Date.now()/1e3),content:o,tags:[["p",t]]};return qe(i,e)}o(oa,{makeNwcRequestEvent:()=>sa,parseConnectionString:()=>ia});var aa,ca={};o(ca,{getZapEndpoint:()=>la,makeZapReceipt:()=>da,makeZapRequest:()=>ha,useFetchImplementation:()=>ua,validateZapRequest:()=>fa});try{aa=fetch}catch{}function ua(t){aa=t}async function la(t){try{let e="",{lud06:n,lud16:r}=JSON.parse(t.content);if(n){let{words:t}=fo.decode(n,1e3),r=fo.fromWords(t);e=Be.decode(r)}else{if(!r)return null;{let[t,n]=r.split("@");e=new URL(`/.well-known/lnurlp/${t}`,`https://${n}`).toString()}}let o=await aa(e),i=await o.json();if(i.allowsNostr&&i.nostrPubkey)return i.callback}catch(t){}return null}function ha({profile:t,event:e,amount:n,relays:r,comment:o=""}){if(!n)throw new Error("amount not given");if(!t)throw new Error("profile not given");let i={kind:9734,created_at:Math.round(Date.now()/1e3),content:o,tags:[["p",t],["amount",n.toString()],["relays",...r]]};return e&&i.tags.push(["e",e]),i}function fa(t){let e;try{e=JSON.parse(t)}catch(t){return"Invalid zap request JSON."}if(!fe(e))return"Zap request is not a valid Nostr event.";if(!Me(e))return"Invalid signature on zap request.";let n=e.tags.find((([t,e])=>"p"===t&&e));if(!n)return"Zap request doesn't have a 'p' tag.";if(!n[1].match(/^[a-f0-9]{64}$/))return"Zap request 'p' tag is not valid hex.";let r=e.tags.find((([t,e])=>"e"===t&&e));return r&&!r[1].match(/^[a-f0-9]{64}$/)?"Zap request 'e' tag is not valid hex.":e.tags.find((([t,e])=>"relays"===t&&e))?null:"Zap request doesn't have a 'relays' tag."}function da({zapRequest:t,preimage:e,bolt11:n,paidAt:r}){let o=JSON.parse(t),i=o.tags.filter((([t])=>"e"===t||"p"===t||"a"===t)),s={kind:9735,created_at:Math.round(r.getTime()/1e3),content:"",tags:[...i,["P",o.pubkey],["bolt11",n],["description",t]]};return e&&s.tags.push(["preimage",e]),s}var pa={};o(pa,{createRumor:()=>Ea,createSeal:()=>va,createWrap:()=>xa,unwrapEvent:()=>Sa,unwrapManyEvents:()=>Ba,wrapEvent:()=>Aa,wrapManyEvents:()=>ka});var ga=()=>Math.round(Date.now()/1e3),ya=()=>Math.round(ga()-172800*Math.random()),wa=(t,e)=>Js(t,e),ba=(t,e,n)=>ea(JSON.stringify(t),wa(e,n)),ma=(t,e)=>JSON.parse(na(t.content,wa(e,t.pubkey)));function Ea(t,e){const n={created_at:ga(),content:"",tags:[],...t,pubkey:Ce(e)};return n.id=$e(n),n}function va(t,e,n){return qe({kind:rn,content:ba(t,e,n),created_at:ya(),tags:[]},e)}function xa(t,e){const n=Pe();return qe({kind:dn,content:ba(t,n,e),created_at:ya(),tags:[["p",e]]},n)}function Aa(t,e,n){return xa(va(Ea(t,e),e,n),n)}function ka(t,e,n){if(!n||0===n.length)throw new Error("At least one recipient is required.");const r=Ce(e),o=[Aa(t,e,r)];return n.forEach((n=>{o.push(Aa(t,e,n))})),o}function Sa(t,e){const n=ma(t,e);return ma(n,e)}function Ba(t,e){let n=[];return t.forEach((t=>{n.push(Sa(t,e))})),n.sort(((t,e)=>t.created_at-e.created_at)),n}var Ua={};o(Ua,{getToken:()=>Oa,hashPayload:()=>Pa,unpackEventFromToken:()=>Ta,validateEvent:()=>qa,validateEventKind:()=>Na,validateEventMethodTag:()=>Ha,validateEventPayloadTag:()=>Ca,validateEventTimestamp:()=>_a,validateEventUrlTag:()=>$a,validateToken:()=>Ra});var Ia,La="Nostr ";async function Oa(t,e,n,r=!1,o){const i={kind:Vn,tags:[["u",t],["method",e]],created_at:Math.round((new Date).getTime()/1e3),content:""};o&&i.tags.push(["payload",Pa(o)]);const s=await n(i);return(r?La:"")+eo.encode(Ue.encode(JSON.stringify(s)))}async function Ra(t,e,n){const r=await Ta(t).catch((t=>{throw t}));return await qa(r,e,n).catch((t=>{throw t}))}async function Ta(t){if(!t)throw new Error("Missing token");t=t.replace(La,"");const e=Be.decode(eo.decode(t));if(!e||0===e.length||!e.startsWith("{"))throw new Error("Invalid token");return JSON.parse(e)}function _a(t){return!!t.created_at&&Math.round((new Date).getTime()/1e3)-t.created_at<60}function Na(t){return t.kind===Vn}function $a(t,e){const n=t.tags.find((t=>"u"===t[0]));return!!n&&(n.length>0&&n[1]===e)}function Ha(t,e){const n=t.tags.find((t=>"method"===t[0]));return!!n&&(n.length>0&&n[1].toLowerCase()===e.toLowerCase())}function Pa(t){return re(ke(Ue.encode(JSON.stringify(t))))}function Ca(t,e){const n=t.tags.find((t=>"payload"===t[0]));if(!n)return!1;const r=Pa(e);return n.length>0&&n[1]===r}async function qa(t,e,n,r){if(!Me(t))throw new Error("Invalid nostr event, signature invalid");if(!Na(t))throw new Error("Invalid nostr event, kind invalid");if(!_a(t))throw new Error("Invalid nostr event, created_at timestamp invalid");if(!$a(t,e))throw new Error("Invalid nostr event, url tag invalid");if(!Ha(t,n))throw new Error("Invalid nostr event, method tag invalid");if(Boolean(r)&&"object"==typeof r&&Object.keys(r).length>0&&!Ca(t,r))throw new Error("Invalid nostr event, payload tag does not match request body hash");return!0}return Ia=i,((o,i,s,a)=>{if(i&&"object"==typeof i||"function"==typeof i)for(let c of n(i))r.call(o,c)||c===s||t(o,c,{get:()=>i[c],enumerable:!(a=e(i,c))||a.enumerable});return o})(t({},"__esModule",{value:!0}),Ia)})();
+//# sourceMappingURL=/sm/f29f5f5418a4e9d4df57df00b6b51f97de02afef7a8d582c6c8814bdab32efb1.map
\ No newline at end of file
diff --git a/views/channel-profile.html b/views/channel-profile.html
index 5a9a1ab4..90747dd6 100644
--- a/views/channel-profile.html
+++ b/views/channel-profile.html
@@ -27,82 +27,176 @@
           <p id="channelNpub" class="text-sm opacity-80">npub...</p>
         </div>
       </div>
-      <div class="flex items-center gap-2 self-start sm:self-end">
-        <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>
-        <button
-          id="channelShareBtn"
-          type="button"
-          class="icon-button"
-          aria-label="Share channel"
-        >
-          <img
-            src="assets/svg/share-video.svg"
-            alt="Share channel"
-            class="icon-image"
-          />
-        </button>
-        <div
-          class="relative inline-block overflow-visible"
-          data-more-menu-wrapper="true"
-        >
+      <div class="flex flex-col items-end gap-3 self-start sm:self-end">
+        <div class="flex items-center gap-2">
+          <div class="relative" data-channel-zap-wrapper>
+            <button
+              id="zapButton"
+              type="button"
+              class="icon-button"
+              aria-label="Open zap dialog"
+              aria-haspopup="dialog"
+              aria-expanded="false"
+              aria-controls="zapControls"
+            >
+              <img
+                src="assets/svg/lightning-bolt.svg"
+                alt="Zap"
+                class="icon-image"
+              />
+            </button>
+            <div
+              id="zapControls"
+              class="zap-popover hidden"
+              role="dialog"
+              aria-hidden="true"
+              aria-label="Channel zap dialog"
+            >
+              <div
+                class="zap-popover__content w-72 max-w-[calc(100vw-2rem)] rounded-lg p-4 shadow-lg"
+              >
+                <div class="mb-3 flex items-center justify-between gap-4">
+                  <h3
+                    class="text-xs font-semibold uppercase tracking-wide text-gray-300"
+                  >
+                    Send a zap
+                  </h3>
+                  <button
+                    type="button"
+                    id="zapCloseBtn"
+                    class="text-gray-400 transition-colors hover:text-gray-200"
+                    aria-label="Close zap dialog"
+                  >
+                    ✕
+                  </button>
+                </div>
+                <p
+                  id="zapWalletPrompt"
+                  class="mb-3 hidden text-sm text-gray-200"
+                  aria-hidden="true"
+                >
+                  Connect a wallet in
+                  <button
+                    type="button"
+                    id="zapWalletLink"
+                    class="font-semibold text-blue-300 underline decoration-dotted transition-colors hover:text-blue-200"
+                  >
+                    Wallet Connect settings
+                  </button>
+                  to send zaps.
+                </p>
+                <form id="zapForm" class="space-y-3">
+                  <div>
+                    <label
+                      for="zapAmountInput"
+                      id="zapAmountLabel"
+                      class="mb-2 block text-xs font-semibold uppercase tracking-wide text-gray-300"
+                    >
+                      Zap amount (sats)
+                    </label>
+                    <input
+                      id="zapAmountInput"
+                      type="number"
+                      min="1"
+                      step="1"
+                      inputmode="numeric"
+                      class="w-full rounded border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                      placeholder="Enter sats"
+                      aria-labelledby="zapAmountLabel"
+                    />
+                  </div>
+                  <p
+                    id="zapSplitSummary"
+                    class="text-sm text-gray-300"
+                    aria-live="polite"
+                  >
+                    Enter an amount to view the split.
+                  </p>
+                  <p
+                    id="zapStatus"
+                    class="text-xs text-gray-400"
+                    role="status"
+                    aria-live="polite"
+                  ></p>
+                  <ul id="zapReceipts" class="space-y-2 text-xs text-gray-300"></ul>
+                  <div class="flex items-center justify-end gap-2">
+                    <button
+                      type="submit"
+                      id="zapSendBtn"
+                      class="rounded bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
+                      aria-label="Send a zap"
+                    >
+                      Send
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
           <button
-            id="channelMoreBtn"
+            id="channelShareBtn"
             type="button"
             class="icon-button"
-            aria-haspopup="true"
-            aria-expanded="false"
-            aria-label="Channel options"
-            data-more-dropdown="channel-profile"
+            aria-label="Share channel"
           >
-            <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
+            <img
+              src="assets/svg/share-video.svg"
+              alt="Share channel"
+              class="icon-image"
+            />
           </button>
           <div
-            id="moreDropdown-channel-profile"
-            class="hidden absolute right-0 top-12 w-48 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            role="menu"
-            data-more-menu="true"
+            class="relative inline-block overflow-visible"
+            data-more-menu-wrapper="true"
           >
-            <div class="py-1">
-              <button
-                class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                data-action="copy-npub"
-                data-context="channel-profile"
-              >
-                Copy npub
-              </button>
-              <button
-                class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
-                data-action="blacklist-author"
-                data-context="channel-profile"
-                data-blacklist-menu="true"
-              >
-                Blacklist channel
-              </button>
-              <button
-                class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
-                data-action="block-author"
-                data-context="channel-profile"
-              >
-                Block channel
-              </button>
-              <button
-                class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                data-action="report"
-                data-context="channel-profile"
-              >
-                Report
-              </button>
+            <button
+              id="channelMoreBtn"
+              type="button"
+              class="icon-button"
+              aria-haspopup="true"
+              aria-expanded="false"
+              aria-label="Channel options"
+              data-more-dropdown="channel-profile"
+            >
+              <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
+            </button>
+            <div
+              id="moreDropdown-channel-profile"
+              class="hidden absolute right-0 top-12 w-48 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+              role="menu"
+              data-more-menu="true"
+            >
+              <div class="py-1">
+                <button
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                  data-action="copy-npub"
+                  data-context="channel-profile"
+                >
+                  Copy npub
+                </button>
+                <button
+                  class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                  data-action="blacklist-author"
+                  data-context="channel-profile"
+                  data-blacklist-menu="true"
+                >
+                  Blacklist channel
+                </button>
+                <button
+                  class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                  data-action="block-author"
+                  data-context="channel-profile"
+                >
+                  Block channel
+                </button>
+                <button
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                  data-action="report"
+                  data-context="channel-profile"
+                >
+                  Report
+                </button>
+              </div>
             </div>
           </div>
         </div>