WS-2 R3: containers/preamble as background backdrops, tick-N, no false overlap flag

From KC's 2nd review:
- z-order: boundaries, preamble bands and container frames drawn behind; figures,
  responses and parts on top (a figure's description tooltip is no longer blocked
  by the preamble box). Preamble + containers are pointerEvents:none.
- the 'large box around all content' is gone: a container renders as a small
  corner tab (label + total marks), not an enclosing box; intermediate part-groups
  keep a faint dashed nesting frame. Main-question extent is shown by its boundaries.
- MC 'tick N' count (select_n) surfaced next to the option boxes.
- fixed the spurious 'overlapping shapes' review flag on containers (they legitimately
  enclose their children; only genuine partial overlaps between non-containers flag now).
tsc clean; 7/7 model tests pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GruxHXxfdp4kZCgAMVFgvV

src/AppRoutes.tsx

@@ -7,7 +7,7 @@ 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 { ExamDashboardPage, ExamMarkingPage, ExamResultsPage, ExamTemplateSetupPage, MarkSchemePage } from './pages/exam';
+import { ExamDashboardPage, ExamMarkingPage, ExamResultsPage, ExamTemplateSetupPage, MarkSchemePage, QuestionBankPage, CorpusPage } from './pages/exam';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import CalendarPage from './pages/user/calendarPage';
 import SettingsPage from './pages/user/settingsPage';
