feat(phase-b): school/timetable wizards, graph nav panel, UI updates

New components:
- CCGraphNavPanel: Supabase-driven navigation tree (school/timetable/calendar/classes sections),
  role-aware setup buttons, lazy child loading, academic/generic calendar toggle
- SchoolCalendarWizard: 3-step admin-only school setup (details → term dates → daily periods)
- TeacherTimetableWizard: period grid with existing slot pre-loading, edit-mode title

Updated:
- CCNodeSnapshotPanel: saves via Supabase storage path + accessToken
- BasePanel: nav panel tab wired to CCGraphNavPanel
- CCFilesPanelEnhanced: auth context fixes
- CCDocumentIntelligence suite: accessToken threading, Supabase storage integration

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

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 { supabase } from '../../../supabaseClient';
+import { useAuth } from '../../../contexts/AuthContext';
 
 type Manifest = {
   bucket: string;
@@ -41,6 +41,7 @@ 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');
@@ -53,9 +54,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 = (await supabase.auth.getSession()).data.session?.access_token || '';
+    const token = accessToken || '';
     return `${API_BASE}/database/files/proxy_signed?bucket=${encodeURIComponent(bucket)}&path=${encodeURIComponent(relPath)}&token=${encodeURIComponent(token)}`;
-  }, [API_BASE]);
+  }, [API_BASE, accessToken]);
 
   const replaceAllSafe = useCallback((s: string, search: string, replacement: string) => {
     if (!s || typeof s !== 'string') return s || '';
@@ -222,7 +223,7 @@ export const CCBundleViewer: React.FC<{
       setManifest(null);
       if (combinedBundles && combinedBundles.length > 0) {
         try {
-          const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+          const token = accessToken || '';
           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}` } });
@@ -239,7 +240,7 @@ export const CCBundleViewer: React.FC<{
       }
       if (!bundleId) return;
       try {
-        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+        const token = accessToken || '';
         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();
@@ -266,7 +267,7 @@ export const CCBundleViewer: React.FC<{
           let textParts: string[] = [];
           let jsonParts: string[] = [];
           for (const m of combinedManifests) {
-            const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+            const token = accessToken || '';
             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;
@@ -348,7 +349,7 @@ export const CCBundleViewer: React.FC<{
           relPath = rec?.path;
         }
         if (!relPath) { setContent(''); setLoading(false); return; }
-        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+        const token = accessToken || '';
         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 { supabase } from '../../../supabaseClient';
+import { useAuth } from '../../../contexts/AuthContext';
 
 type Artefact = { id: string; type: string; rel_path: string; created_at: string };
 
@@ -43,6 +43,7 @@ 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 }>>([]);
@@ -184,7 +185,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+            headers: { 'Authorization': `Bearer ${accessToken || ''}` }
           });
           if (mRes.ok) {
             const m: PageImagesManifest = await mRes.json();
@@ -199,7 +200,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
         });
         if (!artefactsRes.ok) throw new Error(await artefactsRes.text());
         const artefacts: Artefact[] = await artefactsRes.json();
@@ -216,7 +217,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
         });
         if (!jsonRes.ok) throw new Error(await jsonRes.text());
         const doc: DoclingJson = await jsonRes.json();
@@ -267,7 +268,7 @@ export const CCDoclingViewer: React.FC<{
         setPageObjectUrl(cached);
         return;
       }
-      const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+      const token = accessToken || '';
       let resp = await fetch(pageProxyUrl, { headers: { Authorization: `Bearer ${token}` } });
       if (!resp.ok && manifest) {
         // Fallback to thumbnail if the full image is not accessible yet
@@ -369,6 +370,7 @@ 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);
@@ -376,7 +378,7 @@ const ImageByProxy: React.FC<{ url: string; alt: string }> = ({ url, alt }) => {
     let revoked: string | null = null;
     const load = async () => {
       try {
-        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+        const token = accessToken || '';
         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 { supabase } from '../../../supabaseClient';
+import { useAuth } from '../../../contexts/AuthContext';
 
 type CanonicalDoclingConfig = {
   pipeline: 'standard' | 'vlm' | 'asr';
@@ -46,6 +46,7 @@ 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');
@@ -148,7 +149,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 = (await supabase.auth.getSession()).data.session?.access_token || '';
+      const token = accessToken || '';
       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();
@@ -225,14 +226,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
         });
         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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
         });
         if (!jsonRes.ok) return;
         const doc = await jsonRes.json();
@@ -242,7 +243,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+            headers: { 'Authorization': `Bearer ${accessToken || ''}` }
           });
           if (smRes.ok) {
             const sm = await smRes.json();
@@ -486,7 +487,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 = (await supabase.auth.getSession()).data.session?.access_token || '';
+              const token = accessToken || '';
               const body: CanonicalDoclingRequest = {
                 use_split_map: selectedSectionId === 'full' ? autoSplit : false,
                 config: {

src/pages/tldraw/CCDocumentIntelligence/CCEnhancedFilePanel.tsx

@@ -11,7 +11,8 @@ 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 { supabase } from '../../../supabaseClient';
+import CalendarViewMonth from '@mui/icons-material/CalendarViewMonth';
+import { useAuth } from '../../../contexts/AuthContext';
 
 // Types
 type PageImagesManifest = {
@@ -66,6 +67,7 @@ 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);
@@ -94,7 +96,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
       setError(null);
       
       try {
-        const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+        const token = accessToken || '';
         
         // Load page images manifest
         const manifestRes = await fetch(`${API_BASE}/database/files/${encodeURIComponent(fileId)}/page-images/manifest`, {
@@ -198,7 +200,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 = (await supabase.auth.getSession()).data.session?.access_token || '';
+      const token = accessToken || '';
       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 { supabase } from '../../../supabaseClient';
+import { useAuth } from '../../../contexts/AuthContext';
 
 type PageImagesManifest = {
   version: number;
@@ -54,6 +54,7 @@ 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);
@@ -73,7 +74,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+          headers: { 'Authorization': `Bearer ${accessToken || ''}` }
         });
         if (!mRes.ok) throw new Error(await mRes.text());
         const m: PageImagesManifest = await mRes.json();
@@ -82,14 +83,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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+            headers: { 'Authorization': `Bearer ${accessToken || ''}` }
           });
           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 ${(await supabase.auth.getSession()).data.session?.access_token || ''}` }
+                headers: { 'Authorization': `Bearer ${accessToken || ''}` }
               });
               if (jsonRes.ok) {
                 const outJson = await jsonRes.json();
@@ -118,7 +119,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 = (await supabase.auth.getSession()).data.session?.access_token || '';
+    const token = accessToken || '';
     const resp = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
     if (!resp.ok) return undefined;
     const blob = await resp.blob();
@@ -150,7 +151,7 @@ export const CCFileDetailPanel: React.FC<{
         <IconButton size="small" onClick={async () => {
           try {
             setShowAdmin(true);
-            const token = (await supabase.auth.getSession()).data.session?.access_token || '';
+            const token = accessToken || '';
             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/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx

@@ -34,6 +34,7 @@ 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';
@@ -145,7 +146,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
     return createTheme({
       palette: {
         mode,
-        divider: 'var(--color-divider)',
       },
     });
   }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
@@ -281,6 +281,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
         return <CCGraphPanel />;
       case 'search':
         return <CCSearchPanel />;
+      case 'navigation':
+        return <CCGraphNavPanel />;
       default:
         return null;
     }
@@ -386,9 +388,11 @@ 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 { supabase } from '../../../../../supabaseClient';
+import { useAuth } from '../../../../../contexts/AuthContext';
 import { useNavigate } from 'react-router-dom';
 import { 
   pickDirectory, 
@@ -75,7 +75,8 @@ interface UploadProgress {
 }
 
 export const CCFilesPanelEnhanced: React.FC = () => {
-  const { tldrawPreferences, authToken } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' }, authToken?: string };
+  const { tldrawPreferences } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' } };
+  const { user: authUser, accessToken } = useAuth();
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [cabinets, setCabinets] = useState<Cabinet[]>([]);
   const [selectedCabinet, setSelectedCabinet] = useState<string>('');
@@ -109,7 +110,7 @@ export const CCFilesPanelEnhanced: React.FC = () => {
 
   const apiFetch = async (url: string, init?: RequestInitLike) => {
     const headers: HeadersInitLike = {
-      'Authorization': `Bearer ${(await supabase.auth.getSession()).data.session?.access_token || authToken || ''}`,
+      'Authorization': `Bearer ${accessToken || ''}`,
       ...(init?.headers || {})
     };
     const fullUrl = url.startsWith('http') ? url : `${API_BASE}${url}`;
@@ -140,7 +141,7 @@ export const CCFilesPanelEnhanced: React.FC = () => {
     }
   };
 
-  useEffect(() => { loadCabinets(); }, []);
+  useEffect(() => { if (authUser?.id) { loadCabinets(); } }, [authUser?.id]);
   useEffect(() => { if (selectedCabinet) loadFiles(selectedCabinet); }, [selectedCabinet]);
 
   const handleSingleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {

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

@@ -0,0 +1,586 @@
+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 { UserNeoDBService } from '../../../../../../services/graph/userNeoDBService';
+import { useAuth } from '../../../../../../contexts/AuthContext';
 import { PageComponent } from '../components/pageComponent';
 import { logger } from '../../../../../../debugConfig';
 import { useTLDraw } from '../../../../../../contexts/TLDrawContext';
@@ -68,6 +68,7 @@ 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);
@@ -131,8 +132,9 @@ export const CCNodeSnapshotPanel: React.FC = () => {
         type: navigationContext.node.type
       });
 
-      const dbName = UserNeoDBService.getNodeDatabaseName(navigationContext.node);
+      const storagePath = navigationContext.node.node_storage_path;
-      await NavigationSnapshotService.saveNodeSnapshotToDatabase(navigationContext.node.id, dbName, editor.store);
+      if (!storagePath) throw new Error('No storage path on current node');
+      await NavigationSnapshotService.saveNodeSnapshotToDatabase(storagePath, accessToken || '', editor.store);
 
       addToast({
         title: 'Snapshot saved',

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

@@ -0,0 +1,316 @@
+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

@@ -0,0 +1,244 @@
+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>
+    );
+}