[security] replace innerHTML in RevertModal.js

Migrated `js/ui/components/RevertModal.js` to safe DOM APIs (`createElement`, `textContent`, `DOMParser`).
Extracted rendering logic to `js/ui/components/revertModalRenderers.js`.
Updated baseline in `scripts/check-innerhtml.mjs` (0 remaining usages).
Updated tests to mock DOMParser.

Co-authored-by: PR0M3TH3AN <[email protected]>

context/CONTEXT_2026-02-14_17-35-00.md

@@ -0,0 +1,6 @@
+# Context
+
+* **File:** `js/ui/components/RevertModal.js`
+* **Reason:** Highest innerHTML usage count (10) in the daily report.
+* **Date:** 2026-02-14
+* **Plan:** Migrate `innerHTML` assignments to `document.createElement`, `textContent`, and safe DOM manipulation.

decisions/DECISIONS_2026-02-14_17-35-00.md

@@ -0,0 +1,30 @@
+# Decisions - RevertModal innerHTML Migration
+
+## Context
+`js/ui/components/RevertModal.js` had 10 assignments to `innerHTML`, making it a high-priority target for migration to safe DOM APIs. The file builds complex UI structures for revision history, including metadata, tags, and media variants.
+
+## Strategies
+
+### 1. DOM Construction
+Replaced template strings with `document.createElement`.
+- Created helper methods (`createPlaceholder`, `createListEmpty`, `createLinkMarkup`) to standardize element creation.
+- Used `DocumentFragment` where appropriate to minimize reflows, though direct appending to parent was used for simplicity in linear structures.
+
+### 2. Complex Renderers Extraction
+The file size of `RevertModal.js` grew significantly (from ~1660 lines to ~1900 lines) due to the verbosity of DOM API vs template strings.
+- **Decision:** Extracted complex rendering logic (IMeta variants, tracks, segments, participants, etc.) into a new module: `js/ui/components/revertModalRenderers.js`.
+- This reduced the main file size and kept it compliant with linting rules.
+- Dependencies (`createPlaceholder`, etc.) are passed to these renderers via a `utils` object to avoid tight coupling or circular dependencies.
+
+### 3. Initialization
+- Replaced `wrapper.innerHTML = html` in `load()` with `DOMParser`.
+- Replaced `this.details.innerHTML = this.detailsDefaultHTML` in `reset()` with `DOMParser`.
+- While `detailsDefaultHTML` is trusted (sourced from static template), using `DOMParser` ensures 0 usages of `innerHTML` in the file.
+
+### 4. Tests
+- Updated `tests/modal-accessibility.test.mjs` to mock `DOMParser` in the Node.js test environment (JSDOM).
+
+## Results
+- `innerHTML` count for `RevertModal.js`: 0 (removed from baseline).
+- File size violation resolved by extraction.
+- Functionality preserved (verified via unit tests).

docs/agents/task-logs/daily/2026-02-14_17-35-00_innerhtml-migration-agent_completed.md

@@ -0,0 +1,30 @@
+# Agent Completion Log
+
+**Agent:** `innerhtml-migration-agent`
+**Date:** 2026-02-14
+**Cadence:** Daily
+
+## Task Summary
+Migrated `js/ui/components/RevertModal.js` from `innerHTML` to safe DOM APIs. This file had the highest usage (10 assignments).
+
+## Actions Taken
+1.  **Refactoring:**
+    *   Replaced all `innerHTML` assignments with `document.createElement`, `textContent`, and `replaceChildren`.
+    *   Switched `load()` and `reset()` logic to use `DOMParser` for safe parsing of trusted templates.
+    *   Extracted complex rendering logic (NIP-71 media metadata, variants, tracks) to a new module `js/ui/components/revertModalRenderers.js` to manage file size complexity.
+
+2.  **Verification:**
+    *   Updated `tests/modal-accessibility.test.mjs` to mock `DOMParser` in the test environment.
+    *   Ran `npm run lint` and `npm run test:unit` successfully.
+    *   Verified `innerHTML` usage for the file dropped to 0.
+
+3.  **Baseline Update:**
+    *   Updated `scripts/check-innerhtml.mjs` to remove `RevertModal.js` from the tracking list.
+
+## Artifacts
+*   `js/ui/components/RevertModal.js`
+*   `js/ui/components/revertModalRenderers.js`
+*   `scripts/check-innerhtml.mjs`
+*   `tests/modal-accessibility.test.mjs`
+*   `decisions/DECISIONS_2026-02-14_17-35-00.md`
+*   `test_logs/TEST_LOG_2026-02-14_17-35-00.md`