@@ -184,6 +184,8 @@ const AppRoutes: React.FC = () => {
             <Route path="/search" element={<SearxngPage />} />
             <Route path="/teacher-planner" element={<TeacherPlanner />} />
             <Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
+            <Route path="/exam-marker/bank" element={<ErrorBoundary><QuestionBankPage /></ErrorBoundary>} />
+            <Route path="/exam-marker/corpus" element={<ErrorBoundary><CorpusPage /></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>} />

src/pages/exam/CorpusPage.tsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, Chip, CircularProgress, Container,
+  Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography,
+} from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CheckIcon from '@mui/icons-material/Check';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+import { examRepository } from '../../services/exam/examRepository';
+import type { CorpusResponse, CorpusSpec, CorpusDocType } from '../../types/exam.types';
+
+const DOCS: CorpusDocType[] = ['QP', 'MS', 'ER'];
+const DOC_LABEL: Record<CorpusDocType, string> = { QP: 'Question papers', MS: 'Mark schemes', ER: 'Examiner reports' };
+const SCIENCES = new Set(['Biology', 'Chemistry', 'Physics']);
+
+const CorpusPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [corpus, setCorpus] = useState<CorpusResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [board, setBoard] = useState<string | null>(null);
+  const [level, setLevel] = useState<string | null>(null);
+  const [subject, setSubject] = useState<string | null>(null);
+  const [sciencesOnly, setSciencesOnly] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true); setError(null);
+    try { setCorpus(await examRepository.getCorpus()); }
+    catch (e) { setError(e instanceof Error ? e.message : String(e)); }
+    finally { setLoading(false); }
+  }, []);
+  useEffect(() => { void load(); }, [load]);
+
+  const allSpecs = useMemo<CorpusSpec[]>(
+    () => (corpus?.boards ?? []).flatMap((b) => b.specs),
+    [corpus],
+  );
+  const boards = useMemo(() => Array.from(new Set(allSpecs.map((s) => s.board))).sort(), [allSpecs]);
+  const levels = useMemo(() => Array.from(new Set(allSpecs.map((s) => s.level))).sort(), [allSpecs]);
+  const subjects = useMemo(() => Array.from(new Set(allSpecs.map((s) => s.subject))).sort(), [allSpecs]);
+
+  const specs = useMemo(() => allSpecs.filter((s) =>
+    (!board || s.board === board) && (!level || s.level === level) && (!subject || s.subject === subject)
+    && (!sciencesOnly || SCIENCES.has(s.subject))
+  ).sort((a, b) => (a.board + a.level + a.subject + a.spec_code).localeCompare(b.board + b.level + b.subject + b.spec_code)),
+    [allSpecs, board, level, subject, sciencesOnly]);
+
+  const filteredTotals = useMemo(() => specs.reduce((acc, s) => {
+    acc.specs += 1; acc.papers += s.n_papers;
+    DOCS.forEach((d) => { acc[d] += s.counts[d] ?? 0; });
+    return acc;
+  }, { specs: 0, papers: 0, QP: 0, MS: 0, ER: 0 } as Record<string, number>), [specs]);
+
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <Button size="small" startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>Exam Marker</Button>
+      <Typography variant="h4" component="h1" fontWeight={700}>Exam bank</Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        The collected past-paper corpus — question papers, mark schemes and examiner reports per specification.
+      </Typography>
+
+      {error && <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>{error}</Alert>}
+
+      {loading ? (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}><CircularProgress /></Box>
+      ) : (
+        <>
+          {/* Summary of the current selection */}
+          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap sx={{ mb: 2 }}>
+            <Chip color="default" label={`${filteredTotals.specs} specifications`} />
+            <Chip color="default" label={`${filteredTotals.papers} papers`} />
+            <Chip color="primary" variant="outlined" label={`${filteredTotals.QP} question papers`} />
+            <Chip color="success" variant="outlined" label={`${filteredTotals.MS} mark schemes`} />
+            <Chip color="warning" variant="outlined" label={`${filteredTotals.ER} examiner reports`} />
+          </Stack>
+
+          {/* Filters */}
+          <Stack spacing={0.75} sx={{ mb: 2 }}>
+            <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap" useFlexGap>
+              <Chip size="small" color={sciencesOnly ? 'secondary' : 'default'} variant={sciencesOnly ? 'filled' : 'outlined'} label="Sciences only" onClick={() => setSciencesOnly((v) => !v)} />
+              <Box sx={{ width: 12 }} />
+              <Typography variant="caption" color="text.secondary">Board:</Typography>
+              <Chip size="small" label="all" variant={board ? 'outlined' : 'filled'} color={board ? 'default' : 'primary'} onClick={() => setBoard(null)} />
+              {boards.map((b) => <Chip key={b} size="small" label={b} variant={board === b ? 'filled' : 'outlined'} color={board === b ? 'primary' : 'default'} onClick={() => setBoard(b)} />)}
+            </Stack>
+            <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap" useFlexGap>
+              <Typography variant="caption" color="text.secondary">Level:</Typography>
+              <Chip size="small" label="all" variant={level ? 'outlined' : 'filled'} color={level ? 'default' : 'primary'} onClick={() => setLevel(null)} />
+              {levels.map((l) => <Chip key={l} size="small" label={l} variant={level === l ? 'filled' : 'outlined'} color={level === l ? 'primary' : 'default'} onClick={() => setLevel(l)} />)}
+              {!sciencesOnly && (<>
+                <Box sx={{ width: 12 }} />
+                <Typography variant="caption" color="text.secondary">Subject:</Typography>
+                <Chip size="small" label="all" variant={subject ? 'outlined' : 'filled'} color={subject ? 'default' : 'primary'} onClick={() => setSubject(null)} />
+                {subjects.map((s) => <Chip key={s} size="small" label={s} variant={subject === s ? 'filled' : 'outlined'} color={subject === s ? 'primary' : 'default'} onClick={() => setSubject(s)} />)}
+              </>)}
+            </Stack>
+          </Stack>
+
+          {specs.length === 0 ? (
+            <Alert severity="info">No specifications match the current filters.</Alert>
+          ) : specs.map((s) => (
+            <Accordion key={s.spec_code} disableGutters>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap', width: '100%' }}>
+                  <Typography sx={{ fontWeight: 700, minWidth: 260 }}>
+                    {s.level} {s.subject} <Typography component="span" color="text.secondary" variant="body2">· {s.spec_code}</Typography>
+                  </Typography>
+                  <Chip size="small" label={`${s.n_papers} papers`} />
+                  <Box sx={{ flex: 1 }} />
+                  {DOCS.map((d) => (
+                    <Chip key={d} size="small" variant="outlined"
+                      color={s.counts[d] ? (d === 'QP' ? 'primary' : d === 'MS' ? 'success' : 'warning') : 'default'}
+                      label={`${d} ${s.counts[d] ?? 0}`} />
+                  ))}
+                </Box>
+              </AccordionSummary>
+              <AccordionDetails sx={{ p: 0 }}>
+                <Box sx={{ overflowX: 'auto' }}>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Session</TableCell>
+                        <TableCell>Paper</TableCell>
+                        <TableCell>Tier</TableCell>
+                        {DOCS.map((d) => <TableCell key={d} align="center">{DOC_LABEL[d]}</TableCell>)}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {s.papers.map((p, i) => (
+                        <TableRow key={`${p.paper_code}-${p.session}-${i}`} hover>
+                          <TableCell>{p.session ?? '—'}</TableCell>
+                          <TableCell>{p.paper_code ?? '—'}</TableCell>
+                          <TableCell>{p.tier ?? '—'}</TableCell>
+                          {DOCS.map((d) => (
+                            <TableCell key={d} align="center">
+                              {p.docs[d] ? <CheckIcon fontSize="small" color="success" /> : <RemoveIcon fontSize="small" color="disabled" />}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </Box>
+              </AccordionDetails>
+            </Accordion>
+          ))}
+        </>
+      )}
+    </Container>
+  );
+};
+
+export default CorpusPage;

src/pages/exam/ExamDashboardPage.tsx

@@ -25,6 +25,8 @@ 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 PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
+import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 
 import { useAuth } from '../../contexts/AuthContext';
 import { examRepository } from '../../services/exam/examRepository';
@@ -233,9 +235,17 @@ const ExamDashboardPage: React.FC = () => {
               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>
+          <Stack direction="row" spacing={1}>
+            <Button variant="outlined" startIcon={<LibraryBooksIcon />} onClick={() => navigate('/exam-marker/corpus')}>
+              Exam bank
+            </Button>
+            <Button variant="outlined" startIcon={<PlaylistAddCheckIcon />} onClick={() => navigate('/exam-marker/bank')}>
+              Question bank
+            </Button>
+            <Button variant="contained" startIcon={<AddIcon />} onClick={openCreate}>
+              New template
+            </Button>
+          </Stack>
         </Box>
 
         {error && (

src/pages/exam/ExamMarkingPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { v5 as uuidv5 } from 'uuid';
 import {
@@ -21,6 +21,7 @@ import {
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SaveIcon from '@mui/icons-material/Save';
 import TableChartIcon from '@mui/icons-material/TableChart';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
 
 import { examRepository } from '../../services/exam/examRepository';
 import type { BatchQueueResponse, ExamQuestion, ExamTemplateDetail, StudentSubmission } from '../../types/exam.types';
@@ -43,6 +44,8 @@ const ExamMarkingPage: React.FC = () => {
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const load = useCallback(async () => {
     if (!batchId) return;
@@ -68,6 +71,28 @@ const ExamMarkingPage: React.FC = () => {
     () => (template?.questions ?? []).filter((q) => !q.is_container).sort((a, b) => a.order - b.order),
     [template],
   );
+  const onScanFiles = useCallback(async (files: FileList | null) => {
+    if (!batchId || !files || files.length === 0) return;
+    setUploading(true); setError(null); setMessage(null);
+    let ok = 0;
+    const failures: string[] = [];
+    for (const file of Array.from(files)) {
+      try {
+        // 'ordered' assigns each scan to the next not-yet-submitted roster slot; unmatched scans
+        // become an unmatched submission the teacher can reconcile.
+        await examRepository.uploadScan(batchId, file, { matchingMethod: 'ordered' });
+        ok += 1;
+      } catch (e) {
+        failures.push(`${file.name}: ${e instanceof Error ? e.message : String(e)}`);
+      }
+    }
+    setUploading(false);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+    await load();
+    if (ok) setMessage(`Uploaded ${ok} scan${ok === 1 ? '' : 's'}${failures.length ? `, ${failures.length} failed` : ''}`);
+    if (failures.length) setError(failures.join(' · '));
+  }, [batchId, load]);
+
   const selected = queue?.submissions.find((s) => s.id === selectedId) ?? null;
 
   const saveSelected = async () => {
@@ -154,7 +179,29 @@ const ExamMarkingPage: React.FC = () => {
         <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>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 1 }}>
+                <Typography variant="h6">Marking queue</Typography>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<UploadFileIcon fontSize="small" />}
+                  disabled={uploading}
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  {uploading ? 'Uploading…' : 'Upload scans'}
+                </Button>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="application/pdf"
+                  multiple
+                  hidden
+                  onChange={(e) => { void onScanFiles(e.target.files); }}
+                />
+              </Box>
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+                Scanned PDFs fill the roster in order; unmatched scans appear below to reconcile.
+              </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" />

src/pages/exam/QuestionBankPage.tsx

@@ -0,0 +1,207 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Alert, Box, Button, Card, CardActionArea, CardContent, Chip, CircularProgress, Container,
+  Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField, Typography,
+} from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import PlaylistAddCheckIcon from '@mui/icons-material/PlaylistAddCheck';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+
+import { examRepository } from '../../services/exam/examRepository';
+import type { BankQuestion, BankResponse } from '../../types/exam.types';
+import { cropQuestion } from './bankCrops';
+
+const QuestionCrop: React.FC<{ q: BankQuestion }> = ({ q }) => {
+  const [src, setSrc] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    cropQuestion({ templateId: q.template_id, page: q.page, bounds: q.bounds })
+      .then((d) => { if (alive) { setSrc(d); setDone(true); } })
+      .catch(() => { if (alive) setDone(true); });
+    return () => { alive = false; };
+  }, [q.template_id, q.page, q.bounds]);
+  if (src) {
+    return <Box component="img" src={src} alt="" loading="lazy" sx={{ width: '100%', maxHeight: 150, objectFit: 'cover', objectPosition: 'top', display: 'block', bgcolor: '#fff', borderBottom: 1, borderColor: 'divider' }} />;
+  }
+  return (
+    <Box sx={{ height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'action.hover', borderBottom: 1, borderColor: 'divider', color: 'text.disabled', fontSize: 12 }}>
+      {done ? 'no preview' : <CircularProgress size={16} />}
+    </Box>
+  );
+};
+
+const QuestionBankPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [bank, setBank] = useState<BankResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [specRef, setSpecRef] = useState<string | null>(null);
+  const [subject, setSubject] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [title, setTitle] = useState('');
+  const [creating, setCreating] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true); setError(null);
+    try {
+      setBank(await examRepository.getBank({ specRef: specRef ?? undefined, subject: subject ?? undefined }));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [specRef, subject]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const toggle = (id: string) => setSelected((prev) => {
+    const next = new Set(prev);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    return next;
+  });
+
+  const selectedList = useMemo(() => Array.from(selected), [selected]);
+  const selectedQuestions = useMemo(
+    () => (bank?.questions ?? []).filter((q) => selected.has(q.id)),
+    [bank, selected],
+  );
+  const totalMarks = selectedQuestions.reduce((s, q) => s + (q.max_marks ?? 0), 0);
+
+  // facet lists (sorted) with counts
+  const specFacets = Object.entries(bank?.facets.spec_ref ?? {}).sort((a, b) => (a[0] < b[0] ? -1 : 1));
+  const subjectFacets = Object.entries(bank?.facets.subject ?? {}).sort((a, b) => (a[0] < b[0] ? -1 : 1));
+
+  const create = async () => {
+    setCreating(true); setError(null);
+    try {
+      const subj = subject ?? selectedQuestions[0]?.paper.subject ?? undefined;
+      const res = await examRepository.createCustomPaper({
+        title: title.trim() || `Custom paper — ${new Date().toISOString().slice(0, 10)}`,
+        subject: subj ?? undefined,
+        question_ids: selectedList,
+      });
+      navigate(`/exam-marker/${res.id}/setup`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setCreating(false);
+      setDialogOpen(false);
+    }
+  };
+
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <Button size="small" startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>
+        Exam Marker
+      </Button>
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap', mb: 2 }}>
+        <Box>
+          <Typography variant="h4" component="h1" fontWeight={700}>Question bank</Typography>
+          <Typography variant="body2" color="text.secondary">
+            Plan by spec point, then assemble a custom paper from questions across your papers.
+          </Typography>
+        </Box>
+        <Button
+          variant="contained"
+          startIcon={<PlaylistAddCheckIcon />}
+          disabled={selected.size === 0}
+          onClick={() => setDialogOpen(true)}
+        >
+          Create paper ({selected.size}{totalMarks ? ` · ${totalMarks}m` : ''})
+        </Button>
+      </Box>
+
+      {error && <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>{error}</Alert>}
+
+      {/* Filters */}
+      <Stack spacing={1} sx={{ mb: 2 }}>
+        <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap" useFlexGap>
+          <Typography variant="caption" color="text.secondary" sx={{ mr: 0.5 }}>Spec point:</Typography>
+          <Chip size="small" label="all" color={specRef ? 'default' : 'primary'} onClick={() => setSpecRef(null)} variant={specRef ? 'outlined' : 'filled'} />
+          {specFacets.map(([ref, count]) => (
+            <Chip key={ref} size="small" label={`${ref} · ${count}`} color={specRef === ref ? 'primary' : 'default'} variant={specRef === ref ? 'filled' : 'outlined'} onClick={() => setSpecRef(ref)} />
+          ))}
+        </Stack>
+        {subjectFacets.length > 1 && (
+          <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap" useFlexGap>
+            <Typography variant="caption" color="text.secondary" sx={{ mr: 0.5 }}>Subject:</Typography>
+            <Chip size="small" label="all" color={subject ? 'default' : 'secondary'} onClick={() => setSubject(null)} variant={subject ? 'outlined' : 'filled'} />
+            {subjectFacets.map(([s, count]) => (
+              <Chip key={s} size="small" label={`${s} · ${count}`} color={subject === s ? 'secondary' : 'default'} variant={subject === s ? 'filled' : 'outlined'} onClick={() => setSubject(s)} sx={{ textTransform: 'capitalize' }} />
+            ))}
+          </Stack>
+        )}
+      </Stack>
+
+      {loading ? (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}><CircularProgress /></Box>
+      ) : (bank?.questions.length ?? 0) === 0 ? (
+        <Alert severity="info">
+          No questions match yet. Questions appear here once your templates have parts with spec points
+          (set them in the mark-scheme editor). Auto-map + confirm on a paper to populate it.
+        </Alert>
+      ) : (
+        <>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+            {bank?.n} question{bank?.n === 1 ? '' : 's'} · click to add to your paper
+          </Typography>
+          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr' }, gap: 1.5 }}>
+            {(bank?.questions ?? []).map((q: BankQuestion) => {
+              const on = selected.has(q.id);
+              return (
+                <Card key={q.id} variant="outlined" sx={{ borderColor: on ? 'primary.main' : 'divider', borderWidth: on ? 2 : 1 }}>
+                  <CardActionArea onClick={() => toggle(q.id)}>
+                    <QuestionCrop q={q} />
+                    <CardContent sx={{ pb: 1.5 }}>
+                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
+                        <Typography variant="subtitle2" fontWeight={700}>Q{q.label ?? '?'}</Typography>
+                        {on ? <CheckCircleIcon color="primary" fontSize="small" /> : <RadioButtonUncheckedIcon color="disabled" fontSize="small" />}
+                      </Box>
+                      <Stack direction="row" spacing={0.5} flexWrap="wrap" useFlexGap sx={{ mb: 0.75 }}>
+                        <Chip size="small" label={`${q.max_marks ?? 0} marks`} />
+                        {q.answer_type && <Chip size="small" variant="outlined" label={q.answer_type} />}
+                        {q.spec_ref && <Chip size="small" color="info" label={q.spec_ref} />}
+                      </Stack>
+                      <Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block', textTransform: 'capitalize' }}>
+                        {[q.paper.subject, q.paper.title].filter(Boolean).join(' · ') || 'Untitled paper'}
+                      </Typography>
+                    </CardContent>
+                  </CardActionArea>
+                </Card>
+              );
+            })}
+          </Box>
+        </>
+      )}
+
+      <Dialog open={dialogOpen} onClose={() => !creating && setDialogOpen(false)} fullWidth maxWidth="sm">
+        <DialogTitle>Create custom paper</DialogTitle>
+        <DialogContent>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            {selected.size} question{selected.size === 1 ? '' : 's'} · {totalMarks} marks. This creates a new
+            template you can open in setup and use for marking.
+          </Typography>
+          <TextField
+            autoFocus
+            fullWidth
+            label="Paper title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={`Custom paper — ${new Date().toISOString().slice(0, 10)}`}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDialogOpen(false)} disabled={creating}>Cancel</Button>
+          <Button variant="contained" onClick={create} disabled={creating} startIcon={creating ? <CircularProgress size={16} color="inherit" /> : undefined}>
+            {creating ? 'Creating…' : 'Create & open'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default QuestionBankPage;

src/pages/exam/bankCrops.ts

@@ -0,0 +1,68 @@
+// Client-side crop thumbnails for the question bank. A bank question carries `bounds` (x,y,w,h) in the
+// 780px stacked-page canvas space and a `page` number; the source PDF renders at that same 780px width
+// (pdfLoader), so a thumbnail is just the page image cropped to the bounds. Renders each template's PDF
+// once (cached) and reuses it for all of that template's questions. No API/infra change.
+import { examRepository } from '../../services/exam/examRepository';
+import { loadPdfPageImages, PdfPageImage } from './setup/pdfLoader';
+
+const renderCache = new Map<string, Promise<PdfPageImage[]>>();
+const imageCache = new Map<string, Promise<HTMLImageElement>>();
+
+function templateRender(templateId: string): Promise<PdfPageImage[]> {
+  let p = renderCache.get(templateId);
+  if (!p) {
+    p = examRepository.getTemplateSourcePdf(templateId).then((bytes) => loadPdfPageImages(bytes));
+    p.catch(() => renderCache.delete(templateId)); // let a failed render be retried
+    renderCache.set(templateId, p);
+  }
+  return p;
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  let p = imageCache.get(src);
+  if (!p) {
+    p = new Promise<HTMLImageElement>((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = () => reject(new Error('image decode failed'));
+      img.src = src;
+    });
+    imageCache.set(src, p);
+  }
+  return p;
+}
+
+export interface CropInput {
+  templateId: string;
+  page: number | null;
+  bounds: Record<string, number> | null;
+}
+
+// Returns a PNG data-URL cropped to the question, or null if it can't be produced (no bounds/page/PDF).
+export async function cropQuestion(input: CropInput, maxWidth = 320): Promise<string | null> {
+  const { templateId, page, bounds } = input;
+  if (!bounds || !page) return null;
+  const pages = await templateRender(templateId);
+  const pageImg = pages.find((pg) => pg.pageNumber === page);
+  if (!pageImg) return null;
+
+  // stacked y-offset of this page (bounds.y is absolute across the vertically-stacked pages)
+  let yTop = 0;
+  for (const pg of pages) { if (pg.pageNumber === page) break; yTop += pg.height; }
+
+  const sx = Math.max(0, Math.round(bounds.x ?? 0));
+  const sy = Math.max(0, Math.round((bounds.y ?? 0) - yTop));
+  const sw = Math.min(Math.round(bounds.w ?? pageImg.width), pageImg.width - sx);
+  const sh = Math.min(Math.round(bounds.h ?? 80), pageImg.height - sy);
+  if (sw <= 1 || sh <= 1) return null;
+
+  const img = await loadImage(pageImg.src);
+  const scale = Math.min(1, maxWidth / sw);
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(sw * scale));
+  canvas.height = Math.max(1, Math.round(sh * scale));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+  ctx.drawImage(img, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
+  return canvas.toDataURL('image/png');
+}

src/pages/exam/index.ts

@@ -1,4 +1,6 @@
 export { default as ExamDashboardPage } from './ExamDashboardPage';
+export { default as QuestionBankPage } from './QuestionBankPage';
+export { default as CorpusPage } from './CorpusPage';
 export { default as ExamTemplateSetupPage } from './setup/ExamTemplateSetupPage';
 export { default as MarkSchemePage } from './MarkSchemePage';
 export { default as ExamMarkingPage } from './ExamMarkingPage';

src/pages/exam/setup/ExamTemplateSetupPage.tsx

@@ -1,7 +1,8 @@
 
 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 { Alert, Box, Button, Chip, CircularProgress, Collapse, Dialog, DialogContent, DialogTitle, Divider, IconButton, Paper, Snackbar, Stack, Tooltip, Typography, useTheme } from '@mui/material'
+import DescriptionIcon from '@mui/icons-material/Description'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'
@@ -17,7 +18,7 @@ import axios from 'axios'
 import { ErrorBoundary } from '../../../components/ErrorBoundary'
 import { logger } from '../../../debugConfig'
 import { examRepository } from '../../../services/exam/examRepository'
-import type { AutoMapJobStatus, ExamTemplateDetail } from '../../../types/exam.types'
+import type { AutoMapJobStatus, DigitalTextResponse, 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'
@@ -135,6 +136,12 @@ function modelFromTLShape(shape: TLShape): ExamCanvasShapeModel | null {
     responseForm: s.props.responseForm as ExamCanvasShapeModel['responseForm'],
     contextType: s.props.contextType,
     questionId: s.props.questionId ?? null,
+    parentId: s.props.parentId ?? null,
+    isContainer: s.props.isContainer ?? false,
+    depth: s.props.depth,
+    description: s.props.description,
+    linkLabel: s.props.linkLabel,
+    meta: (() => { try { return s.props.metaJson ? JSON.parse(s.props.metaJson) : undefined } catch { return undefined } })(),
     source: s.props.source ?? 'manual',
     confirmed: s.props.confirmed ?? s.props.source !== 'ai',
     confidence: typeof s.props.confidence === 'number' ? s.props.confidence : null,
@@ -147,16 +154,28 @@ function bringDomainShapesToFront(editor: Editor) {
   if (ids.length) try { editor.bringToFront(ids as any) } catch { /* */ }
 }
 
+// Draw order = z-order (tldraw stacks by creation). Backdrops (boundaries, preamble bands, container frames)
+// go first/behind so the figures, responses and parts on top stay hoverable and legible.
+function zPriority(m: ExamCanvasShapeModel): number {
+  if (m.kind === 'boundary') return 0
+  if (m.kind === 'context' && m.contextType === 'preamble') return 1
+  if (m.kind === 'part' && m.isContainer) return 2
+  if (m.kind === 'part') return 3
+  if (m.kind === 'context') return 5   // figures/tables on top so their description tooltip is reachable
+  return 4                              // responses + other regions
+}
+
 function loadShapes(editor: Editor, models: ExamCanvasShapeModel[]) {
   const existing = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type)).map((s) => s.id)
   if (existing.length) editor.deleteShapes(existing)
   if (!models.length) return
-  editor.createShapes(models.map((m) => ({
+  const ordered = [...models].sort((a, b) => zPriority(a) - zPriority(b))
+  editor.createShapes(ordered.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, source: m.source ?? 'manual', confirmed: m.confirmed ?? m.source !== 'ai', confidence: m.confidence ?? undefined, derivation: m.derivation ?? undefined, reviewFlags: m.reviewFlags?.join('|') },
+    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, parentId: m.parentId ?? undefined, isContainer: m.isContainer ?? undefined, depth: m.depth ?? undefined, description: m.description ?? undefined, linkLabel: m.linkLabel ?? undefined, metaJson: m.meta ? JSON.stringify(m.meta) : undefined, domainId: m.id, source: m.source ?? 'manual', confirmed: m.confirmed ?? m.source !== 'ai', confidence: m.confidence ?? undefined, derivation: m.derivation ?? undefined, reviewFlags: m.reviewFlags?.join('|') },
   })))
 }
 
@@ -224,8 +243,25 @@ const ExamTemplateSetupInner: React.FC = () => {
   const [autoMapStatus, setAutoMapStatus] = useState<AutoMapJobStatus | null>(null)
   const [autoMapBusy, setAutoMapBusy] = useState(false)
   const [liveReview, setLiveReview] = useState({ ai: 0, unconfirmed: 0, lowConfidence: 0 })
+  const [digitalText, setDigitalText] = useState<DigitalTextResponse | null>(null)
+  const [digitalOpen, setDigitalOpen] = useState(false)
+  const [digitalBusy, setDigitalBusy] = useState(false)
   const autoMapPollRef = useRef<number | null>(null)
 
+  const openDigitalText = useCallback(async () => {
+    if (!template) return
+    setDigitalBusy(true); setDigitalOpen(true)
+    try {
+      setDigitalText(await examRepository.getDigitalText(template.id))
+    } catch (e) {
+      setDigitalText(null)
+      setError(e instanceof Error ? e.message : 'No digital text yet — run auto-map first.')
+      setDigitalOpen(false)
+    } finally {
+      setDigitalBusy(false)
+    }
+  }, [template])
+
   const refreshReview = useCallback(() => setLiveReview(reviewFromShapes(editorRef.current)), [])
 
   const applyTemplateToCanvas = useCallback((detail: ExamTemplateDetail) => {
@@ -439,6 +475,11 @@ const ExamTemplateSetupInner: React.FC = () => {
         <Chip size="small" color={review.unconfirmed ? 'warning' : review.ai ? 'info' : 'default'} label={review.ai ? `AI review: ${review.unconfirmed} unconfirmed · ${review.lowConfidence} low conf` : 'Manual template'} />
         <Chip size="small" color={dirty ? 'warning' : 'success'} label={dirty ? 'Unsaved' : 'Saved'} />
         {(autoMapBusy || autoMapStatus) && <Chip size="small" color={autoMapStatus?.status === 'failed' ? 'error' : autoMapStatus?.status === 'completed' ? 'success' : 'info'} label={autoMapStatusLabel(autoMapStatus)} />}
+        {(() => {
+          const a = (template as (ExamTemplateDetail & { extraction_meta?: { audit?: { status?: string; cover_total?: number; detected_total?: number } } }) | null)?.extraction_meta?.audit
+          return a?.status ? <Tooltip title="Extraction cover-total reconciliation (detected vs printed maximum)"><Chip size="small" color={a.status === 'ok' ? 'success' : 'warning'} label={`Marks ${a.detected_total ?? '?'}/${a.cover_total ?? '?'}`} /></Tooltip> : null
+        })()}
+        <Button size="small" variant="outlined" startIcon={digitalBusy ? <CircularProgress size={14} /> : <DescriptionIcon fontSize="small" />} onClick={openDigitalText} disabled={digitalBusy || !template}>Digital text</Button>
         <Button size="small" variant="outlined" startIcon={autoMapBusy ? <CircularProgress size={14} /> : <AutoFixHighIcon fontSize="small" />} onClick={autoMapFromPdf} disabled={autoMapBusy || saving || loading || !template || pdfStatus !== 'ready'}>Auto-map from PDF</Button>
         <Button size="small" variant="contained" startIcon={saving ? <CircularProgress size={14} color="inherit" /> : <SaveIcon fontSize="small" />} onClick={save} disabled={saving || loading || !template}>Save</Button>
       </Paper>
@@ -552,6 +593,32 @@ const ExamTemplateSetupInner: React.FC = () => {
       </Box>
 
       {loading && <Box sx={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', bgcolor: 'rgba(15,23,42,.18)', zIndex: 10 }}><CircularProgress /></Box>}
+      <Dialog open={digitalOpen} onClose={() => setDigitalOpen(false)} maxWidth="md" fullWidth>
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <DescriptionIcon fontSize="small" />
+          Digital text
+          {digitalText && <Typography component="span" variant="body2" color="text.secondary">— {digitalText.title} · {digitalText.n_questions}Q · {digitalText.total_marks} marks</Typography>}
+          <Box sx={{ flex: 1 }} />
+          {digitalText && (
+            <Tooltip title="Download markdown">
+              <IconButton size="small" onClick={() => {
+                const blob = new Blob([digitalText.markdown], { type: 'text/markdown' })
+                const url = URL.createObjectURL(blob); const a = document.createElement('a')
+                a.href = url; a.download = `${digitalText.slug}.md`; a.click(); URL.revokeObjectURL(url)
+              }}><SaveIcon fontSize="small" /></IconButton>
+            </Tooltip>
+          )}
+        </DialogTitle>
+        <DialogContent dividers>
+          {digitalBusy ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>
+          ) : digitalText ? (
+            <Box component="pre" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 13, m: 0 }}>{digitalText.markdown}</Box>
+          ) : (
+            <Typography variant="body2" color="text.secondary">No digital text available.</Typography>
+          )}
+        </DialogContent>
+      </Dialog>
       <Snackbar open={!!error} autoHideDuration={8000} onClose={() => setError(null)}><Alert severity="error" onClose={() => setError(null)}>{error}</Alert></Snackbar>
     </Box>
   )

src/pages/exam/setup/examCanvasShapes.tsx

@@ -35,6 +35,12 @@ export type ExamCanvasTLShape = TLBaseBoxShape & {
     responseForm?: string
     contextType?: string
     questionId?: string | null
+    parentId?: string | null
+    isContainer?: boolean
+    depth?: number
+    description?: string
+    linkLabel?: string
+    metaJson?: string
     domainId?: string
     source?: 'manual' | 'ai'
     confirmed?: boolean
@@ -66,6 +72,18 @@ export const canvasShapePalette: Record<ExamCanvasShapeKind, CanvasPaletteEntry>
   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' },
 }
 
+// Human-legible names for the extraction service's response forms — so the canvas SHOWS what was
+// recognised (multiple-choice, draw-on, table…), not just a generic "Response" box.
+const RESPONSE_FORM_LABEL: Record<string, string> = {
+  lines: 'ruled lines',
+  'answer-box': 'answer box',
+  working: 'working space',
+  diagram: 'draw-on',
+  'tick-boxes': 'multiple choice',
+  table: 'table',
+  blanks: 'fill-in',
+}
+
 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); }
@@ -125,43 +143,132 @@ function renderBoundaryLine(shape: ExamCanvasTLShape) {
   )
 }
 
+// Distinct look for a container box (main question / intermediate part). It frames its children rather than
+// filling over them: transparent interior + a coloured border whose hue shifts by nesting depth, so
+// question ⊃ part ⊃ subpart reads as nested frames on the paper.
+const CONTAINER_DEPTH_STROKE = ['#4f46e5', '#0d9488', '#b45309']
+function containerStroke(depth: number) { return CONTAINER_DEPTH_STROKE[Math.min(depth, CONTAINER_DEPTH_STROKE.length - 1)] }
+
+function marksPill(maxMarks: number | undefined) {
+  if (typeof maxMarks !== 'number' || maxMarks <= 0) return null
+  return (
+    <span className="exam-canvas-shape__pill" style={{ fontSize: 11, fontWeight: 900, borderRadius: 999, padding: '2px 7px', display: 'inline-flex', alignItems: 'center', gap: 3 }} title={`${maxMarks} mark${maxMarks === 1 ? '' : 's'}`}>
+      <span aria-hidden="true" style={{ opacity: 0.7 }}>◆</span>{maxMarks}
+    </span>
+  )
+}
+
+function parseMeta(shape: ExamCanvasTLShape): Record<string, any> | null {
+  try { return shape.props.metaJson ? JSON.parse(shape.props.metaJson) : null } catch { return null }
+}
+
+// Draw the recognised answer sub-structure INSIDE a response box, using the box-relative [0,1] coords the
+// contract now carries: numbered sub-answer bands ("suggest two" → 1, 2), per-option MC selection boxes, and
+// the final-answer line's expected quantity/unit.
+function renderResponseSubstructure(shape: ExamCanvasTLShape): React.ReactNode {
+  const m = parseMeta(shape)
+  if (!m) return null
+  const pct = (v: any, d = 0) => `${Math.max(0, Math.min(1, Number(v ?? d))) * 100}%`
+  const els: React.ReactNode[] = []
+  const comps: any[] = Array.isArray(m.components) ? m.components : []
+  comps.forEach((c, i) => {
+    if (i === 0) return   // first band starts at the box top; a divider there is noise
+    els.push(<div key={`cd${i}`} style={{ position: 'absolute', left: 0, right: 0, top: pct(c.rel_y0), borderTop: '1px dashed var(--exam-stroke)', opacity: 0.45 }} />)
+  })
+  comps.forEach((c, i) => els.push(
+    <span key={`cl${i}`} className="exam-canvas-shape__pill" style={{ position: 'absolute', left: 4, top: `calc(${pct(c.rel_y0)} + 2px)`, fontSize: 10, fontWeight: 900, borderRadius: 6, padding: '0 5px', opacity: 0.95 }}>{c.label ?? i + 1}</span>
+  ))
+  const boxes: any[] = Array.isArray(m.boxes) ? m.boxes : []
+  boxes.forEach((b, i) => {
+    const rel = b.rel || {}
+    const filled = Number(b.fill ?? 0) > 0.35
+    els.push(<div key={`bx${i}`} title={`option ${i + 1}${filled ? ' (marked)' : ''}`} style={{ position: 'absolute', left: pct(rel.x0), top: pct(rel.y0), width: pct(Number(rel.x1) - Number(rel.x0)), height: pct(Number(rel.y1) - Number(rel.y0)), border: '1.5px solid var(--exam-stroke)', borderRadius: 3, background: filled ? 'var(--exam-stroke)' : 'transparent', opacity: filled ? 0.5 : 0.85, boxSizing: 'border-box' }} />)
+  })
+  // "tick N" instruction for multiple-choice (select_n = how many boxes to tick)
+  const selectN = Number(m.select_n ?? 0)
+  if (selectN > 0 && boxes.length) {
+    els.push(<span key="tickn" className="exam-canvas-shape__pill" style={{ position: 'absolute', left: 4, top: 2, fontSize: 10, fontWeight: 900, borderRadius: 6, padding: '0 5px', opacity: 0.95 }}>tick {selectN}</span>)
+  }
+  const fal = m.final_answer_line
+  if (fal && (fal.unit || fal.quantity)) {
+    els.push(<span key="fal" className="exam-canvas-shape__pill" style={{ position: 'absolute', right: 4, top: `calc(${pct(fal.rel_y, 0.9)} - 8px)`, maxWidth: 'calc(100% - 8px)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 10, fontWeight: 800, borderRadius: 6, padding: '0 5px', opacity: 0.95 }} title="expected final answer">{[fal.quantity, fal.unit && `(${fal.unit})`].filter(Boolean).join(' ')}</span>)
+  }
+  return els.length ? <>{els}</> : null
+}
+
+// A container question is a BACKDROP, not a big box over the content: the main question (depth 0) relies on
+// its start/end boundary rules for extent and shows only a small corner tab (label + total marks); an
+// intermediate part-group (depth ≥ 1) also gets a faint dashed frame to convey nesting. Non-interactive so it
+// never blocks a hover on the figures/responses on top.
+function renderContainerTab(shape: ExamCanvasTLShape) {
+  const depth = shape.props.depth ?? 0
+  const stroke = containerStroke(depth)
+  const isAiSuggestion = shape.props.source === 'ai' && shape.props.confirmed === false
+  const marks = shape.props.maxMarks
+  const title = provenanceTitle(shape, depth === 0 ? 'Question (container)' : 'Part group (container)')
+  return (
+    <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'none', overflow: 'visible' }}>
+      <style>{shapeCss}</style>
+      {depth > 0 && <div style={{ position: 'absolute', inset: 0, border: `1px dashed ${stroke}`, borderRadius: 12, opacity: 0.3, boxSizing: 'border-box' }} />}
+      <span className="exam-canvas-shape__pill" title={title} style={{ position: 'absolute', left: 0, top: -3, display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 900, borderRadius: 8, padding: '2px 7px', color: stroke, border: `1.5px solid ${stroke}`, background: 'rgba(255,255,255,0.92)', whiteSpace: 'nowrap' }}>
+        <span aria-hidden="true">{isAiSuggestion ? 'AI' : (depth === 0 ? '▣' : '▢')}</span>
+        {shape.props.label}
+        {typeof marks === 'number' && marks > 0 && <span style={{ opacity: 0.85 }}>· {marks}m</span>}
+      </span>
+    </HTMLContainer>
+  )
+}
+
 function renderShape(shape: ExamCanvasTLShape) {
   const kind = shape.props.kind
   const p = canvasShapePalette[kind] ?? canvasShapePalette.response
   const isBoundary = kind === 'boundary'
   const isAiSuggestion = shape.props.source === 'ai' && shape.props.confirmed === false
   if (isBoundary) return renderBoundaryLine(shape)
-  const isAi = shape.props.source === 'ai'
+  const isContainer = shape.props.isContainer === true && kind === 'part'
+  if (isContainer) return renderContainerTab(shape)
+  const isPreamble = kind === 'context' && shape.props.contextType === 'preamble'
+  const depth = shape.props.depth ?? 0
+  const stroke = isContainer ? containerStroke(depth) : p.stroke
+  const darkStroke = isContainer ? containerStroke(depth) : p.darkStroke
   const confidence = confidenceLabel(shape.props.confidence)
   const flags = reviewFlags(shape)
-  const title = provenanceTitle(shape, `${p.label}: ${p.role}`)
+  const roleLabel = isContainer ? (depth === 0 ? 'Question: container' : 'Part: container') : `${p.label}: ${p.role}`
+  const title = shape.props.description ? `${provenanceTitle(shape, roleLabel)} • ${shape.props.description}` : provenanceTitle(shape, roleLabel)
   return (
-    <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'all' }}>
+    <HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: isPreamble ? 'none' : 'all' }}>
       <style>{shapeCss}</style>
       <div
-        className={`exam-canvas-shape exam-canvas-shape--${kind}`}
+        className={`exam-canvas-shape exam-canvas-shape--${kind}${isContainer ? ' exam-canvas-shape--container' : ''}`}
         style={{
-          '--exam-light-stroke': p.stroke,
+          '--exam-light-stroke': stroke,
           '--exam-light-fill': p.fill,
-          '--exam-dark-stroke': p.darkStroke,
+          '--exam-dark-stroke': darkStroke,
           '--exam-dark-fill': p.darkFill,
-          width: '100%', height: '100%', boxSizing: 'border-box', border: `${isBoundary ? 2 : 1.5}px solid var(--exam-stroke)`,
-          borderStyle: isAiSuggestion ? 'dashed' : p.dash ? 'dashed' : 'solid', borderRadius: isBoundary ? 999 : 10,
-          background: isBoundary ? 'transparent' : 'var(--exam-fill)', opacity: isAiSuggestion ? ghostOpacity(shape.props.confidence) : 1, 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,
+          width: '100%', height: '100%', boxSizing: 'border-box', border: `${isContainer ? 2.5 : 1.5}px ${isContainer ? 'solid' : (isAiSuggestion ? 'dashed' : p.dash ? 'dashed' : 'solid')} var(--exam-stroke)`,
+          borderRadius: isContainer ? 14 : 10,
+          background: isContainer ? 'transparent' : 'var(--exam-fill)', opacity: isAiSuggestion ? ghostOpacity(shape.props.confidence) : 1, color: 'var(--exam-stroke)', fontFamily: 'Inter, system-ui, sans-serif',
+          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
+          padding: 8, boxShadow: isContainer ? 'none' : '0 10px 22px rgba(15,23,42,0.10)', overflow: 'hidden', gap: 6,
         } as React.CSSProperties}
         aria-label={title}
         title={title}
       >
-        <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">{isAiSuggestion ? 'AI' : p.icon}</span>
+        {kind === 'response' && renderResponseSubstructure(shape)}
+        <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, maxWidth: 'calc(100% - 60px)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', zIndex: 1 }}>
+          <span aria-hidden="true">{isAiSuggestion ? 'AI' : (isContainer ? (depth === 0 ? '▣' : '▢') : p.icon)}</span>
           {shape.props.label || p.label}
         </span>
-        {confidence && <span className="exam-canvas-shape__pill exam-canvas-shape__confidence" style={{ fontSize: 11, fontWeight: 900, borderRadius: 999, padding: '2px 7px' }}>{confidence}</span>}
-        {!confidence && !isBoundary && shape.props.questionId && <span className="exam-canvas-shape__pill" style={{ fontSize: 11, fontWeight: 800, borderRadius: 999, padding: '2px 7px' }}>Attached</span>}
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+          {marksPill(shape.props.maxMarks)}
+          {confidence && <span className="exam-canvas-shape__pill exam-canvas-shape__confidence" style={{ fontSize: 11, fontWeight: 900, borderRadius: 999, padding: '2px 7px' }}>{confidence}</span>}
+          {!confidence && !marksPill(shape.props.maxMarks) && shape.props.questionId && kind !== 'context' && <span className="exam-canvas-shape__pill" style={{ fontSize: 11, fontWeight: 800, borderRadius: 999, padding: '2px 7px' }}>Attached</span>}
+        </span>
         {flags.length > 0 && <span className="exam-canvas-shape__pill exam-canvas-shape__flag" style={{ position: 'absolute', left: 8, bottom: 8, fontSize: 10, fontWeight: 900, borderRadius: 999, padding: '1px 6px', maxWidth: 'calc(100% - 16px)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{flags.slice(0, 2).join(' · ')}</span>}
-        {isBoundary && <span className="exam-canvas-shape__pill" style={{ fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px' }}>pair across pages</span>}
+        {kind === 'response' && shape.props.responseForm && <span className="exam-canvas-shape__pill" style={{ position: 'absolute', right: 8, bottom: 8, fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px', opacity: 0.9 }}>{RESPONSE_FORM_LABEL[shape.props.responseForm] ?? shape.props.responseForm}</span>}
+        {/* Context region: a visible tether to its owning question + the figure kind. */}
+        {kind === 'context' && shape.props.linkLabel && <span className="exam-canvas-shape__pill" style={{ position: 'absolute', left: 8, bottom: 8, fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px', opacity: 0.95 }}>→ {shape.props.linkLabel}</span>}
+        {kind === 'context' && shape.props.contextType && shape.props.contextType !== 'generic' && <span className="exam-canvas-shape__pill" style={{ position: 'absolute', right: 8, bottom: 8, fontSize: 10, fontWeight: 800, borderRadius: 999, padding: '1px 6px', opacity: 0.9 }}>{shape.props.contextType}</span>}
       </div>
     </HTMLContainer>
   )
@@ -172,7 +279,7 @@ function defaultProps(kind: ExamCanvasShapeKind, w: number, h: number) {
   return { w, h, label: p.label, kind, responseForm: kind === 'response' ? 'lines' : undefined, contextType: kind === 'context' ? 'generic' : undefined, source: 'manual' as const, confirmed: true }
 }
 
-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), source: T.optional(T.string), confirmed: T.optional(T.boolean), confidence: T.optional(T.number), derivation: T.optional(T.string), reviewFlags: T.optional(T.string) }
+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), parentId: T.optional(T.string), isContainer: T.optional(T.boolean), depth: T.optional(T.number), description: T.optional(T.string), linkLabel: T.optional(T.string), metaJson: T.optional(T.string), domainId: T.optional(T.string), source: T.optional(T.string), confirmed: T.optional(T.boolean), confidence: T.optional(T.number), derivation: T.optional(T.string), reviewFlags: 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> {

src/services/exam/examRepository.ts

@@ -13,9 +13,14 @@ import { supabase } from '../../supabaseClient';
 import type {
   AutoMapJobStatus,
   AutoMapResponse,
+  BankResponse,
+  CorpusResponse,
+  DigitalTextResponse,
   BatchQueueResponse,
   BatchResultsResponse,
   CreateBatchPayload,
+  CreateCustomPaperPayload,
+  CreateCustomPaperResult,
   CreateTemplatePayload,
   ExamBoundary,
   ExamQuestion,
@@ -28,6 +33,7 @@ import type {
   Neo4jSyncResult,
   PatchQuestionPayload,
   SpecPoint,
+  StudentSubmission,
   TemplateReplacePayload,
   UpdateTemplateMetaPayload,
 } from '../../types/exam.types';
@@ -159,6 +165,12 @@ export const examRepository = {
     return res.data.templates ?? [];
   },
 
+  async getDigitalText(templateId: string): Promise<DigitalTextResponse> {
+    const headers = await authHeaders();
+    const res = await axios.get<DigitalTextResponse>(`${EXAM_BASE}/templates/${templateId}/digital-text`, { headers });
+    return res.data;
+  },
+
   async getTemplate(templateId: string): Promise<ExamTemplateDetail> {
     const headers = await authHeaders();
     const res = await axios.get<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, { headers });
@@ -298,6 +310,42 @@ export const examRepository = {
     const res = await axios.put(`${EXAM_BASE}/marks/${markId}`, payload, { headers });
     return res.data;
   },
+
+  async getCorpus(): Promise<CorpusResponse> {
+    const headers = await authHeaders();
+    const res = await axios.get<CorpusResponse>(`${EXAM_BASE}/corpus`, { headers });
+    return res.data;
+  },
+
+  async getBank(params: { specRef?: string; subject?: string } = {}): Promise<BankResponse> {
+    const headers = await authHeaders();
+    const res = await axios.get<BankResponse>(`${EXAM_BASE}/bank`, {
+      headers,
+      params: { spec_ref: params.specRef, subject: params.subject },
+    });
+    return res.data;
+  },
+
+  async createCustomPaper(payload: CreateCustomPaperPayload): Promise<CreateCustomPaperResult> {
+    const headers = await authHeaders();
+    const res = await axios.post<CreateCustomPaperResult>(`${EXAM_BASE}/custom-papers`, payload, { headers });
+    return res.data;
+  },
+
+  async uploadScan(
+    batchId: string,
+    file: File,
+    opts: { studentId?: string; matchingMethod?: 'manual' | 'ordered' } = {},
+  ): Promise<StudentSubmission> {
+    const headers = await authHeaders();
+    const form = new FormData();
+    form.append('file', file);
+    form.append('matching_method', opts.matchingMethod ?? 'ordered');
+    if (opts.studentId) form.append('student_id', opts.studentId);
+    // Let axios set the multipart Content-Type + boundary (only Authorization is forwarded).
+    const res = await axios.post<StudentSubmission>(`${EXAM_BASE}/batches/${batchId}/scans`, form, { headers });
+    return res.data;
+  },
 };
 
 export default examRepository;

src/types/exam.types.ts

@@ -91,6 +91,10 @@ export interface ExamQuestion {
   spec_ref: string | null;
   bounds?: Record<string, number> | null;
   page?: number | null;
+  /** Analyse contract v2 (migration 78): primary command verb for a leaf part. */
+  command_word?: string | null;
+  /** Analyse contract v2 (migration 78): stem prose for the outline view. */
+  preamble?: Record<string, unknown> | null;
   source: ExamTemplateSource;
   confirmed: boolean;
   confidence: number | null;
@@ -116,6 +120,8 @@ export interface ExamResponseArea {
   kind: ExamResponseAreaKind;
   response_form: string | null;
   context_type?: string | null;
+  /** Rich recognition payload (migration 75): figure name/description, OMR box geometry, unit/quantity, table… */
+  meta?: Record<string, unknown> | null;
   source: ExamTemplateSource;
   confirmed: boolean;
   confidence: number | null;
@@ -197,6 +203,7 @@ export interface TemplateReplacePayload {
     kind: ExamResponseArea['kind'];
     response_form?: string | null;
     context_type?: string | null;
+    meta?: Record<string, unknown> | null;
     source?: 'manual' | 'ai';
     confirmed?: boolean;
     confidence?: number | null;
@@ -338,3 +345,71 @@ export interface MarkUpsertPayload {
   comment?: string;
   confirmed?: boolean;
 }
+
+// ── Mode-3 question bank + custom-paper assembly ──────────────────────────────
+export interface BankQuestion {
+  id: string;
+  template_id: string;
+  label: string | null;
+  max_marks: number | null;
+  answer_type: string | null;
+  spec_ref: string | null;
+  bounds: Record<string, number> | null;
+  page: number | null;
+  paper: { id: string | null; title: string | null; subject: string | null; exam_code: string | null };
+}
+
+export interface BankResponse {
+  questions: BankQuestion[];
+  n: number;
+  facets: { spec_ref: Record<string, number>; subject: Record<string, number> };
+}
+
+export interface CreateCustomPaperPayload {
+  title: string;
+  subject?: string;
+  question_ids: string[];
+}
+
+export interface CreateCustomPaperResult {
+  id: string;
+  title: string;
+  subject: string | null;
+  n_questions: number;
+  n_response_areas: number;
+}
+
+// ── Exam-bank corpus coverage (state of the collected bank) ───────────────────
+export type CorpusDocType = 'QP' | 'MS' | 'ER';
+export interface CorpusPaper {
+  paper_code: string | null;
+  session: string | null;
+  tier: string | null;
+  docs: Partial<Record<CorpusDocType, boolean>>;
+  exam_codes: Partial<Record<CorpusDocType, string>>;
+}
+export interface CorpusSpec {
+  spec_code: string;
+  subject: string;
+  level: string;
+  board: string;
+  first_teach: string | null;
+  n_papers: number;
+  counts: Record<CorpusDocType, number>;
+  papers: CorpusPaper[];
+}
+export interface CorpusBoard { board: string; n_specs: number; specs: CorpusSpec[] }
+export interface CorpusResponse {
+  totals: { specs: number; papers: number; sessions: number; QP: number; MS: number; ER: number };
+  boards: CorpusBoard[];
+}
+
+// ── Digital-replica markdown (P4) ─────────────────────────────────────────────
+export interface DigitalTextResponse {
+  slug: string;
+  title: string;
+  n_questions: number;
+  total_marks: number;
+  markdown: string;
+  questions: { label: string; marks: number | null; markdown: string }[];
+}

src/utils/exam-canvas/model.test.ts

@@ -92,4 +92,59 @@ describe('exam setup canvas serialization', () => {
     expect(payload.boundaries.find((b) => b.id === '44444444-4444-4444-8444-444444444444')).toMatchObject({ source: 'ai', confirmed: false, confidence: 0.62, derivation: 'g6' })
   })
 
+  it('never drops a response region that has no enclosing part — it falls back to a question', () => {
+    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: 120, label: 'Q1(a)', maxMarks: 3 },
+      { id: 'resp-far', kind: 'response', x: 100, y: 520, w: 300, h: 90, responseForm: 'lines' }, // outside the part box
+    ])
+    const part = payload.questions.find((q) => !q.is_container)
+    expect(payload.response_areas).toHaveLength(1)               // previously dropped (no containing part)
+    expect(payload.response_areas[0].question_id).toBe(part?.id) // falls back to the part, not lost
+  })
+
+  it('preserves a 3-deep question → part → subpart chain across a round-trip save', () => {
+    const Q = '11111111-1111-4111-8111-111111111111'   // container, depth 0
+    const P = '22222222-2222-4222-8222-222222222222'   // container part, depth 1
+    const S = '33333333-3333-4333-8333-333333333333'   // leaf subpart, depth 2
+    const detail: ExamTemplateDetail = {
+      ...template,
+      questions: [
+        { id: Q, template_id: 'tpl-1', parent_id: null, label: 'Q1', order: 0, max_marks: 6, answer_type: null, mcq_options: null, mark_scheme: {}, is_container: true, spec_ref: null, bounds: { x: 40, y: 80, w: 700, h: 600 }, page: 1, source: 'ai', confirmed: false, confidence: 0.9, derivation: 'svc' },
+        { id: P, template_id: 'tpl-1', parent_id: Q, label: 'Q1(a)', order: 1, max_marks: 6, answer_type: null, mcq_options: null, mark_scheme: {}, is_container: true, spec_ref: null, bounds: { x: 60, y: 120, w: 660, h: 500 }, page: 1, source: 'ai', confirmed: false, confidence: 0.9, derivation: 'svc' },
+        { id: S, template_id: 'tpl-1', parent_id: P, label: 'Q1(a)(i)', order: 2, max_marks: 3, answer_type: 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: { x: 80, y: 160, w: 620, h: 200 }, page: 1, source: 'ai', confirmed: false, confidence: 0.9, derivation: 'svc' },
+      ],
+      response_areas: [],
+      boundaries: [],
+    }
+    const shapes = shapesFromTemplate(detail)
+    // all three tiers are drawn (containers are no longer skipped), with depth + container flags
+    expect(shapes.filter((s) => s.kind === 'part')).toHaveLength(3)
+    expect(shapes.find((s) => s.id === S)).toMatchObject({ isContainer: false, depth: 2, parentId: P })
+    expect(shapes.find((s) => s.id === Q)).toMatchObject({ isContainer: true, depth: 0 })
+
+    const payload = serializeCanvasShapes(template, shapes)
+    const byId = new Map(payload.questions.map((q) => [q.id, q]))
+    expect(payload.questions).toHaveLength(3)
+    expect(byId.get(Q)?.parent_id ?? null).toBeNull()
+    expect(byId.get(P)?.parent_id).toBe(Q)          // middle tier survives — not flattened away
+    expect(byId.get(S)?.parent_id).toBe(P)          // 3-deep chain intact
+    expect(byId.get(Q)?.is_container).toBe(true)
+    expect(byId.get(S)?.is_container).toBe(false)
+    expect(byId.get(S)?.max_marks).toBe(3)
+  })
+
+  it('respects a region persisted question over geometric nearest when no part contains it', () => {
+    const A = '11111111-1111-4111-8111-111111111111'
+    const B = '22222222-2222-4222-8222-222222222222'
+    const R = '33333333-3333-4333-8333-333333333333'
+    const payload = serializeCanvasShapes(template, [
+      { id: 'pa', kind: 'part', x: 100, y: 120, w: 300, h: 80, label: 'A', questionId: A },
+      { id: 'pb', kind: 'part', x: 100, y: 500, w: 300, h: 80, label: 'B', questionId: B },
+      { id: R, kind: 'response', x: 120, y: 260, w: 200, h: 60, questionId: B }, // contained by neither; nearest is A
+    ])
+    expect(payload.response_areas.find((r) => r.id === R)?.question_id).toBe(B) // persisted B wins over nearest A
+  })
+
 })

src/utils/exam-canvas/model.ts

@@ -26,6 +26,19 @@ export interface ExamCanvasShapeModel {
   responseForm?: 'lines' | 'answer-box' | 'working' | 'diagram' | 'tick-boxes' | 'table' | 'blanks'
   contextType?: string
   questionId?: string | null
+  /** Tree parent (container question) id — preserved across a round-trip so N-deep structure survives a save. */
+  parentId?: string | null
+  /** True for a container question (main question / intermediate part) drawn as a nesting box. */
+  isContainer?: boolean
+  /** 0 = main question, 1 = part, 2 = subpart … drives nesting styling. */
+  depth?: number
+  /** Figure/table caption for a context region (shown as a tooltip). */
+  description?: string
+  /** Label of the owning question, for a context region's visible tether pill. */
+  linkLabel?: string
+  /** Rich recognition detail (exam_response_areas.meta): answer components, MC option boxes, final-answer
+   * line unit/quantity, figure name/description. Carried through so the canvas can draw sub-structure. */
+  meta?: Record<string, unknown> | null
   source?: ExamTemplateSource
   confirmed?: boolean
   confidence?: number | null
@@ -118,43 +131,102 @@ export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: Exam
   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')
+  // 'part' shapes carry the whole question tree: containers (isContainer) + leaf parts/subparts. They are the
+  // authoritative structure — the boundary-pair synthesis below is only a fallback for the manual workflow.
+  const structural = shapes.filter((s) => s.kind === 'part')
+  const containerShapes = structural.filter((s) => s.isContainer)
   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 }> = []
 
+  // Stable question id per structural shape — prefer the persisted domain id so a re-save keeps join keys.
+  const idOf = new Map<string, string>()
+  for (const s of structural) idOf.set(s.id, isUuid(s.questionId) ? (s.questionId as string) : isUuid(s.id) ? s.id : newDomainId())
+  const emittedIds = new Set<string>(idOf.values())
+
+  // Boundary pairs: attach each pair to the container shape it spans (AI/structured path), else SYNTHESIZE a
+  // container question from the pair (pure manual authoring, no container box drawn). v1 always synthesized —
+  // which overwrote real containers and flattened the tree.
   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: {}, source: persistedSource(top), confirmed: persistedConfirmed(top), confidence: persistedConfidence(top), derivation: persistedDerivation(top) })
+    const label = top.label?.replace(/\s+(start|end)$/i, '') || bottom.label?.replace(/\s+(start|end)$/i, '') || `Q${bands.length + 1}`
+    // A container box whose vertical extent spans this start/end pair owns the boundary (structured path);
+    // otherwise the pair itself defines a container (manual path).
+    const pairTop = Math.min(top.y, bottom.y)
+    const pairBottom = Math.max(top.y, bottom.y)
+    const cover = containerShapes.find((c) => c.y <= pairTop + 4 && c.y + c.h >= pairBottom - 4)
+    let questionId: string
+    if (cover) {
+      questionId = idOf.get(cover.id) as string
+    } else {
+      questionId = isUuid(top.questionId) ? (top.questionId as string) : isUuid(bottom.questionId) ? (bottom.questionId as string) : newDomainId()
+      questions.push({ id: questionId, label, order: questions.length, max_marks: 0, is_container: true, mark_scheme: {}, source: persistedSource(top), confirmed: persistedConfirmed(top), confidence: persistedConfidence(top), derivation: persistedDerivation(top) })
+      emittedIds.add(questionId)
+    }
     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: boundaryBounds(b, pages), source: persistedSource(b), confirmed: persistedConfirmed(b), confidence: persistedConfidence(b), derivation: persistedDerivation(b) })
     }
   }
 
-  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), source: persistedSource(part), confirmed: persistedConfirmed(part), confidence: persistedConfidence(part), derivation: persistedDerivation(part) })
-  })
+  // Resolve a structural shape's parent: the persisted parent (if still emitted) wins — this is what keeps a
+  // 3-deep subpart→part→question chain intact across a save. Manually-drawn shapes with no persisted parent
+  // fall back to geometry: the deepest container box that contains them, else the boundary band around them.
+  const resolveParent = (s: ExamCanvasShapeModel): string | null => {
+    if (isUuid(s.parentId) && emittedIds.has(s.parentId as string)) return s.parentId as string
+    const containing = containerShapes
+      .filter((c) => c.id !== s.id && contains(bounds(c), bounds(s)))
+      .sort((a, b) => (b.depth ?? 0) - (a.depth ?? 0) || (a.w * a.h) - (b.w * b.h))
+    if (containing.length) return idOf.get(containing[0].id) ?? null
+    const band = bands.find((bd) => bandContains(bd.top, bd.bottom, s))
+    return band?.questionId ?? null
+  }
 
