aimeat 2.7.0 → 3.0.0

package/dist/static/sdk-libs/auth/modal.js

@@ -2,26 +2,47 @@
  * @file auth/modal.js
  * @description aimeat-auth sign-in modal (SDK-libs migration Phase 3): the password + social login
  *   modal with its own EN/FI switcher, forgot-password / forgot-username sub-views, and the
- *   email-completion sub-view (legacy accounts + the register-under-email-gate flow). wireModal's
- *   submit tries register → NAME_TAKEN → loginWithPassword, branching on EMAIL_REQUIRED /
- *   EMAIL_NOT_VERIFIED into the email step. Delegates account creation to the AIMEAT.auth object.
- *   Extracted from auth-lib-part2/3.ts.
+ *   email-completion sub-view (legacy accounts + the register-under-email-gate flow).
+ *
+ *   TWO TABS, one job each. Sign in takes a username OR the email the account was verified with
+ *   (the server resolves it) and never creates anything. Create account takes the username, the
+ *   password, an optional display name, and — when this node's gate requires one (config prelude
+ *   `emailRequired`) — the email, asked up front rather than demanded after a failed create.
+ *   Social buttons sit outside both tabs because one provider button serves both.
  * @structure showLoginModal(opts, renderBtn) → { buildModalInner, wireModal, render, switchLang,
- *   openEmailCompletion, showView, capture/restoreInputs }.
+ *   openEmailCompletion, sendEmailCode, showView, capture/restoreInputs }.
  * @usage import { showLoginModal } from './modal.js';
  * @version-history
  *   v1.0.0 — 2026-07-19 — Extracted from src/routes/libs/auth-lib-part2/3.ts (SDK-libs migration Phase 3).
  *   v1.0.1 — 2026-07-25 — Fix: adopt the node's full locale dict when any key differs, so newer modal
  *     keys (email-step strings) missing from a host's opts.i18n no longer fall back to English.
+ *   v1.2.0 — 2026-08-08 — opts.tab opens straight on 'register', so a button that says "register"
+ *     no longer opens a sign-in form and leave the person to find the tab.
+ *   v1.1.0 — 2026-08-07 — Split the single register-or-login form into Sign in / Create account tabs;
+ *     the email field appears in Create account when the node's gate asks for it; Sign in accepts the
+ *     account's verified email as the identifier. Measured problem: one form doing both jobs asked for
+ *     a display name to sign in, never mentioned email until a create attempt had already failed, and
+ *     turned a mistyped username into a second empty account.
  */
 import { auth, api } from './session.js';
 import { escHtml } from './theme.js';
 import { currentModalLang, loadModalI18n, MODAL_LANG_KEY } from './i18n.js';