js/ui/components/revertModalRenderers.js

@@ -0,0 +1,439 @@
+export function createImetaVariants(variants, utils) {
+  const { createListEmpty, createPlaceholder, createLinkMarkup } = utils;
+
+  if (!Array.isArray(variants) || variants.length === 0) {
+    return createListEmpty("No media variants provided.");
+  }
+
+  const ol = document.createElement("ol");
+  ol.className = "space-y-3";
+
+  variants.forEach((variant, index) => {
+    if (!variant) return;
+
+    const li = document.createElement("li");
+    li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-3";
+
+    // Header
+    const headerDiv = document.createElement("div");
+    headerDiv.className = "flex flex-wrap items-center justify-between gap-2 text-xs text-muted";
+
+    const variantLabel = document.createElement("span");
+    variantLabel.className = "font-semibold text-primary";
+    variantLabel.textContent = `Variant ${index + 1}`;
+    headerDiv.appendChild(variantLabel);
+
+    if (variant.autoGenerated) {
+      const badgesDiv = document.createElement("div");
+      badgesDiv.className = "flex flex-wrap gap-2";
+      const badge = document.createElement("span");
+      badge.className = "badge";
+      badge.dataset.variant = "warning";
+      badge.textContent = "Auto-generated";
+      badgesDiv.appendChild(badge);
+      headerDiv.appendChild(badgesDiv);
+    }
+    li.appendChild(headerDiv);
+
+    // DL Grid
+    const dl = document.createElement("dl");
+    dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle";
+
+    const createDtDd = (label, contentNode, colSpan = false) => {
+      const div = document.createElement("div");
+      if (colSpan) div.className = "sm:col-span-2";
+
+      const dt = document.createElement("dt");
+      dt.className = "font-semibold text-primary";
+      dt.textContent = label;
+      div.appendChild(dt);
+
+      const dd = document.createElement("dd");
+      dd.className = "mt-1";
+      dd.appendChild(contentNode);
+      div.appendChild(dd);
+
+      return div;
+    };
+
+    // Mime
+    const mimeNode = variant.m
+      ? (() => {
+          const c = document.createElement("code");
+          c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary";
+          c.textContent = variant.m;
+          return c;
+        })()
+      : createPlaceholder();
+    dl.appendChild(createDtDd("MIME type", mimeNode));
+
+    // Dim
+    const dimNode = variant.dim
+      ? (() => {
+          const c = document.createElement("code");
+          c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary";
+          c.textContent = variant.dim;
+          return c;
+        })()
+      : createPlaceholder();
+    dl.appendChild(createDtDd("Dimensions", dimNode));
+
+    // URL
+    const urlNode = variant.url
+      ? createLinkMarkup(variant.url)
+      : createPlaceholder("No URL");
+    dl.appendChild(createDtDd("URL", urlNode, true));
+
+    // Hash
+    const hashNode = variant.x
+      ? (() => {
+          const c = document.createElement("code");
+          c.className = "break-all rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary";
+          c.textContent = variant.x;
+          return c;
+        })()
+      : createPlaceholder("Not provided");
+    dl.appendChild(createDtDd("Content hash", hashNode, true));
+
+    li.appendChild(dl);
+
+    // Nested lists
+    const nestedGrid = document.createElement("div");
+    nestedGrid.className = "grid gap-3 sm:grid-cols-3 text-xs text-subtle";
+
+    const createNestedList = (label, values, emptyLabel) => {
+      const container = document.createElement("div");
+
+      const p = document.createElement("p");
+      p.className = "text-2xs uppercase tracking-wide text-subtle";
+      p.textContent = label;
+      container.appendChild(p);
+
+      if (!Array.isArray(values) || values.length === 0) {
+        container.appendChild(createListEmpty(emptyLabel));
+        return container;
+      }
+
+      const validItems = values
+         .map(v => createLinkMarkup(v))
+         .filter(node => node.textContent !== "");
+
+      if (validItems.length === 0) {
+         container.appendChild(createListEmpty(emptyLabel));
+         return container;
+      }
+
+      const ul = document.createElement("ul");
+      ul.className = "mt-1 space-y-1 text-xs text-primary";
+      validItems.forEach(itemNode => {
+        const itemLi = document.createElement("li");
+        itemLi.appendChild(itemNode);
+        ul.appendChild(itemLi);
+      });
+      container.appendChild(ul);
+      return container;
+    };
+
+    nestedGrid.appendChild(createNestedList("Images", variant.image, "No image URLs."));
+    nestedGrid.appendChild(createNestedList("Fallbacks", variant.fallback, "No fallback URLs."));
+    nestedGrid.appendChild(createNestedList("Services", variant.service, "No service hints."));
+
+    li.appendChild(nestedGrid);
+    ol.appendChild(li);
+  });
+
+  return ol;
+}
+
+export function createTextTracks(tracks, utils) {
+  const { createListEmpty, createPlaceholder, createLinkMarkup } = utils;
+
+  if (!Array.isArray(tracks) || tracks.length === 0) {
+    return createListEmpty("No caption tracks.");
+  }
+
+  const ol = document.createElement("ol");
+  ol.className = "space-y-3";
+
+  tracks.forEach((track, index) => {
+    const li = document.createElement("li");
+    li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-3";
+
+    const headerDiv = document.createElement("div");
+    headerDiv.className = "flex items-center justify-between text-xs text-muted";
+
+    const label = document.createElement("span");
+    label.className = "font-semibold text-primary";
+    label.textContent = `Track ${index + 1}`;
+    headerDiv.appendChild(label);
+
+    if (track.language) {
+      const langSpan = document.createElement("span");
+      langSpan.className = "pill";
+      langSpan.dataset.size = "compact";
+      langSpan.dataset.variant = "neutral";
+      langSpan.textContent = track.language;
+      headerDiv.appendChild(langSpan);
+    }
+    li.appendChild(headerDiv);
+
+    const dl = document.createElement("dl");
+    dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle";
+
+    const createDtDd = (label, contentNode, colSpan = false) => {
+      const div = document.createElement("div");
+      if (colSpan) div.className = "sm:col-span-2";
+
+      const dt = document.createElement("dt");
+      dt.className = "font-semibold text-primary";
+      dt.textContent = label;
+      div.appendChild(dt);
+
+      const dd = document.createElement("dd");
+      dd.className = "mt-1";
+      dd.appendChild(contentNode);
+      div.appendChild(dd);
+      return div;
+    };
+
+    const urlNode = track.url
+      ? createLinkMarkup(track.url)
+      : createPlaceholder("No URL");
+    dl.appendChild(createDtDd("URL", urlNode, true));
+
+    const typeNode = track.type
+      ? (() => {
+          const c = document.createElement("code");
+          c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary";
+          c.textContent = track.type;
+          return c;
+        })()
+      : createPlaceholder();
+    dl.appendChild(createDtDd("Type", typeNode));
+
+    const langNode = track.language
+      ? (() => {
+          const s = document.createElement("span");
+          s.className = "pill";
+          s.dataset.size = "compact";
+          s.dataset.variant = "neutral";
+          s.textContent = track.language;
+          return s;
+        })()
+      : createPlaceholder();
+    dl.appendChild(createDtDd("Language", langNode));
+
+    li.appendChild(dl);
+    ol.appendChild(li);
+  });
+
+  return ol;
+}
+
+export function createSegments(segments, utils) {
+  const { createListEmpty, createPlaceholder, createLinkMarkup, formatDurationSeconds } = utils;
+
+  if (!Array.isArray(segments) || segments.length === 0) {
+    return createListEmpty("No chapter segments.");
+  }
+
+  const ol = document.createElement("ol");
+  ol.className = "space-y-3";
+
+  const createTimeNode = (seconds, raw) => {
+    if (Number.isFinite(seconds)) {
+      const display = formatDurationSeconds(seconds);
+      const suffix = seconds === 1 ? "second" : "seconds";
+      const frag = document.createDocumentFragment();
+      const span1 = document.createElement("span");
+      span1.className = "text-primary";
+      span1.textContent = display;
+      frag.appendChild(span1);
+
+      const space = document.createTextNode(" ");
+      frag.appendChild(space);
+
+      const span2 = document.createElement("span");
+      span2.className = "text-subtle";
+      span2.textContent = `(${seconds} ${suffix})`;
+      frag.appendChild(span2);
+      return frag;
+    }
+    if (raw) {
+      const span = document.createElement("span");
+      span.className = "text-primary";
+      span.textContent = raw;
+      return span;
+    }
+    return createPlaceholder();
+  };
+
+  segments.forEach((segment, index) => {
+    const li = document.createElement("li");
+    li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-3";
+
+    const headerDiv = document.createElement("div");
+    headerDiv.className = "text-xs font-semibold text-primary";
+    headerDiv.textContent = `Chapter ${index + 1}`;
+    li.appendChild(headerDiv);
+
+    const dl = document.createElement("dl");
+    dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle";
+
+    const createDtDd = (label, contentNode, colSpan = false) => {
+      const div = document.createElement("div");
+      if (colSpan) div.className = "sm:col-span-2";
+
+      const dt = document.createElement("dt");
+      dt.className = "font-semibold text-primary";
+      dt.textContent = label;
+      div.appendChild(dt);
+
+      const dd = document.createElement("dd");
+      dd.className = "mt-1";
+      dd.appendChild(contentNode);
+      div.appendChild(dd);
+      return div;
+    };
+
+    dl.appendChild(createDtDd("Start", createTimeNode(segment.startSeconds, segment.startRaw)));
+    dl.appendChild(createDtDd("End", createTimeNode(segment.endSeconds, segment.endRaw)));
+
+    const titleNode = segment.title
+      ? (() => {
+          const p = document.createElement("p");
+          p.className = "whitespace-pre-wrap text-primary";
+          p.textContent = segment.title;
+          return p;
+        })()
+      : createPlaceholder("No title");
+    dl.appendChild(createDtDd("Title", titleNode, true));
+
+    const thumbNode = segment.thumbnail
+      ? createLinkMarkup(segment.thumbnail)
+      : createPlaceholder("No thumbnail");
+    dl.appendChild(createDtDd("Thumbnail", thumbNode, true));
+
+    li.appendChild(dl);
+    ol.appendChild(li);
+  });
+
+  return ol;
+}
+
+export function createHashtags(hashtags, utils) {
+  const { createListEmpty } = utils;
+
+  if (!Array.isArray(hashtags) || hashtags.length === 0) {
+    return createListEmpty("No hashtags provided.");
+  }
+
+  const div = document.createElement("div");
+  div.className = "flex flex-wrap gap-2";
+
+  hashtags.forEach(tag => {
+    const label = tag.startsWith("#") ? tag : `#${tag}`;
+    const span = document.createElement("span");
+    span.className = "pill";
+    span.dataset.size = "compact";
+    span.dataset.variant = "neutral";
+    span.textContent = label;
+    div.appendChild(span);
+  });
+
+  return div;
+}
+
+export function createParticipants(participants, utils) {
+  const { createListEmpty, createPlaceholder, createLinkMarkup, truncateMiddle } = utils;
+
+  if (!Array.isArray(participants) || participants.length === 0) {
+    return createListEmpty("No participants listed.");
+  }
+
+  const ol = document.createElement("ol");
+  ol.className = "space-y-3";
+
+  participants.forEach((participant, index) => {
+    const li = document.createElement("li");
+    li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-2";
+
+    const headerDiv = document.createElement("div");
+    headerDiv.className = "text-xs font-semibold text-primary";
+    headerDiv.textContent = `Participant ${index + 1}`;
+    li.appendChild(headerDiv);
+
+    const dl = document.createElement("dl");
+    dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle";
+
+    const createDtDd = (label, contentNode, colSpan = false) => {
+      const div = document.createElement("div");
+      if (colSpan) div.className = "sm:col-span-2";
+
+      const dt = document.createElement("dt");
+      dt.className = "font-semibold text-primary";
+      dt.textContent = label;
+      div.appendChild(dt);
+
+      const dd = document.createElement("dd");
+      dd.className = "mt-1";
+      dd.appendChild(contentNode);
+      div.appendChild(dd);
+      return div;
+    };
+
+    const displayPubkey = participant.pubkey
+      ? truncateMiddle
+        ? truncateMiddle(participant.pubkey, 48)
+        : participant.pubkey
+      : "";
+
+    const pubkeyNode = participant.pubkey
+      ? (() => {
+          const c = document.createElement("code");
+          c.className = "break-all rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary";
+          c.title = participant.pubkey;
+          c.textContent = displayPubkey;
+          return c;
+        })()
+      : createPlaceholder("No pubkey");
+    dl.appendChild(createDtDd("Pubkey", pubkeyNode, true));
+
+    const relayNode = participant.relay
+      ? createLinkMarkup(participant.relay, { breakAll: false })
+      : createPlaceholder("No relay specified");
+    dl.appendChild(createDtDd("Relay", relayNode, true));
+
+    li.appendChild(dl);
+    ol.appendChild(li);
+  });
+
+  return ol;
+}
+
+export function createReferences(references, utils) {
+  const { createListEmpty, createLinkMarkup } = utils;
+
+  if (!Array.isArray(references) || references.length === 0) {
+    return createListEmpty("No external references.");
+  }
+
+  const items = references
+    .map((entry) => createLinkMarkup(entry))
+    .filter(node => node.textContent !== "");
+
+  if (items.length === 0) {
+    return createListEmpty("No external references.");
+  }
+
+  const ul = document.createElement("ul");
+  ul.className = "space-y-1 text-xs text-primary";
+
+  items.forEach(node => {
+    const li = document.createElement("li");
+    li.appendChild(node);
+    ul.appendChild(li);
+  });
+
+  return ul;
+}