+  const partQuestionIds = new Map<string, string>()
+  const structuralSorted = [...structural].sort((a, b) => (a.depth ?? 0) - (b.depth ?? 0) || (a.y - b.y) || (a.x - b.x))
+  structuralSorted.forEach((part, index) => {
+    const qid = idOf.get(part.id) as string
+    partQuestionIds.set(part.id, qid)
+    questions.push({ id: qid, parent_id: resolveParent(part), label: part.label || (part.isContainer ? `Q${index + 1}` : `Part ${index + 1}`), order: index, max_marks: Number(part.maxMarks ?? 0), answer_type: part.isContainer ? null : (part.answerType ?? 'written'), mcq_options: null, mark_scheme: {}, is_container: !!part.isContainer, spec_ref: null, bounds: bounds(part), page: pageForShape(part, pages), source: persistedSource(part), confirmed: persistedConfirmed(part), confidence: persistedConfidence(part), derivation: persistedDerivation(part) })
+  })
+  const parts = structural
+
+  // Resolve each region's owner question. Order: current geometric containment (a user who drags a
+  // region into a part re-attaches it) → the PERSISTED attachment if it still points at a saved
+  // question (survives pixel-overflow drift and regions with no enclosing part) → nearest part on the
+  // page → first part → first question of any kind. exam_response_areas.question_id is NOT NULL, so we
+  // never silently drop a region while any question exists (only a template with zero questions can).
+  const questionIds = new Set(questions.map((q) => q.id))
   const response_areas: TemplateReplacePayload['response_areas'] = []