-import { NODE_URL, NODE_ID, AUTH_PROVIDERS, PROVIDER_ICONS } from './config.js';
+import { NODE_URL, NODE_ID, AUTH_PROVIDERS, PROVIDER_ICONS, EMAIL_REQUIRED } from './config.js';
+
+/** An identifier is an email when it carries a dot-bearing domain. A GHII (`alice@node-id`) never
+ *  does, so this separates the two without asking the person which one they typed. */
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 export function showLoginModal(opts, renderBtn) {
   var i = opts.i18n || {};
   var lang = currentModalLang();
+  // Which of the two tabs is showing. One modal, two separate jobs: signing in needs an identifier
+  // and a password, creating an account needs a name to be known by and (on nodes with the email
+  // gate) an address. Merging them into one form meant neither said what it wanted.
+  // A caller that already knows which job the person came to do can say so: a button reading
+  // "Register your home" opening a sign-in form is a small lie, and the person has to find the
+  // tab themselves. Anything other than 'register' keeps the previous behaviour.
+  var tab = opts.tab === 'register' ? 'register' : 'signin';
   // Remove existing modal
   const old = document.getElementById('aimeat-modal');
   if (old) old.remove();
@@ -32,11 +53,17 @@ export function showLoginModal(opts, renderBtn) {
   // Capture typed values so they survive a re-render (language change).
   function captureInputs() {
     var g = function (id) { var el = /** @type {any} */ (document.getElementById(id)); return el ? el.value : ''; };
-    return { u: g('aimeat-username'), p: g('aimeat-password'), d: g('aimeat-displayname') };
+    return {
+      u: g('aimeat-username'), p: g('aimeat-password'),
+      ru: g('aimeat-reg-username'), rp: g('aimeat-reg-password'),
+      rd: g('aimeat-reg-displayname'), re: g('aimeat-reg-email'),
+    };
   }
   function restoreInputs(vals) {
     var s = function (id, val) { var el = /** @type {any} */ (document.getElementById(id)); if (el && val) el.value = val; };
-    s('aimeat-username', vals.u); s('aimeat-password', vals.p); s('aimeat-displayname', vals.d);
+    s('aimeat-username', vals.u); s('aimeat-password', vals.p);
+    s('aimeat-reg-username', vals.ru); s('aimeat-reg-password', vals.rp);
+    s('aimeat-reg-displayname', vals.rd); s('aimeat-reg-email', vals.re);
   }
 
   // Switch language: persist the choice, reload translations, re-render in place (no page reload).
@@ -56,7 +83,7 @@ export function showLoginModal(opts, renderBtn) {
   }
 
   function render(anim) {
-    modal.innerHTML = buildModalInner(i, lang, anim);
+    modal.innerHTML = buildModalInner(i, lang, anim, tab);
     wireModal();
   }
 
@@ -80,7 +107,8 @@ export function showLoginModal(opts, renderBtn) {
     restoreInputs(vals);
   });
 
-  function buildModalInner(i, lang, anim) {
+  function buildModalInner(i, lang, anim, tab) {
+    var isReg = tab === 'register';
     return '<style>'
       + '.aimeat-inp{width:100%;padding:11px 14px;border:1.5px solid #E5E7EB;border-radius:10px;font-family:DM Sans,system-ui,sans-serif;font-size:15px;color:#1A1A2E;background:#FAFAF8;box-sizing:border-box;transition:all .15s;outline:none}'
       + '.aimeat-inp:focus{border-color:#E8564A;box-shadow:0 0 0 3px rgba(232,86,74,.1)}'
@@ -95,6 +123,10 @@ export function showLoginModal(opts, renderBtn) {
       + '.aimeat-lang{padding:4px 9px;border:1px solid #E5E7EB;background:#fff;color:#6B7280;border-radius:7px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.4px;line-height:1;font-family:DM Sans,system-ui,sans-serif;transition:all .15s}'
       + '.aimeat-lang:hover{border-color:#E8564A;color:#E8564A}'
       + '.aimeat-lang.active{background:#E8564A;color:#fff;border-color:#E8564A;cursor:default}'
+      + '.aimeat-tabs{display:flex;gap:0;margin:18px 0 0;border-bottom:1.5px solid #E5E7EB}'
+      + '.aimeat-tab{flex:1;padding:11px 8px;background:none;border:none;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;cursor:pointer;font-family:DM Sans,system-ui,sans-serif;font-size:15px;font-weight:600;color:#6B7280;transition:color .15s,border-color .15s}'
+      + '.aimeat-tab:hover{color:#1A1A2E}'
+      + '.aimeat-tab.active{color:#E8564A;border-bottom-color:#E8564A;cursor:default}'
       + '@keyframes aimeatModalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}'
       + '</style>'
       + '<div style="position:fixed;inset:0;background:rgba(26,26,46,.4);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;z-index:99999;font-family:DM Sans,system-ui,sans-serif;padding:24px">'
@@ -105,24 +137,60 @@ export function showLoginModal(opts, renderBtn) {
       + '<button type="button" class="aimeat-lang' + (lang === 'fi' ? ' active' : '') + '" data-lang="fi">FI</button>'
       + '</div>'
       + '<h2 style="margin:0;font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;color:#1A1A2E">'
-      + 'AIME <span style="width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#E8564A,#D4493F);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px">♥</span> AT Sign In'
+      + 'AIME <span style="width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#E8564A,#D4493F);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px">♥</span> AT'
       + '</h2>'
-      + '<p style="margin:8px 0 0;font-size:14px;color:#6B7280;line-height:1.5">' + escHtml(i.descNew || 'New? Pick a username and password to create an account.') + ' ' + escHtml(i.descReturning || 'Already have an account? Enter your username and password.') + '</p>'
+      + '<p style="margin:8px 0 0;font-size:14px;color:#6B7280;line-height:1.5">'
+      + escHtml(isReg
+        ? (i.descNew || 'Pick a username and password to create an account.')
+        : (i.descReturning || 'Enter the username or email you signed up with.'))
+      + '</p>'
+      // Two tabs, two jobs. Which one is showing decides what the body asks for.
+      + '<div class="aimeat-tabs" role="tablist">'
+      + '<button type="button" role="tab" class="aimeat-tab' + (isReg ? '' : ' active') + '" data-tab="signin" aria-selected="' + (isReg ? 'false' : 'true') + '">' + escHtml(i.tabSignIn || 'Sign in') + '</button>'
+      + '<button type="button" role="tab" class="aimeat-tab' + (isReg ? ' active' : '') + '" data-tab="register" aria-selected="' + (isReg ? 'true' : 'false') + '">' + escHtml(i.tabRegister || 'Create account') + '</button>'
+      + '</div>'
       + '</div>'
       // Body
       + '<div id="aimeat-modal-body" style="padding:24px 32px">'
-      + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.usernameLabel || 'Username') + '</label>'
-      + '<input id="aimeat-username" class="aimeat-inp" placeholder="' + escHtml(i.usernamePlaceholder || 'Username') + '"></div>'
+      // ── Sign-in tab: an identifier the person actually remembers, and a password.
+      + '<div id="aimeat-tab-signin" style="' + (isReg ? 'display:none' : '') + '">'
+      + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.identifierLabel || 'Username or email') + '</label>'
+      + '<input id="aimeat-username" class="aimeat-inp" autocomplete="username" placeholder="' + escHtml(i.identifierPlaceholder || 'Username or email') + '"></div>'
       + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.passwordLabel || 'Password') + '</label>'
-      + '<input id="aimeat-password" type="password" class="aimeat-inp" placeholder="' + escHtml(i.passwordPlaceholder || 'Password (min 4 chars)') + '"></div>'
-      + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.displayNameLabel || 'Display Name') + ' <span style="font-weight:400;text-transform:none;letter-spacing:0">(' + escHtml(i.displayNameHint || 'optional, for new accounts') + ')</span></label>'
-      + '<input id="aimeat-displayname" class="aimeat-inp" placeholder="' + escHtml(i.displayNamePlaceholder || 'Display Name') + '"></div>'
+      + '<input id="aimeat-password" type="password" autocomplete="current-password" class="aimeat-inp" placeholder="' + escHtml(i.passwordPlaceholder || 'Password') + '"></div>'
       + '<div style="display:flex;gap:10px;margin-top:20px">'
-      + '<button id="aimeat-go-btn" class="aimeat-go">' + escHtml(i.signInBtn || 'Sign In / Register') + '</button>'
+      + '<button id="aimeat-go-btn" class="aimeat-go">' + escHtml(i.signInOnlyBtn || 'Sign in') + '</button>'
       + '<button id="aimeat-cancel-btn" class="aimeat-cancel">' + escHtml(i.cancelBtn || 'Cancel') + '</button>'
       + '</div>'
       + '<p id="aimeat-error" style="margin:8px 0 0;font-size:13px;color:#ef4444;display:none"></p>'
-      // Social login — one button per enabled OIDC provider, baked from config
+      + '<div style="margin-top:14px;display:flex;gap:16px">'
+      + '<a href="#" id="aimeat-forgot-pw" style="font-size:13px;color:#6B7280;cursor:pointer;text-decoration:underline">' + escHtml(i.forgotPassword || 'Forgot password?') + '</a>'
+      + '<a href="#" id="aimeat-forgot-user" style="font-size:13px;color:#6B7280;cursor:pointer;text-decoration:underline">' + escHtml(i.forgotUsername || 'Forgot username?') + '</a>'
+      + '</div>'
+      + '</div>'
+      // ── Register tab: the account being made. The email field is here from the start when the
+      //    node's gate requires one, rather than appearing after a failed create.
+      + '<div id="aimeat-tab-register" style="' + (isReg ? '' : 'display:none') + '">'
+      + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.usernameLabel || 'Username') + '</label>'
+      + '<input id="aimeat-reg-username" class="aimeat-inp" autocomplete="username" placeholder="' + escHtml(i.usernamePlaceholder || 'Username') + '">'
+      + '<p style="margin:5px 0 0;font-size:12px;color:#9CA3AF">' + escHtml(i.usernameHint || 'This becomes your permanent identity on this node.') + '</p></div>'
+      + (EMAIL_REQUIRED
+        ? '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.emailLabel || 'Email') + '</label>'
+          + '<input id="aimeat-reg-email" type="email" autocomplete="email" class="aimeat-inp" placeholder="you@example.com">'
+          + '<p style="margin:5px 0 0;font-size:12px;color:#9CA3AF">' + escHtml(i.registerEmailHint || 'We send a 6-digit code here to confirm the address. You can sign in with it later.') + '</p></div>'
+        : '')
+      + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.passwordLabel || 'Password') + '</label>'
+      + '<input id="aimeat-reg-password" type="password" autocomplete="new-password" class="aimeat-inp" placeholder="' + escHtml(i.passwordPlaceholder || 'Password (min 8 chars)') + '"></div>'
+      + '<div style="margin-bottom:14px"><label class="aimeat-label">' + escHtml(i.displayNameLabel || 'Display Name') + ' <span style="font-weight:400;text-transform:none;letter-spacing:0">(' + escHtml(i.displayNameOptional || 'optional') + ')</span></label>'
+      + '<input id="aimeat-reg-displayname" class="aimeat-inp" placeholder="' + escHtml(i.displayNamePlaceholder || 'Display Name') + '"></div>'
+      + '<div style="display:flex;gap:10px;margin-top:20px">'
+      + '<button id="aimeat-reg-btn" class="aimeat-go">' + escHtml(i.createAccountBtn || 'Create account') + '</button>'
+      + '<button id="aimeat-reg-cancel-btn" class="aimeat-cancel">' + escHtml(i.cancelBtn || 'Cancel') + '</button>'
+      + '</div>'
+      + '<p id="aimeat-reg-error" style="margin:8px 0 0;font-size:13px;color:#ef4444;display:none"></p>'
+      + '</div>'
+      // Social login — one button per enabled OIDC provider, baked from config. Outside both tabs:
+      // the same button both creates an account and signs an existing one in.
       + (AUTH_PROVIDERS.length ? (
         '<div style="display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:#9CA3AF;font-size:12px;font-weight:600;letter-spacing:.5px">'
         + '<span style="flex:1;height:1px;background:#E5E7EB"></span>' + escHtml(i.orLabel || 'OR') + '<span style="flex:1;height:1px;background:#E5E7EB"></span>'
@@ -133,10 +201,6 @@ export function showLoginModal(opts, renderBtn) {
             + escHtml((i[p.i18nKey]) || p.label) + '</button>';
         }).join('')
       ) : '')
