Experimental/brain-of-reese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): bind the shared header controls on explicit init, not at module import
Build and Push Containers / build-and-push-app (push) Successful in 1m53s
Details
Build and Push Containers / build-and-push-db (push) Successful in 11s
Details

Browse Source 
header.js's control bindings (sign-out, the mobile hamburger, the
SINGLE New chat button) ran at module import. The Containerfile stage-1
build inlines header.js into every bundle that imports it (the shell's
app.js, token-gate.js and the router's lazy views), so the shell page
registered the #nav-toggle click handler twice, and two toggle handlers
cancel each other — one tap = open + close = the mobile menu dead in
the deployed image only. The dev tree's single ESM instance (and every
test that runs against it) never showed it; a lazy view load adding a
THIRD copy made the menu work again, which is why the failure looked
state-dependent (chat cold boot dead, /sources.html alive).

- header.js: the three bindings move into an exported
  bindSharedHeaderControls(), guarded by a marker on <body> (NOT module
  state — every bundle copy has its own function instance), so later
  bundle copies and repeated inits (the token gate's mid-page header
  re-boot) are no-ops; header.js is now side-effect-free at top level,
  which also lets esbuild tree-shake the dead copies out of the bundles
  that do not need them (the token-gate bundle no longer carries the
  binding code at all)
- app.js / login.js / shared.js / document.js: call
  bindSharedHeaderControls() once at module top — import-time parity,
  unconditional (no async boot path to miss); doc-edit.js ships no
  header controls and calls nothing
- unit: tests/unit/test_header_bindings_once_per_document.py pins the
  contract — the init export, the document-level idempotency marker,
  all three bindings inside the init, NO top-level addEventListener
  remaining, and exactly one module-top call in each header-carrying
  page script; stale import-time docstrings in the legacy header pins
  updated to the new contract