+  // Prefer the DEEPEST (smallest) containing structural box so a region lands on its leaf part, not the
+  // enclosing container. Leaf parts win over containers at equal containment.
+  const deepestContainer = (region: ExamCanvasShapeModel): ExamCanvasShapeModel | undefined =>
+    parts
+      .filter((part) => part.id !== region.id && contains(bounds(part), bounds(region)))
+      .sort((a, b) => Number(!!a.isContainer) - Number(!!b.isContainer) || (a.w * a.h) - (b.w * b.h))[0]
   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
+    const containingPart = deepestContainer(region)
+    const persisted = isUuid(region.questionId) && questionIds.has(region.questionId) ? region.questionId : undefined
+    const nearestLeaf = parts.filter((p) => !p.isContainer).find((part) => pageForShape(part, pages) === pageForShape(region, pages)) ?? parts.find((p) => !p.isContainer) ?? parts[0]
+    const questionId =
+      (containingPart && partQuestionIds.get(containingPart.id))
+      || persisted
+      || (nearestLeaf && partQuestionIds.get(nearestLeaf.id))
+      || questions[0]?.id
     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: persistedSource(region), confirmed: persistedConfirmed(region), confidence: persistedConfidence(region), mark_subtype: null, derivation: persistedDerivation(region) })
