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>

frontend/src/utils/latex.ts

@@ -43,10 +43,26 @@ export const renderLatex = (text: string): string => {
 export const highlightCode = (code: string, _lang: string): string => {
   // escapeHtml runs first — no raw user content reaches the span injection
   const escaped = escapeHtml(code)
-  return escaped
+  const spans: string[] = []
-    .replace(/(\/\/[^\n]*|#[^\n]*)/g, '<span class="cm-comment">$1</span>')
+
-    .replace(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, '<span class="cm-string">$1</span>')
+  // Extract comments and strings into placeholders before applying keyword/number/fn regexes
-    .replace(/\b(function|return|if|else|const|let|var|for|while|import|export|from|class|new|this|def|print|in|not|and|or|True|False|None|null|undefined|true|false)\b/g, '<span class="cm-keyword">$1</span>')
+  // so later passes don't corrupt previously-injected span tag attributes.
-    .replace(/\b(\d+(?:\.\d+)?)\b/g, '<span class="cm-number">$1</span>')
+  //  is a Unicode private-use-area char that never appears in source code.
-    .replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*(?=\()/g, '<span class="cm-fn">$1</span>')
+  // Word chars around the index (e.g. _HL0_) prevent \b(\d+)\b from matching the index digits.
+  let result = escaped
+    .replaceAll(/(\/\/[^\n]*|#[^\n]*)/g, (m) => {
+      const i = spans.length
+      spans.push(`<span class="cm-comment">${m}</span>`)
+      return `_HL${i}_`
+    })
+    .replaceAll(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, (m) => {
+      const i = spans.length
+      spans.push(`<span class="cm-string">${m}</span>`)
+      return `_HL${i}_`
+    })
+    .replaceAll(/\b(function|return|if|else|const|let|var|for|while|import|export|from|class|new|this|def|print|in|not|and|or|True|False|None|null|undefined|true|false)\b/g, '<span class="cm-keyword">$1</span>')
+    .replaceAll(/\b(\d+(?:\.\d+)?)\b/g, '<span class="cm-number">$1</span>')
+    .replaceAll(/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*(?=\()/g, '<span class="cm-fn">$1</span>')
+
+  return result.replaceAll(/_HL(\d+)_/g, (_, i) => spans[Number(i)])
 }