feat: guest mode — anonymous play with soft signup nudges

- Auto-init guest session on first visit (no forced onboarding wall)
- Guest data stored under breakaway-guest localStorage key
- All challenges accessible without signup
- Post-challenge toast nudge: 'Create an account to save permanently'
- Export/QR/verification gated: redirects to signup with context toast
- Profile page shows Guest Challenger card with credential count + XP
- Nav avatar shows 'G' for guests, clickable to onboard
- On signup: migrateGuestData() merges all guest credentials/XP/streak into new account
- saveState() routes to guest or user storage based on APP.isGuest

Author: VrtxOmega

js/app.js

@@ -1,10 +1,15 @@
 document.addEventListener('DOMContentLoaded',()=>{
-  loadState();initParticles();initGrid();
+  loadState();
+  if(!APP.user){
+    loadGuestState();
+    if(!APP.isGuest) initGuestSession();
+  }
+  initParticles();initGrid();
   document.getElementById('stat-challenges').textContent=CHALLENGES.length;
   document.getElementById('stat-domains').textContent=DOMAINS.length;
   document.getElementById('stat-verified').textContent=APP.credentials.length;
   document.getElementById('btn-get-started').addEventListener('click',()=>{
-    if(APP.user)navigate('#/dashboard');else navigate('#/onboard');
+    if(APP.user||APP.isGuest)navigate('#/dashboard');else navigate('#/onboard');
   });
   document.getElementById('btn-learn-more').addEventListener('click',()=>{document.getElementById('how-it-works').scrollIntoView({behavior:'smooth'});});
   // Domain chips
@@ -84,6 +89,7 @@ document.addEventListener('DOMContentLoaded',()=>{
     if (authMode === 'signup') {
       const salt = generateSalt();
       const hash = await pbkdf2Hash(password, salt);
+      migrateGuestData();
       APP.user = {
         email: email,
         salt: salt,
@@ -111,7 +117,15 @@ document.addEventListener('DOMContentLoaded',()=>{
       }
     }
   });
-  if(APP.user&&APP.user.name&&APP.user.name.length>0){document.getElementById('nav-avatar').textContent=APP.user.name[0].toUpperCase();}
+  const navAvatar=document.getElementById('nav-avatar');
+  if(APP.user&&APP.user.name&&APP.user.name.length>0){
+    navAvatar.textContent=APP.user.name[0].toUpperCase();
+  }else if(APP.isGuest){
+    navAvatar.textContent='G';
+    navAvatar.title='Guest — click to sign up';
+    navAvatar.style.cursor='pointer';
+    navAvatar.onclick=()=>navigate('#/onboard');
+  }
   // ── Keyboard Shortcuts ──
   document.addEventListener('keydown',function(e){
     // Ctrl+Enter: submit code or prompt

js/challenge-engine.js

@@ -162,7 +162,7 @@ async function submitQuiz(){
   const hash=await sha256(JSON.stringify({id:c.id,answers:APP.quizAnswers,score,time:elapsed,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,ts:Date.now()}));
   const integrity=computeIntegrity(APP.pasteCount,APP.tabSwitchCount,APP.aiMode);
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString()};
-  APP.credentials.push(cred);saveState();showResults(cred,correctCount+'/'+c.questions.length+' correct');
+  APP.credentials.push(cred);saveState();showResults(cred,correctCount+'/'+c.questions.length+' correct');maybeShowSignupNudge();
 }
 function runTests(){
   const c=APP.activeChallenge;const code=document.getElementById('code-input').value;
@@ -183,7 +183,7 @@ async function submitCode(){
   const hash=await sha256(JSON.stringify({id:c.id,code,score,time:elapsed,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,ts:Date.now()}));
   const integrity=computeIntegrity(APP.pasteCount,APP.tabSwitchCount,APP.aiMode);
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString()};
-  APP.credentials.push(cred);saveState();showResults(cred,passed+'/'+c.tests.length+' tests passed');
+  APP.credentials.push(cred);saveState();showResults(cred,passed+'/'+c.tests.length+' tests passed');maybeShowSignupNudge();
 }
 async function submitValidate(){
   clearInterval(timerInterval);const c=APP.activeChallenge;if(!c)return;
@@ -210,7 +210,7 @@ async function submitValidate(){
   const hash=await sha256(JSON.stringify({id:c.id,answers,score,time:elapsed,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,ts:Date.now()}));
   const integrity=computeIntegrity(APP.pasteCount,APP.tabSwitchCount,APP.aiMode);
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString()};
-  APP.credentials.push(cred);saveState();showResults(cred,found+'/'+c.bugCount+' bugs found');
+  APP.credentials.push(cred);saveState();showResults(cred,found+'/'+c.bugCount+' bugs found');maybeShowSignupNudge();
 }
 async function submitPrompt(){
   clearInterval(timerInterval);const c=APP.activeChallenge;
@@ -227,7 +227,7 @@ async function submitPrompt(){
   const hash=await sha256(JSON.stringify({id:c.id,prompt,score,time:elapsed,aiMode:APP.aiMode,tabSwitches:APP.tabSwitchCount,ts:Date.now()}));
   const integrity=computeIntegrity(0,APP.tabSwitchCount,APP.aiMode);
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:'native',pasteCount:0,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString()};
-  APP.credentials.push(cred);saveState();showResults(cred,'Prompt scored '+score+'/100');
+  APP.credentials.push(cred);saveState();showResults(cred,'Prompt scored '+score+'/100');maybeShowSignupNudge();
 }
 // ═══════════════════════════════════════
 // STROOP CHALLENGE ENGINE
@@ -285,7 +285,7 @@ async function finishStroop(){
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:APP.aiMode,pasteCount:0,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString(),
     meta:{accuracy,avgReactionMs:avgTime,speedBonus,correct:APP.stroopCorrect,total:APP.stroopTotal}};
   APP.credentials.push(cred);saveState();
-  showResults(cred,APP.stroopCorrect+'/'+APP.stroopTotal+' correct — avg '+avgTime+'ms');
+  showResults(cred,APP.stroopCorrect+'/'+APP.stroopTotal+' correct — avg '+avgTime+'ms');maybeShowSignupNudge();
 }
 // ═══════════════════════════════════════
 // SPEED PARSE CHALLENGE ENGINE
@@ -327,7 +327,7 @@ async function submitSpeedParse(){
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:APP.aiMode,pasteCount:0,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString(),
     meta:{correct,total:snippet.questions.length,recallRate:score}};
   APP.credentials.push(cred);saveState();
-  showResults(cred,correct+'/'+snippet.questions.length+' recalled correctly');
+  showResults(cred,correct+'/'+snippet.questions.length+' recalled correctly');maybeShowSignupNudge();
 }
 // ═══════════════════════════════════════
 // AI VALIDATE (ADVANCED) ENGINE
@@ -367,5 +367,5 @@ async function submitAIValidate(){
   const cred={id:hash.slice(0,16),challengeId:c.id,domain:c.domain,title:c.title,score,time:elapsed,hash,aiMode:APP.aiMode,pasteCount:APP.pasteCount,tabSwitches:APP.tabSwitchCount,integrity:integrity.label,timestamp:new Date().toISOString(),
     meta:{bugsFound:found,bugCount:c.bugCount,detailBonus,matchDetails}};
   APP.credentials.push(cred);saveState();
-  showResults(cred,found+'/'+c.bugCount+' bugs found'+(detailBonus?' (+'+detailBonus+' detail bonus)':''));
+  showResults(cred,found+'/'+c.bugCount+' bugs found'+(detailBonus?' (+'+detailBonus+' detail bonus)':''));maybeShowSignupNudge();
 }

js/challenges.js

@@ -1,5 +1,5 @@
 // Breakaway App - Core
-const APP = { user: null, credentials: [], view: 'landing', aiMode: null, pasteCount: 0, tabSwitchCount: 0, xp: 0, streak: 0, lastCompleted: null, stroopRound: 0, stroopCorrect: 0, stroopTotal: 0, speedparsePhase: 'flash', speedparseAnswers: [] };
+const APP = { user: null, credentials: [], view: 'landing', aiMode: null, pasteCount: 0, tabSwitchCount: 0, xp: 0, streak: 0, lastCompleted: null, stroopRound: 0, stroopCorrect: 0, stroopTotal: 0, speedparsePhase: 'flash', speedparseAnswers: [], isGuest: false, hasShownSignupNudge: false };
 // ── Session Integrity System ──
 // Measures session continuity during solo mode via paste events and tab switches.
 // Produces a transparent focus label on each credential — informational, not judgmental.

js/config.js

@@ -225,7 +225,10 @@ function drawRadarChart(){
 function renderProfile(){
   const pw=document.getElementById('profile-wrapper');
   if(!APP.user){
-    pw.innerHTML='<div class="profile-empty"><div class="profile-empty-icon"><svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></svg></div><h2>Create Your Profile</h2><p>Set up your identity to start earning verified credentials.</p><button class="btn btn-primary" onclick="navigate(\'#/onboard\')">⚡ Get Started</button></div>';
+    const credsCount=APP.credentials.length;
+    const guestCard='<div class="profile-card" style="margin-bottom:16px"><div class="profile-card-top"><div class="profile-avatar" style="background:rgba(201,168,76,0.15);color:var(--gold)">G</div><div class="profile-identity"><div class="profile-name">Guest Challenger</div><div class="profile-title">'+credsCount+' credential'+(credsCount!==1?'s':'')+' earned anonymously</div></div></div><div class="profile-xp-bar"><div class="profile-xp-label"><span>⭐ '+APP.xp+' XP</span><span>🔥 '+APP.streak+' streak</span></div><div class="profile-xp-track"><div class="profile-xp-fill" style="width:'+Math.min(100,(APP.xp/1000)*100)+'%"></div></div></div><div style="margin-top:16px"><button class="btn btn-primary" onclick="navigate(\'#/onboard\')">⚡ Sign Up to Save Progress</button></div></div>';
+    const skillsMsg='<div class="card"><div class="card-header"><h3>Skill Map</h3></div><div class="profile-empty-skills"><p>Your guest credentials are stored on this device only. Sign up to make them permanent and portable.</p></div></div>';
+    pw.innerHTML=guestCard+skillsMsg;
     return;
   }
   const domains={};APP.credentials.forEach(c=>{if(!domains[c.domain])domains[c.domain]={count:0,total:0};domains[c.domain].count++;domains[c.domain].total+=c.score;});
@@ -247,6 +250,7 @@ function renderCredentials(){
   }).join('');
 }
 function exportCredentials(){
+  if(APP.isGuest){showToast('Sign up to export and share your credentials','info',4000);navigate('#/onboard');return;}
   const data={exportVersion:'1.0',exportedAt:new Date().toISOString(),user:{name:APP.user?.name,email:APP.user?.email},credentials:APP.credentials};
   const blob=new Blob([JSON.stringify(data,null,2)],{type:'application/json'});
   const url=URL.createObjectURL(blob);
@@ -268,6 +272,7 @@ function downloadQR(){
   const a=document.createElement('a');a.href=_qrDataUrl;a.download='breakaway-credential-qr.png';a.click();
 }
 function downloadVerificationPage(hash){
+  if(APP.isGuest){showToast('Sign up to make your credentials portable and shareable','info',4000);navigate('#/onboard');return;}
   const cred=APP.credentials.find(c=>c.hash===hash);if(!cred)return;
   const verifyHtml='<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Breakaway Credential Verification</title><style>body{font-family:Inter,system-ui,sans-serif;background:#0a0a0f;color:#e8e8f0;max-width:600px;margin:40px auto;padding:24px;line-height:1.6;}h1{color:#C9A84C;font-size:1.4rem;margin-bottom:4px;}h2{color:#65657a;font-size:0.85rem;font-weight:400;margin-bottom:24px;}.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px;margin-bottom:16px;}.label{color:#65657a;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}.value{color:#e8e8f0;font-size:1rem;font-weight:600;}.hash{font-family:JetBrains Mono,monospace;font-size:0.7rem;color:#65657a;word-break:break-all;margin-top:8px;padding:12px;background:rgba(0,0,0,0.3);border-radius:6px;}.badge{display:inline-block;padding:4px 10px;border-radius:4px;font-size:0.75rem;font-weight:700;margin-top:8px;}.verified{background:rgba(52,211,153,0.12);color:#34d399;}.footer{margin-top:32px;font-size:0.75rem;color:#65657a;text-align:center;}</style></head><body><h1>◈ Breakaway Credential</h1><h2>SHA-256 Verified Skill Proof</h2><div class="card"><div class="label">Challenge</div><div class="value">'+escapeHtml(cred.title)+'</div><div class="label">Domain</div><div class="value">'+escapeHtml(cred.domain)+'</div><div class="label">Score</div><div class="value">'+cred.score+'%</div><div class="label">Mode</div><div class="value">'+escapeHtml(cred.aiMode||'solo')+'</div><div class="label">Completed</div><div class="value">'+new Date(cred.timestamp).toLocaleString()+'</div><div class="label">Integrity</div><div class="value">'+escapeHtml(cred.integrity||'N/A')+'</div></div><div class="card"><div class="label">SHA-256 Hash</div><div class="hash">'+cred.hash+'</div><div class="badge verified">✓ Tamper-Evident</div></div><div class="footer">Verified by Breakaway — zero-dependency credentialing engine.<br>This file is self-contained and does not require an internet connection.</div></body></html>';
   const blob=new Blob([verifyHtml],{type:'text/html'});

js/ui.js

@@ -20,3 +20,48 @@ function drainToast(){
 }
 async function sha256(msg){const d=new TextEncoder().encode(msg);const h=await crypto.subtle.digest('SHA-256',d);return[...new Uint8Array(h)].map(b=>b.toString(16).padStart(2,'0')).join('');}
 function escapeHtml(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[c]));}
+
+// ── Guest Session Helpers ──
+function initGuestSession(){
+  APP.isGuest=true;
+  APP.hasShownSignupNudge=false;
+  try{localStorage.setItem('breakaway-guest',JSON.stringify({credentials:APP.credentials,xp:APP.xp,streak:APP.streak,lastCompleted:APP.lastCompleted}));}catch(e){}
+}
+function saveGuestState(){
+  if(!APP.isGuest)return;
+  try{localStorage.setItem('breakaway-guest',JSON.stringify({credentials:APP.credentials,xp:APP.xp,streak:APP.streak,lastCompleted:APP.lastCompleted}));}catch(e){}
+}
+function loadGuestState(){
+  try{
+    const d=JSON.parse(localStorage.getItem('breakaway-guest'));
+    if(d){
+      APP.isGuest=true;
+      APP.credentials=d.credentials||[];
+      APP.xp=d.xp||0;
+      APP.streak=d.streak||0;
+      APP.lastCompleted=d.lastCompleted||null;
+    }
+  }catch(e){}
+}
+function migrateGuestData(){
+  try{
+    const guest=JSON.parse(localStorage.getItem('breakaway-guest'));
+    if(guest){
+      APP.credentials=guest.credentials||APP.credentials;
+      APP.xp=(guest.xp||0)+APP.xp;
+      APP.streak=Math.max(guest.streak||0,APP.streak);
+      if(guest.lastCompleted)APP.lastCompleted=guest.lastCompleted;
+      localStorage.removeItem('breakaway-guest');
+    }
+  }catch(e){}
+  APP.isGuest=false;
+  APP.hasShownSignupNudge=false;
+}
+function maybeShowSignupNudge(){
+  if(!APP.isGuest||APP.hasShownSignupNudge)return;
+  APP.hasShownSignupNudge=true;
+  saveGuestState();
+  setTimeout(()=>{
+    showToast('💾 Create an account to save your credentials permanently','info',5000);
+  },1200);
+}