+    // Carry rich recognition detail through the save so it survives a round-trip (the replace endpoint
+    // persists exam_response_areas.meta): answer components / MC boxes / final-answer for responses, and the
+    // figure name + caption for context regions.
+    const carried = (region.meta && typeof region.meta === 'object') ? region.meta as Record<string, unknown> : undefined
+    const meta = kind === 'context' && (region.label || region.description)
+      ? { ...(carried ?? {}), name: region.label || carried?.name, description: region.description || carried?.description }
+      : carried
+    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, meta, source: persistedSource(region), confirmed: persistedConfirmed(region), confidence: persistedConfidence(region), mark_subtype: null, derivation: persistedDerivation(region) })
   }
 
   return { meta: { title: template.title, subject: template.subject ?? undefined, page_count: template.page_count ?? undefined, status: template.status }, questions, response_areas, boundaries, layout: template.layout ?? [] }
@@ -163,20 +235,35 @@ export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: Exam
 export function shapesFromTemplate(detail: ExamTemplateDetail, pages?: CanvasPageGeometry[]): ExamCanvasShapeModel[] {
   const shapes: ExamCanvasShapeModel[] = []
   const questions = new Map(detail.questions.map((q) => [q.id, q]))
+  const depthOf = (id: string | null | undefined, guard = 0): number => {
+    const q = id ? questions.get(id) : undefined
+    return !q || !q.parent_id || guard > 8 ? 0 : 1 + depthOf(q.parent_id, guard + 1)
+  }
   for (const b of detail.boundaries ?? []) {
     const page = pageGeometry((b.page_index ?? 0) + 1, pages)
     // Boundary rows are y-lines. The old bounds rect is vestigial: keep y/domain ids,
     // but render and save a full rendered-page-width horizontal rule.
     shapes.push({ id: b.id, kind: 'boundary', x: page.x, y: Number(b.y), w: page.w, h: 8, label: b.label ?? undefined, questionId: b.question_id, source: b.source, confirmed: b.confirmed, confidence: b.confidence, derivation: b.derivation })
   }
+  // Draw the WHOLE tree that has geometry: containers (main questions / intermediate parts) AND leaf parts,
+  // each carrying its parent id + depth so nesting renders and a save preserves the N-deep chain. A question
+  // with no bounds still can't be drawn (legacy data) — it falls back to boundary-band synthesis on save.
   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 as ExamCanvasShapeModel['answerType']) ?? 'written', questionId: q.id, source: q.source, confirmed: q.confirmed, confidence: q.confidence, derivation: q.derivation })