Verified: full unit + integration suite (1746 passed), the hamburger /
pinned-composer / smoke E2E stories green in isolation, ruff + pyright
clean. Containerfile-equivalent esbuild 0.25.5 rebuild probed in
Chromium: exactly ONE #nav-toggle click listener on chat cold boot,
/sources.html and login.html, and a touch tap opens the menu in all
three states (pre-fix production: two listeners on cold boot = dead,
three on sources = alive).
This commit is contained in:
ducoterra
2026-09-08 22:31:45 -04:00
parent 4d287155c0
commit 1f0e4c6bb9
10 changed files with 379 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/app.js
+9
View File
@@ -265,6 +265,7 @@
*/
import {
bindSharedHeaderControls,
fetchWhoami,
initSharedHeader,
refreshSteering,
@@ -273,6 +274,14 @@ import {
import { openDocumentModal } from "./document-modal.js"; // phase 26: chips open the same-page modal
import { mountGate } from "./token-gate.js"; // phase 79 (task 05): the in-app token gate
// The shared header's control bindings (sign-out / mobile hamburger /
// New chat) — EXPLICIT init, once per document. header.js is inlined
// into every bundle that imports it (Containerfile stage 1), so the
// bindings must not run at module import — the body marker in
// header.js makes any further copy a no-op (2026-09-08
// double-binding production fix).
bindSharedHeaderControls();
/* Phase 77 (task 02): the bor:view-refresh exclusion is deliberate — the in-flight SSE stream and the local conversation must survive every switch (phase 76), so the chat view never listens and never re-fetches on a show. */
const messagesEl = document.querySelector("#messages");
const emptyState = document.querySelector("#empty-state");
frontend/assets/document.js
+6 -1
View File
@@ -68,9 +68,14 @@
* network call) until the admin gate resolves true.
*/
import { fetchIsAdmin, initSharedHeader } from "./header.js";
import { bindSharedHeaderControls, fetchIsAdmin, initSharedHeader } from "./header.js";
import { mountGate } from "./token-gate.js"; // phase 79 (task 05): the inline token gate
// The shared header's control bindings (sign-out / mobile hamburger) —
// EXPLICIT init, once per document (header.js is bundle-inlined per
// entry; import-time side effects would double-bind — 2026-09-08 fix).
bindSharedHeaderControls();
/* Phase 39: the page title's display name — window.BOR_BRAND (set at
* parse time by the classic assets/brand.js, refreshed from
* /api/config). This is a module, so the global is set by the time this
frontend/assets/header.js
+135 -89
View File
@@ -72,6 +72,16 @@
* five pages (the login page included), so every control resolves on
* every page; a page that lacks one simply skips it.
*
* The three control BINDINGS (sign-out, the mobile hamburger, the
* SINGLE New chat button) are NOT import-time side effects — they run
* when a page script calls bindSharedHeaderControls() once at module
* top. (2026-09-08 production diagnosis: the Containerfile build
* inlines this module into every bundle that imports it, and the old
* import-time binding ran once per bundle copy — on the shell page
* the #nav-toggle click handler was registered twice, and two toggle
* handlers cancel each other: open + close on one tap, a menu dead in
* the deployed image only. See the function's own comment.)
*
* whoami is fetched at most ONCE per page load: the promise is cached in
* the module-level `whoamiPromise`, so app.js's tuning gate, the sources
* page's catalog gate, and the header toggling all share one request.
@@ -235,79 +245,133 @@ export function clearChatStorage() {
}
}
/* Sign-out binding (phase 16 behavior, now module-owned): runs at module
import, so every page that loads header.js gets it exactly once.
Binds to all .sign-out-btn elements (bar copy for desktop + mobile
dropdown copy for ≤640px). Disable during the call, POST /api/logout
(the result is ignored — the reload resets the UI either way), drop
the cached token (phase 79: one logout clears BOTH the server
session and the localStorage key — a signing-out token user meets
the gate again), then reload so the header re-resolves to the
anonymous state (Sign in back, Sources gone, the gate back for the
not-yet-token holder). */
document.querySelectorAll(".sign-out-btn").forEach(btn => {
btn.addEventListener("click", async () => {
btn.disabled = true;
try {
await fetch("/api/logout", { method: "POST" });
} catch {
/* the reload resets the UI either way */
}
try {
localStorage.removeItem("bor.token");
} catch {
/* private mode / storage error — the server logout already signed
out; the next load re-gates either way */
}
window.location.reload();
});
});
/* ---------- shared header control bindings (explicit init, once per
* document) ----------
*
* The three shared-header control bindings — sign-out (phase 16), the
* mobile hamburger (phase 46), the SINGLE New chat button (phase 34
* task 02) — live here, and they run on EXPLICIT init, never at module
* import. The import-time binding was correct under native ESM (the
* browser's module cache makes this file ONE instance per document) but
* wrong under the Containerfile stage-1 build: esbuild inlines this
* module into every bundle that imports it (the shell's app.js,
* token-gate.js and the router's lazy views each carry a copy), and
* top-level code runs once per copy — the shell page registered the
* #nav-toggle click handler twice (the app.js + token-gate.js bundles),
* and two toggle handlers cancel each other: one tap = open + close =
* a menu that is dead in the deployed image only (production diagnosis
* 2026-09-08). The dev tree's single ESM instance — and every test
* that runs against the dev tree — never showed it; once a lazy view
* load added a THIRD copy the odd count made the menu work again, which
* is why the failure looked state-dependent (chat cold boot dead,
* /sources.html alive).
*
* The four page scripts that ship header controls (app.js / login.js /
* shared.js / document.js) therefore call bindSharedHeaderControls()
* ONCE at module top — import-time parity, unconditional (no async
* boot path to miss). The idempotency marker lives on <body>, NOT in
* module state: every bundle copy has its own function instance, so
* only the document can say "the first caller won" — later copies and
* repeated inits (the token gate's mid-page header re-boot) are no-ops.
* Each control keeps the module's null-safe contract: a page without an
* element is a complete no-op.
*/
export function bindSharedHeaderControls() {
const body = document.body;
if (!body || body.dataset.borHeaderBound) return; // a later bundle copy / a re-init — already bound
body.dataset.borHeaderBound = "1";
/* ---------- mobile hamburger (phase 46; module-owned) ----------
* ≤640px only (CSS hides the button elsewhere): #nav-toggle opens the
* nav as a dropdown (#app-nav .is-open — the animated state, task 01
* CSS). One binding for all six pages; a page without either element
* is a no-op, like the rest of this module. The nav LINKS keep their
* ship-hidden whoami contract (hidden links stay hidden inside the
* menu) — this binding only toggles the container. */
const navToggle = document.querySelector("#nav-toggle");
const appNav = document.querySelector("#app-nav");
function setNavMenu(open) {
if (!appNav || !navToggle) return;
appNav.classList.toggle("is-open", open);
navToggle.setAttribute("aria-expanded", open ? "true" : "false");
// Phase 88: body-level marker — while the mobile menu is open, the
// chat's sticky bottom cluster is hidden (styles.css, ≤640px block):
// it must not compete for taps with the open menu, and on short
// viewports it overlaps the menu's lower rows. Every close path
// (Esc / outside-click / media) funnels through setNavMenu, so the
// marker can never stick.
document.body.classList.toggle("nav-menu-open", open);
}
if (navToggle && appNav) {
navToggle.addEventListener("click", () =>
setNavMenu(!appNav.classList.contains("is-open")));
// A link click navigates (or closes same-page) — shut the menu.
appNav.addEventListener("click", (e) => {
if (e.target.closest("a")) setNavMenu(false);
/* Sign-out binding (phase 16 behavior, module-owned): binds to all
.sign-out-btn elements (bar copy for desktop + mobile dropdown
copy for ≤640px, phase 46) so both copies log out. Disable during
the call, POST /api/logout (the result is ignored — the reload
resets the UI either way), drop the cached token (phase 79: one
logout clears BOTH the server session and the localStorage key —
a signing-out token user meets the gate again on the next load),
then reload so the header re-resolves to the anonymous state
(Sign in back, Sources gone, the gate back for the
not-yet-token holder). */
document.querySelectorAll(".sign-out-btn").forEach(btn => {
btn.addEventListener("click", async () => {
btn.disabled = true;
try {
await fetch("/api/logout", { method: "POST" });
} catch {
/* the reload resets the UI either way */
}
try {
localStorage.removeItem("bor.token");
} catch {
/* private mode / storage error — the server logout already
signed out; the next load re-gates either way */
}
window.location.reload();
});
});
// Esc closes while open (document-level — no other modal to fight
// for a key).
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && appNav.classList.contains("is-open")) {
setNavMenu(false);
navToggle.focus(); // focus returns to the opener
}
});
// Resize back to desktop: the inline nav reappears — no stale open
// state (the .is-open class is scoped by the ≤640px CSS anyway, but
// dropping it keeps aria-expanded honest).
const mq = window.matchMedia("(max-width: 640px)");
const onMqChange = () => { if (!mq.matches) setNavMenu(false); };
if (mq.addEventListener) mq.addEventListener("change", onMqChange);
else mq.addListener(onMqChange); // older engines, defensive
/* ---------- mobile hamburger (phase 46; module-owned) ----------
* ≤640px only (CSS hides the button elsewhere): #nav-toggle opens
* the nav as a dropdown (#app-nav .is-open — the animated state,
* task 01 CSS). One binding for all six pages; a page without either
* element is a no-op, like the rest of this module. The nav LINKS
* keep their ship-hidden whoami contract (hidden links stay hidden
* inside the menu) — this binding only toggles the container. */
const navToggle = document.querySelector("#nav-toggle");
const appNav = document.querySelector("#app-nav");
function setNavMenu(open) {
if (!appNav || !navToggle) return;
appNav.classList.toggle("is-open", open);
navToggle.setAttribute("aria-expanded", open ? "true" : "false");
// Phase 88: body-level marker — while the mobile menu is open, the
// chat's sticky bottom cluster is hidden (styles.css, ≤640px block):
// it must not compete for taps with the open menu, and on short
// viewports it overlaps the menu's lower rows. Every close path
// (Esc / outside-click / media) funnels through setNavMenu, so the
// marker can never stick.
document.body.classList.toggle("nav-menu-open", open);
}
if (navToggle && appNav) {
navToggle.addEventListener("click", () =>
setNavMenu(!appNav.classList.contains("is-open")));
// A link click navigates (or closes same-page) — shut the menu.
appNav.addEventListener("click", (e) => {
if (e.target.closest("a")) setNavMenu(false);
});
// Esc closes while open (document-level — no other modal to fight
// for a key).
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && appNav.classList.contains("is-open")) {
setNavMenu(false);
navToggle.focus(); // focus returns to the opener
}
});
// Resize back to desktop: the inline nav reappears — no stale open
// state (the .is-open class is scoped by the ≤640px CSS anyway, but
// dropping it keeps aria-expanded honest).
const mq = window.matchMedia("(max-width: 640px)");
const onMqChange = () => { if (!mq.matches) setNavMenu(false); };
if (mq.addEventListener) mq.addEventListener("change", onMqChange);
else mq.addListener(onMqChange); // older engines, defensive
}
/* ---------- New chat (the SINGLE binding — module-owned from phase
* 34 task 02; moved from navbar to chat page at owner request) ----------
*
* The binding used to be duplicated across app.js / sources.js /
* tuning.js / document.js. It lives here exactly once (explicit
* init, like the sign-out binding). The button now lives ONLY on the
* chat page (inside .chat-shell, above #messages), so the click
* always dispatches "bor:new-chat" — app.js acts (it owns the
* in-flight-turn guard + the rendered-list reset).
*/
const newChatBtn = document.querySelector("#new-chat-btn");
if (newChatBtn) {
newChatBtn.addEventListener("click", () => {
window.dispatchEvent(new CustomEvent("bor:new-chat"));
});
}
}
/* ---------- steering notes (phase 15; module-owned from phase 34) ----------
@@ -408,21 +472,3 @@ async function deleteSteeringNote(id, btn) {
btn.disabled = false;
}
}
/* ---------- New chat (the SINGLE binding — module-owned from phase 34
* task 02; moved from navbar to chat page at owner request) ----------
*
* The binding used to be duplicated across app.js / sources.js /
* tuning.js / document.js. It lives here exactly once (module import,
* like the sign-out binding). The button now lives ONLY on the chat
* page (inside .chat-shell, above #messages), so the click always
* dispatches "bor:new-chat" — app.js acts (it owns the in-flight-turn
* guard and the rendered-list reset).
*/
const newChatBtn = document.querySelector("#new-chat-btn");
if (newChatBtn) {
newChatBtn.addEventListener("click", () => {
window.dispatchEvent(new CustomEvent("bor:new-chat"));
});
}
frontend/assets/login.js
+6 -1
View File
@@ -18,7 +18,12 @@
* All DOM ids match frontend/login.html.
*/
import { fetchIsAdmin, initSharedHeader } from "./header.js";
import { bindSharedHeaderControls, fetchIsAdmin, initSharedHeader } from "./header.js";
// The shared header's control bindings (sign-out / mobile hamburger) —
// EXPLICIT init, once per document (header.js is bundle-inlined per
// entry; import-time side effects would double-bind — 2026-09-08 fix).
bindSharedHeaderControls();
const form = document.querySelector("#login-form");
const passwordInput = document.querySelector("#login-password");
frontend/assets/shared.js
+6 -1
View File
@@ -45,7 +45,12 @@
* All DOM ids match frontend/shared.html.
*/
import { initSharedHeader } from "./header.js";
import { bindSharedHeaderControls, initSharedHeader } from "./header.js";
// The shared header's control bindings (sign-out / mobile hamburger) —
// EXPLICIT init, once per document (header.js is bundle-inlined per
// entry; import-time side effects would double-bind — 2026-09-08 fix).
bindSharedHeaderControls();
const titleEl = document.querySelector("#shared-title");
const noteEl = document.querySelector(".shared-note");