fix: final review fixes — key props, fetch guard, highlightCode placeholder strategy

- Add key={q.id} to QuestionRenderer in ExamRunner and Results to reset
  component state (Match activeLeft, OrderQuestion init) between questions
- Add r.ok check in Landing.loadSample to surface HTTP errors before JSON parse
- Add validateExam call in loadSample (was missing — could pass malformed JSON)
- Rewrite highlightCode with placeholder strategy: extract comment/string spans
  before applying keyword/number/fn regexes so later passes don't corrupt
  previously-injected span attributes; use PUA char + word-wrapped index
  to avoid SonarLint S6324 and prevent digit regex matching index numbers
- Change Landing dropzone from div[role=button] to native button (S6819)
- Change sample cards from div[onClick] to button elements (S6848/S1082)
- Wrap Landing Props in Readonly<> (S6759)

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

frontend/src/components/ExamRunner.tsx

@@ -136,7 +136,7 @@ export default function ExamRunner({ exam, state, setState, onSubmit, onExit }:
 
         <Tex tag="div" className="q-prompt">{q.prompt}</Tex>
         <QuestionMedia q={q} />
-        <QuestionRenderer q={q} value={answers[q.id]} onChange={setAnswer} locked={graded && q.type !== 'essay'} graded={graded} />
+        <QuestionRenderer key={q.id} q={q} value={answers[q.id]} onChange={setAnswer} locked={graded && q.type !== 'essay'} graded={graded} />
 
         {graded && result && q.type !== 'essay' && (
           <div className={`feedback ${result.correct ? 'correct' : 'wrong'}`}>

frontend/src/components/Landing.tsx

@@ -18,7 +18,7 @@ const SAMPLES = [
   { path: '/samples/mixed-demo.json', title: 'Mixed Demo — Every Question Type', meta: '4 questions · Untimed · Media', mark: '◇' },
 ]
 
-export default function Landing({ onLoadExam, history, onResume, onClearHistory, onReviewAttempt }: Props) {
+export default function Landing({ onLoadExam, history, onResume, onClearHistory, onReviewAttempt }: Readonly<Props>) {
   const [err, setErr] = useState<string | null>(null)
   const [dragOver, setDragOver] = useState(false)
   const fileRef = useRef<HTMLInputElement>(null)
@@ -40,6 +40,7 @@ export default function Landing({ onLoadExam, history, onResume, onClearHistory,
     setErr(null)
     try {
       const r = await fetch(path)
+      if (!r.ok) throw new Error(`${r.status} ${r.statusText}`)
       const data = await r.json() as unknown
       const msg = validateExam(data)
       if (msg) throw new Error(msg)
@@ -112,14 +113,14 @@ export default function Landing({ onLoadExam, history, onResume, onClearHistory,
         <div className="samples">
           <h4>Try a sample</h4>
           {SAMPLES.map((s) => (
-            <div key={s.path} className="sample" onClick={() => void loadSample(s.path)}>
+            <button key={s.path} type="button" className="sample" onClick={() => void loadSample(s.path)}>
               <div className="sample-mark serif" style={{ fontSize: 18 }}>{s.mark}</div>
               <div className="sample-body">
                 <div className="sample-title">{s.title}</div>
                 <div className="sample-meta">{s.meta}</div>
               </div>
               <div className="sample-arrow">→</div>
-            </div>
+            </button>
           ))}
         </div>
       </div>

frontend/src/components/Results.tsx

@@ -113,7 +113,7 @@ export default function Results({ exam, state, onRestart, onExit, reviewOnly }:
                   <Tex>{g.q.prompt}</Tex>
                 </div>
                 <QuestionMedia q={g.q} />
-                <QuestionRenderer q={g.q} value={g.userAnswer} onChange={() => {}} locked graded />
+                <QuestionRenderer key={g.q.id} q={g.q} value={g.userAnswer} onChange={() => {}} locked graded />
                 {g.q.explanation && (
                   <div className="feedback" style={{ marginTop: 24 }}>
                     <div className="feedback-label">Explanation</div>