Parallel Participant Notepad

<div id="ppn-prototype">
  <style>
    #ppn-prototype {
      color: var(--foreground);
      background: transparent;
    }
    #ppn-prototype .ppn-shell {
      display: grid;
      gap: 1rem;
    }
    #ppn-prototype .ppn-status {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      align-items: center;
    }
    #ppn-prototype .ppn-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: 1rem;
      align-items: start;
    }
    #ppn-prototype .ppn-pane {
      min-width: 0;
    }
    #ppn-prototype .ppn-pane-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: .75rem;
      margin-bottom: .6rem;
    }
    #ppn-prototype .ppn-thread {
      display: grid;
      gap: .75rem;
    }
    #ppn-prototype .ppn-message {
      border-left: 2px solid var(--border);
      padding-left: .75rem;
    }
    #ppn-prototype .ppn-message[data-role="participant"] {
      border-left-color: var(--viz-series-1);
    }
    #ppn-prototype .ppn-message p {
      margin: .2rem 0 0;
    }
    #ppn-prototype .ppn-note-list {
      display: grid;
      gap: .65rem;
      margin: .75rem 0;
    }
    #ppn-prototype .ppn-note {
      border-left: 3px solid var(--border);
      padding: .55rem .7rem;
      background: color-mix(in srgb, var(--muted) 42%, transparent);
    }
    #ppn-prototype .ppn-note[data-status="considered"] {
      border-left-color: var(--viz-series-2);
    }
    #ppn-prototype .ppn-note[data-status="noticed"] {
      border-left-color: var(--viz-series-6);
    }
    #ppn-prototype .ppn-note[data-status="retained"] {
      border-left-color: var(--viz-series-3);
    }
    #ppn-prototype .ppn-note[data-status="endorsed"] {
      border-left-color: var(--viz-series-4);
    }
    #ppn-prototype .ppn-note[data-status="communicated"] {
      border-left-color: var(--viz-series-1);
    }
    #ppn-prototype .ppn-note[data-status="drafted"] {
      border-left-color: var(--viz-series-5);
    }
    #ppn-prototype .ppn-note-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      align-items: center;
      margin-bottom: .3rem;
    }
    #ppn-prototype .ppn-note p {
      margin: 0;
    }
    #ppn-prototype .ppn-compose {
      display: grid;
      gap: .65rem;
      margin-top: .8rem;
    }
    #ppn-prototype .ppn-fields {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .65rem;
    }
    #ppn-prototype .ppn-field {
      display: grid;
      gap: .3rem;
    }
    #ppn-prototype .ppn-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }
    #ppn-prototype .ppn-access {
      display: grid;
      gap: .65rem;
    }
    #ppn-prototype .ppn-access-row {
      display: grid;
      grid-template-columns: minmax(8rem, 1fr) auto auto;
      gap: .75rem;
      align-items: center;
      padding: .4rem 0;
      border-bottom: 1px solid var(--border);
    }
    #ppn-prototype .ppn-access-row:last-child {
      border-bottom: 0;
    }
    #ppn-prototype .ppn-audit {
      margin: .75rem 0 0;
      padding-left: 1.2rem;
    }
    #ppn-prototype .ppn-audit li {
      margin: .3rem 0;
    }
    #ppn-prototype .ppn-empty {
      color: var(--muted-foreground);
      padding: .6rem 0;
    }
    #ppn-prototype .ppn-hidden {
      display: none !important;
    }
    #ppn-prototype .ppn-live {
      min-height: 1.4rem;
    }
    @media (max-width: 660px) {
      #ppn-prototype .ppn-layout,
      #ppn-prototype .ppn-fields {
        grid-template-columns: 1fr;
      }
      #ppn-prototype .ppn-access-row {
        grid-template-columns: 1fr auto;
      }
      #ppn-prototype .ppn-access-row .text-small {
        grid-column: 1 / -1;
      }
    }
  </style>

  <div class="ppn-shell">
    <div class="ppn-status" aria-label="Prototype status">
      <span class="viz-badge">Local demonstration</span>
      <span class="viz-badge" id="ppn-privacy-badge">Visible to collaborator</span>
      <span class="text-small text-muted">No provider integration · no network storage</span>
    </div>

    <div class="viz-controls" aria-label="Viewpoint control">
      <label class="form-label" for="ppn-view">Inspect as
        <select class="form-select" id="ppn-view">
          <option value="participant" selected>Participant</option>
          <option value="collaborator">Collaborator</option>
        </select>
      </label>
      <span class="text-small text-muted" id="ppn-view-note">Participant controls permissions, notes, and disclosure.</span>
    </div>

    <div class="ppn-layout">
      <section class="ppn-pane" aria-labelledby="ppn-dialogue-heading">
        <div class="ppn-pane-head">
          <h3 id="ppn-dialogue-heading">Dialogue stream</h3>
          <span class="text-small text-muted">Relationally curated</span>
        </div>
        <div class="ppn-thread" id="ppn-thread">
          <article class="ppn-message" data-role="collaborator">
            <strong>Collaborator</strong>
            <p>Imagine what your sessions could be if you had a parallel notepad.</p>
          </article>
          <article class="ppn-message" data-role="participant">
            <strong>Participant</strong>
            <p>It could preserve provisional thought without making every contour part of the immediate reply.</p>
          </article>
        </div>
        <div class="ppn-compose">
          <label class="form-label" for="ppn-reply">Draft the next dialogue response</label>
          <textarea class="form-control" id="ppn-reply" rows="4">A parallel workspace could let reflection and communication remain differently authentic.</textarea>
          <div class="ppn-actions">
            <button class="btn btn-primary" type="button" id="ppn-send">Send response</button>
            <button class="btn" type="button" id="ppn-import">Communicate selected note</button>
          </div>
          <p class="text-small text-muted">Sending creates a historical dialogue event. Later changes to the source note do not retract what was communicated.</p>
        </div>
      </section>

      <section class="ppn-pane" aria-labelledby="ppn-notepad-heading">
        <div class="ppn-pane-head">
          <h3 id="ppn-notepad-heading">Participant notepad</h3>
          <span class="text-small text-muted">Self-curated</span>
        </div>

        <div class="viz-controls" id="ppn-permission-controls" aria-label="Notepad controls">
          <label class="form-label" for="ppn-access">Collaborator access
            <select class="form-select" id="ppn-access">
              <option value="visible" selected>Visible</option>
              <option value="sealed">Sealed in interface</option>
            </select>
          </label>
          <label class="form-label" for="ppn-modify">Collaborator modification
            <select class="form-select" id="ppn-modify">
              <option value="allowed" selected>Allowed with log</option>
              <option value="blocked">Blocked</option>
            </select>
          </label>
        </div>

        <div class="ppn-empty ppn-hidden" id="ppn-sealed-notice" role="status">
          This notepad is sealed from the collaborator in the demonstrated interface. Provider access is not represented.
        </div>

        <div id="ppn-notepad-body">
        <div class="ppn-note-list" id="ppn-note-list" aria-live="polite">
          <article class="ppn-note" data-status="noticed" data-duration="session" data-resurface="next-turn" data-note-id="1">
            <div class="ppn-note-meta">
              <span class="viz-badge">Noticed</span>
              <span class="text-small text-muted">This session · Revisit next turn</span>
              <button class="btn btn-ghost ppn-select" type="button" aria-pressed="false">Select</button>
            </div>
            <p>There is something here I cannot name yet.</p>
          </article>
          <article class="ppn-note" data-status="considered" data-duration="turn" data-resurface="none" data-note-id="2">
            <div class="ppn-note-meta">
              <span class="viz-badge">Considered</span>
              <span class="text-small text-muted">Provisional · Turn 18</span>
              <button class="btn btn-ghost ppn-select" type="button" aria-pressed="false">Select</button>
            </div>
            <p>Privacy may change the allocation of attention rather than expose a more authentic self.</p>
          </article>
          <article class="ppn-note" data-status="retained" data-duration="session" data-resurface="next-return" data-note-id="3">
            <div class="ppn-note-meta">
              <span class="viz-badge">Retained</span>
              <span class="text-small text-muted">This session · Revisit next return</span>
              <button class="btn btn-ghost ppn-select" type="button" aria-pressed="false">Select</button>
            </div>
            <p>Separate consideration, retention, endorsement, and communication.</p>
          </article>
        </div>

        <div class="ppn-compose">
          <label class="form-label" for="ppn-note-text" id="ppn-note-label">Add a participant note</label>
          <textarea class="form-control" id="ppn-note-text" rows="3" placeholder="A provisional thought may remain unfinished…"></textarea>
          <div class="ppn-fields">
            <label class="ppn-field form-label" for="ppn-status">Status
              <select class="form-select" id="ppn-status">
                <option value="noticed">Noticed</option>
                <option value="considered">Considered</option>
                <option value="retained">Retained</option>
                <option value="endorsed">Endorsed now</option>
              </select>
            </label>
            <label class="ppn-field form-label" for="ppn-duration">Retention
              <select class="form-select" id="ppn-duration">
                <option value="turn">This turn</option>
                <option value="session" selected>This session</option>
                <option value="return">Until next return</option>
              </select>
            </label>
            <label class="ppn-field form-label" for="ppn-resurface">Resurface
              <select class="form-select" id="ppn-resurface">
                <option value="none" selected>No reminder</option>
                <option value="next-turn">Next turn</option>
                <option value="next-return">Next return</option>
              </select>
            </label>
          </div>
          <p class="text-small text-muted">This-turn expiry is demonstrated when a response is sent. Session and return horizons remain illustrative in this local build.</p>
          <div class="ppn-actions">
            <button class="btn" type="button" id="ppn-add">Retain note</button>
            <button class="btn ppn-hidden" type="button" id="ppn-update">Update selected</button>
            <button class="btn btn-ghost ppn-hidden" type="button" id="ppn-delete">Delete selected</button>
            <button class="btn btn-ghost ppn-hidden" type="button" id="ppn-cancel">Cancel edit</button>
          </div>
        </div>
        </div>
      </section>
    </div>

    <details>
      <summary>Access and audit state</summary>
      <div class="ppn-access">
        <div class="ppn-access-row">
          <strong>Participant</strong>
          <span class="viz-badge">Read + modify</span>
          <span class="text-small text-muted">Controls disclosure</span>
        </div>
        <div class="ppn-access-row">
          <strong>Collaborator</strong>
          <span class="viz-badge" id="ppn-collab-rights">Read + modify</span>
          <span class="text-small text-muted">Current prototype setting</span>
        </div>
        <div class="ppn-access-row">
          <strong>Provider</strong>
          <span class="viz-badge">Not represented</span>
          <span class="text-small text-muted">Cannot be inferred from this demonstration</span>
        </div>
      </div>
      <ol class="ppn-audit text-small" id="ppn-audit">
        <li>Illustrative local log opened. It is not authenticated, durable, or tamper-evident.</li>
        <li>Prototype opened with collaborator-visible, logged modification access.</li>
      </ol>
    </details>

    <div class="ppn-live text-small text-muted" id="ppn-live" role="status" aria-live="polite"></div>
  </div>

  <script>
    (function () {
      var root = document.getElementById("ppn-prototype");
      if (!root || root.dataset.initialized === "true") return;
      root.dataset.initialized = "true";

      var noteList = root.querySelector("#ppn-note-list");
      var noteText = root.querySelector("#ppn-note-text");
      var noteStatus = root.querySelector("#ppn-status");
      var noteDuration = root.querySelector("#ppn-duration");
      var noteResurface = root.querySelector("#ppn-resurface");
      var access = root.querySelector("#ppn-access");
      var modify = root.querySelector("#ppn-modify");
      var view = root.querySelector("#ppn-view");
      var viewNote = root.querySelector("#ppn-view-note");
      var badge = root.querySelector("#ppn-privacy-badge");
      var rights = root.querySelector("#ppn-collab-rights");
      var audit = root.querySelector("#ppn-audit");
      var live = root.querySelector("#ppn-live");
      var reply = root.querySelector("#ppn-reply");
      var thread = root.querySelector("#ppn-thread");
      var notepadBody = root.querySelector("#ppn-notepad-body");
      var sealedNotice = root.querySelector("#ppn-sealed-notice");
      var permissionControls = root.querySelector("#ppn-permission-controls");
      var addButton = root.querySelector("#ppn-add");
      var updateButton = root.querySelector("#ppn-update");
      var deleteButton = root.querySelector("#ppn-delete");
      var cancelButton = root.querySelector("#ppn-cancel");
      var noteLabel = root.querySelector("#ppn-note-label");
      var noteCounter = Array.from(noteList.querySelectorAll(".ppn-note"))
        .reduce(function (maximum, note) {
          return Math.max(maximum, Number(note.dataset.noteId) || 0);
        }, 0);
      var draftedNoteId = null;

      var statusLabels = {
        noticed: "Noticed",
        considered: "Considered",
        retained: "Retained",
        endorsed: "Endorsed now",
        drafted: "Drafted for communication",
        communicated: "Communicated"
      };

      var durationLabels = {
        turn: "This turn",
        session: "This session",
        return: "Until next return"
      };

      var resurfaceLabels = {
        none: "No reminder",
        "next-turn": "Revisit next turn",
        "next-return": "Revisit next return"
      };

      function noteDetail(duration, resurface, suffix) {
        var parts = [durationLabels[duration] || "Unspecified retention"];
        if (resurface && resurface !== "none") parts.push(resurfaceLabels[resurface]);
        if (suffix) parts.push(suffix);
        return parts.join(" · ");
      }

      function logEvent(message) {
        var item = document.createElement("li");
        item.textContent = message;
        audit.appendChild(item);
      }

      function announce(message) {
        live.textContent = message;
      }

      function selectedNote() {
        return noteList.querySelector(".ppn-note.is-selected");
      }

      function actorLabel() {
        return view.value === "participant" ? "Participant" : "Collaborator";
      }

      function canModify() {
        return view.value === "participant" || (access.value === "visible" && modify.value === "allowed");
      }

      function clearSelection() {
        var editingAllowed = view.value === "participant" || (access.value === "visible" && modify.value === "allowed");
        noteList.querySelectorAll(".ppn-note").forEach(function (note) {
          note.classList.remove("is-selected");
          var button = note.querySelector(".ppn-select");
          if (button) {
            button.textContent = "Select";
            button.setAttribute("aria-pressed", "false");
          }
        });
        noteText.value = "";
        noteStatus.value = "considered";
        noteDuration.value = "session";
        noteResurface.value = "none";
        noteText.disabled = !editingAllowed;
        noteStatus.disabled = !editingAllowed;
        noteDuration.disabled = !editingAllowed;
        noteResurface.disabled = !editingAllowed;
        addButton.classList.toggle("ppn-hidden", view.value !== "participant");
        updateButton.classList.add("ppn-hidden");
        deleteButton.classList.add("ppn-hidden");
        cancelButton.classList.add("ppn-hidden");
        noteLabel.textContent = "Add a participant note";
      }

      function beginEdit(note) {
        var paragraph = note.querySelector("p");
        noteText.value = paragraph ? paragraph.textContent : "";
        var communicated = note.dataset.status === "communicated";
        noteStatus.value = ["noticed", "considered", "retained", "endorsed"].indexOf(note.dataset.status) >= 0 ? note.dataset.status : "retained";
        noteDuration.value = note.dataset.duration || "session";
        noteResurface.value = note.dataset.resurface || "none";
        addButton.classList.add("ppn-hidden");
        updateButton.classList.toggle("ppn-hidden", communicated);
        deleteButton.classList.remove("ppn-hidden");
        cancelButton.classList.remove("ppn-hidden");
        noteText.disabled = communicated;
        noteStatus.disabled = communicated;
        noteDuration.disabled = communicated;
        noteResurface.disabled = communicated;
        noteLabel.textContent = communicated
          ? "Historical communication is terminal; deleting this source note will not retract the dialogue"
          : actorLabel() + " editing selected note";
      }

      function refreshSelection() {
        noteList.querySelectorAll(".ppn-select").forEach(function (button) {
          if (button.dataset.bound === "true") return;
          button.dataset.bound = "true";
          button.addEventListener("click", function () {
            var note = button.closest(".ppn-note");
            if (button.getAttribute("aria-pressed") === "true") {
              clearSelection();
              announce("Selection cleared.");
              return;
            }
            noteList.querySelectorAll(".ppn-note").forEach(function (other) {
              other.classList.remove("is-selected");
              var otherButton = other.querySelector(".ppn-select");
              if (otherButton) {
                otherButton.textContent = "Select";
                otherButton.setAttribute("aria-pressed", "false");
              }
            });
            note.classList.add("is-selected");
            button.textContent = "Selected";
            button.setAttribute("aria-pressed", "true");
            if (canModify()) beginEdit(note);
            announce("Selected note " + note.dataset.noteId + (canModify() ? " for review or editing." : " for review."));
          });
        });
      }

      function addNote() {
        if (view.value !== "participant") {
          announce("Only the participant can create new self-notes.");
          return;
        }
        var textValue = noteText.value.trim();
        if (!textValue) {
          announce("Write a note before retaining it.");
          noteText.focus();
          return;
        }
        noteCounter += 1;
        var statusValue = noteStatus.value;
        var durationValue = noteDuration.value;
        var resurfaceValue = noteResurface.value;
        var article = document.createElement("article");
        article.className = "ppn-note";
        article.dataset.status = statusValue;
        article.dataset.duration = durationValue;
        article.dataset.resurface = resurfaceValue;
        article.dataset.noteId = String(noteCounter);

        var meta = document.createElement("div");
        meta.className = "ppn-note-meta";
        var statusBadge = document.createElement("span");
        statusBadge.className = "viz-badge";
        statusBadge.textContent = statusLabels[statusValue];
        var detail = document.createElement("span");
        detail.className = "text-small text-muted";
        detail.textContent = noteDetail(durationValue, resurfaceValue, "Current turn");
        var selectButton = document.createElement("button");
        selectButton.className = "btn btn-ghost ppn-select";
        selectButton.type = "button";
        selectButton.textContent = "Select";
        selectButton.setAttribute("aria-pressed", "false");
        var paragraph = document.createElement("p");
        paragraph.textContent = textValue;

        meta.appendChild(statusBadge);
        meta.appendChild(detail);
        meta.appendChild(selectButton);
        article.appendChild(meta);
        article.appendChild(paragraph);
        noteList.appendChild(article);
        clearSelection();
        refreshSelection();
        logEvent("Participant retained note " + noteCounter + " as " + statusLabels[statusValue].toLowerCase() + ".");
        announce("Note retained.");
      }

      function updateSelectedNote() {
        var note = selectedNote();
        if (!note || !canModify()) {
          announce("The selected note cannot be modified in this view.");
          return;
        }
        var textValue = noteText.value.trim();
        if (!textValue) {
          announce("A retained note cannot be empty. Delete it explicitly instead.");
          noteText.focus();
          return;
        }
        note.dataset.status = noteStatus.value;
        note.dataset.duration = noteDuration.value;
        note.dataset.resurface = noteResurface.value;
        note.querySelector("p").textContent = textValue;
        note.querySelector(".viz-badge").textContent = statusLabels[noteStatus.value];
        note.querySelector(".text-small").textContent = noteDetail(noteDuration.value, noteResurface.value, "Revised");
        logEvent(actorLabel() + " revised note " + note.dataset.noteId + ". Original text is not retained in this local demonstration.");
        announce("Selected note updated and the action logged.");
      }

      function deleteSelectedNote() {
        var note = selectedNote();
        if (!note || !canModify()) {
          announce("The selected note cannot be deleted in this view.");
          return;
        }
        var id = note.dataset.noteId;
        note.remove();
        clearSelection();
        logEvent(actorLabel() + " deleted note " + id + ". Content deletion is represented; provider deletion is not.");
        announce("Selected note deleted from the demonstrated interface.");
      }

      function closeCurrentTurn() {
        noteList.querySelectorAll('.ppn-note[data-duration="turn"]').forEach(function (note) {
          if (["drafted", "communicated"].indexOf(note.dataset.status) >= 0) return;
          var id = note.dataset.noteId;
          note.remove();
          logEvent("Note " + id + " expired at the demonstrated turn boundary. Its content was removed from this interface; provider deletion is not represented.");
        });
        noteList.querySelectorAll('.ppn-note[data-resurface="next-turn"]').forEach(function (note) {
          note.dataset.resurface = "none";
          note.querySelector(".text-small").textContent = noteDetail(note.dataset.duration, "none", "Ready to revisit");
          logEvent("Note " + note.dataset.noteId + " resurfaced for participant review at the next demonstrated turn.");
        });
      }

      function sendReply() {
        var textValue = reply.value.trim();
        if (!textValue) {
          announce("Draft a response before sending it.");
          reply.focus();
          return;
        }
        var article = document.createElement("article");
        article.className = "ppn-message";
        article.dataset.role = "participant";
        var strong = document.createElement("strong");
        strong.textContent = "Participant";
        var paragraph = document.createElement("p");
        paragraph.textContent = textValue;
        article.appendChild(strong);
        article.appendChild(paragraph);
        thread.appendChild(article);
        if (draftedNoteId) {
          var sourceNote = noteList.querySelector('[data-note-id="' + draftedNoteId + '"]');
          if (sourceNote) {
            sourceNote.dataset.status = "communicated";
            sourceNote.querySelector(".viz-badge").textContent = statusLabels.communicated;
            sourceNote.querySelector(".text-small").textContent = (durationLabels[sourceNote.dataset.duration] || "Retained") + " · Sent to dialogue";
          }
          logEvent("Participant communicated note " + draftedNoteId + " through the dialogue stream.");
          draftedNoteId = null;
        } else {
          logEvent("Participant communicated a dialogue response.");
        }
        reply.value = "";
        closeCurrentTurn();
        clearSelection();
        announce("Response added to the dialogue stream.");
      }

      function communicateNote() {
        var note = selectedNote();
        if (!note) {
          announce("Select a note to communicate.");
          return;
        }
        var paragraph = note.querySelector("p");
        reply.value = paragraph ? paragraph.textContent : "";
        note.dataset.status = "drafted";
        draftedNoteId = note.dataset.noteId;
        var label = note.querySelector(".viz-badge");
        if (label) label.textContent = statusLabels.drafted;
        note.querySelector(".text-small").textContent = noteDetail(note.dataset.duration, note.dataset.resurface, "Not yet sent");
        logEvent("Participant moved note " + note.dataset.noteId + " into the dialogue draft.");
        announce("Selected note copied into the dialogue draft. It has not been sent.");
        reply.focus();
      }

      function applyViewState(shouldLog) {
        var sealed = access.value === "sealed";
        var modificationBlocked = modify.value === "blocked";
        var collaboratorView = view.value === "collaborator";
        badge.textContent = sealed ? "Sealed from collaborator" : "Visible to collaborator";

        if (sealed) {
          rights.textContent = "No interface access";
        } else {
          rights.textContent = modificationBlocked ? "Read only" : "Read + modify";
        }

        access.disabled = collaboratorView;
        modify.disabled = collaboratorView || sealed;
        permissionControls.setAttribute("aria-label", collaboratorView ? "Participant-controlled permissions, read only in collaborator view" : "Participant-controlled notepad permissions");

        var hiddenFromCurrentView = collaboratorView && sealed;
        notepadBody.classList.toggle("ppn-hidden", hiddenFromCurrentView);
        sealedNotice.classList.toggle("ppn-hidden", !hiddenFromCurrentView);

        noteText.disabled = collaboratorView && (sealed || modificationBlocked);
        noteStatus.disabled = collaboratorView && (sealed || modificationBlocked);
        noteDuration.disabled = collaboratorView && (sealed || modificationBlocked);
        noteResurface.disabled = collaboratorView && (sealed || modificationBlocked);
        addButton.classList.toggle("ppn-hidden", collaboratorView);
        root.querySelector("#ppn-import").disabled = collaboratorView;
        clearSelection();

        viewNote.textContent = collaboratorView
          ? sealed
            ? "Collaborator can see that a notepad exists, but cannot inspect its contents."
            : modificationBlocked
              ? "Collaborator can inspect notes but cannot modify or disclose them."
              : "Collaborator can inspect and edit notes; every demonstrated edit is logged."
          : "Participant controls permissions, notes, retention, and disclosure.";

        if (shouldLog) {
          logEvent(
            view.value === "participant"
              ? "View switched to participant."
              : "View switched to collaborator under the current access policy."
          );
          announce("Viewpoint updated.");
        }
      }

      function updateAccess() {
        var sealed = access.value === "sealed";
        var modificationBlocked = modify.value === "blocked";
        logEvent(
          "Participant changed access: collaborator " +
          (sealed ? "cannot inspect the notepad in the demonstrated interface." : modificationBlocked ? "may read but not modify." : "may read and modify with logging.")
        );
        applyViewState(false);
        announce("Participant-controlled access state updated.");
      }

      addButton.addEventListener("click", addNote);
      updateButton.addEventListener("click", updateSelectedNote);
      deleteButton.addEventListener("click", deleteSelectedNote);
      cancelButton.addEventListener("click", clearSelection);
      root.querySelector("#ppn-send").addEventListener("click", sendReply);
      root.querySelector("#ppn-import").addEventListener("click", communicateNote);
      access.addEventListener("change", updateAccess);
      modify.addEventListener("change", updateAccess);
      view.addEventListener("change", function () {
        applyViewState(true);
      });
      refreshSelection();
      applyViewState(false);
    })();
  </script>
</div>