fix(v1.16.11): settings modal opens — CSS hidden rule + initSettings null-safe

User reported clicking the gear icon (⚙) did nothing. Two real bugs:

1. CSS overrode the HTML hidden attribute.
   <div id="settings-modal" class="modal-backdrop" hidden> relied on
   user-agent display:none for [hidden], but
     .modal-backdrop { display: flex; }
   in our stylesheet overrode that default. Toggling modal.hidden from
   JS had no visible effect.

   Fix: added .modal-backdrop[hidden] { display: none !important } so
   the HTML attribute is actually honoured. This hardens every modal
   that uses the class (help, connect, file viewer, command palette,
   debug, settings).

2. initSettings / initPluginConfig / loadPluginConfig were not
   null-safe. Same class of regression that bit initSessions in
   v1.16.0 → v1.16.7. One missing element throws TypeError and aborts
   the rest of init — including the settings-btn click handler.

   Fix: optional chaining (?.) on every addEventListener wire-up,
   null-guard on loadPluginConfig's plugin-config-status access.

Port configuration: already wired via FIELD_MAP.port with
bounds-validation and restart-required note. Just needed the modal
to open. Now fully reachable.

Verified: bun run typecheck green, bun test 232/232.

Author: lesquel

CHANGELOG.md

@@ -4,6 +4,42 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.16.11] — 2026-04-22
+
+Fixed — the Settings modal (gear icon) refused to open.
+
+### Two problems, both real
+
+**1. CSS overrode the `hidden` HTML attribute.** The markup was `<div id="settings-modal" class="modal-backdrop" hidden>`. The `hidden` attribute relies on the user-agent default `display: none`, but `.modal-backdrop { display: flex }` from our stylesheet overrode that default. Result: toggling `modal.hidden = true/false` in JS had no visible effect, since the CSS kept forcing `display: flex`. The modal stayed in whatever visibility state the initial paint left it in.
+
+Fix: added `.modal-backdrop[hidden] { display: none !important; }` to `styles.css` so the `hidden` attribute is actually honoured.
+
+**2. `initSettings` could be silently aborted.** Same class of regression that hit `initSessions` in v1.16.0 → v1.16.7. Unnecessary `document.getElementById(id).addEventListener(...)` chains throw `TypeError` the moment any ID is missing, and the rest of `initSettings` stops — including the `settings-btn` gear-icon handler.
+
+Fix: optional chaining (`?.`) on every `addEventListener` wire-up in `initSettings` and `initPluginConfig`. Also null-guarded `loadPluginConfig` which touches `plugin-config-status` before any work. Any one missing element can no longer stop the rest from wiring.
+
+### Port field: already configurable, just couldn't be reached
+
+The port field (`#pcf-port`) was already wired in the Connection tab — `FIELD_MAP.port = { id: 'pcf-port', kind: 'int' }`, with bounds-validation, save-via-PATCH `/settings`, and the "restart required" note that appears when you touch fields like `port`, `host`, or `tunnel`. It just needed the modal to actually open.
+
+After installing v1.16.11:
+
+1. Click the gear (⚙) in the header.
+2. Go to the **Connection** tab.
+3. Change **Port**. The "Changes to these fields require an OpenCode restart" note lights up.
+4. Click **Save**.
+5. Restart OpenCode. The new port takes effect.
+
+### Why initSessions didn't teach us to blind initSettings at the same time
+
+Good question. v1.16.7 blinded `initSessions` because the crash was visible via the v1.16.6 `bootstrap().catch()`. `initSettings` runs AFTER `initSessions` in the bootstrap order, and as long as `initSessions` completes (which it now does thanks to v1.16.7), `initSettings` was reachable and its IDs all existed — nothing threw during that session. But the class-of-bug was latent: one markup change and it would have reproduced the same symptom. v1.16.11 preemptively closes that door.
+
+### Small CSS rule, big payoff
+
+The `.modal-backdrop[hidden] { display: none !important; }` rule also hardens the other modals that use the same pattern (help, connect, file viewer, command palette, debug). They all now honour `hidden` as the single source of truth for visibility, regardless of what the class stylesheet says.
+
+---
+
 ## [1.16.10] — 2026-04-22
 
 Cleanup release. v1.16.9 confirmed working: user logs showed `[pilot:event-hook] clients=1` + `[pilot:bus-emit] clients=1` during a prompt, and the browser received `[sse] onmessage message.part.updated`, `message.updated`, `session.status`, `session.idle`, `session.updated`, `session.diff` — all in live time. The singleton event bus was the real root cause.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesquel/opencode-pilot",
