src/components/navigation/GraphNavigator.tsx

@@ -1,60 +1,333 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { 
-    IconButton, Tooltip, Box, Menu, MenuItem,
+    IconButton, 
-    ListItemIcon, ListItemText, Chip, styled,
+    Tooltip, 
+    Box, 
+    Menu,
+    MenuItem,
+    ListItemIcon,
+    ListItemText,
+    Button,
+    styled
 } from '@mui/material';
 import { 
     ArrowBack as ArrowBackIcon,
     ArrowForward as ArrowForwardIcon,
     History as HistoryIcon,
-    Home as HomeIcon,
+    School as SchoolIcon,
-    CalendarToday,
+    Person as PersonIcon,
-    DateRange,
+    AccountCircle as AccountCircleIcon,
-    Event,
+    CalendarToday as CalendarIcon,
-    WorkspacesOutlined,
+    School as TeachingIcon,
+    Business as BusinessIcon,
+    AccountTree as DepartmentIcon,
+    Class as ClassIcon,
+    ExpandMore as ExpandMoreIcon
 } from '@mui/icons-material';
 import { useNavigationStore } from '../../stores/navigationStore';
+import { useNeoUser } from '../../contexts/NeoUserContext';
+import { NAVIGATION_CONTEXTS } from '../../config/navigationContexts';
+import { 
+    BaseContext,
+    ViewContext
+} from '../../types/navigation';
+import { logger } from '../../debugConfig';
 
 const NavigationRoot = styled(Box)`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   height: 100%;
+  overflow: hidden;
 `;
 