+    if (!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.is_container ? undefined : ((q.answer_type as ExamCanvasShapeModel['answerType']) ?? 'written'), questionId: q.id, parentId: q.parent_id, isContainer: q.is_container, depth: depthOf(q.id), source: q.source, confirmed: q.confirmed, confidence: q.confidence, derivation: q.derivation })
   }
   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 as ExamCanvasShapeModel['responseForm']) ?? undefined, contextType: r.context_type ?? undefined, questionId: r.question_id, source: r.source, confirmed: r.confirmed, confidence: r.confidence, derivation: r.derivation })
+    const meta = ((r as { meta?: Record<string, unknown> }).meta) ?? {}
+    const name = typeof meta.name === 'string' ? meta.name : undefined
+    const description = typeof meta.description === 'string' ? meta.description : undefined
+    // A context region is NAMED by its figure/table (was an anonymous purple box). Response/other regions keep
+    // the "→ owning question" label so their link is legible.
+    const label = r.kind === 'context'
+      ? (name || (r.context_type && r.context_type !== 'generic' ? r.context_type : 'Context'))
+      : (q ? `→ ${q.label}` : r.kind)
+    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, description, linkLabel: q?.label, meta: (r as { meta?: Record<string, unknown> }).meta ?? undefined, responseForm: (r.response_form as ExamCanvasShapeModel['responseForm']) ?? undefined, contextType: r.context_type ?? undefined, questionId: r.question_id, source: r.source, confirmed: r.confirmed, confidence: r.confidence, derivation: r.derivation })
   }
   return addCheapReviewFlags(shapes, pages)
 }
