chore: preserve app workspace t_41bd9518

fix(exam): compact top bar, collapsible guide panel
Top bar reduced to single-line height: Back becomes an icon button, caption line removed (detail lives in the guide), Save button size=small. Guide panel defaults collapsed and toggles via a ? icon button at bottom-right so it doesn't occupy permanent canvas real estate. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
2026-08-09 20:24:43 +01:00 · 2026-06-07 13:37:47 +00:00 · 2026-06-07 12:36:21 +00:00 · 2026-06-07 10:12:16 +00:00 · 2026-06-07 04:35:34 +00:00 · 2026-06-07 04:31:02 +00:00
60 changed files with 3729 additions and 1699 deletions
@@ -47,3 +47,6 @@ docker-compose.override.yml
 # Local environment variants
 .env.dev
 .env.prod
 # Playwright test artifacts
 test-results/
@@ -19,6 +19,9 @@ FROM nginx:alpine
 # Copy built files
 COPY --from=builder /app/dist /usr/share/nginx/html
 # .mjs files (pdfjs worker) must be served as application/javascript for module workers
 RUN sed -i 's|application/javascript\s*js;|application/javascript js mjs;|' /etc/nginx/mime.types
 # Create a simple nginx configuration
 RUN echo 'server { \
    listen 3000; \
@@ -84,7 +84,6 @@
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "react-refresh": "^0.14.2",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.2.2",
    "vite-plugin-pwa": "^0.21.1",
    "vitest": "^1.6.0"
@@ -0,0 +1,18 @@
 import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
  testDir: './src/__tests__/e2e',
  testMatch: '**/*.spec.js',
  timeout: 30000,
  expect: { timeout: 5000 },
  fullyParallel: false,
  retries: 1,
  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
  webServer: undefined,
 });
@@ -1,6 +1,5 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-import': {},
  },
@@ -1,6 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { useTLDraw } from './contexts/TLDrawContext';
 import { theme } from './services/themeService';
 import { AuthProvider } from './contexts/AuthContext';
