From 2e85adffdea0852c3366ed552e2a7914d051629f Mon Sep 17 00:00:00 2001
From: jwinterm <jw@such.software>
Date: Wed, 21 Oct 2026 15:06:00 -0400
Subject: [PATCH 1/3] fix: expose Smirk account entry in free Tavern mode

---
 html/index.html                       |  17 +-
 html/js/network/smirkAuth.js          |   6 +-
 html/js/network/socketHandlers.js     |  12 ++
 html/js/ui/addressModal.js            |   3 +
 html/styles/stylesheet.css            |   6 +
 html/tavern.html                      |  14 +-
 src/scripts/showcase-browser-smoke.js | 280 +++++++++++++++++++++++++-
 7 files changed, 313 insertions(+), 25 deletions(-)

diff --git a/html/index.html b/html/index.html
index 1a78202..96fc683 100644
--- a/html/index.html
+++ b/html/index.html
@@ -169,6 +169,9 @@
             <button id="animationToggleButton" class="ctrl-btn ctrl-btn--anim" style="display: none;">
                 🎬 DISABLE ANIMATION
             </button>
+            <section id="smirkAccountSection" class="smirk-account-entry" aria-label="Smirk account" tabindex="-1" style="display:none;">
+                <div id="smirkButtonContainer"></div>
+            </section>
             <div class="hud-toolbar">
                 <label>
                     <input type="checkbox" id="audioAlertsToggle"> Audio Alerts
@@ -302,20 +305,6 @@
             <p class="modal-description">Enter your Wownero (WOW) or Monero (XMR) address below. This will be used for payouts when you escape.</p>
             <p class="modal-description" style="font-size:11px; color:#888; margin-top:8px; padding:6px; background:rgba(255,200,0,0.1); border-radius:4px;">💡 <strong>Session Info:</strong> Your address and credits are tied to a browser session token stored locally. They will persist across page refreshes but will be lost if you clear cookies, use incognito mode, or switch browsers.</p>
 
-            <!-- Smirk Wallet Integration -->
-            <div id="smirkSection" style="margin: 15px 0; padding: 12px; background: rgba(26,26,77,0.5); border: 1px solid #3a3a7d; border-radius: 6px;">
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                    <span style="font-size: 1.2em;">🔐</span>
-                    <strong style="color: #aaf;">Connect with Smirk Wallet</strong>
-                </div>
-                <p style="font-size: 11px; color: #999; margin-bottom: 10px;">Automatically set your payout address by connecting your Smirk browser wallet.</p>
-                <div id="smirkButtonContainer">
-                    <!-- Will be populated by smirkAuth.js -->
-                </div>
-            </div>
-
-            <div style="text-align: center; color: #666; margin: 10px 0; font-size: 12px;">or enter manually</div>
-
             <form id="addressModalForm">
                 <label for="addressModalInput" class="modal-label">Payout Address</label>
                 <textarea id="addressModalInput" autocomplete="off" spellcheck="false" rows="3" placeholder="Paste your payout address here"></textarea>
