spine-framework 0.3.85 → 0.3.87

package/.framework/src/App.tsx

@@ -6,7 +6,7 @@ import { LoginPage } from './pages/auth/LoginPage'
 import { RegisterPage } from './pages/auth/RegisterPage'
 import { PendingApprovalPage } from './pages/auth/PendingApprovalPage'
 import { NotFoundPage } from './pages/NotFoundPage'
-import { DashboardPage } from './pages/DashboardPage'
+import { SetupPage } from './pages/SetupPage'
 import { AppWrapper } from './components/AppWrapper'
 import { AppsRegistryProvider, useAppsRegistry } from './contexts/AppContext'
 import { CustomAppLoader } from './components/CustomAppLoader'
@@ -36,6 +36,8 @@ function App() {
         <Routes>
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
+          {/* / shows setup instructions when no user is logged in */}
+          <Route path="/" element={<SetupPage />} />
           <Route path="*" element={<Navigate to="/login" replace />} />
         </Routes>
       ) : user.status === 'pending' ? (
@@ -64,8 +66,9 @@ function AuthenticatedRouter() {
     )
   }
 
-  // Sort: longer explicit prefixes first (most specific), root (/) last so it
-  // doesn't swallow other routes. spine-framework reserved namespace excluded.
+  // Sort: longer explicit prefixes first (most specific), root (/) last.
+  // The /spine-framework namespace is registered statically before dynamic routes
+  // so it always wins — but also filter it from dynamic registration to be safe.
   const sorted = [...apps]
     .filter(app => app.slug !== 'spine-framework' && !app.route_prefix?.startsWith('/spine-framework'))
     .sort((a, b) => {
@@ -74,33 +77,19 @@ function AuthenticatedRouter() {
       return (b.route_prefix?.length || 0) - (a.route_prefix?.length || 0)
     })
 
-  // Determine default redirect:
-  //   - If an app owns root ('/'), redirect there directly
-  //   - Otherwise use the first non-root app's prefix
-  //   - Fall back to /dashboard if no apps installed
-  const rootApp = sorted.find(app => app.route_prefix === '/')
-  const defaultApp = sorted.find(app => app.route_prefix && app.route_prefix !== '/')
-  const defaultRedirect = rootApp ? '/' : (defaultApp?.route_prefix || '/dashboard')
-
   return (
     <Suspense fallback={<div className="min-h-screen flex items-center justify-center"><LoadingSpinner /></div>}>
       <Routes>
-        {/* Default redirect to first available app — only when root is not itself an app */}
-        {defaultRedirect !== '/' && (
-          <Route path="/" element={<Navigate to={defaultRedirect} replace />} />
-        )}
-        <Route path="/dashboard" element={<DashboardPage />} />
-        
-        {/* Login/register routes for authenticated users (redirects to qualified app) */}
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<RegisterPage />} />
-
-        {/* ── Spine Framework namespace (reserved — no custom app may use this path) ── */}
+        {/* ── Spine Framework namespace — registered first, always wins over /* ── */}
         <Route path="/spine-framework/admin/*" element={<AdminApp />} />
         <Route path="/spine-framework/api" element={<APIPage />} />
         <Route path="/spine-framework/cli" element={<CLIPage />} />
 
-        {/* Dynamic app routes */}
+        {/* Auth routes for already-authenticated users (LoginPage handles redirect) */}
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+
+        {/* Dynamic app routes — no framework opinions about / or /dashboard */}
         {sorted.map(app => {
           const prefix = app.route_prefix!
 
@@ -135,6 +124,7 @@ function AuthenticatedRouter() {
           return null
         })}
 
+        {/* No apps claim this path */}
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </Suspense>

package/.framework/src/pages/NotFoundPage.tsx

@@ -5,7 +5,7 @@
  * @stability stable
  *
  * Generic 404 page rendered by the catch-all route. Displays a large
- * "404" heading and a "Go back home" link to `/dashboard`.
+ * "404" heading and a link back to the sign-in page.
  */
 
 import React from 'react'
@@ -25,11 +25,11 @@ export function NotFoundPage() {
           
           <div className="mt-6">
             <Link
-              to="/dashboard"
+              to="/login"
               className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             >
               <Home className="w-4 h-4 mr-2" />
-              Go back home
+              Go to sign in
             </Link>
           </div>
         </div>

package/.framework/src/pages/SetupPage.tsx

@@ -0,0 +1,66 @@
+/**
+ * @module src/pages/SetupPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * Shown at the root path when no apps are installed or no users have been
+ * created yet. Guides the developer through the initial setup steps.
+ * Replaces the old /dashboard fallback — the framework has no opinion
+ * about what lives at / once apps are installed.
+ */
+
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export function SetupPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-lg w-full space-y-8">
+        <div className="text-center">
+          <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
+            <span className="text-white font-bold text-xl">S</span>
+          </div>
+          <h2 className="mt-6 text-3xl font-extrabold text-slate-900">
+            Welcome to Spine
+          </h2>
+          <p className="mt-2 text-sm text-slate-600">
+            Your project is running but no apps are installed yet.
+          </p>
+        </div>
+
+        <div className="bg-white shadow rounded-lg p-6 space-y-4">
+          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
+            Getting started
+          </h3>
+          <ol className="space-y-3 text-sm text-slate-600 list-decimal list-inside">
+            <li>
+              Edit <code className="bg-slate-100 px-1 rounded">.env</code> with your Supabase credentials
+            </li>
+            <li>
+              Run migrations:{' '}
+              <code className="bg-slate-100 px-1 rounded">npx spine-framework migrate</code>
+            </li>
+            <li>
+              Install an app:{' '}
+              <code className="bg-slate-100 px-1 rounded">npx spine-framework install-app spine-framework-cortex@next</code>
+            </li>
+            <li>
+              Reassemble:{' '}
+              <code className="bg-slate-100 px-1 rounded">npm run assemble && netlify dev</code>
+            </li>
+          </ol>
+        </div>
+
+        <div className="text-center">
+          <Link
+            to="/login"
+            className="text-sm font-medium text-slate-600 hover:text-slate-900"
+          >
+            Already set up? Sign in →
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/.framework/src/pages/auth/LoginPage.tsx

@@ -13,10 +13,9 @@
  * @seeAlso src/contexts/AuthContext.tsx (login implementation)
  */
 
-import React, { useState, useEffect } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
 import { useAuth } from '../../contexts/AuthContext'
-import { useAppsRegistry } from '../../contexts/AppContext'
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
 
 export function LoginPage() {
@@ -25,45 +24,11 @@ export function LoginPage() {
   const [error, setError] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   
-  const { user, login } = useAuth()
-  const navigate = useNavigate()
-  const { routableApps: apps, loading } = useAppsRegistry()
+  const { login } = useAuth()
 
-  // Redirect logged-in users to their qualified app
-  useEffect(() => {
-    if (user && !loading) {
-      // System admin gets special handling
-      if (user.roles?.includes('system_admin')) {
-        navigate('/spine-framework/admin', { replace: true })
-        return
-      }
-
-      // Find app matching user's role
-      const userRole = user.roles?.[0] // Single role per person
-      if (userRole) {
-        const matchingApp = apps.find(app => app.min_role === userRole)
-        if (matchingApp?.route_prefix) {
-          navigate(matchingApp.route_prefix, { replace: true })
-          return
-        }
-      }
-
-      // No matching app - show 404
-      // The 404 will be handled by the catch-all route in App.tsx
-    }
-  }, [user, loading, apps, navigate])
-
-  // Show loading while checking auth state (but allow redirect logic to run)
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="text-center">
-          <LoadingSpinner className="w-8 h-8 mx-auto mb-4" />
-          <p className="text-slate-600">Checking authentication...</p>
-        </div>
-      </div>
-    )
-  }
+  // After login, App.tsx switches to AuthenticatedRouter which handles
+  // all routing decisions based on the user's role and installed apps.
+  // LoginPage has no redirect logic of its own.
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -71,15 +36,11 @@ export function LoginPage() {
     setIsLoading(true)
 
     try {
-      console.log('Attempting login...')
       await login(email, password)
-      // Redirect will be handled by useEffect above
-      console.log('Login successful, redirect will be handled by useEffect...')
+      // App.tsx switches to AuthenticatedRouter on success — no redirect needed here
     } catch (err: any) {
-      console.error('Login error:', err)
       setError(err.message || 'Login failed')
     } finally {
-      console.log('Login process completed, setting loading to false')
       setIsLoading(false)
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework",
-  "version": "0.3.85",
+  "version": "0.3.87",
   "description": "Multi-tenant, modular application platform for modern SaaS systems",
   "type": "module",
   "bin": {