@@ -201,7 +288,9 @@ function addCheapReviewFlags(shapes: ExamCanvasShapeModel[], pages?: CanvasPageG
     if (typeof shape.confidence === 'number' && shape.confidence < 0.7) flags.push('low confidence')
     if ((shape.kind === 'part' || shape.kind === 'question_number') && looksUncertainLabel(shape.label)) flags.push('uncertain question label')
     if (shape.kind === 'part' && (!shape.maxMarks || shape.maxMarks <= 0) && !markAreasByQuestion.has(shape.questionId ?? shape.id)) flags.push('missing marks')
-    const samePageOverlap = shapes.some((other, otherIndex) => otherIndex !== index && shape.kind !== 'boundary' && other.kind !== 'boundary' && pageForShape(shape, pages) === pageForShape(other, pages) && overlaps(shape, other) && (shape.kind === other.kind || (!contains(bounds(shape), bounds(other)) && !contains(bounds(other), bounds(shape)))))
+    // Containers are MEANT to enclose their children, so never flag them (or their children) for overlap;
+    // flag only genuine partial overlaps between non-container shapes where neither contains the other.
+    const samePageOverlap = !shape.isContainer && shape.kind !== 'boundary' && shapes.some((other, otherIndex) => otherIndex !== index && !other.isContainer && other.kind !== 'boundary' && pageForShape(shape, pages) === pageForShape(other, pages) && overlaps(shape, other) && !contains(bounds(shape), bounds(other)) && !contains(bounds(other), bounds(shape)))
     if (samePageOverlap) flags.push('overlapping shapes')
     return flags.length ? { ...shape, reviewFlags: flags } : shape
   })