Implement onboarding reset functionality and enhance backup features

- Added a new method to reset the onboarding state, allowing users to re-initiate the onboarding process.
- Integrated backup creation functionality, enabling users to create encrypted backups of their node identity.
- Updated API endpoints to handle onboarding reset and backup creation requests.
- Enhanced UI components to support the new onboarding reset and backup features, including error handling and user feedback.
- Introduced new dependencies for cryptographic operations and data encoding.

neode-ui/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.dbmr9lf4rv4"
+    "revision": "0.00fear1bobk"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

neode-ui/mock-backend.js

@@ -693,6 +693,12 @@ app.post('/rpc/v1', (req, res) => {
         return res.json({ result: userState.onboardingComplete })
       }
 
+      case 'auth.resetOnboarding': {
+        userState.onboardingComplete = false
+        console.log('[Auth] Onboarding reset')
+        return res.json({ result: true })
+      }
+
       case 'node.did': {
         const mockDid = 'did:key:z6MkpTHR8VNsBxYAAWHut2Geadd9jSwuBV8xRoAnwWsdvktH'
         const mockPubkey = 'a1b2c3d4e5f6789012345678901234567890abcdef1234567890abcdef123456'
@@ -705,6 +711,32 @@ app.post('/rpc/v1', (req, res) => {
         return res.json({ result: { nostr_pubkey: 'mock-nostr-pubkey-hex' } })
       }
 
+      case 'node.signChallenge': {
+        const { challenge } = params || {}
+        const mockSig = Buffer.from(`mock-sig-${challenge || 'challenge'}`).toString('hex')
+        return res.json({ result: { signature: mockSig } })
+      }
+
+      case 'node.createBackup': {
+        const { passphrase } = params || {}
+        if (!passphrase) {
+          return res.json({ error: { code: -32602, message: 'Missing passphrase' } })
+        }
+        const mockDid = 'did:key:z6MkpTHR8VNsBxYAAWHut2Geadd9jSwuBV8xRoAnwWsdvktH'
+        const mockPubkey = 'a1b2c3d4e5f6789012345678901234567890abcdef1234567890abcdef123456'
+        return res.json({
+          result: {
+            version: 1,
+            did: mockDid,
+            pubkey: mockPubkey,
+            kid: `${mockDid}#key-1`,
+            encrypted: true,
+            blob: Buffer.from(`mock-encrypted-backup-${passphrase}`).toString('base64'),
+            timestamp: new Date().toISOString(),
+          },
+        })
+      }
+
       case 'auth.login': {
         const { password } = params
         

neode-ui/src/App.vue

@@ -111,16 +111,16 @@ function onUserActivity() {
 function onKeyDown(e: KeyboardEvent) {
   const isMac = navigator.platform.toUpperCase().includes('MAC')
   const mod = isMac ? e.metaKey : e.ctrlKey
-  // Cmd+K / Ctrl+K or plain K (when not typing in input)
+  // Cmd+K / Ctrl+K only (modifier required - avoids accidental trigger when typing)
   const target = e.target as HTMLElement
   const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
-  if ((mod && e.key === 'k') || ((e.key === 'k' || e.key === 'K') && !isInput)) {
+  if (mod && e.key === 'k') {
     e.preventDefault()
     spotlightStore.toggle()
     return
   }
-  // Cmd+Shift+` / Ctrl+Shift+` or plain C - CLI popup
-  if ((mod && e.shiftKey && e.key === '`') || ((e.key === 'c' || e.key === 'C') && !isInput)) {
+  // Cmd+Shift+` / Ctrl+Shift+` or Cmd+Shift+C / Ctrl+Shift+C - CLI popup (modifier required)
+  if ((mod && e.shiftKey && e.key === '`') || (mod && e.shiftKey && (e.key === 'c' || e.key === 'C'))) {
     e.preventDefault()
     cliStore.toggle()
     return

neode-ui/src/api/rpc-client.ts

@@ -135,6 +135,13 @@ class RPCClient {
     })
   }
 
+  async resetOnboarding(): Promise<boolean> {
+    return this.call({
+      method: 'auth.resetOnboarding',
+      params: {},
+    })
+  }
+
   async getNodeDid(): Promise<{ did: string; pubkey: string }> {
     return this.call({
       method: 'node.did',
@@ -142,6 +149,28 @@ class RPCClient {
     })
   }
 
+  async signChallenge(challenge: string): Promise<{ signature: string }> {
+    return this.call({
+      method: 'node.signChallenge',
+      params: { challenge },
+    })
+  }
+
+  async createBackup(passphrase: string): Promise<{
+    version: number
+    did: string
+    pubkey: string
+    kid: string
+    encrypted: boolean
+    blob: string
+    timestamp: string
+  }> {
+    return this.call({
+      method: 'node.createBackup',
+      params: { passphrase },
+    })
+  }
+
   async publishNostrIdentity(): Promise<{ event_id: string; success: number; failed: number }> {
     return this.call({
       method: 'node.nostr-publish',

neode-ui/src/router/index.ts

@@ -124,6 +124,22 @@ const router = createRouter({
   ],
 })
 
+// Session check with timeout - avoids endless spinner on mobile/slow networks
+const SESSION_CHECK_TIMEOUT_MS = 8000
+
+async function checkSessionWithTimeout(store: ReturnType<typeof useAppStore>): Promise<boolean> {
+  try {
+    return await Promise.race([
+      store.checkSession(),
+      new Promise<boolean>((resolve) =>
+        setTimeout(() => resolve(false), SESSION_CHECK_TIMEOUT_MS)
+      ),
+    ])
+  } catch {
+    return false
+  }
+}
+
 /**
  * Navigation Guard
  * Handles authentication and onboarding flow routing
@@ -134,16 +150,16 @@ router.beforeEach(async (to, _from, next) => {
 
   // Allow all public routes (login, onboarding) without auth check
   if (isPublic) {
-    // If authenticated and visiting /login, validate session first
+    // If authenticated and visiting /login: show login immediately, validate in background.
+    // This prevents endless spinner on mobile when checkSession hangs (slow/unreachable network).
     if (to.path === '/login' && store.isAuthenticated) {
       if (store.needsSessionValidation()) {
-        const valid = await store.checkSession()
-        if (valid) {
-          next({ name: 'home' })
-          return
-        }
-        // Session invalid, allow login page
         next()
+        checkSessionWithTimeout(store).then((valid) => {
+          if (valid) {
+            router.replace({ name: 'home' }).catch(() => {})
+          }
+        })
         return
       }
       next({ name: 'home' })
@@ -153,9 +169,9 @@ router.beforeEach(async (to, _from, next) => {
     return
   }
 
-  // Protected routes: validate session if stale auth from localStorage
+  // Protected routes: validate session if stale auth from localStorage (with timeout)
   if (store.needsSessionValidation()) {
-    const valid = await store.checkSession()
+    const valid = await checkSessionWithTimeout(store)
     if (!valid) {
       next('/login')
       return
@@ -164,9 +180,9 @@ router.beforeEach(async (to, _from, next) => {
     return
   }
 
-  // Not authenticated at all
+  // Not authenticated at all (with timeout to avoid endless spinner on mobile)
   if (!store.isAuthenticated) {
-    const hasSession = await store.checkSession()
+    const hasSession = await checkSessionWithTimeout(store)
     if (hasSession) {
       next()
       return

neode-ui/src/views/Login.vue

@@ -116,14 +116,22 @@
         </div>
       </div>
 
-      <!-- Replay Intro - Bottom of Page -->
-      <div class="mt-8 text-center">
+      <!-- Replay Intro / Restart Onboarding - Bottom of Page -->
+      <div class="mt-8 text-center flex items-center justify-center gap-4">
         <button 
           @click="replayIntro" 
           class="text-xs text-white/50 hover:text-white/70 transition-colors underline-offset-2 hover:underline"
         >
           Replay Intro
         </button>
+        <span class="text-white/30">|</span>
+        <button 
+          @click="restartOnboarding" 
+          :disabled="isResettingOnboarding"
+          class="text-xs text-white/50 hover:text-white/70 transition-colors underline-offset-2 hover:underline disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {{ isResettingOnboarding ? 'Resetting...' : 'Onboarding' }}
+        </button>
       </div>
     </div>
   </div>
@@ -286,6 +294,27 @@ function replayIntro() {
   // Navigate to root to trigger splash screen
   window.location.href = '/'
 }
+
+const isResettingOnboarding = ref(false)
+
+async function restartOnboarding() {
+  if (isResettingOnboarding.value) return
+  isResettingOnboarding.value = true
+  try {
+    await rpcClient.resetOnboarding()
+    localStorage.removeItem('neode_onboarding_complete')
+    localStorage.removeItem('neode_did')
+    localStorage.removeItem('neode_did_state')
+    localStorage.removeItem('neode_backup_created')
+    await router.push('/onboarding/intro')
+    window.location.reload()
+  } catch (err) {
+    console.error('Failed to reset onboarding:', err)
+    error.value = err instanceof Error ? err.message : 'Failed to reset onboarding'
+  } finally {
+    isResettingOnboarding.value = false
+  }
+}
 </script>
 
 <style scoped>

neode-ui/src/views/OnboardingBackup.vue

@@ -15,6 +15,7 @@
       <!-- Content Area -->
       <div class="flex flex-col items-center gap-4 sm:gap-6 mb-4 sm:mb-6 px-3 sm:px-4">
         <div class="w-full max-w-[600px] space-y-4 sm:space-y-6">
+          <p v-if="errorMessage" class="text-red-400 text-sm">{{ errorMessage }}</p>
           <!-- Passphrase Input -->
           <div class="path-option-card cursor-default px-4 py-4 sm:px-6 sm:py-6">
             <div class="text-left w-full">
@@ -65,7 +66,7 @@
           <!-- Success Message -->
           <div v-if="downloaded" class="text-center">
             <p class="text-sm text-white/70">
-              Backup saved as <span class="font-mono text-white/90">neode-did-backup.json</span>
+              Backup saved as <span class="font-mono text-white/90">archipelago-did-backup.json</span>
             </p>
           </div>
         </div>
@@ -81,8 +82,8 @@
         </button>
         <button
           @click="proceed"
-          :disabled="!passphrase"
-          class="path-action-button path-action-button--continue"
+          :disabled="!downloaded"
+          class="path-action-button path-action-button--continue disabled:opacity-50"
         >
           Continue
         </button>
@@ -94,48 +95,40 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { rpcClient } from '@/api/rpc-client'
 
 const router = useRouter()
 const passphrase = ref('')
 const isDownloading = ref(false)
 const downloaded = ref(false)
+const errorMessage = ref('')
 
 async function downloadBackup() {
   if (!passphrase.value) return
-  
+
   isDownloading.value = true
-  
-  // Simulate backup creation
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  
-  // Get DID from localStorage
-  const didStateStr = localStorage.getItem('neode_did_state')
-  const didState = didStateStr ? JSON.parse(didStateStr) : { did: 'did:key:unknown', kid: 'kid:mock' }
-  
-  // Create backup data
-  const backupData = {
-    version: '1.0',
-    did: didState.did,
-    kid: didState.kid,
-    encrypted: true,
-    timestamp: new Date().toISOString(),
-    // In production, this would be properly encrypted with the passphrase
-    note: 'This is a mock backup. In production, this would contain encrypted key material.'
+  errorMessage.value = ''
+
+  try {
+    const backupData = await rpcClient.createBackup(passphrase.value)
+
+    const blob = new Blob([JSON.stringify(backupData, null, 2)], {
+      type: 'application/json',
+    })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'archipelago-did-backup.json'
+    a.click()
+    URL.revokeObjectURL(a.href)
+
+    downloaded.value = true
+    localStorage.setItem('neode_backup_created', '1')
+  } catch (err) {
+    errorMessage.value =
+      err instanceof Error ? err.message : 'Failed to create backup. Please try again.'
+  } finally {
+    isDownloading.value = false
   }
-  
-  // Create and download file
-  const blob = new Blob([JSON.stringify(backupData, null, 2)], { type: 'application/json' })
-  const a = document.createElement('a')
-  a.href = URL.createObjectURL(blob)
-  a.download = 'neode-did-backup.json'
-  a.click()
-  URL.revokeObjectURL(a.href)
-  
-  downloaded.value = true
-  isDownloading.value = false
-  
-  // Store passphrase hint (not the actual passphrase!)
-  localStorage.setItem('neode_backup_created', '1')
 }
 
 function proceed() {

neode-ui/src/views/OnboardingDid.vue

@@ -5,10 +5,10 @@
       <!-- Header -->
       <div v-if="!generatedDid" class="text-center flex-shrink-0">
         <h1 class="text-[26px] font-semibold text-white/96 mb-6 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
-          Take control of your new identity
+          Your node's identity
         </h1>
         <p class="text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto mb-6">
-          Generate a Decentralized Identifier (DID) for secure, passwordless authentication. Your identity, your control.
+          Your node has a Decentralized Identifier (DID) for secure, passwordless authentication. Retrieve it to continue.
         </p>
       </div>
 
@@ -16,20 +16,20 @@
       <div class="flex flex-col items-center gap-6 mb-6">
         <!-- Error message -->
         <p v-if="errorMessage" class="text-red-400 text-sm mb-4">{{ errorMessage }}</p>
-        <!-- Generate Button (if no DID yet) -->
+        <!-- Fetch Button (if no DID yet) -->
         <button
           v-if="!generatedDid"
-          @click="generateDid"
+          @click="fetchDid"
           :disabled="isGenerating"
           class="path-action-button path-action-button--continue"
         >
-          <span v-if="!isGenerating">Generate DID</span>
+          <span v-if="!isGenerating">Retrieve DID</span>
           <span v-else class="flex items-center gap-2">
             <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
               <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
               <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>
-            Generating...
+            Retrieving...
           </span>
         </button>
 
@@ -45,7 +45,7 @@
               </div>
             </div>
             <p class="text-[20px] text-white/80 leading-relaxed max-w-[600px] mx-auto mb-6">
-              Your decentralized identifier has been generated
+              Your node's decentralized identifier
             </p>
           </div>
 
@@ -59,7 +59,7 @@
                 </p>
               </div>
               <p class="text-base text-white/60">
-                This identifier is stored securely on your device
+                This identifier is stored securely on your node
               </p>
             </div>
           </div>
@@ -88,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { rpcClient } from '@/api/rpc-client'
 
@@ -97,7 +97,13 @@ const generatedDid = ref<string>('')
 const isGenerating = ref(false)
 const errorMessage = ref<string>('')
 
-async function generateDid() {
+/** Store DID state with proper kid (DID#key-1 per W3C) */
+function storeDidState(did: string, pubkey: string) {
+  localStorage.setItem('neode_did', did)
+  localStorage.setItem('neode_did_state', JSON.stringify({ did, kid: `${did}#key-1`, pubkey }))
+}
+
+async function fetchDid() {
   isGenerating.value = true
   errorMessage.value = ''
 
@@ -105,8 +111,7 @@ async function generateDid() {
     try {
       const { did, pubkey } = await rpcClient.getNodeDid()
       generatedDid.value = did
-      localStorage.setItem('neode_did', did)
-      localStorage.setItem('neode_did_state', JSON.stringify({ did, kid: pubkey }))
+      storeDidState(did, pubkey)
       break
     } catch (err) {
       errorMessage.value = err instanceof Error ? err.message : 'Server unavailable. Retrying...'
@@ -120,6 +125,14 @@ async function generateDid() {
   isGenerating.value = false
 }
 
+onMounted(() => {
+  // Auto-fetch if identity may already exist (e.g. returning to this step)
+  const cached = localStorage.getItem('neode_did')
+  if (cached && !cached.includes('...')) {
+    generatedDid.value = cached
+  }
+})
+
 function proceed() {
   if (generatedDid.value && !generatedDid.value.includes('...')) {
     router.push('/onboarding/backup').catch(() => {})

neode-ui/src/views/OnboardingIntro.vue

@@ -3,13 +3,9 @@
     <div class="max-w-2xl w-full">
       <div class="glass-card p-12 pt-20 text-center animate-fade-up relative overflow-visible">
         <!-- Logo - half in, half out of container -->
-        <div class="absolute -top-[52px] left-1/2 -translate-x-1/2">
-          <div class="logo-gradient-border">
-            <img 
-              src="/assets/img/favico.svg" 
-              alt="Archipelago" 
-              class="w-20 h-20"
-            />
+        <div class="absolute -top-10 left-1/2 -translate-x-1/2 z-10">
+          <div class="logo-gradient-border w-20 h-20">
+            <AnimatedLogo no-border fit />
           </div>
         </div>
         
@@ -34,6 +30,7 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import AnimatedLogo from '@/components/AnimatedLogo.vue'
 
 const router = useRouter()
 

neode-ui/src/views/OnboardingVerify.vue

@@ -14,6 +14,7 @@
 
       <!-- Content Area -->
       <div class="flex flex-col items-center gap-6 mb-6">
+        <p v-if="errorMessage" class="text-red-400 text-sm">{{ errorMessage }}</p>
         <!-- Sign Button (if not verified yet) -->
         <button
           v-if="!verified"
@@ -84,32 +85,35 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { completeOnboarding } from '@/composables/useOnboarding'
+import { rpcClient } from '@/api/rpc-client'
 
 const router = useRouter()
 const verified = ref(false)
 const isSigning = ref(false)
 const signature = ref('')
+const errorMessage = ref('')
+
+/** Generate a cryptographically random challenge (32 bytes, base64) */
+function generateChallenge(): string {
+  const bytes = new Uint8Array(32)
+  crypto.getRandomValues(bytes)
+  return btoa(String.fromCharCode(...bytes))
+}
 
 async function signChallenge() {
   isSigning.value = true
+  errorMessage.value = ''
 
-  // Simulate signing challenge
-  await new Promise(resolve => setTimeout(resolve, 1500))
-
-  const mockSignature = generateMockSignature()
-  signature.value = mockSignature
-  verified.value = true
-
-  isSigning.value = false
-}
-
-function generateMockSignature(): string {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
-  let result = ''
-  for (let i = 0; i < 128; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  try {
+    const challenge = generateChallenge()
+    const { signature: sig } = await rpcClient.signChallenge(challenge)
+    signature.value = sig
+    verified.value = true
+  } catch (err) {
+    errorMessage.value = err instanceof Error ? err.message : 'Failed to sign challenge. Please try again.'
+  } finally {
+    isSigning.value = false
   }
-  return result
 }
 
 async function proceed() {