@wipcomputer/wip-ldm-os 0.4.85-alpha.3 → 0.4.85-alpha.32

package/src/hosted-mcp/demo/login.html

@@ -48,7 +48,7 @@ html, body {
 .login-card {
   position: relative;
   max-width: 380px;
-  width: 100%;
+  width: calc(100vw - 48px);
   text-align: center;
 }
 
@@ -147,14 +147,28 @@ html, body {
       </div>
     </div>
 
-    <!-- Success view -->
+    <!-- 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/" onclick="sessionStorage.clear();" class="btn btn-primary" style="text-decoration:none;text-align:center;">Try the Demo</a>
+        <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) -->
+    <div id="pair-approved-view" style="display:none">
+      <p style="font-size:18px;margin-bottom:12px;color:var(--text);">Approved on your phone.</p>
+      <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>
@@ -228,12 +242,22 @@ 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 toggleLocalPasskeys() {
@@ -257,19 +281,221 @@ function updatePasskeysDot() {
   }
 }
 
+// ── `next` continuation carrier ──
+//
+// Three whitelisted next shapes:
+//
+//   PAIR_NEXT_REGEX            /pair/<CODE> using the daemon alphabet
+//                              (CODEX_PAIR_ALPHABET, length 6, L is
+//                              included; I/O/0/1 excluded). C8 applies:
+//                              URL fallback is mobile-only, the desktop
+//                              must not become the pairing authority.
+//
+//   REMOTE_CONTROL_NEXT_REGEX  /codex-remote-control/<UUID>. Standard
+//                              ?next semantics; allowed on both
+//                              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) || DEMO_NEXT_REGEX.test(raw));
+}
+
+function readPairNextFromQuery() {
+  try {
+    var raw = new URLSearchParams(window.location.search).get('next');
+    if (!raw) return null;
+    return isWhitelistedNext(raw) ? raw : null;
+  } catch (e) { return null; }
+}
+
+function isPairNextOnDesktop() {
+  var next = readPairNextFromQuery();
+  return !!(next && PAIR_NEXT_REGEX.test(next) && !isMobileDevice());
+}
+
+// Direct Remote Control login continuation. Explicit branch ... NOT
+// routed through pair-mode helpers. Called from doSignIn / doCreateAccount
+// the moment /webauthn/auth-verify or /webauthn/register-verify returns
+// success, BEFORE any qr-login/approve or pair-mode logic runs.
+//
+// If the URL was /login?next=/codex-remote-control/<UUID> AND auth-verify
+// returned a real apiKey, store the credentials in sessionStorage so the
+// destination page's auth gate sees them, then location.replace into the
+// Remote Control surface. Returns true if it redirected; caller must
+// return early.
+//
+// If the URL has no remote-control next, returns false (caller proceeds
+// with the existing QR / pair / welcome logic).
+//
+// If the URL has a remote-control next BUT result.apiKey is missing,
+// console.warn and return false. The caller then falls through to the
+// welcome view (defense in depth from PR #805) so the user is not
+// stranded on a blank /codex-remote-control page that bounces back to
+// sign-in.
+//
+// This is deliberately separate from followPairNextIfPresent because
+// pair-mode behavior (C6 desktop strip, C8 desktop-no-redirect) is
+// orthogonal to standard Remote Control login continuation.
+//
+// Also writes a short-lived same-origin handoff cookie as a Safari-safe
+// fallback: some browsers drop sessionStorage across location.replace
+// under privacy/partition heuristics. Path=/ is required because Safari
+// will silently reject document.cookie writes whose Path attribute is
+// not the current path or an ancestor of it; /login is not an ancestor
+// of /codex-remote-control, so the previous Path=/codex-remote-control
+// scope was dropped on Safari. The Remote Control page reads either
+// source and clears both Path scopes after consumption. See
+// setHandoffCookie below.
+function setHandoffCookie(name, value) {
+  document.cookie = name + '=' + encodeURIComponent(value)
+    + '; Path=/'
+    + '; Max-Age=60'
+    + '; Secure'
+    + '; SameSite=Strict';
+}
+function redirectToRemoteControlIfDirectLogin(result) {
+  try {
+    var raw = new URLSearchParams(window.location.search).get('next');
+    if (!raw || !REMOTE_CONTROL_NEXT_REGEX.test(raw)) return false;
+    if (!result || !result.apiKey) {
+      console.warn('redirectToRemoteControlIfDirectLogin: missing apiKey on result; falling through to welcome view. result=', result);
+      return false;
+    }
+    console.log('redirectToRemoteControlIfDirectLogin: storing wip_api_key + redirecting', { agentId: result.agentId, next: raw });
+    sessionStorage.setItem('wip_api_key', result.apiKey);
+    if (result.agentId) sessionStorage.setItem('wip_handle', result.agentId);
+    setHandoffCookie('wip_rc_api_key', result.apiKey);
+    if (result.agentId) setHandoffCookie('wip_rc_handle', result.agentId);
+    location.replace(raw);
+    return true;
+  } catch (e) {
+    console.warn('redirectToRemoteControlIfDirectLogin: unexpected error', e);
+    return false;
+  }
+}
+
+// Phone-side post-passkey hook. Called after successful passkey + (optional)
+// qr-login/approve. Decides whether to redirect to the next URL based on
+// authority rules from plan C6 + C8:
+//
+//   - QR-scan path (approveResponse.next from the server): follow it for
+//     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):
+//       - /codex-remote-control/<UUID>: allowed on both desktop and
+//         mobile. Standard navigation continuation.
+//       - /pair/<CODE>: mobile-only (C8). Desktop with no
+//         approveResponse must not become the pairing authority.
+//
+// REGRESSION COVERED: a desktop browser with "Local passkeys" on,
+// loading /login?next=/pair/<CODE> and completing desktop WebAuthn,
+// MUST NOT redirect to /pair/<CODE> or complete pairing. If a future
+// change opens this gate, it violates plan constraint C8 ("Default
+// authority is phone-held passkey; local desktop passkeys are
+// testing-only"). The codex-remote-control next does NOT trip this
+// 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, isNewAccount) {
+  var next = null;
+  // Path 1: QR phone-side approve. Server-blessed next.
+  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
+    // shape: codex-remote-control allowed on any device, pair-mode
+    // restricted to mobile per C8.
+    var urlNext = readPairNextFromQuery();
+    if (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;
+      }
+      // Path 3 (desktop + pair next, no approveResponse): next stays null.
+    }
+  }
+  if (!next) return false;
+  // Auth-handoff guard: if we don't have an apiKey to store, do NOT
+  // redirect to next. Stranding the user on /codex-remote-control/<UUID>
+  // without a key in sessionStorage would render a redirect-to-login
+  // loop or a blank page (depending on the destination's auth gate).
+  // Falling through here lets the caller render the existing
+  // welcome-name view, which at least shows the user something they
+  // can interact with.
+  if (!identity || !identity.apiKey) {
+    console.warn('followPairNextIfPresent: missing apiKey on identity; skipping redirect to', next);
+    return false;
+  }
+  sessionStorage.setItem('wip_api_key', identity.apiKey);
+  if (identity.agentId) sessionStorage.setItem('wip_handle', identity.agentId);
+  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();
+    var startBody = { handle: handle || undefined, mode: mode || 'register' };
+    if (pairNext) startBody.next = pairNext;
     var res = await fetch('/api/qr-login', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ handle: handle || undefined, mode: mode || 'register' }),
