Mode-3: crop thumbnails on question bank cards

Render a preview per bank question, client-side, from the source PDF cropped to
the question's bounds — makes the bank visually browsable like the spike cockpit.

bankCrops.ts: renders each template's PDF once (cached) via the existing pdf.js
loader (already at the 780px coordinate space the bounds live in), then crops the
page image to (bounds.x, bounds.y - pageTop, w, h) → a small PNG data-URL; decoded
page images are cached too. QuestionBankPage: a lazy <QuestionCrop> at the top of
each card (spinner → image, or "no preview" when a question has no bounds/PDF).

No API/infra change. tsc clean.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

src/pages/exam/QuestionBankPage.tsx

@@ -11,6 +11,27 @@ 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();
@@ -133,6 +154,7 @@ const QuestionBankPage: React.FC = () => {
               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>