@@ -10,26 +11,40 @@ import AppRoutes from './AppRoutes';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import React from 'react';
-const App = React.memo(() => {
+/**
 * Syncs tldraw's color scheme to data-color-mode on <html>.
 * Must live inside TLDrawProvider so useTLDraw() reads live preferences.
 * This activates the [data-color-mode="dark"] overrides in cc-design-system.css.
 * tldraw itself uses tl-theme__dark class on .tl-container — we mirror that
 * to the document root so --cc-* token overrides apply globally.
 */
 const DarkModeSync: React.FC = () => {
  const { tldrawPreferences } = useTLDraw();
  const prefersDarkMode =
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-color-scheme: dark)').matches;
  useEffect(() => {
    const scheme = tldrawPreferences?.colorScheme ?? 'system';
    const isDark = scheme === 'dark' || (scheme === 'system' && prefersDarkMode);
    document.documentElement.setAttribute('data-color-mode', isDark ? 'dark' : 'light');
  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
  return null;
 };
 const App = React.memo(() => {
  const prefersDarkMode =
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-color-scheme: dark)').matches;
  const appTheme = useMemo(() => {
-    let mode: 'light' | 'dark';
+    // App is outside TLDrawProvider so tldrawPreferences is always null here.
-
+    // Theme defaults to OS preference; DarkModeSync (inside TLDrawProvider) handles
-    if (tldrawPreferences?.colorScheme === 'system') {
+    // updating data-color-mode once tldraw preferences are loaded.
-      mode = prefersDarkMode ? 'dark' : 'light';
+    const mode = prefersDarkMode ? 'dark' : 'light';
-    } else {
+    return createTheme({ palette: { mode } });
-      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+  }, [prefersDarkMode]);
    }
    return createTheme({
      palette: { mode },
    });
  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
  return (
    <ErrorBoundary>
@@ -37,7 +52,9 @@ const App = React.memo(() => {
        <AuthProvider>
          <UserProvider>
            <TLDrawProvider>
              <DarkModeSync />
              <ThemeProvider theme={appTheme}>
                <CssBaseline />
                <AppRoutes />
              </ThemeProvider>
            </TLDrawProvider>
@@ -31,7 +31,14 @@ vi.mock('./pages/NotFoundPublic', () => ({ default: () => <div>Public Not Found<
 vi.mock('./pages/tldraw/TLDrawCanvas', () => ({ default: () => <div>Public Home</div> }));
 vi.mock('./pages/tldraw/singlePlayerPage', () => ({ default: () => <div>Single Player</div> }));
 vi.mock('./pages/tldraw/multiplayerUser', () => ({ default: () => <div>Multiplayer</div> }));
-vi.mock('./pages/tldraw/CCExamMarker/CCExamMarker', () => ({ CCExamMarker: () => <div>Exam Marker</div> }));
+vi.mock('./pages/exam', () => ({
  ExamDashboardPage: () => <div>Exam Marker</div>,
  ExamTemplateSetupPage: () => <div>Exam Template Setup</div>,
  MarkSchemePage: () => <div>Mark Scheme editor</div>,
  ExamMarkingPage: () => <div>Exam Marking</div>,
  ExamResultsPage: () => <div>Exam Results</div>,
  ResultsWidget: () => <div>Results Widget</div>,
 }));
 vi.mock('./pages/user/calendarPage', () => ({ default: () => <div>Calendar</div> }));
 vi.mock('./pages/user/settingsPage', () => ({ default: () => <div>Settings</div> }));
 vi.mock('./pages/tldraw/devPlayerPage', () => ({ default: () => <div>TLDraw Dev</div> }));
@@ -46,6 +53,7 @@ vi.mock('./pages/tldraw/CCDocumentIntelligence/CCDocumentIntelligence', () => ({
 }));
 vi.mock('./pages/timetable', () => ({
  TimetablePage: () => <div>Timetable</div>,
  TimetableListPage: () => <div>Timetable List</div>,
  ClassesPage: () => <div>Classes</div>,
  LessonPage: () => <div>Lesson</div>,
  TaughtLessonsPage: () => <div>Taught Lessons</div>,
@@ -121,3 +129,22 @@ describe('/admin route authorization', () => {
    expect(screen.getByText('Platform Admin Page')).toBeInTheDocument();
  });
 });
 describe('exam-marker routes', () => {
  beforeEach(() => {
    mockUseAuth.mockReset();
  });
  it('renders the mark scheme editor route for authenticated users', () => {
    mockUseAuth.mockReturnValue(authState({
      user: { id: 'teacher-1', email: '[email protected]', user_type: 'email_teacher' },
      user_role: 'email_teacher',
      accessToken: 'token',
    }));
    renderAt('/exam-marker/template-123/marks');
    expect(screen.getByText('Mark Scheme editor')).toBeInTheDocument();
  });
 });
@@ -7,7 +7,8 @@ import LoginPage from './pages/auth/loginPage';
 import SignupPage from './pages/auth/signupPage';
 import SinglePlayerPage from './pages/tldraw/singlePlayerPage';
 import MultiplayerUser from './pages/tldraw/multiplayerUser';
-import { CCExamMarker } from './pages/tldraw/CCExamMarker/CCExamMarker';
+import { ExamDashboardPage, ExamMarkingPage, ExamResultsPage, ExamTemplateSetupPage, MarkSchemePage } from './pages/exam';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import CalendarPage from './pages/user/calendarPage';
 import SettingsPage from './pages/user/settingsPage';
 import TLDrawCanvas from './pages/tldraw/TLDrawCanvas';
@@ -30,6 +31,7 @@ import DashboardPage from './pages/user/dashboardPage';
 // Timetable Module Pages
 import {
  TimetablePage,
  TimetableListPage,
  ClassesPage,
  LessonPage,
  TaughtLessonsPage,
@@ -45,8 +47,6 @@ import {
 } from './pages/timetable';
 const FullContextRoutes: React.FC = () => {
  // Only block on Supabase profile being ready — Neo4j contexts initialize in the background.
  // Individual pages handle their own Neo4j loading states.
  const { isInitialized: isUserInitialized } = useUser();
  if (!isUserInitialized) {
@@ -68,6 +68,31 @@ const FullContextRoutes: React.FC = () => {
  return <Outlet />;
 };
 const RequireAuth: React.FC = () => {
  const { user, isAuthResolving } = useAuth();
  if (isAuthResolving) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh'
        }}
      >
        <CircularProgress />
      </div>
    );
  }
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <Outlet />;
 };
 const AppRoutes: React.FC = () => {
  const { user, user_role, loading: isAuthLoading } = useAuth();
  const location = useLocation();
@@ -136,10 +161,11 @@ const AppRoutes: React.FC = () => {
        />
        {/* Authentication only routes - only render if all contexts are initialized */}
-        {user && (
+        <Route element={<RequireAuth />}>
          <Route element={<FullContextRoutes />}>
            {/* Timetable Module Routes */}
-            <Route path="/timetable" element={<TimetablePage />} />
+            <Route path="/timetable" element={<TimetableListPage />} />
            <Route path="/timetable/:timetableId" element={<TimetablePage />} />
            <Route path="/classes" element={<ClassesPage />} />
            <Route path="/my-classes" element={<MyClassesPage />} />
            <Route path="/classes/:classId" element={<ClassDetailPage />} />
@@ -156,7 +182,11 @@ const AppRoutes: React.FC = () => {
            {/* Existing Routes */}
            <Route path="/search" element={<SearxngPage />} />
            <Route path="/teacher-planner" element={<TeacherPlanner />} />
-            <Route path="/exam-marker" element={<CCExamMarker />} />
+            <Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
            <Route path="/exam-marker/:templateId/setup" element={<ErrorBoundary><ExamTemplateSetupPage /></ErrorBoundary>} />
            <Route path="/exam-marker/:templateId/marks" element={<ErrorBoundary><MarkSchemePage /></ErrorBoundary>} />
            <Route path="/exam-marker/:batchId/mark" element={<ErrorBoundary><ExamMarkingPage /></ErrorBoundary>} />
            <Route path="/exam-marker/:batchId/results" element={<ErrorBoundary><ExamResultsPage /></ErrorBoundary>} />
            <Route path="/doc-intelligence/:fileId" element={<CCDocumentIntelligence />} />
            <Route path="/morphic" element={<MorphicPage />} />
            <Route path="/tldraw-dev" element={<TLDrawDevPage />} />
@@ -167,7 +197,7 @@ const AppRoutes: React.FC = () => {
            <Route path="/calendar" element={<CalendarPage />} />
            <Route path="/settings" element={<SettingsPage />} />
          </Route>
-        )}
+        </Route>
        {/* Fallback route - authenticated users go to dashboard, unauthenticated see public 404 */}
        <Route path="*" element={user ? <Navigate to="/dashboard" replace /> : <NotFoundPublic />} />
@@ -0,0 +1,47 @@
 import { test, expect, request } from '@playwright/test';
 const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
 const TEST_EMAIL = process.env.VITE_TEST_TEACHER_EMAIL;
 const TEST_PASSWORD = process.env.VITE_TEST_TEACHER_PASSWORD;
 async function serverReachable() {
  try {
    const ctx = await request.newContext();
    const res = await ctx.get(BASE, { timeout: 3000 }).catch(() => null);
    await ctx.dispose();
    return Boolean(res);
  } catch {
    return false;
  }
 }
 async function login(page) {
  await page.goto(`${BASE}/login`);
  await page.getByLabel('Email').fill(TEST_EMAIL);
  await page.getByLabel('Password').fill(TEST_PASSWORD);
  await page.getByRole('button', { name: 'Login' }).click();
  await page.waitForURL((url) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 15000 });
 }
 function skipIfUnconfigured() {
  if (!TEST_EMAIL || !TEST_PASSWORD) test.skip(true, 'VITE_TEST_TEACHER_EMAIL / VITE_TEST_TEACHER_PASSWORD not set');
 }
 test.describe('Canvas mount', () => {
  test.beforeAll(async () => {
    skipIfUnconfigured();
    const reachable = await serverReachable();
    test.skip(!reachable, `Dev server not reachable at ${BASE}`);
  });
  test('login and show lesson canvas within 5s', async ({ page }) => {
    await login(page);
    const canvasVisible = await page
      .locator('[data-testid="tldraw-canvas"], .tl-container')
      .waitFor({ timeout: 10000 })
      .then(() => true)
      .catch(() => false);
    expect(canvasVisible).toBe(true);
    await expect(page.locator('[class*="error-state"], [data-testid="error"]').first()).toBeHidden({ timeout: 2000 }).catch(() => {});
  });
 });
@@ -0,0 +1,39 @@
 /// <reference types="@playwright/test" />
 import { test, expect } from '@playwright/test';
 const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
 test.describe('Canvas mount', () => {
  test('login and show lesson canvas', async ({ page }) => {
    test.setTimeout(60000);
    await page.goto(`${BASE}/login`);
    const email = process.env.VITE_TEST_TEACHER_EMAIL || 'teacher@test';
    const password = process.env.VITE_TEST_TEACHER_PASSWORD || 'password';
    await page.getByLabel('Email').fill(email);
    await page.getByLabel('Password').fill(password);
    await page.getByRole('button', { name: /sign in|log in/i }).click();
    await page.waitForURL((url: URL) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 12000 });
    async function pingOk() {
      try {
        const r = await page.request.get(new URL('/api/health', BASE).toString(), { timeout: 4000 }).catch(
          () => null as any
        );
        return Boolean(r && (r as any).ok());
      } catch {
        return false;
      }
    }
    if (!(await pingOk())) test.skip(true, 'Dev server not reachable at ' + BASE);
    const canvasVisible = page
      .locator('[data-testid="tldraw-canvas"], .tl-container')
      .waitFor({ timeout: 8000 })
      .then(() => true)
      .catch(() => false);
    expect((await canvasVisible)).toBe(true);
    await expect(page.getByText(/error|failed to load/i).first()).toBeHidden();
  });
 });
@@ -0,0 +1,54 @@
 import { test, expect, request } from '@playwright/test';
 const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
 const TEST_EMAIL = process.env.VITE_TEST_TEACHER_EMAIL;
 const TEST_PASSWORD = process.env.VITE_TEST_TEACHER_PASSWORD;
 async function serverReachable() {
  try {
    const ctx = await request.newContext();
    const res = await ctx.get(BASE, { timeout: 3000 }).catch(() => null);
    await ctx.dispose();
    return Boolean(res);
  } catch {
    return false;
  }
 }
 async function login(page) {
  await page.goto(`${BASE}/login`);
  await page.getByLabel('Email').fill(TEST_EMAIL);
  await page.getByLabel('Password').fill(TEST_PASSWORD);
  await page.getByRole('button', { name: 'Login' }).click();
  await page.waitForURL((url) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 15000 });
 }
 function skipIfUnconfigured() {
  if (!TEST_EMAIL || !TEST_PASSWORD) test.skip(true, 'VITE_TEST_TEACHER_EMAIL / VITE_TEST_TEACHER_PASSWORD not set');
 }
 test.describe('Node navigation', () => {
  test.beforeAll(async () => {
    skipIfUnconfigured();
    const reachable = await serverReachable();
    test.skip(!reachable, `Dev server not reachable at ${BASE}`);
  });
  test('canvas remounts cleanly on node navigation', async ({ page }) => {
    const errors = [];
    page.on('pageerror', err => errors.push(err.message));
    await login(page);
    await page.locator('[data-testid="tldraw-canvas"], .tl-container').waitFor({ timeout: 10000 });
    const navLinks = page.locator('nav a, [data-testid="nav-node"]');
    const count = await navLinks.count();
    if (count > 1) {
      await navLinks.nth(1).click();
      await page.waitForTimeout(2000);
      const hasCanvas = await page.locator('[data-testid="tldraw-canvas"], .tl-container')
        .waitFor({ timeout: 8000 }).then(() => true).catch(() => false);
      expect(hasCanvas).toBe(true);
    }
    const criticalErrors = errors.filter(e => /uncaught|undefined is not/i.test(e));
    expect(criticalErrors).toHaveLength(0);
  });
 });
@@ -0,0 +1,47 @@
 /// <reference types="@playwright/test" />
 import { test, expect } from '@playwright/test';
 const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
 test.describe('Node navigation', () => {
  test('canvas remounts on node change', async ({ page }) => {
    test.setTimeout(60000);
    async function serverReachable() {
      try {
        const res = await page.request.get(new URL('/api/health', BASE).toString(), { timeout: 4000 }).catch(
          () => null as any
        );
        return Boolean(res && (res as any).ok());
      } catch {
        return false;
      }
    }
    if (!(await serverReachable())) test.skip(true, 'Dev server not reachable at ' + BASE);
    const consoleMessages: string[] = [];
    page.on('console', (msg: any) => consoleMessages.push((msg.text() as string) || ''));
    page.on('pageerror', (err: any) => consoleMessages.push('pageerror: ' + ((err.message as string) || 'unknown')));
    await page.goto(`${BASE}/login`);
    const email = process.env.VITE_TEST_TEACHER_EMAIL || 'teacher@test';
    const password = process.env.VITE_TEST_TEACHER_PASSWORD || 'password';
    await page.getByLabel('Email').fill(email);
    await page.getByLabel('Password').fill(password);
    await page.getByRole('button', { name: /sign in|log in/i }).click();
    await page.waitForURL((url: URL) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 12000 });
    const canvas = page.locator('[data-testid="tldraw-canvas"], .tl-container');
    if ((await canvas.count()) === 0) await canvas.first().waitFor({ timeout: 8000 });
    await canvas.first().waitFor({ state: 'visible', timeout: 8000 });
    const nodes = page.locator('a[href*="/node/"]').first();
    if ((await nodes.count()) === 0) test.skip(true, 'No node navigation links found');
    await nodes.click();
    await page.waitForURL((url: URL) => /\/node\/\d+/.test(url.pathname), { timeout: 12000 });
    await expect(canvas.first()).toBeVisible();
    const errorTexts = consoleMessages.some((m) => /error|failed/i.test(m));
    expect(errorTexts).toBe(false);
  });
 });
@@ -0,0 +1,54 @@
 import { test, expect, request } from '@playwright/test';
 const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
 const TEST_EMAIL = process.env.VITE_TEST_TEACHER_EMAIL;
 const TEST_PASSWORD = process.env.VITE_TEST_TEACHER_PASSWORD;
 async function serverReachable() {
  try {
    const ctx = await request.newContext();
    const res = await ctx.get(BASE, { timeout: 3000 }).catch(() => null);
    await ctx.dispose();
    return Boolean(res);
  } catch {
    return false;
  }
 }
 async function login(page) {
  await page.goto(`${BASE}/login`);
  await page.getByLabel('Email').fill(TEST_EMAIL);
  await page.getByLabel('Password').fill(TEST_PASSWORD);
  await page.getByRole('button', { name: 'Login' }).click();
  await page.waitForURL((url) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 15000 });
 }
 function skipIfUnconfigured() {
  if (!TEST_EMAIL || !TEST_PASSWORD) test.skip(true, 'VITE_TEST_TEACHER_EMAIL / VITE_TEST_TEACHER_PASSWORD not set');
 }
 test.describe('Transcription toggle', () => {
  test.beforeAll(async () => {
    skipIfUnconfigured();
    const reachable = await serverReachable();
    test.skip(!reachable, `Dev server not reachable at ${BASE}`);
  });
  test('record button toggles isRecording state', async ({ page, context }) => {
    await context.grantPermissions(['microphone']);
    await login(page);
    await page.locator('[data-testid="tldraw-canvas"], .tl-container').waitFor({ timeout: 10000 });
    const recordBtn = page.locator('[data-testid="record-button"], button[aria-label*="ecord" i]').first();
    const btnVisible = await recordBtn.waitFor({ timeout: 5000 }).then(() => true).catch(() => false);
    if (btnVisible) {
      const labelBefore = await recordBtn.getAttribute('aria-label').catch(() => '');
      await recordBtn.click();
      await page.waitForTimeout(1000);
      const labelAfter = await recordBtn.getAttribute('aria-label').catch(() => '');
      expect(labelBefore).not.toEqual(labelAfter);
      await recordBtn.click();
    } else {
      test.skip(true, 'Record button not visible on current node type');
    }
  });
 });
@@ -0,0 +1,41 @@
 /// <reference types="@playwright/test" />
 import { test, expect } from '@playwright/test';
 const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
 test.describe('Transcription toggle', () => {
  test('record and stop preserve segments', async ({ page }) => {
    test.setTimeout(60000);
    async function serverReachable() {
      try {
        const res = await page.request.get(new URL('/api/health', BASE).toString(), { timeout: 4000 }).catch(
          () => null as any
        );
        return Boolean(res && (res as any).ok());
      } catch {
        return false;
      }
    }
    if (!(await serverReachable())) test.skip(true, 'Dev server not reachable at ' + BASE);
    await page.goto(`${BASE}/login`);
    const email = process.env.VITE_TEST_TEACHER_EMAIL || 'teacher@test';
    const password = process.env.VITE_TEST_TEACHER_PASSWORD || 'password';
    await page.getByLabel('Email').fill(email);
    await page.getByLabel('Password').fill(password);
    await page.getByRole('button', { name: /sign in|log in/i }).click();
    await page.waitForURL((url: URL) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 12000 });
    const recordButton = page.locator('[data-testid="record-button"], button[aria-label*="record" i], button[aria-label*="Record" i]').first();
    if ((await recordButton.count()) === 0) test.skip(true, 'No transcription record control found');
    const beforeCount = await page.locator('[data-testid="segment"], .segment, .transcription-segment').count();
    await recordButton.click();
    await expect(recordButton).toHaveAttribute('aria-pressed', 'true');
    await recordButton.click();
    const afterCount = await page.locator('[data-testid="segment"], .segment, .transcription-segment').count();
    expect(afterCount).toBeGreaterThanOrEqual(beforeCount);
  });
 });
@@ -18,6 +18,7 @@ export interface AuthContextType {
  signOut: () => Promise<void>;
  clearError: () => void;
  bootstrapData: BootstrapResponse | null;
  isAuthResolving: boolean;
 }
 export const AuthContext = createContext<AuthContextType>({
@@ -29,7 +30,8 @@ export const AuthContext = createContext<AuthContextType>({
  signIn: async () => {},
  signOut: async () => {},
  clearError: () => {},
-  bootstrapData: null
+  bootstrapData: null,
  isAuthResolving: false
 });
 export function AuthProvider({ children }: { children: React.ReactNode }) {
@@ -40,6 +42,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  const [bootstrapData, setBootstrapData] = useState<BootstrapResponse | null>(null);
  const [isAuthResolving, setIsAuthResolving] = useState(false);
  const persistSession = useCallback((session: Session | null) => {
@@ -92,6 +95,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        if (event === 'SIGNED_IN') {
          persistSession(session ?? null);
          setIsAuthResolving(!!session?.user);
          if (session?.user) {
            try {
              const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
@@ -112,11 +116,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
            setAccessToken(null);
          }
          setLoading(false);
          setIsAuthResolving(false);
          return;
        }
        if (event === 'INITIAL_SESSION' || event === 'TOKEN_REFRESHED') {
          persistSession(session ?? null);
          setIsAuthResolving(!!session?.user);
          if (session?.user) {
            try {
              const { user: resolvedUser, role } = await buildUserFromSupabase(session.user);
@@ -137,11 +143,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
            setAccessToken(null);
          }
          setLoading(false);
          setIsAuthResolving(false);
          return;
        }
        if (event === 'SIGNED_OUT') {
          persistSession(null);
          setIsAuthResolving(false);
          setUser(null);
          setUserRole(null);
          setAccessToken(null);
@@ -214,7 +222,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        signIn,
        signOut,
        clearError,
-        bootstrapData
+        bootstrapData,
        isAuthResolving
      }}
    >
      {children}
@@ -23,6 +23,7 @@ export type LogCategory =
  | 'neo-institute-context'
  | 'auth-service'
  | 'graph-service'
  | 'graph-sidebar'
  | 'registration-service'
  | 'provisioning-service'
  | 'snapshot-service'
@@ -1,7 +1,6 @@
 /* src/index.css */
-@tailwind base;
+/* Tailwind removed — utility classes provided by tailwind-compat.css shim */
-@tailwind components;
+@import './tailwind-compat.css';
@tailwind utilities;
 /* Base styles */
 html,
@@ -6,34 +6,50 @@ import { EmailLoginForm } from './EmailLoginForm';
 import { EmailCredentials } from '../../services/auth/authService';
 import { logger } from '../../debugConfig';
 const getLoginErrorMessage = (error: unknown): string => {
  const status = (error as { status?: number } | null)?.status;
  const code = (error as { code?: string } | null)?.code;
  if (code === 'email_not_confirmed' || status === 401 && code === 'invalid_grant') {
    return 'Please confirm your email before logging in';
  }
  if (status === 401 || code === 'invalid_grant') {
    return 'Invalid email or password';
  }
  return error instanceof Error ? error.message : 'Login failed';
 };
 const LoginPage: React.FC = () => {
  const navigate = useNavigate();
-  const { user, signIn } = useAuth();
+  const { user, signIn, isAuthResolving } = useAuth();
  const [error, setError] = useState<string | null>(null);
  logger.debug('login-page', '🔍 Login page loaded', { 
-    hasUser: !!user
+    hasUser: !!user,
    isAuthResolving
  });
  useEffect(() => {
-    if (user) {
+    if (!isAuthResolving && user) {
      navigate('/dashboard');
    }
-  }, [user, navigate]);
+  }, [user, isAuthResolving, navigate]);
  const handleLogin = async (credentials: EmailCredentials) => {
    try {
      setError(null);
      await signIn(credentials.email, credentials.password);
      navigate('/dashboard');
    } catch (error) {
      logger.error('login-page', '❌ Login failed', error);
-      setError(error instanceof Error ? error.message : 'Login failed');
+      const message = getLoginErrorMessage(error);
      setError(message);
      throw error;
    }
  };
-  if (user) {
+  if (user && !isAuthResolving) {
    return null;
  }
@@ -13,7 +13,7 @@ import { EmailSignupForm } from './EmailSignupForm';
 import { EmailCredentials } from '../../services/auth/authService';
 import { RegistrationService } from '../../services/auth/registrationService';
 import { logger } from '../../debugConfig';
-import MicrosoftIcon from '@mui/icons-material/Microsoft';
+import MicrosoftIcon from '@mui/icons-material/Microsoft.js';
 const SignupPage: React.FC = () => {
  const location = useLocation();
@@ -31,6 +31,7 @@ import {
 } from '@mui/material';
 import {
  CloudUpload as UploadIcon,
  Upload,
  Folder as FolderIcon,
  FolderOpen as FolderOpenIcon,
  Description as FileIcon,
@@ -39,8 +40,12 @@ import {
  PlayArrow as ProcessIcon,
  CheckCircle as SuccessIcon,
  Error as ErrorIcon,
-  Info as InfoIcon
+  Info as InfoIcon,
  InsertDriveFile,
 } from '@mui/icons-material';
 const FolderOpen = FolderOpenIcon;
 const Refresh = RefreshIcon;
 const Info = InfoIcon;
 import { supabase } from '../../supabaseClient';
 import {
  pickDirectory,
@@ -0,0 +1,385 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
  Alert,
  Box,
  Button,
  Chip,
  CircularProgress,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
  Paper,
  Stack,
  TextField,
  Tooltip,
  Typography,
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import EditIcon from '@mui/icons-material/Edit';
 import GradingIcon from '@mui/icons-material/Grading';
 import { useAuth } from '../../contexts/AuthContext';
 import { examRepository } from '../../services/exam/examRepository';
 import type { ExamTemplate } from '../../types/exam.types';
 import { logger } from '../../debugConfig';
 const STATUS_COLOR: Record<string, 'default' | 'info' | 'success' | 'warning'> = {
  draft: 'warning',
  ready: 'success',
  archived: 'default',
 };
 const VERSION_SEPARATOR = ' · ';
 const VERSION_RE = /(?:^|\s)[vV](\d+(?:\.\d+)*)$/;
 type DialogMode = 'create' | 'edit' | 'duplicate';
 type TemplateDialogState = {
  mode: DialogMode;
  template?: ExamTemplate;
 } | null;
 function splitTemplateTitle(title: string): { name: string; version: string } {
  const parts = title.split(VERSION_SEPARATOR);
  const possibleVersion = parts[parts.length - 1]?.trim() ?? '';
  if (parts.length > 1 && VERSION_RE.test(possibleVersion)) {
    return { name: parts.slice(0, -1).join(VERSION_SEPARATOR).trim(), version: possibleVersion };
  }
  return { name: title, version: 'v1' };
 }
 function composeTemplateTitle(name: string, version: string): string {
  const cleanName = name.trim();
  const cleanVersion = version.trim();
  return cleanVersion ? `${cleanName}${VERSION_SEPARATOR}${cleanVersion}` : cleanName;
 }
 function nextVersionLabel(version: string): string {
  const match = version.trim().match(VERSION_RE);
  if (!match) return 'v2';
  const segments = match[1].split('.');
  const last = Number(segments[segments.length - 1]);
  segments[segments.length - 1] = Number.isFinite(last) ? String(last + 1) : '2';
  return `v${segments.join('.')}`;
 }
 function paperKey(t: ExamTemplate): string {
  return t.exam_id ?? t.source_file_id ?? t.exam_code ?? t.subject ?? 'custom-paper';
 }
 function paperLabel(t: ExamTemplate): string {
  if (t.exam_code) return t.exam_code;
  if (t.subject) return t.subject;
  if (t.source_file_id) return 'Uploaded paper';
  return 'Custom paper';
 }
 const ExamDashboardPage: React.FC = () => {
  const navigate = useNavigate();
  const { bootstrapData } = useAuth();
  const instituteId = bootstrapData?.active_institute?.id ?? undefined;
  const [templates, setTemplates] = useState<ExamTemplate[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [dialog, setDialog] = useState<TemplateDialogState>(null);
  const [templateName, setTemplateName] = useState('');
  const [version, setVersion] = useState('v1');
  const [subject, setSubject] = useState('');
  const [saving, setSaving] = useState(false);
  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setTemplates(await examRepository.listTemplates());
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.warn('cc-exam-marker', 'Failed to load templates', { message: msg });
      setError(msg);
    } finally {
      setLoading(false);
    }
  }, []);
  useEffect(() => {
    void load();
  }, [load, instituteId]);
  const groupedTemplates = useMemo(() => {
    const groups = new Map<string, { label: string; templates: ExamTemplate[] }>();
    templates.forEach((template) => {
      const key = paperKey(template);
      const existing = groups.get(key);
      if (existing) {
        existing.templates.push(template);
      } else {
        groups.set(key, { label: paperLabel(template), templates: [template] });
      }
    });
    return Array.from(groups.entries()).map(([key, group]) => ({ key, ...group }));
  }, [templates]);
  const openCreate = () => {
    setTemplateName('New template');
    setVersion('v1');
    setSubject('');
    setDialog({ mode: 'create' });
  };
  const openEdit = (template: ExamTemplate, ev: React.MouseEvent) => {
    ev.stopPropagation();
    const parsed = splitTemplateTitle(template.title);
    setTemplateName(parsed.name);
    setVersion(parsed.version);
    setSubject(template.subject ?? '');
    setDialog({ mode: 'edit', template });
  };
  const openDuplicate = (template: ExamTemplate, ev: React.MouseEvent) => {
    ev.stopPropagation();
    const parsed = splitTemplateTitle(template.title);
    setTemplateName(parsed.name);
    setVersion(nextVersionLabel(parsed.version));
    setSubject(template.subject ?? '');
    setDialog({ mode: 'duplicate', template });
  };
  const closeDialog = () => {
    if (!saving) setDialog(null);
  };
  const handleSaveDialog = async () => {
    if (!dialog || !templateName.trim()) return;
    const title = composeTemplateTitle(templateName, version);
    setSaving(true);
    try {
      if (dialog.mode === 'create') {
        const created = await examRepository.createTemplate({
          title,
          subject: subject.trim() || undefined,
          institute_id: instituteId,
        });
        setDialog(null);
        navigate(`/exam-marker/${created.id}/setup`);
        return;
      }
      if (!dialog.template) return;
      if (dialog.mode === 'duplicate') {
        const created = await examRepository.duplicateTemplate(dialog.template.id, title);
        setTemplates((prev) => [created, ...prev]);
        setDialog(null);
        navigate(`/exam-marker/${created.id}/setup`);
        return;
      }
      const updated = await examRepository.updateTemplateMeta(dialog.template.id, {
        title,
        subject: subject.trim() || null,
      });
      setTemplates((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
      setDialog(null);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Template action failed', { message: msg, mode: dialog.mode });
      setError(msg);
    } finally {
      setSaving(false);
    }
  };
  const handleArchive = async (template: ExamTemplate, ev: React.MouseEvent) => {
    ev.stopPropagation();
    const parsed = splitTemplateTitle(template.title);
    if (!window.confirm(`Archive ${parsed.name} ${parsed.version}? This hides it from the dashboard but keeps the work recoverable.`)) {
      return;
    }
    try {
      await examRepository.archiveTemplate(template.id);
      setTemplates((prev) => prev.filter((t) => t.id !== template.id));
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Archive failed', { message: msg });
      setError(msg);
    }
  };
  const dialogTitle = dialog?.mode === 'edit'
    ? 'Rename template / edit version'
    : dialog?.mode === 'duplicate'
      ? 'Duplicate as new version'
      : 'New exam template';
  return (
    <Container maxWidth="lg" sx={{ py: 6 }}>
      <Stack spacing={4}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
          <Box>
            <Typography variant="h3" component="h1" gutterBottom>
              Exam Marker
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 620 }}>
              Build multiple named templates for the same paper, version them as your setup changes, and archive drafts you no longer need.
            </Typography>
          </Box>
          <Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
            New template
          </Button>
        </Box>
        {error && (
          <Alert severity="error" onClose={() => setError(null)}>
            {error}
          </Alert>
        )}
        {loading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
            <CircularProgress />
          </Box>
        ) : templates.length === 0 ? (
          <Paper variant="outlined" sx={{ p: 6, textAlign: 'center' }}>
            <AssignmentIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
            <Typography variant="h6" gutterBottom>No exam templates yet</Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              Create your first named template to start mapping an exam paper.
            </Typography>
            <Button variant="outlined" startIcon={<AddIcon />} onClick={openCreate}>
              New template
            </Button>
          </Paper>
        ) : (
          <Stack spacing={3}>
            {groupedTemplates.map((group) => (
              <Box key={group.key}>
                <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1 }}>
                  <Typography variant="h6">{group.label}</Typography>
                  <Chip size="small" label={`${group.templates.length} template${group.templates.length === 1 ? '' : 's'}`} variant="outlined" />
                </Stack>
                <Grid container spacing={3}>
                  {group.templates.map((t) => {
                    const parsed = splitTemplateTitle(t.title);
                    return (
                      <Grid item xs={12} sm={6} md={4} key={t.id}>
                        <Paper
                          elevation={2}
                          sx={{
                            p: 3,
                            height: '100%',
                            cursor: 'pointer',
                            display: 'flex',
                            flexDirection: 'column',
                            gap: 1,
                            transition: 'box-shadow 120ms',
                            '&:hover': { boxShadow: 6 },
                          }}
                          onClick={() => navigate(`/exam-marker/${t.id}/setup`)}
                        >
                          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
                            <Box sx={{ minWidth: 0 }}>
                              <Typography variant="h6" sx={{ pr: 1 }}>{parsed.name}</Typography>
                              <Chip size="small" label={parsed.version} color="info" variant="outlined" sx={{ mt: 0.5 }} />
                            </Box>
                            <Stack direction="row" spacing={0.5}>
                              <Tooltip title="Rename / edit version">
                                <IconButton size="small" onClick={(e) => openEdit(t, e)} aria-label="rename template">
                                  <EditIcon fontSize="small" />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Duplicate as new version">
                                <IconButton size="small" onClick={(e) => openDuplicate(t, e)} aria-label="duplicate template">
                                  <ContentCopyIcon fontSize="small" />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Archive">
                                <IconButton size="small" onClick={(e) => handleArchive(t, e)} aria-label="archive template">
                                  <ArchiveIcon fontSize="small" />
                                </IconButton>
                              </Tooltip>
                            </Stack>
                          </Box>
                          {t.subject && (
                            <Typography variant="body2" color="text.secondary">{t.subject}</Typography>
                          )}
                          {t.exam_code && (
                            <Typography variant="caption" color="text.secondary">{t.exam_code}</Typography>
                          )}
                          <Box sx={{ mt: 'auto', pt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <Chip size="small" label={t.status} color={STATUS_COLOR[t.status] ?? 'default'} variant="outlined" />
                            <Typography variant="caption" color="text.secondary">
                              Updated {new Date(t.updated_at).toLocaleDateString()}
                            </Typography>
                          </Box>
                          <Stack direction="row" spacing={1} sx={{ pt: 0.5 }}>
                            <Button
                              size="small"
                              variant="outlined"
                              onClick={(e) => { e.stopPropagation(); navigate(`/exam-marker/${t.id}/marks`); }}
                              startIcon={<GradingIcon fontSize="small" />}
                            >
                              Edit marks
                            </Button>
                          </Stack>
                        </Paper>
                      </Grid>
                    );
                  })}
                </Grid>
              </Box>
            ))}
          </Stack>
        )}
      </Stack>
      <Dialog open={Boolean(dialog)} onClose={closeDialog} fullWidth maxWidth="sm">
        <DialogTitle>{dialogTitle}</DialogTitle>
        <DialogContent>
          <Stack spacing={2} sx={{ mt: 1 }}>
            <TextField
              label="Template name"
              value={templateName}
              onChange={(e) => setTemplateName(e.target.value)}
              fullWidth
              autoFocus
              required
              helperText="User-facing name. Several templates can share the same paper."
            />
            <TextField
              label="Version"
              value={version}
              onChange={(e) => setVersion(e.target.value)}
              fullWidth
              helperText="Stored in the template title until the API grows a dedicated version column."
            />
            <TextField
              label="Paper / subject label"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              fullWidth
              disabled={dialog?.mode === 'duplicate'}
            />
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button onClick={closeDialog} disabled={saving}>Cancel</Button>
          <Button variant="contained" onClick={handleSaveDialog} disabled={saving || !templateName.trim()}>
            {saving ? 'Saving…' : dialog?.mode === 'duplicate' ? 'Create version' : 'Save'}
          </Button>
        </DialogActions>
      </Dialog>
    </Container>
  );
 };
 export default ExamDashboardPage;
@@ -0,0 +1,233 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { v5 as uuidv5 } from 'uuid';
 import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  Container,
  Divider,
  List,
  ListItemButton,
  ListItemText,
  Stack,
  TextField,
  Typography,
 } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SaveIcon from '@mui/icons-material/Save';
 import TableChartIcon from '@mui/icons-material/TableChart';
 import { examRepository } from '../../services/exam/examRepository';
 import type { BatchQueueResponse, ExamQuestion, ExamTemplateDetail, StudentSubmission } from '../../types/exam.types';
 const MARK_NAMESPACE = '3f2dbbeb-9b15-4f99-9b71-8c535f8dc3d0';
 function stableMarkId(batchId: string, submissionId: string, questionId: string) {
  return uuidv5(`${batchId}:${submissionId}:${questionId}`, MARK_NAMESPACE);
 }
 const ExamMarkingPage: React.FC = () => {
  const { batchId } = useParams<{ batchId: string }>();
  const navigate = useNavigate();
  const [queue, setQueue] = useState<BatchQueueResponse | null>(null);
  const [template, setTemplate] = useState<ExamTemplateDetail | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [marks, setMarks] = useState<Record<string, string>>({});
  const [comments, setComments] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const load = useCallback(async () => {
    if (!batchId) return;
    setLoading(true);
    setError(null);
    try {
      const nextQueue = await examRepository.getBatchQueue(batchId);
      setQueue(nextQueue);
      setTemplate(await examRepository.getTemplate(nextQueue.batch.template_id));
      setSelectedId((current) => current ?? nextQueue.submissions[0]?.id ?? null);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }, [batchId]);
  useEffect(() => {
    void load();
  }, [load]);
  const markableQuestions = useMemo(
    () => (template?.questions ?? []).filter((q) => !q.is_container).sort((a, b) => a.order - b.order),
    [template],
  );
  const selected = queue?.submissions.find((s) => s.id === selectedId) ?? null;
  const saveSelected = async () => {
    if (!batchId || !selected) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      const writes = markableQuestions
        .map((q) => ({ q, raw: marks[q.id], comment: comments[q.id] }))
        .filter(({ raw, comment }) => raw !== undefined && raw !== '' || !!comment?.trim());
      for (const { q, raw, comment } of writes) {
        const awarded = raw === undefined || raw === '' ? 0 : Number(raw);
        if (Number.isNaN(awarded) || awarded < 0 || awarded > (q.max_marks ?? Number.MAX_SAFE_INTEGER)) {
          throw new Error(`Invalid mark for ${q.label}`);
        }
        await examRepository.upsertMark(stableMarkId(batchId, selected.id, q.id), {
          submission_id: selected.id,
          question_id: q.id,
          awarded_marks: awarded,
          comment: comment?.trim() || undefined,
          confirmed: true,
        });
      }
      setMessage(`Saved ${writes.length} mark${writes.length === 1 ? '' : 's'} for ${selected.student_name || selected.student_id || 'student'}.`);
      setMarks({});
      setComments({});
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
    }
  };
  const chooseStudent = (submission: StudentSubmission) => {
    setSelectedId(submission.id);
    setMarks({});
    setComments({});
    setMessage(null);
  };
  if (loading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>;
  }
  if (error && !queue) {
    return (
      <Container maxWidth="lg" sx={{ py: 4 }}>
        <Alert severity="error">{error}</Alert>
        <Button sx={{ mt: 2 }} startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')}>
          Back to Exam Marker
        </Button>
      </Container>
    );
  }
  return (
    <Container maxWidth="xl" sx={{ py: 3 }}>
      <Stack spacing={2}>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap' }}>
          <Box>
            <Button size="small" startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>
              Exam Marker
            </Button>
            <Typography variant="h4" component="h1" fontWeight={700}>{queue?.batch.title || 'Mark exam'}</Typography>
            <Typography variant="body2" color="text.secondary">
              {template?.title || queue?.batch.template_id} · {queue?.progress.total ?? 0} students in queue
            </Typography>
          </Box>
          <Button variant="outlined" startIcon={<TableChartIcon />} onClick={() => batchId && navigate(`/exam-marker/${batchId}/results`)}>
            Results
          </Button>
        </Box>
        {error && <Alert severity="error" onClose={() => setError(null)}>{error}</Alert>}
        {message && <Alert severity="success" onClose={() => setMessage(null)}>{message}</Alert>}
        {markableQuestions.length === 0 && (
          <Alert severity="warning">
            This template has no markable parts yet. Add parts in template setup before entering marks.
          </Alert>
        )}
        <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} alignItems="stretch">
          <Card variant="outlined" sx={{ width: { xs: '100%', md: 340 }, flexShrink: 0 }}>
            <CardContent>
              <Typography variant="h6" gutterBottom>Marking queue</Typography>
              <Stack direction="row" spacing={1} sx={{ mb: 1 }} flexWrap="wrap" useFlexGap>
                <Chip size="small" label={`${queue?.progress.total ?? 0} total`} />
                <Chip size="small" label={`${queue?.progress.absent ?? 0} absent`} color="warning" variant="outlined" />
                <Chip size="small" label={`${queue?.progress.complete ?? 0} complete`} color="success" variant="outlined" />
              </Stack>
              <List dense disablePadding>
                {(queue?.submissions ?? []).map((submission) => (
                  <ListItemButton
                    key={submission.id}
                    selected={submission.id === selectedId}
                    onClick={() => chooseStudent(submission)}
                    sx={{ borderRadius: 1, mb: 0.5 }}
                  >
                    <ListItemText
                      primary={submission.student_name || submission.student_id || 'Unknown student'}
                      secondary={`${submission.status} · ${submission.mark_entry_count ?? 0} marks`}
                    />
                    <Chip size="small" label={submission.status} color={submission.status === 'absent' ? 'warning' : 'default'} variant="outlined" />
                  </ListItemButton>
                ))}
              </List>
            </CardContent>
          </Card>
          <Card variant="outlined" sx={{ flex: 1 }}>
            <CardContent>
              {selected ? (
                <Stack spacing={2}>
                  <Box>
                    <Typography variant="h6">{selected.student_name || selected.student_id || 'Unknown student'}</Typography>
                    <Typography variant="body2" color="text.secondary">Status: {selected.status}</Typography>
                  </Box>
                  <Divider />
                  {markableQuestions.map((q: ExamQuestion) => (
                    <Stack key={q.id} direction={{ xs: 'column', sm: 'row' }} spacing={1.5} alignItems={{ xs: 'stretch', sm: 'center' }}>
                      <Box sx={{ minWidth: 150 }}>
                        <Typography variant="body2" fontWeight={700}>{q.label}</Typography>
                        <Typography variant="caption" color="text.secondary">/ {q.max_marks} marks</Typography>
                      </Box>
                      <TextField
                        label="Mark"
                        type="number"
                        size="small"
                        inputProps={{ min: 0, max: q.max_marks, step: 0.5 }}
                        value={marks[q.id] ?? ''}
                        onChange={(e) => setMarks((prev) => ({ ...prev, [q.id]: e.target.value }))}
                        sx={{ width: { xs: '100%', sm: 120 } }}
                      />
                      <TextField
                        label="Comment"
                        size="small"
                        value={comments[q.id] ?? ''}
                        onChange={(e) => setComments((prev) => ({ ...prev, [q.id]: e.target.value }))}
                        sx={{ flex: 1 }}
                      />
                    </Stack>
                  ))}
                  <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
                    <Button onClick={() => navigate(`/exam-marker/${batchId}/results`)}>Skip to results</Button>
                    <Button variant="contained" startIcon={<SaveIcon />} onClick={saveSelected} disabled={saving || markableQuestions.length === 0}>
                      {saving ? 'Saving…' : 'Save marks'}
                    </Button>
                  </Box>
                </Stack>
              ) : (
                <Typography color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>No submissions in this batch.</Typography>
              )}
            </CardContent>
          </Card>
        </Stack>
      </Stack>
    </Container>
  );
 };
 export default ExamMarkingPage;
@@ -0,0 +1,177 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
  Alert,
  Box,
  Button,
  Chip,
  CircularProgress,
  Container,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
 } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import DownloadIcon from '@mui/icons-material/Download';
 import EditIcon from '@mui/icons-material/Edit';
 import { examRepository } from '../../services/exam/examRepository';
 import type { BatchResultsResponse } from '../../types/exam.types';
 function formatMark(value: number | null | undefined) {
  return value === null || value === undefined ? '' : String(value);
 }
 const ExamResultsPage: React.FC = () => {
  const { batchId } = useParams<{ batchId: string }>();
  const navigate = useNavigate();
  const [data, setData] = useState<BatchResultsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [downloading, setDownloading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const load = useCallback(async () => {
    if (!batchId) return;
    setLoading(true);
    setError(null);
    try {
      setData(await examRepository.getBatchResults(batchId));
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }, [batchId]);
  useEffect(() => {
    void load();
  }, [load]);
  const summary = useMemo(() => {
    const rows = data?.results ?? [];
    const presentTotals = rows
      .map((r) => r.total)
      .filter((v): v is number => typeof v === 'number');
    const average = presentTotals.length
      ? presentTotals.reduce((sum, v) => sum + v, 0) / presentTotals.length
      : null;
    return {
      total: rows.length,
      absent: rows.filter((r) => r.status === 'absent' && r.total === null).length,
      marked: rows.filter((r) => r.total !== null).length,
      average,
    };
  }, [data]);
  const downloadCsv = async () => {
    if (!batchId) return;
    setDownloading(true);
    setError(null);
    try {
      const csv = await examRepository.getBatchCsv(batchId);
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `batch-${batchId}.csv`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setDownloading(false);
    }
  };
  if (loading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>;
  }
  if (error || !data) {
    return (
      <Container maxWidth="lg" sx={{ py: 4 }}>
        <Alert severity="error">{error || 'Results not found'}</Alert>
        <Button sx={{ mt: 2 }} startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')}>
          Back to Exam Marker
        </Button>
      </Container>
    );
  }
  return (
    <Container maxWidth="xl" sx={{ py: 4 }}>
      <Stack spacing={3}>
        <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap' }}>
          <Box>
            <Button size="small" startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>
              Exam Marker
            </Button>
            <Typography variant="h4" component="h1" fontWeight={700}>
              {data.batch.title || 'Exam results'}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              Batch {data.batch.id} · created {new Date(data.batch.created_at).toLocaleDateString('en-GB')}
            </Typography>
          </Box>
          <Stack direction="row" spacing={1}>
            <Button variant="outlined" startIcon={<EditIcon />} onClick={() => navigate(`/exam-marker/${data.batch.id}/mark`)}>
              Mark
            </Button>
            <Button variant="contained" startIcon={<DownloadIcon />} onClick={downloadCsv} disabled={downloading}>
              {downloading ? 'Preparing…' : 'Download CSV'}
            </Button>
          </Stack>
        </Box>
        <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
          <Chip label={`${summary.total} students`} />
          <Chip label={`${summary.marked} with marks`} color="success" variant="outlined" />
          <Chip label={`${summary.absent} absent/no scan`} color="warning" variant="outlined" />
          <Chip label={`Class average ${summary.average === null ? '—' : summary.average.toFixed(1)}`} color="primary" />
        </Stack>
        <TableContainer component={Paper} variant="outlined">
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <TableCell>Student</TableCell>
                <TableCell>Status</TableCell>
                {data.questions.map((q) => (
                  <TableCell key={q.id} align="right">{q.label} / {q.max_marks}</TableCell>
                ))}
                <TableCell align="right">Total</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.results.map((row) => (
                <TableRow key={row.submission_id} sx={row.status === 'absent' && row.total === null ? { opacity: 0.72 } : undefined}>
                  <TableCell>
                    <Typography variant="body2" fontWeight={600}>{row.student_name || row.student_id || 'Unknown student'}</Typography>
                    {row.student_id && <Typography variant="caption" color="text.secondary">{row.student_id}</Typography>}
                  </TableCell>
                  <TableCell>
                    <Chip size="small" label={row.status || 'unknown'} color={row.status === 'absent' ? 'warning' : 'default'} variant="outlined" />
                  </TableCell>
                  {data.questions.map((q) => (
                    <TableCell key={q.id} align="right">{formatMark(row.marks[q.id])}</TableCell>
                  ))}
                  <TableCell align="right"><strong>{formatMark(row.total)}</strong></TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Stack>
    </Container>
  );
 };
 export default ExamResultsPage;
@@ -0,0 +1,501 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
  Alert,
  Autocomplete,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  Container,
  Divider,
  FormControl,
  Grid,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  Tab,
  Tabs,
  TextField,
  Typography,
 } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SaveIcon from '@mui/icons-material/Save';
 import SyncIcon from '@mui/icons-material/Sync';
 import { logger } from '../../debugConfig';
 import { examRepository } from '../../services/exam/examRepository';
 import type {
  ExamQuestion,
  ExamTemplateDetail,
  MarkScheme,
  MarkSchemeType,
  SpecPoint,
 } from '../../types/exam.types';
 type Drafts = Record<string, PartDraft>;
 interface PartDraft {
  max_marks: string;
  answer_type: 'written' | 'mcq' | 'short' | 'diagram';
  spec_ref: string;
  schemeType: MarkSchemeType;
  body: string;
  notes: string;
 }
 const ANSWER_TYPES: Array<PartDraft['answer_type']> = ['written', 'short', 'mcq', 'diagram'];
 const SCHEME_TYPES: Array<{ value: MarkSchemeType; label: string; helper: string }> = [
  { value: 'points', label: 'Points', helper: 'One mark point per line, e.g. "1 | Mentions resultant force".' },
  { value: 'levels', label: 'Levels', helper: 'One level per line, e.g. "L2 | 3-4 | Clear linked explanation".' },
  { value: 'parts', label: 'Parts', helper: 'One sub-part per line, e.g. "a | 2 | Correct substitution".' },
  { value: 'checklist', label: 'Checklist', helper: 'One checklist item per line, e.g. "1 | Correct unit".' },
  { value: 'free', label: 'Free text', helper: 'Paste or type the mark scheme exactly as it should be stored.' },
 ];
 function deriveSpecCode(template: ExamTemplateDetail | null): string {
  const examCode = template?.exam_code ?? '';
  const match = examCode.match(/^([A-Z]+-[A-Z]+-\d+)/i);
  return match?.[1] ?? '';
 }
 function schemeToDraft(scheme: MarkScheme | null | undefined): Pick<PartDraft, 'schemeType' | 'body' | 'notes'> {
  const type = (scheme?.type as MarkSchemeType | undefined) ?? 'points';
  const notes = typeof scheme?.notes === 'string' ? scheme.notes : '';
  if (type === 'levels' && Array.isArray(scheme?.levels)) {
    return {
      schemeType: 'levels',
      body: scheme.levels.map((l) => `${l.level ?? ''} | ${l.min ?? 0}-${l.max ?? 0} | ${l.descriptor ?? ''}`).join('\n'),
      notes,
    };
  }
  if (type === 'parts' && Array.isArray(scheme?.parts)) {
    return {
      schemeType: 'parts',
      body: scheme.parts.map((p) => `${p.label ?? ''} | ${p.marks ?? 0} | ${p.guidance ?? ''}`).join('\n'),
      notes,
    };
  }
  if (type === 'checklist' && Array.isArray(scheme?.checklist)) {
    return {
      schemeType: 'checklist',
      body: scheme.checklist.map((item) => `${item.marks ?? 1} | ${item.text ?? ''}`).join('\n'),
      notes,
    };
  }
  if (type === 'free') {
    return { schemeType: 'free', body: typeof scheme?.text === 'string' ? scheme.text : '', notes };
  }
  if (Array.isArray(scheme?.points)) {
    return {
      schemeType: 'points',
      body: scheme.points.map((p) => `${p.mark ?? 1} | ${p.text ?? ''}`).join('\n'),
      notes,
    };
  }
  return { schemeType: type, body: '', notes };
 }
 function parseNumber(value: string, fallback = 0): number {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : fallback;
 }
 function splitLine(line: string): string[] {
  return line.split('|').map((part) => part.trim());
 }
 function draftToScheme(draft: PartDraft): MarkScheme {
  const lines = draft.body.split('\n').map((line) => line.trim()).filter(Boolean);
  if (draft.schemeType === 'free') return { type: 'free', text: draft.body, notes: draft.notes || undefined };
  if (draft.schemeType === 'levels') {
    return {
      type: 'levels',
      levels: lines.map((line, idx) => {
        const [level, range, descriptor] = splitLine(line);
        const [minRaw, maxRaw] = (range || '').split('-').map((part) => part.trim());
        return {
          level: level || `L${idx + 1}`,
          min: parseNumber(minRaw, 0),
          max: parseNumber(maxRaw, parseNumber(minRaw, 0)),
          descriptor: descriptor || line,
        };
      }),
      notes: draft.notes || undefined,
    };
  }
  if (draft.schemeType === 'parts') {
    return {
      type: 'parts',
      parts: lines.map((line, idx) => {
        const [label, marks, guidance] = splitLine(line);
        return { label: label || String(idx + 1), marks: parseNumber(marks, 1), guidance: guidance || line };
      }),
      notes: draft.notes || undefined,
    };
  }
  if (draft.schemeType === 'checklist') {
    return {
      type: 'checklist',
      checklist: lines.map((line) => {
        const [marks, text] = splitLine(line);
        return { marks: parseNumber(marks, 1), text: text || line };
      }),
      notes: draft.notes || undefined,
    };
  }
  return {
    type: 'points',
    points: lines.map((line) => {
      const [mark, text] = splitLine(line);
      return { mark: parseNumber(mark, 1), text: text || line };
    }),
    notes: draft.notes || undefined,
  };
 }
 function makeDraft(question: ExamQuestion): PartDraft {
  const scheme = schemeToDraft(question.mark_scheme);
  return {
    max_marks: String(question.max_marks ?? 0),
    answer_type: (question.answer_type as PartDraft['answer_type'] | null) ?? 'written',
    spec_ref: question.spec_ref ?? '',
    schemeType: scheme.schemeType,
    body: scheme.body,
    notes: scheme.notes,
  };
 }
 const MarkSchemePage: React.FC = () => {
  const navigate = useNavigate();
  const { templateId } = useParams<{ templateId: string }>();
  const [template, setTemplate] = useState<ExamTemplateDetail | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [drafts, setDrafts] = useState<Drafts>({});
  const [specCode, setSpecCode] = useState('');
  const [specPoints, setSpecPoints] = useState<SpecPoint[]>([]);
  const [loading, setLoading] = useState(true);
  const [savingId, setSavingId] = useState<string | null>(null);
  const [syncing, setSyncing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [specEndpointMissing, setSpecEndpointMissing] = useState(false);
  const load = useCallback(async () => {
    if (!templateId) return;
    setLoading(true);
    setError(null);
    try {
      const detail = await examRepository.getTemplate(templateId);
      const leafParts = detail.questions.filter((q) => !q.is_container).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label));
      setTemplate(detail);
      setSelectedId((prev) => prev ?? leafParts[0]?.id ?? null);
      setDrafts(Object.fromEntries(leafParts.map((q) => [q.id, makeDraft(q)])));
      setSpecCode((prev) => prev || deriveSpecCode(detail));
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Failed to load mark scheme template', { message: msg, templateId });
      setError(msg);
    } finally {
      setLoading(false);
    }
  }, [templateId]);
  useEffect(() => {
    void load();
  }, [load]);
  const loadSpecPoints = useCallback(async () => {
    if (!specCode.trim()) return;
    setSpecEndpointMissing(false);
    try {
      setSpecPoints(await examRepository.listSpecPoints(specCode.trim()));
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.warn('cc-exam-marker', 'SpecPoint endpoint unavailable; falling back to manual spec_ref entry', { message: msg, specCode });
      setSpecEndpointMissing(true);
      setSpecPoints([]);
    }
  }, [specCode]);
  useEffect(() => {
    void loadSpecPoints();
  }, [loadSpecPoints]);
  const parts = useMemo(
    () => (template?.questions ?? []).filter((q) => !q.is_container).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label)),
    [template],
  );
  const selected = parts.find((p) => p.id === selectedId) ?? null;
  const draft = selected ? drafts[selected.id] : null;
  const selectedSpecPoint = draft?.spec_ref ? specPoints.find((p) => p.ref === draft.spec_ref) ?? null : null;
  const updateDraft = (questionId: string, patch: Partial<PartDraft>) => {
    setDrafts((prev) => ({ ...prev, [questionId]: { ...prev[questionId], ...patch } }));
  };
  const savePart = async (question: ExamQuestion) => {
    const partDraft = drafts[question.id];
    if (!partDraft) return;
    setSavingId(question.id);
    setError(null);
    setNotice(null);
    try {
      await examRepository.patchQuestion(question.id, {
        max_marks: parseNumber(partDraft.max_marks, question.max_marks),
        answer_type: partDraft.answer_type,
        mark_scheme: draftToScheme(partDraft),
        spec_ref: partDraft.spec_ref.trim() || null,
      });
      setTemplate((prev) => {
        if (!prev) return prev;
        return {
          ...prev,
          questions: prev.questions.map((q) => q.id === question.id ? {
            ...q,
            max_marks: parseNumber(partDraft.max_marks, question.max_marks),
            answer_type: partDraft.answer_type,
            mark_scheme: draftToScheme(partDraft),
            spec_ref: partDraft.spec_ref.trim() || null,
          } : q),
        };
      });
      setNotice(`Saved mark scheme for Part ${question.label}.`);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Save mark scheme failed', { message: msg, questionId: question.id });
      setError(msg);
    } finally {
      setSavingId(null);
    }
  };
  const syncGraph = async () => {
    if (!templateId) return;
    setSyncing(true);
    setError(null);
    setNotice(null);
    try {
      const res = await examRepository.syncTemplateToGraph(templateId);
      setNotice(`Neo4j projection ${res.status}; ${JSON.stringify(res.projection ?? {})}`);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      logger.error('cc-exam-marker', 'Neo4j sync failed', { message: msg, templateId });
      setError(msg);
    } finally {
      setSyncing(false);
    }
  };
  if (loading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 10 }}><CircularProgress /></Box>;
  }
  return (
    <Container maxWidth="xl" sx={{ py: 4 }}>
      <Stack spacing={3}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
          <Box>
            <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>
              Back to templates
            </Button>
            <Typography variant="h3" component="h1">Mark Scheme editor</Typography>
            <Typography variant="body1" color="text.secondary">
              {template?.title ?? 'Template'} · Edit per-Part mark schemes and link assessed specification points.
            </Typography>
          </Box>
          <Stack direction="row" spacing={1}>
            {templateId && <Button variant="outlined" onClick={() => navigate(`/exam-marker/${templateId}/setup`)}>Setup canvas</Button>}
            <Button variant="outlined" startIcon={<SyncIcon />} onClick={syncGraph} disabled={syncing || !templateId}>
              {syncing ? 'Syncing…' : 'Sync to graph'}
            </Button>
          </Stack>
        </Box>
        {error && <Alert severity="error" onClose={() => setError(null)}>{error}</Alert>}
        {notice && <Alert severity="success" onClose={() => setNotice(null)}>{notice}</Alert>}
        {specEndpointMissing && (
          <Alert severity="warning">
            SpecPoint picker endpoint was not available from this API build. You can still type a spec_ref manually; the backend projection resolves it during neo4j-sync.
          </Alert>
        )}
        <Paper variant="outlined" sx={{ p: 2 }}>
          <Grid container spacing={2} alignItems="center">
            <Grid item xs={12} md={4}>
              <TextField
                label="Specification code"
                value={specCode}
                onChange={(e) => setSpecCode(e.target.value)}
                fullWidth
                helperText="Example: AQA-PHYS-8463. Used by the SpecPoint picker."
              />
            </Grid>
            <Grid item xs={12} md={8}>
              <Typography variant="body2" color="text.secondary">
                Save writes PATCH /api/exam/questions/:id. Spec refs are persisted on the Part and projected as (:Part)-[:ASSESSES]-&gt;(:SpecPoint).
              </Typography>
            </Grid>
          </Grid>
        </Paper>
        {parts.length === 0 ? (
          <Alert severity="info">
            This template has no Parts yet. Draw Part boxes on the setup canvas first, then return here to enter mark schemes.
          </Alert>
        ) : (
          <Grid container spacing={3}>
            <Grid item xs={12} md={3}>
              <Card variant="outlined">
                <CardContent>
                  <Typography variant="h6" gutterBottom>Parts</Typography>
                  <Tabs
                    orientation="vertical"
                    value={selectedId ?? false}
                    onChange={(_, value) => setSelectedId(value)}
                    variant="scrollable"
                    sx={{ borderRight: 1, borderColor: 'divider', maxHeight: '65vh' }}
                  >
                    {parts.map((part) => (
                      <Tab
                        key={part.id}
                        value={part.id}
                        label={
                          <Box sx={{ textAlign: 'left', width: '100%' }}>
                            <Typography variant="body2">Part {part.label}</Typography>
                            <Stack direction="row" spacing={0.5} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
                              <Chip size="small" label={`${drafts[part.id]?.max_marks ?? part.max_marks} marks`} />
                              {(drafts[part.id]?.spec_ref || part.spec_ref) && <Chip size="small" color="info" label={drafts[part.id]?.spec_ref || part.spec_ref || ''} />}
                            </Stack>
                          </Box>
                        }
                      />
                    ))}
                  </Tabs>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} md={9}>
              {selected && draft && (
                <Card variant="outlined">
                  <CardContent>
                    <Stack spacing={3}>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap' }}>
                        <Box>
                          <Typography variant="h5">Part {selected.label}</Typography>
                          <Typography variant="body2" color="text.secondary">
                            {selected.parent_id ? `Parent question ${selected.parent_id}` : 'No parent question'}
                          </Typography>
                        </Box>
                        <Button
                          variant="contained"
                          startIcon={<SaveIcon />}
                          disabled={savingId === selected.id}
                          onClick={() => savePart(selected)}
                        >
                          {savingId === selected.id ? 'Saving…' : 'Save part'}
                        </Button>
                      </Box>
                      <Grid container spacing={2}>
                        <Grid item xs={12} sm={4}>
                          <TextField
                            label="Max marks"
                            value={draft.max_marks}
                            onChange={(e) => updateDraft(selected.id, { max_marks: e.target.value })}
                            type="number"
                            inputProps={{ min: 0, step: 0.5 }}
                            fullWidth
                          />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                          <FormControl fullWidth>
                            <InputLabel id="answer-type-label">Answer type</InputLabel>
                            <Select
                              labelId="answer-type-label"
                              label="Answer type"
                              value={draft.answer_type}
                              onChange={(e) => updateDraft(selected.id, { answer_type: e.target.value as PartDraft['answer_type'] })}
                            >
                              {ANSWER_TYPES.map((type) => <MenuItem key={type} value={type}>{type}</MenuItem>)}
                            </Select>
                          </FormControl>
                        </Grid>
                        <Grid item xs={12} sm={4}>
                          <FormControl fullWidth>
                            <InputLabel id="scheme-type-label">Scheme form</InputLabel>
                            <Select
                              labelId="scheme-type-label"
                              label="Scheme form"
                              value={draft.schemeType}
                              onChange={(e) => updateDraft(selected.id, { schemeType: e.target.value as MarkSchemeType })}
                            >
                              {SCHEME_TYPES.map((type) => <MenuItem key={type.value} value={type.value}>{type.label}</MenuItem>)}
                            </Select>
                          </FormControl>
                        </Grid>
                      </Grid>
                      <Autocomplete
                        options={specPoints}
                        value={selectedSpecPoint}
                        onChange={(_, value) => updateDraft(selected.id, { spec_ref: value?.ref ?? '' })}
                        getOptionLabel={(option) => `${option.ref} — ${option.description}`}
                        isOptionEqualToValue={(option, value) => option.ref === value.ref}
                        renderInput={(params) => (
                          <TextField
                            {...params}
                            label="SpecPoint picker"
                            helperText={specPoints.length ? 'Choose a seeded SpecPoint, or type below to override.' : 'No picker results loaded; type spec_ref manually below.'}
                          />
                        )}
                      />
                      <TextField
                        label="spec_ref"
                        value={draft.spec_ref}
                        onChange={(e) => updateDraft(selected.id, { spec_ref: e.target.value })}
                        helperText="Persisted to exam_questions.spec_ref; graph sync creates the ASSESSES edge when the ref matches a seeded SpecPoint."
                        fullWidth
                      />
                      <Divider />
                      <TextField
                        label={`${SCHEME_TYPES.find((type) => type.value === draft.schemeType)?.label ?? 'Mark scheme'} body`}
                        value={draft.body}
                        onChange={(e) => updateDraft(selected.id, { body: e.target.value })}
                        helperText={SCHEME_TYPES.find((type) => type.value === draft.schemeType)?.helper}
                        multiline
                        minRows={10}
                        fullWidth
                      />
                      <TextField
                        label="Internal marking notes"
                        value={draft.notes}
                        onChange={(e) => updateDraft(selected.id, { notes: e.target.value })}
                        multiline
                        minRows={3}
                        fullWidth
                      />
                    </Stack>
                  </CardContent>
                </Card>
              )}
            </Grid>
          </Grid>
        )}
      </Stack>
    </Container>
  );
 };
 export default MarkSchemePage;
@@ -0,0 +1,169 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  MenuItem,
  Stack,
  TextField,
  Typography,
 } from '@mui/material';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import TableChartIcon from '@mui/icons-material/TableChart';
 import { examRepository } from '../../services/exam/examRepository';
 import type { BatchResultsResponse, ExamTemplate, MarkingBatch } from '../../types/exam.types';
 interface ResultsWidgetProps {
  classId: string;
  className?: string;
 }
 function averageFromResults(results: BatchResultsResponse | null) {
  const totals = (results?.results ?? [])
    .map((row) => row.total)
    .filter((value): value is number => typeof value === 'number');
  if (!totals.length) return null;
  return totals.reduce((sum, value) => sum + value, 0) / totals.length;
 }
 const ResultsWidget: React.FC<ResultsWidgetProps> = ({ classId, className }) => {
  const navigate = useNavigate();
  const [templates, setTemplates] = useState<ExamTemplate[]>([]);
  const [batches, setBatches] = useState<MarkingBatch[]>([]);
  const [latestResults, setLatestResults] = useState<BatchResultsResponse | null>(null);
  const [selectedTemplateId, setSelectedTemplateId] = useState('');
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [nextTemplates, nextBatches] = await Promise.all([
        examRepository.listTemplates(),
        examRepository.listBatches(),
      ]);
      const classBatches = nextBatches
        .filter((batch) => batch.class_id === classId)
        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
      setTemplates(nextTemplates);
      setSelectedTemplateId((current) => current || nextTemplates[0]?.id || '');
      setBatches(classBatches);
      setLatestResults(classBatches[0] ? await examRepository.getBatchResults(classBatches[0].id) : null);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }, [classId]);
  useEffect(() => {
    void load();
  }, [load]);
  const latestBatch = batches[0] ?? null;
  const average = useMemo(() => averageFromResults(latestResults), [latestResults]);
  const absent = latestResults?.results.filter((row) => row.status === 'absent' && row.total === null).length ?? 0;
  const createBatch = async () => {
    if (!selectedTemplateId) return;
    setCreating(true);
    setError(null);
    try {
      const template = templates.find((item) => item.id === selectedTemplateId);
      const created = await examRepository.createBatch({
        template_id: selectedTemplateId,
        class_id: classId,
        title: `${className || 'Class'} · ${template?.title || 'Exam'}`,
      });
      navigate(`/exam-marker/${created.id}/mark`);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setCreating(false);
    }
  };
  return (
    <Card variant="outlined" sx={{ mb: 2 }}>
      <CardContent>
        <Stack spacing={2}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, flexWrap: 'wrap' }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <AssessmentIcon color="primary" />
              <Box>
                <Typography variant="h6">Assessment results</Typography>
                <Typography variant="caption" color="text.secondary">Last exam summary for this class</Typography>
              </Box>
            </Box>
            {loading && <CircularProgress size={22} />}
          </Box>
          {error && <Alert severity="warning" onClose={() => setError(null)}>{error}</Alert>}
          {latestBatch ? (
            <Stack spacing={1.5}>
              <Box>
                <Typography variant="body2" fontWeight={700}>{latestBatch.title || 'Exam batch'}</Typography>
                <Typography variant="caption" color="text.secondary">
                  {new Date(latestBatch.created_at).toLocaleDateString('en-GB')}
                </Typography>
              </Box>
              <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
                <Chip size="small" color="primary" label={`Average ${average === null ? '—' : average.toFixed(1)}`} />
                <Chip size="small" variant="outlined" label={`${latestResults?.results.length ?? 0} students`} />
                <Chip size="small" color="warning" variant="outlined" label={`${absent} absent`} />
              </Stack>
              <Stack direction="row" spacing={1}>
                <Button size="small" variant="contained" startIcon={<TableChartIcon />} onClick={() => navigate(`/exam-marker/${latestBatch.id}/results`)}>
                  View results
                </Button>
                <Button size="small" variant="outlined" onClick={() => navigate(`/exam-marker/${latestBatch.id}/mark`)}>
                  Continue marking
                </Button>
              </Stack>
            </Stack>
          ) : !loading ? (
            <Typography variant="body2" color="text.secondary">
              No exam batches have been created for this class yet.
            </Typography>
          ) : null}
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} alignItems={{ xs: 'stretch', sm: 'center' }}>
            <TextField
              select
              size="small"
              label="Template"
              value={selectedTemplateId}
              onChange={(e) => setSelectedTemplateId(e.target.value)}
              disabled={!templates.length || creating}
              sx={{ minWidth: 260 }}
            >
              {templates.map((template) => (
                <MenuItem key={template.id} value={template.id}>{template.title}</MenuItem>
              ))}
            </TextField>
            <Button
              variant="outlined"
              startIcon={<PlayArrowIcon />}
              onClick={createBatch}
              disabled={!selectedTemplateId || creating}
            >
              {creating ? 'Creating…' : 'Create marking batch'}
            </Button>
          </Stack>
        </Stack>
      </CardContent>
    </Card>
  );
 };
 export default ResultsWidget;
@@ -0,0 +1,6 @@
 export { default as ExamDashboardPage } from './ExamDashboardPage';
 export { default as ExamTemplateSetupPage } from './setup/ExamTemplateSetupPage';
 export { default as MarkSchemePage } from './MarkSchemePage';
 export { default as ExamMarkingPage } from './ExamMarkingPage';
 export { default as ExamResultsPage } from './ExamResultsPage';
 export { default as ResultsWidget } from './ResultsWidget';
@@ -0,0 +1,360 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Alert, Box, Button, Chip, CircularProgress, Collapse, Divider, IconButton, Paper, Snackbar, Stack, Tooltip, Typography, useTheme } from '@mui/material'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import SaveIcon from '@mui/icons-material/Save'
 import MouseIcon from '@mui/icons-material/Mouse'
 import '@tldraw/tldraw/tldraw.css'
 import { Editor, Tldraw, createShapeId, TLShape } from '@tldraw/tldraw'
 import axios from 'axios'
 import { ErrorBoundary } from '../../../components/ErrorBoundary'
 import { logger } from '../../../debugConfig'
 import { examRepository } from '../../../services/exam/examRepository'
 import type { ExamTemplateDetail } from '../../../types/exam.types'
 import { CanvasPageGeometry, ExamCanvasShapeModel, PAGE_HEIGHT, PAGE_WIDTH, isUuid, newDomainId, serializeCanvasShapes, shapesFromTemplate } from '../../../utils/exam-canvas/model'
 import { PDF_PAGE_SHAPE_TYPE, canvasShapePalette, examCanvasShapeUtils, examCanvasTools, ExamCanvasTLShape, SHAPE_TYPES, isPdfPageShape, shapeTypeToKind } from './examCanvasShapes'
 import { loadPdfPageImages, PdfPageImage } from './pdfLoader'
 const TOOLS = [
  { id: 'select', label: 'Select', icon: '↖', tip: 'Move, resize, delete, or inspect the Attached pill on a region.', color: 'inherit' as const },
  { id: SHAPE_TYPES.boundary, label: 'Boundary', icon: canvasShapePalette.boundary.icon, tip: 'Draw Q start and Q end horizontal rules; an end rule on a later page creates a multi-page question span.', color: 'error' as const },
  { id: SHAPE_TYPES.part, label: 'Part', icon: canvasShapePalette.part.icon, tip: 'Draw the markable sub-question box inside a boundary pair; it becomes the leaf question/part.', color: 'warning' as const },
  { id: SHAPE_TYPES.response, label: 'Response', icon: canvasShapePalette.response.icon, tip: 'Draw around where the student writes; blue regions save as response areas.', color: 'primary' as const },
  { id: SHAPE_TYPES.context, label: 'Context', icon: canvasShapePalette.context.icon, tip: 'Draw stimulus, figures, tables, or prompt text; purple dashed regions save as context.', color: 'secondary' as const },
  { id: SHAPE_TYPES.question_number, label: 'Q Number', icon: canvasShapePalette.question_number.icon, tip: 'Box the printed question number for OCR/structure extraction.', color: 'success' as const },
  { id: SHAPE_TYPES.mark_area, label: 'Mark Area', icon: canvasShapePalette.mark_area.icon, tip: 'Box printed marks such as [2] or Total for Question text.', color: 'success' as const },
  { id: SHAPE_TYPES.reference, label: 'Reference', icon: canvasShapePalette.reference.icon, tip: 'Box formulae, data sheets, appendices, or other resources the student may use.', color: 'info' as const },
  { id: SHAPE_TYPES.furniture, label: 'Furniture', icon: canvasShapePalette.furniture.icon, tip: 'Mark page numbers, margins, blank space, or decoration to exclude from extraction.', color: 'inherit' as const },
 ]
 const PAGE_START_X = 0
 const PDF_PAGE_IDS_PREFIX = 'pdf-page-'
 function pageGeometryFromImages(pages: PdfPageImage[]): CanvasPageGeometry[] {
  let y = 0
  return pages.map((page) => {
    const geometry = { pageNumber: page.pageNumber, x: PAGE_START_X, y, w: page.width, h: page.height }
    y += page.height
    return geometry
  })
 }
 function applyDocViewConstraints(editor: Editor, pages: PdfPageImage[]) {
  const maxW = pages.length ? Math.max(...pages.map((p) => p.width)) : PAGE_WIDTH
  const totalH = pages.reduce((sum, p) => sum + p.height, 0) || PAGE_HEIGHT
  editor.setCameraOptions({
    constraints: {
      bounds: { x: -64, y: -64, w: maxW + 128, h: totalH + 128 },
      padding: { x: 64, y: 64 },
      origin: { x: 0.5, y: 0 },
      initialZoom: 'fit-x-100',
      baseZoom: 'default',
      behavior: 'contain',
    },
    isLocked: false,
  })
 }
 function apiMessage(err: unknown): { message: string; conflict: boolean } {
  if (axios.isAxiosError(err)) {
    const detail = (err.response?.data as { detail?: string } | undefined)?.detail
    if (err.response?.status === 409) return { conflict: true, message: detail ?? 'Template has recorded marks; structural full-replace is blocked.' }
    return { conflict: false, message: detail ?? err.message }
  }
  return { conflict: false, message: err instanceof Error ? err.message : String(err) }
 }
 function stripShapePrefix(id: string) {
  return id.startsWith('shape:') ? id.slice('shape:'.length) : id
 }
 function domainIdForShape(shape: ExamCanvasTLShape): string {
  const fromProps = shape.props.domainId
  if (isUuid(fromProps)) return fromProps
  const fromShapeId = stripShapePrefix(shape.id)
  return isUuid(fromShapeId) ? fromShapeId : newDomainId()
 }
 function ensureDomainIds(editor: Editor) {
  const updates = editor.getCurrentPageShapes()
    .filter((shape): shape is ExamCanvasTLShape => !!shapeTypeToKind(shape.type))
    .filter((shape) => !isUuid(shape.props.domainId))
    .map((shape) => ({ id: shape.id, type: shape.type, props: { domainId: domainIdForShape(shape) } }))
  if (updates.length) editor.updateShapes(updates)
 }
 function modelFromTLShape(shape: TLShape): ExamCanvasShapeModel | null {
  const kind = shapeTypeToKind(shape.type)
  if (!kind) return null
  const s = shape as ExamCanvasTLShape
  return {
    id: domainIdForShape(s),
    kind,
    x: Number(s.x ?? 0),
    y: Number(s.y ?? 0),
    w: Number(s.props.w ?? 1),
    h: Number(s.props.h ?? 1),
    label: s.props.label,
    maxMarks: s.props.maxMarks,
    responseForm: s.props.responseForm as ExamCanvasShapeModel['responseForm'],
    contextType: s.props.contextType,
    questionId: s.props.questionId ?? null,
  }
 }
 function bringDomainShapesToFront(editor: Editor) {
  const ids = editor.getCurrentPageShapes().filter((s) => !!shapeTypeToKind(s.type)).map((s) => s.id)
  if (ids.length) try { editor.bringToFront(ids as any) } catch { /* */ }
 }
 function loadShapes(editor: Editor, models: ExamCanvasShapeModel[]) {
  if (!models.length) return
  const existing = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type)).map((s) => s.id)
  if (existing.length) editor.deleteShapes(existing)
  editor.createShapes(models.map((m) => ({
    id: createShapeId(m.id),
    type: SHAPE_TYPES[m.kind],
    x: m.x,
    y: m.y,
    props: { w: m.w, h: m.h, label: m.label ?? m.kind, kind: m.kind, maxMarks: m.maxMarks, responseForm: m.responseForm, contextType: m.contextType, questionId: m.questionId, domainId: m.id },
  })))
 }
 function syncPdfPages(editor: Editor, pages: PdfPageImage[]) {
  const existing = editor.getCurrentPageShapes().filter((s) => isPdfPageShape(s.type)).map((s) => s.id)
  if (existing.length) editor.deleteShapes(existing)
  if (!pages.length) return
  const geometries = pageGeometryFromImages(pages)
  editor.createShapes(geometries.map((geometry) => {
    const page = pages[geometry.pageNumber - 1]
    return {
      id: createShapeId(PDF_PAGE_IDS_PREFIX + geometry.pageNumber),
      type: PDF_PAGE_SHAPE_TYPE,
      x: geometry.x,
      y: geometry.y,
      isLocked: true,
      props: { w: geometry.w, h: geometry.h, src: page.src, pageNumber: geometry.pageNumber },
    } as any
  }))
  // z-order is enforced by the caller via bringDomainShapesToFront
 }
 function seedGuide(editor: Editor) {
  const current = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type))
  if (current.length) return
  editor.createShapes([
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.boundary, x: 48, y: 120, props: { w: PAGE_WIDTH - 96, h: 8, kind: 'boundary', label: 'Q1 start', domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.boundary, x: 48, y: PAGE_HEIGHT + 160, props: { w: PAGE_WIDTH - 96, h: 8, kind: 'boundary', label: 'Q1 end (page 2)', domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.part, x: 92, y: 180, props: { w: 520, h: 150, kind: 'part', label: 'Q1(a)', maxMarks: 3, domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.response, x: 116, y: 355, props: { w: 470, h: 120, kind: 'response', label: 'Response', responseForm: 'lines', domainId: newDomainId() } },
    { id: createShapeId(newDomainId()), type: SHAPE_TYPES.context, x: 116, y: 495, props: { w: 470, h: 90, kind: 'context', label: 'Context', contextType: 'generic', domainId: newDomainId() } },
  ])
 }
 const ExamTemplateSetupInner: React.FC = () => {
  const { templateId } = useParams<{ templateId: string }>()
  const navigate = useNavigate()
  const theme = useTheme()
  const editorRef = useRef<Editor | null>(null)
  const pageGeometriesRef = useRef<CanvasPageGeometry[]>([])
  const [template, setTemplate] = useState<ExamTemplateDetail | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [dirty, setDirty] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [conflict, setConflict] = useState<string | null>(null)
  const [activeTool, setActiveTool] = useState('select')
  const [pdfStatus, setPdfStatus] = useState<'loading' | 'ready' | 'missing' | 'error'>('loading')
  const [pdfError, setPdfError] = useState<string | null>(null)
  const [guideOpen, setGuideOpen] = useState(false)
  const load = useCallback(async () => {
    if (!templateId) return
    setLoading(true); setError(null); setConflict(null)
    try {
      const detail = await examRepository.getTemplate(templateId)
      setTemplate(detail)
      let pages: PdfPageImage[] = []
      setPdfStatus('loading')
      setPdfError(null)
      try {
        const bytes = await examRepository.getTemplateSourcePdf(templateId)
        pages = await loadPdfPageImages(bytes, undefined, (partialPages) => {
          const newPage = partialPages[partialPages.length - 1]
          const allGeometries = pageGeometryFromImages(partialPages)
          pageGeometriesRef.current = allGeometries
          const ed = editorRef.current
          if (ed) {
            const geometry = allGeometries[partialPages.length - 1]
            const shapeId = createShapeId(PDF_PAGE_IDS_PREFIX + newPage.pageNumber)
            if (!ed.getCurrentPageShapes().find((s) => s.id === shapeId)) {
              ed.createShapes([{ id: shapeId, type: PDF_PAGE_SHAPE_TYPE, x: geometry.x, y: geometry.y, isLocked: true, props: { w: geometry.w, h: geometry.h, src: newPage.src, pageNumber: newPage.pageNumber } } as any])
              bringDomainShapesToFront(ed)
            }
            applyDocViewConstraints(ed, partialPages)
          }
          setPdfStatus('ready')
        })
        setPdfStatus(pages.length ? 'ready' : 'missing')
      } catch (pdfErr) {
        const pdfMsg = apiMessage(pdfErr).message
        setPdfStatus(pdfMsg.toLowerCase().includes('404') ? 'missing' : 'error')
        setPdfError(pdfMsg)
        logger.warn('cc-exam-marker', 'Template source PDF load failed', { templateId, message: pdfMsg })
      }
      const geometries = pageGeometryFromImages(pages)
      pageGeometriesRef.current = geometries
      const editor = editorRef.current
      if (editor) {
        syncPdfPages(editor, pages)
        loadShapes(editor, shapesFromTemplate(detail, geometries))
        bringDomainShapesToFront(editor)
        applyDocViewConstraints(editor, pages)
        editor.resetZoom()
      }
      setDirty(false)
    } catch (e) {
      const msg = apiMessage(e).message
      logger.warn('cc-exam-marker', 'Template setup load failed', { templateId, message: msg })
      setError(msg)
    } finally {
      setLoading(false)
    }
  }, [templateId])
  useEffect(() => { void load() }, [load])
  const save = useCallback(async () => {
    const editor = editorRef.current
    if (!editor || !templateId || !template) return
    setSaving(true); setError(null); setConflict(null)
    try {
      ensureDomainIds(editor)
      const shapes = editor.getCurrentPageShapes().map(modelFromTLShape).filter(Boolean) as ExamCanvasShapeModel[]
      const payload = serializeCanvasShapes(template, shapes, pageGeometriesRef.current)
      const saved = await examRepository.replaceTemplate(templateId, payload)
      setTemplate(saved)
      loadShapes(editor, shapesFromTemplate(saved, pageGeometriesRef.current))
      setDirty(false)
    } catch (e) {
      const msg = apiMessage(e)
      if (msg.conflict) setConflict(msg.message); else setError(msg.message)
      logger.warn('cc-exam-marker', 'Template setup save failed', { templateId, message: msg.message })
    } finally {
      setSaving(false)
    }
  }, [template, templateId])
  const toolButtons = useMemo(() => TOOLS.map((tool) => (
    <Tooltip title={tool.tip} key={tool.id} placement="right">
      <Button
        size="small"
        variant={activeTool === tool.id ? 'contained' : 'outlined'}
        color={tool.color}
        startIcon={tool.id === 'select' ? <MouseIcon fontSize="small" /> : <Box component="span" sx={{ minWidth: 22, textAlign: 'center', fontWeight: 900 }}>{tool.icon}</Box>}
        onClick={() => {
          const editor = editorRef.current
          if (!editor) return
          editor.setCurrentTool(tool.id === 'select' ? 'select' : tool.id)
          setActiveTool(tool.id)
        }}
        sx={{ justifyContent: 'flex-start', minWidth: 126 }}
      >
        {tool.label}
      </Button>
    </Tooltip>
  )), [activeTool])
  return (
    <Box sx={{ position: 'fixed', inset: 0, zIndex: (t) => t.zIndex.drawer + 20, bgcolor: 'background.default', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar — single compact line */}
      <Paper elevation={8} sx={{ px: 1.5, py: 0.75, display: 'flex', alignItems: 'center', gap: 1, bgcolor: 'background.paper', borderRadius: 0, flexShrink: 0 }}>
        <Tooltip title="Back to exam marker">
          <IconButton onClick={() => navigate('/exam-marker')} size="small"><ArrowBackIcon fontSize="small" /></IconButton>
        </Tooltip>
        <Divider orientation="vertical" flexItem />
        <Typography variant="subtitle2" noWrap sx={{ flex: 1, minWidth: 0 }}>{template?.title ?? 'Template setup'}</Typography>
        <Chip size="small" color={dirty ? 'warning' : 'success'} label={dirty ? 'Unsaved' : 'Saved'} />
        <Button size="small" variant="contained" startIcon={saving ? <CircularProgress size={14} color="inherit" /> : <SaveIcon fontSize="small" />} onClick={save} disabled={saving || loading || !template}>Save</Button>
      </Paper>
      {/* Body row */}
      <Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
        {/* Left tool sidebar */}
        <Paper elevation={4} sx={{ width: 160, flexShrink: 0, p: 1.25, borderRadius: 0, bgcolor: 'background.paper', overflowY: 'auto', display: 'flex', flexDirection: 'column', borderRight: 1, borderColor: 'divider' }}>
          <Stack spacing={1}>{toolButtons}</Stack>
        </Paper>
        {/* Canvas area */}
        <Box sx={{ flex: 1, position: 'relative', overflow: 'hidden' }} data-testid="exam-template-setup-canvas">
          <Box sx={{ position: 'absolute', inset: 0, '& .tlui-layout': { display: 'none' } }}>
            <Tldraw
              shapeUtils={examCanvasShapeUtils as any}
              tools={examCanvasTools as any}
              hideUi
              inferDarkMode={theme.palette.mode === 'dark'}
              autoFocus
              onMount={(editor) => {
                editorRef.current = editor
                editor.user.updateUserPreferences({ colorScheme: theme.palette.mode === 'dark' ? 'dark' : 'light' })
                editor.store.listen(() => setDirty(true), { scope: 'document' })
                applyDocViewConstraints(editor, [])
                editor.resetZoom()
                if (template) loadShapes(editor, shapesFromTemplate(template, pageGeometriesRef.current)); else seedGuide(editor)
                bringDomainShapesToFront(editor)
              }}
            />
          </Box>
          {/* Guide toggle */}
          <Tooltip title={guideOpen ? 'Hide guide' : 'Show setup guide'} placement="left">
            <IconButton onClick={() => setGuideOpen((v) => !v)} size="small" sx={{ position: 'absolute', right: 16, bottom: 16, zIndex: 1001, bgcolor: 'background.paper', boxShadow: 2, '&:hover': { bgcolor: 'background.paper' } }}>
              <HelpOutlineIcon fontSize="small" color={guideOpen ? 'primary' : 'action'} />
            </IconButton>
          </Tooltip>
          {/* Guide panel — collapsible */}
          <Collapse in={guideOpen} sx={{ position: 'absolute', right: 16, bottom: 48, zIndex: 1000, maxWidth: 440 }}>
            <Paper elevation={4} sx={{ p: 2, borderRadius: 3, bgcolor: 'background.paper' }}>
              <Typography variant="subtitle2" gutterBottom>Setup guide</Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                1) Boundary start/end lines define each main question. 2) Draw amber Part boxes for markable sub-questions. 3) Draw coloured Response, Context, Q Number, Mark Area, Reference, and Furniture regions; Save derives parent links by containment.
              </Typography>
              <Stack direction="row" spacing={0.75} useFlexGap flexWrap="wrap" sx={{ my: 1 }}>
                {(['boundary', 'part', 'response', 'context', 'question_number', 'mark_area', 'reference', 'furniture'] as const).map((kind) => {
                  const p = canvasShapePalette[kind]
                  return <Chip key={kind} size="small" label={`${p.icon} ${p.label}`} sx={{ borderColor: p.stroke, color: p.stroke, bgcolor: p.fill, fontWeight: 700 }} variant="outlined" />
                })}
              </Stack>
              <Divider sx={{ my: 1 }} />
              <Typography variant="caption" color="text.secondary" display="block">Multi-page boundary pairing</Typography>
              <Typography variant="body2" sx={{ fontWeight: 700 }}>Draw "Q start" on page N, then "Q end" on a later page; save pairs boundaries by reading order into one question span.</Typography>
              <Typography variant="caption" color={pdfStatus === 'ready' ? 'success.main' : pdfStatus === 'error' ? 'error.main' : 'text.secondary'} sx={{ display: 'block', mt: 1 }}>
                PDF: {pdfStatus === 'ready' ? 'loaded' : pdfStatus === 'loading' ? 'loading…' : pdfStatus === 'missing' ? 'no source PDF' : pdfError ?? 'failed'}
              </Typography>
            </Paper>
          </Collapse>
          {/* Conflict alert */}
          {conflict && <Alert severity="warning" sx={{ position: 'absolute', top: 16, right: 16, maxWidth: 560, zIndex: 1001 }} onClose={() => setConflict(null)}>{conflict}</Alert>}
        </Box>
      </Box>
      {loading && <Box sx={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', bgcolor: 'rgba(15,23,42,.18)', zIndex: 10 }}><CircularProgress /></Box>}
      <Snackbar open={!!error} autoHideDuration={8000} onClose={() => setError(null)}><Alert severity="error" onClose={() => setError(null)}>{error}</Alert></Snackbar>
    </Box>
  )
 }
 const ExamTemplateSetupPage: React.FC = () => (
  <ErrorBoundary fallback={<Box sx={{ p: 4 }}><Alert severity="error">Template setup canvas crashed. Reload the page and try again.</Alert></Box>}>
    <ExamTemplateSetupInner />
  </ErrorBoundary>
 )
 export default ExamTemplateSetupPage
@@ -0,0 +1,147 @@
 import React from 'react'
 import { BaseBoxShapeTool, BaseBoxShapeUtil, HTMLContainer, T, TLBaseBoxShape, toDomPrecision } from '@tldraw/tldraw'
 import type { ExamCanvasRegionKind, ExamCanvasShapeKind } from '../../../utils/exam-canvas/model'
 export const PDF_PAGE_SHAPE_TYPE = 'exam-pdf-page'
 export const SHAPE_TYPES = {
  boundary: 'exam-boundary',
  part: 'exam-part',
  response: 'exam-region-response',
  context: 'exam-region-context',
  question_number: 'exam-region-question-number',
  mark_area: 'exam-region-mark-area',
  reference: 'exam-region-reference',
  furniture: 'exam-region-furniture',
 } as const
 export type ExamPdfPageTLShape = TLBaseBoxShape & {
  type: typeof PDF_PAGE_SHAPE_TYPE
  props: { w: number; h: number; src: string; pageNumber: number }
 }
 export type ExamCanvasTLShape = TLBaseBoxShape & {
  type: typeof SHAPE_TYPES[keyof typeof SHAPE_TYPES]
  props: {
    w: number
    h: number
    label: string
    kind: ExamCanvasShapeKind
    maxMarks?: number
    responseForm?: string
    contextType?: string
    questionId?: string | null
    domainId?: string
  }
 }
 type CanvasPaletteEntry = {
  stroke: string
  fill: string
  darkStroke: string
  darkFill: string
  dash?: string
  label: string
  icon: string
  role: string
 }
 export const canvasShapePalette: Record<ExamCanvasShapeKind, CanvasPaletteEntry> = {
  boundary: { stroke: '#ef4444', fill: 'rgba(239,68,68,0.06)', darkStroke: '#f87171', darkFill: 'rgba(248,113,113,0.10)', dash: '8 6', label: 'Boundary', icon: '↕', role: 'start/end rule' },
  part: { stroke: '#f59e0b', fill: 'rgba(245,158,11,0.18)', darkStroke: '#fbbf24', darkFill: 'rgba(251,191,36,0.26)', label: 'Part', icon: '□', role: 'markable box' },
  response: { stroke: '#2563eb', fill: 'rgba(37,99,235,0.18)', darkStroke: '#60a5fa', darkFill: 'rgba(96,165,250,0.34)', label: 'Response', icon: '✎', role: 'student writing' },
  context: { stroke: '#7c3aed', fill: 'rgba(124,58,237,0.14)', darkStroke: '#a78bfa', darkFill: 'rgba(167,139,250,0.28)', dash: '6 5', label: 'Context', icon: '◉', role: 'stimulus' },
  question_number: { stroke: '#0f766e', fill: 'rgba(15,118,110,0.14)', darkStroke: '#2dd4bf', darkFill: 'rgba(45,212,191,0.24)', label: 'Question #', icon: '#', role: 'printed label' },
  mark_area: { stroke: '#16a34a', fill: 'rgba(22,163,74,0.14)', darkStroke: '#4ade80', darkFill: 'rgba(74,222,128,0.23)', label: 'Marks', icon: '[2]', role: 'printed marks' },
  reference: { stroke: '#0891b2', fill: 'rgba(8,145,178,0.14)', darkStroke: '#22d3ee', darkFill: 'rgba(34,211,238,0.24)', label: 'Reference', icon: '§', role: 'resource' },
  furniture: { stroke: '#64748b', fill: 'rgba(100,116,139,0.12)', darkStroke: '#cbd5e1', darkFill: 'rgba(148,163,184,0.18)', dash: '3 5', label: 'Furniture', icon: '×', role: 'ignore' },
 }
 const shapeCss = `
 .exam-canvas-shape { --exam-stroke: var(--exam-light-stroke); --exam-fill: var(--exam-light-fill); }
 [data-color-mode="dark"] .exam-canvas-shape, .tl-theme__dark .exam-canvas-shape { --exam-stroke: var(--exam-dark-stroke); --exam-fill: var(--exam-dark-fill); }
 .exam-canvas-shape__pill { background: rgba(255,255,255,.90); color: var(--exam-stroke); box-shadow: 0 1px 4px rgba(15,23,42,.14); }
 [data-color-mode="dark"] .exam-canvas-shape__pill, .tl-theme__dark .exam-canvas-shape__pill { background: rgba(15,23,42,.88); color: var(--exam-stroke); box-shadow: 0 1px 5px rgba(0,0,0,.35); }
 `
 function renderShape(shape: ExamCanvasTLShape) {
  const kind = shape.props.kind
  const p = canvasShapePalette[kind] ?? canvasShapePalette.response
  const isBoundary = kind === 'boundary'
  return (
    <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'all' }}>
      <style>{shapeCss}</style>
      <div
        className={`exam-canvas-shape exam-canvas-shape--${kind}`}
        style={{
          '--exam-light-stroke': p.stroke,
          '--exam-light-fill': p.fill,
          '--exam-dark-stroke': p.darkStroke,
          '--exam-dark-fill': p.darkFill,
          width: '100%', height: '100%', boxSizing: 'border-box', border: `${isBoundary ? 2 : 1.5}px solid var(--exam-stroke)`,
          borderStyle: p.dash ? 'dashed' : 'solid', borderRadius: isBoundary ? 999 : 10,
          background: isBoundary ? 'transparent' : 'var(--exam-fill)', color: 'var(--exam-stroke)', fontFamily: 'Inter, system-ui, sans-serif',
          display: 'flex', alignItems: isBoundary ? 'center' : 'flex-start', justifyContent: isBoundary ? 'center' : 'space-between',
          padding: isBoundary ? '0 8px' : 8, boxShadow: isBoundary ? '0 0 0 3px rgba(239,68,68,0.08)' : '0 10px 22px rgba(15,23,42,0.10)', overflow: 'hidden', gap: 6,
        } as React.CSSProperties}
        aria-label={`${p.label}: ${p.role}`}
        title={`${p.label}: ${p.role}`}
      >
        <span className="exam-canvas-shape__pill" style={{ fontSize: 12, fontWeight: 900, textTransform: 'uppercase', letterSpacing: 0.6, borderRadius: 999, padding: '2px 7px', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <span aria-hidden="true">{p.icon}</span>
          {shape.props.label || p.label}
        </span>
        {!isBoundary && shape.props.questionId && <span className="exam-canvas-shape__pill" style={{ fontSize: 11, fontWeight: 800, borderRadius: 999, padding: '2px 7px' }}>Attached</span>}
        {isBoundary && <span className="exam-canvas-shape__pill" style={{ fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px' }}>pair across pages</span>}
      </div>
    </HTMLContainer>
  )
 }
 function defaultProps(kind: ExamCanvasShapeKind, w: number, h: number) {
  const p = canvasShapePalette[kind]
  return { w, h, label: p.label, kind, responseForm: kind === 'response' ? 'lines' : undefined, contextType: kind === 'context' ? 'generic' : undefined }
 }
 const sharedProps = { w: T.number, h: T.number, label: T.string, kind: T.string, maxMarks: T.optional(T.number), responseForm: T.optional(T.string), contextType: T.optional(T.string), questionId: T.optional(T.string), domainId: T.optional(T.string) }
 const ind = (s: ExamCanvasTLShape | ExamPdfPageTLShape) => <rect width={toDomPrecision(s.props.w)} height={toDomPrecision(s.props.h)} />
 class PdfPageUtil extends BaseBoxShapeUtil<ExamPdfPageTLShape> {
  static override type = PDF_PAGE_SHAPE_TYPE
  static override props = { w: T.number, h: T.number, src: T.string, pageNumber: T.number }
  override getDefaultProps() { return { w: 780, h: 1100, src: '', pageNumber: 1 } }
  override canEdit() { return false }
  override component(shape: ExamPdfPageTLShape) {
    return (
      <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'none' }}>
        <img src={shape.props.src} alt={'PDF page ' + shape.props.pageNumber} draggable={false} style={{ width: '100%', height: '100%', display: 'block', userSelect: 'none', pointerEvents: 'none', boxShadow: '0 2px 16px rgba(15,23,42,0.18)', background: '#fff' }} />
      </HTMLContainer>
    )
  }
  override indicator(shape: ExamPdfPageTLShape) { return ind(shape) }
 }
 class BoundaryUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.boundary; static override props = sharedProps; override getDefaultProps(){ return defaultProps('boundary', 680, 8) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) }; override indicator(shape: ExamCanvasTLShape){ return ind(shape) } }
 class PartUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.part; static override props = sharedProps; override getDefaultProps(){ return defaultProps('part', 420, 170) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) }; override indicator(shape: ExamCanvasTLShape){ return ind(shape) } }
 function regionUtil(type: string, kind: ExamCanvasRegionKind, w = 360, h = 120) { return class extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = type; static override props = sharedProps; override getDefaultProps(){ return defaultProps(kind, w, h) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) }; override indicator(shape: ExamCanvasTLShape){ return ind(shape) } } }
 class BoundaryTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.boundary; static override initial = 'pointing'; shapeType = SHAPE_TYPES.boundary }
 class PartTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.part; static override initial = 'pointing'; shapeType = SHAPE_TYPES.part }
 class ResponseTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.response; static override initial = 'pointing'; shapeType = SHAPE_TYPES.response }
 class ContextTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.context; static override initial = 'pointing'; shapeType = SHAPE_TYPES.context }
 class QuestionNumberTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.question_number; static override initial = 'pointing'; shapeType = SHAPE_TYPES.question_number }
 class MarkAreaTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.mark_area; static override initial = 'pointing'; shapeType = SHAPE_TYPES.mark_area }
 class ReferenceTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.reference; static override initial = 'pointing'; shapeType = SHAPE_TYPES.reference }
 class FurnitureTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.furniture; static override initial = 'pointing'; shapeType = SHAPE_TYPES.furniture }
 export const examCanvasShapeUtils = [PdfPageUtil, BoundaryUtil, PartUtil, regionUtil(SHAPE_TYPES.response, 'response'), regionUtil(SHAPE_TYPES.context, 'context'), regionUtil(SHAPE_TYPES.question_number, 'question_number', 170, 80), regionUtil(SHAPE_TYPES.mark_area, 'mark_area', 170, 80), regionUtil(SHAPE_TYPES.reference, 'reference'), regionUtil(SHAPE_TYPES.furniture, 'furniture')] as const
 export const examCanvasTools = [BoundaryTool, PartTool, ResponseTool, ContextTool, QuestionNumberTool, MarkAreaTool, ReferenceTool, FurnitureTool] as const
 export function isPdfPageShape(type: string): boolean {
  return type === PDF_PAGE_SHAPE_TYPE
 }
 export function shapeTypeToKind(type: string): ExamCanvasShapeKind | null {
  const entry = Object.entries(SHAPE_TYPES).find(([, v]) => v === type)
  return (entry?.[0] as ExamCanvasShapeKind | undefined) ?? null
 }