scripts/check-innerhtml.mjs

@@ -35,7 +35,6 @@ const BASELINE = {
   "js/ui/components/EmbedVideoModal.js": 1,
   "js/ui/components/EventDetailsModal.js": 1,
   "js/ui/components/nip71FormManager.js": 1,
-  "js/ui/components/RevertModal.js": 10,
   "js/ui/components/ShareNostrModal.js": 3,
   "js/ui/components/UploadModal.js": 1,
   "js/ui/components/VideoModal.js": 1,

test_logs/TEST_LOG_2026-02-14_17-35-00.md

@@ -0,0 +1,16 @@
+# Test Log
+
+* **Initial State:**
+  * File selected: `js/ui/components/RevertModal.js`
+  * `innerHTML` count: 10
+
+* **Verification:**
+  * `npm run lint`: Passed (file size check passed after extraction).
+  * `npm run test:unit`: Passed (fixed `DOMParser` reference error).
+  * `node scripts/check-innerhtml.mjs --report`: `RevertModal.js` absent (count 0).
+
+* **Artifacts:**
+  * `js/ui/components/RevertModal.js` (Modified)
+  * `js/ui/components/revertModalRenderers.js` (Created)
+  * `scripts/check-innerhtml.mjs` (Updated baseline)
+  * `tests/modal-accessibility.test.mjs` (Updated test harness)

tests/modal-accessibility.test.mjs

@@ -38,6 +38,7 @@ function installDom(html) {
   globalThis.CustomEvent = window.CustomEvent;
   globalThis.Event = window.Event;
   globalThis.Node = window.Node;
+  globalThis.DOMParser = window.DOMParser;
   Object.defineProperty(globalThis, "navigator", {
     value: window.navigator,
     writable: true,
@@ -64,6 +65,7 @@ function installDom(html) {
     delete globalThis.CustomEvent;
     delete globalThis.Event;
     delete globalThis.Node;
+    delete globalThis.DOMParser;
     delete globalThis.navigator;
     delete globalThis.location;
     delete globalThis.KeyboardEvent;

todo/TODO_2026-02-14_17-35-00.md

@@ -0,0 +1,12 @@
+# Todo
+
+* [ ] `wrapper.innerHTML = html;` (load method)
+* [ ] `this.list.innerHTML = "";` (reset method)
+* [ ] `this.details.innerHTML = this.detailsDefaultHTML;` (reset method)
+* [ ] `this.details.innerHTML = "";` (reset method)
+* [ ] `this.list.innerHTML = "";` (renderRevertVersionsList method)
+* [ ] `this.list.innerHTML = ...;` (renderRevertVersionsList method - "No revisions found")
+* [ ] `button.innerHTML = ...;` (renderRevertVersionsList method - main loop)
+* [ ] `this.details.innerHTML = this.detailsDefaultHTML;` (renderRevertVersionDetails method)
+* [ ] `this.details.innerHTML = "";` (renderRevertVersionDetails method)
+* [ ] `this.details.innerHTML = ...;` (renderRevertVersionDetails method - main template)