-      + '<div style="margin-top:14px;display:flex;gap:16px">'
-      + '<a href="#" id="aimeat-forgot-pw" style="font-size:13px;color:#6B7280;cursor:pointer;text-decoration:underline">' + escHtml(i.forgotPassword || 'Forgot password?') + '</a>'
-      + '<a href="#" id="aimeat-forgot-user" style="font-size:13px;color:#6B7280;cursor:pointer;text-decoration:underline">' + escHtml(i.forgotUsername || 'Forgot username?') + '</a>'
-      + '</div>'
       + '</div>'
       // Forgot password sub-view (hidden by default)
       + '<div id="aimeat-forgot-pw-view" style="padding:24px 32px;display:none">'
@@ -205,9 +269,10 @@ export function showLoginModal(opts, renderBtn) {
       + '<p id="aimeat-em-err2" style="margin:8px 0 0;font-size:13px;color:#ef4444;display:none"></p>'
       + '</div>'
       + '</div>'
-      // Features footer
-      + '<div style="padding:20px 32px 28px;background:#F9FAFB;border-top:1px solid #E5E7EB">'
-      + '<h4 style="margin:0 0 12px;font-size:13px;font-weight:700;color:#1A1A2E;display:flex;align-items:center;gap:6px">✨ ' + escHtml(i.whyTitle || 'What do you get?') + '</h4>'
+      // Features footer — an argument FOR creating an account, so it rides with the Register tab.
+      // A returning person signing in does not need to be sold the thing they already have.
+      + '<div id="aimeat-why" style="padding:20px 32px 28px;background:#F9FAFB;border-top:1px solid #E5E7EB;' + (isReg ? '' : 'display:none') + '">'
+      + '<h4 style="margin:0 0 12px;font-size:13px;font-weight:700;color:#1A1A2E;display:flex;align-items:center;gap:6px">' + escHtml(i.whyTitle || 'What do you get?') + '</h4>'
       + '<div style="display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#6B7280;margin-bottom:8px;line-height:1.45"><div class="aimeat-fi" style="background:#FFF1F0;color:#E8564A">♥</div><span>' + escHtml(i.whyGhii || 'A free GHII (Global Human Intelligence Identifier), your personal AI identity') + '</span></div>'
       + '<div style="display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#6B7280;margin-bottom:8px;line-height:1.45"><div class="aimeat-fi" style="background:#EFF6FF;color:#3B82F6">🔒</div><span>' + escHtml(i.whyPrivacy || 'Your own private memory space, protected by your password') + '</span></div>'
       + '<div style="display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#6B7280;margin-bottom:8px;line-height:1.45"><div class="aimeat-fi" style="background:#F0FDF4;color:#22C55E">🤖</div><span>' + escHtml(i.whyAgents || 'Connect AI agents that remember you and work on your behalf') + '</span></div>'
@@ -223,7 +288,25 @@ export function showLoginModal(opts, renderBtn) {
       b.addEventListener('click', function () { switchLang(b.getAttribute('data-lang')); });
     });
 