@@ -0,0 +1,47 @@
 import * as pdfjsLib from "pdfjs-dist"
 import pdfWorkerSrc from "pdfjs-dist/build/pdf.worker.mjs?url"
 import { PAGE_WIDTH } from "../../../utils/exam-canvas/model"
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerSrc
 export interface PdfPageImage {
  pageNumber: number
  src: string
  width: number
  height: number
 }
 export async function loadPdfPageImages(
  pdfBytes: ArrayBuffer,
  targetWidth = PAGE_WIDTH,
  onPageReady?: (pages: PdfPageImage[]) => void,
 ): Promise<PdfPageImage[]> {
  const pdf = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise
  const pages: PdfPageImage[] = []
  // Reuse a single canvas across all pages to avoid allocating ~120 MB of canvas memory
  // for a typical 36-page exam paper.
  const canvas = document.createElement("canvas")
  for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
    const page = await pdf.getPage(pageNumber)
    const baseViewport = page.getViewport({ scale: 1 })
    const scale = targetWidth / baseViewport.width
    const viewport = page.getViewport({ scale })
    canvas.width = Math.ceil(viewport.width)
    canvas.height = Math.ceil(viewport.height)
    const context = canvas.getContext("2d")
    if (!context) throw new Error("Unable to create PDF render canvas")
    context.clearRect(0, 0, canvas.width, canvas.height)
    await page.render({ canvasContext: context, viewport }).promise
    pages.push({
      pageNumber,
      src: canvas.toDataURL("image/png"),
      width: canvas.width,
      height: canvas.height,
    })
    onPageReady?.([...pages])
  }
  return pages
 }
