feat: restructure frontend routes — vendor/tenant persona split

Splits the flat 3-page UI into /vendor/* (platform:admin) and /tenant/*
(all authenticated users) route trees, with stub pages, new API hooks,
updated Layout with persona-aware sidebar, and SpaController forwarding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/auth/OrgResolver.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
+import { Outlet } from 'react-router';
 import { useLogto } from '@logto/react';
-import { Button, EmptyState, Spinner } from '@cameleer/design-system';
+import { Spinner } from '@cameleer/design-system';
 import { useMe } from '../api/hooks';
 import { useOrgStore } from './useOrganization';
 import { fetchConfig } from '../config';
@@ -10,8 +11,8 @@ import { fetchConfig } from '../config';
  * Also reads OAuth2 scopes from the access token and stores them.
  * Renders children once resolved.
  */
-export function OrgResolver({ children }: { children: React.ReactNode }) {
-  const { data: me, isLoading, isError, refetch } = useMe();
+export function OrgResolver({ children }: { children?: React.ReactNode }) {
+  const { data: me, isLoading, isError } = useMe();
   const { getAccessToken } = useLogto();
   const { getIdTokenClaims } = useLogto();
   const { setOrganizations, setCurrentOrg, setScopes, setUsername, currentOrgId } = useOrgStore();
@@ -86,18 +87,8 @@ export function OrgResolver({ children }: { children: React.ReactNode }) {
   }
 
   if (isError) {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '50vh', gap: '1rem' }}>
-        <EmptyState
-          title="Unable to load account"
-          description="Failed to retrieve your organization. Please try again or contact support."
-        />
-        <Button variant="secondary" size="sm" onClick={() => refetch()}>
-          Retry
-        </Button>
-      </div>
-    );
+    return null;
   }
 
-  return <>{children}</>;
+  return children ? <>{children}</> : <Outlet />;
 }

ui/src/auth/ProtectedRoute.tsx

@@ -1,9 +1,9 @@
 import { useRef } from 'react';
-import { Navigate } from 'react-router';
+import { Navigate, Outlet } from 'react-router';
 import { useLogto } from '@logto/react';
 import { Spinner } from '@cameleer/design-system';
 
-export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+export function ProtectedRoute({ children }: { children?: React.ReactNode }) {
   const { isAuthenticated, isLoading } = useLogto();
   // The Logto SDK sets isLoading=true for EVERY async method (getAccessToken, etc.),
   // not just initial auth. Only gate on the initial load — once isLoading is false
@@ -23,5 +23,5 @@ export function ProtectedRoute({ children }: { children: React.ReactNode }) {
   }
 
   if (!isAuthenticated) return <Navigate to="/login" replace />;
-  return <>{children}</>;
+  return children ? <>{children}</> : <Outlet />;
 }