-    document.getElementById('aimeat-cancel-btn').addEventListener('click', () => modal.remove());
+    ['aimeat-cancel-btn', 'aimeat-reg-cancel-btn'].forEach(function (id) {
+      var el = document.getElementById(id);
+      if (el) el.addEventListener('click', function () { modal.remove(); });
+    });
+
+    // Tab switch. Re-renders (so the header line, the body and the benefits footer all follow) and
+    // carries every typed value across, because switching tabs is not a reason to lose your work.
+    modal.querySelectorAll('.aimeat-tab').forEach(function (b) {
+      b.addEventListener('click', function () {
+        var next = b.getAttribute('data-tab');
+        if (next === tab) return;
+        var vals = captureInputs();
+        tab = next;
+        render(false);
+        restoreInputs(vals);
+        var focusId = tab === 'register' ? 'aimeat-reg-username' : 'aimeat-username';
+        setTimeout(function () { var el = document.getElementById(focusId); if (el) el.focus(); }, 30);
+      });
+    });
 
     // Social sign-in — full-page navigation to the provider's OIDC start endpoint.
     modal.querySelectorAll('.aimeat-oauth-btn').forEach(function (btn) {
@@ -247,13 +330,15 @@ export function showLoginModal(opts, renderBtn) {
 
     // Open the email step. 'attach' — existing account needs a verified email. 'register' — brand-new
     // account under the email gate: step1 POST /v1/ghii (with email) creates it. Both finish identically.
-    function openEmailCompletion(user, pass, hasEmail, mode, displayName) {
+    // `prefillEmail` comes from the Register tab, which already asked: the address is filled in and
+    // the code sent straight away, so the person never types it twice.
+    function openEmailCompletion(user, pass, hasEmail, mode, displayName, prefillEmail) {
       pendingEmailLogin = { username: user, password: pass, mode: mode || 'attach', displayName: displayName || user };
       showView('email');
       document.getElementById('aimeat-em-step1').style.display = '';
       document.getElementById('aimeat-em-step2').style.display = 'none';
       var emailInput = /** @type {any} */ (document.getElementById('aimeat-em-email'));
-      emailInput.value = '';
+      emailInput.value = prefillEmail || '';
       var titleEl = document.querySelector('#aimeat-em-step1 h3');
       var desc = document.querySelector('#aimeat-em-step1 p');
       if (pendingEmailLogin.mode === 'register') {
@@ -268,6 +353,7 @@ export function showLoginModal(opts, renderBtn) {
         }
       }
       document.getElementById('aimeat-em-err').style.display = 'none';
+      if (prefillEmail) { sendEmailCode(); return; }
       setTimeout(function () { emailInput.focus(); }, 50);
     }
 
@@ -291,7 +377,9 @@ export function showLoginModal(opts, renderBtn) {
     });
 
     // Complete-account step 1 — send a verification code (re-verifies password server-side).
-    document.getElementById('aimeat-em-send').addEventListener('click', async function () {
+    // Named rather than inline so the Register tab can drive the same step with the address it
+    // already collected, instead of repeating the create-and-verify calls.
+    async function sendEmailCode() {
       var email = /** @type {any} */ (document.getElementById('aimeat-em-email')).value.trim();
       var errEl = document.getElementById('aimeat-em-err');
       errEl.style.display = 'none';
@@ -316,6 +404,10 @@ export function showLoginModal(opts, renderBtn) {
               display_name: pendingEmailLogin.displayName,
               password: pendingEmailLogin.password,
               email: email,
+              // The account's locale, so the verification code arrives in the language the
+              // person is reading right now. Without it every account was created locale-less
+              // and every system email fell back to English (UX-remake v3, measured).
+              locale: currentModalLang(),
             }),
           });
         } else {
@@ -335,7 +427,8 @@ export function showLoginModal(opts, renderBtn) {
         btn.textContent = i.sendVerificationCode || 'Send Verification Code';
         btn.disabled = false;
       }
-    });
+    }
+    document.getElementById('aimeat-em-send').addEventListener('click', sendEmailCode);
 
     // Complete-account step 2 — confirm the code, then re-run the password login for a normal session.
     document.getElementById('aimeat-em-confirm').addEventListener('click', async function () {
@@ -426,127 +519,144 @@ export function showLoginModal(opts, renderBtn) {
       msgEl.style.display = 'block';
     });
 
-    // Enter in any of the sign-in fields submits (unless the button is mid-request/disabled).
-    ['aimeat-username', 'aimeat-password', 'aimeat-displayname'].forEach(function (id) {
-      var el = document.getElementById(id);
+    // Enter submits the tab the field belongs to.
+    [['aimeat-username', 'aimeat-go-btn'], ['aimeat-password', 'aimeat-go-btn'],
+      ['aimeat-reg-username', 'aimeat-reg-btn'], ['aimeat-reg-email', 'aimeat-reg-btn'],
+      ['aimeat-reg-password', 'aimeat-reg-btn'], ['aimeat-reg-displayname', 'aimeat-reg-btn'],
+    ].forEach(function (pair) {
+      var el = document.getElementById(pair[0]);
       if (!el) return;
       el.addEventListener('keydown', function (e) {
         if (e.key !== 'Enter') return;
         e.preventDefault();
-        var btn = /** @type {any} */ (document.getElementById('aimeat-go-btn'));
+        var btn = /** @type {any} */ (document.getElementById(pair[1]));
         if (btn && !btn.disabled) btn.click();
       });
     });
 
+    /** Restore a submit button after a failed attempt. */
+    function releaseBtn(id, label) {
+      var b = /** @type {any} */ (document.getElementById(id));
+      if (!b) return;
+      b.textContent = label;
+      b.disabled = false;
+    }
+
+    // ── Sign in: an existing account only. Never creates one, so a typo in the username can no
+    //    longer silently register a second account under the misspelling.
     document.getElementById('aimeat-go-btn').addEventListener('click', async () => {
-      let username = /** @type {any} */ (document.getElementById('aimeat-username')).value.trim().toLowerCase();
+      const raw = /** @type {any} */ (document.getElementById('aimeat-username')).value.trim().toLowerCase();
       const password = /** @type {any} */ (document.getElementById('aimeat-password')).value;
       const errEl = document.getElementById('aimeat-error');
+      const signInLabel = i.signInOnlyBtn || 'Sign in';
+      errEl.style.display = 'none';
 
-      // Accept full GHII (e.g. "alice@node-id") — detect local vs federated
-      let isGhii = false;
+      // Three shapes reach this field: an email (the server resolves it to the account by its
+      // verified address), a full GHII `name@node-id` (federated when the node part is not ours),
+      // and a plain username. Only the middle one needs splitting here.
+      const isEmail = EMAIL_RE.test(raw);
       let isFederated = false;
-      let fullUsername = username;
-      if (username.includes('@')) {
-        const atIdx = username.indexOf('@');
-        const nodePart = username.substring(atIdx + 1);
-        if (nodePart && nodePart !== NODE_ID) {
-          isFederated = true;
-          isGhii = true;
-        } else {
-          username = username.substring(0, atIdx);
-          isGhii = true;
+      let localName = raw;
+      if (!isEmail && raw.includes('@')) {
+        const nodePart = raw.substring(raw.indexOf('@') + 1);
+        if (nodePart && nodePart !== NODE_ID) isFederated = true;
+        else localName = raw.substring(0, raw.indexOf('@'));
+      }
+
+      if (!raw || (!isEmail && localName.length < 3)) {
+        errEl.textContent = i.errIdentifierRequired || i.errUserShort || 'Enter your username or email.';
+        errEl.style.display = 'block';
+        return;
+      }
+      if (!password) {
+        errEl.textContent = i.errPassRequired || 'Enter your password.';
+        errEl.style.display = 'block';
+        return;
+      }
+
+      const btn = /** @type {any} */ (document.getElementById('aimeat-go-btn'));
+      btn.textContent = isFederated ? (i.connectingHome || 'Connecting to home node...') : (i.working || 'Working...');
+      btn.disabled = true;
+      try {
+        // Email and federated GHII go over as typed; a local GHII goes as the bare name.
+        const session = await auth.loginWithPassword(isEmail || isFederated ? raw : localName, password);
+        modal.remove();
+        renderBtn();
+        if (opts.onLogin) opts.onLogin(session);
+      } catch (e) {
+        // Password correct but the account still needs a verified email — finish that here.
+        if (e.code === 'EMAIL_NOT_VERIFIED' && !isFederated) {
+          releaseBtn('aimeat-go-btn', signInLabel);
+          openEmailCompletion(localName, password, !!(e.details && e.details.has_email));
+          return;
         }
+        errEl.textContent = e.message.includes('Invalid username or password')
+          ? (i.errWrongCredentials || 'That username or email and password do not match an account here.')
+          : e.message;
+        errEl.style.display = 'block';
+        releaseBtn('aimeat-go-btn', signInLabel);
       }
+    });
 
-      const displayName = /** @type {any} */ (document.getElementById('aimeat-displayname')).value.trim() || username;
+    // ── Create account: only ever creates. A taken username says so and offers the other tab
+    //    instead of quietly attempting a login the person did not ask for.
+    document.getElementById('aimeat-reg-btn').addEventListener('click', async () => {
+      const username = /** @type {any} */ (document.getElementById('aimeat-reg-username')).value.trim().toLowerCase();
+      const password = /** @type {any} */ (document.getElementById('aimeat-reg-password')).value;
+      const emailEl = /** @type {any} */ (document.getElementById('aimeat-reg-email'));
+      const email = emailEl ? emailEl.value.trim() : '';
+      const displayName = /** @type {any} */ (document.getElementById('aimeat-reg-displayname')).value.trim() || username;
+      const errEl = document.getElementById('aimeat-reg-error');
+      const createLabel = i.createAccountBtn || 'Create account';
+      errEl.style.display = 'none';
 
       if (!username || username.length < 3) {
         errEl.textContent = i.errUserShort || 'Username must be at least 3 characters';
         errEl.style.display = 'block';
         return;
       }
-
-      if (!password || password.length < 4) {
-        errEl.textContent = i.errPassShort || 'Password must be at least 4 characters';
+      // The email field only exists when this node's gate asks for one, so its presence IS the rule.
+      if (emailEl && !EMAIL_RE.test(email)) {
+        errEl.textContent = i.errEmailInvalid || 'Please enter a valid email address.';
+        errEl.style.display = 'block';
+        return;
+      }
+      // 8 is the server's registration floor (models/schemas.ts). Keep the two in step: a
+      // client that accepts 4 just moves the rejection to a server error the user cannot read.
+      if (!password || password.length < 8) {
+        errEl.textContent = i.errPassShort || 'Password must be at least 8 characters';
         errEl.style.display = 'block';
         return;
       }
 
-      const btn = /** @type {any} */ (document.getElementById('aimeat-go-btn'));
+      const btn = /** @type {any} */ (document.getElementById('aimeat-reg-btn'));
       btn.textContent = i.working || 'Working...';
       btn.disabled = true;
 
-      // If input was a full GHII, skip register and go straight to login
-      if (isGhii) {
-        try {
-          if (isFederated) {
-            btn.textContent = i.connectingHome || 'Connecting to home node...';
-          }
-          const loginUser = isFederated ? fullUsername : username;
-          const session = await auth.loginWithPassword(loginUser, password);
-          modal.remove();
-          renderBtn();
-          if (opts.onLogin) opts.onLogin(session);
-        } catch (e2) {
-          // Password correct but the account still needs a verified email — open the completion flow.
-          if (e2.code === 'EMAIL_NOT_VERIFIED' && !isFederated) {
-            btn.textContent = i.signInBtn || 'Sign In / Register';
-            btn.disabled = false;
-            openEmailCompletion(username, password, !!(e2.details && e2.details.has_email));
-            return;
-          }
-          errEl.textContent = e2.message.includes('Invalid username or password')
-            ? (i.errWrongPass || 'Wrong password for that username.')
-            : e2.message;
-          errEl.style.display = 'block';
-          btn.textContent = i.signInBtn || 'Sign In / Register';
-          btn.disabled = false;
-        }
+      // Gate on: the create call carries the email and the code step takes over from there.
+      if (emailEl) {
+        releaseBtn('aimeat-reg-btn', createLabel);
+        openEmailCompletion(username, password, false, 'register', displayName, email);
         return;
       }
 
       try {
-        // Try registering first (new account)
-        const session = await auth.register(username, displayName, { password });
+        const session = await auth.register(username, displayName, { password, locale: currentModalLang() });
         modal.remove();
         renderBtn();
         if (opts.onLogin) opts.onLogin(session);
       } catch (e) {
-        // Email gate on + a genuinely new username → open the email step (register mode) to collect one.
+        // A node that turned its gate on after this page loaded still lands here — same step.
         if (e.code === 'EMAIL_REQUIRED') {
-          btn.textContent = i.signInBtn || 'Sign In / Register';
-          btn.disabled = false;
+          releaseBtn('aimeat-reg-btn', createLabel);
           openEmailCompletion(username, password, false, 'register', displayName);
           return;
         }
-        // If NAME_TAKEN, try logging in with password
-        if (e.message.includes('already registered') || e.message.includes('NAME_TAKEN')) {
-          try {
-            const session = await auth.loginWithPassword(username, password);
-            modal.remove();
-            renderBtn();
-            if (opts.onLogin) opts.onLogin(session);
-          } catch (e2) {
-            if (e2.code === 'EMAIL_NOT_VERIFIED') {
-              btn.textContent = i.signInBtn || 'Sign In / Register';
-              btn.disabled = false;
-              openEmailCompletion(username, password, !!(e2.details && e2.details.has_email));
-              return;
-            }
-            errEl.textContent = e2.message.includes('Invalid username or password')
-              ? (i.errWrongPass || 'Wrong password for that username.')
-              : e2.message;
-            errEl.style.display = 'block';
-            btn.textContent = i.signInBtn || 'Sign In';
-            btn.disabled = false;
-          }
-        } else {
-          errEl.textContent = e.message;
-          errEl.style.display = 'block';
-          btn.textContent = i.signInBtn || 'Sign In / Register';
-          btn.disabled = false;
-        }
+        errEl.textContent = (e.message.includes('already registered') || e.message.includes('NAME_TAKEN'))
+          ? (i.errNameTaken || 'That username is taken. If it is yours, sign in instead.')
+          : e.message;
+        errEl.style.display = 'block';
+        releaseBtn('aimeat-reg-btn', createLabel);
       }
     });
 

package/dist/static/sdk-libs/auth/pill.js

@@ -10,6 +10,9 @@
  * @structure mountPill(auth, selector, opts) → render() + event wiring.
  * @usage import { mountPill } from './pill.js';  (auth.mountLoginButton delegates here)
  * @version-history
+ *   v1.2.0 — 2026-08-07 — The host's onLogout fires from the auth lib's 'logout' event (after the
+ *     session is gone) instead of synchronously after the un-awaited logout() — the race that left
+ *     hosts rendering a signed-in header next to a "Sign In" button.
  *   v1.1.0 — 2026-07-25 — The in-pill controls become the platform control cluster (segmented
  *     language switch + segmented ☀|☾ mode switch + palette swatch picker, styled by cluster.js),
  *     with outside-click/Escape closers for the cluster popovers.
@@ -98,17 +101,13 @@ export function mountPill(auth, selector, opts = {}) {
       } else {
         container.innerHTML = pillHtml;
       }
-      document.getElementById('aimeat-logout-btn').addEventListener('click', () => {
-        auth.logout();
-        render();
-        if (opts.onLogout) opts.onLogout();
-      });
+      // Just ask for the logout — the render + opts.onLogout notification hang off the auth lib's
+      // 'logout' event (wired once, below), which fires AFTER the session state is actually gone.
+      document.getElementById('aimeat-logout-btn').addEventListener('click', () => { auth.logout(); });
       var gearBtn = document.getElementById('aimeat-grant-gear');
       if (gearBtn) gearBtn.addEventListener('click', () => {
-        auth.manageGrant().then((res) => {
-          render(); // reflect revoke (→ Sign In) or a re-grant
-          if (res && res.revoked && opts.onLogout) opts.onLogout();
-        }).catch(() => {});
+        // A revoke routes through auth.logout() → the 'logout' event handles render + onLogout.
+        auth.manageGrant().then(() => { render(); }).catch(() => {});
       });
       // Compact trigger toggles the popover. The outside-click / Escape closers are registered ONCE
       // per mount (below, after render()) — not here — so re-renders don't stack them.
@@ -186,7 +185,13 @@ export function mountPill(auth, selector, opts = {}) {
   // Re-render when the session changes out-of-band (e.g. the H-2 silent SSO logs in async). Only
   // re-render (do NOT call opts.onLogin — the interactive modal path already does).
   auth.on('login', render);
-  auth.on('logout', render);
+  // Logout is the ONE place that also notifies the host: the event fires after the session is
+  // already cleared, so every subscriber that then reads getSession()/hasSession sees the truth.
+  // Calling opts.onLogout from the button handler instead raced the async logout() and left hosts
+  // (the SPA header's bell + "Me" menu) rendering a signed-in state next to a "Sign In" button.
+  // Routing it through the event also covers the paths the button never touches: a grant revoke
+  // via manageGrant(), and the stale-cache drop below.
+  auth.on('logout', () => { render(); if (opts.onLogout) opts.onLogout(); });
   auth.on('session-updated', render); // live display-name (etc.) edits
   // Seamless SSO: on an app origin with no session yet, attempt the silent bridge ourselves. Always
   // re-confirm via the bridge on load (the cached session is only a UI cache); drop a stale cache.

package/dist/static/sdk-libs/auth/pkce.js

@@ -0,0 +1,32 @@
+/**
+ * @file auth/pkce.js
+ * @description PKCE helpers for the H-2 app-grant consent code flow (RFC 7636): base64url encoding
+ *   and the verifier/challenge pair. Pure and stateless — they touch no module state, which is why
+ *   they live outside session.js (that file's rule is that every reassignment of the mutable session
+ *   state stays in ONE module; these do not participate in it).
+ * @structure
+ *   - b64url(buf): ArrayBuffer/TypedArray buffer → base64url string
+ *   - pkce(): { verifier, challenge, method } — S256, or 'plain' where crypto.subtle is unavailable
+ * @usage import { b64url, pkce } from './pkce.js';
+ * @version-history
+ *   v1.0.0 — 2026-08-07 — Extracted from session.js (pure helpers, no session state).
+ */
+
+/** Base64url-encode a buffer (no padding), the encoding PKCE and the state parameter use. */
+export function b64url(buf) {
+  var bytes = new Uint8Array(buf), s = '';
+  for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+  return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/** A fresh PKCE verifier + challenge. */
+export async function pkce() {
+  var verifier = b64url(crypto.getRandomValues(new Uint8Array(32)).buffer);
+  if (crypto.subtle && crypto.subtle.digest) {
+    var digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
+    return { verifier: verifier, challenge: b64url(digest), method: 'S256' };
+  }
+  // Non-secure context (http on a non-localhost host): crypto.subtle is unavailable. Fall back to
+  // PKCE "plain". Acceptable — such transport is already non-confidential; real app origins are https.
+  return { verifier: verifier, challenge: verifier, method: 'plain' };
+}