@@ -9,6 +9,7 @@ import {
    ArrowBack, PersonAdd, PersonRemove, CheckCircle, Cancel, School,
 } from '@mui/icons-material';
 import { useAuth } from '../../contexts/AuthContext';
 import { ResultsWidget } from '../exam';
 const API_BASE = import.meta.env.VITE_API_BASE || import.meta.env.VITE_API_URL || '/api';
@@ -254,6 +255,8 @@ const ClassDetailPage: React.FC = () => {
                </Alert>
            )}
            <ResultsWidget classId={cls.id} className={cls.name} />
            {/* Tabs */}
            <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
                <Tab label={`Students (${cls.student_count})`} />
@@ -3,9 +3,19 @@ import { Link } from 'react-router-dom';
 import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useUser } from '../../contexts/UserContext';
 import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
 import { CircularProgress } from '@mui/material';
 import { logger } from '../../debugConfig';
 const MyClassesSkeleton = () => (
  <div className="flex justify-center items-center h-64">
    <CircularProgress />
  </div>
 );
 const MyClassesPage: React.FC = () => {
  const { profile } = useUser();
  const { selectedInstituteId } = useNeoInstitute();
  const {
    myClasses,
    classesLoading: myClassesLoading,
@@ -14,8 +24,16 @@ const MyClassesPage: React.FC = () => {
  } = useTimetableStore();
  useEffect(() => {
-    fetchMyClasses();
+    fetchMyClasses().catch((error) =>
-  }, [fetchMyClasses]);
+      logger.warn('my-classes', 'Fetch my classes failed', {
        message: error instanceof Error ? error.message : String(error),
      })
    );
  }, [fetchMyClasses, selectedInstituteId]);
  if (myClassesLoading) {
    return <MyClassesSkeleton />;
  }
  const getRoleLabel = (role: string) => {
    switch (role) {
@@ -36,14 +54,6 @@ const MyClassesPage: React.FC = () => {
    }
  };
  if (myClassesLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }
  if (myClassesError) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -0,0 +1,76 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { CalendarToday, KeyboardArrowRight } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { format, parseISO } from 'date-fns';
 const TimetableListPage: React.FC = () => {
  const { timetables, timetablesLoading, timetablesError, fetchTimetables } = useTimetableStore();
  useEffect(() => {
    fetchTimetables();
  }, [fetchTimetables]);
  if (timetablesLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
      </div>
    );
  }
  // Treat fetch errors (including 404 — endpoint not yet available) as empty state
  const showEmpty = timetablesError || timetables.length === 0;
  return (
    <div className="container mx-auto px-4 py-6 max-w-4xl">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Timetables</h1>
          <p className="mt-1 text-gray-500">Your scheduled timetables</p>
        </div>
      </div>
      {showEmpty ? (
        <div className="text-center py-16">
          <CalendarToday sx={{ fontSize: 48 }} className="mx-auto mb-4 text-gray-300" />
          <h3 className="text-lg font-medium text-gray-900">No timetables yet</h3>
          <p className="mt-2 text-gray-500">
            Timetables are created from a class. Go to{' '}
            <Link to="/classes" className="text-blue-600 hover:underline">Classes</Link>{' '}
            to get started.
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {timetables.map((timetable) => (
            <Link
              key={timetable.id}
              to={`/timetable/${timetable.id}`}
              className="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow"
            >
              <CalendarToday className="text-blue-500 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <h3 className="font-semibold text-gray-900 truncate">{timetable.name}</h3>
                <p className="text-sm text-gray-500">
                  {format(parseISO(timetable.start_date), 'MMM d, yyyy')}
                  {timetable.end_date
                    ? ` – ${format(parseISO(timetable.end_date), 'MMM d, yyyy')}`
                    : ' (ongoing)'}
                </p>
              </div>
              {timetable.recurrence_rule && (
                <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex-shrink-0">
                  Recurring
                </span>
              )}
              <KeyboardArrowRight className="text-gray-400 flex-shrink-0" />
            </Link>
          ))}
        </div>
      )}
    </div>
  );
 };
 export default TimetableListPage;
@@ -3,6 +3,7 @@
 */
 export { default as TimetablePage } from './TimetablePage';
 export { default as TimetableListPage } from './TimetableListPage';
 export { default as ClassesPage } from './ClassesPage';
 export { default as LessonPage } from './LessonPage';
 export { default as TaughtLessonsPage } from './TaughtLessonsPage';
@@ -1,92 +0,0 @@
 import { TLShapeId } from '@tldraw/tldraw';
 export interface AnnotationData {
  studentIndex?: number;  // undefined for exam/markscheme annotations
  pageIndex: number;
  shapeId: TLShapeId;
  bounds: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
 }
 export class AnnotationManager {
  private examAnnotations: Set<TLShapeId> = new Set();
  private markSchemeAnnotations: Set<TLShapeId> = new Set();
  private studentAnnotations: Map<number, Set<TLShapeId>> = new Map();
  private annotationData: Map<TLShapeId, AnnotationData> = new Map();
  addAnnotation(shapeId: TLShapeId, data: AnnotationData) {
    this.annotationData.set(shapeId, data);
    if (data.studentIndex !== undefined) {
      // Student response annotation
      let studentSet = this.studentAnnotations.get(data.studentIndex);
      if (!studentSet) {
        studentSet = new Set();
        this.studentAnnotations.set(data.studentIndex, studentSet);
      }
      studentSet.add(shapeId);
    } else {
      // Exam or mark scheme annotation
      if (data.pageIndex < 0) {
        this.examAnnotations.add(shapeId);
      } else {
        this.markSchemeAnnotations.add(shapeId);
      }
    }
  }
  removeAnnotation(shapeId: TLShapeId) {
    const data = this.annotationData.get(shapeId);
    if (!data) return;
    if (data.studentIndex !== undefined) {
      const studentSet = this.studentAnnotations.get(data.studentIndex);
      studentSet?.delete(shapeId);
    } else {
      if (data.pageIndex < 0) {
        this.examAnnotations.delete(shapeId);
      } else {
        this.markSchemeAnnotations.delete(shapeId);
      }
    }
    this.annotationData.delete(shapeId);
  }
  getAnnotationsForStudent(studentIndex: number): TLShapeId[] {
    return Array.from(this.studentAnnotations.get(studentIndex) || []);
  }
  getAnnotationsForExam(): TLShapeId[] {
    return Array.from(this.examAnnotations);
  }
  getAnnotationsForMarkScheme(): TLShapeId[] {
    return Array.from(this.markSchemeAnnotations);
  }
  getAnnotationData(shapeId: TLShapeId): AnnotationData | undefined {
    return this.annotationData.get(shapeId);
  }
  clear() {
    this.examAnnotations.clear();
    this.markSchemeAnnotations.clear();
    this.studentAnnotations.clear();
    this.annotationData.clear();
  }
  // Future transcription support
  addTranscriptionToAnnotation(shapeId: TLShapeId) {
    const data = this.annotationData.get(shapeId);
    if (data) {
      this.annotationData.set(shapeId, {
        ...data
      });
    }
  }
 } 
@@ -1,108 +0,0 @@
 import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import 'tldraw/tldraw.css';
 import { CCPdfEditor } from './CCPdfEditor';
 import { CCPdfPicker } from './CCPdfPicker';
 import { ExamPdfState } from './types';
 import './cc-exam-marker.css';
 import { HEADER_HEIGHT } from '../../Layout';
 import { CCPanel } from '../../../utils/tldraw/ui-overrides/components/CCPanel';
 export const CCExamMarker = () => {
  const [state, setState] = useState<ExamPdfState>({ phase: 'pick' });
  const [view, setView] = useState<'exam-and-markscheme' | 'student-responses'>('exam-and-markscheme');
  const [currentStudentIndex, setCurrentStudentIndex] = useState(0);
  const [isExpanded, setIsExpanded] = useState(false);
  const [isPinned, setIsPinned] = useState(false);
  const handleViewChange = (newView: 'exam-and-markscheme' | 'student-responses') => {
    setView(newView);
  };
  const handleNextStudent = () => {
    if (state.phase === 'edit' && 'studentResponses' in state && 'examPaper' in state) {
      const totalStudents = Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length);
      if (currentStudentIndex < totalStudents - 1) {
        setCurrentStudentIndex(prev => prev + 1);
      }
    }
  };
  const handlePreviousStudent = () => {
    if (currentStudentIndex > 0) {
      setCurrentStudentIndex(prev => prev - 1);
    }
  };
  return (
    <Box sx={{ 
      position: 'fixed',
      inset: 0,
      top: `${HEADER_HEIGHT}px`,
      display: 'flex',
      flexDirection: 'column',
      bgcolor: 'background.default',
      color: 'text.primary',
    }}>
      {state.phase === 'pick' ? (
        <CCPdfPicker 
          onOpenPdfs={(pdfs) =>
            setState({
              phase: 'edit',
              examPaper: pdfs.examPaper,
              markScheme: pdfs.markScheme,
              studentResponses: pdfs.studentResponses,
            })
          }
        />
      ) : (
        <Box sx={{ flex: 1, position: 'relative' }}>
          <Box sx={{ 
            position: 'absolute',
            inset: 0,
            bgcolor: 'background.paper',
          }}>
            <CCPdfEditor
              examPaper={state.examPaper}
              markScheme={state.markScheme}
              studentResponses={state.studentResponses}
              currentView={view}
              currentStudentIndex={currentStudentIndex}
              onEditorMount={(editor) => {
                if (!editor) return null;
                const examMarkerProps = {
                  editor,
                  currentView: view,
                  onViewChange: handleViewChange,
                  currentStudentIndex,
                  totalStudents: Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length),
                  onPreviousStudent: handlePreviousStudent,
                  onNextStudent: handleNextStudent,
                  getCurrentPdf: () => {
                    if (!editor) return null;
                    const currentPageId = editor.getCurrentPageId();
                    if (currentPageId.includes('exam-page')) {
                      return state.examPaper;
                    } else if (currentPageId.includes('mark-scheme-page')) {
                      return state.markScheme;
                    } else if (currentPageId.includes('student-response')) {
                      return state.studentResponses;
                    }
                    return null;
                  },
                };
                return <CCPanel 
                  examMarkerProps={examMarkerProps} 
                  isExpanded={isExpanded}
                  isPinned={isPinned}
                  onExpandedChange={setIsExpanded}
                  onPinnedChange={setIsPinned}
                />;
              }}
            />
          </Box>
        </Box>
      )}
    </Box>
  );
 };
