archy/neode-ui/src/views/RootRedirect.vue

<template>
  <div class="min-h-full">
    <BootScreen :visible="showBootScreen" @ready="onServerReady" />
    <div v-if="!showBootScreen" class="min-h-full flex items-center justify-center">
      <div class="flex flex-col items-center gap-4 opacity-0 root-redirect-fade">
        <svg class="animate-spin h-8 w-8 text-white/60" 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>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { isOnboardingComplete } from '@/composables/useOnboarding'
import BootScreen from '@/components/BootScreen.vue'

const router = useRouter()
const route = useRoute()
const showBootScreen = ref(false)

async function quickHealthCheck(): Promise<boolean> {
  try {
    const ac = new AbortController()
    const t = setTimeout(() => ac.abort(), 2000)
    const res = await fetch('/rpc/v1', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ jsonrpc: '2.0', id: 1, method: 'server.echo', params: { message: 'ping' } }),
      signal: ac.signal,
    })
    clearTimeout(t)
    return res.status !== 502 && res.status !== 503
  } catch {
    return false
  }
}

async function proceedToApp() {
  const devMode = import.meta.env.VITE_DEV_MODE
  if (devMode === 'setup' || devMode === 'existing') {
    router.replace('/login').catch(() => {})
    return
  }

  const localComplete = localStorage.getItem('neode_onboarding_complete') === '1'
  if (localComplete) {
    router.replace('/login').catch(() => {})
    return
  }

  let seenOnboarding = false
  try {
    const result = await Promise.race([
      isOnboardingComplete(),
      new Promise<boolean>((resolve) => setTimeout(() => resolve(false), 3000)),
    ])
    seenOnboarding = result
  } catch {
    seenOnboarding = false
  }
  router.replace(seenOnboarding ? '/login' : '/onboarding/intro').catch(() => {})
}

function onServerReady() {
  // Clear flags so splash intro plays on reload
  localStorage.removeItem('neode_intro_seen')
  localStorage.removeItem('neode_onboarding_complete')
  // Reload with ?intro=1 so we know to skip boot and let App.vue handle splash
  window.location.href = '/?intro=1'
}

onMounted(async () => {
  const devMode = import.meta.env.VITE_DEV_MODE

  // Coming back from boot screen — do nothing, let App.vue's SplashScreen take over
  if (route.query.intro === '1') {
    // Clean the URL without navigating
    window.history.replaceState({}, '', '/')
    return
  }

  // Standard dev modes
  if (devMode === 'setup' || devMode === 'existing') {
    proceedToApp()
    return
  }

  // Boot dev mode — always show boot screen
  if (devMode === 'boot') {
    showBootScreen.value = true
    return
  }

  // Production: quick health check
  const isUp = await quickHealthCheck()
  if (isUp) {
    proceedToApp()
    return
  }

  // Server not ready — show boot screen
  showBootScreen.value = true
})
</script>

<style scoped>
.root-redirect-fade {
  animation: root-fade-in 0.3s ease 0.5s forwards;
}
@keyframes root-fade-in {
  to { opacity: 1; }
}
</style>