feat: F002 authentication & session layer

Add permission matrix, ProtectedRoute, RoleGuard, PermissionGate,
DemoRoleSwitcher, OrganizationSwitcher, AccessDenied, SessionExpired,
and institutional LoginScreen. Wire workspace-level route protection
into App.tsx; sidebar filters tabs by allowedWorkspaces.

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

src/components/layout/AppShell.tsx

@@ -156,6 +156,7 @@ const NAV_HOVER_BG = 'rgba(255,255,255,0.06)'
 interface SidebarProps {
   collapsed: boolean
   activeWorkspace: WorkspaceType
+  allowedWorkspaces: WorkspaceType[]
   onWorkspaceClick: (workspace: WorkspaceType) => void
   onToggle: () => void
   userName: string
@@ -165,6 +166,7 @@ interface SidebarProps {
 function Sidebar({
   collapsed,
   activeWorkspace,
+  allowedWorkspaces,
   onWorkspaceClick,
   onToggle,
   userName,
@@ -172,6 +174,7 @@ function Sidebar({
 }: SidebarProps) {
   const config = WORKSPACE_CONFIG[activeWorkspace]
   const width = collapsed ? 60 : 240
+  const visibleWorkspaces = WORKSPACE_ORDER.filter((ws) => allowedWorkspaces.includes(ws))
 
   return (
     <Box
@@ -240,7 +243,7 @@ function Sidebar({
           flexShrink: 0,
         }}
       >
-        {WORKSPACE_ORDER.map((ws) => {
+        {visibleWorkspaces.map((ws) => {
           const wsConfig = WORKSPACE_CONFIG[ws]
           const Icon = wsConfig.icon
           const isActive = ws === activeWorkspace
@@ -506,12 +509,14 @@ export function AppShell() {
 
   const userName = currentUser?.name ?? 'User'
   const orgName = currentUser?.organizationName ?? ''
+  const allowedWorkspaces = currentUser?.allowedWorkspaces ?? WORKSPACE_ORDER
 
   return (
     <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
       <Sidebar
         collapsed={sidebarCollapsed}
         activeWorkspace={activeWorkspace}
+        allowedWorkspaces={allowedWorkspaces}
         onWorkspaceClick={handleWorkspaceClick}
         onToggle={toggleSidebar}
         userName={userName}