@@ -1,113 +0,0 @@
 import { PDFDocument } from 'pdf-lib';
 import { useState } from 'react';
 import { Editor, exportToBlob } from '@tldraw/tldraw';
 import { Button } from '@mui/material';
 import { Pdf } from './types';
 interface CCExportPdfButtonProps {
  editor: Editor;
  pdf: Pdf;
 }
 export function CCExportPdfButton({ editor, pdf }: CCExportPdfButtonProps) {
  const [exportProgress, setExportProgress] = useState<number | null>(null);
  const exportPdf = async (
    editor: Editor,
    { name, source, pages }: Pdf,
    onProgress: (progress: number) => void
  ) => {
    const totalThings = pages.length * 2 + 2;
    let progressCount = 0;
    const tickProgress = () => {
      progressCount++;
      onProgress(progressCount / totalThings);
    };
    const pdf = await PDFDocument.load(source);
    tickProgress();
    const pdfPages = pdf.getPages();
    if (pdfPages.length !== pages.length) {
      throw new Error('PDF page count mismatch');
    }
    const pageShapeIds = new Set(pages.map((page) => page.shapeId));
    const allIds = Array.from(editor.getCurrentPageShapeIds()).filter(
      (id) => !pageShapeIds.has(id)
    );
    for (let i = 0; i < pages.length; i++) {
      const page = pages[i];
      const pdfPage = pdfPages[i];
      const {bounds} = page;
      const shapesInBounds = allIds.filter((id) => {
        const shapePageBounds = editor.getShapePageBounds(id);
        if (!shapePageBounds) return false;
        return shapePageBounds.collides(bounds);
      });
      if (shapesInBounds.length === 0) {
        tickProgress();
        tickProgress();
        continue;
      }
      const exportedPng = await exportToBlob({
        editor,
        ids: allIds,
        format: 'png',
        opts: { background: false, bounds: page.bounds, padding: 0, scale: 1 },
      });
      tickProgress();
      pdfPage.drawImage(await pdf.embedPng(await exportedPng.arrayBuffer()), {
        x: 0,
        y: 0,
        width: pdfPage.getWidth(),
        height: pdfPage.getHeight(),
      });
      tickProgress();
    }
    const url = URL.createObjectURL(
      new Blob([await pdf.save()], { type: 'application/pdf' })
    );
    tickProgress();
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.click();
    URL.revokeObjectURL(url);
  };
  return (
    <Button
      className="CCExportPdfButton"
      variant="contained"
      color="primary"
      onClick={async () => {
        setExportProgress(0);
        try {
          await exportPdf(editor, pdf, setExportProgress);
        } finally {
          setExportProgress(null);
        }
      }}
      sx={{
        position: 'absolute',
        top: 16,
        right: 16,
        zIndex: 1000,
      }}
    >
      {exportProgress
        ? `Exporting... ${Math.round(exportProgress * 100)}%`
        : 'Export PDF'}
    </Button>
  );
 } 
@@ -1,385 +0,0 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { Editor, TLPageId, Box as TLBox } from '@tldraw/editor';
 import { Tldraw } from '@tldraw/tldraw';
 import { useCallback, useEffect, useState, useRef } from 'react';
 import { ExamPdfs } from './types';
 import { AnnotationManager, AnnotationData } from './AnnotationManager';
 import { logger } from '../../../debugConfig';
 const PAGE_SPACING = 32; // Same spacing as the example
 interface CCPdfEditorProps extends ExamPdfs {
  currentView: 'exam-and-markscheme' | 'student-responses';
  currentStudentIndex: number;
  onEditorMount: (editor: Editor) => React.ReactNode;
 }
 export function CCPdfEditor({
  examPaper,
  markScheme,
  studentResponses,
  currentView,
  currentStudentIndex,
  onEditorMount,
 }: CCPdfEditorProps) {
  const [editor, setEditor] = useState<Editor | null>(null);
  const [pagesInitialized, setPagesInitialized] = useState(false);
  const annotationManager = useRef(new AnnotationManager());
  const handleMount = useCallback((editor: Editor) => {
    setEditor(editor);
    onEditorMount(editor);
    // Subscribe to shape changes
    editor.on('change', () => {
      const shapes = editor.getCurrentPageShapeIds();
      logger.debug('cc-exam-marker', '🔄 Shape change detected', {
        totalShapes: shapes.size,
        currentPage: editor.getCurrentPageId()
      });
      shapes.forEach(shapeId => {
        const shape = editor.getShape(shapeId);
        if (shape && !shape.isLocked) {  // Only track non-locked shapes (annotations)
          const bounds = editor.getShapePageBounds(shapeId);
          if (bounds) {
            const currentPageId = editor.getCurrentPageId();
            let annotationData: AnnotationData;
            if (currentPageId.includes('student-response')) {
              const studentIndex = parseInt(currentPageId.split('-').pop() || '0', 10);
              // Find which page this annotation belongs to by checking collision with page bounds
              const pageShapes = Array.from(shapes).filter(id => {
                const s = editor.getShape(id);
                return s?.isLocked;  // Locked shapes are our PDF pages
              });
              let pageIndex = -1;  // Default to -1 if no collision found
              for (let i = 0; i < pageShapes.length; i++) {
                const pageShape = editor.getShape(pageShapes[i]);
                if (!pageShape) continue;
                const pageBounds = editor.getShapePageBounds(pageShapes[i]);
                if (!pageBounds) continue;
                // Check if the annotation's center point is within the page bounds
                const annotationCenter = {
                  x: bounds.x + bounds.width / 2,
                  y: bounds.y + bounds.height / 2
                };
                if (annotationCenter.x >= pageBounds.x && 
                    annotationCenter.x <= pageBounds.x + pageBounds.width &&
                    annotationCenter.y >= pageBounds.y && 
                    annotationCenter.y <= pageBounds.y + pageBounds.height) {
                  pageIndex = i;
                  break;
                }
              }
              logger.debug('cc-exam-marker', '📏 Calculated page index', {
                shapeId,
                shapeBounds: bounds,
                pageIndex,
                studentIndex
              });
              annotationData = {
                studentIndex,
                pageIndex,
                shapeId,
                bounds: {
                  x: bounds.x,
                  y: bounds.y,
                  width: bounds.width,
                  height: bounds.height,
                }
              };
            } else {
              // For exam/mark scheme, use current page type as index
              const pageIndex = currentPageId.includes('exam') ? -1 : 1;
              annotationData = {
                pageIndex,
                shapeId,
                bounds: {
                  x: bounds.x,
                  y: bounds.y,
                  width: bounds.width,
                  height: bounds.height,
                }
              };
            }
            logger.debug('cc-exam-marker', '📝 Adding/updating annotation', {
              shapeId,
              annotationData,
              currentPage: currentPageId
            });
            annotationManager.current.addAnnotation(shapeId, annotationData);
          }
        }
      });
    });
  }, [onEditorMount]);
  // Initial setup effect - runs only once when editor is mounted
  useEffect(() => {
    if (!editor || pagesInitialized) return;
    const setupExamAndMarkScheme = async () => {
      const examPageId = 'page:exam-page' as TLPageId;
      const markSchemePageId = 'page:mark-scheme-page' as TLPageId;
      // Calculate vertical layout for exam pages
      let top = 0;
      let widest = 0;
      const examPages = examPaper.pages.map(page => {
        const width = page.bounds.width;
        const height = page.bounds.height;
        const currentTop = top;
        top += height + PAGE_SPACING;
        widest = Math.max(widest, width);
        return { ...page, top: currentTop, width, height };
      });
      // Center pages horizontally
      examPages.forEach(page => {
        page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
      });
      // Create exam paper page
      editor.createPage({ 
        id: examPageId,
        name: 'Exam Paper',
      });
      editor.setCurrentPage(examPageId);
      // Create assets and shapes for exam pages
      examPages.forEach((page) => {
        editor.createAssets([{
          id: page.assetId,
          typeName: 'asset',
          type: 'image',
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            name: 'PDF Page',
            src: page.src,
            isAnimated: false,
            mimeType: 'image/png',
          },
          meta: {},
        }]);
        editor.createShape({
          id: page.shapeId,
          type: 'image',
          x: page.bounds.x,
          y: page.bounds.y,
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            assetId: page.assetId,
          },
          isLocked: true,
        });
      });
      // Similar process for mark scheme pages
      let markSchemeTop = 0;
      const markSchemePages = markScheme.pages.map(page => {
        const width = page.bounds.width;
        const height = page.bounds.height;
        const currentTop = markSchemeTop;
        markSchemeTop += height + PAGE_SPACING;
        return {
          ...page,
          bounds: new TLBox((widest - width) / 2, currentTop, width, height)
        };
      });
      // Create mark scheme page
      editor.createPage({ 
        id: markSchemePageId,
        name: 'Mark Scheme',
      });
      editor.setCurrentPage(markSchemePageId);
      // Create assets and shapes for mark scheme pages
      markSchemePages.forEach((page) => {
        editor.createAssets([{
          id: page.assetId,
          typeName: 'asset',
          type: 'image',
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            name: 'PDF Page',
            src: page.src,
            isAnimated: false,
            mimeType: 'image/png',
          },
          meta: {},
        }]);
        editor.createShape({
          id: page.shapeId,
          type: 'image',
          x: page.bounds.x,
          y: page.bounds.y,
          props: {
            w: page.bounds.width,
            h: page.bounds.height,
            assetId: page.assetId,
          },
          isLocked: true,
        });
      });
      // Go back to exam page
      editor.setCurrentPage(examPageId);
    };
    const setupStudentResponses = async () => {
      const pagesPerStudent = examPaper.pages.length;
      const totalStudents = Math.floor(studentResponses.pages.length / pagesPerStudent);
      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
        const startPage = studentIndex * pagesPerStudent;
        const endPage = startPage + pagesPerStudent;
        const studentPageId = `page:student-response-${studentIndex}` as TLPageId;
        // Calculate vertical layout
        let top = 0;
        let widest = 0;
        const studentPages = studentResponses.pages
          .slice(startPage, endPage)
          .map(page => {
            const width = page.bounds.width;
            const height = page.bounds.height;
            const currentTop = top;
            top += height + PAGE_SPACING;
            widest = Math.max(widest, width);
            return { ...page, top: currentTop, width, height };
          });
        // Center pages horizontally
        studentPages.forEach(page => {
          page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
        });
        // Create page for this student
        editor.createPage({ 
          id: studentPageId,
          name: `Student ${studentIndex + 1}`,
        });
        editor.setCurrentPage(studentPageId);
        // Create assets and shapes
        studentPages.forEach((page) => {
          editor.createAssets([{
            id: page.assetId,
            typeName: 'asset',
            type: 'image',
            props: {
              w: page.bounds.width,
              h: page.bounds.height,
              name: 'PDF Page',
              src: page.src,
              isAnimated: false,
              mimeType: 'image/png',
            },
            meta: {},
          }]);
          editor.createShape({
            id: page.shapeId,
            type: 'image',
            x: page.bounds.x,
            y: page.bounds.y,
            props: {
              w: page.bounds.width,
              h: page.bounds.height,
              assetId: page.assetId,
            },
            isLocked: true,
          });
        });
      }
    };
    // Initial setup of all pages
    const setup = async () => {
      await setupExamAndMarkScheme();
      await setupStudentResponses();
      setPagesInitialized(true);
    };
    setup();
  }, [editor, pagesInitialized, examPaper, markScheme, studentResponses]);
  // Effect to handle view changes and navigation
  useEffect(() => {
    if (!editor || !pagesInitialized) return;
    // Switch to appropriate page based on current view
    const targetPageId = currentView === 'exam-and-markscheme'
      ? ('page:exam-page' as TLPageId)
      : (`page:student-response-${currentStudentIndex}` as TLPageId);
    logger.debug('cc-exam-marker', '🔄 Switching view', {
      currentView,
      currentStudentIndex,
      targetPageId
    });
    editor.setCurrentPage(targetPageId);
    // Update camera constraints for current page
    const currentPageBounds = Array.from(editor.getCurrentPageShapeIds()).reduce(
      (acc: TLBox | null, shapeId) => {
        const bounds = editor.getShapePageBounds(shapeId);
        return bounds ? (acc ? acc.union(bounds) : bounds) : acc;
      },
      null as TLBox | null
    );
    if (currentPageBounds) {
      const isMobile = editor.getViewportScreenBounds().width < 840;
      editor.setCameraOptions({
        constraints: {
          bounds: currentPageBounds,
          padding: { x: isMobile ? 16 : 164, y: 64 },
          origin: { x: 0.5, y: 0 },
          initialZoom: 'fit-x-100',
          baseZoom: 'default',
          behavior: 'contain',
        },
      });
      editor.setCamera(editor.getCamera(), { reset: true });
    }
  }, [editor, pagesInitialized, currentView, currentStudentIndex]);
  // Expose annotationManager to parent through onEditorMount
  useEffect(() => {
    if (editor) {
      onEditorMount(editor);
      // @ts-expect-error - Adding custom property to editor for CCExamMarkerPanel access
      editor.annotationManager = annotationManager.current;
    }
  }, [editor, onEditorMount]);
  return (
    <Box sx={{ width: '100%', height: '100%', position: 'relative' }}>
      <Tldraw 
        onMount={handleMount}
        components={{
          InFrontOfTheCanvas: () => onEditorMount(editor!)
        }}
      />
    </Box>
  );
 } 
@@ -1,210 +0,0 @@
 import { useState } from 'react';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import { AssetRecordType, Box as TLBox, createShapeId } from '@tldraw/editor';
 import { ExamPdfs, Pdf, PdfPage } from './types';
 interface CCPdfPickerProps {
  onOpenPdfs: (pdfs: ExamPdfs) => void;
 }
 const pageSpacing = 32;
 export function CCPdfPicker({ onOpenPdfs }: CCPdfPickerProps) {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedPdfs, setSelectedPdfs] = useState<Partial<ExamPdfs>>({});
  async function loadPdf(name: string, source: ArrayBuffer): Promise<Pdf> {
    const PdfJS = await import('pdfjs-dist');
    PdfJS.GlobalWorkerOptions.workerSrc = new URL(
      'pdfjs-dist/build/pdf.worker.min.mjs',
      import.meta.url
    ).toString();
    const pdf = await PdfJS.getDocument(source.slice()).promise;
    const pages: PdfPage[] = [];
    const canvas = window.document.createElement('canvas');
    const context = canvas.getContext('2d');
    if (!context) throw new Error('Failed to create canvas context');
    const visualScale = 1.5;
    const scale = window.devicePixelRatio;
    let top = 0;
    let widest = 0;
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const viewport = page.getViewport({ scale: scale * visualScale });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const renderContext = {
        canvasContext: context,
        viewport,
      };
      await page.render(renderContext).promise;
      const width = viewport.width / scale;
      const height = viewport.height / scale;
      pages.push({
        src: canvas.toDataURL(),
        bounds: new TLBox(0, top, width, height),
        assetId: AssetRecordType.createId(),
        shapeId: createShapeId(),
      });
      top += height + pageSpacing;
      widest = Math.max(widest, width);
    }
    canvas.width = 0;
    canvas.height = 0;
    for (const page of pages) {
      page.bounds.x = (widest - page.bounds.width) / 2;
    }
    return {
      name,
      pages,
      source,
    };
  }
  const handleFileSelect = async (type: keyof ExamPdfs, file: File) => {
    setIsLoading(true);
    try {
      const pdf = await loadPdf(file.name, await file.arrayBuffer());
      // Validate student responses page count
      if (type === 'studentResponses' && selectedPdfs.examPaper) {
        const examPageCount = selectedPdfs.examPaper.pages.length;
        if (pdf.pages.length % examPageCount !== 0) {
          alert(`Student responses PDF must have a number of pages that is a multiple of the exam paper's ${examPageCount} pages.\n\nStudent responses PDF has ${pdf.pages.length} pages, which is not a multiple of ${examPageCount}.`);
          return;
        }
      }
      setSelectedPdfs((prev) => ({ ...prev, [type]: pdf }));
    } catch (error) {
      console.error('Error loading PDF:', error);
      alert('Error loading PDF (mismatch between responses and exam paper). Please try again.');
    } finally {
      setIsLoading(false);
    }
  };
  const createFileInput = (type: keyof ExamPdfs) => {
    const input = window.document.createElement('input');
    input.type = 'file';
    input.accept = 'application/pdf';
    input.addEventListener('change', async (e) => {
      const fileList = (e.target as HTMLInputElement).files;
      if (!fileList || fileList.length === 0) return;
      await handleFileSelect(type, fileList[0]);
    });
    input.click();
  };
  const allPdfsSelected = () => {
    return (
      selectedPdfs.examPaper &&
      selectedPdfs.markScheme &&
      selectedPdfs.studentResponses
    );
  };
  if (isLoading) {
    return (
      <Box className="CCPdfPicker" sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        width: '100%'
      }}>
        <Typography>Loading...</Typography>
      </Box>
    );
  }
  return (
    <Box className="CCPdfPicker" sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      width: '100%'
    }}>
      <Stack 
        spacing={4} 
        alignItems="center" 
        sx={{ 
          maxWidth: '800px',
          width: '100%',
          p: 3
        }}
      >
        <Typography variant="h5">Select PDF Files</Typography>
        <Stack 
          direction="row" 
          sx={{ 
            width: '100%', 
            justifyContent: 'center',
            gap: 4  // Using MUI's spacing unit (1 unit = 8px, so 4 = 32px)
          }}
        >
          <Button
            variant={selectedPdfs.examPaper ? 'contained' : 'outlined'}
            onClick={() => createFileInput('examPaper')}
            sx={{ 
              minWidth: '180px',
              height: '48px'
            }}
          >
            {selectedPdfs.examPaper ? '✓ Exam Paper' : 'Select Exam Paper'}
          </Button>
          <Button
            variant={selectedPdfs.markScheme ? 'contained' : 'outlined'}
            onClick={() => createFileInput('markScheme')}
            sx={{ 
              minWidth: '180px',
              height: '48px'
            }}
          >
            {selectedPdfs.markScheme ? '✓ Mark Scheme' : 'Select Mark Scheme'}
          </Button>
          <Button
            variant={selectedPdfs.studentResponses ? 'contained' : 'outlined'}
            onClick={() => createFileInput('studentResponses')}
            sx={{ 
              minWidth: '180px',
              height: '48px'
            }}
          >
            {selectedPdfs.studentResponses ? '✓ Student Responses' : 'Select Student Responses'}
          </Button>
        </Stack>
        {allPdfsSelected() && (
          <Box sx={{ mt: 4, width: '100%', display: 'flex', justifyContent: 'center' }}>
            <Button
              variant="contained"
              color="primary"
              onClick={() => onOpenPdfs(selectedPdfs as ExamPdfs)}
              sx={{ 
                minWidth: '180px',
                height: '48px'
              }}
            >
              Continue
            </Button>
          </Box>
        )}
      </Stack>
    </Box>
  );
 } 
@@ -1,61 +0,0 @@
 .CCExamMarker {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
 }
 .CCExamMarker .CCPdfPicker {
  position: absolute;
  inset: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 1rem;
 }
 .CCExamMarker .CCPdfBgRenderer {
  position: absolute;
  pointer-events: none;
 }
 .CCExamMarker .CCPdfBgRenderer img {
  position: absolute;
 }
 .CCExamMarker .PageOverlayScreen-screen {
  pointer-events: none;
  z-index: -1;
  fill: var(--color-background);
  fill-opacity: 0.8;
  stroke: none;
 }
 .CCExamMarker .PageOverlayScreen-outline {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  box-shadow: var(--shadow-2);
 }
 .CCExamMarker .CCExportPdfButton {
  font: inherit;
  background: var(--color-primary);
  border: none;
  color: var(--color-selected-contrast);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin: 6px;
  margin-bottom: 0;
  pointer-events: all;
  z-index: var(--layer-panels);
  border: 2px solid var(--color-background);
  cursor: pointer;
 }
 .CCExamMarker .CCExportPdfButton:hover {
  filter: brightness(1.1);
 } 
@@ -1,44 +0,0 @@
 import { Box, TLAssetId, TLShapeId } from '@tldraw/tldraw';
 export interface PdfPage {
  src: string;
  bounds: Box;
  assetId: TLAssetId;
  shapeId: TLShapeId;
 }
 export interface Pdf {
  name: string;
  pages: PdfPage[];
  source: string | ArrayBuffer;
 }
 export interface ExamPdfs {
  examPaper: Pdf;
  markScheme: Pdf;
  studentResponses: Pdf;
 }
 export type ExamPdfState =
  | {
      phase: 'pick';
    }
  | {
      phase: 'edit';
      examPaper: Pdf;
      markScheme: Pdf;
      studentResponses: Pdf;
    };
 export interface StudentResponse {
  studentId: string;
  pageStart: number;
  pageEnd: number;
 }
 export interface ExamMetadata {
  totalPages: number;
  pagesPerStudent: number;
  totalStudents: number;
  studentResponses: StudentResponse[];
 } 
@@ -6,7 +6,8 @@ import {
    useTldrawUser,
    DEFAULT_SUPPORT_VIDEO_TYPES,
    DEFAULT_SUPPORTED_IMAGE_TYPES,
-    TLStore
+    TLStore,
    createTLStore,
 } from '@tldraw/tldraw';
 import { useTLDraw } from '../../contexts/TLDrawContext';
 import { useAuth } from '../../contexts/AuthContext';
@@ -32,6 +33,7 @@ import '../../utils/tldraw/tldraw.css';
 // App debug
 import { logger } from '../../debugConfig';
 import { CircularProgress, Alert, Snackbar } from '@mui/material';
 import { ErrorBoundary } from '../../components/ErrorBoundary';
 interface LoadingState {
    status: 'ready' | 'loading' | 'error';
@@ -79,52 +81,31 @@ export default function SinglePlayerPage() {
        setUserPreferences: setTldrawPreferences
    });
    // Orchestrated context.node lifecycle — replaces 3 separate effects
    const [canvasPhase, setCanvasPhase] = useState<
-        'idle' | 'store-init' | 'snapshot-loading' | 'node-placing' | 'ready' | 'navigating' | 'error'
+        'idle' | 'store-init' | 'snapshot-loading' | 'ready' | 'error'
    >('idle');
    const phaseError = useRef<string>('');
    // Effect 1: Create the store ONCE per user session. Never recreate on node changes.
    // Disposing the store while Tldraw is subscribed causes currentPageId crashes; keeping
    // the store alive for the component lifetime avoids all disposal race conditions.
    useEffect(() => {
        if (!user) return;
        let cancelled = false;
        const run = async () => {
            try {
        setCanvasPhase('store-init');
-                const newStore = localStoreService.getStore({
+        const store = createTLStore({
            schema: customSchema,
            shapeUtils: allShapeUtils,
-                    bindingUtils: allBindingUtils
+            bindingUtils: allBindingUtils,
        });
        // Initialize default tldraw records (TLINSTANCE, page, cameras) before mount
        (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
-                const snapSvc = new NavigationSnapshotService(newStore, editorRef.current || undefined);
+        const snapSvc = new NavigationSnapshotService(store, undefined);
        if (accessToken) snapSvc.setAccessToken(accessToken);
        snapshotServiceRef.current = snapSvc;
                if (context.node) {
                    setCanvasPhase('snapshot-loading');
                    const path = context.node.node_storage_path;
                    if (path) {
                        await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
                            path,
                            accessToken || '',
                            newStore,
                            setLoadingState,
                            undefined,
                            editorRef.current || undefined
                        );
                        snapSvc.setCurrentNodePath(path);
                    }
                }
                if (cancelled) {
                    newStore.dispose();
                    return;
                }
        let debounce: ReturnType<typeof setTimeout> | null = null;
-                newStore.listen(() => {
+        const unsubscribe = store.listen(() => {
            if (!snapshotServiceRef.current?.getCurrentNodePath()) return;
            if (debounce) clearTimeout(debounce);
            debounce = setTimeout(async () => {
@@ -132,27 +113,62 @@ export default function SinglePlayerPage() {
            }, 2000);
        });
-                storeRef.current = newStore;
+        storeRef.current = store;
        setStoreReady(true);
        setCanvasPhase('ready');
            } catch (e) {
                phaseError.current = e instanceof Error ? e.message : 'Init failed';
                setCanvasPhase('error');
            }
        };
        run();
        return () => {
-            cancelled = true;
+            unsubscribe?.();
            snapshotServiceRef.current?.forceSaveCurrentNode().catch(() => {});
            snapshotServiceRef.current?.clearCurrentNode();
            snapshotServiceRef.current = null;
            storeRef.current?.dispose();
            storeRef.current = null;
            setStoreReady(false);
            setCanvasPhase('idle');
            store.dispose();
            storeRef.current = null;
        };
-    }, [user?.id, context.node?.id]);
+    }, [user?.id]);  // Only recreate store if user changes, NOT on every node navigation
    // Effect 2: Load/reload snapshot when context.node changes. Store stays alive.
    useEffect(() => {
        if (!user || !storeRef.current) return;
        const store = storeRef.current;
        let cancelled = false;
        const loadNodeSnapshot = async () => {
            if (!context.node?.node_storage_path) {
                // No node — clear to blank canvas using ensureStoreIsUsable to restore defaults
                (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
                snapshotServiceRef.current?.clearCurrentNode();
                setCanvasPhase('ready');
                return;
            }
            setCanvasPhase('snapshot-loading');
            try {
                await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
                    context.node.node_storage_path,
                    accessToken || '',
                    store,
                    setLoadingState,
                    undefined,
                    editorRef.current || undefined
                );
                if (!cancelled) {
                    // Repair store in case snapshot overwrote TLINSTANCE
                    (store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable();
                    snapshotServiceRef.current?.setCurrentNodePath(context.node.node_storage_path);
                    setCanvasPhase('ready');
                }
            } catch (e) {
                if (!cancelled) setCanvasPhase('ready'); // show blank canvas on error
            }
        };
        loadNodeSnapshot();
        return () => { cancelled = true; };
    }, [context.node?.id, storeReady]);  // re-run when node changes OR after store becomes ready
    // Handle navigation changes — save previous snapshot, load next one.
    // No automatic node shape placement: the canvas shows only persisted state.
@@ -342,6 +358,12 @@ export default function SinglePlayerPage() {
                </Alert>
            </Snackbar>
            <ErrorBoundary fallback={
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '1rem', padding: '2rem' }}>
                    <p style={{ fontSize: '1.1rem' }}>Canvas failed to load.</p>
                    <button onClick={() => window.location.reload()} style={{ padding: '0.5rem 1.25rem', cursor: 'pointer' }}>Reload</button>
                </div>
            }>
            {storeReady && storeRef.current && <Tldraw
                user={tldrawUser}
                store={storeRef.current}
@@ -386,6 +408,7 @@ export default function SinglePlayerPage() {
                    }
                }}
            />}
            </ErrorBoundary>
        </div>
    );
 }
