@bongos/core 1.17.0

package/modules/hall-ui/public/shell.js

@@ -0,0 +1,495 @@
+// shell.js — the hall's app shell: fixed sidebar + sticky top bar + view router.
+// (Vanilla hall-ui redesign, task 1723; scope: docs/design/vanilla-hall-ui-redesign-scope.md.)
+//
+// Dependency-free by design: it must run on pages that don't load dom-utils.js
+// (primer, diagrams, not-ready, atlas), so it reads window.__BRANDING__ /
+// window.__MODULES__ directly and defines its own tiny helpers. Loaded with
+// `defer` BEFORE the page's own script so the chrome it renders (#logout-link,
+// #welcome-line, #topbar-title, …) exists when page scripts wire events.
+//
+// Responsibilities:
+//   - render the sidebar (brand mark, nav groups, user chip, sign-out) and the
+//     top bar (drawer toggle, page title, greeting slot) into the static mounts
+//     (#app-sidebar / #app-topbar / #app-foot) every hall page carries;
+//   - rank-gate nav items COSMETICALLY (server-side page gates remain the real
+//     access control — serve-internal.js requireArchonPage etc.);
+//   - on the index (body[data-page="home"]) route the four views (#home,
+//     #standing, #achievements, #leaderboard). The `#/task|idea|blocker/N`
+//     deep-link hashes belong to builders.js and are deliberately ignored here;
+//   - expose window.OTBShell.applyAccess(...) so builders.js (index) or the
+//     shell's own /api/bongos/me probe (other pages) can settle gated nav state.
+(function () {
+  'use strict';
+
+  // Generated typed client (task 1996 / R09), served as window.BongosClient by
+  // /lib/bongos-client.js. baseUrl:'' passes the literal same-origin path below
+  // through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+
+  var brand = window.__BRANDING__ || {};
+  var PAGE = (document.body && document.body.dataset.page) || '';
+  var IS_INDEX = PAGE === 'home';
+  var VIEWS = ['home', 'standing', 'achievements', 'leaderboard'];
+  // builders.js owns these hashes (deep-link overlay) — never route them.
+  var DEEPLINK_RE = /^#\/(task|idea|blocker)\/(\d+)$/;
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+  function moduleOn(name) {
+    var m = window.__MODULES__;
+    if (!m || !m.enabled || !(name in m.enabled)) return true;
+    return m.enabled[name] === true;
+  }
+  function hallName() {
+    return (brand.copy && brand.copy.hallName) || 'Builders';
+  }
+  function rankLabel(rank) {
+    if (!rank) return '';
+    var map = brand.rankLabels || {};
+    return map[rank] || (rank.charAt(0).toUpperCase() + rank.slice(1));
+  }
+
+  // Small stroke icon set (18px grid, currentColor) — hand-rolled, no framework.
+  var ICONS = {
+    home: '<path d="M3 8.5 9 3l6 5.5V15a1 1 0 0 1-1 1h-3.5v-4h-3v4H4a1 1 0 0 1-1-1V8.5Z"/>',
+    work: '<rect x="2.5" y="5.5" width="13" height="9" rx="1.5"/><path d="M6.5 5.5V4a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 11.5 4v1.5M2.5 9.5h13"/>',
+    standing: '<circle cx="9" cy="6" r="3"/><path d="M3.5 15.5c.6-2.9 2.9-4.5 5.5-4.5s4.9 1.6 5.5 4.5"/>',
+    profile: '<rect x="2.5" y="4" width="13" height="10" rx="1.5"/><circle cx="6.3" cy="8" r="1.6"/><path d="M4.1 12c.3-1.1 1.1-1.7 2.2-1.7s1.9.6 2.2 1.7"/><path d="M10.4 7.5h3M10.4 10.3h3"/>',
+    goals: '<circle cx="9" cy="9" r="6.5"/><circle cx="9" cy="9" r="3.5"/><circle cx="9" cy="9" r="0.8" fill="currentColor"/>',
+    roadmap: '<path d="M3 15.5V3.5l4 2 4-2 4 2v10l-4-2-4 2-4-2Z"/><path d="M7 3.5v10M11 5.5v10"/>',
+    achievements: '<circle cx="9" cy="7" r="4.5"/><path d="M6.2 10.8 5 15.5l4-2 4 2-1.2-4.7"/>',
+    leaderboard: '<path d="M3.5 15.5v-6M9 15.5V3.5m5.5 12v-9"/>',
+    docs: '<path d="M4 3.5h7l3 3v10H4v-13Z"/><path d="M11 3.5v3h3"/>',
+    settings: '<circle cx="9" cy="9" r="2.5"/><path d="M9 2.5v2m0 9v2M2.5 9h2m9 0h2M4.4 4.4l1.4 1.4m6.4 6.4 1.4 1.4m0-9.2-1.4 1.4M5.8 12.2l-1.4 1.4"/>',
+    admin: '<path d="M9 2.5 15 5v4c0 3.5-2.4 6-6 7-3.6-1-6-3.5-6-7V5l6-2.5Z"/>',
+    signout: '<path d="M7 3.5H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3M12 12l3-3-3-3M15 9H7"/>',
+  };
+  function icon(name) {
+    return '<svg class="nav-icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + (ICONS[name] || ICONS.docs) + '</svg>';
+  }
+  function chevronIcon() {
+    return '<svg class="nav-group__chevron" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7l4 4 4-4"/></svg>';
+  }
+
+  // The nav model. `gate` keys are resolved in applyAccess:
+  //   signed    — any authenticated builder
+  //   member    — authenticated + past the newcomer (Xenos) gate
+  //   work      — signed, but for newcomers only once the "ship three" stage is
+  //               current (mirrors the old #hall-nav-work rule, task #833)
+  //   archon    — rank === 'archon'
+  // `view` marks an index view (hash-routed); `module` gates on window.__MODULES__.
+  var NAV = [
+    { group: '', items: [
+      { id: 'home', label: 'Home', icon: 'home', href: '/', view: 'home', gate: 'always' },
+      // task 1966: Work is visible to ANY signed-in builder (incl. newcomer Xenos).
+      // Claimability is controlled per-task, not by hiding the page — every row
+      // carries a rank tag and the server enforces requires_rank on the claim. This
+      // reverses task #833's newcomer hide (the 'work' gate below is now unused).
+      { id: 'work', label: 'Work', icon: 'work', href: '/work', gate: 'signed' },
+      { id: 'roadmap', label: 'Roadmap', icon: 'roadmap', href: '/roadmap', gate: 'member' },
+      { id: 'goals', label: 'Goals', icon: 'goals', href: '/goals', gate: 'member' },
+      { id: 'standing', label: 'Standing', icon: 'standing', href: '/#standing', view: 'standing', gate: 'signed' },
+      // task 1467: the viewable, shareable builder profile. The nav link points at
+      // the viewer's OWN profile (profile.js defaults to self when no ?id=). gate is
+      // cosmetic only — the /profile PAGE is public (a portfolio others can open via
+      // /profile?id=N from the leaderboard); 'signed' just means "show this 'my
+      // profile' shortcut once you're signed in".
+      { id: 'profile', label: 'Profile', icon: 'profile', href: '/profile', gate: 'signed' },
+      { id: 'achievements', label: 'Achievements', icon: 'achievements', href: '/#achievements', view: 'achievements', gate: 'member' },
+      { id: 'leaderboard', label: 'Leaderboard', icon: 'leaderboard', href: '/#leaderboard', view: 'leaderboard', gate: 'member' },
+    ] },
+    { group: 'Docs', gate: 'signed', items: [
+      { id: 'primer', label: 'Primer', icon: 'docs', href: '/primer', gate: 'member' },
+      { id: 'diagrams', label: 'Diagrams', icon: 'docs', href: '/diagrams', gate: 'member' },
+      { id: 'atlas', label: 'Repo Atlas', icon: 'docs', href: '/atlas', gate: 'member' },
+      { id: 'modules', label: 'Modules', icon: 'docs', href: '/modules', gate: 'member' },
+      { id: 'ranks', label: 'Ranks', icon: 'docs', href: '/ranks', gate: 'signed' },
+      // The rendered OpenAPI reference lives on the APEX (/docs), not this builders
+      // subdomain — external so the rewrite shim doesn't turn it into /builders/docs.
+      { id: 'apidocs', label: 'API docs', icon: 'docs', href: '/docs', gate: 'signed', external: true },
+    ] },
+    { group: 'Archon', gate: 'archon', items: [
+      { id: 'watch', label: 'Watch', icon: 'admin', href: '/watch', gate: 'archon' },
+      { id: 'harbor', label: 'Harbor', icon: 'admin', href: '/harbor', gate: 'archon', module: 'dev-box' },
+      { id: 'gate', label: 'Gate', icon: 'admin', href: '/gate', gate: 'archon' },
+      { id: 'sessions', label: 'Sessions', icon: 'admin', href: '/sessions', gate: 'archon' },
+    ] },
+  ];
+
+  // ---------- nav group collapse (labeled groups only — Docs, Archon) ----------
+  // Mirrors the THEME_KEY localStorage pattern: per-group collapsed state,
+  // survives reloads and carries across every hall page (shell.js runs on all
+  // of them). Only labeled groups get a toggle — the unlabeled main group
+  // (Home/Work/Roadmap/…) is core nav and always stays expanded.
+  var NAV_COLLAPSE_KEY = 'hall-nav-collapsed';
+
+  function collapsedGroups() {
+    try {
+      var arr = JSON.parse(window.localStorage.getItem(NAV_COLLAPSE_KEY) || '[]');
+      return Array.isArray(arr) ? arr : [];
+    } catch (_) { return []; }
+  }
+  function isGroupCollapsed(groupId) {
+    return collapsedGroups().indexOf(groupId) !== -1;
+  }
+  function setGroupCollapsed(groupId, collapsed) {
+    var set = collapsedGroups();
+    var idx = set.indexOf(groupId);
+    if (collapsed && idx === -1) set.push(groupId);
+    else if (!collapsed && idx !== -1) set.splice(idx, 1);
+    try { window.localStorage.setItem(NAV_COLLAPSE_KEY, JSON.stringify(set)); } catch (_) { /* private mode */ }
+  }
+
+  // ---------- render ----------
+
+  function renderSidebar() {
+    var el = document.getElementById('app-sidebar');
+    if (!el) return;
+    // Apex origin for external links (the API docs live on the apex, not this
+    // builders./status. subdomain). Derived from the current host so it's correct
+    // on any instance (amazonprimea.com, cloudbongos.com, localhost).
+    var APEX_ORIGIN = window.location.origin.replace('://builders.', '://').replace('://status.', '://');
+    var groups = NAV.map(function (g) {
+      var groupId = g.group ? g.group.toLowerCase() : '';
+      var collapsible = !!g.group;
+      var collapsed = collapsible && isGroupCollapsed(groupId);
+      var items = g.items.map(function (it) {
+        var href = it.external ? (APEX_ORIGIN + it.href) : ((IS_INDEX && it.view) ? '#' + it.view : it.href);
+        return '<a class="nav-item" id="nav-' + it.id + '" href="' + esc(href) + '"' +
+          (it.external ? ' target="_blank" rel="noopener"' : '') +
+          (it.view ? ' data-view="' + it.view + '"' : '') +
+          ' data-gate="' + it.gate + '"' + (it.module ? ' data-module="' + it.module + '"' : '') +
+          ' title="' + esc(it.label) + '" hidden>' + icon(it.icon) +
+          '<span class="nav-item__label">' + esc(it.label) + '</span></a>';
+      }).join('');
+      var head = g.group
+        ? '<button type="button" class="nav-group__head" data-gate="' + (g.gate || 'always') + '" data-group="' + esc(groupId) + '" aria-expanded="' + (collapsed ? 'false' : 'true') + '" hidden>' +
+            '<span class="nav-group__head-label">' + esc(g.group) + '</span>' + chevronIcon() +
+          '</button>'
+        : '';
+      return '<div class="nav-group' + (collapsible ? ' nav-group--collapsible' : '') + (collapsed ? ' nav-group--collapsed' : '') + '"' +
+        (collapsible ? ' data-group="' + esc(groupId) + '"' : '') + '>' + head + items + '</div>';
+    }).join('');
+
+    el.innerHTML =
+      '<div class="app-sidebar__brand"><a class="brand-mark" href="/" id="brand-mark">' +
+        '<span class="brand-mark__dot" aria-hidden="true"></span>' +
+        '<span class="brand-mark__name" id="brand-name"></span></a></div>' +
+      '<nav class="app-sidebar__nav" aria-label="Primary">' + groups + '</nav>' +
+      '<div class="app-sidebar__foot">' +
+        '<a class="shell-signin" id="shell-signin" href="/api/bongos/auth/web/start" hidden>Sign in with GitHub</a>' +
+        // task 1831: the profile chip IS the Settings link — one spot, no separate
+        // nav-item. It's an <a> so keyboard focus + Enter work for free; visibility
+        // stays 'signed'-gated via applyAccess (shown only when authed + filled).
+        '<a class="shell-user" id="shell-user" href="/settings" title="Settings" aria-label="Settings" hidden>' +
+          '<span class="shell-user__avatar" id="shell-user-avatar" aria-hidden="true"></span>' +
+          '<span class="shell-user__meta"><span class="shell-user__name" id="shell-user-name"></span>' +
+          '<span class="shell-user__rank" id="shell-user-rank"></span></span>' +
+        '</a>' +
+        '<a class="shell-signout" id="logout-link" href="/api/bongos/auth/logout" title="Sign out">' + icon('signout') + '<span class="nav-item__label">Sign out</span></a>' +
+      '</div>';
+    var nameEl = document.getElementById('brand-name');
+    if (nameEl) nameEl.textContent = hallName();
+  }
+
+  function renderTopbar() {
+    var el = document.getElementById('app-topbar');
+    if (!el) return;
+    var title = el.dataset.title || document.body.dataset.pageTitle ||
+      (IS_INDEX ? 'Home' : '');
+    el.innerHTML =
+      '<button class="topbar-menu" id="topbar-menu" type="button" aria-label="Open navigation" aria-expanded="false">' +
+        '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M3 5h12M3 9h12M3 13h12"/></svg>' +
+      '</button>' +
+      '<h2 class="topbar-title" id="topbar-title"></h2>' +
+      '<div class="topbar-side"><span class="topbar-note" id="welcome-line"></span>' +
+      '<button class="zoom-toggle" id="zoom-toggle" type="button" aria-label="Text size"></button>' +
+      '<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Switch theme"></button></div>';
+    var t = document.getElementById('topbar-title');
+    if (t) t.textContent = title;
+  }
+
+  // ---------- theme (light / dark) ----------
+  // The pack's :root override carries only light values; the dark neutrals live
+  // in style.css under html[data-theme="dark"] (higher specificity than :root,
+  // so they win over the pack while the instance accent survives). Stored
+  // preference beats the OS setting; no stored preference follows it live.
+  var THEME_KEY = 'hall-theme';
+  var themeMedia = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+
+  function storedTheme() {
+    try { var v = window.localStorage.getItem(THEME_KEY); return v === 'dark' || v === 'light' ? v : null; } catch (_) { return null; }
+  }
+  function effectiveTheme() {
+    return storedTheme() || (themeMedia && themeMedia.matches ? 'dark' : 'light');
+  }
+  function applyTheme() {
+    var t = effectiveTheme();
+    document.documentElement.dataset.theme = t;
+    var btn = document.getElementById('theme-toggle');
+    if (btn) {
+      var toDark = t !== 'dark';
+      btn.setAttribute('aria-label', toDark ? 'Switch to dark theme' : 'Switch to light theme');
+      btn.title = btn.getAttribute('aria-label');
+      btn.innerHTML = toDark
+        ? '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M14.5 10.8A6 6 0 0 1 7.2 3.5a6 6 0 1 0 7.3 7.3Z"/></svg>'
+        : '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="9" cy="9" r="3.5"/><path d="M9 1.5v2m0 11v2M1.5 9h2m11 0h2M3.7 3.7l1.4 1.4m7.8 7.8 1.4 1.4m0-10.6-1.4 1.4M5.1 12.9l-1.4 1.4"/></svg>';
+    }
+  }
+  function toggleTheme() {
+    var next = effectiveTheme() === 'dark' ? 'light' : 'dark';
+    try { window.localStorage.setItem(THEME_KEY, next); } catch (_) { /* private mode */ }
+    applyTheme();
+  }
+
+  // ---------- zoom (accessibility: enlarge the whole page) ----------
+  // task 1475 (idea 280): a one-click "make everything bigger" control for
+  // readability. Cycles 100% -> 125% -> 150% -> 100% via CSS `zoom` on <html>,
+  // which enlarges px AND rem sizes uniformly (a font-size bump would miss the
+  // hall's many px values). Persisted per-browser like the theme preference.
+  var ZOOM_KEY = 'hall-zoom';
+  var ZOOM_STEPS = [1, 1.25, 1.5];
+  function storedZoom() {
+    try {
+      var v = parseFloat(window.localStorage.getItem(ZOOM_KEY));
+      return ZOOM_STEPS.indexOf(v) >= 0 ? v : 1;
+    } catch (_) { return 1; }
+  }
+  function applyZoom() {
+    var z = storedZoom();
+    // '' clears the inline zoom so 100% is the browser default (no stray property).
+    document.documentElement.style.zoom = z === 1 ? '' : String(z);
+    var btn = document.getElementById('zoom-toggle');
+    if (!btn) return;
+    var pct = Math.round(z * 100);
+    var next = ZOOM_STEPS[(ZOOM_STEPS.indexOf(z) + 1) % ZOOM_STEPS.length];
+    btn.setAttribute('aria-label', 'Text size ' + pct + '%. Tap to change to ' + Math.round(next * 100) + '%.');
+    btn.title = btn.getAttribute('aria-label');
+    btn.classList.toggle('zoom-toggle--on', z !== 1);
+    btn.innerHTML =
+      '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">' +
+        '<circle cx="7.5" cy="7.5" r="4.5"/><path d="M11 11l3.5 3.5M5.5 7.5h4M7.5 5.5v4"/></svg>' +
+      (z !== 1 ? '<span class="zoom-toggle__pct">' + pct + '%</span>' : '');
+  }
+  function cycleZoom() {
+    var idx = ZOOM_STEPS.indexOf(storedZoom());
+    var next = ZOOM_STEPS[(idx + 1) % ZOOM_STEPS.length];
+    try { window.localStorage.setItem(ZOOM_KEY, String(next)); } catch (_) { /* private mode */ }
+    applyZoom();
+  }
+
+  function renderFoot() {
+    var el = document.getElementById('app-foot');
+    if (!el) return;
+    var product = (brand.identity && (brand.identity.productName || brand.identity.worldName)) || '';
+    el.innerHTML = '<span id="foot-instance"></span><a href="/api/bongos/auth/logout">Sign out</a>';
+    var inst = document.getElementById('foot-instance');
+    if (inst) inst.textContent = product;
+  }
+
+  // ---------- gated visibility ----------
+
+  var access = { authed: null, rank: null, graduated: false, showWork: false };
+
+  function gateAllows(gate) {
+    var authed = access.authed === true;
+    var member = authed && access.rank !== 'xenos';
+    switch (gate) {
+      case 'always': return true;
+      case 'signed': return authed;
+      case 'member': return member;
+      case 'work': return authed && (member || access.showWork);
+      case 'archon': return authed && access.rank === 'archon';
+      default: return false;
+    }
+  }
+
+  // applyAccess({ authed, rank, graduated, showWork }) — settle nav visibility.
+  // Called by builders.js on the index (it owns /me there) and by the shell's own
+  // probe elsewhere. Cosmetic only; the server enforces (ADR 0016).
+  function applyAccess(state) {
+    if (state) {
+      if ('authed' in state) access.authed = !!state.authed;
+      if ('rank' in state) access.rank = state.rank ? String(state.rank).toLowerCase() : null;
+      if ('graduated' in state) access.graduated = !!state.graduated;
+      if ('showWork' in state) access.showWork = !!state.showWork;
+      if (state.builder) renderUser(state.builder);
+    }
+    document.querySelectorAll('#app-sidebar [data-gate]').forEach(function (el) {
+      var ok = gateAllows(el.dataset.gate);
+      if (ok && el.dataset.module && !moduleOn(el.dataset.module)) ok = false;
+      el.hidden = !ok;
+    });
+    var signin = document.getElementById('shell-signin');
+    if (signin) signin.hidden = access.authed !== false;
+    var user = document.getElementById('shell-user');
+    var signout = document.getElementById('logout-link');
+    if (user) user.hidden = access.authed !== true || !user.dataset.filled;
+    if (signout) signout.hidden = access.authed !== true;
+  }
+
+  function renderUser(builder) {
+    var user = document.getElementById('shell-user');
+    if (!user || !builder) return;
+    var name = builder.display_name || builder.github_login || 'Builder';
+    var initials = String(name).trim().split(/\s+/).map(function (w) { return w[0]; }).slice(0, 2).join('').toUpperCase();
+    var avatar = document.getElementById('shell-user-avatar');
+    if (avatar) {
+      if (builder.avatar_url) {
+        avatar.innerHTML = '<img src="' + esc(builder.avatar_url) + '" alt="">';
+      } else {
+        avatar.textContent = initials;
+      }
+    }
+    var nameEl = document.getElementById('shell-user-name');
+    if (nameEl) nameEl.textContent = name;
+    var rankEl = document.getElementById('shell-user-rank');
+    if (rankEl) {
+      rankEl.textContent = rankLabel(builder.rank);
+      rankEl.dataset.rank = builder.rank || '';
+    }
+    user.dataset.filled = '1';
+  }
+
+  // ---------- view router (index only) ----------
+
+  var currentView = 'home';
+
+  function viewFromHash(hash) {
+    if (!hash || DEEPLINK_RE.test(hash)) return null;
+    var name = hash.replace(/^#\/?/, '');
+    return VIEWS.indexOf(name) !== -1 ? name : null;
+  }
+
+  function setView(name, opts) {
+    if (!IS_INDEX || VIEWS.indexOf(name) === -1) return;
+    currentView = name;
+    VIEWS.forEach(function (v) {
+      var sec = document.getElementById('view-' + v);
+      if (sec) sec.hidden = v !== name;
+    });
+    var active = document.getElementById('view-' + name);
+    var title = (active && active.dataset.viewTitle) || name;
+    var t = document.getElementById('topbar-title');
+    if (t) t.textContent = title;
+    document.querySelectorAll('#app-sidebar .nav-item[data-view]').forEach(function (a) {
+      a.classList.toggle('nav-item--active', a.dataset.view === name);
+    });
+    if (!opts || opts.scroll !== false) window.scrollTo({ top: 0 });
+    closeDrawer();
+    document.dispatchEvent(new CustomEvent('otbshell:view', { detail: { view: name } }));
+  }
+
+  function route(opts) {
+    var v = viewFromHash(window.location.hash);
+    if (v) setView(v, opts);
+    else if (!window.location.hash || window.location.hash === '#') setView('home', opts);
+    // unknown hashes (deep-links, legacy anchors) leave the current view alone.
+  }
+
+  // ---------- drawer (≤768px) ----------
+
+  function openDrawer() {
+    document.documentElement.classList.add('drawer-open');
+    var scrim = document.getElementById('app-scrim');
+    if (scrim) scrim.hidden = false;
+    var btn = document.getElementById('topbar-menu');
+    if (btn) btn.setAttribute('aria-expanded', 'true');
+  }
+  function closeDrawer() {
+    document.documentElement.classList.remove('drawer-open');
+    var scrim = document.getElementById('app-scrim');
+    if (scrim) scrim.hidden = true;
+    var btn = document.getElementById('topbar-menu');
+    if (btn) btn.setAttribute('aria-expanded', 'false');
+  }
+
+  function wire() {
+    var menu = document.getElementById('topbar-menu');
+    if (menu) menu.addEventListener('click', function () {
+      if (document.documentElement.classList.contains('drawer-open')) closeDrawer();
+      else openDrawer();
+    });
+    var theme = document.getElementById('theme-toggle');
+    if (theme) theme.addEventListener('click', toggleTheme);
+    var zoom = document.getElementById('zoom-toggle');
+    if (zoom) zoom.addEventListener('click', cycleZoom);
+    if (themeMedia && themeMedia.addEventListener) {
+      themeMedia.addEventListener('change', function () { if (!storedTheme()) applyTheme(); });
+    }
+    var scrim = document.getElementById('app-scrim');
+    if (scrim) scrim.addEventListener('click', closeDrawer);
+    var sidebar = document.getElementById('app-sidebar');
+    if (sidebar) sidebar.addEventListener('click', function (e) {
+      var head = e.target.closest && e.target.closest('.nav-group__head');
+      if (head) {
+        var groupEl = head.closest('.nav-group');
+        var collapsed = groupEl ? groupEl.classList.toggle('nav-group--collapsed') : false;
+        head.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+        setGroupCollapsed(head.dataset.group, collapsed);
+        return;
+      }
+      var a = e.target.closest && e.target.closest('a');
+      if (a) closeDrawer();
+    });
+    if (IS_INDEX) {
+      window.addEventListener('hashchange', function () { route(); });
+    }
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') closeDrawer();
+    });
+  }
+
+  // Non-index pages: probe /api/bongos/me for cosmetic nav gating (the index's
+  // builders.js owns the call there and reports via applyAccess). A 401 keeps
+  // page behavior unchanged — each page's own script decides how to handle auth.
+  function probeMe() {
+    api.request('GET', '/api/bongos/me').then(function (res) {
+      if (res.status === 401) { applyAccess({ authed: false }); return null; }
+      if (!res.ok) return null;
+      return res.data;
+    }).then(function (me) {
+      if (!me || !me.builder) return;
+      var stages = (me.onboarding && me.onboarding.stages) || [];
+      var showWork = stages.some(function (s) { return s.id === 'ship_three' && s.is_current && !s.cleared; });
+      applyAccess({
+        authed: true,
+        rank: me.builder.rank,
+        graduated: !!(me.onboarding && me.onboarding.graduated),
+        showWork: showWork,
+        builder: me.builder,
+      });
+    }).catch(function () { /* cosmetic only */ });
+  }
+
+  // ---------- boot (defer = DOM parsed; render synchronously) ----------
+
+  renderSidebar();
+  renderTopbar();
+  renderFoot();
+  applyTheme();
+  applyZoom();
+  applyAccess(null); // default: everything gated until access is known
+  wire();
+  if (IS_INDEX) {
+    route({ scroll: false });
+  } else {
+    // mark the current page in the sidebar
+    var path = window.location.pathname.replace(/^\/builders/, '').replace(/\.html$/, '') || '/';
+    document.querySelectorAll('#app-sidebar .nav-item').forEach(function (a) {
+      var target = a.getAttribute('href');
+      if (target && !a.dataset.view && target === path) a.classList.add('nav-item--active');
+    });
+    probeMe();
+  }
+
+  window.OTBShell = {
+    applyAccess: applyAccess,
+    setView: setView,
+    currentView: function () { return currentView; },
+    closeDrawer: closeDrawer,
+  };
+})();