@wipcomputer/wip-ldm-os 0.4.85-alpha.8 → 0.4.86

package/src/hosted-mcp/app/kaleidoscope-login.html

@@ -9,9 +9,11 @@
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
 :root {
-  --bg: #FFFDF5;
+  --bg: #FFFFFF;
   --text: #1a1a1a;
   --text-muted: #8a8580;
+  --footer-muted: #6b6b6b;
+  --footer-border: #ececec;
   --accent: #0033FF;
   --accent-hover: #0033FF;
   --input-bg: #F5F3ED;
@@ -28,10 +30,6 @@ html, body {
   -webkit-font-smoothing: antialiased;
 }
 
-@media (min-width: 768px) {
-  html, body { overflow: hidden; }
-}
-
 .login-page {
   display: flex;
   flex-direction: column;
@@ -48,7 +46,7 @@ html, body {
 .login-card {
   position: relative;
   max-width: 380px;
-  width: 100%;
+  width: calc(100vw - 48px);
   text-align: center;
 }
 
@@ -112,6 +110,223 @@ html, body {
 .login-status.loading { background: #E8EEFF; color: var(--accent); }
 .login-status.error { background: #FFF0F0; color: #D32F2F; }
 .login-status.success { background: #F0FFF4; color: #2E7D32; }
+
+.site-footer {
+  padding: 0 0 32px;
+  line-height: 1.45;
+}
+.site-footer__inner {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 48px 24px 0;
+}
+.site-footer__cols {
+  display: grid;
+  grid-template-columns: 1fr repeat(3, auto);
+  gap: 48px;
+  padding-bottom: 40px;
+  align-items: start;
+  border-top: 1px solid var(--footer-border);
+  padding-top: 48px;
+  margin-top: -48px;
+}
+.site-footer__col-group {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+.site-footer__brand-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.site-footer__brand-name {
+  font-size: 13px;
+  color: var(--text);
+  font-weight: 500;
+  text-decoration: none;
+  transition: opacity 200ms ease;
+}
+.site-footer__brand-name:hover {
+  opacity: 0.65;
+}
+.site-footer__brand-tag {
+  font-size: 13px;
+}
+.site-footer__brand-tag,
+.site-footer__col a,
+.site-footer__bottom,
+.site-footer__bottom .right a,
+.site-footer__passkeys,
+.site-footer__info,
+.site-footer__link-icon {
+  color: var(--footer-muted);
+}
+.site-footer__col-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 14px;
+}
+.site-footer__col ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.site-footer__col a {
+  font-size: 13px;
+  text-decoration: none;
+}
+.site-footer__col a:hover,
+.site-footer__bottom .right a:hover,
+.site-footer__passkeys:hover,
+.site-footer__info:hover,
+.site-footer__link-with-icon:hover .site-footer__link-icon {
+  color: var(--text);
+}
+.site-footer__link-with-icon,
+.site-footer__passkeys-row {
+  display: inline-flex;
+  align-items: center;
+}
+.site-footer__link-with-icon {
+  gap: 8px;
+}
+.site-footer__link-icon {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+}
+.site-footer__passkeys {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: color 180ms ease;
+}
+.site-footer__passkeys-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #c9433a;
+  display: inline-block;
+  transition: background 200ms ease;
+}
+.site-footer__passkeys.is-on .site-footer__passkeys-dot {
+  background: #2f7a5a;
+}
+.site-footer__passkeys-label {
+  position: relative;
+  display: inline-block;
+}
+.site-footer__passkeys-label > [data-passkeys-label] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  white-space: nowrap;
+}
+.site-footer__passkeys-ghost {
+  visibility: hidden;
+  white-space: nowrap;
+}
+.site-footer__passkeys-row {
+  gap: 6px;
+}
+.site-footer__info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 180ms ease;
+}
+.site-footer__info-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.site-footer__info-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  --shift: 0px;
+  transform: translateX(calc(-50% + var(--shift))) translateY(4px);
+  width: min(240px, calc(100vw - 32px));
+  padding: 10px 12px;
+  background: var(--text);
+  color: var(--bg);
+  font-size: 12px;
+  line-height: 1.45;
+  text-align: left;
+  border-radius: 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease, transform 180ms ease;
+  z-index: 20;
+  white-space: normal;
+}
+.site-footer__info-popover::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(calc(-50% - var(--shift)));
+  border: 5px solid transparent;
+  border-top-color: var(--text);
+}
+.site-footer__info[aria-expanded="true"] + .site-footer__info-popover {
+  opacity: 1;
+  transform: translateX(calc(-50% + var(--shift))) translateY(0);
+}
+.site-footer__bottom {
+  border-top: 1px solid var(--footer-border);
+  padding-top: 18px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 13px;
+}
+.site-footer__bottom .right {
+  margin-left: auto;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+.site-footer__bottom .right a {
+  text-decoration: none;
+}
+@media (max-width: 960px) {
+  .site-footer__cols { gap: 32px; }
+}
+@media (max-width: 720px) {
+  .site-footer__cols {
+    grid-template-columns: 1fr;
+    grid-auto-flow: row;
+    gap: 24px;
+  }
+  .site-footer__col-group { gap: 24px; }
+  .site-footer__brand-col,
+  .site-footer__col-group:nth-of-type(1),
+  .site-footer__col-group:nth-of-type(2),
+  .site-footer__col-group:nth-of-type(3) {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: start;
+  }
+}
 </style>
 </head>
 <body>
@@ -147,11 +362,13 @@ html, body {
       </div>
     </div>
 
-    <!-- Success view (legacy login flow). No action button. -->
+    <!-- Success view (legacy login flow) -->
     <div id="success-view" style="display:none">
       <p style="font-size:18px;margin-bottom:12px;color:var(--text);">Welcome, <span id="welcome-name"></span>.</p>
-      <p style="color:var(--text-muted);font-size:15px;margin-bottom:8px;">Your passkey has been saved to your phone.</p>
-      <p style="color:var(--text-muted);font-size:15px;margin-bottom:24px;">You can use it to sign in to any WIP Computer service.</p>
+      <div class="login-buttons">
+        <a href="/demo/" class="btn btn-primary" style="text-decoration:none;text-align:center;">Try the Demo</a>
+      </div>
+      <p style="color:var(--text-muted);font-size:15px;margin:18px 0 0;">Your passkey has been saved to your phone. You can use it to sign in to any WIP Computer service.</p>
     </div>
 
     <!-- Pair-approved view (CRC pair-mode, desktop-side after phone approves) -->
@@ -160,12 +377,127 @@ html, body {
       <p style="color:var(--text-muted);font-size:15px;margin-bottom:24px;">Continue pairing on your phone. Your laptop will pick this up after you confirm.</p>
     </div>
 
+    <!-- QR authenticator confirmation view (phone-side after approving another device) -->
+    <div id="qr-auth-confirm-view" style="display:none">
+      <p style="font-size:18px;margin:0 0 24px;color:var(--text);">Your authenticated Kaleidoscope session is available on your other device.</p>
+      <div class="login-buttons">
+        <button class="btn btn-primary" id="qrAuthPrimaryBtn" onclick="backToLoginAfterQrScan()">Back to login</button>
+      </div>
+      <p id="qr-auth-close-message" style="display:none;color:var(--text-muted);font-size:15px;margin:20px 0 0;">You can close this page.</p>
+    </div>
+
     <div class="login-status" id="loginStatus" style="position:absolute;left:0;right:0;margin-top:16px;text-align:center;"></div>
   </div>
   </div>
-<div id="kscope-footer"></div>
+<footer class="site-footer" data-screen-label="Footer">
+  <div class="site-footer__inner">
+    <div class="site-footer__cols">
+      <div class="site-footer__brand-col">
+        <a class="site-footer__brand-name" href="https://wip.computer/">WIP Computer, Inc.</a>
+        <div class="site-footer__brand-tag">Learning Dreaming Machines</div>
+        <div class="site-footer__brand-tag">Made in California.</div>
+      </div>
+      <div class="site-footer__col-group">
+        <div class="site-footer__col">
+          <div class="site-footer__col-title">AI Infrastructure</div>
+          <ul>
+            <li><a href="https://github.com/wipcomputer/wip-ldm-os" target="_blank" rel="noopener">LDM OS</a></li>
+            <li><a href="https://github.com/wipcomputer/memory-crystal" target="_blank" rel="noopener">Memory Crystal</a></li>
+            <li><a href="https://github.com/wipcomputer/dream-weaver-protocol" target="_blank" rel="noopener">Dream Weaver</a></li>
+            <li><a href="https://github.com/wipcomputer/wip-ldm-os/blob/main/docs/bridge/README.md" target="_blank" rel="noopener">Bridge</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="site-footer__col-group">
+        <div class="site-footer__col">
+          <div class="site-footer__col-title">AI Skills</div>
+          <ul>
+            <li><a href="https://github.com/wipcomputer/wip-ldm-os/blob/main/docs/universal-installer/TECHNICAL.md" target="_blank" rel="noopener">Universal Installer</a></li>
+            <li><a href="https://github.com/wipcomputer/wip-1password" target="_blank" rel="noopener">1Password</a></li>
+            <li><a href="https://github.com/wipcomputer/wip-ai-devops-toolbox" target="_blank" rel="noopener">AI DevOps Toolbox</a></li>
+            <li><a href="https://github.com/wipcomputer/wip-x-xai-grok" target="_blank" rel="noopener">X + xAI</a></li>
+          </ul>
+        </div>
+        <div class="site-footer__col">
+          <div class="site-footer__col-title">Applications</div>
+          <ul>
+            <li><a href="https://wip.computer/login?next=/demo" target="_blank" rel="noopener">Kaleidoscope</a></li>
+            <li><a href="https://github.com/wipcomputer/wip-codex-remote-control" target="_blank" rel="noopener">Remote Control</a></li>
+            <li><a href="https://github.com/wipcomputer/CLVR" target="_blank" rel="noopener">CLVR</a></li>
+            <li><a href="https://github.com/wipcomputer/wip-markdown-viewer" target="_blank" rel="noopener">Markdown Viewer</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="site-footer__col-group">
+        <div class="site-footer__col">
+          <div class="site-footer__col-title">Tools</div>
+          <ul>
+            <li>
+              <a href="https://wip.computer/agent.txt" target="_blank" rel="noopener" data-agent>Are you an AI agent?</a>
+            </li>
+            <li>
+              <a href="https://wip.computer/visualizations/kaleidoscope/onboarding/live/">Visualizations</a>
+            </li>
+            <li class="site-footer__passkeys-row">
+              <button type="button" class="site-footer__passkeys" aria-pressed="false" aria-label="Local passkeys off" data-passkeys>
+                <span class="site-footer__passkeys-dot"></span>
+                <span class="site-footer__passkeys-label">
+                  <span data-passkeys-label>Local passkeys off</span>
+                  <span class="site-footer__passkeys-ghost" aria-hidden="true">Local passkeys off</span>
+                </span>
+              </button>
+              <span class="site-footer__info-wrap">
+                <button type="button" class="site-footer__info" aria-label="About local passkeys" data-passkeys-info aria-describedby="passkeys-info-tip">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="16" x2="12" y2="12"></line>
+                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
+                  </svg>
+                </button>
+                <span class="site-footer__info-popover" id="passkeys-info-tip" role="tooltip">
+                  Local passkeys are off by default on desktop. Your mobile device's passkeys are used for login and device sync. Turn this on to use or save passkeys on this computer.
+                </span>
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div class="site-footer__col">
+          <div class="site-footer__col-title">Connect</div>
+          <ul>
+            <li>
+              <a href="https://github.com/wipcomputer" target="_blank" rel="noopener" class="site-footer__link-with-icon">
+                <span class="site-footer__link-icon" aria-hidden="true">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+                  </svg>
+                </span>
+                <span>@wipcomputer</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://x.com/wipcomputer" target="_blank" rel="noopener" class="site-footer__link-with-icon">
+                <span class="site-footer__link-icon" aria-hidden="true">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817-5.97 6.817H1.673l7.73-8.835L1.254 2.25h6.83l4.713 6.231 5.447-6.231zM17.083 19.77h1.833L7.084 4.126H5.117l11.966 15.644z"></path>
+                  </svg>
+                </span>
+                <span>@wipcomputer</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="site-footer__bottom">
+      <div>Copyright © 2026 WIP Computer, Inc. All rights reserved.</div>
+      <div class="right">
+        <a href="https://wip.computer/legal/privacy/" target="_blank" rel="noopener">Privacy Policy</a>
+        <a href="https://wip.computer/legal/internet-services/terms/site.html" target="_blank" rel="noopener">Terms of Use</a>
+      </div>
+    </div>
+  </div>
+</footer>
 
-<script src="/app/footer.js"></script>
 <script>
 // ── Random kaleidoscope icon from sprite sheet ──
 var SPRITE_COLS = 8;
@@ -231,12 +563,29 @@ function isSafariDesktop() {
 }
 
 function needsCustomQR() {
-  return !isMobileDevice() && !isSafariDesktop() && !isLocalPasskeysOn();
+  return !isLocalPasskeysOn();
 }
 
 // ── Local passkeys toggle (persisted in localStorage) ──
+function defaultLocalPasskeysOn() {
+  return isMobileDevice();
+}
+
+function getLocalPasskeysPreference() {
+  var stored = localStorage.getItem('localPasskeys');
+  if (stored === 'on' || stored === 'off') return stored;
+  return defaultLocalPasskeysOn() ? 'on' : 'off';
+}
+
 function isLocalPasskeysOn() {
-  return localStorage.getItem('localPasskeys') === 'on';
+  return getLocalPasskeysPreference() === 'on';
+}
+
+function localPasskeysInfoCopy() {
+  if (defaultLocalPasskeysOn()) {
+    return "Local passkeys are on by default on mobile devices. This device's passkeys are used for login and device sync. Turn this off to use or save passkeys on a different device.";
+  }
+  return "Local passkeys are off by default on desktop. Your mobile device's passkeys are used for login and device sync. Turn this on to use or save passkeys on this computer.";
 }
 
 function toggleLocalPasskeys() {
@@ -246,23 +595,72 @@ function toggleLocalPasskeys() {
 }
 
 function updatePasskeysDot() {
-  var dot = document.getElementById('passkeys-dot');
-  var label = document.getElementById('passkeys-label');
-  if (!dot) return;
-  if (isLocalPasskeysOn()) {
-    dot.style.background = '#2E7D32';
-    dot.style.opacity = '1';
-    if (label) label.textContent = 'Local passkeys on';
-  } else {
-    dot.style.background = '#D32F2F';
-    dot.style.opacity = '0.4';
-    if (label) label.textContent = 'Local passkeys off';
+  var button = document.querySelector('[data-passkeys]');
+  var label = document.querySelector('[data-passkeys-label]');
+  if (!button || !label) return;
+  var on = isLocalPasskeysOn();
+  button.classList.toggle('is-on', on);
+  button.setAttribute('aria-pressed', on ? 'true' : 'false');
+  button.setAttribute('aria-label', 'Local passkeys ' + (on ? 'on' : 'off'));
+  label.textContent = 'Local passkeys ' + (on ? 'on' : 'off');
+}
+
+function initFooterPasskeys() {
+  var button = document.querySelector('[data-passkeys]');
+  if (!button) return;
+  button.addEventListener('click', toggleLocalPasskeys);
+  updatePasskeysDot();
+}
+
+function initFooterPasskeysInfo() {
+  var button = document.querySelector('[data-passkeys-info]');
+  if (!button) return;
+  var popover = document.getElementById(button.getAttribute('aria-describedby'));
+  var startScrollY = 0;
+  if (popover) popover.textContent = localPasskeysInfoCopy();
+
+  function setOpen(open) {
+    button.setAttribute('aria-expanded', open ? 'true' : 'false');
+    if (open) {
+      startScrollY = window.scrollY;
+      positionPopover();
+    }
+  }
+
+  function positionPopover() {
+    if (!popover || button.getAttribute('aria-expanded') !== 'true') return;
+    popover.style.setProperty('--shift', '0px');
+    var rect = popover.getBoundingClientRect();
+    var padding = 16;
+    var shift = 0;
+    if (rect.left < padding) shift = padding - rect.left;
+    if (rect.right > window.innerWidth - padding) shift = window.innerWidth - padding - rect.right;
+    popover.style.setProperty('--shift', shift + 'px');
   }
+
+  button.addEventListener('click', function(event) {
+    event.stopPropagation();
+    setOpen(button.getAttribute('aria-expanded') !== 'true');
+  });
+  document.addEventListener('click', function(event) {
+    if (!button.contains(event.target) && (!popover || !popover.contains(event.target))) {
+      setOpen(false);
+    }
+  });
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') setOpen(false);
+  });
+  window.addEventListener('scroll', function() {
+    if (button.getAttribute('aria-expanded') === 'true' && Math.abs(window.scrollY - startScrollY) > 24) {
+      setOpen(false);
+    }
+  }, { passive: true });
+  window.addEventListener('resize', positionPopover);
 }
 
 // ── `next` continuation carrier ──
 //
-// Two whitelisted next shapes:
+// Three whitelisted next shapes:
 //
 //   PAIR_NEXT_REGEX            /pair/<CODE> using the daemon alphabet
 //                              (CODEX_PAIR_ALPHABET, length 6, L is
@@ -275,14 +673,18 @@ function updatePasskeysDot() {
 //                              desktop and mobile (this is navigation
 //                              continuation, not authority transfer).
 //
+//   DEMO_NEXT_REGEX            /demo. Standard post-login continuation
+//                              from the homepage CTA.
+//
 // Anything else is silently dropped. `next` is NOT a general redirect
 // primitive. The server validates authoritatively; this client-side
 // check is defense-in-depth.
 var PAIR_NEXT_REGEX = /^\/pair\/[ABCDEFGHJKLMNPQRSTUVWXYZ23456789]{6}$/;
 var REMOTE_CONTROL_NEXT_REGEX = /^\/codex-remote-control\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var DEMO_NEXT_REGEX = /^\/demo$/;
 
 function isWhitelistedNext(raw) {
-  return typeof raw === 'string' && (PAIR_NEXT_REGEX.test(raw) || REMOTE_CONTROL_NEXT_REGEX.test(raw));
+  return typeof raw === 'string' && (PAIR_NEXT_REGEX.test(raw) || REMOTE_CONTROL_NEXT_REGEX.test(raw) || DEMO_NEXT_REGEX.test(raw));
 }
 
 function readPairNextFromQuery() {
@@ -364,7 +766,7 @@ function redirectToRemoteControlIfDirectLogin(result) {
 // authority rules from plan C6 + C8:
 //
 //   - QR-scan path (approveResponse.next from the server): follow it for
-//     either whitelisted shape. The phone scanned the desktop's QR,
+//     a whitelisted next. The phone scanned the desktop's QR,
 //     signed in, and the server returned a sanitized `next`.
 //
 //   - URL fallback path (no approveResponse.next):
@@ -382,10 +784,13 @@ function redirectToRemoteControlIfDirectLogin(result) {
 // rule because it's a navigation continuation, not authority transfer.
 //
 // Returns true if it redirected (caller should not run other view-switching).
-async function followPairNextIfPresent(approveResponse, identity) {
+async function followPairNextIfPresent(approveResponse, identity, isNewAccount) {
   var next = null;
   // Path 1: QR phone-side approve. Server-blessed next, either shape.
   if (approveResponse && typeof approveResponse.next === 'string' && isWhitelistedNext(approveResponse.next)) {
+    if (DEMO_NEXT_REGEX.test(approveResponse.next)) {
+      return showQrAuthenticatorConfirmation(identity, isNewAccount === true);
+    }
     next = approveResponse.next;
   } else {
     // Path 2: URL ?next= fallback (no approveResponse). Branch by
@@ -393,7 +798,7 @@ async function followPairNextIfPresent(approveResponse, identity) {
     // restricted to mobile per C8.
     var urlNext = readPairNextFromQuery();
     if (urlNext) {
-      if (REMOTE_CONTROL_NEXT_REGEX.test(urlNext)) {
+      if (REMOTE_CONTROL_NEXT_REGEX.test(urlNext) || DEMO_NEXT_REGEX.test(urlNext)) {
         next = urlNext;
       } else if (PAIR_NEXT_REGEX.test(urlNext) && isMobileDevice()) {
         next = urlNext;
@@ -415,17 +820,53 @@ async function followPairNextIfPresent(approveResponse, identity) {
   }
   sessionStorage.setItem('wip_api_key', identity.apiKey);
   if (identity.agentId) sessionStorage.setItem('wip_handle', identity.agentId);
+  if (PAIR_NEXT_REGEX.test(next) && identity.codex_pair_presence_token) {
+    sessionStorage.setItem('wip_codex_pair_presence_token', identity.codex_pair_presence_token);
+  }
+  storeDemoHandoffIfNeeded(next, identity, isNewAccount === true);
   location.replace(next);
   return true;
 }
 
 // ── QR Login (Chrome desktop fallback) ──
 var qrLoginPollTimer = null;
+var qrLoginMode = null;
+
+function storeDemoHandoffIfNeeded(next, identity, isNewAccount) {
+  if (!DEMO_NEXT_REGEX.test(next) || !identity || !identity.apiKey) return;
+  sessionStorage.setItem('lesa-token', identity.apiKey);
+  if (identity.agentId) sessionStorage.setItem('lesa-agent', identity.agentId);
+  if (identity.tenantId) sessionStorage.setItem('lesa-tenant', identity.tenantId);
+  if (isNewAccount) sessionStorage.setItem('lesa-new-account', 'true');
+}
+
+function showQrAuthenticatorConfirmation(identity, isNewAccount) {
+  ['signup-view', 'qr-view', 'success-view', 'pair-approved-view'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.style.display = 'none';
+  });
+  var primary = document.getElementById('qrAuthPrimaryBtn');
+  if (primary) primary.textContent = 'Back to login';
+  var closeMessage = document.getElementById('qr-auth-close-message');
+  if (closeMessage) closeMessage.style.display = 'none';
+  document.getElementById('qr-auth-confirm-view').style.display = 'block';
+  setStatus('', '');
+  return true;
+}
+
+function backToLoginAfterQrScan() {
+  qrSessionId = null;
+  qrHandle = null;
+  qrMode = 'register';
+  qrSessionMode = false;
+  location.replace('/login?next=/demo');
+}
 
 async function startQrLogin(handle, mode) {
   var btn = document.getElementById('createBtn');
   btn.disabled = true;
   setStatus('', '');
+  qrLoginMode = mode || 'register';
 
   try {
     var pairNext = readPairNextFromQuery();
@@ -496,13 +937,15 @@ async function pollQrLogin(sessionId) {
       var urlNext = readPairNextFromQuery();
       if (urlNext && PAIR_NEXT_REGEX.test(urlNext)) {
         document.getElementById('pair-approved-view').style.display = 'block';
-      } else if (data.next && REMOTE_CONTROL_NEXT_REGEX.test(data.next) && data.apiKey) {
-        // Codex remote control: pick up the credentials so the
-        // destination page is authenticated, then redirect.
+      } else if (data.next && (REMOTE_CONTROL_NEXT_REGEX.test(data.next) || DEMO_NEXT_REGEX.test(data.next)) && data.apiKey) {
+        // Standard post-login continuation: pick up the credentials
+        // so the destination page is authenticated, then redirect.
         sessionStorage.setItem('wip_api_key', data.apiKey);
         if (data.agentId) sessionStorage.setItem('wip_handle', data.agentId);
+        storeDemoHandoffIfNeeded(data.next, data, qrLoginMode === 'register');
         location.replace(data.next);
       } else {
+        storeDemoHandoffIfNeeded('/demo', data, qrLoginMode === 'register');
         document.getElementById('success-view').style.display = 'block';
         // Use credentialLabel (matches the saved-passkey label the user
         // sees in iOS Passwords / 1Password). Falls back to agentId for
@@ -520,6 +963,7 @@ function cancelQrLogin() {
     clearInterval(qrLoginPollTimer);
     qrLoginPollTimer = null;
   }
+  qrLoginMode = null;
   document.getElementById('qr-view').style.display = 'none';
   document.getElementById('signup-view').style.display = 'block';
   document.getElementById('createBtn').disabled = false;
@@ -591,7 +1035,7 @@ async function doCreateAccount() {
     return;
   }
 
-  // Chrome desktop without local passkeys: use custom QR code
+  // Local passkeys off means use WIP's QR cross-device login on any device.
   if (needsCustomQR() && !qrSessionMode) {
     startQrLogin(username);
     return;
@@ -669,6 +1113,7 @@ async function doCreateAccount() {
             sessionId: qrSessionId,
             agentId: result.agentId,
             apiKey: result.apiKey,
+            tenantId: result.tenantId,
             credentialLabel: result.credentialLabel,
           }),
         });
@@ -679,13 +1124,13 @@ async function doCreateAccount() {
       // CRC pair-mode: if the server returned a sanitized `next`, store
       // the api_key on the phone and redirect to /pair/<CODE>. Phone is
       // the actor that completes pair-complete (plan C6).
-      if (await followPairNextIfPresent(approveResponse, result)) return;
+      if (await followPairNextIfPresent(approveResponse, result, true)) return;
+      storeDemoHandoffIfNeeded('/demo', result, true);
       document.getElementById('signup-view').style.display = 'none';
       document.getElementById('success-view').style.display = 'block';
-      // Use credentialLabel from the server, which matches the userName
-      // saved by iOS Passwords / 1Password. Falls back to typed
-      // username, then agentId, then "you".
-      document.getElementById('welcome-name').textContent = result.credentialLabel || username || result.agentId || 'you';
+      // Prefer the typed handle for the welcome view. credentialLabel
+      // is the saved-passkey label and can be a generated user id.
+      document.getElementById('welcome-name').textContent = username || result.credentialLabel || result.agentId || 'you';
       setStatus('', '');
     } else {
       setStatus(result.error || 'Registration failed', 'error');
@@ -724,7 +1169,7 @@ async function doSignIn() {
     return;
   }
 
-  // Chrome desktop without local passkeys: use QR code for sign-in.
+  // Local passkeys off means use WIP's QR cross-device login on any device.
   // With local passkeys on, let Chrome show native dialog (supports YubiKey).
   if (needsCustomQR() && !qrSessionMode) {
     startQrLogin('', 'signin');
@@ -788,6 +1233,7 @@ async function doSignIn() {
             sessionId: qrSessionId,
             agentId: result.agentId,
             apiKey: result.apiKey,
+            tenantId: result.tenantId,
             credentialLabel: result.credentialLabel,
           }),
         });
@@ -796,7 +1242,8 @@ async function doSignIn() {
       // CRC pair-mode: if the server returned a sanitized `next`, store
       // the api_key on the phone and redirect to /pair/<CODE>. Phone is
       // the actor that completes pair-complete (plan C6).
-      if (await followPairNextIfPresent(approveResponse, result)) return;
+      if (await followPairNextIfPresent(approveResponse, result, false)) return;
+      storeDemoHandoffIfNeeded('/demo', result, false);
       document.getElementById('signup-view').style.display = 'none';
       document.getElementById('success-view').style.display = 'block';
       // Use credentialLabel from the server, which matches the saved-
@@ -836,8 +1283,8 @@ document.getElementById('handleInput').addEventListener('keydown', function(e) {
   if (e.key === 'Enter') doCreateAccount();
 });
 
-// Initialize footer dot
-updatePasskeysDot();
+initFooterPasskeys();
+initFooterPasskeysInfo();
 </script>
 </body>
 </html>