@@ -85,6 +85,12 @@ const DashboardPage: React.FC = () => {
                >
                  Open workspace
                </Button>
                <Button
                  variant="outlined"
                  onClick={() => navigate('/exam-marker')}
                >
                  Exam Marker
                </Button>
                <Button
                  variant="outlined"
                  onClick={() => navigate('/calendar')}
@@ -0,0 +1,261 @@
 /**
 * examRepository — the SINGLE module that talks to the /api/exam backend (spec R2.1 seam).
 *
 * All exam-marker persistence flows through here so a later dual-write / offline cache can slot
 * in without touching feature code. Mirrors the auth pattern of timetableService: take the
 * Supabase session JWT and send it as a Bearer token; the API enforces RLS as the user.
 */
 import axios from 'axios';
 import { API_BASE } from '../../config/apiConfig';
 import { logger } from '../../debugConfig';
 import { supabase } from '../../supabaseClient';
 import type {
  BatchQueueResponse,
  BatchResultsResponse,
  CreateBatchPayload,
  CreateTemplatePayload,
  ExamBoundary,
  ExamQuestion,
  ExamResponseArea,
  ExamTemplate,
  ExamTemplateDetail,
  MarkingBatch,
  MarkUpsertPayload,
  Neo4jSyncResult,
  PatchQuestionPayload,
  SpecPoint,
  TemplateReplacePayload,
  UpdateTemplateMetaPayload,
 } from '../../types/exam.types';
 const EXAM_BASE = `${API_BASE}/api/exam`;
 async function authHeaders(): Promise<Record<string, string>> {
  const { data: { session } } = await supabase.auth.getSession();
  if (!session?.access_token) {
    throw new Error('No authentication token available');
  }
  return { Authorization: `Bearer ${session.access_token}` };
 }
 function newUuid(): string {
  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
    return crypto.randomUUID();
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = Math.floor(Math.random() * 16);
    const v = c === 'x' ? r : (r % 4) + 8;
    return v.toString(16);
  });
 }
 function questionPayload(q: ExamQuestion, idMap?: Map<string, string>) {
  return {
    id: idMap?.get(q.id) ?? q.id,
    parent_id: q.parent_id ? (idMap?.get(q.parent_id) ?? q.parent_id) : null,
    label: q.label,
    order: q.order,
    max_marks: q.max_marks,
    answer_type: q.answer_type,
    mcq_options: q.mcq_options,
    mark_scheme: q.mark_scheme ?? {},
    is_container: q.is_container,
    spec_ref: q.spec_ref,
    bounds: q.bounds ?? null,
    page: q.page ?? null,
  };
 }
 function responseAreaPayload(r: ExamResponseArea, idMap?: Map<string, string>, duplicate = false) {
  return {
    id: duplicate ? newUuid() : r.id,
    question_id: idMap?.get(r.question_id) ?? r.question_id,
    page: r.page,
    bounds: r.bounds,
    kind: r.kind,
    response_form: r.response_form,
    context_type: r.context_type ?? null,
    source: r.source,
    confirmed: r.confirmed,
    confidence: r.confidence,
  };
 }
 function boundaryPayload(b: ExamBoundary, idMap?: Map<string, string>, duplicate = false) {
  return {
    id: duplicate ? newUuid() : b.id,
    question_id: b.question_id ? (idMap?.get(b.question_id) ?? b.question_id) : null,
    label: b.label,
    page_index: b.page_index,
    y: b.y,
    bounds: b.bounds,
    source: b.source,
    confirmed: b.confirmed,
  };
 }
 async function replaceTemplate(
  templateId: string,
  detail: ExamTemplateDetail,
  meta?: UpdateTemplateMetaPayload,
  duplicateIds = false,
 ): Promise<ExamTemplateDetail> {
  const headers = await authHeaders();
  const idMap = new Map<string, string>();
  if (duplicateIds) {
    detail.questions.forEach((q) => idMap.set(q.id, newUuid()));
  }
  const res = await axios.put<ExamTemplateDetail>(
    `${EXAM_BASE}/templates/${templateId}`,
    {
      meta,
      questions: detail.questions.map((q) => questionPayload(q, idMap)),
      response_areas: detail.response_areas.map((r) => responseAreaPayload(r, idMap, duplicateIds)),
      boundaries: detail.boundaries.map((b) => boundaryPayload(b, idMap, duplicateIds)),
    },
    { headers },
  );
  return res.data;
 }
 export const examRepository = {
  async listTemplates(includeArchived = false): Promise<ExamTemplate[]> {
    const headers = await authHeaders();
    const res = await axios.get<{ templates: ExamTemplate[] }>(
      `${EXAM_BASE}/templates`,
      { headers, params: { include_archived: includeArchived } },
    );
    return res.data.templates ?? [];
  },
  async getTemplate(templateId: string): Promise<ExamTemplateDetail> {
    const headers = await authHeaders();
    const res = await axios.get<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, { headers });
    return res.data;
  },
  async getTemplateSourcePdf(templateId: string): Promise<ArrayBuffer> {
    const headers = await authHeaders();
    const res = await axios.get<ArrayBuffer>(`${EXAM_BASE}/templates/${templateId}/source-pdf`, {
      headers,
      responseType: 'arraybuffer',
    });
    return res.data;
  },
  async createTemplate(payload: CreateTemplatePayload): Promise<ExamTemplate> {
    const headers = await authHeaders();
    const res = await axios.post<ExamTemplate>(`${EXAM_BASE}/templates`, payload, { headers });
    return res.data;
  },
  async updateTemplateMeta(templateId: string, meta: UpdateTemplateMetaPayload): Promise<ExamTemplate> {
    const headers = await authHeaders();
    const res = await axios.patch<ExamTemplate>(`${EXAM_BASE}/templates/${templateId}`, meta, { headers });
    return res.data;
  },
  async duplicateTemplate(templateId: string, title: string): Promise<ExamTemplateDetail> {
    const detail = await this.getTemplate(templateId);
    const created = await this.createTemplate({
      title,
      subject: detail.subject ?? undefined,
      exam_id: detail.exam_id ?? undefined,
      exam_code: detail.exam_code ?? undefined,
      source_file_id: detail.source_file_id ?? undefined,
      page_count: detail.page_count ?? undefined,
      institute_id: detail.institute_id,
    });
    try {
      return await replaceTemplate(created.id, { ...detail, id: created.id }, { title, status: 'draft' }, true);
    } catch (error) {
      try {
        await this.archiveTemplate(created.id);
      } catch (archiveError) {
        logger.error('cc-exam-marker', 'Failed to archive incomplete duplicate template', {
          templateId: created.id,
          message: archiveError instanceof Error ? archiveError.message : String(archiveError),
        });
      }
      throw error;
    }
  },
  async replaceTemplate(templateId: string, payload: TemplateReplacePayload): Promise<ExamTemplateDetail> {
    const headers = await authHeaders();
    const res = await axios.put<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, payload, { headers });
    return res.data;
  },
  async archiveTemplate(templateId: string): Promise<void> {
    const headers = await authHeaders();
    await axios.delete(`${EXAM_BASE}/templates/${templateId}`, { headers });
  },
  async patchQuestion(questionId: string, payload: PatchQuestionPayload) {
    const headers = await authHeaders();
    const res = await axios.patch(`${EXAM_BASE}/questions/${questionId}`, payload, { headers });
    return res.data;
  },
  async listSpecPoints(specCode: string, search?: string): Promise<SpecPoint[]> {
    const headers = await authHeaders();
    const res = await axios.get<{ points?: SpecPoint[] } | SpecPoint[]>(
      `${EXAM_BASE}/specs/${encodeURIComponent(specCode)}/points`,
      { headers, params: search ? { q: search } : undefined },
    );
    if (Array.isArray(res.data)) return res.data;
    return res.data.points ?? [];
  },
  async syncTemplateToGraph(templateId: string): Promise<Neo4jSyncResult> {
    const headers = await authHeaders();
    const res = await axios.post<Neo4jSyncResult>(`${EXAM_BASE}/templates/${templateId}/neo4j-sync`, {}, { headers });
    return res.data;
  },
  async createBatch(payload: CreateBatchPayload): Promise<MarkingBatch> {
    const headers = await authHeaders();
    const res = await axios.post<MarkingBatch>(`${EXAM_BASE}/batches`, payload, { headers });
    return res.data;
  },
  async listBatches(params: { includeArchived?: boolean; templateId?: string } = {}): Promise<MarkingBatch[]> {
    const headers = await authHeaders();
    const res = await axios.get<{ batches: MarkingBatch[] }>(`${EXAM_BASE}/batches`, {
      headers,
      params: {
        include_archived: params.includeArchived ?? false,
        template_id: params.templateId,
      },
    });
    return res.data.batches ?? [];
  },
  async getBatchQueue(batchId: string): Promise<BatchQueueResponse> {
    const headers = await authHeaders();
    const res = await axios.get<BatchQueueResponse>(`${EXAM_BASE}/batches/${batchId}/queue`, { headers });
    return res.data;
  },
  async getBatchResults(batchId: string): Promise<BatchResultsResponse> {
    const headers = await authHeaders();
    const res = await axios.get<BatchResultsResponse>(`${EXAM_BASE}/batches/${batchId}/results`, { headers });
    return res.data;
  },
  async getBatchCsv(batchId: string): Promise<string> {
    const headers = await authHeaders();
    const res = await axios.get<string>(`${EXAM_BASE}/batches/${batchId}/csv`, { headers, responseType: 'text' });
    return res.data;
  },
  async upsertMark(markId: string, payload: MarkUpsertPayload): Promise<unknown> {
    const headers = await authHeaders();
    const res = await axios.put(`${EXAM_BASE}/marks/${markId}`, payload, { headers });
    return res.data;
  },
 };
 export default examRepository;
@@ -1,5 +1,5 @@
 // External imports
-import { TLStore, getSnapshot, Editor, loadSnapshot } from '@tldraw/tldraw';
+import { TLStore, getSnapshot, Editor, loadSnapshot, TLINSTANCE_ID } from '@tldraw/tldraw';
 import logger from '../../debugConfig';
 import { SharedStoreService } from './sharedStoreService';