+      body: JSON.stringify(startBody),
     });
     var data = await res.json();
 
@@ -313,8 +539,39 @@ async function pollQrLogin(sessionId) {
       clearInterval(qrLoginPollTimer);
       qrLoginPollTimer = null;
       document.getElementById('qr-view').style.display = 'none';
-      document.getElementById('success-view').style.display = 'block';
-      document.getElementById('welcome-name').textContent = data.agentId || 'you';
+      // Branch by next shape. Three cases:
+      //
+      // 1. Pair-mode (URL ?next=/pair/<CODE>): server stripped apiKey
+      //    and next from this response (plan C6). Desktop never
+      //    redirects (C8). Show the dedicated pair-approved view.
+      //    The phone is the actor that completes pair-complete.
+      //
+      // 2. Codex remote control continuation (data.next is a
+      //    /codex-remote-control/<UUID>): standard post-login next.
+      //    Desktop authenticates with the server-provided apiKey and
+      //    redirects to next. Server returned the full login response
+      //    (apiKey, credentialLabel, next) for this case.
+      //
+      // 3. Legacy login mode (no whitelisted next anywhere): show the
+      //    existing welcome view.
+      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) || 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
+        // back-compat with older deploys.
+        document.getElementById('welcome-name').textContent = data.credentialLabel || data.agentId || 'you';
+      }
     }
   } catch (err) {
     // Network error, keep polling
@@ -326,6 +583,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;
@@ -339,19 +597,49 @@ var qrHandle = urlParams.get('h');
 var qrMode = urlParams.get('m') || 'register';
 var qrSessionMode = !!qrSessionId;
 
+// True only while the auto-start setTimeout is invoking
+// doCreateAccount / doSignIn. Read by the NotAllowedError catches so
+// they can suppress the user-facing "Cancelled. Try again when ready."
+// message when the rejection was caused by a strict user-activation
+// policy (Safari Private Browsing) rather than an actual user
+// cancellation. The user's eventual tap on the existing button or
+// link runs the same handler with a real user gesture, and the same
+// qrSessionId completes /api/qr-login/approve.
+var qrAutoStarting = false;
+
 if (qrSessionMode) {
   // Clean the URL so session ID doesn't persist
   history.replaceState(null, '', '/login');
   // Pre-fill handle if provided
   if (qrHandle) document.getElementById('handleInput').value = qrHandle;
-  // Auto-start the right flow on phone (no extra tap needed)
-  setTimeout(function() {
-    if (qrMode === 'signin') {
-      doSignIn();
-    } else {
-      doCreateAccount();
+  // Auto-start the right flow on phone (no extra tap needed).
+  // Restored from the pre-#784 known-good QR phone UX. Safari (normal
+  // mode) users never see the static login page (Face ID pops within
+  // 300ms). Browsers with stricter user-activation policies (Safari
+  // Private Browsing, sometimes Chrome on iOS) may reject the
+  // auto-start with NotAllowedError. The catch path below replaces
+  // the generic "Cancelled" status with a clear, QR-specific
+  // instructional message ("This browser blocked automatic Face ID.
+  // Tap ... to continue.") and leaves the existing controls enabled
+  // so the user's tap completes the flow with a real gesture.
+  setTimeout(async function() {
+    qrAutoStarting = true;
+    try {
+      if (qrMode === 'signin') {
+        await doSignIn();
+      } else {
+        await doCreateAccount();
+      }
+    } finally {
+      qrAutoStarting = false;
     }
   }, 300);
+} else if (isPairNextOnDesktop()) {
+  // `codex-daemon link` opens /login?next=/pair/<CODE> on the desktop.
+  // The desktop's only authority in that flow is to display QR and wait.
+  setTimeout(function() {
+    startQrLogin('', 'signin');
+  }, 0);
 }
 
 // ── Create Account ──
@@ -360,7 +648,14 @@ async function doCreateAccount() {
   var btn = document.getElementById('createBtn');
   btn.disabled = true;
 
-  // Chrome desktop without local passkeys: use custom QR code
+  // Pair-mode desktop URLs must always use the QR path. A local
+  // desktop passkey is testing-only and must not become pair authority.
+  if (isPairNextOnDesktop() && !qrSessionMode) {
+    startQrLogin(username, 'signin');
+    return;
+  }
+
+  // Local passkeys off means use WIP's QR cross-device login on any device.
   if (needsCustomQR() && !qrSessionMode) {
     startQrLogin(username);
     return;
@@ -424,19 +719,38 @@ async function doCreateAccount() {
     var result = await verRes.json();
 
     if (result.success) {
+      // Direct Remote Control login continuation. Runs before any
+      // qr-login/approve or pair-mode logic so the apiKey lands in
+      // sessionStorage and the destination's auth gate finds it.
+      if (redirectToRemoteControlIfDirectLogin(result)) return;
       // If phone completing a desktop QR session, approve it
+      var approveResponse = null;
       if (qrSessionMode && qrSessionId) {
-        await fetch('/api/qr-login/approve', {
+        var approveRes = await fetch('/api/qr-login/approve', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ sessionId: qrSessionId, agentId: result.agentId, apiKey: result.apiKey }),
+          body: JSON.stringify({
+            sessionId: qrSessionId,
+            agentId: result.agentId,
+            apiKey: result.apiKey,
+            tenantId: result.tenantId,
+            credentialLabel: result.credentialLabel,
+          }),
         });
+        try { approveResponse = await approveRes.json(); } catch (e) { approveResponse = null; }
       }
       // Mark that user has an account (persists across sessions)
       localStorage.setItem('kscope-has-account', 'true');
+      // 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, true)) return;
+      storeDemoHandoffIfNeeded('/demo', result, true);
       document.getElementById('signup-view').style.display = 'none';
       document.getElementById('success-view').style.display = 'block';
-      document.getElementById('welcome-name').textContent = 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');
@@ -444,8 +758,19 @@ async function doCreateAccount() {
     }
   } catch (err) {
     if (err.name === 'NotAllowedError') {
-      setStatus('Cancelled. Try again when ready.', 'error');
-      setTimeout(function() { clearStatus(); }, 3000);
+      // Distinguish auto-start rejection from a user cancellation.
+      // When the QR auto-start hits a strict user-activation policy
+      // (Safari Private Browsing, future stricter modes), surface a
+      // clear, QR-specific instruction instead of the generic
+      // "Cancelled" copy. The existing primary button stays enabled
+      // (btn.disabled = false below); the user's tap is a real
+      // gesture and reuses the same qrSessionId.
+      if (qrSessionMode && qrAutoStarting) {
+        setStatus('This browser blocked automatic Face ID. Tap Enter the Kaleidoscope to continue.', 'error');
+      } else {
+        setStatus('Cancelled. Try again when ready.', 'error');
+        setTimeout(function() { clearStatus(); }, 3000);
+      }
     } else {
       setStatus('Error: ' + err.message, 'error');
     }
@@ -457,7 +782,14 @@ async function doSignIn() {
   document.getElementById('signInBtn').style.pointerEvents = 'none';
   document.getElementById('createBtn').disabled = true;
 
-  // Chrome desktop without local passkeys: use QR code for sign-in.
+  // Pair-mode desktop URLs must always use the QR path. A local
+  // desktop passkey is testing-only and must not become pair authority.
+  if (isPairNextOnDesktop() && !qrSessionMode) {
+    startQrLogin('', 'signin');
+    return;
+  }
+
+  // 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');
@@ -507,17 +839,36 @@ async function doSignIn() {
     var result = await verRes.json();
 
     if (result.success) {
+      // Direct Remote Control login continuation. Runs before any
+      // qr-login/approve or pair-mode logic so the apiKey lands in
+      // sessionStorage and the destination's auth gate finds it.
+      if (redirectToRemoteControlIfDirectLogin(result)) return;
       // If phone completing a desktop QR session, approve it
+      var approveResponse = null;
       if (qrSessionMode && qrSessionId) {
-        await fetch('/api/qr-login/approve', {
+        var approveRes = await fetch('/api/qr-login/approve', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ sessionId: qrSessionId, agentId: result.agentId, apiKey: result.apiKey }),
+          body: JSON.stringify({
+            sessionId: qrSessionId,
+            agentId: result.agentId,
+            apiKey: result.apiKey,
+            tenantId: result.tenantId,
+            credentialLabel: result.credentialLabel,
+          }),
         });
+        try { approveResponse = await approveRes.json(); } catch (e) { approveResponse = null; }
       }
+      // 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, false)) return;
+      storeDemoHandoffIfNeeded('/demo', result, false);
       document.getElementById('signup-view').style.display = 'none';
       document.getElementById('success-view').style.display = 'block';
-      document.getElementById('welcome-name').textContent = result.agentId || 'you';
+      // Use credentialLabel from the server, which matches the saved-
+      // passkey label the user sees in iOS Passwords / 1Password.
+      document.getElementById('welcome-name').textContent = result.credentialLabel || result.agentId || 'you';
       setStatus('', '');
     } else {
       setStatus(result.error || 'Authentication failed', 'error');
@@ -526,8 +877,19 @@ async function doSignIn() {
     }
   } catch (err) {
     if (err.name === 'NotAllowedError') {
-      setStatus('Cancelled. Try again when ready.', 'error');
-      setTimeout(function() { clearStatus(); }, 3000);
+      // Distinguish auto-start rejection from a user cancellation.
+      // When the QR auto-start hits a strict user-activation policy
+      // (Safari Private Browsing, future stricter modes), surface a
+      // clear, QR-specific instruction instead of the generic
+      // "Cancelled" copy. The sign-in link and primary button stay
+      // enabled below; the user's tap is a real gesture and reuses
+      // the same qrSessionId.
+      if (qrSessionMode && qrAutoStarting) {
+        setStatus('This browser blocked automatic Face ID. Tap Already have an account? Sign in. to continue.', 'error');
+      } else {
+        setStatus('Cancelled. Try again when ready.', 'error');
+        setTimeout(function() { clearStatus(); }, 3000);
+      }
     } else {
       setStatus('Error: ' + err.message, 'error');
     }