-function getNodeIcon(nodeType: string) {
+const NavigationControls = styled(Box)`
-    switch (nodeType) {
+  display: flex;
-        case 'User': return <HomeIcon fontSize="small" />;
+  align-items: center;
-        case 'CalendarYear': return <CalendarToday fontSize="small" />;
+  gap: 4px;
-        case 'CalendarMonth': return <DateRange fontSize="small" />;
+`;
-        case 'CalendarDay': return <Event fontSize="small" />;
+
-        default: return <WorkspacesOutlined fontSize="small" />;
+const ContextToggleContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: theme.palette.action.hover,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(0.5),
+    gap: theme.spacing(0.5),
+    '& .button-label': {
+        '@media (max-width: 500px)': {
+            display: 'none'
         }
-}
+    }
+}));
+
+const ContextToggleButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'active'
+})<{ active?: boolean }>(({ theme, active }) => ({
+    minWidth: 0,
+    padding: theme.spacing(0.5, 1.5),
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: active ? theme.palette.primary.main : 'transparent',
+    color: active ? theme.palette.primary.contrastText : theme.palette.text.primary,
+    textTransform: 'none',
+    transition: theme.transitions.create(['background-color', 'color'], {
+        duration: theme.transitions.duration.shorter,
+    }),
+    '&:hover': {
+        backgroundColor: active ? theme.palette.primary.dark : theme.palette.action.hover,
+    },
+    '@media (max-width: 500px)': {
+        padding: theme.spacing(0.5),
+    }
+}));
 
 export const GraphNavigator: React.FC = () => {
-    const { context, goBack, goForward, isLoading } = useNavigationStore();
+    const {
+        context,
+        switchContext,
+        goBack,
+        goForward,
+        isLoading
+    } = useNavigationStore();
+
+    const { userDbName, workerDbName, isInitialized: isNeoUserInitialized } = useNeoUser();
+
+    const [contextMenuAnchor, setContextMenuAnchor] = useState<null | HTMLElement>(null);
     const [historyMenuAnchor, setHistoryMenuAnchor] = useState<null | HTMLElement>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [availableWidth, setAvailableWidth] = useState<number>(0);
 
-    const { history } = context;
+    useEffect(() => {
-    const canGoBack = history.currentIndex > 0;
+        const calculateAvailableSpace = () => {
-    const canGoForward = history.currentIndex < history.nodes.length - 1;
+            if (!rootRef.current) return;
-    const currentNode = context.node;
+            
+            // Get the header element
+            const header = rootRef.current.closest('.MuiToolbar-root');
+            if (!header) return;
+
+            // Get the title and menu elements
+            const title = header.querySelector('.app-title');
+            const menu = header.querySelector('.menu-button');
+            
+            if (!title || !menu) return;
+
+            // Calculate available width
+            const headerWidth = header.clientWidth;
+            const titleWidth = title.clientWidth;
+            const menuWidth = menu.clientWidth;
+            const padding = 48; // Increased buffer space
+            
+            const newAvailableWidth = headerWidth - titleWidth - menuWidth - padding;
+            console.log('Available width:', newAvailableWidth); // Debug log
+            setAvailableWidth(newAvailableWidth);
+        };
+
+        // Set up ResizeObserver
+        const resizeObserver = new ResizeObserver(() => {
+            // Use requestAnimationFrame to debounce calculations
+            window.requestAnimationFrame(calculateAvailableSpace);
+        });
+
+        // Observe both the root element and the header
+        if (rootRef.current) {
+            const header = rootRef.current.closest('.MuiToolbar-root');
+            if (header) {
+                resizeObserver.observe(header);
+                resizeObserver.observe(rootRef.current);
+            }
+        }
+
+        // Initial calculation
+        calculateAvailableSpace();
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    // Helper function to determine what should be visible
+    const getVisibility = () => {
+        // Adjusted thresholds and collapse order:
+        // 1. Navigation controls (back/forward/history) collapse first
+        // 2. Toggle labels collapse second
+        // 3. Context label collapses last
+        if (availableWidth < 300) {
+            return {
+                navigation: false,
+                contextLabel: true,  // Keep context label visible longer
+                toggleLabels: false
+            };
+        } else if (availableWidth < 450) {
+            return {
+                navigation: false,
+                contextLabel: true,  // Keep context label visible
+                toggleLabels: true
+            };
+        } else if (availableWidth < 600) {
+            return {
+                navigation: true,
+                contextLabel: true,
+                toggleLabels: true
+            };
+        }
+        return {
+            navigation: true,
+            contextLabel: true,
+            toggleLabels: true
+        };
+    };
+
+    const visibility = getVisibility();
+
+    const handleHistoryClick = (event: React.MouseEvent<HTMLElement>) => {
+        setHistoryMenuAnchor(event.currentTarget);
+    };
+
+    const handleHistoryClose = () => {
+        setHistoryMenuAnchor(null);
+    };
 
-    const handleHistoryClick = (e: React.MouseEvent<HTMLElement>) => setHistoryMenuAnchor(e.currentTarget);
-    const handleHistoryClose = () => setHistoryMenuAnchor(null);
     const handleHistoryItemClick = (index: number) => {
-        const delta = index - history.currentIndex;
+        const {currentIndex} = context.history;
-        if (delta < 0) for (let i = 0; i < -delta; i++) goBack();
+        const steps = index - currentIndex;
-        else if (delta > 0) for (let i = 0; i < delta; i++) goForward();
+        
+        if (steps < 0) {
+            for (let i = 0; i < -steps; i++) {
+                goBack();
+            }
+        } else if (steps > 0) {
+            for (let i = 0; i < steps; i++) {
+                goForward();
+            }
+        }
+        
         handleHistoryClose();
     };
 
+    const handleContextChange = useCallback(async (newContext: BaseContext) => {
+        try {
+            // Check if trying to access institute contexts without worker database
+            if (['school', 'department', 'class'].includes(newContext) && !workerDbName) {
+                logger.error('navigation', '❌ Cannot switch to institute context: missing worker database');
+                return;
+            }
+            // Check if trying to access profile contexts without user database
+            if (['profile', 'calendar', 'teaching'].includes(newContext) && !userDbName) {
+                logger.error('navigation', '❌ Cannot switch to profile context: missing user database');
+                return;
+            }
+
+            logger.debug('navigation', '🔄 Changing main context', {
+                from: context.main,
+                to: newContext,
+                userDbName,
+                workerDbName
+            });
+
+            // Get default view for new context
+            const defaultView = getDefaultViewForContext(newContext);
+            
+            // Use unified context switch with both base and extended contexts
+            await switchContext({ 
+                main: ['profile', 'calendar', 'teaching'].includes(newContext) ? 'profile' : 'institute',
+                base: newContext,
+                extended: defaultView,
+                skipBaseContextLoad: false
+            }, userDbName, workerDbName);
+
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to change context:', error);
+        }
+    }, [context.main, switchContext, userDbName, workerDbName]);
+
+    // Helper function to get default view for a context
+    const getDefaultViewForContext = (context: BaseContext): ViewContext => {
+        switch (context) {
+            case 'calendar':
+                return 'overview';
+            case 'teaching':
+                return 'overview';
+            case 'school':
+                return 'overview';
+            case 'department':
+                return 'overview';
+            case 'class':
+                return 'overview';
+            default:
+                return 'overview';
+        }
+    };
+
+    const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setContextMenuAnchor(event.currentTarget);
+    };
+
+    const handleContextSelect = useCallback(async (context: BaseContext) => {
+        setContextMenuAnchor(null);
+        try {
+            // Use unified context switch with both base and extended contexts
+            const contextDef = NAVIGATION_CONTEXTS[context];
+            const defaultExtended = contextDef?.views[0]?.id;
+            
+            await switchContext({ 
+                base: context,
+                extended: defaultExtended 
+            }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to select context:', error);
+        }
+    }, [switchContext, userDbName, workerDbName]);
+
+    const getContextItems = useCallback(() => {
+        if (context.main === 'profile') {
+            return [
+                { id: 'profile', label: 'Profile', icon: AccountCircleIcon },
+                { id: 'calendar', label: 'Calendar', icon: CalendarIcon },
+                { id: 'teaching', label: 'Teaching', icon: TeachingIcon },
+            ];
+        } else {
+            return [
+                { id: 'school', label: 'School', icon: BusinessIcon },
+                { id: 'department', label: 'Department', icon: DepartmentIcon },
+                { id: 'class', label: 'Class', icon: ClassIcon },
+            ];
+        }
+    }, [context.main]);
+
+    const getContextIcon = useCallback((contextType: string) => {
+        switch (contextType) {
+            case 'profile':
+                return <AccountCircleIcon />;
+            case 'calendar':
+                return <CalendarIcon />;
+            case 'teaching':
+                return <TeachingIcon />;
+            case 'school':
+                return <BusinessIcon />;
+            case 'department':
+                return <DepartmentIcon />;
+            case 'class':
+                return <ClassIcon />;
+            default:
+                return <AccountCircleIcon />;
+        }
+    }, []);
+
+    const isDisabled = !isNeoUserInitialized || isLoading;
+    const { history } = context;
+    const canGoBack = history.currentIndex > 0;
+    const canGoForward = history.currentIndex < history.nodes.length - 1;
+
     return (
-        <NavigationRoot>
+        <NavigationRoot ref={rootRef}>
+            <NavigationControls sx={{ display: visibility.navigation ? 'flex' : 'none' }}>
                 <Tooltip title="Back">
                     <span>
-                    <IconButton onClick={goBack} disabled={!canGoBack || isLoading} size="small">
+                        <IconButton 
+                            onClick={goBack} 
+                            disabled={!canGoBack || isDisabled} 
+                            size="small"
+                        >
                             <ArrowBackIcon fontSize="small" />
                         </IconButton>
                     </span>
@@ -64,7 +337,7 @@ export const GraphNavigator: React.FC = () => {
                     <span>
                         <IconButton 
                             onClick={handleHistoryClick} 
-                        disabled={!history.nodes.length}
+                            disabled={!history.nodes.length || isDisabled} 
                             size="small"
                         >
                             <HistoryIcon fontSize="small" />
@@ -74,48 +347,112 @@ export const GraphNavigator: React.FC = () => {
 
                 <Tooltip title="Forward">
                     <span>
-                    <IconButton onClick={goForward} disabled={!canGoForward || isLoading} size="small">
+                        <IconButton 
+                            onClick={goForward} 
+                            disabled={!canGoForward || isDisabled} 
+                            size="small"
+                        >
                             <ArrowForwardIcon fontSize="small" />
                         </IconButton>
                     </span>
                 </Tooltip>
+            </NavigationControls>
 
-            {currentNode && (
+            {/* History Menu */}
-                <Chip
-                    size="small"
-                    icon={getNodeIcon(currentNode.type)}
-                    label={currentNode.label || currentNode.type}
-                    variant="outlined"
-                    sx={{ maxWidth: 200, fontSize: '0.75rem' }}
-                />
-            )}
-
             <Menu
                 anchorEl={historyMenuAnchor}
                 open={Boolean(historyMenuAnchor)}
                 onClose={handleHistoryClose}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+                anchorOrigin={{
-                transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center',
+                }}
             >
                 {history.nodes.map((node, index) => (
                     <MenuItem
                         key={`${node.id}-${index}`}
                         onClick={() => handleHistoryItemClick(index)}
                         selected={index === history.currentIndex}
-                        dense
                     >
-                        <ListItemIcon sx={{ minWidth: 32 }}>
+                        <ListItemIcon>
-                            {getNodeIcon(node.type)}
+                            {getContextIcon(node.type)}
                         </ListItemIcon>
                         <ListItemText 
                             primary={node.label || node.id}
                             secondary={node.type}
-                            primaryTypographyProps={{ fontSize: '0.8rem' }}
-                            secondaryTypographyProps={{ fontSize: '0.7rem' }}
                         />
                     </MenuItem>
                 ))}
             </Menu>
+
+            <ContextToggleContainer>
+                <ContextToggleButton
+                    active={context.main === 'profile'}
+                    onClick={() => handleContextChange('profile' as BaseContext)}
+                    startIcon={<PersonIcon />}
+                    disabled={isDisabled || !userDbName}
+                >
+                    {visibility.toggleLabels && <span className="button-label">Profile</span>}
+                </ContextToggleButton>
+                <ContextToggleButton
+                    active={context.main === 'institute'}
+                    onClick={() => handleContextChange('school' as BaseContext)}
+                    startIcon={<SchoolIcon />}
+                    disabled={isDisabled || !workerDbName}
+                >
+                    {visibility.toggleLabels && <span className="button-label">Institute</span>}
+                </ContextToggleButton>
+            </ContextToggleContainer>
+
+            <Box>
+                <Tooltip title={context.base}>
+                    <span>
+                        <Button
+                            onClick={handleContextMenu}
+                            disabled={isDisabled}
+                            sx={{
+                                minWidth: 0,
+                                p: 0.5,
+                                color: 'text.primary',
+                                '&:hover': {
+                                    bgcolor: 'action.hover'
+                                }
+                            }}
+                        >
+                            {getContextIcon(context.base)}
+                            {visibility.contextLabel && (
+                                <Box sx={{ ml: 1 }}>
+                                    {context.base}
+                                </Box>
+                            )}
+                            <ExpandMoreIcon sx={{ ml: visibility.contextLabel ? 0.5 : 0 }} />
+                        </Button>
+                    </span>
+                </Tooltip>
+            </Box>
+
+            <Menu
+                anchorEl={contextMenuAnchor}
+                open={Boolean(contextMenuAnchor)}
+                onClose={() => setContextMenuAnchor(null)}
+            >
+                {getContextItems().map(item => (
+                    <MenuItem 
+                        key={item.id} 
+                        onClick={() => handleContextSelect(item.id as BaseContext)}
+                        disabled={isDisabled}
+                    >
+                        <ListItemIcon>
+                            <item.icon />
+                        </ListItemIcon>
+                        <ListItemText primary={item.label} />
+                    </MenuItem>
+                ))}
+            </Menu>
         </NavigationRoot>
     );
 }; 

src/components/navigation/GraphSidebar.tsx

@@ -1,225 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import {
-    Box, IconButton, CircularProgress, Tooltip, Collapse,
-} from '@mui/material';
-import {
-    ChevronLeft, ChevronRight,
-    ExpandMore, ChevronRight as ChevronRightIcon,
-    Home as HomeIcon, CalendarToday, DateRange, Event,
-} from '@mui/icons-material';
-import { useNavigationStore } from '../../stores/navigationStore';
-import { useAuth } from '../../contexts/AuthContext';
-import { NeoGraphNode } from '../../types/navigation';
-import { logger } from '../../debugConfig';
-
-interface TreeNode extends NeoGraphNode {
-    has_children?: boolean;
-    children?: TreeNode[];
-}
-
-const NODE_ICONS: Record<string, React.ElementType> = {
-    User: HomeIcon,
-    CalendarYear: CalendarToday,
-    CalendarMonth: DateRange,
-    CalendarWeek: DateRange,
-    CalendarDay: Event,
-};
-
-const SIDEBAR_WIDTH = 220;
-
-interface TreeItemProps {
-    node: TreeNode;
-    depth: number;
-    onSelect: (node: TreeNode) => void;
-    onExpand: (node: TreeNode) => Promise<TreeNode[]>;
-    activeRoomId?: string;
-}
-
-function TreeItem({ node, depth, onSelect, onExpand, activeRoomId }: TreeItemProps) {
-    const [expanded, setExpanded] = useState(false);
-    const [children, setChildren] = useState<TreeNode[]>(node.children || []);
-    const [loading, setLoading] = useState(false);
-
-    const Icon = NODE_ICONS[node.node_type] || HomeIcon;
-    const canExpand = node.has_children !== false && node.node_type !== 'CalendarDay';
-
-    const handleToggle = async (e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (!expanded && children.length === 0 && canExpand) {
-            setLoading(true);
-            try {
-                const loaded = await onExpand(node);
-                setChildren(loaded);
-            } finally {
-                setLoading(false);
-            }
-        }
-        setExpanded(v => !v);
-    };
-
-    return (
-        <Box>
-            <Box
-                onClick={() => onSelect(node)}
-                sx={{
-                    display: 'flex', alignItems: 'center',
-                    pl: depth * 1.5 + 0.5, pr: 0.5, py: 0.4,
-                    cursor: 'pointer', borderRadius: 1, mx: 0.5,
-                    fontSize: '0.78rem', minHeight: 28,
-                    bgcolor: 'transparent',
-                    '&:hover': { bgcolor: 'action.hover' },
-                }}
-            >
-                <Box sx={{ width: 18, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                    {canExpand && (
-                        loading
-                            ? <CircularProgress size={10} />
-                            : (
-                                <IconButton
-                                    size="small" sx={{ p: 0, color: 'text.secondary' }}
-                                    onClick={handleToggle}
-                                >
-                                    {expanded
-                                        ? <ExpandMore sx={{ fontSize: 14 }} />
-                                        : <ChevronRightIcon sx={{ fontSize: 14 }} />}
-                                </IconButton>
-                            )
-                    )}
-                </Box>
-                <Icon sx={{ fontSize: 14, mr: 0.75, flexShrink: 0, color: 'text.secondary' }} />
-                <Box sx={{
-                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                    flexGrow: 1, color: 'text.primary',
-                }}>
-                    {node.label}
-                </Box>
-            </Box>
-            {canExpand && (
-                <Collapse in={expanded} timeout="auto">
-                    {children.map(child => (
-                        <TreeItem
-                            key={child.neo4j_node_id}
-                            node={child}
-                            depth={depth + 1}
-                            onSelect={onSelect}
-                            onExpand={onExpand}
-                            activeRoomId={activeRoomId}
-                        />
-                    ))}
-                </Collapse>
-            )}
-        </Box>
-    );
-}
-
-interface GraphSidebarProps {
-    open: boolean;
-    onToggle: () => void;
-}
-
-export function GraphSidebar({ open, onToggle }: GraphSidebarProps) {
-    const { accessToken } = useAuth();
-    const { navigateToNeoNode, context } = useNavigationStore();
-    const [tree, setTree] = useState<TreeNode | null>(null);
-    const [loading, setLoading] = useState(false);
-
-    const apiBase = import.meta.env.VITE_API_BASE as string;
-
-    const fetchTree = useCallback(async () => {
-        if (!accessToken) return;
-        setLoading(true);
-        try {
-            const res = await fetch(`${apiBase}/graph/tree`, {
-                headers: { Authorization: `Bearer ${accessToken}` },
-            });
-            if (!res.ok) throw new Error(`Graph tree fetch failed: ${res.status}`);
-            const data = await res.json();
-            setTree(data.tree);
-        } catch (err) {
-            logger.error('graph-sidebar', 'Failed to load graph tree', err);
-        } finally {
-            setLoading(false);
-        }
-    }, [accessToken, apiBase]);
-
-    useEffect(() => {
-        if (open && !tree && accessToken) fetchTree();
-    }, [open, tree, accessToken, fetchTree]);
-
-    const handleExpand = useCallback(async (node: TreeNode): Promise<TreeNode[]> => {
-        if (!accessToken) return [];
-        const params = new URLSearchParams({
-            neo4j_node_id: node.neo4j_node_id,
-            neo4j_db_name: node.neo4j_db_name,
-            node_type: node.node_type,
-        });
-        try {
-            const res = await fetch(`${apiBase}/graph/node/children?${params}`, {
-                headers: { Authorization: `Bearer ${accessToken}` },
-            });
-            if (!res.ok) return [];
-            const data = await res.json();
-            return data.children || [];
-        } catch {
-            return [];
-        }
-    }, [accessToken, apiBase]);
-
-    return (
-        <Box sx={{ position: 'relative', height: '100%', display: 'flex', flexShrink: 0 }}>
-            <Box
-                sx={{
-                    width: open ? SIDEBAR_WIDTH : 0,
-                    overflow: 'hidden',
-                    transition: 'width 0.2s ease',
-                    bgcolor: 'background.paper',
-                    borderRight: 1,
-                    borderColor: 'divider',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                }}
-            >
-                <Box sx={{ overflowY: 'auto', flexGrow: 1, pt: 1 }}>
-                    {loading ? (
-                        <Box sx={{ display: 'flex', justifyContent: 'center', pt: 3 }}>
-                            <CircularProgress size={20} />
-                        </Box>
-                    ) : tree ? (
-                        <TreeItem
-                            node={tree}
-                            depth={0}
-                            onSelect={n => navigateToNeoNode(n)}
-                            onExpand={handleExpand}
-                            activeRoomId={context.node?.id}
-                        />
-                    ) : null}
-                </Box>
-            </Box>
-            <Tooltip title={open ? 'Collapse sidebar' : 'Expand sidebar'} placement="right">
-                <IconButton
-                    onClick={onToggle}
-                    size="small"
-                    sx={{
-                        position: 'absolute',
-                        right: -14,
-                        top: '50%',
-                        transform: 'translateY(-50%)',
-                        zIndex: 10,
-                        bgcolor: 'background.paper',
-                        border: 1,
-                        borderColor: 'divider',
-                        width: 22,
-                        height: 44,
-                        borderRadius: '0 4px 4px 0',
-                        '&:hover': { bgcolor: 'action.hover' },
-                    }}
-                >
-                    {open
-                        ? <ChevronLeft sx={{ fontSize: 14 }} />
-                        : <ChevronRight sx={{ fontSize: 14 }} />}
-                </IconButton>
-            </Tooltip>
-        </Box>
-    );
-}

src/contexts/AuthContext.tsx

@@ -33,11 +33,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [user, setUser] = useState<CCUser | null>(null);
   const [user_role, setUserRole] = useState<string | null>(null);
   const [accessToken, setAccessToken] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true); // true until INITIAL_SESSION fires
   const [error, setError] = useState<Error | null>(null);
 
-  const apiBase = import.meta.env.VITE_API_BASE as string;
-
   const persistSession = useCallback((session: Session | null) => {
     if (session) {
       storageService.set(StorageKeys.SUPABASE_SESSION, session);
@@ -71,47 +69,18 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     return { user: resolvedUser, role: resolvedRole };
   }, []);
 
-  const triggerUserInit = useCallback((token: string) => {
-    fetch(`${apiBase}/user/init`, {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${token}` },
-    })
-      .then(r => r.json())
-      .then(data => logger.debug('auth-context', '✅ User init', data))
-      .catch(err => logger.warn('auth-context', '⚠️ User init failed', { err }));
-  }, [apiBase]);
-
   useEffect(() => {
+    // Canonical Supabase auth pattern: rely solely on onAuthStateChange.
+    // INITIAL_SESSION fires immediately with the current session state,
+    // eliminating the race condition between loadInitialSession + onAuthStateChange.
     const { data: { subscription } } = supabase.auth.onAuthStateChange(
       async (event, session) => {
         logger.debug('auth-context', '🔄 Auth state change', { event, hasSession: !!session });
 
-        if (event === 'SIGNED_IN') {
+        switch (event) {
-          persistSession(session ?? null);
+          case 'INITIAL_SESSION':
-          if (session?.user) {
+          case 'SIGNED_IN':
-            try {
+          case 'TOKEN_REFRESHED': {
-              const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
-              setUser(resolvedUser);
-              setUserRole(role);
-              setAccessToken(session.access_token ?? null);
-              triggerUserInit(session.access_token);
-            } catch (buildError) {
-              logger.error('auth-context', '❌ Failed to build user from session', { event, error: buildError });
-              setUser(null);
-              setUserRole(null);
-              setAccessToken(null);
-              setError(buildError instanceof Error ? buildError : new Error('Failed to load user'));
-            }
-          } else {
-            setUser(null);
-            setUserRole(null);
-            setAccessToken(null);
-          }
-          setLoading(false);
-          return;
-        }
-
-        if (event === 'INITIAL_SESSION' || event === 'TOKEN_REFRESHED') {
             persistSession(session ?? null);
             if (session?.user) {
               try {
@@ -131,22 +100,26 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
               setUserRole(null);
               setAccessToken(null);
             }
+            // Always clear loading after the first auth event resolves
             setLoading(false);
-          return;
+            break;
           }
-
+          case 'SIGNED_OUT': {
-        if (event === 'SIGNED_OUT') {
             persistSession(null);
             setUser(null);
             setUserRole(null);
             setAccessToken(null);
             setLoading(false);
+            break;
+          }
+          default:
+            break;
         }
       }
     );
 
     return () => subscription.unsubscribe();
-  }, [buildUserFromSupabase, persistSession, triggerUserInit]);
+  }, [buildUserFromSupabase, persistSession]);
 
   const signIn = async (email: string, password: string) => {
     try {

src/contexts/NeoUserContext.tsx

@@ -3,6 +3,7 @@ import { useAuth } from './AuthContext';
 import { useUser } from './UserContext';
 import { logger } from '../debugConfig';
 import { CCUserNodeProps, CCCalendarNodeProps, CCUserTeacherTimetableNodeProps } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { DatabaseNameService } from '../services/graph/databaseNameService';
 import { CalendarStructure, WorkerStructure } from '../types/navigation';
 import { useNavigationStore } from '../stores/navigationStore';
 
@@ -130,7 +131,7 @@ const NeoUserContext = createContext<NeoUserContextType>({
 });
 
 export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const { user, accessToken } = useAuth();
+  const { user } = useAuth();
   const { profile, isInitialized: isUserInitialized } = useUser();
   const navigationStore = useNavigationStore();
   
@@ -214,9 +215,12 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
         setIsLoading(true);
         setError(null);
 
-        // Inject auth into navigation store so Supabase queries work
+        // Set database names
-        if (user?.id && accessToken) {
+        const userDb = profile.user_db_name || (user?.email ? 
-          navigationStore.setAuthInfo(accessToken, user.id);
+          DatabaseNameService.getStoredUserDatabase() || null : null);
+
+        if (!userDb) {
+          throw new Error('No user database name available');
         }
 
         // Initialize user node in profile context
@@ -232,7 +236,7 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
               main: 'profile',
               base: 'profile',
               extended: 'overview'
-            }, null, null),
+            }, userDb, profile.school_db_name),
             switchTimeout
           ]);
 
@@ -267,9 +271,9 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
           // Continue without user node - this is not critical for basic functionality
         }
 
-        // Set final state — userDbName signals auth availability for UI guards
+        // Set final state
-        setUserDbName(user?.id || null);
+        setUserDbName(userDb);
-        setWorkerDbName(null);
+        setWorkerDbName(profile.school_db_name);
         setIsInitialized(true);
         setIsLoading(false);
         initializationRef.current.isComplete = true;
@@ -290,13 +294,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
 
   // Calendar Navigation Functions
   const navigateToDay = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'calendar',
         extended: 'day'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -330,13 +334,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToWeek = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'calendar',
         extended: 'week'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -370,13 +374,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToMonth = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'calendar',
         extended: 'month'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -410,13 +414,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToYear = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'calendar',
         extended: 'year'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -451,13 +455,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
 
   // Worker Navigation Functions
   const navigateToTimetable = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'teaching',
         extended: 'timetable'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -488,13 +492,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToJournal = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'teaching',
         extended: 'journal'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -525,13 +529,13 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToPlanner = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'teaching',
         extended: 'planner'
-      }, null, null);
+      }, userDbName, workerDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -562,14 +566,14 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToClass = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'teaching',
         extended: 'classes'
-      }, null, null);
+      }, userDbName, workerDbName);
-      await navigationStore.navigate(id, '');
+      await navigationStore.navigate(id, userDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {
@@ -600,14 +604,14 @@ export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const navigateToLesson = async (id: string) => {
-    if (!user?.id) return;
+    if (!userDbName) return;
     setIsLoading(true);
     try {
       await navigationStore.switchContext({
         base: 'teaching',
         extended: 'lessons'
-      }, null, null);
+      }, userDbName, workerDbName);
-      await navigationStore.navigate(id, '');
+      await navigationStore.navigate(id, userDbName);
 
       const node = navigationStore.context.node;
       if (node?.data) {

src/pages/tldraw/CCDocumentIntelligence/CCBundleViewer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, CircularProgress, MenuItem, Select, Typography } from '@mui/material';
 import { SelectChangeEvent } from '@mui/material/Select';
-import { useAuth } from '../../../contexts/AuthContext';
+import { supabase } from '../../../supabaseClient';
 
 type Manifest = {
   bucket: string;
@@ -41,7 +41,6 @@ export const CCBundleViewer: React.FC<{
   currentPage?: number;
   combinedBundles?: Array<{ id: string }>;
 }> = ({ fileId, bundleId, currentPage, combinedBundles }) => {
-  const { accessToken } = useAuth();
   const [manifest, setManifest] = useState<Manifest | null>(null);
   const [combinedManifests, setCombinedManifests] = useState<Manifest[] | null>(null);
   const [mode, setMode] = useState<Mode>('markdown_full');
@@ -54,9 +53,9 @@ export const CCBundleViewer: React.FC<{
   const API_BASE_FALLBACK = 'http://127.0.0.1:8080';
 
   const proxyUrl = useCallback(async (bucket: string, relPath: string) => {
-    const token = accessToken || '';
+    const token = (await supabase.auth.getSession()).data.session?.access_token || '';
     return `${API_BASE}/database/files/proxy_signed?bucket=${encodeURIComponent(bucket)}&path=${encodeURIComponent(relPath)}&token=${encodeURIComponent(token)}`;
-  }, [API_BASE, accessToken]);
+  }, [API_BASE]);
 
   const replaceAllSafe = useCallback((s: string, search: string, replacement: string) => {
     if (!s || typeof s !== 'string') return s || '';
@@ -223,7 +222,7 @@ export const CCBundleViewer: React.FC<{
       setManifest(null);
       if (combinedBundles && combinedBundles.length > 0) {
         try {
-          const token = accessToken || '';
+          const token = (await supabase.auth.getSession()).data.session?.access_token || '';
           const ms: Manifest[] = [];
           for (const b of combinedBundles) {
             const res = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(b.id)}/manifest`, { headers: { Authorization: `Bearer ${token}` } });
@@ -240,7 +239,7 @@ export const CCBundleViewer: React.FC<{
       }
       if (!bundleId) return;
       try {
-        const token = accessToken || '';
+        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
         const res = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(bundleId)}/manifest`, { headers: { Authorization: `Bearer ${token}` } });
         if (!res.ok) throw new Error(await res.text());
         const rawManifest: Manifest = await res.json();
@@ -267,7 +266,7 @@ export const CCBundleViewer: React.FC<{
           let textParts: string[] = [];
           let jsonParts: string[] = [];
           for (const m of combinedManifests) {
-            const token = accessToken || '';
+            const token = (await supabase.auth.getSession()).data.session?.access_token || '';
             let rel: string | undefined;
             if (mode === 'markdown_full') rel = m.markdown_full || m.html_full || m.text_full || m.json_full;
             else if (mode === 'html_full') rel = m.html_full || m.markdown_full || m.text_full || m.json_full;
@@ -349,7 +348,7 @@ export const CCBundleViewer: React.FC<{
           relPath = rec?.path;
         }
         if (!relPath) { setContent(''); setLoading(false); return; }
-        const token = accessToken || '';
+        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
         const url = await proxyUrl(bucket, relPath);
         let res = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
         if (!res.ok) throw new Error(await res.text());

src/pages/tldraw/CCDocumentIntelligence/CCDoclingViewer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Box, CircularProgress, IconButton } from '@mui/material';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import { useAuth } from '../../../contexts/AuthContext';
+import { supabase } from '../../../supabaseClient';
 
 type Artefact = { id: string; type: string; rel_path: string; created_at: string };
 
@@ -43,7 +43,6 @@ export const CCDoclingViewer: React.FC<{
   hideToolbar?: boolean;
   sectionRange?: { start: number; end: number };
 }> = ({ fileId, currentPage, onPageChange, onExtractedText, onTotalPagesChange, hideToolbar, sectionRange }) => {
-  const { accessToken } = useAuth();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [images, setImages] = useState<Array<{ src: string; width?: number; height?: number }>>([]);
@@ -185,7 +184,7 @@ export const CCDoclingViewer: React.FC<{
         const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
         try {
           const mRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
-            headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+            headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
           });
           if (mRes.ok) {
             const m: PageImagesManifest = await mRes.json();
@@ -200,7 +199,7 @@ export const CCDoclingViewer: React.FC<{
 
         // Legacy: Load artefacts for file to find docling JSON artefacts
         const artefactsRes = await fetch(`${import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api')}/database/files/${encodeURIComponent(fileId)}/artefacts`, {
-          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+          headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
         });
         if (!artefactsRes.ok) throw new Error(await artefactsRes.text());
         const artefacts: Artefact[] = await artefactsRes.json();
@@ -217,7 +216,7 @@ export const CCDoclingViewer: React.FC<{
 
         // Download artefact JSON via backend (service-role) to avoid RLS issues
         const jsonRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(target.id)}/json`, {
-          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+          headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
         });
         if (!jsonRes.ok) throw new Error(await jsonRes.text());
         const doc: DoclingJson = await jsonRes.json();
@@ -268,7 +267,7 @@ export const CCDoclingViewer: React.FC<{
         setPageObjectUrl(cached);
         return;
       }
-      const token = accessToken || '';
+      const token = (await supabase.auth.getSession()).data.session?.access_token || '';
       let resp = await fetch(pageProxyUrl, { headers: { Authorization: `Bearer ${token}` } });
       if (!resp.ok && manifest) {
         // Fallback to thumbnail if the full image is not accessible yet
@@ -370,7 +369,6 @@ export const CCDoclingViewer: React.FC<{
 export default CCDoclingViewer;
 
 const ImageByProxy: React.FC<{ url: string; alt: string }> = ({ url, alt }) => {
-  const { accessToken } = useAuth();
   const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -378,7 +376,7 @@ const ImageByProxy: React.FC<{ url: string; alt: string }> = ({ url, alt }) => {
     let revoked: string | null = null;
     const load = async () => {
       try {
-        const token = accessToken || '';
+        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
         const resp = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
         if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
         const blob = await resp.blob();

src/pages/tldraw/CCDocumentIntelligence/CCDocumentIntelligence.tsx

@@ -6,7 +6,7 @@ import { SelectChangeEvent } from '@mui/material/Select';
 import { CCDoclingViewer } from './CCDoclingViewer.tsx';
 import CCEnhancedFilePanel from './CCEnhancedFilePanel.tsx';
 import CCBundleViewer from './CCBundleViewer.tsx';
-import { useAuth } from '../../../contexts/AuthContext';
+import { supabase } from '../../../supabaseClient';
 
 type CanonicalDoclingConfig = {
   pipeline: 'standard' | 'vlm' | 'asr';
@@ -46,7 +46,6 @@ export const CCDocumentIntelligence: React.FC = () => {
   const { fileId } = useParams<{ fileId: string }>();
 
   const validFileId = useMemo(() => fileId || '', [fileId]);
-  const { accessToken } = useAuth();
   const [page, setPage] = useState<number>(1);
   const [outlineOptions, setOutlineOptions] = useState<Array<{ id: string; title: string; start_page: number; end_page: number }>>([]);
   const [profile, setProfile] = useState<Profile>('default');
@@ -149,7 +148,7 @@ export const CCDocumentIntelligence: React.FC = () => {
     const loadBundles = async () => {
       if (!validFileId) return;
       const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
-      const token = accessToken || '';
+      const token = (await supabase.auth.getSession()).data.session?.access_token || '';
       const res = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts`, { headers: { Authorization: `Bearer ${token}` } });
       if (!res.ok) return;
       const arts: Artefact[] = await res.json();
@@ -226,14 +225,14 @@ export const CCDocumentIntelligence: React.FC = () => {
       const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
       try {
         const artsRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts`, {
-          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+          headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
         });
         if (!artsRes.ok) return;
         const arts: Array<{ id: string; type: string; rel_path?: string }> = await artsRes.json();
         const outlineArt = arts.find(a => a.type === 'document_outline_hierarchy');
         if (!outlineArt) return;
         const jsonRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts/${encodeURIComponent(outlineArt.id)}/json`, {
-          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+          headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
         });
         if (!jsonRes.ok) return;
         const doc = await jsonRes.json();
@@ -243,7 +242,7 @@ export const CCDocumentIntelligence: React.FC = () => {
         const splitArt = arts.find(a => a.type === 'split_map_json');
         if (splitArt) {
           const smRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(validFileId)}/artefacts/${encodeURIComponent(splitArt.id)}/json`, {
-            headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+            headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
           });
           if (smRes.ok) {
             const sm = await smRes.json();
@@ -487,7 +486,7 @@ export const CCDocumentIntelligence: React.FC = () => {
             try {
               setBusy(true);
               const API_BASE = import.meta.env.VITE_API_BASE || (location.port.startsWith('517') ? 'http://127.0.0.1:8080' : '/api');
-              const token = accessToken || '';
+              const token = (await supabase.auth.getSession()).data.session?.access_token || '';
               const body: CanonicalDoclingRequest = {
                 use_split_map: selectedSectionId === 'full' ? autoSplit : false,
                 config: {

src/pages/tldraw/CCDocumentIntelligence/CCEnhancedFilePanel.tsx

@@ -11,8 +11,7 @@ import Schedule from '@mui/icons-material/Schedule';
 import Visibility from '@mui/icons-material/Visibility';
 import Psychology from '@mui/icons-material/Psychology';
 import Overview from '@mui/icons-material/Home';
-import CalendarViewMonth from '@mui/icons-material/CalendarViewMonth';
+import { supabase } from '../../../supabaseClient';
-import { useAuth } from '../../../contexts/AuthContext';
 
 // Types
 type PageImagesManifest = {
@@ -67,7 +66,6 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
   fileId, selectedPage, onSelectPage, currentSection 
 }) => {
   // State
-  const { accessToken } = useAuth();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [manifest, setManifest] = useState<PageImagesManifest | null>(null);
@@ -96,7 +94,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
       setError(null);
       
       try {
-        const token = accessToken || '';
+        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
         
         // Load page images manifest
         const manifestRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
@@ -200,7 +198,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
     
     try {
       const url = `${API_BASE}/database/files/proxy?bucket=${encodeURIComponent(manifest.bucket || '')}&path=${encodeURIComponent(pageInfo.thumbnail_path)}`;
-      const token = accessToken || '';
+      const token = (await supabase.auth.getSession()).data.session?.access_token || '';
       const response = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
       
       if (!response.ok) return undefined;

src/pages/tldraw/CCDocumentIntelligence/CCFileDetailPanel.tsx

@@ -5,7 +5,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
-import { useAuth } from '../../../contexts/AuthContext';
+import { supabase } from '../../../supabaseClient';
 
 type PageImagesManifest = {
   version: number;
@@ -54,7 +54,6 @@ export const CCFileDetailPanel: React.FC<{
   selectedPage: number;
   onSelectPage: (p: number) => void;
 }> = ({ fileId, selectedPage, onSelectPage }) => {
-  const { accessToken } = useAuth();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [manifest, setManifest] = useState<PageImagesManifest | null>(null);
@@ -74,7 +73,7 @@ export const CCFileDetailPanel: React.FC<{
       setError(null);
       try {
         const mRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
-          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+          headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
         });
         if (!mRes.ok) throw new Error(await mRes.text());
         const m: PageImagesManifest = await mRes.json();
@@ -83,14 +82,14 @@ export const CCFileDetailPanel: React.FC<{
         // Try to load outline structure artefact (for grouping only)
         try {
           const artsRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts`, {
-            headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+            headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
           });
           if (artsRes.ok) {
             const arts: Array<{ id: string; type: string }> = await artsRes.json();
             const outlineArt = arts.find(a => a.type === 'document_outline_hierarchy');
             if (outlineArt) {
               const jsonRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/artefacts/${encodeURIComponent(outlineArt.id)}/json`, {
-                headers: { 'Authorization': `Bearer ${accessToken || ''}` }
+                headers: { 'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
               });
               if (jsonRes.ok) {
                 const outJson = await jsonRes.json();
@@ -119,7 +118,7 @@ export const CCFileDetailPanel: React.FC<{
     const pg = manifest.page_images[idx];
     if (!pg) return undefined;
     const url = `${API_BASE}/database/files/proxy?bucket=${encodeURIComponent(manifest.bucket || '')}&path=${encodeURIComponent(pg.thumbnail_path)}`;
-    const token = accessToken || '';
+    const token = (await supabase.auth.getSession()).data.session?.access_token || '';
     const resp = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
     if (!resp.ok) return undefined;
     const blob = await resp.blob();
@@ -151,7 +150,7 @@ export const CCFileDetailPanel: React.FC<{
         <IconButton size="small" onClick={async () => {
           try {
             setShowAdmin(true);
-            const token = accessToken || '';
+            const token = (await supabase.auth.getSession()).data.session?.access_token || '';
             const res = await fetch(`${API_BASE}/queue/queue/tasks/by-file/${encodeURIComponent(fileId)}`, { headers: { Authorization: `Bearer ${token}` } });
             const data = await res.json();
             setAdminData(data);

src/pages/tldraw/singlePlayerPage.tsx

@@ -10,11 +10,11 @@ import {
     TLStoreWithStatus
 } from '@tldraw/tldraw';
 import { useTLDraw } from '../../contexts/TLDrawContext';
-import { useAuth } from '../../contexts/AuthContext';
 import { useUser } from '../../contexts/UserContext';
 // Tldraw services
 import { localStoreService } from '../../services/tldraw/localStoreService';
 import { PresentationService } from '../../services/tldraw/presentationService';
+import { UserNeoDBService } from '../../services/graph/userNeoDBService';
 import { NodeCanvasService } from '../../services/tldraw/nodeCanvasService';
 import { NavigationSnapshotService } from '../../services/tldraw/snapshotService';
 // Tldraw utils
@@ -46,8 +46,6 @@ interface LoadingState {
 export default function SinglePlayerPage() {
     // Context hooks with initialization states
     const { profile: user, loading: userLoading } = useUser();
-    const { accessToken } = useAuth();
-    const { context, setAuthInfo, switchContext } = useNavigationStore();
     const { 
         tldrawPreferences, 
         initializePreferences,
@@ -57,6 +55,8 @@ export default function SinglePlayerPage() {
     const routerNavigate = useNavigate();
     const location = useLocation();
 
+    // Navigation store
+    const { context } = useNavigationStore();
 
     // Refs
     const editorRef = useRef<Editor | null>(null);
@@ -114,7 +114,6 @@ export default function SinglePlayerPage() {
 
                 // 2. Initialize snapshot service
                 const snapshotService = new NavigationSnapshotService(newStore, editorRef.current || undefined);
-                if (accessToken) snapshotService.setAccessToken(accessToken);
                 snapshotServiceRef.current = snapshotService;
                 logger.debug('single-player-page', '✨ Initialized NavigationSnapshotService');
 
@@ -132,14 +131,12 @@ export default function SinglePlayerPage() {
 
                         await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
                             nodeStoragePath,
-                            accessToken || '',
+                            null,
                             newStore,
                             setLoadingState,
-                            undefined,
+                            undefined, // sharedStore
-                            editorRef.current || undefined
+                            editorRef.current || undefined // editor
                         );
-                        // Wire auto-save: set the current path on the service instance
-                        snapshotService.setCurrentNodePath(nodeStoragePath);
                         logger.debug('single-player-page', '✅ Snapshot loaded from database');
                     } else {
                         logger.debug('single-player-page', '⚠️ No node_storage_path found in node, skipping snapshot load', {
@@ -155,7 +152,7 @@ export default function SinglePlayerPage() {
                 let isAutoSaving = false;
                 
                 newStore.listen(() => {
-                    if (snapshotServiceRef.current && snapshotServiceRef.current.getCurrentNodePath()) {
+                    if (snapshotServiceRef.current && context.node && snapshotServiceRef.current.getCurrentNodePath()) {
                         // Skip if already saving
                         if (isAutoSaving) {
                             logger.debug('single-player-page', '⚠️ Skipping auto-save - already saving');
@@ -181,6 +178,8 @@ export default function SinglePlayerPage() {
                                 isAutoSaving = false;
                             }
                         }, 2000); // Increased to 2 seconds debounce
+                    } else if (snapshotServiceRef.current && context.node && !snapshotServiceRef.current.getCurrentNodePath()) {
+                        logger.debug('single-player-page', '⚠️ Skipping auto-save - no current node path set yet');
                     }
                 });
 
@@ -255,14 +254,9 @@ export default function SinglePlayerPage() {
             try {
                 setLoadingState({ status: 'loading', error: '' });
                 
-                if (context.node.type !== 'workspace') {
+                // Center the node
-                    try {
                 const nodeData = await loadNodeData(context.node);
                 await NodeCanvasService.centerCurrentNode(editorRef.current, context.node, nodeData);
-                    } catch (shapeErr) {
-                        logger.warn('single-player-page', '⚠️ Could not place node shape', { type: context.node.type, error: shapeErr });
-                    }
-                }
                 
                 setIsInitialLoad(false);
                 setLoadingState({ status: 'ready', error: '' });
@@ -303,17 +297,12 @@ export default function SinglePlayerPage() {
                     ? context.history.nodes[context.history.currentIndex - 1] 
                     : null;
 
-                // Handle navigation in snapshot service (load/save snapshot)
+                // Handle navigation in snapshot service
                 await snapshotService.handleNavigationStart(previousNode, currentNode);
 
-                if (currentNode.type !== 'workspace') {
+                // Center the node on canvas
-                    try {
                 const nodeData = await loadNodeData(currentNode);
                 await NodeCanvasService.centerCurrentNode(editor, currentNode, nodeData);
-                    } catch (shapeErr) {
-                        logger.warn('single-player-page', '⚠️ Could not place node shape', { type: currentNode.type, error: shapeErr });
-                    }
-                }
 
                 setLoadingState({ status: 'ready', error: '' });
             } catch (error) {
@@ -326,17 +315,7 @@ export default function SinglePlayerPage() {
         };
 
         handleNodeChange();
-    }, [context.node, context.history, store]);
+    }, [context.node, context.history, store, isInitialLoad]);
-
-    // Inject auth and trigger initial context when token is ready
-    useEffect(() => {
-        if (user?.id && accessToken) {
-            setAuthInfo(accessToken, user.id);
-            if (!context.node) {
-                switchContext({ main: 'profile', base: 'profile' }, null, null);
-            }
-        }
-    }, [user?.id, accessToken]);
 
     // Initialize preferences when user is available
     useEffect(() => {
@@ -483,6 +462,9 @@ export default function SinglePlayerPage() {
             position: 'fixed',
             inset: 0,
             top: `${HEADER_HEIGHT}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
         }}>
             {/* Loading overlay - show when loading or contexts not initialized */}
             {(loadingState.status === 'loading' || !store) && (
@@ -545,7 +527,6 @@ export default function SinglePlayerPage() {
                         // Update snapshot service with editor reference
                         if (snapshotServiceRef.current) {
                             snapshotServiceRef.current.setEditor(editor);
-                            if (accessToken) snapshotServiceRef.current.setAccessToken(accessToken);
                         }
                         
                         setIsEditorReady(true);
@@ -584,21 +565,68 @@ const getNodeStoragePath = (node: NavigationNode): string | null => {
 };
 
 const loadNodeData = async (node: NavigationNode): Promise<NodeData> => {
-    if (!node?.id) throw new Error('Node parameter is required');
+    // Validate the node parameter
-    const nodeStoragePath = getNodeStoragePath(node);
+    if (!node) {
-    if (!nodeStoragePath) throw new Error(`Node ${node.id} is missing node_storage_path`);
+        throw new Error('Node parameter is required');
+    }
     
+    if (!node.id) {
+        throw new Error('Node must have an ID');
+    }
+    
+    const nodeStoragePath = getNodeStoragePath(node);
+    if (!nodeStoragePath) {
+        throw new Error(`Node ${node.id} is missing node_storage_path`);
+    }
+    
+    logger.debug('single-player-page', '🔄 Loading node data', {
+        nodeId: node.id,
+        nodeType: node.type,
+        nodeLabel: node.label,
+        nodeStoragePath: nodeStoragePath
+    });
+
+    try {
+        // 1. Always fetch fresh data
+        // Create a temporary node object with the correct structure for the service
+        const normalizedNode = {
+            ...node,
+            node_storage_path: nodeStoragePath
+        };
+        
+        const dbName = UserNeoDBService.getNodeDatabaseName(normalizedNode);
+        const fetchedData = await UserNeoDBService.fetchNodeData(node.id, dbName);
+        
+        if (!fetchedData?.node_data) {
+            throw new Error('Failed to fetch node data');
+        }
+
+        // 2. Process the data into the correct shape
         const theme = getThemeFromLabel(node.type);
         return {
-        title: node.label || node.type || '',
+            ...fetchedData.node_data,
+            title: String(fetchedData.node_data.title || node.label || ''),
             w: 500,
             h: 350,
-        state: { parentId: null, isPageChild: true, hasChildren: null, bindings: null },
+            state: {
+                parentId: null,
+                isPageChild: true,
+                hasChildren: null,
+                bindings: null
+            },
             headerColor: theme.headerColor,
             backgroundColor: theme.backgroundColor,
             isLocked: false,
             __primarylabel__: node.type,
             uuid_string: node.id,
-        node_storage_path: nodeStoragePath,
+            node_storage_path: nodeStoragePath
         };
+    } catch (error) {
+        logger.error('single-player-page', '❌ Error in loadNodeData', {
+            nodeId: node.id,
+            nodeType: node.type,
+            error: error instanceof Error ? error.message : String(error)
+        });
+        throw error;
+    }
 };

src/services/tldraw/snapshotService.ts

@@ -1,52 +1,27 @@
 // External imports
 import { TLStore, getSnapshot, Editor, loadSnapshot } from '@tldraw/tldraw';
+import axios from '../../axiosConfig';
 import logger from '../../debugConfig';
 import { SharedStoreService } from './sharedStoreService';
+import { StorageKeys, storageService } from '../auth/localStorageService';
+import { NavigationNode } from '../../types/navigation';
 
 export interface LoadingState {
     status: 'loading' | 'ready' | 'error';
     error: string;
 }
 
-const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL as string;
+const EMPTY_NODE: NavigationNode = {
-const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
+    id: '',
-const BUCKET = 'cc.users';
+    node_storage_path: '',
-
+    type: '',
-async function storageGet(path: string, accessToken: string): Promise<unknown | null> {
+    label: ''
-    const url = `${SUPABASE_URL}/storage/v1/object/authenticated/${BUCKET}/${path}`;
+};
-    const res = await fetch(url, {
-        headers: {
-            Authorization: `Bearer ${accessToken}`,
-            apikey: SUPABASE_ANON_KEY,
-        },
-    });
-    if (res.status === 404 || res.status === 400) return null;
-    if (!res.ok) throw new Error(`Storage GET ${res.status}: ${await res.text()}`);
-    return res.json();
-}
-
-async function storagePut(path: string, accessToken: string, data: unknown): Promise<void> {
-    const url = `${SUPABASE_URL}/storage/v1/object/${BUCKET}/${path}`;
-    const headers = {
-        Authorization: `Bearer ${accessToken}`,
-        apikey: SUPABASE_ANON_KEY,
-        'Content-Type': 'application/json',
-    };
-    const body = JSON.stringify(data);
-    // PUT replaces an existing object; POST creates a new one.
-    // Avoids x-upsert custom header which self-hosted Supabase CORS may block.
-    let res = await fetch(url, { method: 'PUT', headers, body });
-    if (!res.ok && (res.status === 404 || res.status === 400)) {
-        res = await fetch(url, { method: 'POST', headers, body });
-    }
-    if (!res.ok) throw new Error(`Storage ${res.status}: ${await res.text()}`);
-}
 
 export class NavigationSnapshotService {
     private store: TLStore;
     private editor: Editor | null = null;
     private currentNodePath: string | null = null;
-    private _accessToken: string | null = null;
     private isAutoSaveEnabled = true;
     private isSaving = false;
     private isLoading = false;
@@ -58,21 +33,24 @@ export class NavigationSnapshotService {
         this.editor = editor || null;
         logger.debug('snapshot-service', '🔄 Initialized NavigationSnapshotService', {
             storeId: store.id,
-            hasEditor: !!editor,
+            hasEditor: !!editor
         });
     }
 
     setEditor(editor: Editor): void {
         this.editor = editor;
+        logger.debug('snapshot-service', '🔄 Editor reference updated', {
+            editorId: editor.store.id
+        });
     }
 
-    setAccessToken(token: string): void {
+    private static replaceBackslashes(input: string | undefined): string {
-        this._accessToken = token;
+        return input ? input.replace(/\\/g, '/') : '';
     }
 
     static async loadNodeSnapshotFromDatabase(
         nodePath: string,
-        accessToken: string,
+        dbName: string,
         store: TLStore,
         setLoadingState: (state: LoadingState) => void,
         sharedStore?: SharedStoreService,
@@ -80,102 +58,252 @@ export class NavigationSnapshotService {
     ): Promise<void> {
         try {
             setLoadingState({ status: 'loading', error: '' });
-            logger.info('snapshot-service', '📂 Loading snapshot from Storage', { path: nodePath });
 
-            const snapshot = await storageGet(nodePath, accessToken);
+            logger.info('snapshot-service', '📂 Loading file from path', { 
+                path: nodePath,
+                db_name: dbName
+            });
 
-            if (!snapshot) {
+            const response = await axios.get(
-                logger.debug('snapshot-service', 'ℹ️ No snapshot found at path — clearing canvas', { nodePath });
+                '/database/tldraw_supabase/get_tldraw_node_file', {
-                // Clear all shapes so the canvas is blank for this new node
+                    params: {
-                if (editor) {
+                        path: this.replaceBackslashes(nodePath),
-                    const shapeIds = [...editor.getCurrentPageShapeIds()];
+                        db_name: dbName
-                    if (shapeIds.length > 0) {
-                        editor.deleteShapes(shapeIds);
                     }
                 }
-                setLoadingState({ status: 'ready', error: '' });
+            );
-                return;
-            }
 
-            const snap = snapshot as { document?: unknown; session?: unknown; schemaVersion?: unknown };
+            const snapshot = response.data;
-            if (!snap.document || !snap.session) {
+            logger.debug('snapshot-service', '🔍 Snapshot data received', {
-                logger.warn('snapshot-service', '⚠️ Invalid snapshot format at path', { nodePath });
+                hasSnapshot: !!snapshot,
-                setLoadingState({ status: 'ready', error: '' });
+                hasDocument: !!snapshot?.document,
-                return;
+                hasSession: !!snapshot?.session,
-            }
+                hasSchemaVersion: !!snapshot?.schemaVersion,
+                schemaVersion: snapshot?.schemaVersion,
+                snapshotKeys: snapshot ? Object.keys(snapshot) : []
+            });
+            
+            if (snapshot && snapshot.document && snapshot.session) {
+                logger.debug('snapshot-service', '📥 Snapshot loaded successfully');
                 
                 if (sharedStore) {
                     await sharedStore.loadSnapshot(snapshot, setLoadingState);
-                return;
+                } else {
-            }
+                    logger.debug('snapshot-service', '🔄 Calling TLDraw loadSnapshot', {
+                        hasStore: !!store,
+                        snapshotType: typeof snapshot,
+                        snapshotKeys: Object.keys(snapshot),
+                        snapshotSchemaVersion: snapshot?.schemaVersion,
+                        snapshotDocument: !!snapshot?.document,
+                        snapshotSession: !!snapshot?.session
+                    });
                     
+                    // Create a defensive copy to ensure the snapshot doesn't get modified
                     const snapshotCopy = {
-                schemaVersion: snap.schemaVersion || (snap.document as { schema?: { schemaVersion?: unknown } })?.schema?.schemaVersion,
+                        schemaVersion: snapshot.schemaVersion || snapshot.document?.schema?.schemaVersion,
-                document: snap.document,
+                        document: snapshot.document,
-                session: snap.session,
+                        session: snapshot.session
                     };
                     
-            try {
+                    logger.debug('snapshot-service', '🔄 Calling loadSnapshot with defensive copy', {
-                if (editor) {
+                        copySchemaVersion: snapshotCopy.schemaVersion,
-                    loadSnapshot(editor.store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                        copyDocument: !!snapshotCopy.document,
-                } else {
+                        copySession: !!snapshotCopy.session,
-                    loadSnapshot(store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                        storeType: typeof store,
+                        storeIsNull: store === null,
+                        storeIsUndefined: store === undefined,
+                        storeKeys: store ? Object.keys(store) : 'N/A'
+                    });
+                    
+                    // Debug: Log the snapshot schema sequences
+                    if (snapshotCopy.document?.schema?.sequences) {
+                        logger.debug('snapshot-service', '🔍 Snapshot schema sequences:', snapshotCopy.document.schema.sequences);
+                        const customSequences = Object.keys(snapshotCopy.document.schema.sequences).filter(key => key.includes('cc-'));
+                        logger.debug('snapshot-service', '🔍 Custom shape sequences in snapshot:', customSequences);
                     }
+                    
+                    // Debug: Log the store schema sequences
+                    if (store?.schema) {
+                        const storeSequences = store.schema.serialize().sequences;
+                        logger.debug('snapshot-service', '🔍 Store schema sequences:', storeSequences);
+                        const storeCustomSequences = Object.keys(storeSequences).filter(key => key.includes('cc-'));
+                        logger.debug('snapshot-service', '🔍 Custom shape sequences in store:', storeCustomSequences);
+                    }
+                    
+                    // Add try-catch around the loadSnapshot call to get more specific error info
+                    try {
+                        // Ensure store is properly initialized before loading snapshot
+                        if (!store) {
+                            throw new Error('Store is null or undefined');
+                        }
+                        
+                        // Validate snapshot structure before loading
+                        if (!snapshotCopy || !snapshotCopy.document || !snapshotCopy.session) {
+                            throw new Error('Invalid snapshot structure');
+                        }
+                        
+                        // Check for schema migrations and handle them properly
+                        logger.debug('snapshot-service', '🔄 Checking for schema migrations', {
+                            storeId: store.id,
+                            storeType: typeof store,
+                            storeConstructor: store.constructor.name,
+                            snapshotSchemaVersion: snapshotCopy.schemaVersion,
+                            snapshotDocumentKeys: Object.keys(snapshotCopy.document || {}),
+                            snapshotSessionKeys: Object.keys(snapshotCopy.session || {})
+                        });
+
+                        try {
+                            // Try to load the snapshot directly first
+                            logger.debug('snapshot-service', '🔄 Attempting to load snapshot directly');
+                            if (editor) {
+                                loadSnapshot(editor.store, snapshotCopy);
                                 logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
-            } catch (err) {
-                const msg = err instanceof Error ? err.message : String(err);
-                const isSchemaMigration = /migration|schema|Incompatible/i.test(msg);
-                if (isSchemaMigration) {
-                    logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', { error: msg });
                             } else {
-                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error', { error: msg });
+                                // Fallback: use global loadSnapshot if no editor available
+                                logger.debug('snapshot-service', '🔄 No editor available, using global loadSnapshot');
+                                loadSnapshot(store, snapshotCopy);
+                                logger.debug('snapshot-service', '✅ Snapshot loaded successfully via global loadSnapshot');
+                            }
+                        } catch (migrationError) {
+                            // Check if this is a schema migration error that we can safely ignore
+                            const errorMessage = migrationError instanceof Error ? migrationError.message : String(migrationError);
+                            const isSchemaMigrationError = errorMessage.includes('migration') || 
+                                                         errorMessage.includes('schema') || 
+                                                         errorMessage.includes('Incompatible');
+                            
+                            if (isSchemaMigrationError) {
+                                logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', {
+                                    error: errorMessage
+                                });
+                                // Continue with empty store - this is expected for some snapshots
+                            } else {
+                                logger.warn('snapshot-service', '⚠️ Unexpected load error', {
+                                    error: errorMessage
+                                });
                             }
                         }
                         
+                        logger.debug('snapshot-service', '✅ loadSnapshot call succeeded');
                         setLoadingState({ status: 'ready', error: '' });
+                    } catch (loadError) {
+                        logger.error('snapshot-service', '❌ loadSnapshot call failed', {
+                            error: loadError instanceof Error ? loadError.message : String(loadError),
+                            storeType: typeof store,
+                            storeHasLoadSnapshot: store && typeof store.loadSnapshot === 'function',
+                            snapshotType: typeof snapshotCopy,
+                            snapshotKeys: Object.keys(snapshotCopy)
+                        });
+                        throw loadError;
+                    }
+                    storageService.set(StorageKeys.NODE_FILE_PATH, nodePath);
+                }
+            } else {
+                logger.error('snapshot-service', '❌ Invalid snapshot format');
+                setLoadingState({ status: 'error', error: 'Invalid snapshot format' });  
+            }
         } catch (error) {
-            logger.error('snapshot-service', '❌ Failed to load snapshot', {
+            logger.error('snapshot-service', '❌ Failed to fetch snapshot', { 
-                error: error instanceof Error ? error.message : 'Unknown error',
+                error: error instanceof Error ? error.message : 'Unknown error'
             });
             setLoadingState({ 
                 status: 'error', 
-                error: error instanceof Error ? error.message : 'Failed to load snapshot',
+                error: error instanceof Error ? error.message : 'Failed to load file' 
             });
         }
     }
 
     static async saveNodeSnapshotToDatabase(
         nodePath: string,
-        accessToken: string,
+        dbName: string,
         store: TLStore
     ): Promise<void> {
         try {
-            logger.info('snapshot-service', '💾 Saving snapshot to Storage', { path: nodePath });
+            logger.info('snapshot-service', '💾 Saving snapshot to database', { 
+                path: nodePath,
+                db_name: dbName
+            });
+
             const snapshot = getSnapshot(store);
-            await storagePut(nodePath, accessToken, snapshot);
+            
+            // Debug: Log what we're saving
+            logger.debug('snapshot-service', '🔍 Snapshot being saved:', {
+                hasSnapshot: !!snapshot,
+                snapshotKeys: Object.keys(snapshot || {}),
+                schemaVersion: snapshot?.schemaVersion,
+                hasDocument: !!snapshot?.document,
+                hasSession: !!snapshot?.session
+            });
+            
+            // Debug: Log the schema sequences in the snapshot being saved
+            if (snapshot?.document?.schema?.sequences) {
+                logger.debug('snapshot-service', '🔍 Schema sequences being saved:', snapshot.document.schema.sequences);
+                const customSequences = Object.keys(snapshot.document.schema.sequences).filter(key => key.includes('cc-'));
+                logger.debug('snapshot-service', '🔍 Custom shape sequences being saved:', customSequences);
+            }
+            
+            const response = await axios.post(
+                '/database/tldraw_supabase/set_tldraw_node_file', 
+                snapshot,
+                {
+                    params: {
+                        path: this.replaceBackslashes(nodePath),
+                        db_name: dbName
+                    }
+                }
+            );
+
+            if (response.data.status === 'success') {
                 logger.debug('snapshot-service', '✅ Snapshot saved successfully');
+            } else {
+                throw new Error('Failed to save snapshot');
+            }
         } catch (error) {
             logger.error('snapshot-service', '❌ Failed to save snapshot', { 
-                error: error instanceof Error ? error.message : 'Unknown error',
+                error: error instanceof Error ? error.message : 'Unknown error'
             });
             throw error;
         }
     }
 
     private async saveCurrentSnapshot(nodePath: string): Promise<void> {
-        if (!this.currentNodePath || this.currentNodePath !== nodePath) return;
+        if (!this.currentNodePath || this.currentNodePath !== nodePath) {
-        if (!this._accessToken) {
+            logger.debug('snapshot-service', '⚠️ Skipping save - path mismatch', {
-            logger.debug('snapshot-service', '⚠️ No access token — snapshot save skipped');
+                currentPath: this.currentNodePath,
+                savePath: nodePath
+            });
             return;
         }
+
         try {
             this.isSaving = true;
-            await NavigationSnapshotService.saveNodeSnapshotToDatabase(nodePath, this._accessToken, this.store);
+            const user = storageService.get(StorageKeys.USER);
-            logger.debug('snapshot-service', '✅ Saved navigation snapshot', { nodePath });
+            if (!user) {
+                throw new Error('No user found');
+            }
+
+            const dbName = (user as (typeof user & { user_db_name?: string })).user_db_name ?? '';
+            if (!dbName) {
+                logger.debug('snapshot-service', '⚠️ No db name - snapshot save skipped (Phase B will migrate to Supabase Storage)');
+                return;
+            }
+
+            logger.debug('snapshot-service', '💾 Saving snapshot', {
+                nodePath,
+                dbName,
+                userType: user.user_type,
+                username: user.username
+            });
+
+            await NavigationSnapshotService.saveNodeSnapshotToDatabase(nodePath, dbName, this.store);
+            
+            logger.debug('snapshot-service', '✅ Saved navigation snapshot', { 
+                nodePath,
+                storeId: this.store.id
+            });
         } catch (error) {
             logger.error('snapshot-service', '❌ Failed to save navigation snapshot', {
                 error: error instanceof Error ? error.message : 'Unknown error',
-                nodePath,
+                nodePath
             });
             throw error;
         } finally {
@@ -183,77 +311,141 @@ export class NavigationSnapshotService {
         }
     }
 
-    private async loadSnapshotForNode(node: { node_storage_path: string }): Promise<void> {
+    private async loadSnapshotForNode(node: NavigationNode): Promise<void> {
-        if (!this._accessToken) {
-            logger.debug('snapshot-service', '⚠️ No access token — snapshot load skipped');
-            return;
-        }
         try {
             this.isLoading = true;
+            const user = storageService.get(StorageKeys.USER);
+            if (!user) {
+                throw new Error('No user found');
+            }
+
+            const dbName = (user as (typeof user & { user_db_name?: string })).user_db_name ?? '';
+            if (!dbName) {
+                logger.debug('snapshot-service', '⚠️ No db name - snapshot load skipped (Phase B will migrate to Supabase Storage)');
+                return;
+            }
+
+            logger.debug('snapshot-service', '📥 Loading snapshot', {
+                nodePath: node.node_storage_path,
+                dbName,
+                userType: user.user_type,
+                username: user.username
+            });
+
             await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
                 node.node_storage_path,
-                this._accessToken,
+                dbName,
                 this.store,
                 (state: LoadingState) => {
                     if (state.status === 'ready') {
                         this.currentNodePath = node.node_storage_path;
+                        logger.debug('snapshot-service', '✅ Snapshot loaded and path updated', {
+                            nodePath: node.node_storage_path,
+                            currentNodePath: this.currentNodePath
+                        });
+                    } else if (state.status === 'error') {
+                        logger.error('snapshot-service', '❌ Error in load callback', {
+                            error: state.error,
+                            nodePath: node.node_storage_path
+                        });
                     }
                 },
-                undefined,
+                undefined, // sharedStore
-                this.editor || undefined
+                this.editor || undefined  // editor - use stored editor or fallback to store.loadSnapshot
             );
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Failed to load navigation snapshot', {
+                error: error instanceof Error ? error.message : 'Unknown error',
+                nodePath: node.node_storage_path
+            });
+            throw error;
         } finally {
             this.isLoading = false;
         }
     }
 
-    async handleNavigationStart(fromNode: { node_storage_path: string } | null, toNode: { node_storage_path: string } | null): Promise<void> {
+    async handleNavigationStart(fromNode: NavigationNode | null, toNode: NavigationNode | null): Promise<void> {
-        if (!toNode) return;
+        if (!toNode) {
-        if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
+            logger.warn('snapshot-service', '⚠️ Cannot navigate to null node');
+            return;
+        }
+
+        // Clear any pending debounce
+        if (this.debounceTimeout) {
+            clearTimeout(this.debounceTimeout);
+        }
+
+        // Debounce the navigation operation
         return new Promise((resolve) => {
             this.debounceTimeout = setTimeout(async () => {
                 try {
-                    await this.executeNavigation(fromNode, toNode);
+                    await this.executeNavigation(fromNode || EMPTY_NODE, toNode);
                     resolve();
                 } catch (error) {
                     logger.error('snapshot-service', '❌ Navigation failed', error);
                     throw error;
                 }
-            }, 100);
+            }, 100); // 100ms debounce
         });
     }
 
-    private async executeNavigation(fromNode: { node_storage_path: string } | null, toNode: { node_storage_path: string }): Promise<void> {
+    private async executeNavigation(fromNode: NavigationNode, toNode: NavigationNode): Promise<void> {
+        try {
+            logger.debug('snapshot-service', '🔄 Starting navigation snapshot handling', {
+                from: fromNode.node_storage_path,
+                to: toNode.node_storage_path,
+                currentPath: this.currentNodePath
+            });
+
+            // If we're already in a navigation operation, queue this one
             if (this.isSaving || this.isLoading) {
                 this.pendingOperation = {
-                save: fromNode?.node_storage_path,
+                    save: fromNode.node_storage_path || undefined,
-                load: toNode.node_storage_path,
+                    load: toNode.node_storage_path
                 };
+                logger.debug('snapshot-service', '⏳ Queued navigation operation', this.pendingOperation);
                 return;
             }
 
+            // Clear the store before loading new snapshot
+            logger.debug('snapshot-service', '🔄 Clearing store');
             this.currentNodePath = null;
+            logger.debug('snapshot-service', '🧹 Cleared current node path');
 
+            // Load the new node's snapshot
             if (toNode.node_storage_path) {
                 await this.loadSnapshotForNode(toNode);
+                logger.debug('snapshot-service', '✅ Loaded new node snapshot', {
+                    nodePath: toNode.node_storage_path
+                });
             }
 
+            // Process any pending operations
             if (this.pendingOperation) {
-            const op = this.pendingOperation;
+                logger.debug('snapshot-service', '🔄 Processing pending operation', this.pendingOperation);
+                const operation = this.pendingOperation;
                 this.pendingOperation = null;
                 await this.handleNavigationStart(
-                op.save ? { node_storage_path: op.save } : null,
+                    operation.save ? { ...EMPTY_NODE, node_storage_path: operation.save } : null,
-                op.load ? { node_storage_path: op.load } : null
+                    operation.load ? { ...EMPTY_NODE, node_storage_path: operation.load } : null
                 );
+                logger.debug('snapshot-service', '✅ Completed pending operation');
+            }
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Error during navigation snapshot handling', {
+                error: error instanceof Error ? error.message : 'Unknown error',
+                fromPath: fromNode.node_storage_path,
+                toPath: toNode.node_storage_path
+            });
+            throw error;
         }
     }
 
     setAutoSave(enabled: boolean): void {
         this.isAutoSaveEnabled = enabled;
-    }
+        logger.debug('snapshot-service', '🔄 Auto-save setting changed', {
-
+            enabled
-    setCurrentNodePath(path: string): void {
+        });
-        this.currentNodePath = path;
     }
 
     getCurrentNodePath(): string | null {
@@ -263,11 +455,14 @@ export class NavigationSnapshotService {
     async forceSaveCurrentNode(): Promise<void> {
         if (this.currentNodePath) {
             await this.saveCurrentSnapshot(this.currentNodePath);
+        } else {
+            logger.warn('snapshot-service', '⚠️ Cannot save - no current node path set');
         }
     }
 
     clearCurrentNode(): void {
         this.currentNodePath = null;
         this.store.clear();
+        logger.debug('snapshot-service', '🧹 Cleared current node and store');
     }
 }

src/stores/navigationStore.ts

@@ -1,45 +1,32 @@
 import { create } from 'zustand';
+import { UserNeoDBService } from '../services/graph/userNeoDBService';
 import { logger } from '../debugConfig';
 import { isValidNodeType } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
 import { 
     NavigationStore, 
     NavigationNode,
-    NeoGraphNode,
     MainContext,
     BaseContext,
     NavigationContextState,
     isProfileContext,
     isInstituteContext,
+    getContextDatabase,
     addToHistory,
     navigateHistory,
     getCurrentHistoryNode,
     ExtendedContext,
     UnifiedContextSwitch,
+    NodeContext
 } from '../types/navigation';
 
-interface WhiteboardRoom {
-    id: string;
-    user_id: string;
-    name: string;
-    context_type: string;
-    is_default: boolean;
-    storage_path: string | null;
-    neo4j_node_id: string | null;
-    neo4j_db_name: string | null;
-    node_type: string | null;
-}
-
-interface NavigationStoreWithAuth extends NavigationStore {
-    _accessToken: string | null;
-    _userId: string | null;
-    setAuthInfo: (token: string | null, userId: string | null) => void;
-}
-
 const initialState: NavigationContextState = {
     main: 'profile',
     base: 'profile',
     node: null,
-    history: { nodes: [], currentIndex: -1 }
+    history: {
+        nodes: [],
+        currentIndex: -1
+    }
 };
 
 function getDefaultBaseForMain(main: MainContext): BaseContext {
@@ -51,140 +38,210 @@ function validateContextTransition(
     updates: Partial<NavigationContextState>
 ): NavigationContextState {
     const newState = { ...current, ...updates };
+
+    // Validate main context
     if (updates.main) {
         newState.base = getDefaultBaseForMain(updates.main);
     }
+
+    // Validate base context
     if (updates.base) {
+        // Ensure base context matches main context
         const isValid = newState.main === 'profile' 
             ? isProfileContext(updates.base)
             : isInstituteContext(updates.base);
+
         if (!isValid) {
             newState.base = getDefaultBaseForMain(newState.main);
         }
     }
+
     return newState;
 }
 
-export const useNavigationStore = create<NavigationStoreWithAuth>((set, get) => {
+export interface NavigationActions {
-    const pgFetch = async <T = unknown>(
+  // Context Navigation
-        method: 'GET' | 'POST' | 'PATCH' | 'DELETE',
+  setMainContext: (context: MainContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
-        table: string,
+  setBaseContext: (context: BaseContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
-        options: { body?: object; query?: string; prefer?: string; single?: boolean } = {}
+  setExtendedContext: (context: ExtendedContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
-    ): Promise<T | null> => {
-        const token = get()._accessToken;
-        if (!token) throw new Error('pgFetch: no access token');
-        const url = `${import.meta.env.VITE_SUPABASE_URL}/rest/v1/${table}${options.query ? `?${options.query}` : ''}`;
-        const headers: Record<string, string> = {
-            'Authorization': `Bearer ${token}`,
-            'apikey': import.meta.env.VITE_SUPABASE_ANON_KEY,
-            'Content-Type': 'application/json',
-        };
-        if (options.prefer) headers['Prefer'] = options.prefer;
-        if (options.single) headers['Accept'] = 'application/vnd.pgrst.object+json';
-        const res = await fetch(url, {
-            method,
-            headers,
-            ...(options.body ? { body: JSON.stringify(options.body) } : {}),
-        });
-        if (!res.ok) {
-            const err = await res.text();
-            throw new Error(`PostgREST ${res.status}: ${err}`);
-        }
-        if (res.status === 204) return null;
-        return res.json() as Promise<T>;
-    };
   
-    const getOrCreateDefaultRoom = async (contextType: string): Promise<NavigationNode> => {
+  // Node Navigation
-        const userId = get()._userId;
+  navigate: (nodeId: string, dbName: string) => Promise<void>;
-        if (!userId) throw new Error('getOrCreateDefaultRoom: no user ID');
+  navigateToNode: (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => Promise<void>;
   
-        const rooms = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
+  // History Navigation
-            query: `user_id=eq.${userId}&context_type=eq.${contextType}&is_default=eq.true`,
+  goBack: () => void;
-        });
+  goForward: () => void;
   
-        if (rooms && rooms.length > 0) {
+  // Utility Methods
-            const room = rooms[0];
+  refreshNavigationState: (userDbName: string | null, workerDbName: string | null) => Promise<void>;
-            return {
+}
-                id: room.id,
-                node_storage_path: room.storage_path || `${userId}/workspaces/${contextType}_default.json`,
-                label: room.name,
-                type: 'workspace',
-            };
-        }
 
-        const storagePath = `${userId}/workspaces/${contextType}_default.json`;
+export interface NavigationState {
-        const room = await pgFetch<WhiteboardRoom>('POST', 'whiteboard_rooms', {
+    context: {
-            body: {
+        main: NodeContext;
-                user_id: userId,
+        base: NodeContext;
-                name: `${contextType.charAt(0).toUpperCase() + contextType.slice(1)} Workspace`,
+        extended?: string;
-                context_type: contextType,
+        node: NavigationNode;
-                is_default: true,
+        history: {
-                storage_path: storagePath,
+            nodes: NavigationNode[];
-            },
+            currentIndex: number;
-            prefer: 'return=representation',
-            single: true,
-        });
-
-        if (!room) throw new Error('Failed to create default whiteboard room');
-        logger.debug('navigation-context', '✅ Created default whiteboard room', { contextType, roomId: room.id });
-
-        return {
-            id: room.id,
-            node_storage_path: room.storage_path || storagePath,
-            label: room.name,
-            type: 'workspace',
         };
     };
+    // ... rest of the state interface ...
+}
 
-    return {
+export const useNavigationStore = create<NavigationStore>((set, get) => ({
-        _accessToken: null,
-        _userId: null,
-        setAuthInfo: (token: string | null, userId: string | null) => {
-            set({ _accessToken: token, _userId: userId });
-        },
-
     context: initialState,
     isLoading: false,
     error: null,
 
-        switchContext: async (contextSwitch: UnifiedContextSwitch, _userDbName: string | null = null, _workerDbName: string | null = null) => {
+    switchContext: async (contextSwitch: UnifiedContextSwitch, userDbName: string | null, workerDbName: string | null) => {
-            if (!get()._accessToken || !get()._userId) {
+        try {
-                logger.warn('navigation-context', '⚠️ switchContext called without auth — skipping');
+            // Check if we have the necessary database connections
+            if (contextSwitch.main === 'profile' && !userDbName) {
+                logger.error('navigation-context', '❌ User database connection not initialized');
+                set({ 
+                    error: 'User database connection not initialized',
+                    isLoading: false 
+                });
+                return;
+            }
+            if (contextSwitch.main === 'institute' && !workerDbName) {
+                logger.error('navigation-context', '❌ Worker database connection not initialized');
+                set({ 
+                    error: 'Worker database connection not initialized',
+                    isLoading: false 
+                });
                 return;
             }
-            try {
-                set({ isLoading: true, error: null });
-                const currentState = get().context;
-                let newState: NavigationContextState = { ...currentState, node: null };
 
+            logger.debug('navigation-context', '🔄 Starting context switch', {
+                from: {
+                    main: get().context.main,
+                    base: get().context.base,
+                    extended: contextSwitch.extended,
+                    nodeId: get().context.node?.id
+                },
+                to: {
+                    main: contextSwitch.main,
+                    base: contextSwitch.base,
+                    extended: contextSwitch.extended
+                },
+                skipBaseContextLoad: contextSwitch.skipBaseContextLoad
+            });
+
+            set({ isLoading: true, error: null });
+            
+            const currentState = get().context;
+            
+            // Clear node state immediately
+            const clearedState: NavigationContextState = {
+                ...currentState,
+                node: null
+            };
+            set({
+                context: clearedState,
+                isLoading: true
+            });
+
+            let newState: NavigationContextState = { 
+                ...currentState,
+                node: null
+            };
+
+            // Update main context if provided
             if (contextSwitch.main) {
                 newState = validateContextTransition(newState, { main: contextSwitch.main });
                 if (!contextSwitch.skipBaseContextLoad) {
                     newState.base = getDefaultBaseForMain(contextSwitch.main);
                 }
+                logger.debug('navigation-state', '✅ Main context updated', {
+                    previous: currentState.main,
+                    new: newState.main,
+                    defaultBase: newState.base
+                });
             }
+
+            // Update base context if provided
             if (contextSwitch.base) {
                 newState = validateContextTransition(newState, { base: contextSwitch.base });
+                logger.debug('navigation-state', '✅ Base context updated', {
+                    previous: currentState.base,
+                    new: newState.base
+                });
             }
 
+            logger.debug('navigation-state', '✅ Context validation complete', {
+                validatedState: newState,
+                originalState: currentState
+            });
+
+            // Determine which context to use for the node
             const targetContext = contextSwitch.base || 
                                 contextSwitch.extended || 
-                    (contextSwitch.main ? getDefaultBaseForMain(contextSwitch.main) : newState.base);
+                                (contextSwitch.main ? getDefaultBaseForMain(contextSwitch.main) : 
+                                newState.base);
 
-                const defaultNode = await getOrCreateDefaultRoom(targetContext);
+            // Get database name
+            const dbName = getContextDatabase(newState, userDbName, workerDbName);
+
+            logger.debug('context-switch', '🔍 Fetching default node for context', {
+                targetContext,
+                dbName,
+                currentState: newState
+            });
+
+            // Get default node for the final context
+            const defaultNode = await UserNeoDBService.getDefaultNode(targetContext, dbName);
+            
+            if (!defaultNode) {
+                const errorMsg = `No default node found for context: ${targetContext}`;
+                logger.error('context-switch', '❌ Default node fetch failed', { targetContext });
+                set({ 
+                    error: errorMsg,
+                    isLoading: false 
+                });
+                return;
+            }
+
+            logger.debug('context-switch', '✨ Default node fetched', {
+                nodeId: defaultNode.id,
+                node_storage_path: defaultNode.node_storage_path,
+                type: defaultNode.type
+            });
+
+            // Update history and state
             const newHistory = addToHistory(currentState.history, defaultNode);
+            logger.debug('history-management', '📚 History updated', {
+                previousState: currentState.history,
+                newState: newHistory,
+                addedNode: defaultNode
+            });
 
             set({ 
-                    context: { ...newState, node: defaultNode, history: newHistory },
+                context: { 
+                    ...newState, 
+                    node: defaultNode,
+                    history: newHistory
+                },
                 isLoading: false,
-                    error: null,
+                error: null
             });
-                logger.debug('navigation-context', '✅ Context switch complete', {
+
-                    main: newState.main, base: newState.base, nodeId: defaultNode.id,
+            logger.debug('navigation-context', '✅ Context switch completed', {
+                finalState: {
+                    main: newState.main,
+                    base: newState.base,
+                    nodeId: defaultNode.id
+                }
             });
         } catch (error) {
-                logger.error('navigation-context', '❌ switchContext failed', error);
+            logger.error('navigation-context', '❌ Failed to switch context:', error);
-                set({ error: error instanceof Error ? error.message : 'Failed to switch context', isLoading: false });
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to switch context',
+                isLoading: false 
+            });
         }
     },
 
@@ -192,7 +249,14 @@ export const useNavigationStore = create<NavigationStoreWithAuth>((set, get) =>
         const currentState = get().context;
         if (currentState.history.currentIndex > 0) {
             const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex - 1);
-                set({ context: { ...currentState, node: getCurrentHistoryNode(newHistory), history: newHistory } });
+            const node = getCurrentHistoryNode(newHistory);
+            set({
+                context: {
+                    ...currentState,
+                    node,
+                    history: newHistory
+                }
+            });
         }
     },
 
@@ -200,139 +264,176 @@ export const useNavigationStore = create<NavigationStoreWithAuth>((set, get) =>
         const currentState = get().context;
         if (currentState.history.currentIndex < currentState.history.nodes.length - 1) {
             const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex + 1);
-                set({ context: { ...currentState, node: getCurrentHistoryNode(newHistory), history: newHistory } });
+            const node = getCurrentHistoryNode(newHistory);
+            set({
+                context: {
+                    ...currentState,
+                    node,
+                    history: newHistory
+                }
+            });
         }
     },
 
     setMainContext: async (main: MainContext, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Use switchContext instead of direct implementation
             await get().switchContext({ main }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to set main context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to set main context',
+                isLoading: false 
+            });
+        }
     },
 
     setBaseContext: async (base: BaseContext, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Use switchContext instead of direct implementation
             await get().switchContext({ base }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to set base context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to set base context',
+                isLoading: false 
+            });
+        }
     },
 
     setExtendedContext: async (extended: ExtendedContext, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Use switchContext instead of direct implementation
             await get().switchContext({ extended }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to set extended context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to set extended context',
+                isLoading: false 
+            });
+        }
     },
 
-        navigate: async (nodeId: string, _dbName: string) => {
+    navigate: async (nodeId: string, dbName: string) => {
         try {
             set({ isLoading: true, error: null });
-                if (!get()._accessToken) { set({ isLoading: false }); return; }
             
+            // Check if we already have this node in history
             const currentState = get().context;
-                const existingIndex = currentState.history.nodes.findIndex(n => n.id === nodeId);
+            const existingNodeIndex = currentState.history.nodes.findIndex(n => n.id === nodeId);
-                if (existingIndex !== -1) {
+            
-                    const newHistory = navigateHistory(currentState.history, existingIndex);
+            // If node exists in history, just navigate to it
-                    set({ context: { ...currentState, node: getCurrentHistoryNode(newHistory), history: newHistory }, isLoading: false });
+            if (existingNodeIndex !== -1) {
+                logger.debug('navigation', '📍 Navigating to existing node in history', {
+                    nodeId,
+                    historyIndex: existingNodeIndex,
+                    currentIndex: currentState.history.currentIndex
+                });
+                
+                const newHistory = navigateHistory(currentState.history, existingNodeIndex);
+                const node = getCurrentHistoryNode(newHistory);
+                
+                set({
+                    context: {
+                        ...currentState,
+                        node,
+                        history: newHistory
+                    },
+                    isLoading: false,
+                    error: null
+                });
                 return;
             }
 
-                const rooms = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
+            // Fetch new node data
-                    query: `id=eq.${nodeId}&user_id=eq.${get()._userId}`,
+            const nodeData = await UserNeoDBService.fetchNodeData(nodeId, dbName);
-                });
+            if (!nodeData) {
-                if (!rooms || rooms.length === 0) throw new Error(`Whiteboard room not found: ${nodeId}`);
+                throw new Error(`Node not found: ${nodeId}`);
+            }
 
-                const room = rooms[0];
             const node: NavigationNode = {
-                    id: room.id,
+                id: nodeId,
-                    node_storage_path: room.storage_path || `${get()._userId}/workspaces/${room.context_type}_default.json`,
+                node_storage_path: nodeData.node_data.node_storage_path || '',
-                    label: room.name,
+                label: nodeData.node_data.title || nodeData.node_data.user_name || nodeId,
-                    type: 'workspace',
+                type: nodeData.node_type
             };
+
+            logger.debug('navigation', '📍 Adding new node to history', {
+                nodeId: node.id,
+                type: node.type,
+                node_storage_path: node.node_storage_path
+            });
+
+            // Add to history and update state
             const newHistory = addToHistory(currentState.history, node);
-                set({ context: { ...currentState, node, history: newHistory }, isLoading: false });
+            set({
+                context: {
+                    ...currentState,
+                    node,
+                    history: newHistory
+                },
+                isLoading: false,
+                error: null
+            });
         } catch (error) {
-                logger.error('navigation', '❌ navigate failed', error);
+            logger.error('navigation', '❌ Failed to navigate:', error);
-                set({ error: error instanceof Error ? error.message : 'Failed to navigate', isLoading: false });
+            set({
+                error: error instanceof Error ? error.message : 'Failed to navigate',
+                isLoading: false
+            });
         }
     },
 
     navigateToNode: async (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => {
-            if (!isValidNodeType(node.type)) {
-                logger.warn('navigation', `⚠️ navigateToNode called with non-graph type: ${node.type} — navigating anyway`);
-            }
-            await get().navigate(node.id, userDbName || '');
-        },
-
-        refreshNavigationState: async (_userDbName: string | null, _workerDbName: string | null) => {
         try {
             set({ isLoading: true, error: null });
-                const currentNode = get().context.node;
+            
-                if (currentNode && get()._accessToken) {
+            if (!isValidNodeType(node.type)) {
-                    const rooms = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
+                throw new Error(`Invalid node type: ${node.type}`);
-                        query: `id=eq.${currentNode.id}`,
+            }
+
+            const dbName = getContextDatabase(get().context, userDbName, workerDbName);
+            await get().navigate(node.id, dbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to node:', error);
+            set({
+                error: error instanceof Error ? error.message : 'Failed to navigate to node',
+                isLoading: false
             });
-                    if (rooms && rooms.length > 0) {
+        }
-                        const room = rooms[0];
+    },
+
+    refreshNavigationState: async (userDbName: string | null, workerDbName: string | null) => {
+        try {
+            set({ isLoading: true, error: null });
+            const currentState = get().context;
+            
+            if (currentState.node) {
+                const dbName = getContextDatabase(currentState, userDbName, workerDbName);
+                const nodeData = await UserNeoDBService.fetchNodeData(currentState.node.id, dbName);
+                if (nodeData) {
+                    const node: NavigationNode = {
+                        id: currentState.node.id,
+                        node_storage_path: nodeData.node_data.node_storage_path || '',
+                        label: nodeData.node_data.title || nodeData.node_data.user_name || currentState.node.id,
+                        type: nodeData.node_type
+                    };
                     set({
                         context: {
-                                ...get().context,
+                            ...currentState,
-                                node: {
+                            node
-                                    id: room.id,
+                        }
-                                    node_storage_path: room.storage_path || currentNode.node_storage_path,
-                                    label: room.name,
-                                    type: 'workspace',
-                                },
-                            },
                     });
                 }
             }
+            
             set({ isLoading: false });
         } catch (error) {
-                logger.error('navigation', '❌ refreshNavigationState failed', error);
+            logger.error('navigation', '❌ Failed to refresh navigation state:', error);
-                set({ error: error instanceof Error ? error.message : 'Failed to refresh', isLoading: false });
+            set({
-            }
+                error: error instanceof Error ? error.message : 'Failed to refresh navigation state',
-        },
+                isLoading: false
-
-        navigateToNeoNode: async (neoNode: NeoGraphNode) => {
-            const userId = get()._userId;
-            if (!userId || !get()._accessToken) {
-                logger.warn('navigation', '⚠️ navigateToNeoNode called without auth');
-                return;
-            }
-            try {
-                set({ isLoading: true, error: null });
-                const existing = await pgFetch<WhiteboardRoom[]>('GET', 'whiteboard_rooms', {
-                    query: `user_id=eq.${userId}&neo4j_node_id=eq.${neoNode.neo4j_node_id}`,
             });
-                let room: WhiteboardRoom;
-                if (existing && existing.length > 0) {
-                    room = existing[0];
-                } else {
-                    const storagePath = `${userId}/nodes/${neoNode.neo4j_node_id}.json`;
-                    const created = await pgFetch<WhiteboardRoom>('POST', 'whiteboard_rooms', {
-                        body: {
-                            user_id: userId,
-                            name: neoNode.label,
-                            context_type: neoNode.node_type.toLowerCase(),
-                            is_default: false,
-                            storage_path: storagePath,
-                            neo4j_node_id: neoNode.neo4j_node_id,
-                            neo4j_db_name: neoNode.neo4j_db_name,
-                            node_type: neoNode.node_type,
-                        },
-                        prefer: 'return=representation',
-                        single: true,
-                    });
-                    if (!created) throw new Error('Failed to create whiteboard room for node');
-                    room = created;
         }
-                const node: NavigationNode = {
-                    id: room.id,
-                    node_storage_path: room.storage_path || `${userId}/nodes/${neoNode.neo4j_node_id}.json`,
-                    label: room.name,
-                    type: neoNode.node_type,
-                };
-                const currentState = get().context;
-                const newHistory = addToHistory(currentState.history, node);
-                set({ context: { ...currentState, node, history: newHistory }, isLoading: false, error: null });
-                logger.debug('navigation', '✅ Navigated to Neo4j node', { neoNode });
-            } catch (error) {
-                logger.error('navigation', '❌ navigateToNeoNode failed', error);
-                set({ error: error instanceof Error ? error.message : 'Navigation failed', isLoading: false });
     }
-        },
+})); 
-    };
-});

src/stores/transcriptionStore.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { supabase } from '../supabaseClient';
 
 export interface TranscriptionSegment {
   text: string;
@@ -167,37 +168,7 @@ interface TranscriptionState {
   clearKeywordMatches: () => void;
 }
 
-export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
+export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
-  // Direct PostgREST fetch — uses stored _accessToken, no GoTrueClient lock.
-  const pgFetch = async <T = any>(
-    method: 'GET' | 'POST' | 'PATCH' | 'DELETE',
-    table: string,
-    options: { body?: object; query?: string; prefer?: string; single?: boolean } = {}
-  ): Promise<T | null> => {
-    const token = get()._accessToken;
-    if (!token) throw new Error('pgFetch: no access token');
-    const url = `${import.meta.env.VITE_SUPABASE_URL}/rest/v1/${table}${options.query ? `?${options.query}` : ''}`;
-    const headers: Record<string, string> = {
-      'Authorization': `Bearer ${token}`,
-      'apikey': import.meta.env.VITE_SUPABASE_ANON_KEY,
-      'Content-Type': 'application/json',
-    };
-    if (options.prefer) headers['Prefer'] = options.prefer;
-    if (options.single) headers['Accept'] = 'application/vnd.pgrst.object+json';
-    const res = await fetch(url, {
-      method,
-      headers,
-      ...(options.body ? { body: JSON.stringify(options.body) } : {}),
-    });
-    if (!res.ok) {
-      const err = await res.text();
-      throw new Error(`PostgREST ${res.status}: ${err}`);
-    }
-    if (res.status === 204) return null;
-    return res.json() as Promise<T>;
-  };
-
-  return {
   isRecording: false,
   isConnecting: false,
   activeSession: null,
@@ -238,9 +209,10 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
   startSession: async (timetableTag?: TimetablePeriod) => {
     set({ isRecording: true, isConnecting: false, elapsedSeconds: 0, timetableContext: timetableTag || null });
 
+    // Create session in Supabase
     try {
-        const { _userId: userId } = get();
+      const { _accessToken: token, _userId: userId } = get();
-        if (!userId) {
+      if (!token || !userId) {
         console.error('No authenticated user');
         return;
       }
@@ -255,14 +227,14 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
         auto_tagged: !!timetableTag,
       };
 
-        const data = await pgFetch<TranscriptionSession>('POST', 'transcription_sessions', {
+      const { data, error } = await supabase
-          body: sessionData,
+        .from('transcription_sessions')
-          prefer: 'return=representation',
+        .insert(sessionData)
-          single: true,
+        .select()
-        });
+        .single();
 
-        if (!data) {
+      if (error) {
-          console.error('Failed to create session: no data returned');
+        console.error('Failed to create session:', error);
         return;
       }
 
@@ -283,16 +255,14 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
         const idx = newCompleted.length;
         newCompleted.push({ ...currentSegment, isFinal: true });
         if (activeSession) {
-            pgFetch('POST', 'transcription_segments', {
+          supabase.from('transcription_segments').insert({
-              body: {
             session_id: activeSession.id,
             sequence_index: idx,
             text: currentSegment.text,
             start_seconds: currentSegment.start,
             end_seconds: currentSegment.end,
             is_final: true,
-              },
+          }).then(({ error }) => { if (error) console.error('Failed to save live segment on stop:', error); });
-            }).catch(err => console.error('Failed to save live segment on stop:', err));
         }
       }
     }
@@ -304,14 +274,14 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
 
     if (activeSession) {
       try {
-          await pgFetch('PATCH', 'transcription_sessions', {
+        await supabase
-            query: `id=eq.${activeSession.id}`,
+          .from('transcription_sessions')
-            body: {
+          .update({
             ended_at: new Date().toISOString(),
             word_count: finalWordCount,
             segment_count: newCompleted.length,
-            },
+          })
-          });
+          .eq('id', activeSession.id);
       } catch (error) {
         console.error('Failed to end session:', error);
       }
@@ -369,16 +339,14 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
       const elapsed = get().elapsedSeconds;
       for (const { seg, idx } of toSave) {
         if (activeSession) {
-            pgFetch('POST', 'transcription_segments', {
+          supabase.from('transcription_segments').insert({
-              body: {
             session_id: activeSession.id,
             sequence_index: idx,
             text: seg.text,
             start_seconds: seg.start,
             end_seconds: seg.end,
             is_final: true,
-              },
+          }).then(({ error }) => { if (error) console.error('Failed to save segment:', error); });
-            }).catch(err => console.error('Failed to save segment:', err));
         }
         get().checkSegmentForKeywords(seg.text, elapsed);
       }
@@ -434,15 +402,13 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
 
       if (isNew && activeSession) {
         try {
-            await pgFetch('POST', 'transcription_segments', {
+          await supabase.from('transcription_segments').insert({
-              body: {
             session_id: activeSession.id,
             sequence_index: newCompleted.length - 1,
             text,
             start_seconds: metadata.start,
             end_seconds: metadata.end,
             is_final: true,
-              },
           });
         } catch (error) {
           console.error('Failed to save segment:', error);
@@ -459,16 +425,14 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
         );
         set({ completedSegments: autoCompleted, wordCount: autoWordCount });
         if (activeSession) {
-            pgFetch('POST', 'transcription_segments', {
+          supabase.from('transcription_segments').insert({
-              body: {
             session_id: activeSession.id,
             sequence_index: autoCompleted.length - 1,
             text: currentSegment.text,
             start_seconds: currentSegment.start,
             end_seconds: currentSegment.end,
             is_final: true,
-              },
+          }).then(({ error }) => { if (error) console.error('Failed to save auto-committed segment:', error); });
-            }).catch(err => console.error('Failed to save auto-committed segment:', err));
         }
       }
       set({ currentSegment: { text, isFinal: false, ...metadata } });
@@ -510,8 +474,7 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
 
     try {
       for (const event of eventsToFlush) {
-          await pgFetch('POST', 'canvas_events', {
+        await supabase.from('canvas_events').insert({
-            body: {
           session_id: activeSession?.id || null,
           user_id: get()._userId || '',
           timestamp: new Date().toISOString(),
@@ -521,7 +484,6 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
           canvas_snapshot_url: event.snapshotUrl || null,
           tldraw_page_id: event.pageId || null,
           tldraw_shape_ids: event.shapeIds || null,
-            },
         });
       }
 
@@ -536,9 +498,17 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
       const { _userId: userId } = get();
       if (!userId) return [];
 
-        const data = await pgFetch<TranscriptionSession[]>('GET', 'transcription_sessions', {
+      const { data, error } = await supabase
-          query: `user_id=eq.${userId}&order=started_at.desc&limit=50&select=*`,
+        .from('transcription_sessions')
-        });
+        .select('*')
+        .eq('user_id', userId)
+        .order('started_at', { ascending: false })
+        .limit(50);
+
+      if (error) {
+        console.error('Failed to load sessions:', error);
+        return [];
+      }
 
       return data || [];
     } catch (error) {
@@ -708,13 +678,13 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
 
         if (activeSession) {
           try {
-              const { _accessToken: kwToken } = get();
+            const { _accessToken: _kwToken } = get();
             const apiBaseUrl = import.meta.env.VITE_API_BASE || 'https://api.classroomcopilot.ai';
             await fetch(`${apiBaseUrl}/transcribe/keywords/events`, {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json',
-                  ...(kwToken ? { 'Authorization': `Bearer ${kwToken}` } : {}),
+                ...(_kwToken ? { 'Authorization': `Bearer ${_kwToken}` } : {}),
               },
               body: JSON.stringify({
                 session_id: activeSession.id,
@@ -739,5 +709,4 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => {
   clearKeywordMatches: () => {
     set({ keywordMatches: [] });
   },
-  };
+}));
-});

src/types/navigation.ts

@@ -227,13 +227,6 @@ export interface UnifiedContextSwitch {
 }
 
 // Navigation Actions Interface
-export interface NeoGraphNode {
-    neo4j_node_id: string;
-    neo4j_db_name: string;
-    node_type: string;
-    label: string;
-}
-
 export interface NavigationActions {
     // Unified Context Switch
     switchContext: (contextSwitch: UnifiedContextSwitch, userDbName: string | null, workerDbName: string | null) => Promise<void>;
@@ -246,7 +239,6 @@ export interface NavigationActions {
     // Node Navigation
     navigate: (nodeId: string, dbName: string) => Promise<void>;
     navigateToNode: (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => Promise<void>;
-    navigateToNeoNode: (neoNode: NeoGraphNode) => Promise<void>;
     
     // History Navigation
     goBack: () => void;

src/utils/tldraw/cc-base/cc-transcription/transcriptionService.tsx

@@ -7,14 +7,6 @@ export interface TranscriptionConfig {
   useVad?: boolean;
 }
 
-export interface ServerSegment {
-  text: string;
-  start: number;
-  end: number;
-}
-
-type ServerSegmentsCallback = (segments: ServerSegment[], isLastLive: boolean) => void;
-
 export class TranscriptionService {
   private socket: WebSocket | null = null;
   private stream: MediaStream | null = null;
@@ -22,29 +14,27 @@ export class TranscriptionService {
   private mediaStreamSource: MediaStreamAudioSourceNode | null = null;
   private workletNode: AudioWorkletNode | null = null;
   private selectedDeviceId: string = '';
-  private intentionalStop: boolean = false;
+  private finalizedSegmentCount: number = 0;
-  private onServerSegments: ServerSegmentsCallback | null = null;
+  private onTranscriptionUpdate: ((text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) | null = null;
-  private onDisconnect: (() => void) | null = null;
 
   constructor(deviceId: string = '') {
     this.selectedDeviceId = deviceId;
   }
 
-  setServerSegmentsCallback(callback: ServerSegmentsCallback) {
+  setTranscriptionCallback(callback: (text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) {
-    this.onServerSegments = callback;
+    this.onTranscriptionUpdate = callback;
-  }
-
-  setDisconnectCallback(callback: () => void) {
-    this.onDisconnect = callback;
   }
 
   async startTranscription(config: TranscriptionConfig = {}) {
     console.log('🎙️ Starting transcription service...');
-    this.intentionalStop = false;
 
     try {
       logger.info('transcription-service', '🔊 Requesting microphone access...');
 
+      // Call getUserMedia directly — this triggers the browser permission prompt.
+      // The old code called enumerateDevices() first to find a device ID, but
+      // without microphone permission deviceId is always  (empty string, falsy),
+      // causing an early return that never prompted the user for permission.
       const audioConstraints: MediaTrackConstraints = this.selectedDeviceId
         ? { deviceId: { exact: this.selectedDeviceId } }
         : { echoCancellation: true, noiseSuppression: true };
@@ -70,13 +60,13 @@ export class TranscriptionService {
         clearTimeout(connectionTimeout);
         logger.info('transcription-service', '✅ WebSocket connected');
 
+        // Send initial configuration — audio capture starts only after SERVER_READY.
         ws.send(JSON.stringify({
           uid: uuid,
           language: config.language || 'en',
           task: config.task || 'transcribe',
-          model: config.modelSize || 'large-v3',
+          model: config.modelSize || 'base',
           use_vad: config.useVad ?? true,
-          max_connection_time: 7200, // server default is 600 s — set to 2 h
         }));
       };
 
@@ -86,18 +76,17 @@ export class TranscriptionService {
 
       ws.onclose = () => {
         logger.info('transcription-service', '🔌 WebSocket closed');
-        const wasIntentional = this.intentionalStop;
         this.cleanup();
-        if (!wasIntentional && this.onDisconnect) {
-          this.onDisconnect();
-        }
       };
 
       ws.onmessage = (event) => {
         const data = JSON.parse(event.data);
-        if (data.uid !== uuid) return;
+        if (data.uid !== uuid) {
+          return;
+        }
 
         if (data.message === 'SERVER_READY') {
+          // Server is ready — now safe to start streaming audio.
           logger.info('transcription-service', '🟢 Server ready, starting audio capture');
           this.setupAudioProcessing();
           return;
@@ -105,29 +94,37 @@ export class TranscriptionService {
 
         if (data.status === 'WAIT') {
           logger.info('transcription-service', `⏳ Wait time: ${Math.round(data.message)} minutes`);
-          this.intentionalStop = true;
           this.cleanup();
           return;
         }
 
         if (data.message === 'DISCONNECT') {
           logger.info('transcription-service', '🔕 Server requested disconnection');
-          this.intentionalStop = true;
           this.cleanup();
           return;
         }
 
-        // Pass the full segment window directly to the store — the store owns
+        if (this.onTranscriptionUpdate && data.segments && data.segments.length > 0) {
-        // all boundary and archival decisions, matching the WhisperLive reference
+          const segments = data.segments;
-        // frontend which simply re-renders the server's authoritative segment list.
+          const lastIdx = segments.length - 1;
-        if (this.onServerSegments && data.segments && data.segments.length > 0) {
+
-          const segs: ServerSegment[] = data.segments.map((s: any) => ({
+          // Only emit segments we have not finalized yet — avoids re-processing the
-            text: String(s.text ?? ''),
+          // full array on every message (which caused the stuck last segment bug).
-            start: parseFloat(s.start ?? 0),
+          for (let i = this.finalizedSegmentCount; i < lastIdx; i++) {
-            end: parseFloat(s.end ?? 0),
+            const seg = segments[i];
-          }));
+            this.onTranscriptionUpdate(seg.text, true, {
-          const isLastLive = !(data.segments[data.segments.length - 1]?.completed);
+              start: parseFloat(seg.start),
-          this.onServerSegments(segs, isLastLive);
+              end: parseFloat(seg.end),
+            });
+            this.finalizedSegmentCount = i + 1;
+          }
+
+          // Always update the live (last) segment
+          const lastSeg = segments[lastIdx];
+          this.onTranscriptionUpdate(lastSeg.text, lastSeg.completed ?? false, {
+            start: parseFloat(lastSeg.start),
+            end: parseFloat(lastSeg.end),
+          });
         }
       };
     } catch (error) {
@@ -137,18 +134,26 @@ export class TranscriptionService {
   }
 
   private async setupAudioProcessing() {
-    if (!this.stream || !this.socket) return;
+    if (!this.stream || !this.socket) {
+      return;
+    }
 
     try {
+      // Request 16 kHz from the browser — it resamples natively so we send
+      // the correct rate to the server without any JS resampling overhead.
       this.audioContext = new AudioContext({ sampleRate: 16000 });
+
       await this.audioContext.audioWorklet.addModule('/audioWorklet.js');
 
       this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.stream);
       this.workletNode = new AudioWorkletNode(this.audioContext, 'audio-processor');
 
+      // The worklet accumulates 4096 samples (256 ms at 16 kHz) before posting,
+      // matching the reference frontend chunk size and eliminating the tiny-frame
+      // flood that was overwhelming the server during silence.
       this.workletNode.port.onmessage = (event) => {
         if (this.socket?.readyState === WebSocket.OPEN) {
-          this.socket.send(event.data);
+          this.socket.send(event.data); // event.data is a transferred ArrayBuffer
         }
       };
 
@@ -160,7 +165,7 @@ export class TranscriptionService {
   }
 
   stopTranscription() {
-    this.intentionalStop = true;
+    // Signal the server cleanly so it can finalise the last segment.
     if (this.socket?.readyState === WebSocket.OPEN) {
       this.socket.send('END_OF_AUDIO');
     }
@@ -168,22 +173,27 @@ export class TranscriptionService {
   }
 
   private cleanup() {
+    this.finalizedSegmentCount = 0;
     if (this.workletNode) {
       this.workletNode.disconnect();
       this.workletNode = null;
     }
+
     if (this.mediaStreamSource) {
       this.mediaStreamSource.disconnect();
       this.mediaStreamSource = null;
     }
+
     if (this.audioContext) {
       this.audioContext.close();
       this.audioContext = null;
     }
+
     if (this.stream) {
       this.stream.getTracks().forEach(track => track.stop());
       this.stream = null;
     }
+
     if (this.socket) {
       this.socket.close();
       this.socket = null;

src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx

@@ -34,7 +34,6 @@ import { CCYoutubePanel } from './CCYoutubePanel';
 import { CCGraphPanel } from './CCGraphPanel';
 import { CCExamMarkerPanel } from './CCExamMarkerPanel';
 import { CCSearchPanel } from './CCSearchPanel'
-import { CCGraphNavPanel } from './navigation/CCGraphNavPanel'
 import { CCTranscriptionPanel } from './CCTranscriptionPanel'
 import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
 import './panel.css';
@@ -146,6 +145,7 @@ export const BasePanel: React.FC<BasePanelProps> = ({
     return createTheme({
       palette: {
         mode,
+        divider: 'var(--color-divider)',
       },
     });
   }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
@@ -281,8 +281,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
         return <CCGraphPanel />;
       case 'search':
         return <CCSearchPanel />;
-      case 'navigation':
-        return <CCGraphNavPanel />;
       default:
         return null;
     }
@@ -388,11 +386,9 @@ export const BasePanel: React.FC<BasePanelProps> = ({
             </div>
           </div>
 
-          <ThemeProvider theme={theme}>
           <div className="panel-content">
             {renderCurrentPanel()}
           </div>
-          </ThemeProvider>
         </div>
       )}
     </>

src/utils/tldraw/ui-overrides/components/shared/CCFilesPanelEnhanced.tsx

@@ -35,7 +35,7 @@ import DescriptionIcon from '@mui/icons-material/Description';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { useTLDraw } from '../../../../../contexts/TLDrawContext';
-import { useAuth } from '../../../../../contexts/AuthContext';
+import { supabase } from '../../../../../supabaseClient';
 import { useNavigate } from 'react-router-dom';
 import { 
   pickDirectory, 
@@ -75,8 +75,7 @@ interface UploadProgress {
 }
 
 export const CCFilesPanelEnhanced: React.FC = () => {
-  const { tldrawPreferences } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' } };
+  const { tldrawPreferences, authToken } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' }, authToken?: string };
-  const { user: authUser, accessToken } = useAuth();
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [cabinets, setCabinets] = useState<Cabinet[]>([]);
   const [selectedCabinet, setSelectedCabinet] = useState<string>('');
@@ -110,7 +109,7 @@ export const CCFilesPanelEnhanced: React.FC = () => {
 
   const apiFetch = async (url: string, init?: RequestInitLike) => {
     const headers: HeadersInitLike = {
-      'Authorization': `Bearer ${accessToken || ''}`,
+      'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || authToken || ''}`,
       ...(init?.headers || {})
     };
     const fullUrl = url.startsWith('http') ? url : `${API_BASE}${url}`;
@@ -141,7 +140,7 @@ export const CCFilesPanelEnhanced: React.FC = () => {
     }
   };
 
-  useEffect(() => { if (authUser?.id) { loadCabinets(); } }, [authUser?.id]);
+  useEffect(() => { loadCabinets(); }, []);
   useEffect(() => { if (selectedCabinet) loadFiles(selectedCabinet); }, [selectedCabinet]);
 
   const handleSingleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {

src/utils/tldraw/ui-overrides/components/shared/LLMConfigModal.tsx

@@ -1,49 +1,15 @@
 import React, { useState, useEffect } from 'react';
+import Close from '@mui/icons-material/Close';
 import { useTranscriptionStore, LLMConfig } from '../../../../../stores/transcriptionStore';
 
 const PROVIDERS = [
   { value: 'openai', label: 'OpenAI' },
   { value: 'anthropic', label: 'Anthropic' },
-  { value: 'ollama', label: 'Ollama (local)' },
+  { value: 'ollama', label: 'Ollama' },
   { value: 'openrouter', label: 'OpenRouter' },
-  { value: 'google', label: 'Google Gemini' },
+  { value: 'google', label: 'Google' },
 ] as const;
 
-const WHISPER_MODELS = [
-  { value: 'tiny', label: 'Tiny (fastest, least accurate)' },
-  { value: 'tiny.en', label: 'Tiny English' },
-  { value: 'base', label: 'Base' },
-  { value: 'base.en', label: 'Base English' },
-  { value: 'small', label: 'Small' },
-  { value: 'small.en', label: 'Small English' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'medium.en', label: 'Medium English' },
-  { value: 'large-v2', label: 'Large v2' },
-  { value: 'large-v3', label: 'Large v3 (best accuracy)' },
-];
-
-const fieldStyle: React.CSSProperties = {
-  width: '100%',
-  padding: '7px 10px',
-  border: '1px solid var(--color-divider)',
-  borderRadius: '6px',
-  backgroundColor: 'var(--color-muted)',
-  color: 'var(--color-text)',
-  fontSize: '13px',
-  outline: 'none',
-  boxSizing: 'border-box',
-};
-
-const labelStyle: React.CSSProperties = {
-  display: 'block',
-  fontSize: '12px',
-  fontWeight: 600,
-  color: 'var(--color-text-2)',
-  marginBottom: '4px',
-  textTransform: 'uppercase',
-  letterSpacing: '0.05em',
-};
-
 const LLMConfigModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
   const { llmConfig, setLLMConfig } = useTranscriptionStore();
   const [form, setForm] = useState<LLMConfig>(llmConfig);
@@ -59,196 +25,97 @@ const LLMConfigModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ is
   const handleSave = () => {
     setLLMConfig(form);
     setSaved(true);
-    setTimeout(() => {
+    setTimeout(() => setSaved(false), 2000);
-      setSaved(false);
-      onClose();
-    }, 1000);
   };
 
   if (!isOpen) return null;
 
   return (
-    <div
+    <div className="fixed inset-0 z-[9999] overflow-y-auto">
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 99999,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
-    >
       {/* Backdrop */}
-      <div style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.5)' }} />
+      <div
+        className="fixed inset-0 bg-black/50 transition-opacity"
+        onClick={onClose}
+      />
 
       {/* Modal panel */}
-      <div
+      <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full max-w-md mx-auto">
-        style={{
-          position: 'relative',
-          width: '100%',
-          maxWidth: '420px',
-          backgroundColor: 'var(--color-panel)',
-          border: '1px solid var(--color-divider)',
-          borderRadius: '10px',
-          boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
-          overflow: 'hidden',
-          zIndex: 1,
-        }}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
         {/* Header */}
-        <div style={{
+        <div className="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
-          padding: '14px 16px',
+          <h3 className="text-lg font-medium leading-6 text-gray-900">
-          borderBottom: '1px solid var(--color-divider)',
+            LLM Provider Settings
-          display: 'flex',
+          </h3>
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}>
-          <span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--color-text)' }}>
-            Settings
-          </span>
           <button
             onClick={onClose}
-            style={{
+            className="text-gray-400 hover:text-gray-500 focus:outline-none"
-              padding: '2px 6px',
-              border: 'none',
-              backgroundColor: 'transparent',
-              color: 'var(--color-text-2)',
-              cursor: 'pointer',
-              fontSize: '18px',
-              lineHeight: 1,
-            }}
           >
-            ×
+            <Close sx={{ fontSize: 20 }} />
           </button>
         </div>
 
         {/* Content */}
-        <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px', maxHeight: '80vh', overflowY: 'auto' }}>
+        <div className="px-4 py-5 sm:p-6 space-y-4">
-
+          {/* Provider dropdown */}
-          {/* ── Transcription section ── */}
           <div>
-            <div style={{
+            <label className="block text-sm font-medium text-gray-700 mb-1">
-              fontSize: '11px',
+              Provider
-              fontWeight: 700,
+            </label>
-              color: 'var(--color-text-3)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.08em',
-              marginBottom: '10px',
-              paddingBottom: '6px',
-              borderBottom: '1px solid var(--color-divider)',
-            }}>
-              Transcription
-            </div>
-            <label style={labelStyle}>Whisper Model</label>
-            <select
-              value={form.whisperModel || 'large-v3'}
-              onChange={(e) => setForm({ ...form, whisperModel: e.target.value })}
-              style={fieldStyle}
-            >
-              {WHISPER_MODELS.map((m) => (
-                <option key={m.value} value={m.value}>{m.label}</option>
-              ))}
-            </select>
-            <div style={{ fontSize: '11px', color: 'var(--color-text-3)', marginTop: '4px' }}>
-              Larger models are more accurate but slower to load. Server has large-v3 downloaded.
-            </div>
-          </div>
-
-          {/* ── LLM section ── */}
-          <div>
-            <div style={{
-              fontSize: '11px',
-              fontWeight: 700,
-              color: 'var(--color-text-3)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.08em',
-              marginBottom: '10px',
-              paddingBottom: '6px',
-              borderBottom: '1px solid var(--color-divider)',
-            }}>
-              AI Summary Provider
-            </div>
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-              <div>
-                <label style={labelStyle}>Provider</label>
             <select
               value={form.provider}
               onChange={(e) => setForm({ ...form, provider: e.target.value as LLMConfig['provider'] })}
-                  style={fieldStyle}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             >
               {PROVIDERS.map((p) => (
-                    <option key={p.value} value={p.value}>{p.label}</option>
+                <option key={p.value} value={p.value}>
+                  {p.label}
+                </option>
               ))}
             </select>
           </div>
 
+          {/* Model name */}
           <div>
-                <label style={labelStyle}>Model</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Model
+            </label>
             <input
               type="text"
               value={form.model}
               onChange={(e) => setForm({ ...form, model: e.target.value })}
-                  placeholder={
+              placeholder="e.g. gpt-4o, claude-sonnet-4-20250514"
-                    form.provider === 'ollama' ? 'e.g. gemma4:e4b, llama3.2' :
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    form.provider === 'anthropic' ? 'e.g. claude-sonnet-4-6' :
-                    form.provider === 'google' ? 'e.g. gemini-2.0-flash' :
-                    'e.g. gpt-4o, gpt-4o-mini'
-                  }
-                  style={fieldStyle}
             />
           </div>
 
-              {form.provider === 'ollama' && (
+          {/* API Key */}
           <div>
-                  <label style={labelStyle}>Ollama Base URL</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
-                  <input
+              API Key
-                    type="text"
-                    value={form.baseUrl || ''}
-                    onChange={(e) => setForm({ ...form, baseUrl: e.target.value })}
-                    placeholder="https://ollama.kevlarai.com"
-                    style={fieldStyle}
-                  />
-                </div>
-              )}
-
-              <div>
-                <label style={labelStyle}>
-                  {form.provider === 'ollama' ? 'API Key (optional — leave blank if unrestricted)' : 'API Key'}
             </label>
             <input
               type="password"
               value={form.apiKey}
               onChange={(e) => setForm({ ...form, apiKey: e.target.value })}
-                  placeholder={form.provider === 'ollama' ? 'Leave blank or any value' : 'sk-...'}
+              placeholder="sk-..."
-                  style={fieldStyle}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
           </div>
-            </div>
 
-            <div style={{ fontSize: '11px', color: 'var(--color-text-3)', marginTop: '8px' }}>
+          {/* Note */}
-              API keys are stored in your browser only.
+          <p className="text-xs text-gray-500">
-            </div>
+            API keys are stored locally in your browser only. They are never sent to Supabase or stored on any server.
-          </div>
+          </p>
 
           {/* Save button */}
           <button
             onClick={handleSave}
-            style={{
+            className={`w-full rounded-md px-4 py-2 text-sm font-medium text-white transition-colors ${
-              padding: '9px',
+              saved
-              border: 'none',
+                ? 'bg-green-600 hover:bg-green-700'
-              borderRadius: '6px',
+                : 'bg-blue-600 hover:bg-blue-700'
-              backgroundColor: saved ? '#16a34a' : '#2563eb',
+            }`}
-              color: '#fff',
-              fontSize: '13px',
-              fontWeight: 600,
-              cursor: 'pointer',
-              transition: 'background-color 200ms',
-            }}
           >
-            {saved ? '✓ Saved' : 'Save Settings'}
+            {saved ? '✓ Saved!' : 'Save Settings'}
           </button>
         </div>
       </div>

src/utils/tldraw/ui-overrides/components/shared/navigation/CCGraphNavPanel.tsx

@@ -1,586 +0,0 @@
-import React, { useState, useEffect, useCallback, createContext, useContext } from 'react';
-import {
-    Box, IconButton, CircularProgress, Collapse, Typography, Tooltip,
-    ToggleButtonGroup, ToggleButton,
-} from '@mui/material';
-import {
-    ExpandMore, ChevronRight as ChevronRightIcon,
-    Home as HomeIcon,
-    CalendarToday, DateRange, Event,
-    Schedule as TimetableIcon,
-    Class as ClassIcon,
-    MenuBook as CurriculumIcon,
-    Book as JournalIcon,
-    EventNote as PlannerIcon,
-    Business as SchoolIcon,
-    LinkOff as UnlinkedIcon,
-    HourglassEmpty as PendingIcon,
-    School as AcademicIcon,
-    GridOn as GridIcon,
-    Settings as SetupIcon,
-    Edit as EditIcon,
-} from '@mui/icons-material';
-import { useNavigationStore } from '../../../../../../stores/navigationStore';
-import { useAuth } from '../../../../../../contexts/AuthContext';
-import { NeoGraphNode } from '../../../../../../types/navigation';
-import { logger } from '../../../../../../debugConfig';
-import { SchoolCalendarWizard, SchoolInfo } from './SchoolCalendarWizard';
-import { TeacherTimetableWizard, PeriodTemplate } from './TeacherTimetableWizard';
-
-type NodeStatus = 'populated' | 'empty' | 'no_school' | 'not_initialized';
-type CalendarMode = 'generic' | 'academic';
-
-interface TreeNode extends NeoGraphNode {
-    has_children?: boolean;
-    children?: TreeNode[];
-    is_section?: boolean;
-    section_id?: string;
-    status?: NodeStatus;
-    neo4j_props?: Record<string, string>;
-}
-
-interface SchoolStatus {
-    status: string;
-    user_role?: string;
-    school_id?: string;
-    school_has_calendar?: boolean;
-    teacher_has_timetable?: boolean;
-    timetable_id?: string | null;
-    periods_template?: PeriodTemplate[] | null;
-    school_info?: SchoolInfo;
-}
-
-const NODE_ICONS: Record<string, React.ElementType> = {
-    User: HomeIcon,
-    CalendarYear: CalendarToday,
-    CalendarMonth: DateRange,
-    CalendarWeek: DateRange,
-    CalendarDay: Event,
-    AcademicYear: AcademicIcon,
-    AcademicTerm: AcademicIcon,
-    AcademicWeek: DateRange,
-    TeacherTimetable: TimetableIcon,
-    SubjectClass: ClassIcon,
-    TimetableLesson: TimetableIcon,
-    TimetableSlot: GridIcon,
-    Journal: JournalIcon,
-    Planner: PlannerIcon,
-    School: SchoolIcon,
-    Department: SchoolIcon,
-    Section: HomeIcon,
-};
-
-const SECTION_ICONS: Record<string, React.ElementType> = {
-    calendar: CalendarToday,
-    timetable: TimetableIcon,
-    classes: ClassIcon,
-    curriculum: CurriculumIcon,
-    journal: JournalIcon,
-    planner: PlannerIcon,
-    school: SchoolIcon,
-};
-
-const STATUS_MESSAGES: Record<NodeStatus, string> = {
-    populated: '',
-    empty: 'Not set up yet',
-    no_school: 'Join a school to unlock',
-    not_initialized: 'Setting up...',
-};
-
-// ─── Panel context ─────────────────────────────────────────────────────────────
-
-interface NavPanelContextValue {
-    calendarMode: CalendarMode;
-    setCalendarMode: (m: CalendarMode) => void;
-    academicCalendarStatus: 'idle' | 'loading' | 'populated' | 'empty' | 'no_school' | 'error';
-    academicTerms: TreeNode[];
-    schoolStatus: SchoolStatus | null;
-    onSetupSchoolCalendar: () => void;
-    onSetupTimetable: () => void;
-    activeNodeId?: string;
-}
-
-const NavPanelContext = createContext<NavPanelContextValue>({
-    calendarMode: 'generic',
-    setCalendarMode: () => {},
-    academicCalendarStatus: 'idle',
-    academicTerms: [],
-    schoolStatus: null,
-    onSetupSchoolCalendar: () => {},
-    onSetupTimetable: () => {},
-});
-
-// ─── TreeItem ─────────────────────────────────────────────────────────────────
-
-interface TreeItemProps {
-    node: TreeNode;
-    depth: number;
-    onSelect: (node: TreeNode) => void;
-    onExpand: (node: TreeNode) => Promise<TreeNode[]>;
-}
-
-function TreeItem({ node, depth, onSelect, onExpand }: TreeItemProps) {
-    const ctx = useContext(NavPanelContext);
-    const [expanded, setExpanded] = useState(node.is_section && node.status === 'populated');
-    const [children, setChildren] = useState<TreeNode[]>(node.children || []);
-    const [loading, setLoading] = useState(false);
-
-    const isSection = !!node.is_section;
-    const isCalendarSection = isSection && node.section_id === 'calendar';
-    const isTimetableSection = isSection && node.section_id === 'timetable';
-    const isSchoolSection = isSection && node.section_id === 'school';
-    const SectionIcon = node.section_id ? SECTION_ICONS[node.section_id] : null;
-    const Icon = SectionIcon || NODE_ICONS[node.node_type] || HomeIcon;
-
-    const canExpand = node.has_children !== false
-        && node.node_type !== 'CalendarDay'
-        && node.node_type !== 'AcademicWeek'
-        && node.status !== 'empty'
-        && node.status !== 'no_school'
-        && node.status !== 'not_initialized';
-
-    const isActive = !isSection && node.neo4j_node_id === ctx.activeNodeId;
-    const isEmpty = node.status === 'empty' || node.status === 'no_school' || node.status === 'not_initialized';
-
-    const displayChildren = isCalendarSection && ctx.calendarMode === 'academic'
-        ? ctx.academicTerms
-        : children;
-
-    const academicEmpty = isCalendarSection
-        && ctx.calendarMode === 'academic'
-        && (ctx.academicCalendarStatus === 'empty' || ctx.academicCalendarStatus === 'idle');
-
-    const handleToggle = async (e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (!expanded && displayChildren.length === 0 && canExpand && !isCalendarSection) {
-            setLoading(true);
-            try {
-                const loaded = await onExpand(node);
-                setChildren(loaded);
-            } finally {
-                setLoading(false);
-            }
-        }
-        setExpanded(v => !v);
-    };
-
-    const handleClick = () => {
-        if (!isSection) {
-            onSelect(node);
-        } else if (canExpand || (isCalendarSection && ctx.calendarMode === 'academic')) {
-            handleToggle({ stopPropagation: () => {} } as React.MouseEvent);
-        }
-    };
-
-    // Derive action buttons per section
-    const ss = ctx.schoolStatus;
-    // School section: calendar setup (admin) or pending notice (non-admin)
-    const showCalendarSetup = isSchoolSection
-        && ss && ss.status !== 'no_school'
-        && !ss.school_has_calendar && ss.user_role === 'school_admin';
-    const showCalendarPending = isSchoolSection
-        && ss && ss.status !== 'no_school'
-        && !ss.school_has_calendar && ss.user_role !== 'school_admin';
-    // Timetable section: teacher timetable setup (requires school calendar first)
-    const showTimetableSetup = isTimetableSection && node.status === 'empty'
-        && ss && ss.status !== 'no_school'
-        && ss.school_has_calendar && !ss.teacher_has_timetable;
-    const showLegacySetup = isTimetableSection && node.status === 'empty' && !ss;
-    const showTimetableEdit = isTimetableSection && node.status === 'populated'
-        && ss && ss.status !== 'no_school' && !!ss.teacher_has_timetable;
-
-    if (isSection) {
-        return (
-            <Box>
-                <Box
-                    onClick={handleClick}
-                    sx={{
-                        display: 'flex', alignItems: 'center',
-                        px: 1, py: 0.6,
-                        cursor: (canExpand || isCalendarSection) ? 'pointer' : 'default',
-                        mt: depth === 0 ? 0.5 : 0,
-                        borderRadius: 1,
-                        '&:hover': (canExpand || isCalendarSection) ? { bgcolor: 'action.hover' } : {},
-                    }}
-                >
-                    <Box sx={{ width: 18, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                        {(canExpand || (isCalendarSection && !academicEmpty)) && (
-                            loading
-                                ? <CircularProgress size={10} />
-                                : (
-                                    <IconButton size="small" sx={{ p: 0, color: 'text.secondary' }} onClick={handleToggle}>
-                                        {expanded
-                                            ? <ExpandMore sx={{ fontSize: 14 }} />
-                                            : <ChevronRightIcon sx={{ fontSize: 14 }} />}
-                                    </IconButton>
-                                )
-                        )}
-                        {isEmpty && !isCalendarSection && !isTimetableSection && !isSchoolSection && (
-                            <Box sx={{ width: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                                {node.status === 'no_school'
-                                    ? <UnlinkedIcon sx={{ fontSize: 11, color: 'text.disabled' }} />
-                                    : node.status === 'not_initialized'
-                                        ? <PendingIcon sx={{ fontSize: 11, color: 'text.disabled' }} />
-                                        : null}
-                            </Box>
-                        )}
-                    </Box>
-
-                    <Icon sx={{ fontSize: 13, mr: 0.75, flexShrink: 0, color: isEmpty ? 'text.disabled' : 'primary.main', opacity: isEmpty ? 0.5 : 1 }} />
-
-                    <Typography
-                        variant="caption"
-                        sx={{
-                            fontWeight: 600, letterSpacing: '0.04em',
-                            textTransform: 'uppercase', fontSize: '0.68rem',
-                            color: isEmpty ? 'text.disabled' : 'text.secondary',
-                            flexGrow: 1, overflow: 'hidden',
-                            textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                        }}
-                    >
-                        {node.label}
-                    </Typography>
-
-                    {isEmpty && !isCalendarSection && !isTimetableSection && !isSchoolSection && node.status && (
-                        <Tooltip title={STATUS_MESSAGES[node.status]} placement="right">
-                            <Typography variant="caption" sx={{ fontSize: '0.6rem', color: 'text.disabled', ml: 0.5, flexShrink: 0 }}>
-                                {node.status === 'no_school' ? '—' : '…'}
-                            </Typography>
-                        </Tooltip>
-                    )}
-
-                    {/* Timetable section — role-aware action */}
-                    {showCalendarSetup && (
-                        <Tooltip title="Set up school calendar" placement="right">
-                            <IconButton
-                                size="small"
-                                sx={{ p: 0.25, ml: 0.5, color: 'primary.main' }}
-                                onClick={e => { e.stopPropagation(); ctx.onSetupSchoolCalendar(); }}
-                            >
-                                <SetupIcon sx={{ fontSize: 13 }} />
-                            </IconButton>
-                        </Tooltip>
-                    )}
-                    {showCalendarPending && (
-                        <Tooltip title="School calendar not set up yet — contact your school admin" placement="right">
-                            <PendingIcon sx={{ fontSize: 11, color: 'text.disabled', ml: 0.5 }} />
-                        </Tooltip>
-                    )}
-                    {showTimetableSetup && (
-                        <Tooltip title="Set up my timetable" placement="right">
-                            <IconButton
-                                size="small"
-                                sx={{ p: 0.25, ml: 0.5, color: 'primary.main' }}
-                                onClick={e => { e.stopPropagation(); ctx.onSetupTimetable(); }}
-                            >
-                                <SetupIcon sx={{ fontSize: 13 }} />
-                            </IconButton>
-                        </Tooltip>
-                    )}
-                    {showLegacySetup && (
-                        <Tooltip title="Set up timetable" placement="right">
-                            <IconButton
-                                size="small"
-                                sx={{ p: 0.25, ml: 0.5, color: 'primary.main' }}
-                                onClick={e => { e.stopPropagation(); ctx.onSetupTimetable(); }}
-                            >
-                                <SetupIcon sx={{ fontSize: 13 }} />
-                            </IconButton>
-                        </Tooltip>
-                    )}
-                    {showTimetableEdit && (
-                        <Tooltip title="Edit my class schedule" placement="right">
-                            <IconButton
-                                size="small"
-                                sx={{ p: 0.25, ml: 0.5, color: 'text.secondary' }}
-                                onClick={e => { e.stopPropagation(); ctx.onSetupTimetable(); }}
-                            >
-                                <EditIcon sx={{ fontSize: 13 }} />
-                            </IconButton>
-                        </Tooltip>
-                    )}
-                </Box>
-
-                {/* Calendar mode toggle */}
-                {isCalendarSection && (
-                    <Box sx={{ px: 1.5, pb: 0.5 }}>
-                        <ToggleButtonGroup
-                            value={ctx.calendarMode}
-                            exclusive
-                            onChange={(_, v) => { if (v) ctx.setCalendarMode(v); }}
-                            size="small"
-                            sx={{ height: 22 }}
-                        >
-                            <ToggleButton value="generic" sx={{ px: 1, fontSize: '0.6rem', textTransform: 'none' }}>
-                                Generic
-                            </ToggleButton>
-                            <ToggleButton value="academic" sx={{ px: 1, fontSize: '0.6rem', textTransform: 'none' }}>
-                                Academic
-                            </ToggleButton>
-                        </ToggleButtonGroup>
-                        {ctx.calendarMode === 'academic' && academicEmpty && (
-                            <Typography variant="caption" sx={{ display: 'block', color: 'text.disabled', fontSize: '0.6rem', mt: 0.5 }}>
-                                No academic calendar — set up school calendar first
-                            </Typography>
-                        )}
-                        {ctx.calendarMode === 'academic' && ctx.academicCalendarStatus === 'loading' && (
-                            <CircularProgress size={10} sx={{ mt: 0.5, ml: 0.5 }} />
-                        )}
-                    </Box>
-                )}
-
-                {(canExpand || (isCalendarSection && ctx.calendarMode === 'academic' && displayChildren.length > 0)) && (
-                    <Collapse in={expanded} timeout="auto">
-                        {displayChildren.map(child => (
-                            <TreeItem key={child.neo4j_node_id} node={child} depth={depth + 1}
-                                onSelect={onSelect} onExpand={onExpand} />
-                        ))}
-                    </Collapse>
-                )}
-            </Box>
-        );
-    }
-
-    // Regular navigable node
-    return (
-        <Box>
-            <Box
-                onClick={handleClick}
-                sx={{
-                    display: 'flex', alignItems: 'center',
-                    pl: depth * 1.5 + 0.5, pr: 0.5, py: 0.35,
-                    cursor: 'pointer', borderRadius: 1, mx: 0.5,
-                    fontSize: '0.78rem', minHeight: 26,
-                    bgcolor: isActive ? 'action.selected' : 'transparent',
-                    '&:hover': { bgcolor: isActive ? 'action.selected' : 'action.hover' },
-                }}
-            >
-                <Box sx={{ width: 18, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                    {canExpand && (
-                        loading
-                            ? <CircularProgress size={10} />
-                            : (
-                                <IconButton size="small" sx={{ p: 0, color: 'text.secondary' }} onClick={handleToggle}>
-                                    {expanded
-                                        ? <ExpandMore sx={{ fontSize: 14 }} />
-                                        : <ChevronRightIcon sx={{ fontSize: 14 }} />}
-                                </IconButton>
-                            )
-                    )}
-                </Box>
-                <Icon sx={{ fontSize: 13, mr: 0.75, flexShrink: 0, color: isActive ? 'primary.main' : 'text.secondary' }} />
-                <Box sx={{
-                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                    flexGrow: 1, fontSize: '0.78rem',
-                    color: isActive ? 'primary.main' : 'text.primary',
-                    fontWeight: isActive ? 600 : 400,
-                }}>
-                    {node.label}
-                </Box>
-            </Box>
-
-            {canExpand && (
-                <Collapse in={expanded} timeout="auto">
-                    {children.map(child => (
-                        <TreeItem key={child.neo4j_node_id} node={child} depth={depth + 1}
-                            onSelect={onSelect} onExpand={onExpand} />
-                    ))}
-                </Collapse>
-            )}
-        </Box>
-    );
-}
-
-// ─── Main Panel ───────────────────────────────────────────────────────────────
-
-export function CCGraphNavPanel() {
-    const { accessToken } = useAuth();
-    const { navigateToNeoNode, context } = useNavigationStore();
-    const [tree, setTree] = useState<TreeNode | null>(null);
-    const [schoolStatus, setSchoolStatus] = useState<SchoolStatus | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const [calendarMode, setCalendarMode] = useState<CalendarMode>('generic');
-    const [academicCalendarStatus, setAcademicCalendarStatus] = useState<NavPanelContextValue['academicCalendarStatus']>('idle');
-    const [academicTerms, setAcademicTerms] = useState<TreeNode[]>([]);
-
-    const [calendarWizardOpen, setCalendarWizardOpen] = useState(false);
-    const [timetableWizardOpen, setTimetableWizardOpen] = useState(false);
-
-    const apiBase = import.meta.env.VITE_API_BASE as string;
-    const activeNodeId = context.node?.type !== 'workspace' ? context.node?.id : undefined;
-
-    const fetchTree = useCallback(async () => {
-        if (!accessToken) return;
-        setLoading(true);
-        setError(null);
-        try {
-            const res = await fetch(`${apiBase}/graph/tree`, {
-                headers: { Authorization: `Bearer ${accessToken}` },
-            });
-            if (!res.ok) throw new Error(`${res.status}`);
-            const data = await res.json();
-            setTree(data.tree);
-        } catch (err) {
-            logger.error('graph-nav-panel', 'Failed to load graph tree', err);
-            setError('Failed to load navigation tree');
-        } finally {
-            setLoading(false);
-        }
-    }, [accessToken, apiBase]);
-
-    const fetchSchoolStatus = useCallback(async () => {
-        if (!accessToken) return;
-        try {
-            const res = await fetch(`${apiBase}/school/status`, {
-                headers: { Authorization: `Bearer ${accessToken}` },
-            });
-            if (!res.ok) return;
-            const data = await res.json();
-            setSchoolStatus(data);
-        } catch {
-            // non-fatal — panel still works without school status
-        }
-    }, [accessToken, apiBase]);
-
-    useEffect(() => {
-        if (accessToken && !tree) fetchTree();
-    }, [accessToken, tree, fetchTree]);
-
-    useEffect(() => {
-        if (accessToken && !schoolStatus) fetchSchoolStatus();
-    }, [accessToken, schoolStatus, fetchSchoolStatus]);
-
-    // Fetch academic calendar when switching to academic mode
-    useEffect(() => {
-        if (calendarMode !== 'academic' || !accessToken) return;
-        if (academicCalendarStatus !== 'idle') return;
-        setAcademicCalendarStatus('loading');
-        fetch(`${apiBase}/graph/calendar/academic`, {
-            headers: { Authorization: `Bearer ${accessToken}` },
-        })
-            .then(r => r.json())
-            .then(data => {
-                if (data.status === 'populated') {
-                    setAcademicTerms(data.terms);
-                    setAcademicCalendarStatus('populated');
-                } else {
-                    setAcademicCalendarStatus(data.status || 'empty');
-                }
-            })
-            .catch(() => setAcademicCalendarStatus('error'));
-    }, [calendarMode, accessToken, apiBase, academicCalendarStatus]);
-
-    const handleSetCalendarMode = useCallback((m: CalendarMode) => {
-        setCalendarMode(m);
-        if (m === 'academic') setAcademicCalendarStatus('idle');
-    }, []);
-
-    const handleExpand = useCallback(async (node: TreeNode): Promise<TreeNode[]> => {
-        if (!accessToken) return [];
-        const params = new URLSearchParams({
-            neo4j_node_id: node.neo4j_node_id,
-            neo4j_db_name: node.neo4j_db_name,
-            node_type: node.node_type,
-            section_id: node.section_id || '',
-        });
-        try {
-            const res = await fetch(`${apiBase}/graph/node/children?${params}`, {
-                headers: { Authorization: `Bearer ${accessToken}` },
-            });
-            if (!res.ok) return [];
-            const data = await res.json();
-            return data.children || [];
-        } catch {
-            return [];
-        }
-    }, [accessToken, apiBase]);
-
-    const handleSelect = useCallback((node: TreeNode) => {
-        if (!node.is_section) navigateToNeoNode(node);
-    }, [navigateToNeoNode]);
-
-    const refreshAll = useCallback(() => {
-        setTree(null);
-        setSchoolStatus(null);
-        setAcademicCalendarStatus('idle');
-        setAcademicTerms([]);
-    }, []);
-
-    const handleCalendarWizardComplete = useCallback(() => {
-        logger.info('graph-nav-panel', 'School calendar setup complete');
-        refreshAll();
-    }, [refreshAll]);
-
-    const handleTimetableWizardComplete = useCallback((timetableId: string) => {
-        logger.info('graph-nav-panel', 'Teacher timetable setup complete', { timetableId });
-        refreshAll();
-    }, [refreshAll]);
-
-    if (loading) {
-        return (
-            <Box sx={{ display: 'flex', justifyContent: 'center', pt: 3 }}>
-                <CircularProgress size={20} />
-            </Box>
-        );
-    }
-
-    if (error) {
-        return (
-            <Box sx={{ p: 1.5, fontSize: '0.78rem', color: 'error.main' }}>
-                {error}
-            </Box>
-        );
-    }
-
-    if (!tree) return null;
-
-    const ctxValue: NavPanelContextValue = {
-        calendarMode,
-        setCalendarMode: handleSetCalendarMode,
-        academicCalendarStatus,
-        academicTerms,
-        schoolStatus,
-        onSetupSchoolCalendar: () => setCalendarWizardOpen(true),
-        onSetupTimetable: () => setTimetableWizardOpen(true),
-        activeNodeId,
-    };
-
-    const defaultSchoolInfo: SchoolInfo = {
-        name: '', urn: '', website: '', address: {},
-        headteacher: '', term_dates_url: '', staff_list_url: '',
-    };
-
-    return (
-        <NavPanelContext.Provider value={ctxValue}>
-            <Box sx={{ pt: 0.5, pb: 2 }}>
-                <TreeItem
-                    node={tree}
-                    depth={0}
-                    onSelect={handleSelect}
-                    onExpand={handleExpand}
-                />
-            </Box>
-
-            {schoolStatus?.school_info && (
-                <SchoolCalendarWizard
-                    open={calendarWizardOpen}
-                    onClose={() => setCalendarWizardOpen(false)}
-                    onComplete={handleCalendarWizardComplete}
-                    apiBase={apiBase}
-                    schoolInfo={schoolStatus.school_info || defaultSchoolInfo}
-                />
-            )}
-
-            <TeacherTimetableWizard
-                open={timetableWizardOpen}
-                onClose={() => setTimetableWizardOpen(false)}
-                onComplete={handleTimetableWizardComplete}
-                apiBase={apiBase}
-                periodsTemplate={schoolStatus?.periods_template || []}
-                timetableId={schoolStatus?.timetable_id || null}
-            />
-        </NavPanelContext.Provider>
-    );
-}

src/utils/tldraw/ui-overrides/components/shared/navigation/CCNodeSnapshotPanel.tsx

@@ -4,7 +4,7 @@ import Save from '@mui/icons-material/Save';
 import Reset from '@mui/icons-material/RestartAlt';
 import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw';
 import { useNavigationStore } from '../../../../../../stores/navigationStore';
-import { useAuth } from '../../../../../../contexts/AuthContext';
+import { UserNeoDBService } from '../../../../../../services/graph/userNeoDBService';
 import { PageComponent } from '../components/pageComponent';
 import { logger } from '../../../../../../debugConfig';
 import { useTLDraw } from '../../../../../../contexts/TLDrawContext';
@@ -68,7 +68,6 @@ export const CCNodeSnapshotPanel: React.FC = () => {
   const editor = useEditor();
   const { addToast } = useToasts();
   const { context: navigationContext, isLoading, error } = useNavigationStore();
-  const { accessToken } = useAuth();
   const { tldrawPreferences } = useTLDraw();
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [isSaving, setIsSaving] = useState(false);
@@ -132,9 +131,8 @@ export const CCNodeSnapshotPanel: React.FC = () => {
         type: navigationContext.node.type
       });
 
-      const storagePath = navigationContext.node.node_storage_path;
+      const dbName = UserNeoDBService.getNodeDatabaseName(navigationContext.node);
-      if (!storagePath) throw new Error('No storage path on current node');
+      await NavigationSnapshotService.saveNodeSnapshotToDatabase(navigationContext.node.id, dbName, editor.store);
-      await NavigationSnapshotService.saveNodeSnapshotToDatabase(storagePath, accessToken || '', editor.store);
 
       addToast({
         title: 'Snapshot saved',

src/utils/tldraw/ui-overrides/components/shared/navigation/SchoolCalendarWizard.tsx

@@ -1,316 +0,0 @@
-import React, { useState } from 'react';
-import {
-    Dialog, DialogTitle, DialogContent, DialogActions,
-    Button, Stepper, Step, StepLabel, Box, TextField,
-    Typography, IconButton, Select, MenuItem, FormControl,
-    InputLabel, CircularProgress, Alert, Divider,
-} from '@mui/material';
-import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
-import { useAuth } from '../../../../../../contexts/AuthContext';
-
-interface TermInput {
-    name: string;
-    term_number: number;
-    start_date: string;
-    end_date: string;
-}
-
-interface PeriodInput {
-    code: string;
-    name: string;
-    start_time: string;
-    end_time: string;
-    period_type: 'lesson' | 'break' | 'registration';
-}
-
-export interface SchoolInfo {
-    name: string;
-    urn: string;
-    website: string;
-    address: Record<string, string>;
-    headteacher: string;
-    term_dates_url: string;
-    staff_list_url: string;
-}
-
-const DEFAULT_TERMS: TermInput[] = [
-    { name: 'Autumn', term_number: 1, start_date: '2025-09-03', end_date: '2025-12-19' },
-    { name: 'Spring', term_number: 2, start_date: '2026-01-06', end_date: '2026-04-01' },
-    { name: 'Summer', term_number: 3, start_date: '2026-04-22', end_date: '2026-07-22' },
-];
-
-const DEFAULT_PERIODS: PeriodInput[] = [
-    { code: 'REG', name: 'Registration', start_time: '08:45', end_time: '09:00', period_type: 'registration' },
-    { code: 'P1', name: 'Period 1', start_time: '09:00', end_time: '10:00', period_type: 'lesson' },
-    { code: 'P2', name: 'Period 2', start_time: '10:00', end_time: '11:00', period_type: 'lesson' },
-    { code: 'BREAK', name: 'Break', start_time: '11:00', end_time: '11:20', period_type: 'break' },
-    { code: 'P3', name: 'Period 3', start_time: '11:20', end_time: '12:20', period_type: 'lesson' },
-    { code: 'P4', name: 'Period 4', start_time: '12:20', end_time: '13:20', period_type: 'lesson' },
-    { code: 'LUNCH', name: 'Lunch', start_time: '13:20', end_time: '14:05', period_type: 'break' },
-    { code: 'P5', name: 'Period 5', start_time: '14:05', end_time: '15:05', period_type: 'lesson' },
-];
-
-interface Props {
-    open: boolean;
-    onClose: () => void;
-    onComplete: () => void;
-    apiBase: string;
-    schoolInfo: SchoolInfo;
-}
-
-export function SchoolCalendarWizard({ open, onClose, onComplete, apiBase, schoolInfo }: Props) {
-    const { accessToken } = useAuth();
-    const [step, setStep] = useState(0);
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const [headteacher, setHeadteacher] = useState(schoolInfo.headteacher || '');
-    const [termDatesUrl, setTermDatesUrl] = useState(schoolInfo.term_dates_url || '');
-    const [staffListUrl, setStaffListUrl] = useState(schoolInfo.staff_list_url || '');
-
-    const [yearStart, setYearStart] = useState('2025-09-01');
-    const [yearEnd, setYearEnd] = useState('2026-07-31');
-    const [terms, setTerms] = useState<TermInput[]>(DEFAULT_TERMS);
-
-    const [periods, setPeriods] = useState<PeriodInput[]>(DEFAULT_PERIODS);
-
-    const addTerm = () => setTerms(prev => [...prev, {
-        name: `Term ${prev.length + 1}`,
-        term_number: prev.length + 1,
-        start_date: '',
-        end_date: '',
-    }]);
-
-    const removeTerm = (i: number) => setTerms(prev =>
-        prev.filter((_, idx) => idx !== i).map((t, idx) => ({ ...t, term_number: idx + 1 }))
-    );
-
-    const updateTerm = (i: number, field: keyof TermInput, value: string) =>
-        setTerms(prev => prev.map((t, idx) => idx === i ? { ...t, [field]: value } : t));
-
-    const addPeriod = () => setPeriods(prev => [...prev, {
-        code: `P${prev.length + 1}`,
-        name: `Period ${prev.length + 1}`,
-        start_time: '',
-        end_time: '',
-        period_type: 'lesson',
-    }]);
-
-    const removePeriod = (i: number) => setPeriods(prev => prev.filter((_, idx) => idx !== i));
-
-    const updatePeriod = (i: number, field: keyof PeriodInput, value: string) =>
-        setPeriods(prev => prev.map((p, idx) => idx === i ? { ...p, [field]: value } : p));
-
-    const handleSaveSchoolInfo = async () => {
-        if (!accessToken) return;
-        setSaving(true);
-        setError(null);
-        try {
-            const res = await fetch(`${apiBase}/school/info`, {
-                method: 'PATCH',
-                headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
-                body: JSON.stringify({ headteacher, term_dates_url: termDatesUrl, staff_list_url: staffListUrl }),
-            });
-            const data = await res.json();
-            if (data.status === 'ok') {
-                setStep(1);
-            } else {
-                setError(data.message || 'Failed to save school info');
-            }
-        } catch (e: any) {
-            setError(e.message);
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    const handleSaveCalendar = async () => {
-        if (!accessToken) return;
-        setSaving(true);
-        setError(null);
-        try {
-            const res = await fetch(`${apiBase}/timetable/setup`, {
-                method: 'POST',
-                headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
-                body: JSON.stringify({ year_start: yearStart, year_end: yearEnd, terms, periods }),
-            });
-            const data = await res.json();
-            if (data.status === 'ok') {
-                onComplete();
-                handleClose();
-            } else {
-                setError(data.message || 'Calendar setup failed');
-            }
-        } catch (e: any) {
-            setError(e.message);
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    const handleClose = () => {
-        setStep(0);
-        setError(null);
-        onClose();
-    };
-
-    const addr = schoolInfo.address || {};
-    const addressStr = [addr.street, addr.town, addr.county, addr.postcode].filter(Boolean).join(', ');
-
-    const STEPS = ['School Details', 'Academic Calendar', 'Daily Periods'];
-
-    return (
-        <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
-            <DialogTitle sx={{ pb: 1 }}>Set Up School Calendar</DialogTitle>
-            <Box sx={{ px: 3 }}>
-                <Stepper activeStep={step} sx={{ mb: 2 }}>
-                    {STEPS.map(label => <Step key={label}><StepLabel>{label}</StepLabel></Step>)}
-                </Stepper>
-            </Box>
-
-            <DialogContent>
-                {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-
-                {step === 0 && (
-                    <Box>
-                        <Typography variant="subtitle2" sx={{ mb: 1.5 }}>School Information</Typography>
-                        <Box sx={{ mb: 2, p: 1.5, bgcolor: 'action.hover', borderRadius: 1 }}>
-                            <Typography variant="body2" sx={{ fontWeight: 600 }}>{schoolInfo.name || '—'}</Typography>
-                            {schoolInfo.urn && (
-                                <Typography variant="caption" sx={{ color: 'text.secondary' }}>URN: {schoolInfo.urn}</Typography>
-                            )}
-                            {addressStr && (
-                                <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>{addressStr}</Typography>
-                            )}
-                            {schoolInfo.website && (
-                                <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>{schoolInfo.website}</Typography>
-                            )}
-                        </Box>
-                        <Divider sx={{ mb: 2 }} />
-                        <Typography variant="subtitle2" sx={{ mb: 1.5 }}>Additional Details</Typography>
-                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                            <TextField
-                                label="Headteacher"
-                                value={headteacher}
-                                onChange={e => setHeadteacher(e.target.value)}
-                                size="small"
-                                fullWidth
-                                placeholder="e.g. Mr J Smith"
-                            />
-                            <TextField
-                                label="Term Dates URL"
-                                value={termDatesUrl}
-                                onChange={e => setTermDatesUrl(e.target.value)}
-                                size="small"
-                                fullWidth
-                                placeholder="Link to term dates page on school website"
-                            />
-                            <TextField
-                                label="Staff List URL"
-                                value={staffListUrl}
-                                onChange={e => setStaffListUrl(e.target.value)}
-                                size="small"
-                                fullWidth
-                                placeholder="Link to staff list page on school website"
-                            />
-                        </Box>
-                    </Box>
-                )}
-
-                {step === 1 && (
-                    <Box>
-                        <Typography variant="subtitle2" sx={{ mb: 1.5 }}>School Year</Typography>
-                        <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
-                            <TextField label="Year Start" type="date" value={yearStart}
-                                onChange={e => setYearStart(e.target.value)}
-                                size="small" InputLabelProps={{ shrink: true }} />
-                            <TextField label="Year End" type="date" value={yearEnd}
-                                onChange={e => setYearEnd(e.target.value)}
-                                size="small" InputLabelProps={{ shrink: true }} />
-                        </Box>
-                        <Divider sx={{ mb: 2 }} />
-                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-                            <Typography variant="subtitle2">Terms</Typography>
-                            <Button size="small" startIcon={<AddIcon />} onClick={addTerm}>Add Term</Button>
-                        </Box>
-                        {terms.map((term, i) => (
-                            <Box key={i} sx={{ display: 'flex', gap: 1.5, mb: 1.5, alignItems: 'center' }}>
-                                <TextField label="Term Name" value={term.name}
-                                    onChange={e => updateTerm(i, 'name', e.target.value)}
-                                    size="small" sx={{ width: 140 }} />
-                                <TextField label="Start Date" type="date" value={term.start_date}
-                                    onChange={e => updateTerm(i, 'start_date', e.target.value)}
-                                    size="small" InputLabelProps={{ shrink: true }} />
-                                <TextField label="End Date" type="date" value={term.end_date}
-                                    onChange={e => updateTerm(i, 'end_date', e.target.value)}
-                                    size="small" InputLabelProps={{ shrink: true }} />
-                                <IconButton size="small" onClick={() => removeTerm(i)}>
-                                    <DeleteIcon fontSize="small" />
-                                </IconButton>
-                            </Box>
-                        ))}
-                    </Box>
-                )}
-
-                {step === 2 && (
-                    <Box>
-                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-                            <Typography variant="subtitle2">Daily Period Schedule</Typography>
-                            <Button size="small" startIcon={<AddIcon />} onClick={addPeriod}>Add Period</Button>
-                        </Box>
-                        {periods.map((p, i) => (
-                            <Box key={i} sx={{ display: 'flex', gap: 1.5, mb: 1.5, alignItems: 'center' }}>
-                                <TextField label="Code" value={p.code}
-                                    onChange={e => updatePeriod(i, 'code', e.target.value)}
-                                    size="small" sx={{ width: 80 }} />
-                                <TextField label="Name" value={p.name}
-                                    onChange={e => updatePeriod(i, 'name', e.target.value)}
-                                    size="small" sx={{ width: 140 }} />
-                                <TextField label="Start" type="time" value={p.start_time}
-                                    onChange={e => updatePeriod(i, 'start_time', e.target.value)}
-                                    size="small" InputLabelProps={{ shrink: true }} />
-                                <TextField label="End" type="time" value={p.end_time}
-                                    onChange={e => updatePeriod(i, 'end_time', e.target.value)}
-                                    size="small" InputLabelProps={{ shrink: true }} />
-                                <FormControl size="small" sx={{ width: 130 }}>
-                                    <InputLabel>Type</InputLabel>
-                                    <Select label="Type" value={p.period_type}
-                                        onChange={e => updatePeriod(i, 'period_type', e.target.value)}>
-                                        <MenuItem value="lesson">Lesson</MenuItem>
-                                        <MenuItem value="break">Break</MenuItem>
-                                        <MenuItem value="registration">Registration</MenuItem>
-                                    </Select>
-                                </FormControl>
-                                <IconButton size="small" onClick={() => removePeriod(i)}>
-                                    <DeleteIcon fontSize="small" />
-                                </IconButton>
-                            </Box>
-                        ))}
-                    </Box>
-                )}
-            </DialogContent>
-
-            <DialogActions sx={{ px: 3, pb: 2 }}>
-                <Button onClick={handleClose} disabled={saving}>Cancel</Button>
-                {step > 0 && (
-                    <Button onClick={() => setStep(s => s - 1)} disabled={saving}>Back</Button>
-                )}
-                {step === 0 && (
-                    <Button onClick={handleSaveSchoolInfo} variant="contained" disabled={saving}>
-                        {saving ? <CircularProgress size={18} /> : 'Save & Continue'}
-                    </Button>
-                )}
-                {step === 1 && (
-                    <Button onClick={() => setStep(2)} variant="outlined" disabled={saving}>
-                        Next: Daily Periods
-                    </Button>
-                )}
-                {step === 2 && (
-                    <Button onClick={handleSaveCalendar} variant="contained" disabled={saving}>
-                        {saving ? <CircularProgress size={18} /> : 'Save School Calendar'}
-                    </Button>
-                )}
-            </DialogActions>
-        </Dialog>
-    );
-}

src/utils/tldraw/ui-overrides/components/shared/navigation/TeacherTimetableWizard.tsx

@@ -1,244 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {
-    Dialog, DialogTitle, DialogContent, DialogActions,
-    Button, Box, TextField, Typography, Table, TableHead,
-    TableBody, TableRow, TableCell, CircularProgress, Alert,
-} from '@mui/material';
-import { useAuth } from '../../../../../../contexts/AuthContext';
-
-export interface PeriodTemplate {
-    code: string;
-    name: string;
-    start_time: string;
-    end_time: string;
-    period_type: string;
-}
-
-const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
-
-function emptyGrid(): Record<string, Record<string, string>> {
-    const g: Record<string, Record<string, string>> = {};
-    DAYS.forEach(d => { g[d] = {}; });
-    return g;
-}
-
-interface Props {
-    open: boolean;
-    onClose: () => void;
-    onComplete: (timetableId: string) => void;
-    apiBase: string;
-    periodsTemplate: PeriodTemplate[];
-    timetableId: string | null;
-}
-
-export function TeacherTimetableWizard({
-    open,
-    onClose,
-    onComplete,
-    apiBase,
-    periodsTemplate,
-    timetableId: initialTimetableId,
-}: Props) {
-    const { accessToken } = useAuth();
-    const [localTimetableId, setLocalTimetableId] = useState<string | null>(initialTimetableId);
-    const [initializing, setInitializing] = useState(false);
-    const [loadingSlots, setLoadingSlots] = useState(false);
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [grid, setGrid] = useState<Record<string, Record<string, string>>>(emptyGrid);
-    const slotsLoadedRef = useRef(false);
-
-    const lessonPeriods = periodsTemplate.filter(p => p.period_type === 'lesson');
-    const isEditing = !!initialTimetableId;
-
-    // Reset when dialog opens
-    useEffect(() => {
-        if (!open) {
-            slotsLoadedRef.current = false;
-            return;
-        }
-        setLocalTimetableId(initialTimetableId);
-        setGrid(emptyGrid());
-        setError(null);
-        slotsLoadedRef.current = false;
-    }, [open, initialTimetableId]);
-
-    // Auto-create TeacherTimetable node if not yet done
-    useEffect(() => {
-        if (!open || localTimetableId || !accessToken || initializing) return;
-        setInitializing(true);
-        setError(null);
-        fetch(`${apiBase}/timetable/init`, {
-            method: 'POST',
-            headers: { Authorization: `Bearer ${accessToken}` },
-        })
-            .then(r => r.json())
-            .then(data => {
-                if (data.status === 'ok') {
-                    setLocalTimetableId(data.timetable_id);
-                } else {
-                    setError(data.message || 'Could not initialize timetable. Has an admin set up the school calendar?');
-                }
-            })
-            .catch(e => setError(e.message))
-            .finally(() => setInitializing(false));
-    }, [open, localTimetableId, accessToken, apiBase, initializing]);
-
-    // Load existing slots when editing
-    useEffect(() => {
-        if (!open || !localTimetableId || !accessToken || slotsLoadedRef.current || loadingSlots) return;
-        slotsLoadedRef.current = true;
-        setLoadingSlots(true);
-        fetch(`${apiBase}/timetable/slots`, {
-            headers: { Authorization: `Bearer ${accessToken}` },
-        })
-            .then(r => r.json())
-            .then(data => {
-                if (data.status === 'ok' && Array.isArray(data.slots) && data.slots.length > 0) {
-                    const g = emptyGrid();
-                    for (const slot of data.slots) {
-                        if (g[slot.day_of_week]) {
-                            g[slot.day_of_week][slot.period_code] = slot.subject_class || '';
-                        }
-                    }
-                    setGrid(g);
-                }
-            })
-            .catch(() => {})
-            .finally(() => setLoadingSlots(false));
-    }, [open, localTimetableId, accessToken, apiBase, loadingSlots]);
-
-    const setCell = (day: string, code: string, value: string) => {
-        setGrid(prev => ({ ...prev, [day]: { ...prev[day], [code]: value } }));
-    };
-
-    const handleSave = async () => {
-        if (!accessToken || !localTimetableId) return;
-        setSaving(true);
-        setError(null);
-        try {
-            const slots = [];
-            for (const day of DAYS) {
-                for (const period of lessonPeriods) {
-                    const cls = (grid[day]?.[period.code] || '').trim();
-                    if (cls) {
-                        slots.push({
-                            day_of_week: day,
-                            period_code: period.code,
-                            subject_class: cls,
-                            start_time: period.start_time,
-                            end_time: period.end_time,
-                        });
-                    }
-                }
-            }
-            const res = await fetch(`${apiBase}/timetable/slots`, {
-                method: 'POST',
-                headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
-                body: JSON.stringify({ timetable_id: localTimetableId, slots }),
-            });
-            const data = await res.json();
-            if (data.status === 'ok') {
-                onComplete(localTimetableId);
-                handleClose();
-            } else {
-                setError(data.message || 'Save failed');
-            }
-        } catch (e: any) {
-            setError(e.message);
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    const handleClose = () => {
-        setError(null);
-        onClose();
-    };
-
-    const busy = initializing || loadingSlots || saving;
-
-    return (
-        <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
-            <DialogTitle sx={{ pb: 1 }}>
-                {isEditing ? 'Edit My Timetable' : 'Set Up My Timetable'}
-            </DialogTitle>
-
-            <DialogContent>
-                {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-
-                {(initializing || loadingSlots) && (
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2 }}>
-                        <CircularProgress size={16} />
-                        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-                            {initializing ? 'Preparing your timetable…' : 'Loading existing classes…'}
-                        </Typography>
-                    </Box>
-                )}
-
-                {!initializing && !loadingSlots && localTimetableId && (
-                    <Box>
-                        <Typography variant="subtitle2" sx={{ mb: 1.5 }}>
-                            Enter your class codes for each lesson slot (leave blank if free)
-                        </Typography>
-                        <Box sx={{ overflowX: 'auto' }}>
-                            <Table size="small">
-                                <TableHead>
-                                    <TableRow>
-                                        <TableCell sx={{ fontWeight: 600, minWidth: 100 }}>Period</TableCell>
-                                        {DAYS.map(d => (
-                                            <TableCell key={d} align="center" sx={{ fontWeight: 600, minWidth: 110 }}>
-                                                {d}
-                                            </TableCell>
-                                        ))}
-                                    </TableRow>
-                                </TableHead>
-                                <TableBody>
-                                    {lessonPeriods.map(period => (
-                                        <TableRow key={period.code}>
-                                            <TableCell>
-                                                <Box>
-                                                    <Typography variant="caption" sx={{ fontWeight: 600 }}>
-                                                        {period.code}
-                                                    </Typography>
-                                                    <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
-                                                        {period.start_time}–{period.end_time}
-                                                    </Typography>
-                                                </Box>
-                                            </TableCell>
-                                            {DAYS.map(day => (
-                                                <TableCell key={day} align="center" sx={{ p: 0.5 }}>
-                                                    <TextField
-                                                        size="small"
-                                                        placeholder="—"
-                                                        value={grid[day]?.[period.code] || ''}
-                                                        onChange={e => setCell(day, period.code, e.target.value)}
-                                                        inputProps={{
-                                                            style: { textAlign: 'center', fontSize: '0.8rem', padding: '4px 6px' },
-                                                        }}
-                                                        sx={{ width: 96 }}
-                                                    />
-                                                </TableCell>
-                                            ))}
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
-                        </Box>
-                    </Box>
-                )}
-            </DialogContent>
-
-            <DialogActions sx={{ px: 3, pb: 2 }}>
-                <Button onClick={handleClose} disabled={busy}>Cancel</Button>
-                <Button
-                    onClick={handleSave}
-                    variant="contained"
-                    disabled={busy || !localTimetableId}
-                >
-                    {saving ? <CircularProgress size={18} /> : 'Save Timetable'}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}