@@ -109,17 +109,35 @@ export class NavigationSnapshotService {
                return;
            }
            // Sanitize session.currentPageId against pages actually in the document
            const docStore = (snap.document as { store?: Record<string, { typeName: string; id: string }> })?.store ?? {};
            const pageIds = Object.values(docStore).filter((r) => (r as { typeName: string }).typeName === 'page').map((r) => r.id);
            const session = snap.session as { currentPageId?: string } | undefined;
            if (session?.currentPageId && pageIds.length > 0 && !pageIds.includes(session.currentPageId)) {
                logger.warn('snapshot-service', '⚠️ session.currentPageId not in snapshot pages — resetting to first page', {
                    currentPageId: session.currentPageId, availablePages: pageIds
                });
                session.currentPageId = pageIds[0];
            }
            const snapshotCopy = {
                schemaVersion: snap.schemaVersion || (snap.document as { schema?: { schemaVersion?: unknown } })?.schema?.schemaVersion,
                document: snap.document,
                session: snap.session,
            };
            const targetStore = editor ? editor.store : store;
            try {
-                if (editor) {
+                loadSnapshot(targetStore, snapshotCopy as any);
-                    loadSnapshot(editor.store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                // Post-load validation: ensure instance.currentPageId is still valid
-                } else {
+                const instance = targetStore.get(TLINSTANCE_ID);
-                    loadSnapshot(store, snapshotCopy as Parameters<typeof loadSnapshot>[1]);
+                if (instance) {
                    const pages = targetStore.allRecords().filter((r) => (r as { typeName: string }).typeName === 'page');
                    const pageValid = pages.some((p) => p.id === instance.currentPageId);
                    if (!pageValid) {
                        logger.warn('snapshot-service', '⚠️ Post-load: currentPageId invalid — clearing corrupt store', { currentPageId: instance.currentPageId });
                        targetStore.clear();
                    }
                }
                logger.debug('snapshot-service', '✅ Snapshot loaded successfully');
            } catch (err) {
@@ -128,7 +146,8 @@ export class NavigationSnapshotService {
                if (isSchemaMigration) {
                    logger.debug('snapshot-service', 'ℹ️ Schema migration warning (non-critical)', { error: msg });
                } else {
-                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error', { error: msg });
+                    logger.warn('snapshot-service', '⚠️ Unexpected loadSnapshot error — clearing store to allow fresh start', { error: msg });
                    targetStore.clear();
                }
            }
@@ -0,0 +1,233 @@
 /*
 * tailwind-compat.css
 * Minimal CSS shim replacing the Tailwind build pipeline.
 * Covers only the utility classes actually used in this codebase.
 * Generated from grep audit of 8 affected files (B3 Tailwind removal sprint).
 * Over time, replace these with --cc-* tokens or MUI sx props and remove entries.
 */
 /* ── Layout ─────────────────────────────────────────────────────────────── */
 .flex { display: flex; }
 .grid { display: grid; }
 .inline-flex { display: inline-flex; }
 .inline-block { display: inline-block; }
 .block { display: block; }
 .hidden { display: none; }
 .flex-col { flex-direction: column; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-1 { flex: 1 1 0%; }
 .flex-shrink-0 { flex-shrink: 0; }
 .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .items-center { align-items: center; }
 .items-start  { align-items: flex-start; }
 .items-end    { align-items: flex-end; }
 .justify-between { justify-content: space-between; }
 .justify-center  { justify-content: center; }
 .justify-end     { justify-content: flex-end; }
 .justify-start   { justify-content: flex-start; }
 /* ── Position ───────────────────────────────────────────────────────────── */
 .relative { position: relative; }
 .absolute { position: absolute; }
 .fixed    { position: fixed; }
 .sticky   { position: sticky; }
 /* ── Spacing — gap ──────────────────────────────────────────────────────── */
 .gap-1 { gap: 0.25rem; }
 .gap-2 { gap: 0.5rem; }
 .gap-3 { gap: 0.75rem; }
 .gap-4 { gap: 1rem; }
 .gap-6 { gap: 1.5rem; }
 /* ── Spacing — padding ──────────────────────────────────────────────────── */
 .p-0  { padding: 0; }
 .p-2  { padding: 0.5rem; }
 .p-4  { padding: 1rem; }
 .p-5  { padding: 1.25rem; }
 .p-6  { padding: 1.5rem; }
 .p-12 { padding: 3rem; }
 .px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
 .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
 .px-4 { padding-left: 1rem;    padding-right: 1rem; }
 .px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
 .px-8 { padding-left: 2rem;    padding-right: 2rem; }
 .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
 .py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
 .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
 .py-4 { padding-top: 1rem;    padding-bottom: 1rem; }
 .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
 .py-6 { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
 .py-8 { padding-top: 2rem;    padding-bottom: 2rem; }
 .py-12{ padding-top: 3rem;    padding-bottom: 3rem; }
 .py-16{ padding-top: 4rem;    padding-bottom: 4rem; }
 .pt-4 { padding-top: 1rem; }
 .pl-10{ padding-left: 2.5rem; }
 .pr-4 { padding-right: 1rem; }
 /* ── Spacing — margin ───────────────────────────────────────────────────── */
 .mt-0 { margin-top: 0; }
 .mt-1 { margin-top: 0.25rem; }
 .mt-2 { margin-top: 0.5rem; }
 .mt-4 { margin-top: 1rem; }
 .mt-8 { margin-top: 2rem; }
 .mb-1 { margin-bottom: 0.25rem; }
 .mb-2 { margin-bottom: 0.5rem; }
 .mb-3 { margin-bottom: 0.75rem; }
 .mb-4 { margin-bottom: 1rem; }
 .mb-6 { margin-bottom: 1.5rem; }
 .mb-8 { margin-bottom: 2rem; }
 .ml-2 { margin-left: 0.5rem; }
 .ml-4 { margin-left: 1rem; }
 .mr-1 { margin-right: 0.25rem; }
 .mr-2 { margin-right: 0.5rem; }
 .my-8 { margin-top: 2rem; margin-bottom: 2rem; }
 /* ── Space-between children ─────────────────────────────────────────────── */
 .space-x-2 > * + * { margin-left: 0.5rem; }
 .space-y-3 > * + * { margin-top: 0.75rem; }
 .space-y-4 > * + * { margin-top: 1rem; }
 .space-y-8 > * + * { margin-top: 2rem; }
 /* ── Sizing ─────────────────────────────────────────────────────────────── */
 .w-0    { width: 0; }
 .w-4    { width: 1rem; }
 .w-8    { width: 2rem; }
 .w-10   { width: 2.5rem; }
 .w-12   { width: 3rem; }
 .w-16   { width: 4rem; }
 .w-full { width: 100%; }
 .h-4    { height: 1rem; }
 .h-8    { height: 2rem; }
 .h-10   { height: 2.5rem; }
 .h-12   { height: 3rem; }
 .h-64   { height: 16rem; }
 .h-full { height: 100%; }
 .min-h-screen { min-height: 100vh; }
 .max-w-md  { max-width: 28rem; }
 .max-w-4xl { max-width: 56rem; }
 .max-w-6xl { max-width: 72rem; }
 .max-w-7xl { max-width: 80rem; }
 /* ── Typography ─────────────────────────────────────────────────────────── */
 .text-xs  { font-size: 0.75rem;  line-height: 1rem; }
 .text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
 .text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
 .text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
 .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
 .font-medium   { font-weight: 500; }
 .font-semibold { font-weight: 600; }
 .font-bold     { font-weight: 700; }
 .text-center { text-align: center; }
 .text-left   { text-align: left; }
 .text-right  { text-align: right; }
 .uppercase   { text-transform: uppercase; }
 .capitalize  { text-transform: capitalize; }
 .truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* ── Colours — text ─────────────────────────────────────────────────────── */
 .text-white      { color: #ffffff; }
 .text-gray-300   { color: #d1d5db; }
 .text-gray-400   { color: #9ca3af; }
 .text-gray-500   { color: #6b7280; }
 .text-gray-600   { color: #4b5563; }
 .text-gray-700   { color: #374151; }
 .text-gray-900   { color: #111827; }
 .text-blue-600   { color: #2563eb; }
 .text-blue-700   { color: #1d4ed8; }
 .text-red-600    { color: #dc2626; }
 .text-red-700    { color: #b91c1c; }
 .text-red-800    { color: #991b1b; }
 .text-green-600  { color: #16a34a; }
 .text-green-700  { color: #15803d; }
 .text-purple-600 { color: #9333ea; }
 .text-purple-700 { color: #7e22ce; }
 .text-yellow-700 { color: #a16207; }
 /* ── Colours — background ───────────────────────────────────────────────── */
 .bg-white        { background-color: #ffffff; }
 .bg-transparent  { background-color: transparent; }
 .bg-gray-50      { background-color: #f9fafb; }
 .bg-gray-100     { background-color: #f3f4f6; }
 .bg-gray-500     { background-color: #6b7280; }
 .bg-blue-50      { background-color: #eff6ff; }
 .bg-blue-100     { background-color: #dbeafe; }
 .bg-blue-600     { background-color: #2563eb; }
 .bg-red-50       { background-color: #fef2f2; }
 .bg-red-100      { background-color: #fee2e2; }
 .bg-red-600      { background-color: #dc2626; }
 .bg-green-100    { background-color: #dcfce7; }
 .bg-purple-100   { background-color: #f3e8ff; }
 .bg-yellow-100   { background-color: #fef9c3; }
 /* ── Borders ────────────────────────────────────────────────────────────── */
 .border             { border-width: 1px; border-style: solid; }
 .border-t           { border-top-width: 1px; border-top-style: solid; }
 .border-b           { border-bottom-width: 1px; border-bottom-style: solid; }
 .border-2           { border-width: 2px; border-style: solid; }
 .border-transparent { border-color: transparent; }
 .border-gray-100    { border-color: #f3f4f6; }
 .border-gray-200    { border-color: #e5e7eb; }
 .border-gray-300    { border-color: #d1d5db; }
 .border-blue-500    { border-color: #3b82f6; }
 .border-blue-600    { border-color: #2563eb; }
 .border-red-200     { border-color: #fecaca; }
 /* ── Border radius ──────────────────────────────────────────────────────── */
 .rounded      { border-radius: 0.25rem; }
 .rounded-md   { border-radius: 0.375rem; }
 .rounded-lg   { border-radius: 0.5rem; }
 .rounded-xl   { border-radius: 0.75rem; }
 .rounded-full { border-radius: 9999px; }
 /* ── Shadows ────────────────────────────────────────────────────────────── */
 .shadow    { box-shadow: 0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1); }
 .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0/.05); }
 .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
 .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1); }
 .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); }
 /* ── Overflow / z-index ─────────────────────────────────────────────────── */
 .overflow-hidden  { overflow: hidden; }
 .overflow-y-auto  { overflow-y: auto; }
 .z-50             { z-index: 50; }
 /* ── Misc ───────────────────────────────────────────────────────────────── */
 .opacity-50       { opacity: 0.5; }
 .opacity-75       { opacity: 0.75; }
 .cursor-not-allowed { cursor: not-allowed; }
 /* ── Pseudo-classes ─────────────────────────────────────────────────────── */
 .hover\:bg-gray-50:hover   { background-color: #f9fafb; }
 .hover\:bg-gray-100:hover  { background-color: #f3f4f6; }
 .hover\:bg-blue-200:hover  { background-color: #bfdbfe; }
 .hover\:bg-blue-700:hover  { background-color: #1d4ed8; }
 .hover\:bg-green-200:hover { background-color: #bbf7d0; }
 .hover\:bg-red-200:hover   { background-color: #fecaca; }
 .hover\:bg-red-700:hover   { background-color: #b91c1c; }
 .hover\:text-gray-500:hover { color: #6b7280; }
 .hover\:text-gray-700:hover { color: #374151; }
 .hover\:text-gray-800:hover { color: #1f2937; }
 .hover\:text-blue-600:hover { color: #2563eb; }
 .hover\:text-red-800:hover  { color: #991b1b; }
 .hover\:border-blue-300:hover { border-color: #93c5fd; }
 .focus\:outline-none:focus { outline: none; }
 .focus\:ring-2:focus       { box-shadow: 0 0 0 2px #3b82f6; }
 .disabled\:opacity-50:disabled { opacity: 0.5; }
@@ -0,0 +1,268 @@
 /**
 * Exam-marker types — mirror the FastAPI /api/exam contract (see api routers/exam/schemas.py).
 * Supabase is source of truth for this operational data; the graph (cc.public.exams) joins by
 * the shared UUIDs (template/question/region ids, exam_code).
 */
 export type ExamTemplateStatus = 'draft' | 'ready' | 'archived';
 export interface ExamTemplate {
  id: string;
  title: string;
  subject: string | null;
  exam_id: string | null;
  exam_code: string | null;
  source_file_id: string | null;
  page_count: number | null;
  institute_id: string;
  teacher_id: string;
  status: ExamTemplateStatus;
  created_at: string;
  updated_at: string;
 }
 export interface CreateTemplatePayload {
  title: string;
  subject?: string;
  exam_id?: string;
  exam_code?: string;
  source_file_id?: string;
  page_count?: number;
  institute_id?: string;
 }
 export type MarkSchemeType = 'points' | 'levels' | 'parts' | 'checklist' | 'free';
 export interface MarkSchemePoint {
  mark: number;
  text: string;
 }
 export interface MarkSchemeLevel {
  level: string;
  min: number;
  max: number;
  descriptor: string;
 }
 export interface MarkSchemePart {
  label: string;
  marks: number;
  guidance: string;
 }
 export interface MarkSchemeChecklistItem {
  text: string;
  marks: number;
 }
 export interface MarkScheme {
  type?: MarkSchemeType;
  points?: MarkSchemePoint[];
  levels?: MarkSchemeLevel[];
  parts?: MarkSchemePart[];
  checklist?: MarkSchemeChecklistItem[];
  text?: string;
  notes?: string;
  [key: string]: unknown;
 }
 export interface UpdateTemplateMetaPayload {
  title?: string;
  subject?: string | null;
  page_count?: number | null;
  status?: ExamTemplateStatus;
 }
 /** Canvas children (used from S4-9 onward; defined here so the seam is complete). */
 export interface ExamQuestion {
  id: string;
  template_id: string;
  parent_id: string | null;
  label: string;
  order: number;
  max_marks: number;
  answer_type: string | null;
  mcq_options: unknown | null;
  mark_scheme: MarkScheme;
  is_container: boolean;
  spec_ref: string | null;
  bounds?: Record<string, number> | null;
  page?: number | null;
 }
 export type ExamResponseAreaKind =
  | 'response'
  | 'context'
  | 'question_number'
  | 'mark_area'
  | 'reference'
  | 'furniture';
 export interface ExamResponseArea {
  id: string;
  question_id: string;
  template_id: string;
  page: number;
  bounds: Record<string, number>;
  kind: ExamResponseAreaKind;
  response_form: string | null;
  context_type?: string | null;
  source: 'manual' | 'ai';
  confirmed: boolean;
  confidence: number | null;
 }
 export interface ExamBoundary {
  id: string;
  template_id: string;
  question_id: string | null;
  label: string | null;
  page_index: number;
  y: number;
  bounds: Record<string, number> | null;
  source: 'manual' | 'ai';
  confirmed: boolean;
 }
 export interface ExamTemplateDetail extends ExamTemplate {
  questions: ExamQuestion[];
  response_areas: ExamResponseArea[];
  boundaries: ExamBoundary[];
 }
 export interface TemplateReplacePayload {
  meta?: {
    title?: string;
    subject?: string;
    page_count?: number;
    status?: ExamTemplateStatus;
  };
  questions: Array<{
    id?: string;
    parent_id?: string | null;
    label: string;
    order?: number;
    max_marks?: number;
    answer_type?: 'written' | 'mcq' | 'short' | 'diagram' | null;
    mcq_options?: unknown | null;
    mark_scheme?: Record<string, unknown>;
    is_container?: boolean;
    spec_ref?: string | null;
    bounds?: Record<string, number> | null;
    page?: number | null;
  }>;
  response_areas: Array<{
    id?: string;
    question_id: string;
    page: number;
    bounds: Record<string, number>;
    kind: ExamResponseArea['kind'];
    response_form?: string | null;
    context_type?: string | null;
    source?: 'manual' | 'ai';
    confirmed?: boolean;
    confidence?: number | null;
  }>;
  boundaries: Array<{
    id?: string;
    question_id?: string | null;
    label?: string | null;
    page_index: number;
    y: number;
    bounds?: Record<string, number> | null;
    source?: 'manual' | 'ai';
    confirmed?: boolean;
  }>;
 }
 export interface PatchQuestionPayload {
  label?: string;
  order?: number;
  max_marks?: number;
  answer_type?: 'written' | 'mcq' | 'short' | 'diagram' | null;
  mcq_options?: unknown;
  mark_scheme?: MarkScheme;
  is_container?: boolean;
  spec_ref?: string | null;
 }
 export interface SpecPoint {
  uid?: string;
  uuid_string?: string;
  ref: string;
  description: string;
  spec_code: string;
  exam_board_code?: string;
 }
 export interface Neo4jSyncResult {
  status: string;
  projection?: Record<string, unknown>;
 }
 export interface MarkingBatch {
  id: string;
  template_id: string;
  class_id: string | null;
  institute_id: string;
  teacher_id: string;
  title: string | null;
  status: 'open' | 'closed' | 'archived' | string;
  created_at: string;
  updated_at?: string;
  submission_count?: number;
 }
 export interface StudentSubmission {
  id: string;
  batch_id: string;
  student_id: string | null;
  student_name: string | null;
  status: 'absent' | 'unmatched' | 'matched' | 'marking' | 'complete' | string;
  storage_path?: string | null;
  mark_entry_count?: number;
 }
 export interface BatchQueueResponse {
  batch: MarkingBatch;
  submissions: StudentSubmission[];
  progress: {
    total: number;
    absent: number;
    complete: number;
    in_progress: number;
  };
 }
 export interface ExamResultRow {
  submission_id: string;
  student_id: string | null;
  student_name: string | null;
  status: string | null;
  marks: Record<string, number | null | undefined>;
  total: number | null;
 }
 export interface BatchResultsResponse {
  batch: MarkingBatch;
  questions: Array<Pick<ExamQuestion, 'id' | 'label' | 'max_marks' | 'order'>>;
  results: ExamResultRow[];
 }
 export interface CreateBatchPayload {
  template_id: string;
  class_id?: string;
  title?: string;
 }
 export interface MarkUpsertPayload {
  submission_id: string;
  question_id: string;
  awarded_marks: number;
  mark_scheme_detail?: Record<string, unknown>;
  annotation_shape_ids?: unknown;
  comment?: string;
  confirmed?: boolean;
 }
@@ -0,0 +1,65 @@
 import { describe, expect, it } from 'vitest'
 import type { ExamTemplateDetail } from '../../types/exam.types'
 import { isUuid, pageForY, serializeCanvasShapes, shapesFromTemplate } from './model'
 const template: ExamTemplateDetail = {
  id: 'tpl-1', title: 'Physics', subject: 'Physics', exam_id: null, exam_code: null, source_file_id: null, page_count: 1,
  institute_id: 'inst', teacher_id: 'teacher', status: 'draft', created_at: 'now', updated_at: 'now', questions: [], response_areas: [], boundaries: [],
 }
 describe('exam setup canvas serialization', () => {
  it('pairs boundaries into a main question, attaches a Part, and attaches a response by containment', () => {
    const payload = serializeCanvasShapes(template, [
      { id: 'b-top', kind: 'boundary', x: 40, y: 100, w: 700, h: 8, label: 'Q1 start' },
      { id: 'b-bottom', kind: 'boundary', x: 40, y: 700, w: 700, h: 8, label: 'Q1 end' },
      { id: 'part-1', kind: 'part', x: 100, y: 180, w: 400, h: 220, label: 'Q1(a)', maxMarks: 3 },
      { id: 'resp-1', kind: 'response', x: 130, y: 250, w: 300, h: 90, responseForm: 'lines' },
    ])
    const main = payload.questions.find((q) => q.is_container)
    const part = payload.questions.find((q) => !q.is_container)
    expect(main?.label).toBe('Q1')
    expect(part?.parent_id).toBe(main?.id)
    expect(part?.bounds).toEqual({ x: 100, y: 180, w: 400, h: 220 })
    expect(payload.response_areas[0]).toMatchObject({ question_id: part?.id, kind: 'response', response_form: 'lines' })
    expect(payload.boundaries).toHaveLength(2)
    expect(payload.boundaries.every((b) => b.question_id === main?.id)).toBe(true)
    expect(payload.questions.every((q) => isUuid(q.id))).toBe(true)
    expect(payload.response_areas.every((r) => isUuid(r.id))).toBe(true)
    expect(payload.boundaries.every((b) => isUuid(b.id))).toBe(true)
  })
  it('maps shapes to the visible PDF page geometry rather than a fixed page height', () => {
    const pages = [
      { pageNumber: 1, x: 260, y: 0, w: 780, h: 1000 },
      { pageNumber: 2, x: 260, y: 1000, w: 780, h: 1200 },
    ]
    expect(pageForY(1050, pages)).toBe(2)
    const payload = serializeCanvasShapes(template, [
      { id: 'b-top', kind: 'boundary', x: 260, y: 1020, w: 700, h: 8, label: 'Q1 start' },
      { id: 'b-bottom', kind: 'boundary', x: 260, y: 1700, w: 700, h: 8, label: 'Q1 end' },
      { id: 'part-1', kind: 'part', x: 300, y: 1120, w: 300, h: 160, label: 'Q1(a)' },
      { id: 'resp-1', kind: 'response', x: 320, y: 1160, w: 240, h: 80 },
    ], pages)
    expect(payload.questions.find((q) => !q.is_container)?.page).toBe(2)
    expect(payload.boundaries.every((b) => b.page_index === 1)).toBe(true)
    expect(payload.response_areas[0].page).toBe(2)
  })
  it('round-trips saved Part geometry and all S4-9 region kinds from API detail', () => {
    const shapes = shapesFromTemplate({
      ...template,
      questions: [
        { id: 'q1', template_id: 'tpl-1', parent_id: null, label: 'Q1', order: 0, max_marks: 0, answer_type: null, mcq_options: null, mark_scheme: {}, is_container: true, spec_ref: null },
        { id: 'p1', template_id: 'tpl-1', parent_id: 'q1', label: 'Q1(a)', order: 0, max_marks: 2, answer_type: 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: { x: 1, y: 2, w: 3, h: 4 }, page: 1 },
      ],
      response_areas: [
        { id: 'r1', question_id: 'p1', template_id: 'tpl-1', page: 1, bounds: { x: 10, y: 20, w: 30, h: 40 }, kind: 'response', response_form: 'lines', source: 'manual', confirmed: true, confidence: null },
        { id: 'f1', question_id: 'p1', template_id: 'tpl-1', page: 1, bounds: { x: 11, y: 21, w: 31, h: 41 }, kind: 'furniture', response_form: null, source: 'manual', confirmed: true, confidence: null },
      ],
      boundaries: [{ id: 'b1', template_id: 'tpl-1', question_id: 'q1', label: 'Q1 start', page_index: 0, y: 100, bounds: { x: 0, y: 100, w: 700, h: 8 }, source: 'manual', confirmed: true }],
    })
    expect(shapes.map((s) => s.kind).sort()).toEqual(['boundary', 'furniture', 'part', 'response'])
    expect(shapes.find((s) => s.kind === 'part')).toMatchObject({ id: 'p1', x: 1, y: 2, w: 3, h: 4 })
  })
 })
@@ -0,0 +1,151 @@
 import type { ExamTemplateDetail, TemplateReplacePayload } from '../../types/exam.types'
 export const PAGE_HEIGHT = 1100
 export const PAGE_WIDTH = 780
 export const PAGE_GAP = 0
 export const BOUNDARY_LINE_HEIGHT = 12
 export interface CanvasPageGeometry { pageNumber: number; x: number; y: number; w: number; h: number }
 export type ExamCanvasRegionKind = 'response' | 'context' | 'question_number' | 'mark_area' | 'reference' | 'furniture'
 export type ExamCanvasShapeKind = 'boundary' | 'part' | ExamCanvasRegionKind
 export interface CanvasBounds { x: number; y: number; w: number; h: number }
 export interface ExamCanvasShapeModel {
  /** Stable domain UUID persisted to Supabase. Do not reuse tldraw shape ids for new shapes. */
  id: string
  kind: ExamCanvasShapeKind
  x: number
  y: number
  w: number
  h: number
  label?: string
  maxMarks?: number
  answerType?: 'written' | 'mcq' | 'short' | 'diagram'
  responseForm?: 'lines' | 'answer-box' | 'working' | 'diagram' | 'tick-boxes' | 'table' | 'blanks'
  contextType?: string
  questionId?: string | null
 }
 export function pageForY(y: number, pages?: CanvasPageGeometry[]): number {
  if (pages?.length) {
    const hit = pages.find((page) => y >= page.y && y <= page.y + page.h)
    if (hit) return hit.pageNumber
    const nearest = pages.reduce((best, page) => {
      const dy = Math.min(Math.abs(y - page.y), Math.abs(y - (page.y + page.h)))
      return dy < best.dy ? { page, dy } : best
    }, { page: pages[0], dy: Number.POSITIVE_INFINITY })
    return nearest.page.pageNumber
  }
  return Math.max(1, Math.floor(y / PAGE_HEIGHT) + 1)
 }
 export function pageTop(page: number, pages?: CanvasPageGeometry[]): number {
  const hit = pages?.find((p) => p.pageNumber === page)
  return hit?.y ?? ((page - 1) * (PAGE_HEIGHT + PAGE_GAP))
 }
 function pageForShape(shape: Pick<ExamCanvasShapeModel, 'y' | 'h'>, pages?: CanvasPageGeometry[]): number {
  return pageForY(shape.y + shape.h / 2, pages)
 }
 export function isUuid(value: string | null | undefined): value is string {
  return typeof value === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value)
 }
 export function newDomainId(): string {
  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
    return crypto.randomUUID()
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = Math.floor(Math.random() * 16)
    const v = c === 'x' ? r : (r % 4) + 8
    return v.toString(16)
  })
 }
 function bounds(shape: Pick<ExamCanvasShapeModel, 'x' | 'y' | 'w' | 'h'>): CanvasBounds {
  return { x: shape.x, y: shape.y, w: shape.w, h: shape.h }
 }
 function contains(outer: CanvasBounds, inner: CanvasBounds): boolean {
  const ox2 = outer.x + outer.w
  const oy2 = outer.y + outer.h
  const ix2 = inner.x + inner.w
  const iy2 = inner.y + inner.h
  return inner.x >= outer.x && inner.y >= outer.y && ix2 <= ox2 && iy2 <= oy2
 }
 function bandContains(top: ExamCanvasShapeModel, bottom: ExamCanvasShapeModel, shape: ExamCanvasShapeModel): boolean {
  const minY = Math.min(top.y, bottom.y)
  const maxY = Math.max(top.y, bottom.y)
  const cy = shape.y + shape.h / 2
  return cy >= minY && cy <= maxY
 }
 export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: ExamCanvasShapeModel[], pages?: CanvasPageGeometry[]): TemplateReplacePayload {
  const orderedBoundaries = shapes
    .filter((s) => s.kind === 'boundary')
    .sort((a, b) => (pageForShape(a, pages) - pageForShape(b, pages)) || (a.y - b.y))
  const parts = shapes.filter((s) => s.kind === 'part')
  const regions = shapes.filter((s) => s.kind !== 'boundary' && s.kind !== 'part')
  const questions: TemplateReplacePayload['questions'] = []
  const boundaries: TemplateReplacePayload['boundaries'] = []
  const bands: Array<{ questionId: string; top: ExamCanvasShapeModel; bottom: ExamCanvasShapeModel }> = []
  for (let i = 0; i < orderedBoundaries.length; i += 2) {
    const top = orderedBoundaries[i]
    const bottom = orderedBoundaries[i + 1]
    if (!top || !bottom) break
    const qNum = bands.length + 1
    const questionId = isUuid(top.questionId) ? top.questionId : isUuid(bottom.questionId) ? bottom.questionId : newDomainId()
    const label = top.label?.replace(/\s+(start|end)$/i, '') || bottom.label?.replace(/\s+(start|end)$/i, '') || `Q${qNum}`
    questions.push({ id: questionId, label, order: qNum - 1, max_marks: 0, is_container: true, mark_scheme: {} })
    bands.push({ questionId, top, bottom })
    for (const b of [top, bottom]) {
      boundaries.push({ id: isUuid(b.id) ? b.id : newDomainId(), question_id: questionId, label: b === top ? `${label} start` : `${label} end`, page_index: pageForShape(b, pages) - 1, y: b.y, bounds: bounds(b), source: 'manual', confirmed: true })
    }
  }
  const partQuestionIds = new Map<string, string>()
  parts.sort((a, b) => (a.y - b.y) || (a.x - b.x)).forEach((part, index) => {
    const parentBand = bands.find((band) => bandContains(band.top, band.bottom, part))
    const qid = isUuid(part.questionId) ? part.questionId : isUuid(part.id) ? part.id : newDomainId()
    partQuestionIds.set(part.id, qid)
    questions.push({ id: qid, parent_id: parentBand?.questionId ?? null, label: part.label || `Part ${index + 1}`, order: index, max_marks: Number(part.maxMarks ?? 0), answer_type: part.answerType ?? 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: bounds(part), page: pageForShape(part, pages) })
  })
  const response_areas: TemplateReplacePayload['response_areas'] = []
  for (const region of regions) {
    const containingPart = parts.find((part) => contains(bounds(part), bounds(region)))
    const fallbackPart = parts.find((part) => pageForShape(part, pages) === pageForShape(region, pages)) ?? parts[0]
    const questionId = containingPart ? partQuestionIds.get(containingPart.id) : fallbackPart ? partQuestionIds.get(fallbackPart.id) : undefined
    if (!questionId) continue
    const kind = region.kind as ExamCanvasRegionKind
    response_areas.push({ id: isUuid(region.id) ? region.id : newDomainId(), question_id: questionId, page: pageForShape(region, pages), bounds: bounds(region), kind, response_form: kind === 'response' ? (region.responseForm ?? 'lines') : null, context_type: kind === 'context' ? (region.contextType ?? 'generic') : null, source: 'manual', confirmed: true, confidence: null })
  }
  return { meta: { title: template.title, subject: template.subject ?? undefined, page_count: template.page_count ?? undefined, status: template.status }, questions, response_areas, boundaries }
 }
 export function shapesFromTemplate(detail: ExamTemplateDetail, pages?: CanvasPageGeometry[]): ExamCanvasShapeModel[] {
  const shapes: ExamCanvasShapeModel[] = []
  const questions = new Map(detail.questions.map((q) => [q.id, q]))
  for (const b of detail.boundaries ?? []) {
    const bb = b.bounds ?? { x: 48, y: b.y, w: PAGE_WIDTH - 96, h: 8 }
    shapes.push({ id: b.id, kind: 'boundary', x: Number(bb.x ?? 48), y: Number(bb.y ?? b.y), w: Number(bb.w ?? PAGE_WIDTH - 96), h: Number(bb.h ?? 8), label: b.label ?? undefined, questionId: b.question_id })
  }
  for (const q of detail.questions ?? []) {
    if (q.is_container || !q.bounds) continue
    shapes.push({ id: q.id, kind: 'part', x: Number(q.bounds.x ?? 80), y: Number(q.bounds.y ?? 120), w: Number(q.bounds.w ?? 420), h: Number(q.bounds.h ?? 180), label: q.label, maxMarks: q.max_marks, answerType: q.answer_type ?? 'written', questionId: q.id })
  }
  for (const r of detail.response_areas ?? []) {
    const bb = r.bounds ?? { x: 100, y: pageTop(r.page, pages) + 360, w: 360, h: 120 }
    const q = questions.get(r.question_id)
    shapes.push({ id: r.id, kind: r.kind, x: Number(bb.x ?? 100), y: Number(bb.y ?? pageTop(r.page, pages) + 360), w: Number(bb.w ?? 360), h: Number(bb.h ?? 120), label: q ? `→ ${q.label}` : r.kind, responseForm: r.response_form ?? undefined, contextType: r.context_type ?? undefined, questionId: r.question_id })
  }
  return shapes
 }
@@ -17,10 +17,16 @@ export class CCTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCTimetableL
  getDefaultProps(): CCTimetableLessonNodeShape['props'] {
    const defaultProps = getDefaultCCTimetableLessonNodeProps()
    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTimetableLessonNodeShapeUtil.type]]
    return {
      ...defaultProps,
-      headerColor: theme.headerColor,
+      headerColor: '',
      school_db_name: '',
      school_period_id: '',
      subject_class: '',
      date: '',
      start_time: '',
      end_time: '',
      period_code: '',
    }
  }
@@ -543,6 +543,8 @@ export const getDefaultCCTimetableLessonNodeProps = () => ({
  start_time: '',
  end_time: '',
  period_code: '',
  school_db_name: '',
  school_period_id: '',
 })
 export const getDefaultCCPlannedLessonNodeProps = () => ({
@@ -22,7 +22,6 @@ import { CCSubjectNodeShape, CCSubjectNodeShapeUtil } from './CCSubjectNodeShape
 import { CCTopicNodeShape, CCTopicNodeShapeUtil } from './CCTopicNodeShapeUtil'
 import { CCTopicLessonNodeShape, CCTopicLessonNodeShapeUtil } from './CCTopicLessonNodeShapeUtil'
 import { CCLearningStatementNodeShape, CCLearningStatementNodeShapeUtil } from './CCLearningStatementNodeShapeUtil'
 import { CCScienceLabNodeShape, CCScienceLabNodeShapeUtil } from './CCScienceLabNodeShapeUtil'
 import { CCSchoolTimetableNodeShape, CCSchoolTimetableNodeShapeUtil } from './CCSchoolTimetableNodeShapeUtil'
 import { CCAcademicYearNodeShape, CCAcademicYearNodeShapeUtil } from './CCAcademicYearNodeShapeUtil'
 import { CCAcademicTermNodeShape, CCAcademicTermNodeShapeUtil } from './CCAcademicTermNodeShapeUtil'
@@ -31,12 +30,11 @@ import { CCAcademicDayNodeShape, CCAcademicDayNodeShapeUtil } from './CCAcademic
 import { CCAcademicPeriodNodeShape, CCAcademicPeriodNodeShapeUtil } from './CCAcademicPeriodNodeShapeUtil'
 import { CCRegistrationPeriodNodeShape, CCRegistrationPeriodNodeShapeUtil } from './CCRegistrationPeriodNodeShapeUtil'
 import { CCTeacherTimetableNodeShape, CCTeacherTimetableNodeShapeUtil } from './CCTeacherTimetableNodeShapeUtil'
 import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCTimetableLessonNodeShapeUtil'
 import { CCPlannedLessonNodeShape, CCPlannedLessonNodeShapeUtil } from './CCPlannedLessonNodeShapeUtil'
 import { CCDepartmentStructureNodeShape, CCDepartmentStructureNodeShapeUtil } from './CCDepartmentStructureNodeShapeUtil'
 import { CCUserTeacherTimetableNodeShape, CCUserTeacherTimetableNodeShapeUtil } from './CCUserTeacherTimetableNodeShapeUtil'
-import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCTimetableLessonNodeShapeUtil'
+import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCUserTimetableLessonNodeShapeUtil'
-
+import { CCScienceLabNodeShape, CCScienceLabNodeShapeUtil } from './CCScienceLabNodeShapeUtil'
 // Create a const object with all node types
 export const NODE_SHAPE_TYPES = {
    USER: CCUserNodeShapeUtil.type,
@@ -118,8 +116,7 @@ export type AllNodeShapes =
    | CCTimetableLessonNodeShape
    | CCPlannedLessonNodeShape
    | CCDepartmentStructureNodeShape
-    | CCUserTeacherTimetableNodeShape
+    | CCUserTeacherTimetableNodeShape;
    | CCTimetableLessonNodeShape;
 // Export all shape utils in an object for easy access
 export const ShapeUtils = {
@@ -159,7 +156,6 @@ export const ShapeUtils = {
    [CCPlannedLessonNodeShapeUtil.type]: CCPlannedLessonNodeShapeUtil,
    [CCDepartmentStructureNodeShapeUtil.type]: CCDepartmentStructureNodeShapeUtil,
    [CCUserTeacherTimetableNodeShapeUtil.type]: CCUserTeacherTimetableNodeShapeUtil,
    [CCTimetableLessonNodeShapeUtil.type]: CCTimetableLessonNodeShapeUtil,
 } as const;
 // Add a type guard to check if a shape is a valid node shape
@@ -27,8 +27,8 @@ export class TranscriptionManager {
    this.transcriptionService = new TranscriptionService();
    // Set up callback for transcription updates
-    this.transcriptionService.setTranscriptionCallback((text: string, isFinal: boolean, metadata: { start: number, end: number }) => {
+    this.transcriptionService.setServerSegmentsCallback((segments: Array<{ text: string; start: number; end: number }>, isLastLive: boolean) => {
-      console.log('📝 Transcription update received:', { text, metadata });
+      console.log('📝 Transcription update received:', { segments: segments.length, isLastLive });
      const util = this.editor.getShapeUtil<CCLiveTranscriptionShapeUtil>('cc-live-transcription');
      if (!util) {
        console.warn('❌ Shape util not found');
@@ -36,6 +36,10 @@ export class TranscriptionManager {
      }
      console.log('Found transcription util:', !!util);
      const text = segments.map(s => s.text).join('') || '';
      const metadata = segments.length ? { start: segments[0].start, end: segments[segments.length - 1].end } : { start: 0, end: 0 };
      const isFinal = isLastLive;
      // Check if text is stable (same output multiple times)
      const isStable = text === this.lastText;
      if (isStable) {
@@ -18,40 +18,40 @@ export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
      overflowY: 'auto',
      maxHeight: '100%',
      minWidth: '200px',
-      backgroundColor: '#f5f5f5',
+      backgroundColor: 'var(--cc-navy-50)',
-      borderLeft: '1px solid #ddd',
+      borderLeft: '1px solid var(--cc-border)',
    },
    title: {
      margin: '0 0 10px 0',
      fontSize: '16px',
      fontWeight: 'bold',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
    },
    line: {
      padding: '5px',
      marginBottom: '5px',
      borderRadius: '4px',
      fontSize: '14px',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
-      backgroundColor: '#fff',
+      backgroundColor: 'var(--cc-bg-canvas)',
-      border: '1px solid #eee',
+      border: '1px solid var(--cc-border-strong)',
    },
    activeLine: {
-      backgroundColor: '#e3f2fd',
+      backgroundColor: 'var(--cc-navy-50)',
-      border: '1px solid #2196f3',
+      border: '1px solid var(--cc-action-primary)',
-      color: '#1565c0',
+      color: 'var(--cc-action-primary)',
      fontWeight: 'bold',
      boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
      transform: 'scale(1.02)',
      transition: 'all 0.2s ease-in-out',
    },
    timestamp: {
-      color: '#666',
+      color: 'var(--cc-text-tertiary)',
      marginRight: '8px',
      fontWeight: 'bold',
    },
    loading: {
-      color: '#666',
+      color: 'var(--cc-text-muted)',
      fontStyle: 'italic',
    },
  },
@@ -64,14 +64,14 @@ export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
    },
    button: {
      padding: '8px 12px',
-      backgroundColor: '#f0f0f0',
+      backgroundColor: 'var(--cc-navy-50)',
-      border: '1px solid #ddd',
+      border: '1px solid var(--cc-border)',
      borderRadius: '4px',
      cursor: 'pointer',
-      color: '#333',
+      color: 'var(--cc-text-primary)',
      fontSize: '14px',
      '&:hover': {
-        backgroundColor: '#e0e0e0',
+        backgroundColor: 'var(--cc-border-strong)',
      },
    },
  },
@@ -1,2 +1,12 @@
@import url("@tldraw/tldraw/tldraw.css");
@import url('./cc-design-system.css');
 .tl-container {
  --color-panel:       var(--cc-bg-panel);
  --color-text:        var(--cc-text-primary);
  --color-muted:       var(--cc-border);
  --color-muted-1:     var(--cc-border-strong);
  --color-background:  var(--cc-bg-canvas);
  --color-selected:    var(--cc-selected);
  --color-accent:      var(--cc-action-primary);
 }
@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
 import { BasePanel } from './shared/BasePanel';
 import { CCExamMarkerPanel } from './shared/CCExamMarkerPanel';
 import { BaseContext, ViewContext } from '../../../../types/navigation';
 interface CCPanelProps {
  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
  isExpanded?: boolean;
  isPinned?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
@@ -12,7 +10,6 @@ interface CCPanelProps {
 }
 export const CCPanel: React.FC<CCPanelProps> = ({
  examMarkerProps,
  isExpanded,
  isPinned,
  onExpandedChange,
@@ -32,7 +29,6 @@ export const CCPanel: React.FC<CCPanelProps> = ({
  return (
    <BasePanel
      examMarkerProps={examMarkerProps}
      isExpanded={isExpanded}
      isPinned={isPinned}
      onExpandedChange={handleExpandedChange}
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { TldrawUiButton } from '@tldraw/tldraw';
 import { CCShapesPanel } from './CCShapesPanel';
 import { CCSlidesPanel } from './CCSlidesPanel';
@@ -7,7 +6,6 @@ import { CCFilesPanel } from './CCFilesPanel';
 import { CCCabinetsPanel } from './CCCabinetsPanel';
 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';
@@ -31,16 +29,12 @@ export const PANEL_TYPES = {
    { id: 'graph', label: 'Graph', order: 60 },
    { id: 'search', label: 'Search', order: 70 },
  ],
  examMarker: [
    { id: 'exam-marker', label: 'Exam Marker', order: 10 },
  ],
 } as const;
-export type PanelType = typeof PANEL_TYPES.default[number]['id'] | typeof PANEL_TYPES.examMarker[number]['id'];
+export type PanelType = typeof PANEL_TYPES.default[number]['id'];
 interface BasePanelProps {
  initialPanelType?: PanelType;
  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
  isExpanded?: boolean;
  isPinned?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
@@ -125,16 +119,6 @@ function getIconSvg(panelId: PanelType, size = '1.25rem') {
          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
        </svg>
      );
    case 'exam-marker':
      return (
        <svg {...common}>
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
          <polyline points="14 2 14 8 20 8" />
          <line x1="16" y1="13" x2="8" y2="13" />
          <line x1="16" y1="17" x2="8" y2="17" />
          <polyline points="10 9 9 9 8 9" />
        </svg>
      );
    default:
      return (
        <svg {...common}>
@@ -152,7 +136,6 @@ function isDarkMode() {
 export const BasePanel: React.FC<BasePanelProps> = ({
  initialPanelType = 'files',
  examMarkerProps,
  isExpanded: controlledIsExpanded,
  isPinned: controlledIsPinned,
  onExpandedChange,
@@ -160,7 +143,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
  isMenuOpen = false,
  onMenuOpenChange = () => {},
 }) => {
  const location = useLocation();
  const { tldrawPreferences } = useTLDraw();
  const [prefersDarkMode, setPrefersDarkMode] = useState(isDarkMode());
  const [menuOpen, setMenuOpen] = useState(false);
@@ -177,12 +159,9 @@ export const BasePanel: React.FC<BasePanelProps> = ({
    ? 'dark'
    : 'light';
-  const isExamMarkerRoute = location.pathname === '/exam-marker';
+  const availablePanels = PANEL_TYPES.default;
  const availablePanels = isExamMarkerRoute ? PANEL_TYPES.examMarker : PANEL_TYPES.default;
-  const [currentPanelType, setCurrentPanelType] = useState<PanelType>(
+  const [currentPanelType, setCurrentPanelType] = useState<PanelType>(initialPanelType);
    isExamMarkerRoute ? 'exam-marker' : initialPanelType
  );
  const [internalIsExpanded, setInternalIsExpanded] = useState(true);
  const [internalIsPinned, setInternalIsPinned] = useState(true);
@@ -223,10 +202,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
  }, [isExpanded, isPinned]);
  const renderCurrentPanel = () => {
    if (isExamMarkerRoute && currentPanelType === 'exam-marker') {
      return examMarkerProps ? <CCExamMarkerPanel {...examMarkerProps} /> : null;
    }
    switch (currentPanelType) {
      case 'cabinets':
        return <CCCabinetsPanel />;
@@ -331,7 +306,6 @@ export const BasePanel: React.FC<BasePanelProps> = ({
                          {type.id === 'search' && 'Search through your content'}
                          {type.id === 'navigation' && 'Navigate through different contexts'}
                          {type.id === 'node-snapshot' && 'Manage node snapshots'}
                          {type.id === 'exam-marker' && 'Mark and grade exams'}
                        </span>
                      </span>
                    </button>
@@ -1,495 +0,0 @@
 import React, { useState } from 'react';
 import { Box, Button, Typography, Divider, Stack } from '@mui/material';
 import { Editor, exportToBlob, TLPageId, Box as TLBox } from '@tldraw/tldraw';
 import { PDFDocument } from 'pdf-lib';
 import { Pdf } from '../../../../../pages/tldraw/CCExamMarker/types';
 import { logger } from '../../../../../debugConfig';
 interface CCExamMarkerPanelProps {
  editor: Editor | null;
  currentView: 'exam-and-markscheme' | 'student-responses';
  onViewChange: (view: 'exam-and-markscheme' | 'student-responses') => void;
  currentStudentIndex: number;
  totalStudents: number;
  onPreviousStudent: () => void;
  onNextStudent: () => void;
  getCurrentPdf: () => Pdf | null;
 }
 export const CCExamMarkerPanel: React.FC<CCExamMarkerPanelProps> = ({
  editor,
  currentView,
  onViewChange,
  currentStudentIndex,
  totalStudents,
  onPreviousStudent,
  onNextStudent,
  getCurrentPdf,
 }) => {
  const [exportProgress, setExportProgress] = useState<number | null>(null);
  const exportPdf = async (
    editor: Editor,
    { name, source, pages }: Pdf,
    onProgress: (progress: number) => void,
    startPage?: number,
    endPage?: number,
    studentIndex?: number
  ) => {
    logger.debug('cc-exam-marker', '📤 Starting PDF export', {
      name,
      startPage,
      endPage,
      studentIndex,
      currentView,
      totalPages: pages.length
    });
    const pdfPages = pages.slice(startPage, endPage);
    logger.debug('cc-exam-marker', '📄 Selected pages for export', {
      pdfPages: pdfPages.length,
      pageIndices: pdfPages.map((_, i) => (startPage || 0) + i)
    });
    const totalThings = pdfPages.length * 2 + 2;
    let progressCount = 0;
    const tickProgress = () => {
      progressCount++;
      onProgress(progressCount / totalThings);
    };
    const sourcePdf = await PDFDocument.load(source);
    tickProgress();
    // Create a new PDF document for the selected pages
    const newPdf = await PDFDocument.create();
    // Copy pages from source PDF
    const pageIndices = pdfPages.map((_, i) => (startPage || 0) + i);
    const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
    copiedPages.forEach(page => newPdf.addPage(page));
    tickProgress();
    // Store current page to restore later
    const currentPageId = editor.getCurrentPageId();
    logger.debug('cc-exam-marker', '📍 Current page before export', { currentPageId });
    // Switch to the correct page based on context
    const targetPageId = (studentIndex !== undefined 
      ? `page:student-response-${studentIndex}` 
      : currentView === 'exam-and-markscheme' 
        ? 'page:exam-page'
        : 'page:mark-scheme-page') as TLPageId;
    logger.debug('cc-exam-marker', '🎯 Switching to target page', { targetPageId });
    editor.setCurrentPage(targetPageId);
    // Get all shape IDs that are not page shapes (i.e., annotations)
    const pageShapeIds = new Set(pages.map(page => page.shapeId));
    const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
    logger.debug('cc-exam-marker', '📝 Found shapes on current page', {
      totalShapes: editor.getCurrentPageShapeIds().size,
      pageShapes: pageShapeIds.size,
      annotationShapes: allShapeIds.length
    });
    // For each page, draw annotations on top
    for (let i = 0; i < pdfPages.length; i++) {
      const page = pdfPages[i];
      const pdfPage = newPdf.getPages()[i];
      const {bounds} = page;
      logger.debug('cc-exam-marker', `📄 Processing page ${i + 1}/${pdfPages.length}`, {
        bounds,
        pageIndex: i,
        globalPageIndex: (startPage || 0) + i
      });
      // Get shapes that intersect with this page using editor's bounds checking
      const shapesInBounds = allShapeIds.filter((id) => {
        const shape = editor.getShape(id);
        if (!shape || shape.isLocked) return false;
        // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
        const annotationManager = editor.annotationManager;
        const annotationData = annotationManager.getAnnotationData(id);
        if (!annotationData) return false;
        // Filter by student index if provided
        if (studentIndex !== undefined && annotationData.studentIndex !== studentIndex) {
          return false;
        }
        // For exam/markscheme view, only include those annotations
        if (studentIndex === undefined && annotationData.studentIndex !== undefined) {
          return false;
        }
        // For individual student exports, use the annotation's original page index
        // For full exports, use the stored page index
        const adjustedPageIndex = annotationData.pageIndex;
        // Check if this shape belongs to this page index
        if (adjustedPageIndex !== i) {
          return false;
        }
        logger.debug('cc-exam-marker', `🔍 Found matching annotation`, {
          shapeId: id,
          annotationData,
          adjustedPageIndex,
          currentPageIndex: i,
          bounds: editor.getShapePageBounds(id)
        });
        return true;
      });
      logger.debug('cc-exam-marker', `✨ Found shapes for page ${i + 1}`, {
        shapesInBounds: shapesInBounds.length,
        pageIndex: i,
        globalPageIndex: (startPage || 0) + i
      });
      if (shapesInBounds.length === 0) {
        tickProgress();
        tickProgress();
        continue;
      }
      // Export the annotations as PNG
      const exportedPng = await exportToBlob({
        editor,
        ids: shapesInBounds,
        format: 'png',
        opts: { 
          background: false,
          // Create a new bounds that's relative to the current page
          bounds: new TLBox(
            bounds.x,
            0,  // Reset to 0 since we want annotations relative to current page
            bounds.width,
            bounds.height
          ),
          padding: 0,
          scale: 1
        },
      });
      tickProgress();
      // Draw the annotations on the PDF page
      const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
      const pdfWidth = pdfPage.getWidth();
      const pdfHeight = pdfPage.getHeight();
      pdfPage.drawImage(pngImage, {
        x: 0,
        y: 0,
        width: pdfWidth,
        height: pdfHeight,
      });
      tickProgress();
    }
    // Restore original page
    logger.debug('cc-exam-marker', '🔄 Restoring original page', { currentPageId });
    editor.setCurrentPage(currentPageId);
    const pdfBytes = await newPdf.save();
    const url = URL.createObjectURL(
      new Blob([pdfBytes], { type: 'application/pdf' })
    );
    tickProgress();
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.click();
    URL.revokeObjectURL(url);
    logger.debug('cc-exam-marker', '✅ PDF export completed', { name });
  };
  const handleExportCurrentView = async () => {
    if (!editor) return;
    const currentPdf = getCurrentPdf();
    if (!currentPdf) return;
    setExportProgress(0);
    try {
      if (currentView === 'student-responses') {
        // For student responses, we need to handle each student's annotations separately
        const pagesPerStudent = currentPdf.pages.length / totalStudents;
        let currentProgress = 0;
        // Create a new PDF with all pages
        const sourcePdf = await PDFDocument.load(currentPdf.source);
        const newPdf = await PDFDocument.create();
        const copiedPages = await newPdf.copyPages(sourcePdf, Array.from({ length: currentPdf.pages.length }, (_, i) => i));
        copiedPages.forEach(page => newPdf.addPage(page));
        // For each student, export their annotations onto their pages
        for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
          const startPage = studentIndex * pagesPerStudent;
          // Switch to the student's page to get their annotations
          const targetPageId = `page:student-response-${studentIndex}` as TLPageId;
          editor.setCurrentPage(targetPageId);
          // Get all annotations for this student
          const pageShapeIds = new Set(currentPdf.pages.map(page => page.shapeId));
          const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
          // Process each page for this student
          for (let i = 0; i < pagesPerStudent; i++) {
            const pageIndex = startPage + i;
            const page = currentPdf.pages[pageIndex];
            const pdfPage = newPdf.getPages()[pageIndex];
            // Get shapes for this page
            const shapesInBounds = allShapeIds.filter((id) => {
              const shape = editor.getShape(id);
              if (!shape || shape.isLocked) return false;
              // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
              const annotationManager = editor.annotationManager;
              const annotationData = annotationManager.getAnnotationData(id);
              if (!annotationData) return false;
              return annotationData.studentIndex === studentIndex && annotationData.pageIndex === i;
            });
            if (shapesInBounds.length > 0) {
              // Export and draw annotations
              const exportedPng = await exportToBlob({
                editor,
                ids: shapesInBounds,
                format: 'png',
                opts: { 
                  background: false,
                  bounds: new TLBox(
                    page.bounds.x,
                    0,
                    page.bounds.width,
                    page.bounds.height
                  ),
                  padding: 0,
                  scale: 1
                },
              });
              const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
              pdfPage.drawImage(pngImage, {
                x: 0,
                y: 0,
                width: pdfPage.getWidth(),
                height: pdfPage.getHeight(),
              });
            }
            currentProgress++;
            setExportProgress(currentProgress / (totalStudents * pagesPerStudent));
          }
        }
        // Save the combined PDF
        const pdfBytes = await newPdf.save();
        const url = URL.createObjectURL(new Blob([pdfBytes], { type: 'application/pdf' }));
        const a = document.createElement('a');
        a.href = url;
        a.download = currentPdf.name;
        a.click();
        URL.revokeObjectURL(url);
      } else {
        // For exam/mark scheme view, use the original export logic
        await exportPdf(editor, currentPdf, setExportProgress);
      }
    } finally {
      setExportProgress(null);
    }
  };
  const handleExportCurrentStudent = async () => {
    if (!editor || currentView !== 'student-responses') return;
    const currentPdf = getCurrentPdf();
    if (!currentPdf) return;
    const pagesPerStudent = currentPdf.pages.length / totalStudents;
    const startPage = currentStudentIndex * pagesPerStudent;
    const endPage = startPage + pagesPerStudent;
    setExportProgress(0);
    try {
      await exportPdf(
        editor,
        {
          ...currentPdf,
          name: `Student_${currentStudentIndex + 1}_Response.pdf`,
        },
        setExportProgress,
        Math.floor(startPage),
        Math.floor(endPage),
        currentStudentIndex
      );
    } finally {
      setExportProgress(null);
    }
  };
  const handleBatchExport = async () => {
    if (!editor || currentView !== 'student-responses') return;
    const currentPdf = getCurrentPdf();
    if (!currentPdf) return;
    setExportProgress(0);
    try {
      const pagesPerStudent = currentPdf.pages.length / totalStudents;
      let currentProgress = 0;
      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
        const startPage = studentIndex * pagesPerStudent;
        const endPage = startPage + pagesPerStudent;
        await exportPdf(
          editor,
          {
            ...currentPdf,
            name: `Student_${studentIndex + 1}_Response.pdf`,
          },
          setExportProgress,
          Math.floor(startPage),
          Math.floor(endPage),
          studentIndex
        );
        currentProgress++;
        setExportProgress(currentProgress / totalStudents);
      }
    } finally {
      setExportProgress(null);
    }
  };
  return (
    <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Typography variant="h6" sx={{ mb: 1 }}>
        Exam Marker
      </Typography>
      <Box>
        <Typography variant="subtitle2" sx={{ mb: 1 }}>
          View Mode
        </Typography>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Button
            fullWidth
            variant={currentView === 'exam-and-markscheme' ? 'contained' : 'outlined'}
            onClick={() => onViewChange('exam-and-markscheme')}
          >
            Exam & Mark Scheme
          </Button>
          <Button
            fullWidth
            variant={currentView === 'student-responses' ? 'contained' : 'outlined'}
            onClick={() => onViewChange('student-responses')}
          >
            Student Responses
          </Button>
        </Box>
      </Box>
      {currentView === 'student-responses' && (
        <>
          <Divider />
          <Box>
            <Typography variant="subtitle2" sx={{ mb: 1 }}>
              Student Navigation
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <Button
                fullWidth
                variant="outlined"
                onClick={onPreviousStudent}
                disabled={currentStudentIndex === 0}
              >
                Previous Student
              </Button>
              <Typography variant="body2" align="center">
                Student {currentStudentIndex + 1} of {totalStudents}
              </Typography>
              <Button
                fullWidth
                variant="outlined"
                onClick={onNextStudent}
                disabled={currentStudentIndex === totalStudents - 1}
              >
                Next Student
              </Button>
            </Box>
          </Box>
        </>
      )}
      <Divider />
      <Box>
        <Typography variant="subtitle2" sx={{ mb: 1 }}>
          Actions
        </Typography>
        <Stack spacing={1}>
          <Button
            fullWidth
            variant="contained"
            color="primary"
            disabled={!editor || !getCurrentPdf() || exportProgress !== null}
            onClick={handleExportCurrentView}
          >
            {exportProgress !== null
              ? `Exporting... ${Math.round(exportProgress * 100)}%`
              : `Export ${currentView === 'exam-and-markscheme' ? 'All' : 'Combined Responses'}`}
          </Button>
          {currentView === 'student-responses' && (
            <>
              <Button
                fullWidth
                variant="outlined"
                color="primary"
                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
                onClick={handleExportCurrentStudent}
              >
                {exportProgress !== null
                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
                  : 'Export Current Student'}
              </Button>
              <Button
                fullWidth
                variant="outlined"
                color="primary"
                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
                onClick={handleBatchExport}
              >
                {exportProgress !== null
                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
                  : 'Export All as Separate Files'}
              </Button>
            </>
          )}
        </Stack>
      </Box>
      <Box sx={{ mt: 'auto' }}>
        <Typography variant="subtitle2" sx={{ mb: 1 }}>
          Statistics
        </Typography>
        <Typography variant="body2">
          Total Pages: {getCurrentPdf()?.pages.length || 0}
        </Typography>
      </Box>
    </Box>
  );
 }; 
@@ -346,9 +346,10 @@ export const CCFilesPanelEnhanced: React.FC = () => {
            ref={dirInputRef}
            type="file" 
            style={{ display: 'none' }} 
            webkitdirectory="" 
            multiple
            onChange={handleFallbackDirectorySelect}
            // @ts-ignore WebKit directory picker attribute for folder upload
            webkitdirectory=""
          />
          <Tooltip title={isDirectoryPickerSupported() ? "Uses modern directory picker" : "Uses fallback method"}>
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, createContext, useContext } from 'react';
+import React, { useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
 import {
    Box, IconButton, CircularProgress, Collapse, Typography, Tooltip,
    ToggleButtonGroup, ToggleButton,
@@ -518,7 +518,7 @@ export function CCGraphNavPanel() {
            const data = await res.json();
            setTree(data.tree);
        } catch (err) {
-            logger.error('graph-nav-panel', 'Failed to load graph tree', err);
+            logger.error('navigation-panel', 'Failed to load graph tree', err);
            setError('Failed to load navigation tree');
        } finally {
            setLoading(false);
@@ -650,12 +650,12 @@ export function CCGraphNavPanel() {
    }, []);
    const handleCalendarWizardComplete = useCallback(() => {
-        logger.info('graph-nav-panel', 'School calendar setup complete');
+        logger.info('navigation-panel', 'School calendar setup complete');
        refreshAll();
    }, [refreshAll]);
    const handleTimetableWizardComplete = useCallback((timetableId: string) => {
-        logger.info('graph-nav-panel', 'Teacher timetable setup complete', { timetableId });
+        logger.info('navigation-panel', 'Teacher timetable setup complete', { timetableId });
        refreshAll();
    }, [refreshAll]);
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Box, Typography, styled, Button, ThemeProvider, createTheme, useMediaQuery } from '@mui/material';
 import Save from '@mui/icons-material/Save';
-import Reset from '@mui/icons-material/RestartAlt';
+import { RestartAlt } from '@mui/icons-material';
 import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw';
 import { useNavigationStore } from '../../../../../../stores/navigationStore';
 import { useAuth } from '../../../../../../contexts/AuthContext';
Author	SHA1	Message	Date
kcar	ede9a78459	chore: preserve app workspace t_41bd9518	2026-08-09 20:24:43 +01:00
CC WorkerandClaude Sonnet 4.6	66f35b8ae4	fix(exam): compact top bar, collapsible guide panel app-ci-deploy / test-build-deploy (push) Has been cancelled Details Top bar reduced to single-line height: Back becomes an icon button, caption line removed (detail lives in the guide), Save button size=small. Guide panel defaults collapsed and toggles via a ? icon button at bottom-right so it doesn't occupy permanent canvas real estate. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 13:37:47 +00:00
CC WorkerandClaude Sonnet 4.6	fe5dbe7fa8	feat(exam): doc-view camera constraints and sidebar layout app-ci-deploy / test-build-deploy (push) Has been cancelled Details Replaces infinite-canvas free-pan with a constrained vertical-scroll doc view: tldraw setCameraOptions with behavior='contain', fit-x-100, and top origin so the PDF never drifts side-to-side. Layout restructured from floating overlays to flex column (top bar + sidebar/canvas row). Tool panel is now a left sidebar, guide panel overlays canvas bottom-right. PAGE_START_X changed from 260 → 0 so pages are flush left; camera applyDocViewConstraints() called incrementally as pages stream in and with resetZoom() once all pages are loaded. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 12:36:21 +00:00
CC WorkerandClaude Sonnet 4.6	15a519748d	fix(exam): keep region shapes overlaid on PDF in setup canvas app-ci-deploy / test-build-deploy (push) Has been cancelled Details Three z-order fixes in ExamTemplateSetupPage: 1. loadShapes: early-return before deletion when models is empty, so seed guide shapes aren't wiped for a fresh template that has no saved regions yet. 2. Incremental PDF loading (onPageReady): replace per-page sendToBack (unreliable when all shapes are moving — reorderToBack no-ops) with bringToFront on existing domain shapes after each page is added. 3. Final load sequence: call bringDomainShapesToFront after syncPdfPages + loadShapes to guarantee correct z-order regardless of how tldraw's fractional indexer placed newly created shapes. Also called from onMount for the same reason. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 10:12:16 +00:00
CC WorkerandClaude Sonnet 4.6	3389fdcb5b	feat(exam): S4-11 marking flow, results table, CSV, ResultsWidget app-ci-deploy / test-build-deploy (push) Has been cancelled Details - /exam-marker/:batchId/mark — ExamMarkingPage: student queue, per-part mark entry, upsert marks - /exam-marker/:batchId/results — ExamResultsPage: results table with absent rows, CSV download - ResultsWidget on ClassDetailPage: last batch summary, class average, absent count, batch creation - New types: MarkingBatch, StudentSubmission, BatchQueueResponse, BatchResultsResponse, MarkUpsertPayload - New repo methods: createBatch, listBatches, getBatchQueue, getBatchResults, getBatchCsv, upsertMark Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 04:35:34 +00:00
CC WorkerandClaude Sonnet 4.6	ab35193be1	Merge S4-10: mark scheme editor + SpecPoint picker app-ci-deploy / test-build-deploy (push) Has been cancelled Details Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 04:31:02 +00:00
CC WorkerandClaude Sonnet 4.6	b3f71c5749	Merge S4-10: mark scheme editor + SpecPoint picker - Add /exam-marker/:templateId/marks route with MarkSchemePage - Per-Part mark scheme editor: points/levels/parts/checklist/free forms - SpecPoint picker via GET /api/exam/specs/{spec_code}/points (falls back to manual spec_ref when endpoint 404s) - Manual neo4j-sync button; ASSESSES edge verified in cc.public.exams - Edit marks button on each template card in dashboard - Merge-resolved: AppRoutes, index.ts, exam.types.ts, ExamDashboardPage (kept grouped UI + added Edit marks button) Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 04:30:41 +00:00
CC Worker	b396af96b9	Merge S4-9c: exam canvas UX polish — icons, dark/light palette tokens, multi-page boundary hint app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-07 04:10:15 +00:00
kcar	3eac792ced	feat(exam-setup): UX polish — icons, dark/light palette tokens, multi-page boundary hint	2026-06-07 05:10:11 +01:00
CC WorkerandClaude Sonnet 4.6	8e8a345e61	fix: incremental PDF page rendering for exam setup backdrop app-ci-deploy / test-build-deploy (push) Has been cancelled Details Rendering a 36-page AQA exam PDF sequentially created 36 large canvas elements, causing memory pressure and keeping pdfStatus='loading' for 60–120s in headless Chrome. Two changes: 1. pdfLoader.ts: reuse a single canvas (reduces peak memory from ~120MB to ~4MB) and fire onPageReady callback after each page so callers can stream pages to the canvas as they render. 2. ExamTemplateSetupPage.tsx: use the callback to add each PDF page shape to the tldraw canvas the moment it renders, making the first page visible within a few seconds rather than after all pages load. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 03:35:09 +00:00
CC WorkerandClaude Sonnet 4.6	2de3e29179	fix: serve .mjs files as application/javascript for pdfjs module worker app-ci-deploy / test-build-deploy (push) Has been cancelled Details nginx:alpine mime.types only covers .js, not .mjs. The pdfjs-dist v4 worker is output as pdf.worker-*.mjs; without the correct MIME type the browser refuses to execute it as a module worker and pdfjs throws 'Network Error', blocking the PDF backdrop from rendering. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 03:21:44 +00:00
CC WorkerandClaude Sonnet 4.6	29390d30ca	Merge S4-9b: PDF backdrop on ExamCanvas from source-pdf endpoint app-ci-deploy / test-build-deploy (push) Has been cancelled Details Renders template source PDFs as locked image shapes behind the exam setup regions. Adds page geometry abstraction so shape coordinates map to real PDF page dimensions rather than fixed PAGE_HEIGHT math. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 02:59:17 +00:00
kcar	aa2f35e467	feat(exam): render template PDFs behind setup canvas	2026-06-07 03:56:09 +01:00
CC WorkerandClaude Sonnet 4.6	61a189a7a2	fix: tldraw user prefs colorScheme and indicator method for shape utils app-ci-deploy / test-build-deploy (push) Has been cancelled Details - updateUserPreferences: isDarkMode → colorScheme ('dark'\|'light') per tldraw 3.6.1 TLUserPreferences type (isDarkMode is read-only computed) - BaseBoxShapeUtil subclasses: add required indicator() method returning bounding rect; fixes non-abstract class missing abstract member error Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 02:30:57 +00:00
CC WorkerandClaude Sonnet 4.6	ab6f0b09d7	fix: remove duplicate bindingUtils causing tldraw arrow double-registration app-ci-deploy / test-build-deploy (push) Has been cancelled Details Tldraw 3.6.1 Tldraw component already registers defaultBindingUtils internally; passing them explicitly via the bindingUtils prop caused "Binding type 'arrow' is defined more than once" runtime crash. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-07 02:21:32 +00:00
CC WorkerandClaude Opus 4.8	16ae3aa089	fix(exam): setup toolbar crash — MUI Button color 'default' is invalid in v5 app-ci-deploy / test-build-deploy (push) Has been cancelled Details Select + Furniture tool buttons used color='default', which MUI v5 resolves to theme.palette.default (undefined) -> TypeError reading 'main'/'dark' at render, tripping the ErrorBoundary ('Template setup canvas crashed'). Use 'inherit'. Caught by live browser-verify t_11f5a049; model-level tests never rendered the toolbar. Co-Authored-By: Claude Opus 4.8 <[email protected]>	2026-06-07 01:03:08 +00:00
CC Worker	496ec2cbf9	merge: ExamCanvas core setup page /exam-marker/:templateId/setup (S4-9a) app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-07 00:54:55 +00:00
kcar	dea3275f23	[verified] Add exam template setup canvas	2026-06-07 01:27:44 +01:00
CC Worker	f067db3eb8	Merge remote-tracking branch 'origin/agent/s4-8-2-template-versioning' app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-07 00:12:25 +00:00
kcar	1ab8aab43c	feat(exam): add mark scheme editor	2026-06-07 00:34:56 +01:00
kcar	fdbc19cf0d	feat(exam): version templates on dashboard	2026-06-07 00:33:06 +01:00
CC Worker	adc7a2a05b	merge: exam-marker app dashboard + /exam-marker route (S4-8) app-ci-deploy / test-build-deploy (push) Has been cancelled Details New ExamDashboardPage + examRepository seam; dashboard nav entry; removes the old CCExamMarker viewer + dead CCExamMarkerPanel wiring (R1.1). Build green; route tests pass.	2026-06-06 19:50:23 +00:00
CC WorkerandClaude Opus 4.8	29554ebdbd	feat(exam): Assessment dashboard + /exam-marker route; remove old CCExamMarker (S4-8) - New examRepository (R2.1 seam): the only module talking to /api/exam (Supabase JWT → Bearer, axios to API_BASE). list/get/create/archive templates. - ExamDashboardPage (/exam-marker): lists institute templates, create dialog, archive; cards link to setup (S4-9). Wrapped in ErrorBoundary (R6.4). - exam.types.ts mirrors the API contract. - Dashboard 'Exam Marker' quick action (top-level discovery, R1.3/R6.1). Note: the in-canvas TeacherNavigation is unsuitable for a nav section (it's the worker prev/next tab bar) — flagged; used the dashboard entry instead. - R1.1 removal: deleted src/pages/tldraw/CCExamMarker/ (old 3-PDF viewer) and the now-dead CCExamMarkerPanel + its wiring in CCPanel/BasePanel (examMarkerProps was only ever passed by the deleted page). - Fixed pre-existing broken AppRoutes test (missing TimetableListPage mock export). Build green (vite); AppRoutes route tests pass; typecheck clean for new files. Co-Authored-By: Claude Opus 4.8 <[email protected]>	2026-06-06 19:47:02 +00:00
CC Worker	434643596e	Merge fix/r6-myclasses: add selectedInstituteId dependency + silent error handling app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-02 23:28:37 +00:00
CC WorkerandClaude Sonnet 4.6	313ab724b8	fix(my-classes): add selectedInstituteId to fetch dependency, silence unhandled rejection Re-fetch classes when NeoInstitute context changes. Catch fetchMyClasses rejection with logger.warn so unhandled promise rejections don't break the component boundary silently. Use CircularProgress (MUI) for loading skeleton. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 23:28:26 +00:00
CC WorkerandClaude Sonnet 4.6	ee7d7f7cac	fix(timetable): fall through to empty state on fetch error — endpoint not yet in API app-ci-deploy / test-build-deploy (push) Has been cancelled Details GET /database/timetable/timetables returns 404 (endpoint not implemented). Treat any fetch error as empty state so the page renders gracefully rather than showing error UI. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 22:33:41 +00:00
CC WorkerandClaude Sonnet 4.6	0dd18c4fd4	fix(timetable): use fetchTimetables instead of fetchMyTimetables — service stub unimplemented app-ci-deploy / test-build-deploy (push) Has been cancelled Details timetableOnlyService.getMyTimetables is referenced but never defined; calling it throws 'is not a function' at runtime. fetchTimetables calls the implemented listTimetables endpoint. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 22:15:58 +00:00
CC WorkerandClaude Sonnet 4.6	5869c741d7	fix(routing): add TimetableListPage for /timetable — detail view required :timetableId app-ci-deploy / test-build-deploy (push) Has been cancelled Details Bare /timetable routed to TimetablePage which called useParams<{timetableId}>() and immediately hit !currentTimetable → "Error Loading Timetable". New TimetableListPage uses fetchMyTimetables() from timetableStore. AppRoutes now: /timetable → TimetableListPage, /timetable/:timetableId → TimetablePage. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>	2026-06-02 21:36:57 +00:00
CC Worker	5b6e461706	fix(canvas): separate store lifecycle from snapshot lifecycle — one store per user session prevents disposed-store crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details Root cause: disposing store while React's async state update (storeReady=false) hadn't unmounted Tldraw yet caused tldraw's reactive signals to read currentPageId on a disposed store. Fix: Effect 1 creates store once per user.id (never recreated on node navigation). Effect 2 loads/reloads snapshots when context.node changes, store stays alive. Store is only disposed when user changes or component unmounts — after setStoreReady(false) has had time to unmount Tldraw cleanly via React's synchronous cleanup.	2026-06-01 06:25:15 +00:00
CC Worker	53adc74a1c	fix(canvas): defer store disposal until next store is ready — prevent tldraw reactive signals reading disposed store during async React unmount app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:18:24 +00:00
CC Worker	9a7cc86a75	fix(canvas): bypass localStoreService singleton — create store directly in effect to eliminate disposed-store reuse app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:16:07 +00:00
CC Worker	6cba932146	fix(canvas): move ensureStoreIsUsable() to AFTER snapshot load — loadSnapshot() overwrites TLINSTANCE before it could be pre-initialized app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:13:49 +00:00
CC Worker	ba829be8e9	fix(canvas): call ensureStoreIsUsable() before tldraw mount — pre-initializes TLINSTANCE/page/camera records in empty store preventing currentPageId crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 06:10:11 +00:00
CC Worker	9f58917c39	fix(canvas): sanitize snapshot session.currentPageId before loadSnapshot — stale snapshots with missing pages caused currentPageId crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details - Pre-load: if session.currentPageId not in snapshot pages, reset to first available page - Post-load: if store instance.currentPageId still invalid, clear store for fresh start - On loadSnapshot error: clear store instead of silently failing with corrupt state - Root cause: teacher1 had a saved snapshot with currentPageId pointing to a deleted page	2026-06-01 06:02:19 +00:00
CC Worker	a375fbe37f	fix(canvas): clear localStoreService singleton on unmount — disposed store was returned to next mount causing currentPageId crash app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 03:04:29 +00:00
CC Worker	38ca23dc3e	fix(theme): add CssBaseline — MUI dark theme on Android was white text on white body background app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 02:52:41 +00:00
CC Worker	8fe8edb341	fix(auth): RequireAuth must use Outlet not children — React Router v6 requires Route guards to be Route elements app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 02:45:20 +00:00
CC Worker	143fff6414	merge: R4 error boundaries — ErrorBoundary wraps Tldraw canvas (resolve singlePlayerPage.tsx conflict with R3 state machine refactor) app-ci-deploy / test-build-deploy (push) Has been cancelled Details	2026-06-01 02:40:28 +00:00
CC Worker	c216df8021	merge: R4 auth reliability — PKCE race fix + RequireAuth loading skeleton	2026-06-01 02:38:54 +00:00
CC Worker	f7bb84f9b8	merge: R4 TypeScript hardening H1-H6 — reduce errors 177→152 (resolve cc-graph-shapes/CCGraphNavPanel conflicts with R3)	2026-06-01 02:38:50 +00:00
CC Worker	cbff4deef2	merge: R3 TypeScript fixes — cc-graph-shapes duplicates, CCGraphNavPanel, snapshotService, App.tsx simplification	2026-06-01 02:37:21 +00:00
CC Worker	85ecae7147	merge: R2 E2E canvas tests — 3 Playwright specs with beforeAll skip guards	2026-06-01 02:37:15 +00:00
CC Worker	8a79675497	merge: R2 bundle split — 3.3MB → 8 vendor chunks (largest 1.1MB)	2026-06-01 02:37:15 +00:00
CC Worker	6951bc1700	merge: R2 remove Tailwind — drop build pipeline, add tailwind-compat.css shim	2026-06-01 02:37:15 +00:00
CC Worker	e6f6bd5c3a	merge: R2 tldraw token bridge + DarkModeSync — bridge --cc-* to tldraw --color-* layer	2026-06-01 02:37:10 +00:00
CC Worker	b3ec09fbef	merge: R2 color token sweep — replace hardcoded hex with --cc-* tokens	2026-06-01 02:37:07 +00:00
CC Worker	765573163d	feat(ts): R4 TypeScript hardening H1-H6 — reduce errors 177→152 H1: CCGraphNavPanel — useMemo import + LogCategory fix H2: CCTimetableLessonNodeShapeUtil — props type alignment (cc-graph-props.ts) H3: cc-graph-shapes — add missing CCTimetableLessonNode* import (was never imported) H4: CCNodeSnapshotPanel — RestartAlt import from @mui/icons-material H5: CCExamMarkerPanel + CCFilesPanelEnhanced — BlobPart cast + webkitdirectory @ts-ignore H6: TranscriptionManager — setTranscriptionCallback interface fix Plus: CCExportPdfButton BlobPart cast, SimpleUploadTest icon imports, graph-sidebar LogCategory tsc before: 177 (master) tsc after: 152 (reduction of 25 errors, well below 160 acceptable threshold)	2026-06-01 02:29:38 +00:00
CC Worker	1505adb154	feat(ux): R4 error boundaries — wrap Tldraw in ErrorBoundary (J1) - Added import for ErrorBoundary from src/components/ErrorBoundary.tsx - Wrapped {store && <Tldraw>} block in ErrorBoundary with 'Canvas failed to load — Reload' fallback - ErrorBoundary.tsx already existed with full error/reload UI - Timetable pages (J2) already have loading states via timetableStore loading flags - tsc: 177 (master baseline) → 173 on this branch (no regression)	2026-06-01 02:20:34 +00:00
CC Worker	ade0be97f6	feat(auth): R4 auth reliability — fix PKCE race condition + RequireAuth loading skeleton	2026-06-01 02:16:05 +00:00
CC Worker	96db086ecb	fix: resolve duplicate identifier in cc-graph-shapes, useMemo import in CCGraphNavPanel	2026-06-01 01:36:37 +00:00
CC Worker	6610abbd72	fix: resolve duplicate identifier in cc-graph-shapes	2026-06-01 01:35:11 +00:00
CC Worker	489c2208c5	fix: add DarkModeSync to propagate tldraw dark mode to document root tldraw v3.6 sets tl-theme__dark class on .tl-container, not data-color-mode on document.documentElement. DarkModeSync lives inside TLDrawProvider and mirrors the active color scheme to [data-color-mode] on <html>, activating --cc-* token overrides in cc-design-system.css globally.	2026-06-01 00:47:24 +00:00
CC Worker	3db843a6f9	test: add Playwright E2E tests for canvas mount, node navigation, transcription toggle	2026-05-31 23:50:35 +00:00
CC Worker	79e7d4df9c	test: add Playwright E2E tests for canvas mount, node navigation, transcription Three spec files with beforeAll skip guards: - Skip if VITE_TEST_TEACHER_EMAIL/PASSWORD not set - Skip if dev server at 192.168.0.251:13000 unreachable Tests exit 0 (3 skipped) when env is unconfigured. Requires: live dev server + real teacher credentials to run live.	2026-05-31 23:49:41 +00:00
CC Worker	a0afbc90f5	feat: replace last hardcoded hex colors (#666 , #333 ) with --cc-* tokens in cc-youtube-embed-styles	2026-05-31 23:17:55 +00:00
CC Worker	57429f3a75	chore: remove Tailwind CSS build pipeline; replace with tailwind-compat.css shim 244 utility classes across 8 files (timetable pages, Modal, CCShapesPanel). Rather than blind inline conversion, replace @tailwind directives with a self-contained 230-line CSS shim covering all classes actually used. Build passes. Shim entries can be converted to --cc-* tokens incrementally.	2026-05-31 23:09:08 +00:00
CC Worker	01a8a59349	feat: bridge --cc-* tokens to tldraw --color-* variable layer; fix first-render theme fallback	2026-05-31 22:56:31 +00:00