diff --git a/html/js/network/smirkAuth.js b/html/js/network/smirkAuth.js
index da695e9..7ffe125 100644
--- a/html/js/network/smirkAuth.js
+++ b/html/js/network/smirkAuth.js
@@ -318,7 +318,7 @@ const SmirkAuth = {
      * Create and return the Smirk login button element
      */
     _createButton() {
-        const btn = $('<button id="smirkLoginBtn" class="menu-button">')
+        const btn = $('<button id="smirkLoginBtn" type="button" class="menu-button">')
             .css({
                 'background': '#1a1a4d',
                 'color': '#fff',
@@ -330,7 +330,7 @@ const SmirkAuth = {
                 'width': '100%',
                 'text-align': 'center'
             })
-            .text('Connect Smirk Wallet');
+            .text('Connect Smirk');
 
         return btn;
     },
@@ -363,7 +363,7 @@ const SmirkAuth = {
             default: // 'ready'
                 btn.prop('disabled', false)
                    .css({ 'background': '#1a1a4d', 'border-color': '#3a3a7d', 'cursor': 'pointer' })
-                   .text('Connect Smirk Wallet');
+                   .text('Connect Smirk');
         }
     },
 
diff --git a/html/js/network/socketHandlers.js b/html/js/network/socketHandlers.js
index 70abd3c..7f438a9 100644
--- a/html/js/network/socketHandlers.js
+++ b/html/js/network/socketHandlers.js
@@ -18,6 +18,7 @@ const SocketHandlers = {
 
     _directModeEnabled: false,
     _directPayoutsEnabled: false,
+    _anyPayoutsEnabled: false,
     _paymentsEnabled: false,
     _isSmirkExplicitlyEnabled: function(data) {
         return !!data && data.smirkEnabled === true;
@@ -874,6 +875,10 @@ const SocketHandlers = {
     },
 
     onAddressPrompt: function(data) {
+        if (!SocketHandlers._anyPayoutsEnabled) {
+            console.warn('Ignoring payout address prompt while payouts are disabled.');
+            return;
+        }
         if (typeof AddressModal !== 'undefined') {
             AddressModal.show({
                 existingAddress: data?.existingAddress || null,
@@ -916,7 +921,14 @@ const SocketHandlers = {
             && data.modes.match.economies.crypto_race);
         var anyPayouts = SocketHandlers._creditsPayoutsEnabled
             || SocketHandlers._directPayoutsEnabled || matchCryptoPayouts;
+        SocketHandlers._anyPayoutsEnabled = anyPayouts;
         $('#manageAddressButton').toggle(anyPayouts);
+        $('#smirkAccountSection').toggle(SocketHandlers._smirkEnabled);
+        if (SocketHandlers._smirkEnabled && window.location.hash === '#smirkAccountSection'
+            && document.activeElement === document.body) {
+            document.getElementById('smirkAccountSection')?.focus({ preventScroll: true });
+        }
+        if (!anyPayouts && typeof AddressModal !== 'undefined') AddressModal.hide();
         if (data.entitlements && typeof SinglePlayerAvatar !== 'undefined') {
             SinglePlayerAvatar.applyEntitlements(data.entitlements);
         }
diff --git a/html/js/ui/addressModal.js b/html/js/ui/addressModal.js
index 8067e06..13758d1 100644
--- a/html/js/ui/addressModal.js
+++ b/html/js/ui/addressModal.js
@@ -53,6 +53,9 @@
         },
 
         show({ existingAddress = null, message = null } = {}) {
+            if (typeof SocketHandlers === 'undefined' || SocketHandlers._anyPayoutsEnabled !== true) {
+                return;
+            }
             this.ensureInit();
             if (!this._elements.overlay.length) {
                 return;
diff --git a/html/styles/stylesheet.css b/html/styles/stylesheet.css
index 4b5cd3b..4c2f46b 100644
--- a/html/styles/stylesheet.css
+++ b/html/styles/stylesheet.css
@@ -204,6 +204,12 @@ body {
     border-top: 1px solid rgba(255,255,255,0.055);
 }
 
+.smirk-account-entry { margin-top: 8px; }
+.smirk-account-entry :is(button, a):focus-visible {
+    outline: 2px solid #aaf;
+    outline-offset: 2px;
+}
+
 /* =========================================================================
    HUD TOOLBAR: secondary "chip" controls (audio toggle + help / history /
    scores / manage-address). Small, bordered, glow-on-hover.
diff --git a/html/tavern.html b/html/tavern.html
index c3163c3..fdb6f4c 100644
--- a/html/tavern.html
+++ b/html/tavern.html
@@ -44,10 +44,12 @@
                linear-gradient(180deg,#111015,var(--bg) 48%); color:var(--text); font-family:PixelOperator,ui-monospace,monospace; }
         body::before { content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px; }
         .wrap { position:relative; max-width:980px; margin:0 auto; padding:18px clamp(10px,3vw,26px) 32px; }
-        .tavern-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
+        .tavern-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap; }
+        .tavern-nav { display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap; }
         h1 { color:#fff;font-size:clamp(24px,4vw,34px);margin:0;letter-spacing:.03em; }
         .backlink { color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:13px; }
         .backlink:hover { color:#fff;border-color:#667386; }
+        .backlink:focus-visible { outline:2px solid var(--cyan);outline-offset:2px; }
         .muted { color:var(--muted);font-size:13px; }
         .rk-canvas { background:#050609;display:block;max-width:100%;image-rendering:pixelated; }
         .panel { background:rgba(21,26,32,.97);border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:12px;box-shadow:inset 0 1px rgba(255,255,255,.025); }
@@ -99,7 +101,7 @@
         .touch-pad button { width:44px;height:40px;padding:0;touch-action:manipulation;background:rgba(25,45,31,.94);color:#93f3a2;border-color:#4f9a5c; }
         .touch-pad [data-dir="up"]{grid-area:up}.touch-pad [data-dir="left"]{grid-area:left}.touch-pad [data-dir="down"]{grid-area:down}.touch-pad [data-dir="right"]{grid-area:right}
         @media (max-width:700px),(pointer:coarse) { .touch-pad{display:grid} #stage,.spectator-render{height:min(54vh,500px)} .join-copy{display:block}.join-copy .muted{display:block;margin-top:5px}.join-fields{grid-template-columns:auto minmax(0,1fr)}.join-fields #customizeBtn,.join-fields #joinBtn{grid-column:auto / span 1}.join-fields label{grid-column:1}.join-fields #name{grid-column:2} }
-        @media (max-width:430px) { .wrap{padding-inline:8px}.tavern-head .muted{display:none}#modebar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.modebtn{white-space:nowrap} }
+        @media (max-width:430px) { .wrap{padding-inline:8px}.tavern-head{align-items:flex-start;flex-direction:column;gap:10px}.tavern-head .muted{display:none}.tavern-nav{justify-content:flex-start}#modebar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.modebtn{white-space:nowrap} }
         @media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important} }
     </style>
 </head>
@@ -107,7 +109,11 @@
     <div class="wrap">
         <header class="tavern-head">
             <h1>🔥 The Tavern <span class="muted">social hall</span></h1>
-            <span><a class="backlink" href="/responsible-play">Responsible Play</a> <a class="backlink" href="/">← Lobby</a></span>
+            <nav class="tavern-nav" aria-label="Tavern links">
+                <a id="smirkAccountLink" class="backlink" href="/#smirkAccountSection" hidden>Smirk account</a>
+                <a class="backlink" href="/responsible-play">Responsible Play</a>
+                <a class="backlink" href="/">← Lobby</a>
+            </nav>
         </header>
 
         <form id="joinPanel" class="panel" autocomplete="off">
@@ -466,6 +472,8 @@
         });
         socket.on('game_mode_info', function (data) {
             lastGameModeInfo = data || null;
+            var smirkAccountLink = document.getElementById('smirkAccountLink');
+            if (smirkAccountLink) smirkAccountLink.hidden = !(data && data.smirkEnabled === true);
             if (data && data.entitlements) applyEntitlements(data.entitlements);
             if (data && data.cryptoType) cryptoType = data.cryptoType;
         });
diff --git a/src/scripts/showcase-browser-smoke.js b/src/scripts/showcase-browser-smoke.js
index b53a896..d6ebcbc 100644
--- a/src/scripts/showcase-browser-smoke.js
+++ b/src/scripts/showcase-browser-smoke.js
@@ -1,8 +1,9 @@
 'use strict';
 
-// Gameplay-only browser check. This deliberately avoids the application entrypoint, database,
-// wallet, payment handlers, and queue/race transitions. Mica receives synthetic Interior and Iso
-// grants; Moth receives the source-owned zero-grant catalog fixture and must remain original-only.
+// Local browser checks cover the real TavernManager, pack-gated rendering, and a client-only
+// account/payout visibility matrix. They do not start the application entrypoint, database, live
+// wallet, payment handlers, or multiplayer queue. Mica receives synthetic Interior and Iso grants;
+// Moth receives the source-owned zero-grant catalog fixture and must remain original-only.
 const fs = require('node:fs');
 const os = require('node:os');
 const path = require('node:path');
@@ -48,6 +49,209 @@ function isLoopback(hostname) {
     return hostname === '127.0.0.1' || hostname === 'localhost' || hostname === '[::1]';
 }
 
+function accountGameModeInfo({ smirkEnabled, payoutsEnabled }) {
+    return {
+        mode: payoutsEnabled ? 'PAID_SINGLE' : 'FREE',
+        freePlayEnabled: true,
+        earlyEntry: { enabled: false },
+        creditsPerGame: 1,
+        creditsPayoutsEnabled: false,
+        directModeEnabled: payoutsEnabled,
+        directPayoutsEnabled: payoutsEnabled,
+        paymentsEnabled: payoutsEnabled,
+        smirkEnabled,
+        cryptoType: 'WOW',
+        currencyLabel: 'WOW',
+        network: 'mainnet',
+        singleGamePrice: 100000000000,
+        singleGamePriceFormatted: '1 WOW',
+        creditPackages: [],
+        cosmeticProducts: [],
+        payoutOutcomes: {},
+        modes: {
+            solo: false,
+            tavern: true,
+            multiplayer: true,
+            match: { enabled: true, economies: { free: true } }
+        }
+    };
+}
+
+async function runAccountVisibilityMatrix(page) {
+    const initial = await page.evaluate(() => ({
+        smirkSectionHidden: getComputedStyle(document.getElementById('smirkAccountSection')).display === 'none',
+        payoutControlHidden: getComputedStyle(document.getElementById('manageAddressButton')).display === 'none'
+    }));
+    assert(initial.smirkSectionHidden && initial.payoutControlHidden,
+        'Account or payout controls were visible before an explicit server game-mode snapshot');
+
+    await page.evaluate(data => SocketHandlers.onGameModeInfo(data),
+        accountGameModeInfo({ smirkEnabled: true, payoutsEnabled: false }));
+    const connectButton = page.getByRole('button', { name: 'Connect Smirk', exact: true });
+    try {
+        await connectButton.waitFor({ state: 'visible', timeout: 1500 });
+    } catch (error) {
+        const state = await page.evaluate(() => ({
+            explicitFlag: SocketHandlers._smirkEnabled,
+            authInitialized: SmirkAuth._initialized,
+            providerAvailable: SmirkAuth.isAvailable(),
+            sectionDisplay: getComputedStyle(document.getElementById('smirkAccountSection')).display,
+            containerPresent: !!document.getElementById('smirkButtonContainer'),
+            buttonPresent: !!document.getElementById('smirkLoginBtn'),
+            containerContents: document.getElementById('smirkButtonContainer')?.textContent || ''
+        }));
+        throw new Error(`Smirk account entry did not become visible (${JSON.stringify(state)}): ${error.message}`);
+    }
+    await page.locator('#tavernButton').waitFor({ state: 'visible' });
+    const freeAccount = await page.evaluate(() => {
+        const region = document.getElementById('smirkAccountSection');
+        const button = document.getElementById('smirkLoginBtn');
+        const bounds = button.getBoundingClientRect();
+        return {
+            regionLabel: region.getAttribute('aria-label'),
+            tavernEnabled: getComputedStyle(document.getElementById('tavernButton')).display !== 'none',
+            payoutsControlHidden: getComputedStyle(document.getElementById('manageAddressButton')).display === 'none',
+            addressModalHidden: document.getElementById('addressModal').classList.contains('hidden'),
+            buttonText: button.textContent.trim(),
+            buttonWidth: bounds.width,
+            buttonRight: bounds.right,
+            viewportWidth: document.documentElement.clientWidth,
+            documentWidth: document.documentElement.scrollWidth
+        };
+    });
+    assert(freeAccount.regionLabel === 'Smirk account' && freeAccount.tavernEnabled
+        && freeAccount.payoutsControlHidden && freeAccount.addressModalHidden,
+    'Explicit Smirk access did not expose an accessible account entry while keeping payout controls closed');
+    assert(freeAccount.buttonWidth > 0 && freeAccount.buttonRight <= freeAccount.viewportWidth
+        && freeAccount.documentWidth <= freeAccount.viewportWidth,
+    'Smirk account entry is not usable within the mobile viewport');
+    await page.evaluate(() => {
+        window.__smirkAccountClickCount = 0;
+        SmirkAuth._handleClick = function () { window.__smirkAccountClickCount += 1; };
+    });
+    await connectButton.click();
+    await page.waitForFunction(() => window.__smirkAccountClickCount === 1);
+    await page.evaluate(() => {
+        AddressModal.show();
+        SocketHandlers.onAddressPrompt({});
+    });
+    assert(await page.locator('#addressModal').evaluate(node => node.classList.contains('hidden')),
+        'A payout address prompt opened while payout modes were disabled');
+
+    await page.evaluate(data => SocketHandlers.onGameModeInfo(data),
+        accountGameModeInfo({ smirkEnabled: false, payoutsEnabled: false }));
+    const defaultClosed = await page.evaluate(() => ({
+        accountHidden: getComputedStyle(document.getElementById('smirkAccountSection')).display === 'none',
+        payoutControlHidden: getComputedStyle(document.getElementById('manageAddressButton')).display === 'none'
+    }));
+    assert(defaultClosed.accountHidden && defaultClosed.payoutControlHidden,
+        'The server-off baseline exposed Smirk or payout controls');
+
+    await page.evaluate(data => SocketHandlers.onGameModeInfo(data),
+        accountGameModeInfo({ smirkEnabled: false, payoutsEnabled: true }));
+    const payoutAccess = await page.evaluate(() => ({
+        accountHidden: getComputedStyle(document.getElementById('smirkAccountSection')).display === 'none',
+        payoutControlVisible: getComputedStyle(document.getElementById('manageAddressButton')).display !== 'none'
+    }));
+    assert(payoutAccess.accountHidden && payoutAccess.payoutControlVisible,
+        'A permitted payout mode did not expose address management independently of Smirk');
+    await page.locator('#manageAddressButton').click();
+    await page.locator('#addressModal').waitFor({ state: 'visible' });
+    await page.evaluate(data => SocketHandlers.onGameModeInfo(data),
+        accountGameModeInfo({ smirkEnabled: false, payoutsEnabled: false }));
+    assert(await page.locator('#addressModal').evaluate(node => node.classList.contains('hidden')),
+        'Payout address modal stayed open after the server disabled payout modes');
+
+    return {
+        explicitSmirkWithFreeTavern: freeAccount,
+        serverOffBaseline: defaultClosed,
+        permittedPayoutAddressManagement: payoutAccess,
+        visibleSmirkButtonClickWired: true,
+        unsolicitedPayoutPromptIgnored: true,
+        payoutModalClosedWhenFeatureDisabled: true,
+        syntheticSnapshotsOnly: true,
+        provider: 'local Smirk stub; click handler intercepted before authentication'
+    };
+}
+
+async function runTavernAccountLink(page, outputDir) {
+    await page.goto(`${page.url().split('/').slice(0, 3).join('/')}/tavern`);
+    const accountLink = page.locator('#smirkAccountLink');
+    await accountLink.waitFor({ state: 'attached' });
+    assert(await accountLink.evaluate(node => node.hidden),
+        'The Tavern exposed its Smirk account link before an explicit enabled snapshot');
+    await page.evaluate(data => window.__deliverSocketEvent('game_mode_info', data),
+        accountGameModeInfo({ smirkEnabled: false, payoutsEnabled: false }));
+    assert(await accountLink.evaluate(node => node.hidden),
+        'The Tavern exposed its Smirk account link when the server flag was off');
+    await page.evaluate(data => window.__deliverSocketEvent('game_mode_info', data),
+        accountGameModeInfo({ smirkEnabled: true, payoutsEnabled: false }));
+    await accountLink.waitFor({ state: 'visible' });
+    const linkState = await page.evaluate(() => {
+        const link = document.getElementById('smirkAccountLink');
+        const bounds = link.getBoundingClientRect();
+        const header = document.querySelector('.tavern-head').getBoundingClientRect();
+        const title = document.querySelector('.tavern-head h1').getBoundingClientRect();
+        const nav = link.parentElement.getBoundingClientRect();
+        return {
+            href: link.getAttribute('href'),
+            viewportWidth: document.documentElement.clientWidth,
+            documentWidth: document.documentElement.scrollWidth,
+            linkRight: bounds.right,
+            linkWidth: bounds.width,
+            header: { left: header.left, right: header.right, width: header.width },
+            title: { left: title.left, right: title.right, width: title.width },
+            nav: { left: nav.left, right: nav.right, width: nav.width },
+            controlsInsideHeader: header.left <= title.left && title.right <= header.right
+                && header.left <= nav.left && nav.right <= header.right
+        };
+    });
+    assert(linkState.href === '/#smirkAccountSection' && linkState.linkWidth > 0
+        && linkState.linkRight <= linkState.viewportWidth
+        && linkState.documentWidth <= linkState.viewportWidth
+        && linkState.header.right <= linkState.viewportWidth && linkState.controlsInsideHeader,
+    'The enabled Tavern account link is not usable within the mobile viewport');
+    await page.getByRole('link', { name: 'Smirk account', exact: true }).focus();
+    assert(await accountLink.evaluate(node => document.activeElement === node),
+        'The enabled Tavern account link is not keyboard focusable');
+    await page.screenshot({ path: path.join(outputDir, 'tavern-smirk-account-link.png'), fullPage: true });
+    await accountLink.click();
+    await page.waitForURL('**/#smirkAccountSection');
+    await page.waitForFunction(() => document.readyState === 'complete'
+        && typeof SocketHandlers !== 'undefined' && typeof SmirkAuth !== 'undefined');
+    await page.evaluate(data => SocketHandlers.onGameModeInfo(data),
+        accountGameModeInfo({ smirkEnabled: true, payoutsEnabled: false }));
+    const destination = await page.evaluate(() => ({
+        path: location.pathname,
+        hash: location.hash,
+        sectionFocusable: document.activeElement === document.getElementById('smirkAccountSection'),
+        sectionVisible: getComputedStyle(document.getElementById('smirkAccountSection')).display !== 'none',
+        payoutControlHidden: getComputedStyle(document.getElementById('manageAddressButton')).display === 'none'
+    }));
+    assert(destination.path === '/' && destination.hash === '#smirkAccountSection'
+        && destination.sectionFocusable && destination.sectionVisible && destination.payoutControlHidden,
+    'The Tavern account link did not land at the enabled, payout-free lobby account section');
+    await page.screenshot({ path: path.join(outputDir, 'lobby-smirk-account-entry.png'), fullPage: true });
+    const connectButton = page.getByRole('button', { name: 'Connect Smirk', exact: true });
+    await connectButton.waitFor({ state: 'visible' });
+    await page.evaluate(() => {
+        window.__smirkAccountClickCount = 0;
+        SmirkAuth._handleClick = function () { window.__smirkAccountClickCount += 1; };
+    });
+    await connectButton.click();
+    await page.waitForFunction(() => window.__smirkAccountClickCount === 1);
+    return {
+        mobileTavernLink: linkState,
+        keyboardFocusable: true,
+        lobbyDestination: destination,
+        visibleButtonClickWired: true,
+        screenshots: {
+            tavern: 'tavern-smirk-account-link.png',
+            lobby: 'lobby-smirk-account-entry.png'
+        }
+    };
+}
+
 async function main() {
     assert(process.env.NODE_ENV !== 'production', 'Refusing to run with NODE_ENV=production');
     assert(fs.existsSync(path.join(HTML_ROOT, 'tavern.html')), 'Tavern source page is missing');
@@ -91,6 +295,13 @@ async function main() {
     app.get('/runtime-config.js', (_req, res) => {
         res.type('application/javascript').send('window.WOWNGEON_RUNTIME = {rendererLocalEnabled:false, rendererCdnEnabled:false};');
     });
+    app.get('/api/game-modes', (_req, res) => res.json({ hostedBy: null }));
+    app.get('/api/disclosures', (_req, res) => res.json({
+        policyVersion: 'local-browser-fixture-v1',
+        service: { anyPayoutsEnabled: false }
+    }));
+    app.get('/api/stats', (_req, res) => res.json({ gamesToday: 0, escapesToday: 0, payoutsEnabled: false }));
+    app.get('/api/auth/smirk/status', (_req, res) => res.json({ linked: false, hasPayoutAddress: false }));
     app.get('/tavern', (_req, res) => res.sendFile(path.join(HTML_ROOT, 'tavern.html')));
     app.use(express.static(HTML_ROOT));
 
@@ -177,6 +388,62 @@ async function main() {
         }
 
         await Promise.all(Object.values(views).map(({ page }) => page.goto(`${origin}/tavern`)));
+
+        const accountContext = await browser.newContext({ viewport: { width: 390, height: 844 } });
+        accountContext.on('requestfailed', request => {
+            const url = new URL(request.url());
+            if (!isLoopback(url.hostname) || Number(url.port || 80) !== address.port) {
+                blockedExternal.push(url.origin);
+            }
+        });
+        await accountContext.route('**/*', route => {
+            const url = new URL(route.request().url());
+            if (url.protocol === 'data:' || url.protocol === 'blob:') return route.continue();
+            if (url.protocol === 'http:' && isLoopback(url.hostname) && Number(url.port || 80) === address.port) {
+                return route.continue();
+            }
+            blockedExternal.push(url.origin);
+            return route.abort('blockedbyclient');
+        });
+        const accountPage = await accountContext.newPage();
+        await accountPage.addInitScript(() => {
+            window.smirk = {
+                async connect() { return { wow: {} }; },
+                async getPublicKeys() { return {}; },
+                async getAddresses() { return {}; }
+            };
+        });
+        await accountPage.route('**/socket.io/socket.io.js', route => route.fulfill({
+            status: 200,
+            contentType: 'application/javascript',
+            body: `window.io = function () {\n` +
+                `  var listeners = {};\n` +
+                `  var client = { id: 'smirk-account-browser-fixture', connected: true,\n` +
+                `    on: function (name, fn) { (listeners[name] || (listeners[name] = [])).push(fn); },\n` +
+                `    emit: function () {}\n` +
+                `  };\n` +
+                `  window.__deliverSocketEvent = function (name, data) { (listeners[name] || []).forEach(function (fn) { fn(data); }); };\n` +
+                `  window.socket = client;\n` +
+                `  return client;\n` +
+                `};`
+        }));
+        accountPage.on('pageerror', error => browserFailures.push(error.message));
+        accountPage.on('console', message => {
+            if (message.type() === 'error') browserFailures.push(message.text());
+        });
+        accountPage.on('response', response => {
+            if (response.status() >= 400) {
+                observedHttpFailures.push({ path: new URL(response.url()).pathname, status: response.status() });
+            }
+        });
+        await accountPage.goto(`${origin}/`);
+        await accountPage.waitForFunction(() => document.readyState === 'complete'
+            && typeof SocketHandlers !== 'undefined' && typeof SmirkAuth !== 'undefined'
+            && typeof InputHandler !== 'undefined' && window.socket?.connected);
+        await accountPage.waitForTimeout(250);
+        const accountUi = await runAccountVisibilityMatrix(accountPage);
+        const tavernAccountLink = await runTavernAccountLink(accountPage, outputDir);
+
         for (const { page } of Object.values(views)) {
             await page.locator('#joinBtn').waitFor({ state: 'visible' });
             await page.waitForFunction(() => document.getElementById('joinBtn') && !document.getElementById('joinBtn').disabled);
@@ -418,7 +685,7 @@ async function main() {
         }
         const result = {
             ok: true,
-            scope: 'gameplay-only Tavern browser smoke with isolated spectator layout fixture; no queue/race transitions',
+            scope: 'local Tavern lifecycle/graphics smoke plus a client-only account visibility matrix; no paid gameplay, queue/race transitions, database, or live wallet',
             origin: '127.0.0.1 loopback only',
             fixture: 'Mica receives synthetic roguelike-interior and iso-dungeon grants; Moth receives the authoritative zero-grant, original-only snapshot; both have zero balances and no purchase, skin or 3D grant',
             clients: { count: clientsByRole.size, mappedByPageOwnedSocketId: true },
@@ -430,10 +697,13 @@ async function main() {
             mobile,
             activeArena: { desktop: desktopArena, mobile: mobileArena, arenaReceivesSafeInitialFocus: true, tavernFocusRestored: true },
             missingGeneratedSkin: skinFailure,
+            accountUi,
+            tavernAccountLink,
             screenshots: {
                 syntheticInteriorCharacter: 'tavern-synthetic-interior-character.png',
                 freeOriginalBaseline: screenshotPaths.moth,
-                desktopIso: 'tavern-desktop-iso.png', mobile: screenshotPaths
+                desktopIso: 'tavern-desktop-iso.png', mobile: screenshotPaths,
+                smirkAccount: tavernAccountLink.screenshots
             },
             unexpectedHttpFailures,
             externalRequestsBlocked: blockedExternal.length,

From 0244a4ab8cd5db303de5e7f41cfa85f26eaf4956 Mon Sep 17 00:00:00 2001
From: jwinterm <jw@such.software>
Date: Wed, 21 Oct 2026 15:23:19 -0400
Subject: [PATCH 2/3] fix: preserve lobby sessions across socket reconnects

---
 html/index.html                           |  19 ++-
 html/js/network/socketHandlers.js         |   3 +
 test/socketSessionConnectOrdering.test.js | 184 ++++++++++++++++++++++
 3 files changed, 198 insertions(+), 8 deletions(-)
 create mode 100644 test/socketSessionConnectOrdering.test.js

diff --git a/html/index.html b/html/index.html
index 96fc683..27f99ba 100644
--- a/html/index.html
+++ b/html/index.html
@@ -14,20 +14,23 @@
     <!-- Initialize socket with resume token (for persistent anonymous session) -->
     <script>
         (function(){
-            let opts = {};
+            let opts = { autoConnect: false };
             window._localStorageAvailable = false;
             try {
                 // Test localStorage availability (fails in private browsing on some browsers)
                 localStorage.setItem('_test', '1');
                 localStorage.removeItem('_test');
                 window._localStorageAvailable = true;
-                const existing = localStorage.getItem('wownerogue_token');
-                if (existing) {
-                    // Send the session token in the handshake `auth` payload, NOT the URL
-                    // query string. Query strings leak into proxy/access/referer logs;
-                    // auth is carried in the connection body.
-                    opts.auth = { resumeToken: existing };
-                }
+                // Read the current token for every initial connection and reconnect, rather
+                // than retaining the token that existed when this page first loaded.
+                opts.auth = function(callback) {
+                    let resumeToken = null;
+                    if (window._localStorageAvailable) {
+                        try { resumeToken = localStorage.getItem('wownerogue_token'); } catch(_) {}
+                    }
+                    // Credentials stay in Socket.IO's handshake auth payload, never the URL.
+                    callback(resumeToken ? { resumeToken: resumeToken } : {});
+                };
             } catch(_) {
                 window._localStorageAvailable = false;
                 console.warn('localStorage unavailable - session will not persist');
diff --git a/html/js/network/socketHandlers.js b/html/js/network/socketHandlers.js
index 7f438a9..5c488b9 100644
--- a/html/js/network/socketHandlers.js
+++ b/html/js/network/socketHandlers.js
@@ -156,6 +156,8 @@ const SocketHandlers = {
         // If the low-level socket connected before handlers were registered, emulate onConnect.
         if (window.socket && window.socket.connected) {
             this.onConnect();
+        } else if (window.socket && typeof window.socket.connect === 'function') {
+            window.socket.connect();
         }
     },
     
@@ -183,6 +185,7 @@ const SocketHandlers = {
         // Connection handlers
         socket.on('connect', this.onConnect);
         socket.on('disconnect', function() {
+            SocketHandlers._didConnect = false;
             SocketHandlers._invalidatePaymentSession();
             if (typeof CommerceConsent !== 'undefined' && CommerceConsent.clear) {
                 CommerceConsent.clear();
diff --git a/test/socketSessionConnectOrdering.test.js b/test/socketSessionConnectOrdering.test.js
new file mode 100644
index 0000000..162d213
--- /dev/null
+++ b/test/socketSessionConnectOrdering.test.js
@@ -0,0 +1,184 @@
+const fs = require('node:fs');
+const vm = require('node:vm');
+
+class SocketFixture {
+    constructor() {
+        this.connected = false;
+        this.id = 'ordering-fixture-socket';
+        this.listeners = new Map();
+        this.emitted = [];
+        this.connectCount = 0;
+        this.listenersReadyAtConnect = [];
+        this.handshakeAuth = [];
+    }
+
+    on(eventName, callback) {
+        const callbacks = this.listeners.get(eventName) || [];
+        callbacks.push(callback);
+        this.listeners.set(eventName, callbacks);
+    }
+
+    emit(eventName, payload) {
+        this.emitted.push({ eventName, payload });
+    }
+
+    deliver(eventName, payload) {
+        for (const callback of this.listeners.get(eventName) || []) callback(payload);
+    }
+
+    connect(authProvider) {
+        if (this.connected) return;
+        if (authProvider === undefined) authProvider = this.authProvider;
+        let auth = null;
+        if (typeof authProvider === 'function') {
+            authProvider(payload => { auth = payload; });
+        }
+        this.handshakeAuth.push(auth);
+        this.connected = true;
+        this.connectCount += 1;
+        this.listenersReadyAtConnect.push(
+            ['connect', 'session_token', 'session_resumed'].every(name => this.listeners.has(name))
+        );
+
+        // The server can emit session state immediately after the client's connect event.
+        this.deliver('connect');
+        if (this.connectCount === 1) {
+            this.deliver('session_token', { token: 'fixture-session-first', userId: 41 });
+        } else if (this.connectCount === 2) {
+            this.deliver('session_resumed', { token: 'fixture-session-resumed', userId: 41, credits: 0 });
+        } else {
+            this.deliver('session_resumed', { token: 'fixture-session-latest', userId: 41, credits: 0 });
+        }
+    }
+
+    disconnect() {
+        if (!this.connected) return;
+        this.connected = false;
+        this.deliver('disconnect');
+    }
+}
+
+function makeJQueryStub() {
+    return function jqueryStub() {
+        const chain = {
+            length: 0,
+            on() { return this; },
+            append() { return this; },
+            remove() { return this; },
+            hide() { return this; },
+            show() { return this; },
+            val() { return this; },
+            text() { return this; },
+            html() { return this; },
+            css() { return this; },
+            prop() { return this; },
+            removeData() { return this; }
+        };
+        return chain;
+    };
+}
+
+function loadLobbyClient({ storageUnavailable = false } = {}) {
+    const html = fs.readFileSync(require.resolve('../html/index.html'), 'utf8');
+    const bootstrap = html.match(/<script>\s*([\s\S]*?)<\/script>/);
+    if (!bootstrap) throw new Error('Lobby socket bootstrap script was not found');
+
+    const localValues = new Map();
+    const localStorage = {
+        getItem: key => {
+            if (storageUnavailable) throw new Error('storage unavailable');
+            return localValues.get(key) || null;
+        },
+        setItem: (key, value) => {
+            if (storageUnavailable) throw new Error('storage unavailable');
+            localValues.set(key, String(value));
+        },
+        removeItem: key => localValues.delete(key)
+    };
+    const socket = new SocketFixture();
+    let socketOptions = null;
+    const context = {
+        window: {
+            location: { origin: 'https://wowngeon.test' },
+            localStorage,
+            navigator: { userAgent: 'socket-session-ordering-test' }
+        },
+        document: {
+            addEventListener() {},
+            getElementById() { return null; }
+        },
+        localStorage,
+        navigator: { userAgent: 'socket-session-ordering-test' },
+        io(options) {
+            socketOptions = options;
+            socket.authProvider = options.auth;
+            if (options.autoConnect !== false) socket.connect(options.auth);
+            return socket;
+        },
+        socket,
+        $: makeJQueryStub(),
+        UI: { scrollChat() {} },
+        console: { log() {}, warn() {}, error() {} },
+        fetch: async () => ({ json: async () => ({}) }),
+        setTimeout() { return 1; }
+    };
+    vm.createContext(context);
+    vm.runInContext(bootstrap[1], context, { filename: 'html/index.html#socket-bootstrap' });
+    vm.runInContext(
+        `${fs.readFileSync(require.resolve('../html/js/network/socketHandlers'), 'utf8')}\nthis.socketHandlers = SocketHandlers;`,
+        context,
+        { filename: 'html/js/network/socketHandlers.js' }
+    );
+    return { context, localValues, socket, socketOptions };
+}
+
+describe('lobby socket session event ordering', () => {
+    test('registers session listeners before connecting and restores the token on reconnect', () => {
+        const { context, localValues, socket, socketOptions } = loadLobbyClient();
+
+        expect(socketOptions.autoConnect).toBe(false);
+        expect(socket.connected).toBe(false);
+        context.socketHandlers.init();
+
+        expect(socket.listenersReadyAtConnect).toEqual([true]);
+        expect(socket.handshakeAuth).toEqual([{}]);
+        expect(context.socketHandlers._sessionUserId).toBe(41);
+        expect(localValues.get('wownerogue_token')).toBe('fixture-session-first');
+        expect(socket.emitted.filter(event => event.eventName === 'register_client')).toHaveLength(1);
+
+        context.socketHandlers.init();
+        expect(socket.connectCount).toBe(1);
+        expect(socket.emitted.filter(event => event.eventName === 'register_client')).toHaveLength(1);
+
+        socket.disconnect();
+        expect(context.socketHandlers._sessionUserId).toBeNull();
+        socket.connect(socketOptions.auth);
+
+        expect(socket.listenersReadyAtConnect).toEqual([true, true]);
+        expect(socket.handshakeAuth).toEqual([{}, { resumeToken: 'fixture-session-first' }]);
+        expect(context.socketHandlers._sessionUserId).toBe(41);
+        expect(localValues.get('wownerogue_token')).toBe('fixture-session-resumed');
+        expect(socket.emitted.filter(event => event.eventName === 'register_client')).toHaveLength(2);
+
+        socket.disconnect();
+        socket.connect(socketOptions.auth);
+        expect(socket.handshakeAuth).toEqual([
+            {},
+            { resumeToken: 'fixture-session-first' },
+            { resumeToken: 'fixture-session-resumed' }
+        ]);
+        expect(localValues.get('wownerogue_token')).toBe('fixture-session-latest');
+        expect(socket.emitted.filter(event => event.eventName === 'register_client')).toHaveLength(3);
+    });
+
+    test('leaves session resume disabled when storage is unavailable', () => {
+        const { context, socket, socketOptions } = loadLobbyClient({ storageUnavailable: true });
+
+        expect(socketOptions.auth).toBeUndefined();
+        context.socketHandlers.init();
+
+        expect(socket.connected).toBe(true);
+        expect(socket.handshakeAuth).toEqual([null]);
+        expect(context.socketHandlers._sessionUserId).toBe(41);
+    });
+});

From 2aec43822633765fe35ee83fc904494caa636ed3 Mon Sep 17 00:00:00 2001
From: jwinterm <jw@such.software>
Date: Wed, 21 Oct 2026 15:43:01 -0400
Subject: [PATCH 3/3] fix(auth): resolve Smirk challenge parameter types

---
 src/routes/auth.js                      | 20 +++++++++++++-------
 src/scripts/showcase-lifecycle-smoke.js | 15 +++++++++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/routes/auth.js b/src/routes/auth.js
index 88a5f19..ba50e24 100644
--- a/src/routes/auth.js
+++ b/src/routes/auth.js
@@ -10,6 +10,16 @@ const { verifyNip98Event } = require('../utils/nip98');
 const AUTH_WINDOW_MS = 60 * 1000;
 const AUTH_RATE_MAX_KEYS = 10000;
 
+// Shared with the real PostgreSQL lifecycle check so parameter inference is exercised
+// against the migrated schema, rather than accepted only by query mocks.
+const challengeInsertQuery = `
+  INSERT INTO smirk_challenges (challenge, socket_id, user_id)
+  SELECT $1::varchar(64), $2::varchar(255), id
+  FROM users
+  WHERE id = $3 AND socket_id = $2 AND anon_token = $4
+  RETURNING id
+`;
+
 /**
  * The host a NIP-98 auth event must be signed for.
  *
@@ -260,13 +270,7 @@ router.post('/api/auth/smirk/challenge', challengeRateLimit, asyncHandler(async
 
   // Store a stable user binding as well as the current socket. The user binding is what
   // prevents a public Tavern/Match socket id from being used to attach an attacker's key.
-  const inserted = await db.query(`
-    INSERT INTO smirk_challenges (challenge, socket_id, user_id)
-    SELECT $1, $2, id
-    FROM users
-    WHERE id = $3 AND socket_id = $2 AND anon_token = $4
-    RETURNING id
-  `, [challenge, socketId, session.userId, session.token]);
+  const inserted = await db.query(challengeInsertQuery, [challenge, socketId, session.userId, session.token]);
   if (inserted.rows.length !== 1) throw unauthorized();
 
   // Opportunistic cleanup of expired and long-used challenges.
@@ -470,3 +474,5 @@ router.get('/api/auth/smirk/status', asyncHandler(async (req, res) => {
 
   return router;
 };
+
+module.exports.challengeInsertQuery = challengeInsertQuery;
diff --git a/src/scripts/showcase-lifecycle-smoke.js b/src/scripts/showcase-lifecycle-smoke.js
index aacbde6..00bdf3e 100644
--- a/src/scripts/showcase-lifecycle-smoke.js
+++ b/src/scripts/showcase-lifecycle-smoke.js
@@ -12,6 +12,7 @@ const path = require('node:path');
 const { promisify } = require('node:util');
 const { Client } = require('pg');
 const { chromium } = require('playwright-core');
+const { challengeInsertQuery } = require('../routes/auth');
 
 const execFile = promisify(childProcess.execFile);
 const ROOT = path.resolve(__dirname, '../..');
@@ -143,6 +144,7 @@ function classifyStartupFailure(output) {
 
 function classifyHarnessFailure(error, phase) {
     const sqlStateCodes = {
+        '42P08': 'DATABASE_PARAMETER_TYPE_CONFLICT',
         '42P01': 'DATABASE_TABLE_UNDEFINED',
         '42703': 'DATABASE_COLUMN_UNDEFINED',
         '42883': 'DATABASE_FUNCTION_UNDEFINED',
@@ -370,6 +372,19 @@ async function main() {
             throw error;
         });
 
+        // PREPARE checks the route's actual parameter inference without generating a
+        // challenge, activating Smirk, or passing any authentication values to PostgreSQL.
+        phase = 'auth-query-compile';
+        const authDb = new Client({ host: socketDir, port: dbPort, database: dbName, user: dbUser,
+            connectionTimeoutMillis: 2000, statement_timeout: 5000, lock_timeout: 2000 });
+        try {
+            await authDb.connect();
+            await authDb.query(`PREPARE showcase_smirk_challenge AS ${challengeInsertQuery}`);
+            await authDb.query('DEALLOCATE showcase_smirk_challenge');
+        } finally {
+            await authDb.end();
+        }
+
         phase = 'browser-setup';
         browser = await chromium.launch({ headless: true });
         for (const role of ROLES) {