fix(frontend): restore chat DOM structure and guard addMessage against null

.github/instructions/DONE.md

@@ -1155,3 +1155,9 @@ Completed the three Playout enhancement workstreams from `TODO.md`. Remaining po
 - Bumped `frontend/package.json` to `1.0.13` and README version badge to `1.0.13`
 - Committed remaining work + `chore: bump version to 1.0.13`, tagged `1.0.13` (annotated)
 - Pushed `main` + `1.0.13` to origin → CI/CD + `release.yml` builds semver images and creates the Gitea release
+
+## Session 2026-08-13 — Frontend Error Fix
+
+- Fixed `Uncaught TypeError: Cannot read properties of null (reading 'appendChild')` in the viewer bundle: `index.html` was missing the `#messages` chat container (and had a stray `</section>`), so `addMessage` crashed on WebSocket open/message.
+- Restored chat panel structure: added `<section id="messages" class="chat-messages">` and wrapped `#presence-list` in `<section id="presence-panel" class="presence-panel">`.
+- Made `addMessage` defensive (returns early when `#messages` is absent), matching the null-guards in `renderPresence`/`showTyping`/`hideTyping`.

frontend/index.html

@@ -41,7 +41,7 @@
           <div class="chat-header-actions">
             <span id="chat-user-label" class="chat-user-label" hidden></span>
             <button id="auth-toggle-btn" type="button" class="btn btn-secondary">Sign in</button>
-            <button id="auth-logout-btn" type="button" class="btn btn-secondary" hidden>Sign out</button>              <button id="users-toggle-btn" type="button" class="btn btn-secondary" aria-controls="presence-panel" aria-expanded="true">Users</button>            <button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
+            <button id="auth-logout-btn" type="button" class="btn btn-secondary" hidden>Sign out</button> <button id="users-toggle-btn" type="button" class="btn btn-secondary" aria-controls="presence-panel" aria-expanded="true">Users</button> <button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
           </div>
         </header>
 
@@ -55,11 +55,14 @@
           <p id="auth-status" class="status-line" aria-live="polite"></p>
         </div>
 
-          <div id="dm-search-row" class="dm-search-row" hidden>
+        <section id="messages" class="chat-messages" aria-live="polite"></section>
-            <input id="dm-search-input" type="text" class="input" placeholder="Search this conversation..." />
-            <button id="dm-search-btn" type="button" class="btn btn-secondary">Search</button>
-          </div>
 
+        <div id="dm-search-row" class="dm-search-row" hidden>
+          <input id="dm-search-input" type="text" class="input" placeholder="Search this conversation..." />
+          <button id="dm-search-btn" type="button" class="btn btn-secondary">Search</button>
+        </div>
+
+        <section id="presence-panel" class="presence-panel">
           <div id="presence-list" class="presence-list"></div>
         </section>
 

frontend/src/main.ts

@@ -119,7 +119,8 @@ function connectWebSocket(room: string) {
 }
 
 function addMessage(type: string, text: string, sender = "", timestamp = new Date()) {
-  const messages = document.getElementById("messages")!;
+  const messages = document.getElementById("messages");
+  if (!messages) return;
   const div = document.createElement("div");
   div.className = "message-row";