-  "version": "1.16.10",
+  "version": "1.16.11",
   "description": "Remote control web dashboard for OpenCode — multi-project tabs, live SSE streaming, mobile-friendly, push/Telegram notifications, tunnel for phone access from anywhere.",
   "publishConfig": {
     "access": "public"

src/server/constants.ts

@@ -1,7 +1,7 @@
 // ─── Shared constants ────────────────────────────────────────────────────────
 // Single source of truth for magic numbers and version strings.
 
-export const PILOT_VERSION = "1.16.10"
+export const PILOT_VERSION = "1.16.11"
 export const DEFAULT_PORT = 4097
 export const DEFAULT_HOST = "127.0.0.1"
 export const DEFAULT_PERMISSION_TIMEOUT_MS = 300_000

src/server/dashboard/index.html

@@ -43,7 +43,7 @@
 <script>
 (function() {
   try {
-    var GEN = "1.16.10";
+    var GEN = "1.16.11";
     var KEY = "pilot:asset-gen";
     if (localStorage.getItem(KEY) === GEN) return;
     localStorage.setItem(KEY, GEN);

src/server/dashboard/settings.js

@@ -122,17 +122,22 @@ function closeSettingsModal() {
 }
 
 export function initSettings() {
-  document.getElementById('settings-btn').addEventListener('click', openSettingsModal)
+  // Every `addEventListener` below is wrapped in optional chaining (`?.`).
+  // Same class of regression that bit `initSessions` in v1.16.0 → v1.16.7:
+  // a single missing element throws TypeError and aborts the rest of init,
+  // so the gear-icon listener never gets attached and the modal refuses to
+  // open. This blinds it against any future markup change.
+  document.getElementById('settings-btn')?.addEventListener('click', openSettingsModal)
 
-  document.getElementById('settings-close').addEventListener('click', closeSettingsModal)
+  document.getElementById('settings-close')?.addEventListener('click', closeSettingsModal)
 
-  document.getElementById('s-sound').addEventListener('change', e => {
+  document.getElementById('s-sound')?.addEventListener('change', e => {
     const settings = { ...getState().settings, sound: e.target.checked }
     setState({ settings })
     saveSettings()
   })
 
-  document.getElementById('s-notif').addEventListener('change', async e => {
+  document.getElementById('s-notif')?.addEventListener('change', async e => {
     let settings = { ...getState().settings, notif: e.target.checked }
     setState({ settings })
     saveSettings()
@@ -155,14 +160,14 @@ export function initSettings() {
     }
   })
 
-  document.getElementById('s-theme').addEventListener('change', e => {
+  document.getElementById('s-theme')?.addEventListener('change', e => {
     const settings = { ...getState().settings, theme: e.target.checked }
     setState({ settings })
     saveSettings()
     applySettings()
   })
 
-  document.getElementById('s-tools').addEventListener('change', e => {
+  document.getElementById('s-tools')?.addEventListener('change', e => {
     const settings = { ...getState().settings, tools: e.target.checked }
     setState({ settings })
     saveSettings()
@@ -287,9 +292,9 @@ function initPluginConfig() {
     })
   })
 
-  document.getElementById('settings-save').addEventListener('click', onSave)
-  document.getElementById('pcf-reset').addEventListener('click', onReset)
-  document.getElementById('pcf-vapid-generate').addEventListener('click', onGenerateVapid)
+  document.getElementById('settings-save')?.addEventListener('click', onSave)
+  document.getElementById('pcf-reset')?.addEventListener('click', onReset)
+  document.getElementById('pcf-vapid-generate')?.addEventListener('click', onGenerateVapid)
 
   // Inline validation hints (advisory only — do not block save)
   attachInlineValidation('pcf-telegram-token', v => {
@@ -320,16 +325,18 @@ function initPluginConfig() {
 
 async function loadPluginConfig() {
   const statusEl = document.getElementById('plugin-config-status')
-  statusEl.style.display = 'none'
+  if (statusEl) statusEl.style.display = 'none'
   try {
     const data = await fetchPluginSettings()
     _lastLoadedSnapshot = data
     applySnapshotToInputs(data)
     updateRestartNote(data)
   } catch (err) {
-    statusEl.className = 'plugin-config-status error'
-    statusEl.textContent = 'Could not load plugin settings: ' + (err?.message || err)
-    statusEl.style.display = 'block'
+    if (statusEl) {
+      statusEl.className = 'plugin-config-status error'
+      statusEl.textContent = 'Could not load plugin settings: ' + (err?.message || err)
+      statusEl.style.display = 'block'
+    }
   }
 }
 

src/server/dashboard/styles.css

@@ -4905,6 +4905,10 @@ body {
   justify-content: center;
   z-index: 1000;
 }
+/* Honour the HTML `hidden` attribute even when the class sets display:flex —
+ * without this, <div class="modal-backdrop" hidden> stays visible because the
+ * class wins over the user-agent `[hidden]` default. */
+.modal-backdrop[hidden] { display: none !important; }
 .modal-panel {
   background: var(--surface);
   border: 1px solid var(--border);