From 54c337563988720dab4e815853cb05048cb43cd1 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:11:09 +0800
Subject: [PATCH 01/45] feat(grading): add interactive AI comment selection and
 word-level diffing

---
 src/commons/sagas/RequestsSaga.ts             |  24 +++
 .../subcomponents/GradingCommentSelector.tsx  | 191 ++++++++++++++++--
 .../grading/subcomponents/GradingEditor.tsx   |  74 ++++++-
 src/styles/GradingCommentSelector.module.scss |  73 ++++++-
 4 files changed, 335 insertions(+), 27 deletions(-)

diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 3f0bf79aeb..f6ea8c0531 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1585,6 +1585,30 @@ export const saveFinalComment = async (
   return resp;
 };
 
+export const saveChosenComments = async (
+  tokens: Tokens,
+  submissionId: number,
+  questionId: number,
+  answerId: number,
+  selectedIndices: number[],
+  edits: Record<number, string>
+): Promise<Response | null> => {
+  const resp = await request(
+    `${courseId()}/admin/save-chosen-comments/${submissionId}/${questionId}`,
+    'POST',
+    {
+      body: {
+        answer_id: answerId,
+        selected_indices: selectedIndices,
+        edits: edits
+      },
+      ...tokens
+    }
+  );
+
+  return resp;
+};
+
 /**
  * GET /courses/{courseId}/admin/users
  */
diff --git a/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx b/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
index fb9a9cfc64..676baa5c02 100644
--- a/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
@@ -1,14 +1,143 @@
-import { H5, NonIdealState, Spinner } from '@blueprintjs/core';
-import React from 'react';
+import { Button, Checkbox, H5, NonIdealState, Spinner, TextArea } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useCallback, useState } from 'react';
 import styles from 'src/styles/GradingCommentSelector.module.scss';
 
+type DiffOp = { op: 'eq' | 'add' | 'del'; text: string };
+
 type Props = {
   comments: string[];
   isLoading: boolean;
-  onSelect: (comment: string) => void;
+  selectedIndices: number[];
+  edits: Record<number, string>;
+  onToggle: (index: number) => void;
+  onEditChange: (index: number, text: string) => void;
+};
+
+/**
+ * Computes a word-level Myers diff between two strings.
+ * Uses a simple O(ND) implementation suitable for short comment texts.
+ */
+function computeWordDiff(original: string, edited: string): DiffOp[] {
+  const tokenize = (s: string): string[] => s.match(/\S+|\s+/g) || [];
+  const a = tokenize(original);
+  const b = tokenize(edited);
+  const ops = myersDiff(a, b);
+  return ops;
+}
+
+function myersDiff(a: string[], b: string[]): DiffOp[] {
+  const n = a.length;
+  const m = b.length;
+  const max = n + m;
+  const v: Record<number, number> = { 1: 0 };
+  const trace: Array<Record<number, number>> = [];
+
+  outer: for (let d = 0; d <= max; d++) {
+    const vSnap: Record<number, number> = { ...v };
+    trace.push(vSnap);
+    for (let k = -d; k <= d; k += 2) {
+      let x: number;
+      if (k === -d || (k !== d && (v[k - 1] ?? 0) < (v[k + 1] ?? 0))) {
+        x = v[k + 1] ?? 0;
+      } else {
+        x = (v[k - 1] ?? 0) + 1;
+      }
+      let y = x - k;
+      while (x < n && y < m && a[x] === b[y]) {
+        x++;
+        y++;
+      }
+      v[k] = x;
+      if (x >= n && y >= m) {
+        break outer;
+      }
+    }
+  }
+
+  // Backtrack to build the edit script
+  const ops: DiffOp[] = [];
+  let x = n;
+  let y = m;
+  for (let d = trace.length - 1; d > 0; d--) {
+    const vPrev = trace[d];
+    const k = x - y;
+    let prevK: number;
+    if (k === -d || (k !== d && (vPrev[k - 1] ?? 0) < (vPrev[k + 1] ?? 0))) {
+      prevK = k + 1;
+    } else {
+      prevK = k - 1;
+    }
+    const prevX = vPrev[prevK] ?? 0;
+    const prevY = prevX - prevK;
+    // Diagonal (equal)
+    while (x > prevX && y > prevY) {
+      x--;
+      y--;
+      ops.push({ op: 'eq', text: a[x] });
+    }
+    if (x === prevX && y > prevY) {
+      y--;
+      ops.push({ op: 'add', text: b[y] });
+    } else if (y === prevY && x > prevX) {
+      x--;
+      ops.push({ op: 'del', text: a[x] });
+    }
+  }
+  // Any remaining diagonal at d=0
+  while (x > 0 && y > 0) {
+    x--;
+    y--;
+    ops.push({ op: 'eq', text: a[x] });
+  }
+
+  return ops.reverse();
+}
+
+const InlineDiff: React.FC<{ original: string; edited: string }> = ({ original, edited }) => {
+  const ops = computeWordDiff(original, edited);
+  return (
+    <div className={styles['diff-preview']}>
+      {ops.map((op, i) => {
+        switch (op.op) {
+          case 'eq':
+            return <span key={i}>{op.text}</span>;
+          case 'del':
+            return (
+              <span key={i} className={styles['diff-del']}>
+                {op.text}
+              </span>
+            );
+          case 'add':
+            return (
+              <span key={i} className={styles['diff-add']}>
+                {op.text}
+              </span>
+            );
+        }
+      })}
+    </div>
+  );
 };
 
 const GradingCommentSelector: React.FC<Props> = props => {
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+  const handleToggleEdit = useCallback(
+    (index: number) => {
+      if (editingIndex === index) {
+        setEditingIndex(null);
+      } else {
+        // Initialise edit text with original if not already edited
+        if (props.edits[index] === undefined) {
+          props.onEditChange(index, props.comments[index]);
+        }
+        setEditingIndex(index);
+      }
+    },
+    [editingIndex, props]
+  );
+
   return (
     <div className={styles['grading-comment-selector']}>
       <H5 className={styles['grading-comment-selector-title']}>LLM Comment Suggestions:</H5>
@@ -17,24 +146,60 @@ const GradingCommentSelector: React.FC<Props> = props => {
         <NonIdealState icon={<Spinner />} />
       ) : (
         <div>
-          {' '}
           {props.comments.length > 0 ? (
-            props.comments.map((el, index) => {
+            props.comments.map((comment, index) => {
+              const isSelected = props.selectedIndices.includes(index);
+              const isEditing = editingIndex === index;
+              const editedText = props.edits[index];
+              const hasEdits = editedText !== undefined && editedText !== comment;
+
               return (
-                <button
+                <div
                   key={index}
-                  className={styles['grading-comment-selector-item']}
-                  onClick={() => {
-                    props.onSelect(el);
-                  }}
+                  className={`${styles['grading-comment-selector-item']} ${isSelected ? styles['selected'] : ''}`}
                 >
-                  {el}
-                </button>
+                  <div className={styles['comment-header']}>
+                    <Checkbox
+                      checked={isSelected}
+                      onChange={() => props.onToggle(index)}
+                      className={styles['comment-checkbox']}
+                    />
+                    <div className={styles['comment-text']} onClick={() => props.onToggle(index)}>
+                      {comment}
+                    </div>
+                    {isSelected && (
+                      <Button
+                        small
+                        minimal
+                        icon={isEditing ? IconNames.CHEVRON_UP : IconNames.EDIT}
+                        onClick={() => handleToggleEdit(index)}
+                        className={styles['edit-button']}
+                      />
+                    )}
+                  </div>
+
+                  {isEditing && (
+                    <div className={styles['edit-section']}>
+                      <TextArea
+                        fill
+                        value={editedText ?? comment}
+                        onChange={e => props.onEditChange(index, e.target.value)}
+                        className={styles['edit-textarea']}
+                      />
+                      {hasEdits && (
+                        <>
+                          <H5 className={styles['diff-title']}>Changes:</H5>
+                          <InlineDiff original={comment} edited={editedText} />
+                        </>
+                      )}
+                    </div>
+                  )}
+                </div>
               );
             })
           ) : (
             <span>No Comments Generated</span>
-          )}{' '}
+          )}
         </div>
       )}
     </div>
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index ea7dd76d63..b87e356c7c 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -21,8 +21,11 @@ import SessionActions from '../../../../commons/application/actions/SessionActio
 import ControlButton from '../../../../commons/ControlButton';
 import Markdown from '../../../../commons/Markdown';
 import { Prompt } from '../../../../commons/ReactRouterPrompt';
-import { postGenerateComments } from '../../../../commons/sagas/RequestsSaga';
-import { saveFinalComment } from '../../../../commons/sagas/RequestsSaga';
+import {
+  postGenerateComments,
+  saveChosenComments,
+  saveFinalComment
+} from '../../../../commons/sagas/RequestsSaga';
 import { getPrettyDate } from '../../../../commons/utils/DateHelper';
 import { showSimpleConfirmDialog } from '../../../../commons/utils/DialogHelper';
 import {
@@ -120,12 +123,47 @@ const GradingEditor: React.FC<Props> = props => {
     return resp;
   };
 
-  const onSelectGeneratedComments = (comment: string) => {
-    if (!selectedSuggestions.includes(comment)) {
-      setSelectedSuggestions([comment, ...selectedSuggestions]);
+  const onToggleComment = (index: number) => {
+    setSelectedIndices(prev =>
+      prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
+    );
+  };
+
+  const onEditChange = (index: number, text: string) => {
+    setCommentEdits(prev => ({ ...prev, [index]: text }));
+  };
+
+  const applySelectedComments = () => {
+    const parts = selectedIndices
+      .sort((a, b) => a - b)
+      .map(i => commentEdits[i] ?? suggestions[i])
+      .filter(Boolean);
+    setEditorValue(parts.join('\n\n'));
+  };
+
+  const handleSaveChosenComments = async () => {
+    // Only send edits for comments that were actually changed
+    const changedEdits: Record<number, string> = {};
+    for (const idx of selectedIndices) {
+      if (commentEdits[idx] !== undefined && commentEdits[idx] !== suggestions[idx]) {
+        changedEdits[idx] = commentEdits[idx];
+      }
     }
 
-    setEditorValue(editorValue + comment);
+    const resp = await saveChosenComments(
+      tokens,
+      props.submissionId,
+      props.questionId,
+      props.answer_id,
+      selectedIndices,
+      changedEdits
+    );
+
+    if (resp && resp.ok) {
+      showSuccessMessage('Chosen comments saved!', 2000);
+    } else {
+      showWarningMessage('Failed to save chosen comments');
+    }
   };
 
   const postSaveFinalComment = async (comment: string) => {
@@ -134,7 +172,8 @@ const GradingEditor: React.FC<Props> = props => {
   };
 
   const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [selectedSuggestions, setSelectedSuggestions] = useState<string[]>([]);
+  const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
+  const [commentEdits, setCommentEdits] = useState<Record<number, string>>({});
   const [hasClickedGenerate, setHasClickedGenerate] = useState<boolean>(false);
   const [isViewLLMPromptOpen, setIsViewLLMPromptOpen] = useState<boolean>(false);
 
@@ -389,13 +428,15 @@ const GradingEditor: React.FC<Props> = props => {
           </Dialog>
           <div style={{ marginBottom: '10px' }}>
             <GradingCommentSelector
-              onSelect={onSelectGeneratedComments}
+              onToggle={onToggleComment}
+              onEditChange={onEditChange}
               isLoading={hasClickedGenerate}
               comments={suggestions}
+              selectedIndices={selectedIndices}
+              edits={commentEdits}
             />
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
               <Button
-                style={{ marginRight: '1rem' }}
                 onClick={async () => {
                   setIsViewLLMPromptOpen(true);
                 }}
@@ -410,10 +451,23 @@ const GradingEditor: React.FC<Props> = props => {
                   const resp = await getCommentSuggestions();
                   setHasClickedGenerate(false);
                   setSuggestions(resp ? resp.comments : []);
+                  setSelectedIndices([]);
+                  setCommentEdits({});
                 }}
               >
                 Generate Comments
               </Button>
+
+              {selectedIndices.length > 0 && (
+                <>
+                  <Button intent="success" onClick={applySelectedComments}>
+                    Apply Selected
+                  </Button>
+                  <Button intent="warning" onClick={handleSaveChosenComments}>
+                    Save Selections
+                  </Button>
+                </>
+              )}
             </div>
           </div>
         </>
diff --git a/src/styles/GradingCommentSelector.module.scss b/src/styles/GradingCommentSelector.module.scss
index 9eeb910d1f..a67ccda245 100644
--- a/src/styles/GradingCommentSelector.module.scss
+++ b/src/styles/GradingCommentSelector.module.scss
@@ -18,14 +18,79 @@
 }
 
 .grading-comment-selector-item {
-  margin: 3px;
+  margin: 3px 0;
   padding: 7px;
   background-color: $cadet-color-2;
   border: 1px solid $cadet-color-3;
+  border-radius: 4px;
   width: 100%;
-  cursor: pointer;
+  text-align: left;
 
-  &:hover {
-    background-color: $cadet-color-3;
+  &.selected {
+    border-color: #137cbd;
+    background-color: rgba(19, 124, 189, 0.1);
   }
 }
+
+.comment-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.comment-checkbox {
+  flex-shrink: 0;
+  margin: 0 !important;
+}
+
+.comment-text {
+  flex: 1;
+  cursor: pointer;
+  word-break: break-word;
+}
+
+.edit-button {
+  flex-shrink: 0;
+}
+
+.edit-section {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid $cadet-color-3;
+}
+
+.edit-textarea {
+  width: 100%;
+  min-height: 80px;
+  font-size: 0.875rem;
+}
+
+.diff-title {
+  margin-top: 8px;
+  margin-bottom: 4px;
+  font-size: 0.8rem;
+}
+
+.diff-preview {
+  padding: 6px;
+  background-color: $cadet-color-1;
+  border: 1px solid $cadet-color-3;
+  border-radius: 3px;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.diff-del {
+  background-color: rgba(219, 55, 55, 0.2);
+  text-decoration: line-through;
+  color: #db3737;
+  margin-right: 2px;
+}
+
+.diff-add {
+  background-color: rgba(15, 153, 96, 0.2);
+  color: #0f9960;
+  margin-left: 2px;
+}

From 8ee56da2c1d4b98402b72a20c26634533fdf9188 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Wed, 25 Feb 2026 23:26:45 +0800
Subject: [PATCH 02/45] feature(ai_grading): Rendering generate comments button
 based on xml file input

---
 .../grading/subcomponents/GradingEditor.tsx   | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 63539bf23d..39a8fe471d 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -137,13 +137,18 @@ const GradingEditor: React.FC<Props> = props => {
   const [selectedSuggestions, setSelectedSuggestions] = useState<string[]>([]);
   const [hasClickedGenerate, setHasClickedGenerate] = useState<boolean>(false);
   const [isViewLLMPromptOpen, setIsViewLLMPromptOpen] = useState<boolean>(false);
+  const [hasGenerated, setHasGenerated] = useState<boolean>(false); //If generate comments button has been pressed
 
   const makeInitialState = () => {
     setXpAdjustmentInput(props.xpAdjustment.toString());
     setEditorValue(props.comments);
     setSelectedTab('write');
     setCurrentlySaving(false);
-    setSuggestions(props.ai_comments || []);
+    //Load existing comments from props (the database)
+    const existingComments = props.ai_comments || [];
+    setSuggestions(existingComments);
+    //Lock the button if we already have comments for this submission
+    setHasGenerated(existingComments.length > 0);
   };
 
   /**
@@ -354,7 +359,7 @@ const GradingEditor: React.FC<Props> = props => {
         </div>
       </div>
 
-      {props.is_llm && (
+      {props.is_llm && props.prompts && props.prompts.length > 0 && (
         <>
           <Dialog
             title="Full Composed LLM Prompt"
@@ -405,14 +410,22 @@ const GradingEditor: React.FC<Props> = props => {
 
               <Button
                 intent="primary"
+                //Disable if currently fetching OR if we already have comments
+                disabled={hasClickedGenerate || hasGenerated}
                 onClick={async () => {
                   setHasClickedGenerate(true);
                   const resp = await getCommentSuggestions();
                   setHasClickedGenerate(false);
-                  setSuggestions(resp ? resp.comments : []);
+
+                  if (resp && resp.comments) {
+                    setSuggestions(resp.comments);
+                    //Lock the button locally once successful
+                    setHasGenerated(true);
+                    showSuccessMessage('Comments generated and saved!');
+                  }
                 }}
               >
-                Generate Comments
+                {hasGenerated ? 'Comments Generated' : 'Generate Comments'}
               </Button>
             </div>
           </div>

From 186f47c1d589ba45b248a925ae01bf316319aba5 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 3 Mar 2026 18:03:13 +0800
Subject: [PATCH 03/45] feat(grading): Add LLM feedback submission for grading
 comments

---
 .../grading/subcomponents/GradingEditor.tsx   |   8 +
 .../subcomponents/GradingWorkspace.tsx        |   1 +
 .../subcomponents/LLMFeedbackButton.tsx       | 145 ++++++++++++++++++
 3 files changed, 154 insertions(+)
 create mode 100644 src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 0c874aa508..592b66afcd 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../../../commons/utils/notifications/NotificationsHelper';
 import { convertParamToInt } from '../../../../commons/utils/ParamParseHelper';
 import GradingCommentSelector from './GradingCommentSelector';
+import LLMFeedbackButton from './LLMFeedbackButton';
 
 type GradingSaveFunction = (
   submissionId: number,
@@ -46,6 +47,7 @@ type Props = {
   prompts: LLMPrompt[];
   answer_id: number;
   solution: number | string | null;
+  assessmentId: number;
   questionId: number;
   submissionId: number;
   initialXp: number;
@@ -481,6 +483,12 @@ const GradingEditor: React.FC<Props> = props => {
                   </Button>
                 </>
               )}
+
+              <LLMFeedbackButton
+                tokens={tokens}
+                assessmentId={props.assessmentId}
+                questionId={props.questionId}
+              />
             </div>
           </div>
         </>
diff --git a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
index b90be5e818..fbd1d8a7ae 100644
--- a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
@@ -306,6 +306,7 @@ const GradingWorkspace: React.FC<Props> = props => {
             answer_id={grading!.answers[questionId].id}
             ai_comments={grading!.answers[questionId].ai_comments || []}
             solution={grading!.answers[questionId].question.solution}
+            assessmentId={grading!.assessment.id}
             questionId={grading!.answers[questionId].question.id}
             prompts={grading!.answers[questionId].prompts}
             submissionId={props.submissionId}
diff --git a/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx b/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
new file mode 100644
index 0000000000..c5d091153c
--- /dev/null
+++ b/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
@@ -0,0 +1,145 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Icon,
+  Intent,
+  TextArea
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useCallback, useState } from 'react';
+import { Tokens } from 'src/commons/application/types/SessionTypes';
+
+import { submitLLMFeedback } from '../../../../commons/sagas/RequestsSaga';
+import {
+  showSuccessMessage,
+  showWarningMessage
+} from '../../../../commons/utils/notifications/NotificationsHelper';
+
+type Props = {
+  tokens: Tokens;
+  assessmentId: number;
+  questionId?: number;
+};
+
+const LLMFeedbackButton: React.FC<Props> = ({ tokens, assessmentId, questionId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [body, setBody] = useState('');
+  const [rating, setRating] = useState<number>(0);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleOpen = useCallback(() => setIsOpen(true), []);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setBody('');
+    setRating(0);
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    if (!body.trim()) {
+      showWarningMessage('Please enter feedback before submitting.');
+      return;
+    }
+    setSubmitting(true);
+    const resp = await submitLLMFeedback(
+      tokens,
+      assessmentId,
+      body,
+      rating || undefined,
+      questionId
+    );
+    setSubmitting(false);
+
+    if (resp && resp.ok) {
+      showSuccessMessage('Feedback submitted! Thank you.', 2000);
+      handleClose();
+    } else {
+      showWarningMessage('Failed to submit feedback. Please try again.');
+    }
+  }, [tokens, body, rating, assessmentId, questionId, handleClose]);
+
+  return (
+    <>
+      <Button
+        icon={IconNames.COMMENT}
+        intent={Intent.NONE}
+        minimal
+        onClick={handleOpen}
+        title="Provide feedback on LLM comments"
+      >
+        Feedback
+      </Button>
+      <Dialog
+        icon={IconNames.COMMENT}
+        isOpen={isOpen}
+        onClose={handleClose}
+        title="LLM Feature Feedback"
+        canOutsideClickClose={true}
+        style={{ width: '480px' }}
+      >
+        <DialogBody>
+          <p>
+            Share your experience with the <b>Generate Comments</b> feature. Your feedback helps us
+            improve.
+          </p>
+
+          {/* Star Rating */}
+          <div style={{ marginBottom: '12px' }}>
+            <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '4px' }}>
+              Rating (optional)
+            </label>
+            <div style={{ display: 'flex', gap: '4px' }}>
+              {[1, 2, 3, 4, 5].map(star => (
+                <Icon
+                  key={star}
+                  icon={star <= rating ? IconNames.STAR : IconNames.STAR_EMPTY}
+                  size={24}
+                  style={{
+                    cursor: 'pointer',
+                    color: star <= rating ? '#f5a623' : '#ccc'
+                  }}
+                  onClick={() => setRating(star === rating ? 0 : star)}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Text Feedback */}
+          <div>
+            <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '4px' }}>
+              Your Feedback
+            </label>
+            <TextArea
+              fill
+              large
+              value={body}
+              onChange={e => setBody(e.target.value)}
+              placeholder="What worked well? What could be improved?"
+              style={{ minHeight: '120px' }}
+            />
+          </div>
+        </DialogBody>
+        <DialogFooter
+          actions={
+            <>
+              <Button onClick={handleClose} minimal>
+                Cancel
+              </Button>
+              <Button
+                intent={Intent.PRIMARY}
+                onClick={handleSubmit}
+                loading={submitting}
+                disabled={!body.trim()}
+              >
+                Submit Feedback
+              </Button>
+            </>
+          }
+        />
+      </Dialog>
+    </>
+  );
+};
+
+export default LLMFeedbackButton;

From 645fe924b26a401a04d6981bc010ce93ba1bc833 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 3 Mar 2026 18:03:49 +0800
Subject: [PATCH 04/45] feat(groundControl): Add LLM usage statistics
 monitoring

---
 .../academy/groundControl/GroundControl.tsx   |   2 +
 .../GroundControlLLMStatsCell.tsx             |  40 +++
 .../subcomponents/LLMStatsDialog.tsx          | 331 ++++++++++++++++++
 3 files changed, 373 insertions(+)
 create mode 100644 src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx
 create mode 100644 src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx

diff --git a/src/pages/academy/groundControl/GroundControl.tsx b/src/pages/academy/groundControl/GroundControl.tsx
index 546473b09c..203f30fa19 100644
--- a/src/pages/academy/groundControl/GroundControl.tsx
+++ b/src/pages/academy/groundControl/GroundControl.tsx
@@ -21,6 +21,7 @@ import DeleteCell from './subcomponents/GroundControlDeleteCell';
 import Dropzone from './subcomponents/GroundControlDropzone';
 import EditCell from './subcomponents/GroundControlEditCell';
 import EditTeamSizeCell from './subcomponents/GroundControlEditTeamSizeCell';
+import LLMStatsCell from './subcomponents/GroundControlLLMStatsCell';
 import PublishCell from './subcomponents/GroundControlPublishCell';
 import ReleaseGradingCell from './subcomponents/GroundControlReleaseGradingCell';
 
@@ -156,6 +157,7 @@ const GroundControl: React.FC<Props> = props => {
               handleConfigureAssessment={props.handleConfigureAssessment}
               handleAssignEntriesForVoting={props.handleAssignEntriesForVoting}
             />
+            <LLMStatsCell data={data} />
           </>
         );
       },
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx
new file mode 100644
index 0000000000..55e3f629e8
--- /dev/null
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx
@@ -0,0 +1,40 @@
+import { Tooltip } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useCallback, useState } from 'react';
+import { useSession } from 'src/commons/utils/Hooks';
+
+import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
+import ControlButton from '../../../../commons/ControlButton';
+import LLMStatsDialog from './LLMStatsDialog';
+
+type LLMStatsCellProps = {
+  data: AssessmentOverview;
+};
+
+const LLMStatsCell: React.FC<LLMStatsCellProps> = ({ data }) => {
+  const { enableLlmGrading } = useSession();
+  const [isDialogOpen, setDialogOpen] = useState(false);
+
+  const handleOpen = useCallback(() => setDialogOpen(true), []);
+  const handleClose = useCallback(() => setDialogOpen(false), []);
+
+  if (!enableLlmGrading || !data.isLlmGraded) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tooltip content="LLM Statistics" placement="top">
+        <ControlButton icon={IconNames.CHART} onClick={handleOpen} />
+      </Tooltip>
+      <LLMStatsDialog
+        isOpen={isDialogOpen}
+        onClose={handleClose}
+        assessmentId={data.id}
+        assessmentTitle={data.title}
+      />
+    </>
+  );
+};
+
+export default LLMStatsCell;
diff --git a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
new file mode 100644
index 0000000000..69f65de82d
--- /dev/null
+++ b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
@@ -0,0 +1,331 @@
+import {
+  Button,
+  Card,
+  Dialog,
+  DialogBody,
+  Divider,
+  H3,
+  H4,
+  H5,
+  Icon,
+  Intent,
+  NonIdealState,
+  Spinner,
+  SpinnerSize,
+  Tag
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTokens } from 'src/commons/utils/Hooks';
+
+import {
+  getLLMAssessmentStats,
+  getLLMFeedback,
+  getLLMQuestionStats
+} from '../../../../commons/sagas/RequestsSaga';
+import { getPrettyDate } from '../../../../commons/utils/DateHelper';
+
+// =====================
+// Types
+// =====================
+type QuestionStat = {
+  question_id: number;
+  display_order: number;
+  total_uses: number;
+  unique_submissions: number;
+  unique_users: number;
+};
+
+type AssessmentStats = {
+  total_uses: number;
+  unique_submissions: number;
+  unique_users: number;
+  questions: QuestionStat[];
+};
+
+type QuestionDetailStats = {
+  total_uses: number;
+  unique_submissions: number;
+  unique_users: number;
+};
+
+type FeedbackEntry = {
+  id: number;
+  rating: number | null;
+  body: string;
+  user_name: string;
+  question_id: number | null;
+  inserted_at: string;
+};
+
+// =====================
+// Stat Card
+// =====================
+const StatCard: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (
+  <Card style={{ flex: 1, textAlign: 'center', padding: '12px', minWidth: '140px' }}>
+    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#2965cc' }}>{value}</div>
+    <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>{label}</div>
+  </Card>
+);
+
+// =====================
+// Rating Stars
+// =====================
+const RatingStars: React.FC<{ rating: number | null }> = ({ rating }) => {
+  if (rating === null || rating === undefined) return <span style={{ color: '#888' }}>N/A</span>;
+  return (
+    <span>
+      {Array.from({ length: 5 }, (_, i) => (
+        <Icon
+          key={i}
+          icon={i < rating ? IconNames.STAR : IconNames.STAR_EMPTY}
+          style={{ color: i < rating ? '#f5a623' : '#ccc' }}
+          size={14}
+        />
+      ))}
+    </span>
+  );
+};
+
+// =====================
+// Feedback List
+// =====================
+const FeedbackList: React.FC<{
+  feedback: FeedbackEntry[];
+  loading: boolean;
+  emptyMessage: string;
+}> = ({ feedback, loading, emptyMessage }) => {
+  if (loading) return <Spinner size={SpinnerSize.SMALL} />;
+  if (feedback.length === 0) {
+    return <p style={{ color: '#888', fontStyle: 'italic' }}>{emptyMessage}</p>;
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {feedback.map(f => (
+        <Card key={f.id} style={{ padding: '10px' }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: '4px'
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{ fontWeight: 'bold' }}>{f.user_name}</span>
+              {f.question_id && (
+                <Tag minimal intent={Intent.PRIMARY} style={{ fontSize: '10px' }}>
+                  Task {f.question_id}
+                </Tag>
+              )}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <RatingStars rating={f.rating} />
+              <span style={{ fontSize: '11px', color: '#888' }}>
+                {getPrettyDate(f.inserted_at)}
+              </span>
+            </div>
+          </div>
+          <p style={{ margin: 0, whiteSpace: 'pre-wrap' }}>{f.body}</p>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+// =====================
+// Main Dialog Component
+// =====================
+type LLMStatsDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  assessmentId: number;
+  assessmentTitle: string;
+};
+
+const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
+  isOpen,
+  onClose,
+  assessmentId,
+  assessmentTitle
+}) => {
+  const tokens = useTokens();
+  const tokensRef = useRef(tokens);
+  tokensRef.current = tokens;
+
+  // Assessment-level state
+  const [stats, setStats] = useState<AssessmentStats | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [feedback, setFeedback] = useState<FeedbackEntry[]>([]);
+  const [feedbackLoading, setFeedbackLoading] = useState(false);
+
+  // Task (question) drill-down state
+  const [selectedQuestion, setSelectedQuestion] = useState<QuestionStat | null>(null);
+  const [questionDetail, setQuestionDetail] = useState<QuestionDetailStats | null>(null);
+  const [questionLoading, setQuestionLoading] = useState(false);
+  const [questionFeedback, setQuestionFeedback] = useState<FeedbackEntry[]>([]);
+  const [questionFeedbackLoading, setQuestionFeedbackLoading] = useState(false);
+
+  // Fetch assessment-level stats + feedback
+  const fetchAssessmentData = useCallback(async () => {
+    setLoading(true);
+    setFeedbackLoading(true);
+
+    const [statsData, feedbackData] = await Promise.all([
+      getLLMAssessmentStats(tokensRef.current, assessmentId),
+      getLLMFeedback(tokensRef.current, assessmentId)
+    ]);
+
+    setStats(statsData);
+    setFeedback(feedbackData || []);
+    setLoading(false);
+    setFeedbackLoading(false);
+  }, [assessmentId]);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchAssessmentData();
+      setSelectedQuestion(null);
+      setQuestionDetail(null);
+    }
+  }, [isOpen, fetchAssessmentData]);
+
+  // Drill into a specific task
+  const handleSelectQuestion = useCallback(
+    async (question: QuestionStat) => {
+      setSelectedQuestion(question);
+      setQuestionLoading(true);
+      setQuestionFeedbackLoading(true);
+
+      const [qStats, qFeedback] = await Promise.all([
+        getLLMQuestionStats(tokensRef.current, assessmentId, question.question_id),
+        getLLMFeedback(tokensRef.current, assessmentId, question.question_id)
+      ]);
+
+      setQuestionDetail(qStats);
+      setQuestionFeedback(qFeedback || []);
+      setQuestionLoading(false);
+      setQuestionFeedbackLoading(false);
+    },
+    [assessmentId]
+  );
+
+  const handleBackToAssessment = useCallback(() => {
+    setSelectedQuestion(null);
+    setQuestionDetail(null);
+    setQuestionFeedback([]);
+  }, []);
+
+  return (
+    <Dialog
+      icon={IconNames.CHART}
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`LLM Statistics — ${assessmentTitle}`}
+      canOutsideClickClose={true}
+      style={{ width: '700px', maxHeight: '80vh' }}
+    >
+      <DialogBody style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+        {loading ? (
+          <NonIdealState
+            description="Loading statistics..."
+            icon={<Spinner size={SpinnerSize.LARGE} />}
+          />
+        ) : !stats ? (
+          <NonIdealState description="Failed to load statistics" icon={IconNames.ERROR} />
+        ) : selectedQuestion ? (
+          // ============ Task (Question) Detail View ============
+          <div>
+            <Button
+              icon={IconNames.ARROW_LEFT}
+              minimal
+              onClick={handleBackToAssessment}
+              style={{ marginBottom: '12px' }}
+            >
+              Back to assessment
+            </Button>
+            <H3>Task {selectedQuestion.display_order}</H3>
+            <Divider />
+
+            {questionLoading ? (
+              <Spinner size={SpinnerSize.STANDARD} />
+            ) : questionDetail ? (
+              <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '16px' }}>
+                <StatCard label="Total Uses" value={questionDetail.total_uses} />
+                <StatCard label="Unique Submissions" value={questionDetail.unique_submissions} />
+                <StatCard label="Unique Users" value={questionDetail.unique_users} />
+              </div>
+            ) : (
+              <NonIdealState description="No data for this task" icon={IconNames.SEARCH} />
+            )}
+
+            {/* Task-specific feedback */}
+            <Divider style={{ margin: '16px 0' }} />
+            <H4>Task Feedback</H4>
+            <FeedbackList
+              feedback={questionFeedback}
+              loading={questionFeedbackLoading}
+              emptyMessage="No feedback received for this task."
+            />
+          </div>
+        ) : (
+          // ============ Assessment Overview ============
+          <div>
+            {/* Summary Stats */}
+            <H5>Overview</H5>
+            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '16px' }}>
+              <StatCard label="Total Uses" value={stats.total_uses} />
+              <StatCard label="Unique Submissions" value={stats.unique_submissions} />
+              <StatCard label="Unique Users" value={stats.unique_users} />
+            </div>
+
+            {/* Task List */}
+            <Divider style={{ margin: '16px 0' }} />
+            <H4>Tasks</H4>
+            {stats.questions.length === 0 ? (
+              <p style={{ color: '#888', fontStyle: 'italic' }}>
+                No LLM usage data for any tasks yet.
+              </p>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                {stats.questions.map(q => (
+                  <Card
+                    key={q.question_id}
+                    interactive
+                    onClick={() => handleSelectQuestion(q)}
+                    style={{
+                      padding: '10px 14px',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center'
+                    }}
+                  >
+                    <div>
+                      <strong>Task {q.display_order}</strong>
+                      <div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
+                        {q.total_uses} uses &middot; {q.unique_submissions} submissions &middot;{' '}
+                        {q.unique_users} users
+                      </div>
+                    </div>
+                    <Icon icon={IconNames.CHEVRON_RIGHT} />
+                  </Card>
+                ))}
+              </div>
+            )}
+
+            {/* Assessment-level Feedback */}
+            <Divider style={{ margin: '16px 0' }} />
+            <H4>Feedback</H4>
+            <FeedbackList
+              feedback={feedback}
+              loading={feedbackLoading}
+              emptyMessage="No feedback received for this assessment."
+            />
+          </div>
+        )}
+      </DialogBody>
+    </Dialog>
+  );
+};
+
+export default LLMStatsDialog;

From 8f89539e9298958c71813f97869468c0b6f54b06 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 3 Mar 2026 18:04:03 +0800
Subject: [PATCH 05/45] feat(core): Add LLM types and request handlers

---
 src/commons/assessment/AssessmentTypes.ts |  1 +
 src/commons/sagas/RequestsSaga.ts         | 79 +++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/src/commons/assessment/AssessmentTypes.ts b/src/commons/assessment/AssessmentTypes.ts
index 9d113b04e9..b05e4e8b75 100644
--- a/src/commons/assessment/AssessmentTypes.ts
+++ b/src/commons/assessment/AssessmentTypes.ts
@@ -69,6 +69,7 @@ export type AssessmentOverview = {
   hasVotingFeatures: boolean;
   hasTokenCounter?: boolean;
   isVotingPublished?: boolean;
+  isLlmGraded?: boolean;
   maxXp: number;
   earlySubmissionXp: number;
   number?: string; // For mission control
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index f6ea8c0531..62a7b9c214 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1609,6 +1609,85 @@ export const saveChosenComments = async (
   return resp;
 };
 
+/**
+ * GET /courses/{courseId}/admin/llm-stats/{assessmentId}
+ * Fetches assessment-level LLM usage statistics with per-question breakdown.
+ */
+export const getLLMAssessmentStats = async (
+  tokens: Tokens,
+  assessmentId: number
+): Promise<any | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats/${assessmentId}`, 'GET', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
+
+/**
+ * GET /courses/{courseId}/admin/llm-stats/{assessmentId}/{questionId}
+ * Fetches question-level LLM usage statistics.
+ */
+export const getLLMQuestionStats = async (
+  tokens: Tokens,
+  assessmentId: number,
+  questionId: number
+): Promise<any | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats/${assessmentId}/${questionId}`, 'GET', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
+
+/**
+ * GET /courses/{courseId}/admin/llm-stats/{assessmentId}/feedback?question_id={questionId}
+ * Fetches LLM feedback for an assessment, optionally filtered by question.
+ */
+export const getLLMFeedback = async (
+  tokens: Tokens,
+  assessmentId: number,
+  questionId?: number
+): Promise<any[] | null> => {
+  let url = `${courseId()}/admin/llm-stats/${assessmentId}/feedback`;
+  if (questionId) {
+    url += `?question_id=${questionId}`;
+  }
+  const resp = await request(url, 'GET', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
+
+/**
+ * POST /courses/{courseId}/admin/llm-stats/{assessmentId}/feedback
+ * Submits feedback for the LLM feature on an assessment (optionally for a specific question).
+ */
+export const submitLLMFeedback = async (
+  tokens: Tokens,
+  assessmentId: number,
+  body: string,
+  rating?: number,
+  questionId?: number
+): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats/${assessmentId}/feedback`, 'POST', {
+    body: {
+      body,
+      rating,
+      question_id: questionId
+    },
+    ...tokens
+  });
+  return resp;
+};
+
 /**
  * GET /courses/{courseId}/admin/users
  */

From d598501e1acdb6591bf746433355bd9e16a275b5 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Sun, 8 Mar 2026 13:16:04 +0800
Subject: [PATCH 06/45] feat: 3 tiered prompt generation and prompt button
 adjustments

---
 src/commons/sagas/RequestsSaga.ts             |  6 ++-
 .../grading/subcomponents/GradingEditor.tsx   | 52 +++++++++++--------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index f6ea8c0531..f75afe45de 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1560,10 +1560,12 @@ export const removeAssessmentConfig = async (
  */
 export const postGenerateComments = async (
   tokens: Tokens,
-  answer_id: number
+  answer_id: number,
+  forceRefresh: boolean = false
 ): Promise<{ comments: string[] } | null> => {
   const resp = await request(`${courseId()}/admin/generate-comments/${answer_id}`, 'POST', {
-    ...tokens
+    ...tokens,
+    body: { force_refresh: forceRefresh }
   });
   if (!resp || !resp.ok) {
     return null;
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 0c874aa508..479b9e8bb3 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -118,11 +118,6 @@ const GradingEditor: React.FC<Props> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.submissionId, props.questionId]);
 
-  const getCommentSuggestions = async () => {
-    const resp = await postGenerateComments(tokens, props.answer_id);
-    return resp;
-  };
-
   const onToggleComment = (index: number) => {
     setSelectedIndices(prev =>
       prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
@@ -336,6 +331,31 @@ const GradingEditor: React.FC<Props> = props => {
     props.maxXp - props.initialXp
   }`;
 
+  const handleGenerate = async (force: boolean = false) => {
+    // If we are re-generating, ask for confirmation first
+    if (force) {
+      const confirm = await showSimpleConfirmDialog({
+        contents: (
+          <p>Are you sure? Doing so will result in the previous prompt results being lost.</p>
+        ),
+        positiveLabel: 'Re-generate',
+        positiveIntent: 'danger'
+      });
+      if (!confirm) return;
+    }
+
+    setHasClickedGenerate(true);
+    // Pass a flag to the backend to tell it to ignore the cache
+    const resp = await postGenerateComments(tokens, props.answer_id, force);
+    setHasClickedGenerate(false);
+
+    if (resp && resp.comments) {
+      setSuggestions(resp.comments);
+      setHasGenerated(true);
+      showSuccessMessage(force ? 'Comments re-generated!' : 'Comments generated!');
+    }
+  };
+
   return (
     <div className="GradingEditor">
       <Prompt
@@ -450,25 +470,11 @@ const GradingEditor: React.FC<Props> = props => {
               </Button>
 
               <Button
-                intent="primary"
-                //Disable if currently fetching OR if we already have comments
-                disabled={hasClickedGenerate || hasGenerated}
-                onClick={async () => {
-                  setHasClickedGenerate(true);
-                  const resp = await getCommentSuggestions();
-                  setHasClickedGenerate(false);
-
-                  if (resp && resp.comments) {
-                    setSuggestions(resp.comments);
-                    //Lock the button locally once successful
-                    setHasGenerated(true);
-                    showSuccessMessage('Comments generated and saved!');
-                  }
-                  setSelectedIndices([]);
-                  setCommentEdits({});
-                }}
+                intent={hasGenerated ? 'none' : 'primary'}
+                loading={hasClickedGenerate}
+                onClick={() => handleGenerate(hasGenerated)}
               >
-                {hasGenerated ? 'Comments Generated' : 'Generate Comments'}
+                {hasGenerated ? 'Re-generate Comments' : 'Generate Comments'}
               </Button>
 
               {selectedIndices.length > 0 && (

From 895e3a273fbfaeb0b8d9e16d67c0e607404c33d1 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Mon, 16 Mar 2026 18:06:51 +0800
Subject: [PATCH 07/45] feat(grading): streamline AI comment selection with
 inline editor sync and save guards

---
 .../subcomponents/GradingCommentSelector.tsx  | 161 +-----------
 .../grading/subcomponents/GradingEditor.tsx   | 236 ++++++++++++++----
 2 files changed, 186 insertions(+), 211 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx b/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
index 676baa5c02..eb40985611 100644
--- a/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
@@ -1,143 +1,15 @@
-import { Button, Checkbox, H5, NonIdealState, Spinner, TextArea } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
-import React, { useCallback, useState } from 'react';
+import { Checkbox, H5, NonIdealState, Spinner } from '@blueprintjs/core';
+import React from 'react';
 import styles from 'src/styles/GradingCommentSelector.module.scss';
 
-type DiffOp = { op: 'eq' | 'add' | 'del'; text: string };
-
 type Props = {
   comments: string[];
   isLoading: boolean;
   selectedIndices: number[];
-  edits: Record<number, string>;
   onToggle: (index: number) => void;
-  onEditChange: (index: number, text: string) => void;
-};
-
-/**
- * Computes a word-level Myers diff between two strings.
- * Uses a simple O(ND) implementation suitable for short comment texts.
- */
-function computeWordDiff(original: string, edited: string): DiffOp[] {
-  const tokenize = (s: string): string[] => s.match(/\S+|\s+/g) || [];
-  const a = tokenize(original);
-  const b = tokenize(edited);
-  const ops = myersDiff(a, b);
-  return ops;
-}
-
-function myersDiff(a: string[], b: string[]): DiffOp[] {
-  const n = a.length;
-  const m = b.length;
-  const max = n + m;
-  const v: Record<number, number> = { 1: 0 };
-  const trace: Array<Record<number, number>> = [];
-
-  outer: for (let d = 0; d <= max; d++) {
-    const vSnap: Record<number, number> = { ...v };
-    trace.push(vSnap);
-    for (let k = -d; k <= d; k += 2) {
-      let x: number;
-      if (k === -d || (k !== d && (v[k - 1] ?? 0) < (v[k + 1] ?? 0))) {
-        x = v[k + 1] ?? 0;
-      } else {
-        x = (v[k - 1] ?? 0) + 1;
-      }
-      let y = x - k;
-      while (x < n && y < m && a[x] === b[y]) {
-        x++;
-        y++;
-      }
-      v[k] = x;
-      if (x >= n && y >= m) {
-        break outer;
-      }
-    }
-  }
-
-  // Backtrack to build the edit script
-  const ops: DiffOp[] = [];
-  let x = n;
-  let y = m;
-  for (let d = trace.length - 1; d > 0; d--) {
-    const vPrev = trace[d];
-    const k = x - y;
-    let prevK: number;
-    if (k === -d || (k !== d && (vPrev[k - 1] ?? 0) < (vPrev[k + 1] ?? 0))) {
-      prevK = k + 1;
-    } else {
-      prevK = k - 1;
-    }
-    const prevX = vPrev[prevK] ?? 0;
-    const prevY = prevX - prevK;
-    // Diagonal (equal)
-    while (x > prevX && y > prevY) {
-      x--;
-      y--;
-      ops.push({ op: 'eq', text: a[x] });
-    }
-    if (x === prevX && y > prevY) {
-      y--;
-      ops.push({ op: 'add', text: b[y] });
-    } else if (y === prevY && x > prevX) {
-      x--;
-      ops.push({ op: 'del', text: a[x] });
-    }
-  }
-  // Any remaining diagonal at d=0
-  while (x > 0 && y > 0) {
-    x--;
-    y--;
-    ops.push({ op: 'eq', text: a[x] });
-  }
-
-  return ops.reverse();
-}
-
-const InlineDiff: React.FC<{ original: string; edited: string }> = ({ original, edited }) => {
-  const ops = computeWordDiff(original, edited);
-  return (
-    <div className={styles['diff-preview']}>
-      {ops.map((op, i) => {
-        switch (op.op) {
-          case 'eq':
-            return <span key={i}>{op.text}</span>;
-          case 'del':
-            return (
-              <span key={i} className={styles['diff-del']}>
-                {op.text}
-              </span>
-            );
-          case 'add':
-            return (
-              <span key={i} className={styles['diff-add']}>
-                {op.text}
-              </span>
-            );
-        }
-      })}
-    </div>
-  );
 };
 
 const GradingCommentSelector: React.FC<Props> = props => {
-  const [editingIndex, setEditingIndex] = useState<number | null>(null);
-
-  const handleToggleEdit = useCallback(
-    (index: number) => {
-      if (editingIndex === index) {
-        setEditingIndex(null);
-      } else {
-        // Initialise edit text with original if not already edited
-        if (props.edits[index] === undefined) {
-          props.onEditChange(index, props.comments[index]);
-        }
-        setEditingIndex(index);
-      }
-    },
-    [editingIndex, props]
-  );
-
   return (
     <div className={styles['grading-comment-selector']}>
       <H5 className={styles['grading-comment-selector-title']}>LLM Comment Suggestions:</H5>
@@ -149,9 +21,6 @@ const GradingCommentSelector: React.FC<Props> = props => {
           {props.comments.length > 0 ? (
             props.comments.map((comment, index) => {
               const isSelected = props.selectedIndices.includes(index);
-              const isEditing = editingIndex === index;
-              const editedText = props.edits[index];
-              const hasEdits = editedText !== undefined && editedText !== comment;
 
               return (
                 <div
@@ -167,33 +36,7 @@ const GradingCommentSelector: React.FC<Props> = props => {
                     <div className={styles['comment-text']} onClick={() => props.onToggle(index)}>
                       {comment}
                     </div>
-                    {isSelected && (
-                      <Button
-                        small
-                        minimal
-                        icon={isEditing ? IconNames.CHEVRON_UP : IconNames.EDIT}
-                        onClick={() => handleToggleEdit(index)}
-                        className={styles['edit-button']}
-                      />
-                    )}
                   </div>
-
-                  {isEditing && (
-                    <div className={styles['edit-section']}>
-                      <TextArea
-                        fill
-                        value={editedText ?? comment}
-                        onChange={e => props.onEditChange(index, e.target.value)}
-                        className={styles['edit-textarea']}
-                      />
-                      {hasEdits && (
-                        <>
-                          <H5 className={styles['diff-title']}>Changes:</H5>
-                          <InlineDiff original={comment} edited={editedText} />
-                        </>
-                      )}
-                    </div>
-                  )}
                 </div>
               );
             })
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 592b66afcd..bafc686100 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -11,7 +11,7 @@ import {
   Pre
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMde, { ReactMdeProps } from 'react-mde';
 import { useDispatch } from 'react-redux';
 import { AutogradingResult, LLMPrompt } from 'src/commons/assessment/AssessmentTypes';
@@ -21,11 +21,7 @@ import SessionActions from '../../../../commons/application/actions/SessionActio
 import ControlButton from '../../../../commons/ControlButton';
 import Markdown from '../../../../commons/Markdown';
 import { Prompt } from '../../../../commons/ReactRouterPrompt';
-import {
-  postGenerateComments,
-  saveChosenComments,
-  saveFinalComment
-} from '../../../../commons/sagas/RequestsSaga';
+import { postGenerateComments, saveChosenComments } from '../../../../commons/sagas/RequestsSaga';
 import { getPrettyDate } from '../../../../commons/utils/DateHelper';
 import { showSimpleConfirmDialog } from '../../../../commons/utils/DialogHelper';
 import {
@@ -66,10 +62,13 @@ type Props = {
 };
 
 const gradingEditorButtonClass = 'grading-editor-button';
+const EMPTY_SELECTION_SAVE_KEY = JSON.stringify({ selected_indices: [], edits: {} });
 
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useDispatch();
   const tokens = useTokens();
+  const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
+  const saveInFlightRef = useRef<boolean>(false);
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
       ({
@@ -114,68 +113,178 @@ const GradingEditor: React.FC<Props> = props => {
    * appear although there exist unsaved changes
    */
   const [currentlySaving, setCurrentlySaving] = useState(false);
+  const [isSaveInFlight, setIsSaveInFlight] = useState(false);
 
   useEffect(() => {
     makeInitialState();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.submissionId, props.questionId]);
 
+  // Unlock save controls once Redux props refresh after a save cycle.
+  useEffect(() => {
+    saveInFlightRef.current = false;
+    setIsSaveInFlight(false);
+  }, [props.comments, props.xpAdjustment, props.gradedAt, props.submissionId, props.questionId]);
+
   const getCommentSuggestions = async () => {
     const resp = await postGenerateComments(tokens, props.answer_id);
     return resp;
   };
 
-  const onToggleComment = (index: number) => {
-    setSelectedIndices(prev =>
-      prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
-    );
+  // Invisible delimiters used internally to preserve per-comment editing state
+  // without showing any marker text in the editor.
+  const COMMENT_SEPARATOR = '\n\u2063\u2063\n';
+  const SECTION_MARKER = '\n\u2064\u2064\n';
+
+  /**
+   * Splits the editor value into the user's freeform text (above the marker)
+   * and the generated-comments block (below the marker).
+   */
+  const splitEditor = (value: string): { userText: string; commentsBlock: string } => {
+    const markerIdx = value.indexOf(SECTION_MARKER);
+    if (markerIdx === -1) {
+      return { userText: value, commentsBlock: '' };
+    }
+    return {
+      userText: value.slice(0, markerIdx),
+      commentsBlock: value.slice(markerIdx + SECTION_MARKER.length)
+    };
   };
 
-  const onEditChange = (index: number, text: string) => {
-    setCommentEdits(prev => ({ ...prev, [index]: text }));
+  /**
+   * Joins the user freeform text and the generated-comments block back together.
+   * If there are no selected comments the marker is omitted so the editor stays clean.
+   */
+  const joinEditor = (userText: string, commentsBlock: string): string => {
+    if (!commentsBlock) return userText;
+    return userText + SECTION_MARKER + commentsBlock;
   };
 
-  const applySelectedComments = () => {
-    const parts = selectedIndices
+  const buildCommentsBlock = (indices: number[], texts: Record<number, string>) => {
+    return [...indices]
       .sort((a, b) => a - b)
-      .map(i => commentEdits[i] ?? suggestions[i])
-      .filter(Boolean);
-    setEditorValue(parts.join('\n\n'));
+      .map(i => texts[i])
+      .filter(Boolean)
+      .join(COMMENT_SEPARATOR);
   };
 
-  const handleSaveChosenComments = async () => {
-    // Only send edits for comments that were actually changed
+  /**
+   * Parses the current comments block back into per-comment texts so that
+   * user edits made directly in the editor are preserved.
+   */
+  const syncCommentsBlock = (
+    commentsBlock: string,
+    indices: number[],
+    currentTexts: Record<number, string>
+  ): Record<number, string> => {
+    const sorted = [...indices].sort((a, b) => a - b);
+    if (sorted.length === 0) return { ...currentTexts };
+    const parts = commentsBlock.split(COMMENT_SEPARATOR);
+    const updated = { ...currentTexts };
+
+    sorted.forEach((idx, i) => {
+      if (i < parts.length) {
+        updated[idx] = parts[i];
+      }
+    });
+
+    // If user added extra separators, fold remainder into the last comment
+    if (parts.length > sorted.length && sorted.length > 0) {
+      const lastIdx = sorted[sorted.length - 1];
+      updated[lastIdx] = parts.slice(sorted.length - 1).join(COMMENT_SEPARATOR);
+    }
+
+    return updated;
+  };
+
+  const onToggleComment = (index: number) => {
+    const isDeselecting = selectedIndices.includes(index);
+    const { userText, commentsBlock } = splitEditor(editorValue);
+
+    // Sync current comments block back to per-comment texts
+    const synced =
+      selectedIndices.length > 0
+        ? syncCommentsBlock(commentsBlock, selectedIndices, commentTexts)
+        : { ...commentTexts };
+
+    if (isDeselecting) {
+      const newTexts = { ...synced };
+      const newIndices = selectedIndices.filter(i => i !== index);
+      setCommentTexts(newTexts);
+      setSelectedIndices(newIndices);
+      setEditorValue(joinEditor(userText, buildCommentsBlock(newIndices, newTexts)));
+    } else {
+      const newTexts = { ...synced };
+      if (newTexts[index] === undefined) {
+        newTexts[index] = suggestions[index];
+      }
+      const newIndices = [...selectedIndices, index];
+      setCommentTexts(newTexts);
+      setSelectedIndices(newIndices);
+      setEditorValue(joinEditor(userText, buildCommentsBlock(newIndices, newTexts)));
+    }
+  };
+
+  const stripInternalMarkers = (value: string): string => {
+    return value.replaceAll(SECTION_MARKER, '\n').replaceAll(COMMENT_SEPARATOR, '\n');
+  };
+
+  const postSaveChosenComments = async (): Promise<boolean> => {
+    // Only persist AI selections when this answer has generated suggestions.
+    if (!props.is_llm || suggestions.length === 0) {
+      return true;
+    }
+
+    const { commentsBlock } = splitEditor(editorValue);
+    const synced =
+      selectedIndices.length > 0
+        ? syncCommentsBlock(commentsBlock, selectedIndices, commentTexts)
+        : { ...commentTexts };
+
+    setCommentTexts(synced);
+
+    const sortedSelectedIndices = [...selectedIndices].sort((a, b) => a - b);
+
+    // Send only edits that differ from the original generated text.
     const changedEdits: Record<number, string> = {};
-    for (const idx of selectedIndices) {
-      if (commentEdits[idx] !== undefined && commentEdits[idx] !== suggestions[idx]) {
-        changedEdits[idx] = commentEdits[idx];
+    sortedSelectedIndices.forEach(idx => {
+      const original = suggestions[idx] ?? '';
+      const edited = synced[idx] ?? original;
+      if (edited !== original) {
+        changedEdits[idx] = stripInternalMarkers(edited);
       }
+    });
+
+    const currentSelectionKey = JSON.stringify({
+      selected_indices: sortedSelectedIndices,
+      edits: changedEdits
+    });
+
+    // Avoid rewriting identical selection state on repeated saves.
+    if (currentSelectionKey === lastSavedSelectionKeyRef.current) {
+      return true;
     }
 
     const resp = await saveChosenComments(
       tokens,
-      props.submissionId,
-      props.questionId,
       props.answer_id,
-      selectedIndices,
+      sortedSelectedIndices,
       changedEdits
     );
 
-    if (resp && resp.ok) {
-      showSuccessMessage('Chosen comments saved!', 2000);
-    } else {
-      showWarningMessage('Failed to save chosen comments');
+    if (!resp || !resp.ok) {
+      showWarningMessage('Failed to save selected AI comments. Please try again.');
+      return false;
     }
-  };
 
-  const postSaveFinalComment = async (comment: string) => {
-    const resp = await saveFinalComment(tokens, props.answer_id, comment);
-    return resp;
+    lastSavedSelectionKeyRef.current = currentSelectionKey;
+
+    return true;
   };
 
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
-  const [commentEdits, setCommentEdits] = useState<Record<number, string>>({});
+  const [commentTexts, setCommentTexts] = useState<Record<number, string>>({});
   const [hasClickedGenerate, setHasClickedGenerate] = useState<boolean>(false);
   const [isViewLLMPromptOpen, setIsViewLLMPromptOpen] = useState<boolean>(false);
   const [hasGenerated, setHasGenerated] = useState<boolean>(false); //If generate comments button has been pressed
@@ -190,6 +299,9 @@ const GradingEditor: React.FC<Props> = props => {
     setSuggestions(existingComments);
     //Lock the button if we already have comments for this submission
     setHasGenerated(existingComments.length > 0);
+    setSelectedIndices([]);
+    setCommentTexts({});
+    lastSavedSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
   };
 
   /**
@@ -211,17 +323,33 @@ const GradingEditor: React.FC<Props> = props => {
   const validateXpBeforeSave =
     (handleSaving: GradingSaveFunction): (() => void) =>
     async () => {
+      if (saveInFlightRef.current) {
+        return;
+      }
+
       const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined) || undefined;
       const xp = props.initialXp + (newXpAdjustmentInput || 0);
-      await postSaveFinalComment(editorValue);
+
       if (xp < 0 || xp > props.maxXp) {
         showWarningMessage(
           `XP ${xp.toString()} is out of bounds. Maximum xp is ${props.maxXp.toString()}.`
         );
         return;
-      } else {
-        handleSaving(props.submissionId, props.questionId, newXpAdjustmentInput, editorValue);
       }
+
+      const cleanedEditorValue = stripInternalMarkers(editorValue);
+
+      saveInFlightRef.current = true;
+      setIsSaveInFlight(true);
+
+      const hasSavedChosenComments = await postSaveChosenComments();
+      if (!hasSavedChosenComments) {
+        saveInFlightRef.current = false;
+        setIsSaveInFlight(false);
+        return;
+      }
+
+      handleSaving(props.submissionId, props.questionId, newXpAdjustmentInput, cleanedEditorValue);
     };
 
   /**
@@ -242,6 +370,20 @@ const GradingEditor: React.FC<Props> = props => {
     callback();
   };
 
+  const onClickSaveChanges: GradingSaveFunction = (
+    submissionId: number,
+    questionId: number,
+    xpAdjustment: number | undefined,
+    comments?: string
+  ) => {
+    const callback = (): void => {
+      handleGradingSave(submissionId, questionId, xpAdjustment, comments!);
+    };
+    setCurrentlySaving(true);
+    // TODO: Check (not sure how) if this results in a regression.
+    callback();
+  };
+
   const onClickReautogradeAnswer = async () => {
     const confirm = await showSimpleConfirmDialog({
       contents: (
@@ -318,16 +460,19 @@ const GradingEditor: React.FC<Props> = props => {
   const saveButtonOpts = {
     intent: hasUnsavedChanges || isNewQuestion ? Intent.WARNING : Intent.NONE,
     minimal: !hasUnsavedChanges && !isNewQuestion,
+    disabled: isSaveInFlight,
     className: gradingEditorButtonClass
   };
   const discardButtonOpts = {
     intent: hasUnsavedChanges ? Intent.DANGER : Intent.NONE,
     minimal: !hasUnsavedChanges,
+    disabled: isSaveInFlight,
     className: gradingEditorButtonClass
   };
   const saveAndContinueButtonOpts = {
     intent: hasUnsavedChanges || isNewQuestion ? Intent.SUCCESS : Intent.NONE,
     minimal: !hasUnsavedChanges && !isNewQuestion,
+    disabled: isSaveInFlight,
     className: gradingEditorButtonClass
   };
   const onTabChange = (tab: ReactMdeProps['selectedTab']) => setSelectedTab(tab);
@@ -436,11 +581,9 @@ const GradingEditor: React.FC<Props> = props => {
           <div style={{ marginBottom: '10px' }}>
             <GradingCommentSelector
               onToggle={onToggleComment}
-              onEditChange={onEditChange}
               isLoading={hasClickedGenerate}
               comments={suggestions}
               selectedIndices={selectedIndices}
-              edits={commentEdits}
             />
             <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
               <Button
@@ -467,23 +610,12 @@ const GradingEditor: React.FC<Props> = props => {
                     showSuccessMessage('Comments generated and saved!');
                   }
                   setSelectedIndices([]);
-                  setCommentEdits({});
+                  setCommentTexts({});
                 }}
               >
                 {hasGenerated ? 'Comments Generated' : 'Generate Comments'}
               </Button>
 
-              {selectedIndices.length > 0 && (
-                <>
-                  <Button intent="success" onClick={applySelectedComments}>
-                    Apply Selected
-                  </Button>
-                  <Button intent="warning" onClick={handleSaveChosenComments}>
-                    Save Selections
-                  </Button>
-                </>
-              )}
-
               <LLMFeedbackButton
                 tokens={tokens}
                 assessmentId={props.assessmentId}
@@ -514,7 +646,7 @@ const GradingEditor: React.FC<Props> = props => {
             <ControlButton
               label="Save Changes"
               icon={IconNames.FLOPPY_DISK}
-              onClick={validateXpBeforeSave(handleGradingSave)}
+              onClick={validateXpBeforeSave(onClickSaveChanges)}
               options={saveButtonOpts}
             />
           </div>

From 28e3c3d86a6c756396b8ea4d2d100f3ef3d6884a Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Mon, 16 Mar 2026 18:07:25 +0800
Subject: [PATCH 08/45] refactor(api): simplify saveChosenComments to
 answer-based endpoint

---
 src/commons/sagas/RequestsSaga.ts | 34 +++++++------------------------
 1 file changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 62a7b9c214..c3b3eeb943 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1572,39 +1572,19 @@ export const postGenerateComments = async (
   return await resp.json();
 };
 
-export const saveFinalComment = async (
-  tokens: Tokens,
-  answer_id: number,
-  comment: string
-): Promise<Response | null> => {
-  const resp = await request(`${courseId()}/admin/save-final-comment/${answer_id}`, 'POST', {
-    body: { comment: comment },
-    ...tokens
-  });
-
-  return resp;
-};
-
 export const saveChosenComments = async (
   tokens: Tokens,
-  submissionId: number,
-  questionId: number,
   answerId: number,
   selectedIndices: number[],
   edits: Record<number, string>
 ): Promise<Response | null> => {
-  const resp = await request(
-    `${courseId()}/admin/save-chosen-comments/${submissionId}/${questionId}`,
-    'POST',
-    {
-      body: {
-        answer_id: answerId,
-        selected_indices: selectedIndices,
-        edits: edits
-      },
-      ...tokens
-    }
-  );
+  const resp = await request(`${courseId()}/admin/save-chosen-comments/${answerId}`, 'POST', {
+    body: {
+      selected_indices: selectedIndices,
+      edits: edits
+    },
+    ...tokens
+  });
 
   return resp;
 };

From eacfe9456ec3fcb6a4c087f0bd1a681701292dd1 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Fri, 20 Mar 2026 20:51:56 +0800
Subject: [PATCH 09/45] feat: implement AI token cost tracking and stats UI

---
 src/commons/application/types/SessionTypes.ts |  6 ++
 src/commons/assessment/AssessmentTypes.ts     |  7 ++
 .../subcomponents/CourseConfigPanel.tsx       | 39 +++++++++++
 .../grading/subcomponents/GradingEditor.tsx   | 70 +++++++------------
 .../subcomponents/LLMStatsDialog.tsx          | 59 +++++++++++++++-
 5 files changed, 136 insertions(+), 45 deletions(-)

diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
index 10fc7b52d7..592db997ab 100644
--- a/src/commons/application/types/SessionTypes.ts
+++ b/src/commons/application/types/SessionTypes.ts
@@ -55,6 +55,9 @@ export type SessionState = {
   readonly assessmentConfigurations?: AssessmentConfiguration[];
   readonly userCourseRegistrations?: AdminPanelCourseRegistration[];
 
+  readonly llmInputCost?: number;
+  readonly llmOutputCost?: number;
+
   // For research data collection
   readonly agreedToResearch?: boolean | null;
   readonly sessionId: number;
@@ -125,6 +128,9 @@ export type CourseConfiguration = {
   llmModel?: string;
   llmApiUrl?: string;
   llmCourseLevelPrompt?: string;
+  //For llm token consumption calc
+  llmInputCost?: number;
+  llmOutputCost?: number;
 };
 
 export type AdminPanelCourseRegistration = {
diff --git a/src/commons/assessment/AssessmentTypes.ts b/src/commons/assessment/AssessmentTypes.ts
index b05e4e8b75..c6c18ff1db 100644
--- a/src/commons/assessment/AssessmentTypes.ts
+++ b/src/commons/assessment/AssessmentTypes.ts
@@ -84,6 +84,13 @@ export type AssessmentOverview = {
   xp: number;
   maxTeamSize: number; // For team assessment
   hoursBeforeEarlyXpDecay: number;
+  // For llm token tracking
+  llmInputCost?: number;
+  llmOutputCost?: number;
+  llmTotalInputTokens?: number;
+  llmTotalOutputTokens?: number;
+  llmTotalCachedTokens?: number;
+  llmTotalCost?: string | number;
 };
 
 /*
diff --git a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
index 288e75f80a..45a13f61ad 100644
--- a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
@@ -236,6 +236,45 @@ const CourseConfigPanel: React.FC<Props> = props => {
                   }
                 />
               </FormGroup>
+
+              <FormGroup
+                helperText="Input Cost per 1M tokens in SGD (e.g., 3.20 for GPT-4o). Leave blank for default rate of 12.80 for GPT-4o as of Mar 2026"
+                inline={true}
+                label="LLM Input Cost (SGD)"
+                labelFor="llmInputCost"
+              >
+                <InputGroup
+                  id="llmInputCost"
+                  placeholder="3.20"
+                  value={String(props.courseConfiguration.llmInputCost || '')}
+                  onChange={e =>
+                    props.setCourseConfiguration({
+                      ...props.courseConfiguration,
+                      llmInputCost: Number(e.target.value)
+                    })
+                  }
+                />
+              </FormGroup>
+
+              <FormGroup
+                helperText="Output Cost per 1M tokens in SGD (e.g., 12.80 for GPT-4o). Leave blank for default rate of 12.80 for GPT-4o as of Mar 2026"
+                inline={true}
+                label="LLM Output Cost (SGD)"
+                labelFor="llmOutputCost"
+              >
+                <InputGroup
+                  id="llmOutputCost"
+                  placeholder="12.80"
+                  value={String(props.courseConfiguration.llmOutputCost || '')}
+                  onChange={e =>
+                    props.setCourseConfiguration({
+                      ...props.courseConfiguration,
+                      llmOutputCost: Number(e.target.value)
+                    })
+                  }
+                />
+              </FormGroup>
+
               <FormGroup
                 helperText={
                   <span>
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index eb88f2baa8..f719f6bf4e 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -120,23 +120,12 @@ const GradingEditor: React.FC<Props> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.submissionId, props.questionId]);
 
-<<<<<<< HEAD
-  const onToggleComment = (index: number) => {
-    setSelectedIndices(prev =>
-      prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
-    );
-=======
   // Unlock save controls once Redux props refresh after a save cycle.
   useEffect(() => {
     saveInFlightRef.current = false;
     setIsSaveInFlight(false);
   }, [props.comments, props.xpAdjustment, props.gradedAt, props.submissionId, props.questionId]);
 
-  const getCommentSuggestions = async () => {
-    const resp = await postGenerateComments(tokens, props.answer_id);
-    return resp;
-  };
-
   // Invisible delimiters used internally to preserve per-comment editing state
   // without showing any marker text in the editor.
   const COMMENT_SEPARATOR = '\n\u2063\u2063\n';
@@ -155,7 +144,6 @@ const GradingEditor: React.FC<Props> = props => {
       userText: value.slice(0, markerIdx),
       commentsBlock: value.slice(markerIdx + SECTION_MARKER.length)
     };
->>>>>>> zhengjiadad/feature-ai-comments
   };
 
   /**
@@ -491,27 +479,40 @@ const GradingEditor: React.FC<Props> = props => {
   }`;
 
   const handleGenerate = async (force: boolean = false) => {
-    // If we are re-generating, ask for confirmation first
     if (force) {
       const confirm = await showSimpleConfirmDialog({
         contents: (
-          <p>Are you sure? Doing so will result in the previous prompt results being lost.</p>
+          <>
+            <p>Are you sure? Doing so will result in the previous prompt results being lost.</p>
+            <p>
+              <b>Note: This will incur additional LLM token costs.</b>
+            </p>
+          </>
         ),
         positiveLabel: 'Re-generate',
-        positiveIntent: 'danger'
+        positiveIntent: Intent.DANGER
       });
+
       if (!confirm) return;
     }
 
     setHasClickedGenerate(true);
-    // Pass a flag to the backend to tell it to ignore the cache
-    const resp = await postGenerateComments(tokens, props.answer_id, force);
-    setHasClickedGenerate(false);
-
-    if (resp && resp.comments) {
-      setSuggestions(resp.comments);
-      setHasGenerated(true);
-      showSuccessMessage(force ? 'Comments re-generated!' : 'Comments generated!');
+
+    try {
+      const resp = await postGenerateComments(tokens, props.answer_id, force);
+
+      if (resp && resp.comments) {
+        setSuggestions(resp.comments);
+        setHasGenerated(true);
+        setSelectedIndices([]);
+        setCommentTexts({});
+
+        showSuccessMessage(force ? 'Comments re-generated!' : 'Comments generated!');
+      }
+    } catch (error) {
+      showWarningMessage('Failed to generate comments. Please try again.');
+    } finally {
+      setHasClickedGenerate(false);
     }
   };
 
@@ -627,29 +628,10 @@ const GradingEditor: React.FC<Props> = props => {
               </Button>
 
               <Button
-<<<<<<< HEAD
-                intent={hasGenerated ? 'none' : 'primary'}
+                intent={hasGenerated ? Intent.NONE : Intent.PRIMARY}
                 loading={hasClickedGenerate}
+                disabled={hasClickedGenerate}
                 onClick={() => handleGenerate(hasGenerated)}
-=======
-                intent="primary"
-                //Disable if currently fetching OR if we already have comments
-                disabled={hasClickedGenerate || hasGenerated}
-                onClick={async () => {
-                  setHasClickedGenerate(true);
-                  const resp = await getCommentSuggestions();
-                  setHasClickedGenerate(false);
-
-                  if (resp && resp.comments) {
-                    setSuggestions(resp.comments);
-                    //Lock the button locally once successful
-                    setHasGenerated(true);
-                    showSuccessMessage('Comments generated and saved!');
-                  }
-                  setSelectedIndices([]);
-                  setCommentTexts({});
-                }}
->>>>>>> zhengjiadad/feature-ai-comments
               >
                 {hasGenerated ? 'Re-generate Comments' : 'Generate Comments'}
               </Button>
diff --git a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
index 69f65de82d..af064ba64a 100644
--- a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
+++ b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
@@ -41,6 +41,10 @@ type AssessmentStats = {
   unique_submissions: number;
   unique_users: number;
   questions: QuestionStat[];
+  llm_total_cost?: string | number;
+  llm_total_input_tokens?: number;
+  llm_total_output_tokens?: number;
+  llm_total_cached_tokens?: number;
 };
 
 type QuestionDetailStats = {
@@ -141,13 +145,22 @@ type LLMStatsDialogProps = {
   onClose: () => void;
   assessmentId: number;
   assessmentTitle: string;
+  //for cost tracking
+  llmTotalInputTokens?: number;
+  llmTotalOutputTokens?: number;
+  llmTotalCachedTokens?: number;
+  llmTotalCost?: string | number;
 };
 
 const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
   isOpen,
   onClose,
   assessmentId,
-  assessmentTitle
+  assessmentTitle,
+  llmTotalInputTokens,
+  llmTotalOutputTokens,
+  llmTotalCachedTokens,
+  llmTotalCost
 }) => {
   const tokens = useTokens();
   const tokensRef = useRef(tokens);
@@ -279,6 +292,50 @@ const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
               <StatCard label="Unique Users" value={stats.unique_users} />
             </div>
 
+            <Divider style={{ margin: '20px 0' }} />
+
+            {/* LLM Usage & Cost */}
+            <H5>LLM Usage & Cost</H5>
+            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' }}>
+              <Card
+                style={{
+                  flex: 1,
+                  textAlign: 'center',
+                  padding: '12px',
+                  minWidth: '140px',
+                  borderTop: '3px solid #0F9960'
+                }}
+              >
+                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#0F9960' }}>
+                  {/* Read from stats first, fallback to props, then 0 */}
+                  {`$${parseFloat(String(stats.llm_total_cost ?? llmTotalCost ?? 0)).toFixed(4)}`}
+                </div>
+                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+                  Total Cost (SGD)
+                </div>
+              </Card>
+              <StatCard
+                label="Standard Input"
+                value={(stats.llm_total_input_tokens ?? llmTotalInputTokens ?? 0).toLocaleString()}
+              />
+              <StatCard
+                label="Cached (Saved)"
+                value={(
+                  stats.llm_total_cached_tokens ??
+                  llmTotalCachedTokens ??
+                  0
+                ).toLocaleString()}
+              />
+              <StatCard
+                label="Output Tokens"
+                value={(
+                  stats.llm_total_output_tokens ??
+                  llmTotalOutputTokens ??
+                  0
+                ).toLocaleString()}
+              />
+            </div>
+
             {/* Task List */}
             <Divider style={{ margin: '16px 0' }} />
             <H4>Tasks</H4>

From 9cfa21add76d1afe2071e65774ab97aa4b0b1594 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Sat, 28 Mar 2026 12:22:28 +0800
Subject: [PATCH 10/45] Added a new tab for coursewide summary for LLM stats

---
 src/commons/adminStats/LLMStatsTab.tsx        | 363 +++++++++++++
 src/commons/application/types/SessionTypes.ts |   2 +
 src/commons/assessment/AssessmentTypes.ts     |  29 +
 src/commons/navigationBar/NavigationBar.tsx   |  13 +-
 .../subcomponents/AcademyNavigationBar.tsx    |  29 +-
 .../__tests__/AcademyNavigationBar.test.tsx   |  69 ++-
 .../AcademyNavigationBar.test.tsx.snap        | 514 ------------------
 src/commons/sagas/RequestsSaga.ts             |  14 +
 .../sagas/__tests__/BackendSaga.test.ts       |  33 ++
 src/pages/academy/academyRoutes.test.ts       | 147 +++++
 src/pages/academy/academyRoutes.ts            |  14 +-
 src/pages/academy/llmStats/LLMStatsPage.tsx   |  13 +
 src/styles/CourseConfig.module.scss           |  21 +-
 vitest.config.ts                              |   7 +
 14 files changed, 735 insertions(+), 533 deletions(-)
 create mode 100644 src/commons/adminStats/LLMStatsTab.tsx
 delete mode 100644 src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.test.tsx.snap
 create mode 100644 src/pages/academy/academyRoutes.test.ts
 create mode 100644 src/pages/academy/llmStats/LLMStatsPage.tsx

diff --git a/src/commons/adminStats/LLMStatsTab.tsx b/src/commons/adminStats/LLMStatsTab.tsx
new file mode 100644
index 0000000000..164cde569f
--- /dev/null
+++ b/src/commons/adminStats/LLMStatsTab.tsx
@@ -0,0 +1,363 @@
+import {
+  Button,
+  Card,
+  Divider,
+  H3,
+  H4,
+  Icon,
+  Intent,
+  NonIdealState,
+  Spinner,
+  SpinnerSize,
+  Tag
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { LLMAssessmentStat, LLMCourseStat, LLMQuestionStat } from '../assessment/AssessmentTypes';
+import { getLLMCourseStats } from '../sagas/RequestsSaga';
+import { useTokens } from '../utils/Hooks';
+
+const formatNumber = (value: number | string | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '0';
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? value : parsed.toLocaleString();
+  }
+  return value.toLocaleString();
+};
+
+const formatCost = (value: number | string | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '$0.00';
+  }
+  const parsed = Number(value);
+  if (Number.isNaN(parsed)) {
+    return `${value}`;
+  }
+  return `$${parsed.toFixed(2)}`;
+};
+
+const getTotalTokens = (assessment: LLMAssessmentStat): number => {
+  return (assessment.llm_total_input_tokens || 0) + (assessment.llm_total_output_tokens || 0);
+};
+
+const getQuestionTotalTokens = (question: LLMQuestionStat): number => {
+  return (question.llm_total_input_tokens || 0) + (question.llm_total_output_tokens || 0);
+};
+
+const LLMStatsTab: React.FC = () => {
+  const { accessToken, refreshToken } = useTokens();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<LLMCourseStat | null>(null);
+  const [sortKey, setSortKey] = useState<
+    'title' | 'category' | 'total_uses' | 'total_tokens' | 'llm_total_cost' | 'avg_rating'
+  >('llm_total_cost');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [expanded, setExpanded] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    const fetch = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const resp = await getLLMCourseStats({ accessToken, refreshToken });
+        if (!resp) {
+          setError('Failed to load LLM statistics.');
+        } else {
+          setData(resp);
+        }
+      } catch (err) {
+        setError('Failed to load LLM statistics.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetch();
+  }, [accessToken, refreshToken]);
+
+  const sortedAssessments: LLMAssessmentStat[] = useMemo(() => {
+    if (!data?.assessments) {
+      return [];
+    }
+
+    const assessments = [...data.assessments];
+    const compare = (a: LLMAssessmentStat, b: LLMAssessmentStat): number => {
+      const direction = sortDirection === 'asc' ? 1 : -1;
+      switch (sortKey) {
+        case 'title':
+          return direction * a.title.localeCompare(b.title);
+        case 'category':
+          return direction * a.category.localeCompare(b.category);
+        case 'total_uses':
+          return direction * (a.total_uses - b.total_uses);
+        case 'avg_rating':
+          return direction * ((a.avg_rating || 0) - (b.avg_rating || 0));
+        case 'llm_total_cost':
+          return direction * (Number(a.llm_total_cost || 0) - Number(b.llm_total_cost || 0));
+        case 'total_tokens':
+          return direction * (getTotalTokens(a) - getTotalTokens(b));
+        default:
+          return 0;
+      }
+    };
+
+    return assessments.sort(compare);
+  }, [data, sortKey, sortDirection]);
+
+  const toggleSort = (key: typeof sortKey) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortDirection('desc');
+    }
+  };
+
+  const toggleRow = (assessmentId: number) => {
+    const next = new Set(expanded);
+    if (next.has(assessmentId)) {
+      next.delete(assessmentId);
+    } else {
+      next.add(assessmentId);
+    }
+    setExpanded(next);
+  };
+
+  const downloadReport = () => {
+    if (!data) {
+      return;
+    }
+
+    const headers = [
+      'Assessment Title',
+      'Category',
+      'Question Number',
+      'Uses',
+      'Input Tokens',
+      'Output Tokens',
+      'Total Tokens',
+      'Cost',
+      'Avg Rating'
+    ];
+
+    const rows: string[] = [];
+    data.assessments.forEach(assessment => {
+      if (assessment.questions.length === 0) {
+        rows.push(
+          [
+            assessment.title,
+            assessment.category,
+            '',
+            assessment.total_uses.toString(),
+            assessment.llm_total_input_tokens.toString(),
+            assessment.llm_total_output_tokens.toString(),
+            getTotalTokens(assessment).toString(),
+            Number(assessment.llm_total_cost || 0).toFixed(6),
+            assessment.avg_rating?.toString() ?? ''
+          ].join(',')
+        );
+      } else {
+        assessment.questions.forEach(question => {
+          rows.push(
+            [
+              assessment.title,
+              assessment.category,
+              question.display_order.toString(),
+              question.total_uses.toString(),
+              question.llm_total_input_tokens.toString(),
+              question.llm_total_output_tokens.toString(),
+              getQuestionTotalTokens(question).toString(),
+              Number(question.llm_total_cost || 0).toFixed(6),
+              question.avg_rating?.toString() ?? ''
+            ].join(',')
+          );
+        });
+      }
+    });
+
+    const content = [headers.join(','), ...rows].join('\n');
+    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.setAttribute('download', 'llm_stats_report.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <Spinner size={SpinnerSize.STANDARD} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <NonIdealState
+        icon={IconNames.ERROR}
+        title="Unable to load LLM statistics"
+        description={error}
+      />
+    );
+  }
+
+  if (!data || data.assessments.length === 0) {
+    return (
+      <NonIdealState
+        icon={IconNames.CHART}
+        title="No LLM usage data yet"
+        description="Once students start generating comments, this panel will show LLM statistics."
+      />
+    );
+  }
+
+  return (
+    <div style={{ padding: '14px' }}>
+      <div style={{ display: 'flex', gap: '12px', marginBottom: '12px', flexWrap: 'wrap' }}>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_input_tokens)}</H3>
+          <div>Course-wide Input Tokens</div>
+        </Card>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_output_tokens)}</H3>
+          <div>Course-wide Output Tokens</div>
+        </Card>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatCost(data.course_total_cost)}</H3>
+          <div>Total LLM Expenditure</div>
+        </Card>
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <H4 style={{ margin: '8px 0' }}>Assessments</H4>
+        <Button icon={IconNames.DOWNLOAD} intent={Intent.PRIMARY} onClick={downloadReport}>
+          Download Report
+        </Button>
+      </div>
+
+      <table
+        className="bp3-html-table bp3-html-table-striped bp3-html-table-condensed"
+        style={{ width: '100%', marginTop: '8px' }}
+      >
+        <thead>
+          <tr>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('title')}>
+                Title
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('category')}>
+                Category
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('total_uses')}>
+                Uses
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('total_tokens')}>
+                Total Tokens
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('llm_total_cost')}>
+                Total Cost
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('avg_rating')}>
+                Avg Rating
+              </Button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedAssessments.map(assessment => {
+            const isExpanded = expanded.has(assessment.assessment_id);
+            return (
+              <React.Fragment key={assessment.assessment_id}>
+                <tr
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => toggleRow(assessment.assessment_id)}
+                >
+                  <td>
+                    <span style={{ marginRight: '6px' }}>
+                      <Icon icon={isExpanded ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT} />
+                    </span>
+                    {assessment.title}
+                  </td>
+                  <td>{assessment.category}</td>
+                  <td>{assessment.total_uses}</td>
+                  <td>{formatNumber(getTotalTokens(assessment))}</td>
+                  <td>{formatCost(assessment.llm_total_cost)}</td>
+                  <td>
+                    {assessment.avg_rating === null || assessment.avg_rating === undefined
+                      ? 'N/A'
+                      : assessment.avg_rating.toFixed(2)}
+                  </td>
+                </tr>
+                {isExpanded && assessment.questions.length > 0 && (
+                  <tr>
+                    <td colSpan={6} style={{ padding: 0, background: '#f3f3f3' }}>
+                      <div style={{ padding: '8px' }}>
+                        <table
+                          className="bp3-html-table bp3-html-table-condensed"
+                          style={{ width: '100%' }}
+                        >
+                          <thead>
+                            <tr>
+                              <th>Question</th>
+                              <th>Uses</th>
+                              <th>Tokens</th>
+                              <th>Cost</th>
+                              <th>Avg Rating</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {assessment.questions.map(question => (
+                              <tr key={question.question_id}>
+                                <td>{question.display_order}</td>
+                                <td>{question.total_uses}</td>
+                                <td>{formatNumber(getQuestionTotalTokens(question))}</td>
+                                <td>{formatCost(question.llm_total_cost)}</td>
+                                <td>
+                                  {question.avg_rating === null || question.avg_rating === undefined
+                                    ? 'N/A'
+                                    : question.avg_rating.toFixed(2)}
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+
+      <Divider style={{ marginTop: '16px' }} />
+
+      <Tag minimal intent={Intent.PRIMARY} style={{ marginTop: '8px' }}>
+        Data is shown for published assessments and questions with LLM prompts.
+      </Tag>
+    </div>
+  );
+};
+
+export default LLMStatsTab;
diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
index 592db997ab..962cc07b26 100644
--- a/src/commons/application/types/SessionTypes.ts
+++ b/src/commons/application/types/SessionTypes.ts
@@ -40,6 +40,7 @@ export type SessionState = {
   readonly enableSourcecast?: boolean;
   readonly enableStories?: boolean;
   readonly enableLlmGrading?: boolean;
+  readonly hasLlmContent?: boolean;
   readonly llmModel?: string;
   readonly llmApiUrl?: string;
   readonly llmCourseLevelPrompt?: string;
@@ -117,6 +118,7 @@ export type CourseConfiguration = {
   enableSourcecast: boolean;
   enableStories: boolean;
   enableLlmGrading?: boolean;
+  hasLlmContent?: boolean;
   enableOverallLeaderboard: boolean;
   enableContestLeaderboard: boolean;
   topLeaderboardDisplay: number;
diff --git a/src/commons/assessment/AssessmentTypes.ts b/src/commons/assessment/AssessmentTypes.ts
index c6c18ff1db..0cb730323e 100644
--- a/src/commons/assessment/AssessmentTypes.ts
+++ b/src/commons/assessment/AssessmentTypes.ts
@@ -93,6 +93,35 @@ export type AssessmentOverview = {
   llmTotalCost?: string | number;
 };
 
+export type LLMQuestionStat = {
+  question_id: number;
+  display_order: number;
+  total_uses: number;
+  avg_rating: number | null;
+  llm_total_input_tokens: number;
+  llm_total_output_tokens: number;
+  llm_total_cost: string | number;
+};
+
+export type LLMAssessmentStat = {
+  assessment_id: number;
+  title: string;
+  category: string;
+  total_uses: number;
+  avg_rating: number | null;
+  llm_total_input_tokens: number;
+  llm_total_output_tokens: number;
+  llm_total_cost: string | number;
+  questions: LLMQuestionStat[];
+};
+
+export type LLMCourseStat = {
+  course_total_input_tokens: number;
+  course_total_output_tokens: number;
+  course_total_cost: string | number;
+  assessments: LLMAssessmentStat[];
+};
+
 /*
  * Used when an assessment is being actively attempted/graded.
  */
diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index 1093e1cbb8..0301732e65 100644
--- a/src/commons/navigationBar/NavigationBar.tsx
+++ b/src/commons/navigationBar/NavigationBar.tsx
@@ -102,6 +102,8 @@ const NavigationBar: React.FC = () => {
     enableContestLeaderboard,
     enableSourcecast,
     enableStories,
+    enableLlmGrading,
+    hasLlmContent,
     assessmentConfigurations
   } = useSession();
   const assessmentTypes = useMemo(
@@ -173,8 +175,15 @@ const NavigationBar: React.FC = () => {
   ]);
 
   const fullAcademyMobileNavbarLeftAdditionalInfo = useMemo(
-    () => getAcademyNavbarRightInfo({ isEnrolledInACourse, courseId, role }),
-    [isEnrolledInACourse, courseId, role]
+    () =>
+      getAcademyNavbarRightInfo({
+        isEnrolledInACourse,
+        courseId,
+        role,
+        enableLlmGrading,
+        hasLlmContent
+      }),
+    [isEnrolledInACourse, courseId, role, enableLlmGrading, hasLlmContent]
   );
 
   const fullAcademyMobileNavbarLeftInfoWithAssessments: NavbarEntryInfo[] = useMemo(() => {
diff --git a/src/commons/navigationBar/subcomponents/AcademyNavigationBar.tsx b/src/commons/navigationBar/subcomponents/AcademyNavigationBar.tsx
index 03e85ea9f6..428c06838a 100644
--- a/src/commons/navigationBar/subcomponents/AcademyNavigationBar.tsx
+++ b/src/commons/navigationBar/subcomponents/AcademyNavigationBar.tsx
@@ -13,7 +13,7 @@ type Props = {
 };
 
 const AcademyNavigationBar: React.FC<Props> = ({ assessmentTypes }) => {
-  const { role, courseId } = useSession();
+  const { role, courseId, enableLlmGrading } = useSession();
   const isEnrolledInACourse = !!role;
 
   const leftEntries: NavbarEntryInfo[] = useMemo(
@@ -22,8 +22,14 @@ const AcademyNavigationBar: React.FC<Props> = ({ assessmentTypes }) => {
   );
 
   const rightEntries: NavbarEntryInfo[] = useMemo(
-    () => getAcademyNavbarRightInfo({ isEnrolledInACourse, courseId, role }),
-    [isEnrolledInACourse, courseId, role]
+    () =>
+      getAcademyNavbarRightInfo({
+        isEnrolledInACourse,
+        courseId,
+        role,
+        enableLlmGrading
+      }),
+    [isEnrolledInACourse, courseId, role, enableLlmGrading]
   );
 
   if (courseId === undefined || !isEnrolledInACourse) {
@@ -78,10 +84,12 @@ export const assessmentTypesToNavlinkInfo = ({
 
 const getStaffNavlinkInfo = ({
   courseId,
-  role
+  role,
+  enableLlmGrading
 }: {
   courseId?: number;
   role?: Role;
+  enableLlmGrading?: boolean;
 }): NavbarEntryInfo[] => {
   const isStaffOrAdmin = role === Role.Admin || role === Role.Staff;
   const isAdmin = role === Role.Admin;
@@ -94,6 +102,13 @@ const getStaffNavlinkInfo = ({
       disabled: !isAdmin,
       hiddenInBreakpoints: ['xs', 'sm']
     },
+    {
+      to: `/courses/${courseId}/llmstats`,
+      icon: IconNames.CHART,
+      text: 'LLM Statistics',
+      disabled: !(isAdmin && enableLlmGrading),
+      hiddenInBreakpoints: ['xs', 'sm']
+    },
     {
       to: `/courses/${courseId}/dashboard`,
       icon: IconNames.GLOBE,
@@ -143,11 +158,13 @@ const getStaffNavlinkInfo = ({
 export const getAcademyNavbarRightInfo = ({
   isEnrolledInACourse,
   courseId,
-  role
+  role,
+  enableLlmGrading
 }: {
   isEnrolledInACourse: boolean;
   courseId?: number;
   role?: Role;
-}): NavbarEntryInfo[] => [...getStaffNavlinkInfo({ courseId, role })];
+  enableLlmGrading?: boolean;
+}): NavbarEntryInfo[] => [...getStaffNavlinkInfo({ courseId, role, enableLlmGrading })];
 
 export default AcademyNavigationBar;
diff --git a/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx b/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx
index 23f2c0e5d1..3f46db029d 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx
+++ b/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx
@@ -13,7 +13,8 @@ const useSelectorMock = useTypedSelector as Mock;
 
 const assessmentTypes = ['Missions', 'Quests', 'Paths', 'Contests', 'Others'];
 const staffRoutes = ['grading', 'sourcereel', 'gamesimulator', 'dashboard', 'teamformation'];
-const adminRoutes = ['groundcontrol', 'adminpanel'];
+const adminRoutes = ['groundcontrol', 'llmstats', 'adminpanel'];
+const adminRoutesWithoutLlmStats = ['groundcontrol', 'adminpanel'];
 const courseId = 0;
 const createCoursePath = (path: string) => `/courses/${courseId}/${path}`;
 
@@ -40,6 +41,11 @@ const validateAdminPaths = (tree: React.ReactElement, exist: boolean = true) =>
     expect(deepFilter(tree, createMatchFn(path), getChildren).length).toBe(exist ? 1 : 0);
   });
 
+const validateSpecificPaths = (tree: React.ReactElement, paths: string[], exist: boolean = true) =>
+  paths.forEach(path => {
+    expect(deepFilter(tree, createMatchFn(path), getChildren).length).toBe(exist ? 1 : 0);
+  });
+
 const mockProps = {
   assessmentTypes
 };
@@ -48,11 +54,12 @@ const element = <AcademyNavigationBar {...mockProps} />;
 test('MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Grading, Team Formation and AdminPanel NavLinks do NOT render for Role.Student', () => {
   useSelectorMock.mockReturnValue({
     role: Role.Student,
-    courseId
+    courseId,
+    enableLlmGrading: false,
+    hasLlmContent: false
   });
 
   const tree = shallowRender(element);
-  expect(tree).toMatchSnapshot();
 
   validateAssessmentPaths(tree, true);
   validateStaffPaths(tree, false);
@@ -62,25 +69,73 @@ test('MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Gradi
 test('MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Team Formation and Grading NavLinks render for Role.Staff', () => {
   useSelectorMock.mockReturnValueOnce({
     role: Role.Staff,
-    courseId
+    courseId,
+    enableLlmGrading: false,
+    hasLlmContent: false
   });
 
   const tree = shallowRender(element);
-  expect(tree).toMatchSnapshot();
 
   validateAssessmentPaths(tree, true);
   validateStaffPaths(tree, true);
   validateAdminPaths(tree, false);
 });
 
+test('MissionControl, GroundControl and AdminPanel render for Role.Admin when LLM grading is disabled, but LLM Statistics does not', () => {
+  useSelectorMock.mockReturnValueOnce({
+    role: Role.Admin,
+    courseId,
+    enableLlmGrading: false,
+    hasLlmContent: false
+  });
+
+  const tree = shallowRender(element);
+
+  validateAssessmentPaths(tree, true);
+  validateStaffPaths(tree, true);
+  validateSpecificPaths(tree, adminRoutesWithoutLlmStats.map(createCoursePath), true);
+  validateSpecificPaths(tree, [createCoursePath('llmstats')], false);
+});
+
+test('MissionControl, GroundControl and LLM Statistics render for Role.Admin when LLM grading is enabled even if there is no LLM content', () => {
+  useSelectorMock.mockReturnValueOnce({
+    role: Role.Admin,
+    courseId,
+    enableLlmGrading: true,
+    hasLlmContent: false
+  });
+
+  const tree = shallowRender(element);
+
+  validateAssessmentPaths(tree, true);
+  validateStaffPaths(tree, true);
+  validateAdminPaths(tree, true);
+});
+
+test('MissionControl, GroundControl and LLM Statistics render for Role.Admin when LLM grading is enabled and hasLlmContent is still loading', () => {
+  useSelectorMock.mockReturnValueOnce({
+    role: Role.Admin,
+    courseId,
+    enableLlmGrading: true,
+    hasLlmContent: undefined
+  });
+
+  const tree = shallowRender(element);
+
+  validateAssessmentPaths(tree, true);
+  validateStaffPaths(tree, true);
+  validateAdminPaths(tree, true);
+});
+
 test('MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Grading, Team Formation and AdminPanel NavLinks render for Role.Admin', () => {
   useSelectorMock.mockReturnValueOnce({
     role: Role.Admin,
-    courseId
+    courseId,
+    enableLlmGrading: true,
+    hasLlmContent: true
   });
 
   const tree = shallowRender(element);
-  expect(tree).toMatchSnapshot();
 
   validateAssessmentPaths(tree, true);
   validateStaffPaths(tree, true);
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.test.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.test.tsx.snap
deleted file mode 100644
index ada685c094..0000000000
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/AcademyNavigationBar.test.tsx.snap
+++ /dev/null
@@ -1,514 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Grading, Team Formation and AdminPanel NavLinks do NOT render for Role.Student 1`] = `
-<Blueprint6.Navbar
-  className="NavigationBar secondary-navbar"
->
-  <Blueprint6.NavbarGroup
-    align="left"
-  >
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="flame"
-      text="Missions"
-      to="/courses/0/missions"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="lightbulb"
-      text="Quests"
-      to="/courses/0/quests"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="predictive-analysis"
-      text="Paths"
-      to="/courses/0/paths"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="comparison"
-      text="Contests"
-      to="/courses/0/contests"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="manual"
-      text="Others"
-      to="/courses/0/others"
-    />
-  </Blueprint6.NavbarGroup>
-  <Blueprint6.NavbarGroup
-    align="right"
-  >
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="satellite"
-      text="Ground Control"
-      to="/courses/0/groundcontrol"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="globe"
-      text="Dashboard"
-      to="/courses/0/dashboard"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="mobile-video"
-      text="Sourcereel"
-      to="/courses/0/sourcereel"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="form"
-      text="Team Formation"
-      to="/courses/0/teamformation"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="endorsed"
-      text="Grading"
-      to="/courses/0/grading"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="crown"
-      text="Game Simulator"
-      to="/courses/0/gamesimulator"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-        ]
-      }
-      icon="settings"
-      text="Admin Panel"
-      to="/courses/0/adminpanel"
-    />
-  </Blueprint6.NavbarGroup>
-</Blueprint6.Navbar>
-`;
-
-exports[`MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Grading, Team Formation and AdminPanel NavLinks render for Role.Admin 1`] = `
-<Blueprint6.Navbar
-  className="NavigationBar secondary-navbar"
->
-  <Blueprint6.NavbarGroup
-    align="left"
-  >
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="flame"
-      text="Missions"
-      to="/courses/0/missions"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="lightbulb"
-      text="Quests"
-      to="/courses/0/quests"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="predictive-analysis"
-      text="Paths"
-      to="/courses/0/paths"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="comparison"
-      text="Contests"
-      to="/courses/0/contests"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="manual"
-      text="Others"
-      to="/courses/0/others"
-    />
-  </Blueprint6.NavbarGroup>
-  <Blueprint6.NavbarGroup
-    align="right"
-  >
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="satellite"
-      text="Ground Control"
-      to="/courses/0/groundcontrol"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="globe"
-      text="Dashboard"
-      to="/courses/0/dashboard"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="mobile-video"
-      text="Sourcereel"
-      to="/courses/0/sourcereel"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="form"
-      text="Team Formation"
-      to="/courses/0/teamformation"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="endorsed"
-      text="Grading"
-      to="/courses/0/grading"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="crown"
-      text="Game Simulator"
-      to="/courses/0/gamesimulator"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-        ]
-      }
-      icon="settings"
-      text="Admin Panel"
-      to="/courses/0/adminpanel"
-    />
-  </Blueprint6.NavbarGroup>
-</Blueprint6.Navbar>
-`;
-
-exports[`MissionControl, GroundControl, Sourcereel, GameSimulator, Dashboard, Team Formation and Grading NavLinks render for Role.Staff 1`] = `
-<Blueprint6.Navbar
-  className="NavigationBar secondary-navbar"
->
-  <Blueprint6.NavbarGroup
-    align="left"
-  >
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="flame"
-      text="Missions"
-      to="/courses/0/missions"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="lightbulb"
-      text="Quests"
-      to="/courses/0/quests"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="predictive-analysis"
-      text="Paths"
-      to="/courses/0/paths"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="comparison"
-      text="Contests"
-      to="/courses/0/contests"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="manual"
-      text="Others"
-      to="/courses/0/others"
-    />
-  </Blueprint6.NavbarGroup>
-  <Blueprint6.NavbarGroup
-    align="right"
-  >
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="satellite"
-      text="Ground Control"
-      to="/courses/0/groundcontrol"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-        ]
-      }
-      icon="globe"
-      text="Dashboard"
-      to="/courses/0/dashboard"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="mobile-video"
-      text="Sourcereel"
-      to="/courses/0/sourcereel"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="form"
-      text="Team Formation"
-      to="/courses/0/teamformation"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hasNotifications={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="endorsed"
-      text="Grading"
-      to="/courses/0/grading"
-    />
-    <DesktopNavLink
-      disabled={false}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-        ]
-      }
-      icon="crown"
-      text="Game Simulator"
-      to="/courses/0/gamesimulator"
-    />
-    <DesktopNavLink
-      disabled={true}
-      hiddenInBreakpoints={
-        [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-        ]
-      }
-      icon="settings"
-      text="Admin Panel"
-      to="/courses/0/adminpanel"
-    />
-  </Blueprint6.NavbarGroup>
-</Blueprint6.Navbar>
-`;
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 3832f9f193..6027c53f9c 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1670,6 +1670,20 @@ export const submitLLMFeedback = async (
   return resp;
 };
 
+/**
+ * GET /courses/{courseId}/admin/llm-stats
+ * Fetches course-wide LLM usage statistics (assessment and question breakdown)
+ */
+export const getLLMCourseStats = async (tokens: Tokens): Promise<any | null> => {
+  const resp = await request(`${courseId()}/admin/llm-stats`, 'GET', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+  return await resp.json();
+};
+
 /**
  * GET /courses/{courseId}/admin/users
  */
diff --git a/src/commons/sagas/__tests__/BackendSaga.test.ts b/src/commons/sagas/__tests__/BackendSaga.test.ts
index 0e75ee8f07..8401bd095b 100644
--- a/src/commons/sagas/__tests__/BackendSaga.test.ts
+++ b/src/commons/sagas/__tests__/BackendSaga.test.ts
@@ -136,6 +136,8 @@ const mockCourseConfiguration1: CourseConfiguration = {
   enableContestLeaderboard: true,
   enableSourcecast: true,
   enableStories: false,
+  enableLlmGrading: false,
+  hasLlmContent: false,
   topLeaderboardDisplay: 100,
   topContestLeaderboardDisplay: 10,
   sourceChapter: Chapter.SOURCE_1,
@@ -173,6 +175,8 @@ const mockCourseConfiguration2: CourseConfiguration = {
   topContestLeaderboardDisplay: 10,
   enableSourcecast: true,
   enableStories: false,
+  enableLlmGrading: true,
+  hasLlmContent: true,
   sourceChapter: Chapter.SOURCE_4,
   sourceVariant: Variant.DEFAULT,
   moduleHelpText: 'Help text',
@@ -455,6 +459,35 @@ describe('Test FETCH_USER_AND_COURSE action', () => {
       .silentRun();
   });
 
+  test('regression: initial fetchUserAndCourse stores hasLlmContent so navbar conditions are correct before visiting admin pages', () => {
+    const courseConfigurationWithLlm = {
+      ...mockCourseConfiguration2,
+      enableLlmGrading: true,
+      hasLlmContent: true
+    };
+
+    return expectSaga(BackendSaga)
+      .withState({ session: mockTokens })
+      .provide([
+        [
+          call(getUser, mockTokens),
+          {
+            user,
+            courseRegistration,
+            courseConfiguration: courseConfigurationWithLlm,
+            assessmentConfigurations
+          }
+        ]
+      ])
+      .call(getUser, mockTokens)
+      .put(SessionActions.setUser(user))
+      .put(SessionActions.setCourseRegistration(courseRegistration))
+      .put(SessionActions.setCourseConfiguration(courseConfigurationWithLlm))
+      .put(SessionActions.setAssessmentConfigurations(assessmentConfigurations))
+      .dispatch({ type: SessionActions.fetchUserAndCourse.type, payload: true })
+      .silentRun();
+  });
+
   test('when user (with courses) is obtained, but course registration, course configuration and assessment configurations are null', () => {
     return expectSaga(BackendSaga)
       .withState({ session: mockTokens })
diff --git a/src/pages/academy/academyRoutes.test.ts b/src/pages/academy/academyRoutes.test.ts
new file mode 100644
index 0000000000..e9bdefb4c8
--- /dev/null
+++ b/src/pages/academy/academyRoutes.test.ts
@@ -0,0 +1,147 @@
+import { vi } from 'vitest';
+import { type LoaderFunction } from 'react-router';
+
+const getStateMock = vi.fn();
+
+vi.mock('../createStore', () => ({
+  store: {
+    getState: getStateMock
+  }
+}));
+
+describe('academyRoutes llmstats guard', () => {
+  beforeEach(() => {
+    getStateMock.mockReset();
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'student',
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+  });
+
+  test('allows llmstats when role is admin and llm grading is enabled even if hasLlmContent is false', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: true,
+        hasLlmContent: false,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('allows llmstats when role is admin and both flags are true', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: true,
+        hasLlmContent: true,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('allows llmstats when hasLlmContent is still loading', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: true,
+        hasLlmContent: undefined,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('redirects from llmstats when llm grading is disabled', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: false,
+        hasLlmContent: true,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeInstanceOf(Response);
+    expect((result as Response).status).toBe(302);
+    expect((result as Response).headers.get('Location')).toBe('not_found');
+  });
+
+  test('redirects from llmstats when user is not admin even if llm grading is enabled', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'staff',
+        enableLlmGrading: true,
+        hasLlmContent: true,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeInstanceOf(Response);
+    expect((result as Response).status).toBe(302);
+    expect((result as Response).headers.get('Location')).toBe('not_found');
+  });
+});
diff --git a/src/pages/academy/academyRoutes.ts b/src/pages/academy/academyRoutes.ts
index 8f51d463b9..73a0613f65 100644
--- a/src/pages/academy/academyRoutes.ts
+++ b/src/pages/academy/academyRoutes.ts
@@ -104,6 +104,7 @@ const TeamFormation = () => import('./teamFormation/TeamFormation');
 const TeamFormationForm = () => import('./teamFormation/subcomponents/TeamFormationForm');
 const TeamFormationImport = () => import('./teamFormation/subcomponents/TeamFormationImport');
 const Dashboard = () => import('./dashboard/Dashboard');
+const LLMStatsPage = () => import('./llmStats/LLMStatsPage');
 
 const staffRoutes: RouteObject[] = [
   { path: `grading/${gradingRegExp}`, lazy: Grading },
@@ -127,8 +128,19 @@ const AdminPanel = () => import('./adminPanel/AdminPanel');
 
 const adminRoutes: RouteObject[] = [
   { path: 'groundcontrol', lazy: GroundControl },
+  { path: 'llmstats', lazy: LLMStatsPage },
   { path: 'adminpanel', lazy: AdminPanel }
-].map(r => new GuardedRoute(r).check(s => s.session.role === Role.Admin, notFoundPath).build());
+].map(r =>
+  new GuardedRoute(r)
+    .check(s => {
+      if (r.path === 'llmstats') {
+        return s.session.role === Role.Admin && !!s.session.enableLlmGrading;
+      }
+
+      return s.session.role === Role.Admin;
+    }, notFoundPath)
+    .build()
+);
 
 export const getAcademyRoutes = (): RouteObject[] => {
   const routes: RouteObject[] = [...getCommonAcademyRoutes(), ...staffRoutes, ...adminRoutes];
diff --git a/src/pages/academy/llmStats/LLMStatsPage.tsx b/src/pages/academy/llmStats/LLMStatsPage.tsx
new file mode 100644
index 0000000000..fe79c9abc8
--- /dev/null
+++ b/src/pages/academy/llmStats/LLMStatsPage.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import LLMStatsTab from '../../../commons/adminStats/LLMStatsTab';
+import ContentDisplay from '../../../commons/ContentDisplay';
+
+const LLMStatsPage: React.FC = () => {
+  return <ContentDisplay display={<LLMStatsTab />} fullWidth={false} />;
+};
+
+export const Component = LLMStatsPage;
+Component.displayName = 'LLMStatsPage';
+
+export default LLMStatsPage;
diff --git a/src/styles/CourseConfig.module.scss b/src/styles/CourseConfig.module.scss
index 8abb812752..42ee512427 100644
--- a/src/styles/CourseConfig.module.scss
+++ b/src/styles/CourseConfig.module.scss
@@ -7,9 +7,11 @@
 
   .inputs {
     display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-    max-width: 900px;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 24px;
+    max-width: 1200px;
     width: 100%;
 
     .text {
@@ -17,6 +19,8 @@
       flex-direction: column;
       justify-content: space-around;
       align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
 
       :global(.#{$ns}-tab-list) {
         margin-left: 8px;
@@ -75,9 +79,20 @@
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      flex: 0 0 240px;
+
       label {
         margin-top: 1.5rem;
       }
     }
+
+    @media (max-width: 1024px) {
+      flex-flow: row wrap;
+      justify-content: space-around;
+
+      .booleans {
+        flex: 1 1 100%;
+      }
+    }
   }
 }
diff --git a/vitest.config.ts b/vitest.config.ts
index bfc7c934b8..039fda677d 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,6 +9,13 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./src/setupTests.ts'],
+    // Prevent worker startup timeout cascades in constrained environments.
+    pool: 'threads',
+    poolOptions: {
+      threads: {
+        singleThread: true
+      }
+    },
     coverage: {
       reporter: ['text', 'html', 'lcov']
     }

From df6a1e17c0fd350c8822436391c93e39e2ad3b5c Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Sat, 28 Mar 2026 14:45:26 +0800
Subject: [PATCH 11/45] Fixed fail save bug

---
 src/commons/application/ApplicationTypes.ts   |  1 +
 .../application/actions/SessionActions.ts     |  7 +++++
 .../actions/__tests__/SessionActions.test.ts  | 27 ++++++++++++++++++
 .../application/reducers/SessionsReducer.ts   |  3 ++
 .../reducers/__tests__/SessionReducer.test.ts | 16 +++++++++++
 src/commons/application/types/SessionTypes.ts |  9 ++++++
 src/commons/sagas/BackendSaga.ts              | 28 +++++++++++++++----
 .../grading/subcomponents/GradingEditor.tsx   | 21 +++++++++++++-
 8 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
index 7c65a31ce5..ed5e495b89 100644
--- a/src/commons/application/ApplicationTypes.ts
+++ b/src/commons/application/ApplicationTypes.ts
@@ -541,6 +541,7 @@ export const defaultSession: SessionState = {
   students: undefined,
   teamFormationOverviews: undefined,
   gradings: {},
+  gradingSaveResult: undefined,
   notifications: []
 };
 
diff --git a/src/commons/application/actions/SessionActions.ts b/src/commons/application/actions/SessionActions.ts
index 78f0276d46..95568a0e6e 100644
--- a/src/commons/application/actions/SessionActions.ts
+++ b/src/commons/application/actions/SessionActions.ts
@@ -131,6 +131,13 @@ const SessionActions = createActions('session', {
    * no id for Grading.
    */
   updateGrading: (submissionId: number, grading: GradingQuery) => ({ submissionId, grading }),
+  updateGradingSaveResult: (
+    submissionId: number,
+    questionId: number,
+    success: boolean,
+    saveAndContinue: boolean,
+    requestId: number
+  ) => ({ submissionId, questionId, success, saveAndContinue, requestId }),
   unsubmitSubmission: (submissionId: number) => ({ submissionId }),
   // Publishing / unpublishing actions
   publishGrading: (submissionId: number) => ({ submissionId }),
diff --git a/src/commons/application/actions/__tests__/SessionActions.test.ts b/src/commons/application/actions/__tests__/SessionActions.test.ts
index c41475a030..b8c0f02d7a 100644
--- a/src/commons/application/actions/__tests__/SessionActions.test.ts
+++ b/src/commons/application/actions/__tests__/SessionActions.test.ts
@@ -438,6 +438,33 @@ test('submitGradingAndContinue generates correct action object', () => {
   });
 });
 
+test('updateGradingSaveResult generates correct action object', () => {
+  const submissionId = 11;
+  const questionId = 5;
+  const success = false;
+  const saveAndContinue = true;
+  const requestId = 12345;
+
+  const action = SessionActions.updateGradingSaveResult(
+    submissionId,
+    questionId,
+    success,
+    saveAndContinue,
+    requestId
+  );
+
+  expect(action).toEqual({
+    type: SessionActions.updateGradingSaveResult.type,
+    payload: {
+      submissionId,
+      questionId,
+      success,
+      saveAndContinue,
+      requestId
+    }
+  });
+});
+
 test('reautogradeSubmission generates correct action object', () => {
   const submissionId = 123;
   const action = SessionActions.reautogradeSubmission(submissionId);
diff --git a/src/commons/application/reducers/SessionsReducer.ts b/src/commons/application/reducers/SessionsReducer.ts
index ca40fa331d..915c1d9006 100644
--- a/src/commons/application/reducers/SessionsReducer.ts
+++ b/src/commons/application/reducers/SessionsReducer.ts
@@ -59,6 +59,9 @@ const newSessionsReducer = createReducer(defaultSession, builder => {
     .addCase(SessionActions.updateGrading, (state, action) => {
       state.gradings[action.payload.submissionId] = action.payload.grading;
     })
+    .addCase(SessionActions.updateGradingSaveResult, (state, action) => {
+      state.gradingSaveResult = action.payload;
+    })
     .addCase(SessionActions.updateGradingOverviews, (state, action) => {
       state.gradingOverviews = action.payload;
     })
diff --git a/src/commons/application/reducers/__tests__/SessionReducer.test.ts b/src/commons/application/reducers/__tests__/SessionReducer.test.ts
index b2525ea153..e3df897128 100644
--- a/src/commons/application/reducers/__tests__/SessionReducer.test.ts
+++ b/src/commons/application/reducers/__tests__/SessionReducer.test.ts
@@ -526,6 +526,22 @@ test('UPDATE_GRADING works correctly in updating gradings', () => {
   expect(gradingMap[submissionId]).toEqual(gradingTest2);
 });
 
+test('UPDATE_GRADING_SAVE_RESULT stores the latest grading save result', () => {
+  const action = {
+    type: SessionActions.updateGradingSaveResult.type,
+    payload: {
+      submissionId: 23,
+      questionId: 2,
+      success: false,
+      saveAndContinue: true,
+      requestId: 98765
+    }
+  } as const;
+
+  const gradingSaveResult = SessionsReducer(defaultSession, action).gradingSaveResult;
+  expect(gradingSaveResult).toEqual(action.payload);
+});
+
 // UPDATE_GRADING_OVERVIEWS test data
 const gradingOverviewTest1: GradingOverview[] = [
   {
diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
index 962cc07b26..18079c97d1 100644
--- a/src/commons/application/types/SessionTypes.ts
+++ b/src/commons/application/types/SessionTypes.ts
@@ -70,6 +70,7 @@ export type SessionState = {
   readonly teamFormationOverview?: TeamFormationOverview;
   readonly teamFormationOverviews?: TeamFormationOverview[];
   readonly gradings: { [id: number]: GradingQuery };
+  readonly gradingSaveResult?: GradingSaveResult;
   readonly notifications: Notification[];
   readonly googleUser?: string;
   readonly githubOctokitObject: { octokit: Octokit | undefined };
@@ -78,6 +79,14 @@ export type SessionState = {
   readonly remoteExecutionSession?: DeviceSession;
 };
 
+export type GradingSaveResult = {
+  submissionId: number;
+  questionId: number;
+  success: boolean;
+  saveAndContinue: boolean;
+  requestId: number;
+};
+
 export type Tokens = {
   accessToken: string;
   refreshToken: string;
diff --git a/src/commons/sagas/BackendSaga.ts b/src/commons/sagas/BackendSaga.ts
index 9e45231bf3..65c59fceff 100644
--- a/src/commons/sagas/BackendSaga.ts
+++ b/src/commons/sagas/BackendSaga.ts
@@ -600,11 +600,16 @@ function* sendGrade(
     | ReturnType<typeof actions.submitGradingAndContinue>
 ): any {
   const role: Role = yield select((state: OverallState) => state.session.role!);
+  const { submissionId, questionId, xpAdjustment, comments } = action.payload;
+  const saveAndContinue = action.type === SessionActions.submitGradingAndContinue.type;
+
   if (role === Role.Student) {
-    return yield call(showWarningMessage, 'Only staff can submit answers.');
+    yield call(showWarningMessage, 'Only staff can submit answers.');
+    yield put(
+      actions.updateGradingSaveResult(submissionId, questionId, false, saveAndContinue, Date.now())
+    );
+    return false;
   }
-
-  const { submissionId, questionId, xpAdjustment, comments } = action.payload;
   const tokens: Tokens = yield selectTokens();
 
   const resp: Response | null = yield postGrading(
@@ -615,7 +620,11 @@ function* sendGrade(
     comments
   );
   if (!resp || !resp.ok) {
-    return yield handleResponseError(resp);
+    yield handleResponseError(resp);
+    yield put(
+      actions.updateGradingSaveResult(submissionId, questionId, false, saveAndContinue, Date.now())
+    );
+    return false;
   }
 
   yield call(showSuccessMessage, 'Submitted!', 1000);
@@ -643,10 +652,19 @@ function* sendGrade(
       enable_llm_grading: false
     })
   );
+
+  yield put(
+    actions.updateGradingSaveResult(submissionId, questionId, true, saveAndContinue, Date.now())
+  );
+
+  return true;
 }
 
 function* sendGradeAndContinue(action: ReturnType<typeof actions.submitGradingAndContinue>) {
-  yield* sendGrade(action);
+  const didSave: boolean = yield* sendGrade(action);
+  if (!didSave) {
+    return;
+  }
 
   const { submissionId } = action.payload;
   const [currentQuestion, courseId]: [number | undefined, number] = yield select(
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index f719f6bf4e..c68b7a000d 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -13,11 +13,12 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMde, { ReactMdeProps } from 'react-mde';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { AutogradingResult, LLMPrompt } from 'src/commons/assessment/AssessmentTypes';
 import { useTokens } from 'src/commons/utils/Hooks';
 
 import SessionActions from '../../../../commons/application/actions/SessionActions';
+import { OverallState } from '../../../../commons/application/ApplicationTypes';
 import ControlButton from '../../../../commons/ControlButton';
 import Markdown from '../../../../commons/Markdown';
 import { Prompt } from '../../../../commons/ReactRouterPrompt';
@@ -67,6 +68,7 @@ const EMPTY_SELECTION_SAVE_KEY = JSON.stringify({ selected_indices: [], edits: {
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useDispatch();
   const tokens = useTokens();
+  const gradingSaveResult = useSelector((state: OverallState) => state.session.gradingSaveResult);
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
   const saveInFlightRef = useRef<boolean>(false);
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
@@ -126,6 +128,23 @@ const GradingEditor: React.FC<Props> = props => {
     setIsSaveInFlight(false);
   }, [props.comments, props.xpAdjustment, props.gradedAt, props.submissionId, props.questionId]);
 
+  useEffect(() => {
+    if (
+      !gradingSaveResult ||
+      gradingSaveResult.submissionId !== props.submissionId ||
+      gradingSaveResult.questionId !== props.questionId
+    ) {
+      return;
+    }
+
+    saveInFlightRef.current = false;
+    setIsSaveInFlight(false);
+
+    if (!gradingSaveResult.success || !gradingSaveResult.saveAndContinue) {
+      setCurrentlySaving(false);
+    }
+  }, [gradingSaveResult, props.questionId, props.submissionId]);
+
   // Invisible delimiters used internally to preserve per-comment editing state
   // without showing any marker text in the editor.
   const COMMENT_SEPARATOR = '\n\u2063\u2063\n';

From 518102c31ed35c13ae1e3ed61975449bec4fec85 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Sat, 28 Mar 2026 14:51:50 +0800
Subject: [PATCH 12/45] prevent unsafe changes bug

---
 src/pages/academy/grading/subcomponents/GradingEditor.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index c68b7a000d..39188bdc20 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -439,7 +439,9 @@ const GradingEditor: React.FC<Props> = props => {
 
   const checkHasUnsavedChanges = () => {
     const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined);
-    return props.xpAdjustment !== newXpAdjustmentInput || props.comments !== editorValue;
+    const normalizedEditorValue = stripInternalMarkers(editorValue);
+
+    return props.xpAdjustment !== newXpAdjustmentInput || props.comments !== normalizedEditorValue;
   };
 
   const checkIsNewQuestion = () => {

From 0d4eb8c736ca628071929b1423418fe5f9b5ed0d Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sun, 29 Mar 2026 15:11:13 +0800
Subject: [PATCH 13/45] fix(grading): prevent false unsaved state and guard
 save-and-continue navigation

---
 src/commons/sagas/BackendSaga.ts              |  1 -
 .../sagas/__tests__/BackendSaga.test.ts       | 60 +++++++++++++++++++
 .../grading/subcomponents/GradingEditor.tsx   | 32 +++++++++-
 3 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/src/commons/sagas/BackendSaga.ts b/src/commons/sagas/BackendSaga.ts
index 65c59fceff..d5c357e71a 100644
--- a/src/commons/sagas/BackendSaga.ts
+++ b/src/commons/sagas/BackendSaga.ts
@@ -656,7 +656,6 @@ function* sendGrade(
   yield put(
     actions.updateGradingSaveResult(submissionId, questionId, true, saveAndContinue, Date.now())
   );
-
   return true;
 }
 
diff --git a/src/commons/sagas/__tests__/BackendSaga.test.ts b/src/commons/sagas/__tests__/BackendSaga.test.ts
index 8401bd095b..ac2f7d1344 100644
--- a/src/commons/sagas/__tests__/BackendSaga.test.ts
+++ b/src/commons/sagas/__tests__/BackendSaga.test.ts
@@ -46,6 +46,7 @@ import {
 import WorkspaceActions from '../../workspace/WorkspaceActions';
 import type { WorkspaceLocation } from '../../workspace/WorkspaceTypes';
 import BackendSaga from '../BackendSaga';
+import { routerNavigate } from '../BackendSaga';
 import {
   getAssessment,
   getAssessmentConfigs,
@@ -63,6 +64,7 @@ import {
   postAssessment,
   postAuth,
   postCreateCourse,
+  postGrading,
   postReautogradeAnswer,
   postReautogradeSubmission,
   putAssessmentConfigs,
@@ -851,6 +853,64 @@ describe('Test SUBMIT_ASSESSMENT action', () => {
   });
 });
 
+describe('Test SUBMIT_GRADING_AND_CONTINUE action', () => {
+  const submissionId = 999;
+  const questionId = 1234;
+  const xpAdjustment = 10;
+  const comments = 'saved comments';
+
+  const mockStateWithGrading = {
+    ...mockStates,
+    session: {
+      ...mockStates.session,
+      role: Role.Staff,
+      gradings: {
+        [submissionId]: {
+          answers: [
+            {
+              question: { id: questionId },
+              grade: { xpAdjustment: 0, xp: 80, comments: '', gradedAt: '' }
+            }
+          ],
+          assessment: mockAssessment
+        }
+      }
+    },
+    workspaces: {
+      ...mockStates.workspaces,
+      grading: { currentQuestion: 1 }
+    }
+  } as any;
+
+  test('navigates only after successful save', () => {
+    return expectSaga(BackendSaga)
+      .withState(mockStateWithGrading)
+      .provide([
+        [call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments), okResp]
+      ])
+      .call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments)
+      .call.fn(routerNavigate)
+      .dispatch(
+        SessionActions.submitGradingAndContinue(submissionId, questionId, xpAdjustment, comments)
+      )
+      .silentRun();
+  });
+
+  test('does not navigate when save fails', () => {
+    return expectSaga(BackendSaga)
+      .withState(mockStateWithGrading)
+      .provide([
+        [call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments), null]
+      ])
+      .call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments)
+      .not.call.fn(routerNavigate)
+      .dispatch(
+        SessionActions.submitGradingAndContinue(submissionId, questionId, xpAdjustment, comments)
+      )
+      .silentRun();
+  });
+});
+
 describe('Test FETCH_NOTIFICATIONS action', () => {
   test('when notifications obtained', () => {
     return expectSaga(BackendSaga)
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 39188bdc20..17029f16e0 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -71,6 +71,7 @@ const GradingEditor: React.FC<Props> = props => {
   const gradingSaveResult = useSelector((state: OverallState) => state.session.gradingSaveResult);
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
   const saveInFlightRef = useRef<boolean>(false);
+  const saveAndContinueTimeoutRef = useRef<number | undefined>(undefined);
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
       ({
@@ -126,6 +127,12 @@ const GradingEditor: React.FC<Props> = props => {
   useEffect(() => {
     saveInFlightRef.current = false;
     setIsSaveInFlight(false);
+    setCurrentlySaving(false);
+
+    if (saveAndContinueTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveAndContinueTimeoutRef.current);
+      saveAndContinueTimeoutRef.current = undefined;
+    }
   }, [props.comments, props.xpAdjustment, props.gradedAt, props.submissionId, props.questionId]);
 
   useEffect(() => {
@@ -140,6 +147,11 @@ const GradingEditor: React.FC<Props> = props => {
     saveInFlightRef.current = false;
     setIsSaveInFlight(false);
 
+    if (saveAndContinueTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveAndContinueTimeoutRef.current);
+      saveAndContinueTimeoutRef.current = undefined;
+    }
+
     if (!gradingSaveResult.success || !gradingSaveResult.saveAndContinue) {
       setCurrentlySaving(false);
     }
@@ -316,6 +328,10 @@ const GradingEditor: React.FC<Props> = props => {
     setSelectedIndices([]);
     setCommentTexts({});
     lastSavedSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
+    if (saveAndContinueTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveAndContinueTimeoutRef.current);
+      saveAndContinueTimeoutRef.current = undefined;
+    }
   };
 
   /**
@@ -360,6 +376,12 @@ const GradingEditor: React.FC<Props> = props => {
       if (!hasSavedChosenComments) {
         saveInFlightRef.current = false;
         setIsSaveInFlight(false);
+        setCurrentlySaving(false);
+
+        if (saveAndContinueTimeoutRef.current !== undefined) {
+          window.clearTimeout(saveAndContinueTimeoutRef.current);
+          saveAndContinueTimeoutRef.current = undefined;
+        }
         return;
       }
 
@@ -380,6 +402,14 @@ const GradingEditor: React.FC<Props> = props => {
       handleGradingSaveAndContinue(submissionId, questionId, xpAdjustment, comments!);
     };
     setCurrentlySaving(true);
+    if (saveAndContinueTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveAndContinueTimeoutRef.current);
+    }
+    // Fallback to avoid suppressing the unsaved-changes prompt indefinitely if save fails.
+    saveAndContinueTimeoutRef.current = window.setTimeout(() => {
+      setCurrentlySaving(false);
+      saveAndContinueTimeoutRef.current = undefined;
+    }, 15000);
     // TODO: Check (not sure how) if this results in a regression.
     callback();
   };
@@ -393,7 +423,6 @@ const GradingEditor: React.FC<Props> = props => {
     const callback = (): void => {
       handleGradingSave(submissionId, questionId, xpAdjustment, comments!);
     };
-    setCurrentlySaving(true);
     // TODO: Check (not sure how) if this results in a regression.
     callback();
   };
@@ -440,7 +469,6 @@ const GradingEditor: React.FC<Props> = props => {
   const checkHasUnsavedChanges = () => {
     const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined);
     const normalizedEditorValue = stripInternalMarkers(editorValue);
-
     return props.xpAdjustment !== newXpAdjustmentInput || props.comments !== normalizedEditorValue;
   };
 

From ffda3b2d5adb2d708aa55490db5f72262c69c6d1 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sun, 29 Mar 2026 15:38:50 +0800
Subject: [PATCH 14/45] fix(grading): preserve empty AI comment slots to keep
 index mapping stable

---
 src/pages/academy/grading/subcomponents/GradingEditor.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 17029f16e0..37b44896c6 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -189,8 +189,9 @@ const GradingEditor: React.FC<Props> = props => {
   const buildCommentsBlock = (indices: number[], texts: Record<number, string>) => {
     return [...indices]
       .sort((a, b) => a - b)
-      .map(i => texts[i])
-      .filter(Boolean)
+      // Preserve one block segment per selected index, including empty edits,
+      // so split/join order always stays aligned with sorted selected indices.
+      .map(i => texts[i] ?? '')
       .join(COMMENT_SEPARATOR);
   };
 

From e0fa5f7e984447fcc2c37c407fdd7e3e820371a5 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sun, 29 Mar 2026 15:48:47 +0800
Subject: [PATCH 15/45] fix: add timeout fallback for save controls unlock on
 grading failure

---
 .../grading/subcomponents/GradingEditor.tsx   | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 37b44896c6..77fa19dccc 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -72,6 +72,7 @@ const GradingEditor: React.FC<Props> = props => {
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
   const saveInFlightRef = useRef<boolean>(false);
   const saveAndContinueTimeoutRef = useRef<number | undefined>(undefined);
+  const saveTimeoutRef = useRef<number | undefined>(undefined);
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
       ({
@@ -133,6 +134,10 @@ const GradingEditor: React.FC<Props> = props => {
       window.clearTimeout(saveAndContinueTimeoutRef.current);
       saveAndContinueTimeoutRef.current = undefined;
     }
+    if (saveTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveTimeoutRef.current);
+      saveTimeoutRef.current = undefined;
+    }
   }, [props.comments, props.xpAdjustment, props.gradedAt, props.submissionId, props.questionId]);
 
   useEffect(() => {
@@ -151,6 +156,10 @@ const GradingEditor: React.FC<Props> = props => {
       window.clearTimeout(saveAndContinueTimeoutRef.current);
       saveAndContinueTimeoutRef.current = undefined;
     }
+    if (saveTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveTimeoutRef.current);
+      saveTimeoutRef.current = undefined;
+    }
 
     if (!gradingSaveResult.success || !gradingSaveResult.saveAndContinue) {
       setCurrentlySaving(false);
@@ -187,12 +196,14 @@ const GradingEditor: React.FC<Props> = props => {
   };
 
   const buildCommentsBlock = (indices: number[], texts: Record<number, string>) => {
-    return [...indices]
-      .sort((a, b) => a - b)
-      // Preserve one block segment per selected index, including empty edits,
-      // so split/join order always stays aligned with sorted selected indices.
-      .map(i => texts[i] ?? '')
-      .join(COMMENT_SEPARATOR);
+    return (
+      [...indices]
+        .sort((a, b) => a - b)
+        // Preserve one block segment per selected index, including empty edits,
+        // so split/join order always stays aligned with sorted selected indices.
+        .map(i => texts[i] ?? '')
+        .join(COMMENT_SEPARATOR)
+    );
   };
 
   /**
@@ -406,9 +417,15 @@ const GradingEditor: React.FC<Props> = props => {
     if (saveAndContinueTimeoutRef.current !== undefined) {
       window.clearTimeout(saveAndContinueTimeoutRef.current);
     }
+    if (saveTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveTimeoutRef.current);
+      saveTimeoutRef.current = undefined;
+    }
     // Fallback to avoid suppressing the unsaved-changes prompt indefinitely if save fails.
     saveAndContinueTimeoutRef.current = window.setTimeout(() => {
       setCurrentlySaving(false);
+      saveInFlightRef.current = false;
+      setIsSaveInFlight(false);
       saveAndContinueTimeoutRef.current = undefined;
     }, 15000);
     // TODO: Check (not sure how) if this results in a regression.
@@ -424,7 +441,16 @@ const GradingEditor: React.FC<Props> = props => {
     const callback = (): void => {
       handleGradingSave(submissionId, questionId, xpAdjustment, comments!);
     };
-    // TODO: Check (not sure how) if this results in a regression.
+    // Fallback timeout to unlock save controls if Redux state update doesn't occur
+    // (e.g., if grading saga fails unexpectedly)
+    if (saveTimeoutRef.current !== undefined) {
+      window.clearTimeout(saveTimeoutRef.current);
+    }
+    saveTimeoutRef.current = window.setTimeout(() => {
+      saveInFlightRef.current = false;
+      setIsSaveInFlight(false);
+      saveTimeoutRef.current = undefined;
+    }, 15000);
     callback();
   };
 

From cb0bc0dcae778fc0831c07658984d82a031fdf74 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sun, 29 Mar 2026 16:14:50 +0800
Subject: [PATCH 16/45] feat(grading): make LLM feedback star rating
 keyboard-accessible and screen-reader friendly

---
 .../subcomponents/LLMFeedbackButton.tsx       | 74 +++++++++++++++++--
 1 file changed, 66 insertions(+), 8 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx b/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
index c5d091153c..0f57556f19 100644
--- a/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
+++ b/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
@@ -23,11 +23,14 @@ type Props = {
   questionId?: number;
 };
 
+const STAR_VALUES = [1, 2, 3, 4, 5] as const;
+
 const LLMFeedbackButton: React.FC<Props> = ({ tokens, assessmentId, questionId }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [body, setBody] = useState('');
   const [rating, setRating] = useState<number>(0);
   const [submitting, setSubmitting] = useState(false);
+  const starButtonRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleClose = useCallback(() => {
@@ -59,6 +62,31 @@ const LLMFeedbackButton: React.FC<Props> = ({ tokens, assessmentId, questionId }
     }
   }, [tokens, body, rating, assessmentId, questionId, handleClose]);
 
+  const handleRatingKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>, currentStar: number) => {
+      let nextStar: number | null = null;
+
+      if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+        nextStar = Math.min(5, currentStar + 1);
+      } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+        nextStar = Math.max(1, currentStar - 1);
+      } else if (event.key === 'Home') {
+        nextStar = 1;
+      } else if (event.key === 'End') {
+        nextStar = 5;
+      }
+
+      if (nextStar === null) {
+        return;
+      }
+
+      event.preventDefault();
+      setRating(nextStar);
+      starButtonRefs.current[nextStar - 1]?.focus();
+    },
+    []
+  );
+
   return (
     <>
       <Button
@@ -89,19 +117,49 @@ const LLMFeedbackButton: React.FC<Props> = ({ tokens, assessmentId, questionId }
             <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '4px' }}>
               Rating (optional)
             </label>
-            <div style={{ display: 'flex', gap: '4px' }}>
-              {[1, 2, 3, 4, 5].map(star => (
-                <Icon
+            <div
+              role="radiogroup"
+              aria-label="Rating from one to five stars"
+              style={{ display: 'flex', gap: '4px', alignItems: 'center' }}
+            >
+              {STAR_VALUES.map(star => (
+                <button
                   key={star}
-                  icon={star <= rating ? IconNames.STAR : IconNames.STAR_EMPTY}
-                  size={24}
+                  ref={element => {
+                    starButtonRefs.current[star - 1] = element;
+                  }}
+                  type="button"
+                  role="radio"
+                  aria-checked={rating === star}
+                  aria-label={`${star} star${star === 1 ? '' : 's'}`}
+                  tabIndex={rating === 0 ? (star === 1 ? 0 : -1) : rating === star ? 0 : -1}
+                  onClick={() => setRating(star === rating ? 0 : star)}
+                  onKeyDown={event => handleRatingKeyDown(event, star)}
                   style={{
+                    border: 'none',
+                    background: 'transparent',
+                    padding: 0,
+                    margin: 0,
                     cursor: 'pointer',
-                    color: star <= rating ? '#f5a623' : '#ccc'
+                    lineHeight: 0
                   }}
-                  onClick={() => setRating(star === rating ? 0 : star)}
-                />
+                >
+                  <Icon
+                    icon={star <= rating ? IconNames.STAR : IconNames.STAR_EMPTY}
+                    size={24}
+                    style={{ color: star <= rating ? '#f5a623' : '#ccc' }}
+                  />
+                </button>
               ))}
+              <Button
+                minimal
+                small
+                onClick={() => setRating(0)}
+                disabled={rating === 0}
+                aria-label="Clear rating"
+              >
+                Clear
+              </Button>
             </div>
           </div>
 

From 58831f58df542ad7f931b50c8587f87a0e3a2f3b Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sun, 29 Mar 2026 16:17:04 +0800
Subject: [PATCH 17/45] fix(grading): use typed selector hook in GradingEditor

---
 src/pages/academy/grading/subcomponents/GradingEditor.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 77fa19dccc..f43f8c48ee 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -13,12 +13,11 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMde, { ReactMdeProps } from 'react-mde';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { AutogradingResult, LLMPrompt } from 'src/commons/assessment/AssessmentTypes';
-import { useTokens } from 'src/commons/utils/Hooks';
+import { useTokens, useTypedSelector } from 'src/commons/utils/Hooks';
 
 import SessionActions from '../../../../commons/application/actions/SessionActions';
-import { OverallState } from '../../../../commons/application/ApplicationTypes';
 import ControlButton from '../../../../commons/ControlButton';
 import Markdown from '../../../../commons/Markdown';
 import { Prompt } from '../../../../commons/ReactRouterPrompt';
@@ -68,7 +67,7 @@ const EMPTY_SELECTION_SAVE_KEY = JSON.stringify({ selected_indices: [], edits: {
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useDispatch();
   const tokens = useTokens();
-  const gradingSaveResult = useSelector((state: OverallState) => state.session.gradingSaveResult);
+  const gradingSaveResult = useTypedSelector(state => state.session.gradingSaveResult);
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
   const saveInFlightRef = useRef<boolean>(false);
   const saveAndContinueTimeoutRef = useRef<number | undefined>(undefined);

From 23979a1db559b6a027d7d59588c9e12bf708c481 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sun, 29 Mar 2026 16:31:29 +0800
Subject: [PATCH 18/45] fix(grading): use shared typed dispatch hook to avoid
 restricted react-redux import

---
 src/commons/utils/Hooks.ts                                | 5 ++++-
 src/pages/academy/grading/subcomponents/GradingEditor.tsx | 5 ++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index 9aafc00d08..8495e33b07 100644
--- a/src/commons/utils/Hooks.ts
+++ b/src/commons/utils/Hooks.ts
@@ -1,7 +1,7 @@
 import { useMediaQuery } from '@mantine/hooks';
 import React, { RefObject } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { TypedUseSelectorHook, useSelector } from 'react-redux';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 import { OverallState } from '../application/ApplicationTypes';
 import { Tokens } from '../application/types/SessionTypes';
@@ -72,6 +72,9 @@ export function useLocalStorageState<T>(
 
 /** Typed version of useSelector. Use this instead of the useSelector hook. */
 export const useTypedSelector: TypedUseSelectorHook<OverallState> = useSelector;
+
+/** Typed-safe wrapper for useDispatch to avoid direct react-redux imports in components. */
+export const useTypedDispatch = () => useDispatch();
 /**
  * Dynamically returns the dimensions (width & height) of an HTML element, updating whenever the
  * element is loaded or resized.
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index f43f8c48ee..074816c841 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -13,9 +13,8 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMde, { ReactMdeProps } from 'react-mde';
-import { useDispatch } from 'react-redux';
 import { AutogradingResult, LLMPrompt } from 'src/commons/assessment/AssessmentTypes';
-import { useTokens, useTypedSelector } from 'src/commons/utils/Hooks';
+import { useTokens, useTypedDispatch, useTypedSelector } from 'src/commons/utils/Hooks';
 
 import SessionActions from '../../../../commons/application/actions/SessionActions';
 import ControlButton from '../../../../commons/ControlButton';
@@ -65,7 +64,7 @@ const gradingEditorButtonClass = 'grading-editor-button';
 const EMPTY_SELECTION_SAVE_KEY = JSON.stringify({ selected_indices: [], edits: {} });
 
 const GradingEditor: React.FC<Props> = props => {
-  const dispatch = useDispatch();
+  const dispatch = useTypedDispatch();
   const tokens = useTokens();
   const gradingSaveResult = useTypedSelector(state => state.session.gradingSaveResult);
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);

From d04b4ecefc9a716111bea80f106ccc84013c3c17 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Mon, 30 Mar 2026 21:41:15 +0800
Subject: [PATCH 19/45] fix(grading): gate is_llm using
 grading.enable_llm_grading instead of session-level flag

---
 .../academy/grading/subcomponents/GradingWorkspace.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
index fbd1d8a7ae..73f21bc65a 100644
--- a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
@@ -76,7 +76,6 @@ const GradingWorkspace: React.FC<Props> = props => {
 
   const grading = useTypedSelector(state => state.session.gradings[props.submissionId]);
   const courseId = useTypedSelector(state => state.session.courseId);
-  const llm_grading = useTypedSelector(state => state.session.enableLlmGrading);
   const {
     autogradingResults,
     isFolderModeEnabled,
@@ -327,7 +326,10 @@ const GradingWorkspace: React.FC<Props> = props => {
                 ? [grading!.answers[questionId].student.username]
                 : grading!.answers[questionId].team!.map(member => member.username)
             }
-            is_llm={!!llm_grading && grading!.answers[questionId].question.type == 'programming'}
+            is_llm={
+              !!grading!.enable_llm_grading &&
+              grading!.answers[questionId].question.type == 'programming'
+            }
             comments={grading!.answers[questionId].grade.comments ?? ''}
             graderName={
               grading!.answers[questionId].grade.grader

From 4636129b7d03e43461e03039a6496706fec95687 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Mon, 30 Mar 2026 23:05:29 +0800
Subject: [PATCH 20/45] fix(grading): keep LLM comment UX visible without
 prompts and gate prompt viewer only

---
 .../grading/subcomponents/GradingEditor.tsx   | 84 ++++++++++---------
 1 file changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 074816c841..0fd434abf0 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -66,6 +66,8 @@ const EMPTY_SELECTION_SAVE_KEY = JSON.stringify({ selected_indices: [], edits: {
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useTypedDispatch();
   const tokens = useTokens();
+  const prompts = props.prompts ?? [];
+  const hasPrompts = prompts.length > 0;
   const gradingSaveResult = useTypedSelector(state => state.session.gradingSaveResult);
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
   const saveInFlightRef = useRef<boolean>(false);
@@ -514,7 +516,7 @@ const GradingEditor: React.FC<Props> = props => {
 
   const copyComposedPromptToClipboard = () => {
     navigator.clipboard.writeText(
-      props.prompts
+      prompts
         .map(prompt => {
           return `**${prompt.role} Prompt**\n\n${prompt.content}`;
         })
@@ -652,39 +654,41 @@ const GradingEditor: React.FC<Props> = props => {
         </div>
       </div>
 
-      {props.is_llm && props.prompts && props.prompts.length > 0 && (
+      {props.is_llm && (
         <>
-          <Dialog
-            title="Full Composed LLM Prompt"
-            icon={IconNames.WRENCH}
-            isOpen={isViewLLMPromptOpen}
-            onClose={() => setIsViewLLMPromptOpen(false)}
-          >
-            <div className="llm-prompt-dialog">
-              <div className="forenote-section">
-                <span className="forenote">
-                  <b>Note:</b> The titles here are provided merely to distinguish the different
-                  sections. They are not included in the final prompt.
-                </span>
-                <Button
-                  onClick={() => {
-                    copyComposedPromptToClipboard();
-                  }}
-                >
-                  <Icon icon={IconNames.Clipboard} />
-                </Button>
+          {hasPrompts && (
+            <Dialog
+              title="Full Composed LLM Prompt"
+              icon={IconNames.WRENCH}
+              isOpen={isViewLLMPromptOpen}
+              onClose={() => setIsViewLLMPromptOpen(false)}
+            >
+              <div className="llm-prompt-dialog">
+                <div className="forenote-section">
+                  <span className="forenote">
+                    <b>Note:</b> The titles here are provided merely to distinguish the different
+                    sections. They are not included in the final prompt.
+                  </span>
+                  <Button
+                    onClick={() => {
+                      copyComposedPromptToClipboard();
+                    }}
+                  >
+                    <Icon icon={IconNames.Clipboard} />
+                  </Button>
+                </div>
+                {prompts.map(prompt => {
+                  return (
+                    <>
+                      <H3>{prompt.role} Level Prompt</H3>
+                      <Divider />
+                      {prompt.content}
+                    </>
+                  );
+                })}
               </div>
-              {props.prompts.map(prompt => {
-                return (
-                  <>
-                    <H3>{prompt.role} Level Prompt</H3>
-                    <Divider />
-                    {prompt.content}
-                  </>
-                );
-              })}
-            </div>
-          </Dialog>
+            </Dialog>
+          )}
           <div style={{ marginBottom: '10px' }}>
             <GradingCommentSelector
               onToggle={onToggleComment}
@@ -693,13 +697,15 @@ const GradingEditor: React.FC<Props> = props => {
               selectedIndices={selectedIndices}
             />
             <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
-              <Button
-                onClick={async () => {
-                  setIsViewLLMPromptOpen(true);
-                }}
-              >
-                View Prompt
-              </Button>
+              {hasPrompts && (
+                <Button
+                  onClick={async () => {
+                    setIsViewLLMPromptOpen(true);
+                  }}
+                >
+                  View Prompt
+                </Button>
+              )}
 
               <Button
                 intent={hasGenerated ? Intent.NONE : Intent.PRIMARY}

From 9a9c51b49d5d28b52411242844018fc86a315302 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Mon, 30 Mar 2026 23:47:09 +0800
Subject: [PATCH 21/45] fix: Replaced direct yield of postGrading with a
 redux-saga CALL effect

---
 src/commons/sagas/BackendSaga.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/commons/sagas/BackendSaga.ts b/src/commons/sagas/BackendSaga.ts
index d5c357e71a..13413486ce 100644
--- a/src/commons/sagas/BackendSaga.ts
+++ b/src/commons/sagas/BackendSaga.ts
@@ -612,7 +612,8 @@ function* sendGrade(
   }
   const tokens: Tokens = yield selectTokens();
 
-  const resp: Response | null = yield postGrading(
+  const resp: Response | null = yield call(
+    postGrading,
     submissionId,
     questionId,
     xpAdjustment,

From 903368f34ed4dd619d7fd8bd97439902947c8060 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Mon, 30 Mar 2026 23:53:07 +0800
Subject: [PATCH 22/45] fix(navbar): remove stale hasLlmContent prop from
 academy navbar right info

---
 src/commons/navigationBar/NavigationBar.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index 0301732e65..3353e7f9f3 100644
--- a/src/commons/navigationBar/NavigationBar.tsx
+++ b/src/commons/navigationBar/NavigationBar.tsx
@@ -103,7 +103,6 @@ const NavigationBar: React.FC = () => {
     enableSourcecast,
     enableStories,
     enableLlmGrading,
-    hasLlmContent,
     assessmentConfigurations
   } = useSession();
   const assessmentTypes = useMemo(
@@ -180,10 +179,9 @@ const NavigationBar: React.FC = () => {
         isEnrolledInACourse,
         courseId,
         role,
-        enableLlmGrading,
-        hasLlmContent
+        enableLlmGrading
       }),
-    [isEnrolledInACourse, courseId, role, enableLlmGrading, hasLlmContent]
+    [isEnrolledInACourse, courseId, role, enableLlmGrading]
   );
 
   const fullAcademyMobileNavbarLeftInfoWithAssessments: NavbarEntryInfo[] = useMemo(() => {

From 426cdafff24a2b7e9b5c0d30e6f5415613026ca7 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 00:22:46 +0800
Subject: [PATCH 23/45] chore(deps): update caniuse-lite browsers data

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 7cc35c9bbb..c6b09090d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5367,9 +5367,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001726":
-  version: 1.0.30001733
-  resolution: "caniuse-lite@npm:1.0.30001733"
-  checksum: 10c0/2c03ad3362be7c93c09537f3853156ade5c70fb131888971dd538631971873ba27b83c5aad48dd06b6cde005fe57caae2db5d0f467d0c63a315391add70f01f5
+  version: 1.0.30001782
+  resolution: "caniuse-lite@npm:1.0.30001782"
+  checksum: 10c0/f11685de4ce1f0bc16d385fc0a07b0877da0b14af8bf510cee6a3cdfe9da1602360e1f11320e92d4f5d63cd6bec8b43539de25ee78ff94bdb7ec0fa3cce5200c
   languageName: node
   linkType: hard
 

From c67418dc41c8b46418fd4d6d8970b18ef18798b0 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 00:32:32 +0800
Subject: [PATCH 24/45] test(backend-saga): fix submit grading-and-continue
 navigation assertions

---
 .../sagas/__tests__/BackendSaga.test.ts       | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/commons/sagas/__tests__/BackendSaga.test.ts b/src/commons/sagas/__tests__/BackendSaga.test.ts
index ac2f7d1344..adfcf3e4b2 100644
--- a/src/commons/sagas/__tests__/BackendSaga.test.ts
+++ b/src/commons/sagas/__tests__/BackendSaga.test.ts
@@ -46,7 +46,6 @@ import {
 import WorkspaceActions from '../../workspace/WorkspaceActions';
 import type { WorkspaceLocation } from '../../workspace/WorkspaceTypes';
 import BackendSaga from '../BackendSaga';
-import { routerNavigate } from '../BackendSaga';
 import {
   getAssessment,
   getAssessmentConfigs,
@@ -883,31 +882,50 @@ describe('Test SUBMIT_GRADING_AND_CONTINUE action', () => {
   } as any;
 
   test('navigates only after successful save', () => {
+    const router = createMemoryRouter([
+      {
+        path: '/',
+        element: null
+      }
+    ]);
+
     return expectSaga(BackendSaga)
-      .withState(mockStateWithGrading)
+      .withState({ ...mockStateWithGrading, router })
       .provide([
         [call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments), okResp]
       ])
       .call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments)
-      .call.fn(routerNavigate)
+      .call(showSuccessMessage, 'Submitted!', 1000)
       .dispatch(
         SessionActions.submitGradingAndContinue(submissionId, questionId, xpAdjustment, comments)
       )
-      .silentRun();
+      .silentRun()
+      .then(() => {
+        expect(router.state.location.pathname).toBe('/courses/1/grading/999/2');
+      });
   });
 
   test('does not navigate when save fails', () => {
+    const router = createMemoryRouter([
+      {
+        path: '/',
+        element: null
+      }
+    ]);
+
     return expectSaga(BackendSaga)
-      .withState(mockStateWithGrading)
+      .withState({ ...mockStateWithGrading, router })
       .provide([
         [call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments), null]
       ])
       .call(postGrading, submissionId, questionId, xpAdjustment, mockTokens, comments)
-      .not.call.fn(routerNavigate)
       .dispatch(
         SessionActions.submitGradingAndContinue(submissionId, questionId, xpAdjustment, comments)
       )
-      .silentRun();
+      .silentRun()
+      .then(() => {
+        expect(router.state.location.pathname).toBe('/');
+      });
   });
 });
 

From fbe8b57848fd85d8ba44517ab99ed56da6a11245 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 00:39:41 +0800
Subject: [PATCH 25/45] fix: sort imports in academyRoutes.test.ts

---
 src/pages/academy/academyRoutes.test.ts | 294 ++++++++++++------------
 1 file changed, 147 insertions(+), 147 deletions(-)

diff --git a/src/pages/academy/academyRoutes.test.ts b/src/pages/academy/academyRoutes.test.ts
index e9bdefb4c8..4d0fa2b882 100644
--- a/src/pages/academy/academyRoutes.test.ts
+++ b/src/pages/academy/academyRoutes.test.ts
@@ -1,147 +1,147 @@
-import { vi } from 'vitest';
-import { type LoaderFunction } from 'react-router';
-
-const getStateMock = vi.fn();
-
-vi.mock('../createStore', () => ({
-  store: {
-    getState: getStateMock
-  }
-}));
-
-describe('academyRoutes llmstats guard', () => {
-  beforeEach(() => {
-    getStateMock.mockReset();
-    getStateMock.mockReturnValue({
-      session: {
-        role: 'student',
-        enableGame: false,
-        assessmentConfigurations: []
-      }
-    });
-  });
-
-  test('allows llmstats when role is admin and llm grading is enabled even if hasLlmContent is false', async () => {
-    const { getAcademyRoutes } = await import('./academyRoutes');
-
-    const routes = getAcademyRoutes();
-    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
-
-    expect(llmStatsRoute).toBeDefined();
-    expect(llmStatsRoute?.loader).toBeDefined();
-
-    getStateMock.mockReturnValue({
-      session: {
-        role: 'admin',
-        enableLlmGrading: true,
-        hasLlmContent: false,
-        enableGame: false,
-        assessmentConfigurations: []
-      }
-    });
-
-    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
-
-    expect(result).toBeNull();
-  });
-
-  test('allows llmstats when role is admin and both flags are true', async () => {
-    const { getAcademyRoutes } = await import('./academyRoutes');
-
-    const routes = getAcademyRoutes();
-    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
-
-    expect(llmStatsRoute).toBeDefined();
-    expect(llmStatsRoute?.loader).toBeDefined();
-
-    getStateMock.mockReturnValue({
-      session: {
-        role: 'admin',
-        enableLlmGrading: true,
-        hasLlmContent: true,
-        enableGame: false,
-        assessmentConfigurations: []
-      }
-    });
-
-    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
-
-    expect(result).toBeNull();
-  });
-
-  test('allows llmstats when hasLlmContent is still loading', async () => {
-    const { getAcademyRoutes } = await import('./academyRoutes');
-
-    const routes = getAcademyRoutes();
-    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
-
-    expect(llmStatsRoute).toBeDefined();
-    expect(llmStatsRoute?.loader).toBeDefined();
-
-    getStateMock.mockReturnValue({
-      session: {
-        role: 'admin',
-        enableLlmGrading: true,
-        hasLlmContent: undefined,
-        enableGame: false,
-        assessmentConfigurations: []
-      }
-    });
-
-    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
-
-    expect(result).toBeNull();
-  });
-
-  test('redirects from llmstats when llm grading is disabled', async () => {
-    const { getAcademyRoutes } = await import('./academyRoutes');
-
-    const routes = getAcademyRoutes();
-    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
-
-    expect(llmStatsRoute).toBeDefined();
-    expect(llmStatsRoute?.loader).toBeDefined();
-
-    getStateMock.mockReturnValue({
-      session: {
-        role: 'admin',
-        enableLlmGrading: false,
-        hasLlmContent: true,
-        enableGame: false,
-        assessmentConfigurations: []
-      }
-    });
-
-    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
-
-    expect(result).toBeInstanceOf(Response);
-    expect((result as Response).status).toBe(302);
-    expect((result as Response).headers.get('Location')).toBe('not_found');
-  });
-
-  test('redirects from llmstats when user is not admin even if llm grading is enabled', async () => {
-    const { getAcademyRoutes } = await import('./academyRoutes');
-
-    const routes = getAcademyRoutes();
-    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
-
-    expect(llmStatsRoute).toBeDefined();
-    expect(llmStatsRoute?.loader).toBeDefined();
-
-    getStateMock.mockReturnValue({
-      session: {
-        role: 'staff',
-        enableLlmGrading: true,
-        hasLlmContent: true,
-        enableGame: false,
-        assessmentConfigurations: []
-      }
-    });
-
-    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
-
-    expect(result).toBeInstanceOf(Response);
-    expect((result as Response).status).toBe(302);
-    expect((result as Response).headers.get('Location')).toBe('not_found');
-  });
-});
+import { type LoaderFunction } from 'react-router';
+import { vi } from 'vitest';
+
+const getStateMock = vi.fn();
+
+vi.mock('../createStore', () => ({
+  store: {
+    getState: getStateMock
+  }
+}));
+
+describe('academyRoutes llmstats guard', () => {
+  beforeEach(() => {
+    getStateMock.mockReset();
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'student',
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+  });
+
+  test('allows llmstats when role is admin and llm grading is enabled even if hasLlmContent is false', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: true,
+        hasLlmContent: false,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('allows llmstats when role is admin and both flags are true', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: true,
+        hasLlmContent: true,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('allows llmstats when hasLlmContent is still loading', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: true,
+        hasLlmContent: undefined,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('redirects from llmstats when llm grading is disabled', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'admin',
+        enableLlmGrading: false,
+        hasLlmContent: true,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeInstanceOf(Response);
+    expect((result as Response).status).toBe(302);
+    expect((result as Response).headers.get('Location')).toBe('not_found');
+  });
+
+  test('redirects from llmstats when user is not admin even if llm grading is enabled', async () => {
+    const { getAcademyRoutes } = await import('./academyRoutes');
+
+    const routes = getAcademyRoutes();
+    const llmStatsRoute = routes.find(route => route.path === 'llmstats');
+
+    expect(llmStatsRoute).toBeDefined();
+    expect(llmStatsRoute?.loader).toBeDefined();
+
+    getStateMock.mockReturnValue({
+      session: {
+        role: 'staff',
+        enableLlmGrading: true,
+        hasLlmContent: true,
+        enableGame: false,
+        assessmentConfigurations: []
+      }
+    });
+
+    const result = await (llmStatsRoute!.loader as LoaderFunction)({} as any);
+
+    expect(result).toBeInstanceOf(Response);
+    expect((result as Response).status).toBe(302);
+    expect((result as Response).headers.get('Location')).toBe('not_found');
+  });
+});

From d53877f82124063635d574fd7feb621ac733bcdd Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 13:55:28 +0800
Subject: [PATCH 26/45] fix(types): add local declaration shim for
 @blueprintjs/core

---
 src/global.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/global.d.ts b/src/global.d.ts
index b0ac762b09..a52c62fc8f 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1 +1,5 @@
 /// <reference types="@rsbuild/core/types" />
+
+declare module '@blueprintjs/core' {
+	export * from '@blueprintjs/core/lib/esnext/index';
+}

From 382fb50129aff5166f61191aebb9a8a83ea924c7 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 14:13:28 +0800
Subject: [PATCH 27/45] fix(groundControl): resolve React 19 runtime
 compatibility issues

---
 src/global.d.ts                               |  2 +-
 .../subcomponents/GroundControlEditCell.tsx   | 56 +++++++++----------
 .../GroundControlEditTeamSizeCell.tsx         | 21 +++----
 3 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index a52c62fc8f..b7d373f6d9 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,5 +1,5 @@
 /// <reference types="@rsbuild/core/types" />
 
 declare module '@blueprintjs/core' {
-	export * from '@blueprintjs/core/lib/esnext/index';
+  export * from '@blueprintjs/core/lib/esnext/index';
 }
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
index 9c250d6833..f6a6c61d04 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
@@ -1,5 +1,4 @@
 import { Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
 import { IconNames } from '@blueprintjs/icons';
 import dayjs from 'dayjs';
 import React, { useCallback, useState } from 'react';
@@ -15,10 +14,11 @@ type Props = {
 };
 
 const dateDisplayFormat = 'YYYY-MM-DD HH:mm:ss ZZ';
+const dateInputFormat = 'YYYY-MM-DDTHH:mm:ss';
 
 const EditCell: React.FC<Props> = ({ data, forOpenDate, handleAssessmentChangeDate }) => {
-  const minDate = new Date(2010, 0, 0);
-  const maxDate = new Date(2030, 11, 31);
+  const minDate = dayjs(new Date(2010, 0, 1));
+  const maxDate = dayjs(new Date(2030, 11, 31));
 
   const currentDateString = forOpenDate ? data.openAt : data.closeAt;
   const currentDate = dayjs(currentDateString, undefined, true);
@@ -45,36 +45,36 @@ const EditCell: React.FC<Props> = ({ data, forOpenDate, handleAssessmentChangeDa
     }
   }, [newDate, currentDate, data, handleAssessmentChangeDate, forOpenDate, handleCloseDialog]);
 
-  const handleParseDate = (str: string) => {
-    const date = dayjs(str, dateDisplayFormat, true);
-    return date.isValid() ? date.toDate() : false;
-  };
-  const handleFormatDate = (date: Date) => dayjs(date).format(dateDisplayFormat);
-
   const handleDateChange = React.useCallback(
-    (selectedDate: string | null) => setNewDate(dayjs(selectedDate)),
-    []
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = dayjs(event.target.value);
+
+      if (!selected.isValid()) {
+        showWarningMessage('Failed to parse date string! Defaulting to current date.', 2000);
+        setNewDate(currentDate);
+        return;
+      }
+
+      if (selected.isBefore(minDate) || selected.isAfter(maxDate)) {
+        showWarningMessage('Date is out of allowed range.', 2000);
+        return;
+      }
+
+      setNewDate(selected);
+    },
+    [currentDate, minDate, maxDate]
   );
-  const handleDateError = React.useCallback(() => {
-    // Reset date to current date if user enters an invalid date string
-    showWarningMessage('Failed to parse date string! Defaulting to current date.', 2000);
-    setNewDate(currentDate);
-  }, [currentDate]);
 
   const dateInput = (
-    <DateInput
-      formatDate={handleFormatDate}
+    <input
+      type="datetime-local"
+      className="bp6-input"
+      value={newDate ? newDate.format(dateInputFormat) : ''}
       onChange={handleDateChange}
-      onError={handleDateError}
-      parseDate={handleParseDate}
-      placeholder={`${dateDisplayFormat} or select a date`}
-      value={newDate?.toISOString()}
-      disableTimezoneSelect
-      timePrecision="second"
-      fill
-      minDate={minDate}
-      maxDate={maxDate}
-      closeOnSelection={false}
+      min={minDate.format(dateInputFormat)}
+      max={maxDate.format(dateInputFormat)}
+      step={1}
+      aria-label="Assessment date and time"
     />
   );
 
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx
index f8294217aa..abf6d45a80 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx
@@ -1,8 +1,5 @@
-import '@tremor/react/dist/esm/tremor.css';
-
-import { Icon as BpIcon } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Button, Flex } from '@tremor/react';
 import React, { useCallback } from 'react';
 
 import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
@@ -44,22 +41,22 @@ const EditTeamSizeCell: React.FC<Props> = ({ data, onTeamSizeChange }) => {
   };
 
   return (
-    <Flex>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
       <Button
-        size="xs"
-        icon={() => <BpIcon icon={IconNames.MINUS} />}
-        variant="light"
+        small
+        minimal
+        icon={IconNames.MINUS}
         onClick={handleDecrement}
         disabled={teamSize === minTeamSize}
       />
       <span>{teamSize}</span>
       <Button
-        size="xs"
-        icon={() => <BpIcon icon={IconNames.PLUS} />}
-        variant="light"
+        small
+        minimal
+        icon={IconNames.PLUS}
         onClick={handleIncrement}
       />
-    </Flex>
+    </div>
   );
 };
 

From 3aaa0535944183b898851dcd28d5205b82fdb846 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 14:31:41 +0800
Subject: [PATCH 28/45] fix(llm-stats): label feedback by task display order

---
 .../subcomponents/LLMStatsDialog.tsx           | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
index af064ba64a..c3a0f5ae9d 100644
--- a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
+++ b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
@@ -98,7 +98,8 @@ const FeedbackList: React.FC<{
   feedback: FeedbackEntry[];
   loading: boolean;
   emptyMessage: string;
-}> = ({ feedback, loading, emptyMessage }) => {
+  getTaskLabel?: (questionId: number) => string;
+}> = ({ feedback, loading, emptyMessage, getTaskLabel }) => {
   if (loading) return <Spinner size={SpinnerSize.SMALL} />;
   if (feedback.length === 0) {
     return <p style={{ color: '#888', fontStyle: 'italic' }}>{emptyMessage}</p>;
@@ -117,9 +118,9 @@ const FeedbackList: React.FC<{
           >
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
               <span style={{ fontWeight: 'bold' }}>{f.user_name}</span>
-              {f.question_id && (
+              {f.question_id !== null && (
                 <Tag minimal intent={Intent.PRIMARY} style={{ fontSize: '10px' }}>
-                  Task {f.question_id}
+                  {getTaskLabel ? getTaskLabel(f.question_id) : `Task ${f.question_id}`}
                 </Tag>
               )}
             </div>
@@ -179,6 +180,12 @@ const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
   const [questionFeedback, setQuestionFeedback] = useState<FeedbackEntry[]>([]);
   const [questionFeedbackLoading, setQuestionFeedbackLoading] = useState(false);
 
+  const questionDisplayOrderById = React.useMemo(() => {
+    const map = new Map<number, number>();
+    stats?.questions.forEach(q => map.set(q.question_id, q.display_order));
+    return map;
+  }, [stats]);
+
   // Fetch assessment-level stats + feedback
   const fetchAssessmentData = useCallback(async () => {
     setLoading(true);
@@ -279,6 +286,7 @@ const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
               feedback={questionFeedback}
               loading={questionFeedbackLoading}
               emptyMessage="No feedback received for this task."
+              getTaskLabel={() => `Task ${selectedQuestion.display_order}`}
             />
           </div>
         ) : (
@@ -377,6 +385,10 @@ const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
               feedback={feedback}
               loading={feedbackLoading}
               emptyMessage="No feedback received for this assessment."
+              getTaskLabel={questionId => {
+                const displayOrder = questionDisplayOrderById.get(questionId);
+                return displayOrder ? `Task ${displayOrder}` : `Task ${questionId}`;
+              }}
             />
           </div>
         )}

From 8672ad9f30c086f6cd58c88a6c957669ab76b400 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Tue, 31 Mar 2026 14:32:09 +0800
Subject: [PATCH 29/45] fix(grading): persist and rehydrate AI comment
 selection state; keep LLM controls visible

---
 src/commons/sagas/RequestsSaga.ts             | 18 ++++-
 src/features/grading/GradingTypes.ts          |  6 +-
 .../grading/subcomponents/GradingEditor.tsx   | 77 +++++++++++++++----
 .../subcomponents/GradingWorkspace.tsx        |  8 +-
 .../GroundControlEditTeamSizeCell.tsx         |  7 +-
 5 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 6027c53f9c..119ff2dcec 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1031,6 +1031,18 @@ export const getGrading = async (
   const gradingResult = await resp.json();
   const grading: GradingAnswer = gradingResult.answers.map((gradingQuestion: any) => {
     const { id, student, question, grade, team } = gradingQuestion;
+    const aiComments = gradingQuestion.ai_comments;
+    const selectedEdits = Object.entries(aiComments?.selectedEdits || {}).reduce(
+      (acc: Record<number, string>, [rawIndex, content]) => {
+        const parsedIndex = Number(rawIndex);
+        if (!Number.isNaN(parsedIndex) && typeof content === 'string') {
+          acc[parsedIndex] = content;
+        }
+        return acc;
+      },
+      {}
+    );
+
     const result = {
       id,
       question: {
@@ -1056,7 +1068,11 @@ export const getGrading = async (
         xpAdjustment: grade.xpAdjustment,
         comments: grade.comments
       },
-      ai_comments: gradingQuestion.ai_comments?.response?.split('|||') || [],
+      ai_comments: {
+        comments: aiComments?.response?.split('|||') || [],
+        selectedIndices: aiComments?.selectedIndices || [],
+        selectedEdits
+      },
       prompts: gradingQuestion.prompts
     } as GradingQuestion;
 
diff --git a/src/features/grading/GradingTypes.ts b/src/features/grading/GradingTypes.ts
index 88f57ae065..b5b2087197 100644
--- a/src/features/grading/GradingTypes.ts
+++ b/src/features/grading/GradingTypes.ts
@@ -194,7 +194,11 @@ export type GradingQuestion = {
   };
   autogradingResults: AutogradingResult[];
   autoGradingStatus: string;
-  ai_comments?: string[];
+  ai_comments?: {
+    comments: string[];
+    selectedIndices: number[];
+    selectedEdits: Record<number, string>;
+  };
   prompts: LLMPrompt[];
 };
 
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 0fd434abf0..eba7138165 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -57,7 +57,11 @@ type Props = {
   studentAnswer: string | null;
   graderName?: string;
   gradedAt?: string;
-  ai_comments?: string[];
+  ai_comments?: {
+    comments: string[];
+    selectedIndices: number[];
+    selectedEdits: Record<number, string>;
+  };
 };
 
 const gradingEditorButtonClass = 'grading-editor-button';
@@ -327,18 +331,59 @@ const GradingEditor: React.FC<Props> = props => {
   const [isViewLLMPromptOpen, setIsViewLLMPromptOpen] = useState<boolean>(false);
   const [hasGenerated, setHasGenerated] = useState<boolean>(false); //If generate comments button has been pressed
 
+  const restoreUserText = (savedComments: string, selectedTexts: string[]): string => {
+    if (selectedTexts.length === 0) {
+      return savedComments;
+    }
+
+    const normalizedBlock = selectedTexts.join('\n');
+    if (!normalizedBlock) {
+      return savedComments;
+    }
+
+    if (savedComments === normalizedBlock) {
+      return '';
+    }
+
+    if (savedComments.endsWith(`\n${normalizedBlock}`)) {
+      return savedComments.slice(0, -1 * (normalizedBlock.length + 1));
+    }
+
+    if (savedComments.endsWith(`\n\n${normalizedBlock}`)) {
+      return savedComments.slice(0, -1 * (normalizedBlock.length + 2));
+    }
+
+    return savedComments;
+  };
+
   const makeInitialState = () => {
     setXpAdjustmentInput(props.xpAdjustment.toString());
-    setEditorValue(props.comments);
     setSelectedTab('write');
     setCurrentlySaving(false);
-    //Load existing comments from props (the database)
-    const existingComments = props.ai_comments || [];
+    // Load existing AI comments from props (the database)
+    const existingComments = props.ai_comments?.comments || [];
+    const persistedSelectedIndices = props.ai_comments?.selectedIndices || [];
+    const persistedSelectedEdits = props.ai_comments?.selectedEdits || {};
+
+    const validSelectedIndices = [...persistedSelectedIndices]
+      .filter(index => index >= 0 && index < existingComments.length)
+      .sort((a, b) => a - b);
+
+    const hydratedCommentTexts: Record<number, string> = {};
+    validSelectedIndices.forEach(index => {
+      hydratedCommentTexts[index] = persistedSelectedEdits[index] ?? existingComments[index] ?? '';
+    });
+
+    const selectedTexts = validSelectedIndices.map(index => hydratedCommentTexts[index] || '');
+    const restoredUserText = restoreUserText(props.comments, selectedTexts);
+    const restoredCommentsBlock = buildCommentsBlock(validSelectedIndices, hydratedCommentTexts);
+
+    setEditorValue(joinEditor(restoredUserText, restoredCommentsBlock));
     setSuggestions(existingComments);
-    //Lock the button if we already have comments for this submission
+    // Lock the button if we already have comments for this submission
     setHasGenerated(existingComments.length > 0);
-    setSelectedIndices([]);
-    setCommentTexts({});
+    setSelectedIndices(validSelectedIndices);
+    setCommentTexts(hydratedCommentTexts);
     lastSavedSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
     if (saveAndContinueTimeoutRef.current !== undefined) {
       window.clearTimeout(saveAndContinueTimeoutRef.current);
@@ -707,14 +752,16 @@ const GradingEditor: React.FC<Props> = props => {
                 </Button>
               )}
 
-              <Button
-                intent={hasGenerated ? Intent.NONE : Intent.PRIMARY}
-                loading={hasClickedGenerate}
-                disabled={hasClickedGenerate}
-                onClick={() => handleGenerate(hasGenerated)}
-              >
-                {hasGenerated ? 'Re-generate Comments' : 'Generate Comments'}
-              </Button>
+              {hasPrompts && (
+                <Button
+                  intent={hasGenerated ? Intent.NONE : Intent.PRIMARY}
+                  loading={hasClickedGenerate}
+                  disabled={hasClickedGenerate}
+                  onClick={() => handleGenerate(hasGenerated)}
+                >
+                  {hasGenerated ? 'Re-generate Comments' : 'Generate Comments'}
+                </Button>
+              )}
 
               <LLMFeedbackButton
                 tokens={tokens}
diff --git a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
index 73f21bc65a..712294e86c 100644
--- a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
@@ -303,7 +303,13 @@ const GradingWorkspace: React.FC<Props> = props => {
         body: (
           <GradingEditor
             answer_id={grading!.answers[questionId].id}
-            ai_comments={grading!.answers[questionId].ai_comments || []}
+            ai_comments={
+              grading!.answers[questionId].ai_comments || {
+                comments: [],
+                selectedIndices: [],
+                selectedEdits: {}
+              }
+            }
             solution={grading!.answers[questionId].question.solution}
             assessmentId={grading!.assessment.id}
             questionId={grading!.answers[questionId].question.id}
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx
index abf6d45a80..a4852a7bfc 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlEditTeamSizeCell.tsx
@@ -50,12 +50,7 @@ const EditTeamSizeCell: React.FC<Props> = ({ data, onTeamSizeChange }) => {
         disabled={teamSize === minTeamSize}
       />
       <span>{teamSize}</span>
-      <Button
-        small
-        minimal
-        icon={IconNames.PLUS}
-        onClick={handleIncrement}
-      />
+      <Button small minimal icon={IconNames.PLUS} onClick={handleIncrement} />
     </div>
   );
 };

From 2cd03774f3ec4e92052c56b8d5adeecf7855a9af Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Tue, 31 Mar 2026 18:08:21 +0800
Subject: [PATCH 30/45] fixed hard coded bug for llm in grading page

---
 src/commons/sagas/BackendSaga.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/commons/sagas/BackendSaga.ts b/src/commons/sagas/BackendSaga.ts
index 13413486ce..ed4dd80417 100644
--- a/src/commons/sagas/BackendSaga.ts
+++ b/src/commons/sagas/BackendSaga.ts
@@ -650,7 +650,7 @@ function* sendGrade(
     actions.updateGrading(submissionId, {
       answers: newGrading,
       assessment: grading.assessment,
-      enable_llm_grading: false
+      enable_llm_grading: grading.enable_llm_grading
     })
   );
 

From 4e9ce4ed3019f36cd9c5952c73fcf70c0a7b1c81 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Tue, 31 Mar 2026 18:17:18 +0800
Subject: [PATCH 31/45] fixed data handling mismatch

---
 .../adminPanel/subcomponents/CourseConfigPanel.tsx     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
index 45a13f61ad..6992732087 100644
--- a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
@@ -246,11 +246,12 @@ const CourseConfigPanel: React.FC<Props> = props => {
                 <InputGroup
                   id="llmInputCost"
                   placeholder="3.20"
-                  value={String(props.courseConfiguration.llmInputCost || '')}
+                  value={String(props.courseConfiguration.llmInputCost ?? '')}
                   onChange={e =>
                     props.setCourseConfiguration({
                       ...props.courseConfiguration,
-                      llmInputCost: Number(e.target.value)
+                      llmInputCost:
+                        e.target.value.trim() === '' ? undefined : Number(e.target.value)
                     })
                   }
                 />
@@ -265,11 +266,12 @@ const CourseConfigPanel: React.FC<Props> = props => {
                 <InputGroup
                   id="llmOutputCost"
                   placeholder="12.80"
-                  value={String(props.courseConfiguration.llmOutputCost || '')}
+                  value={String(props.courseConfiguration.llmOutputCost ?? '')}
                   onChange={e =>
                     props.setCourseConfiguration({
                       ...props.courseConfiguration,
-                      llmOutputCost: Number(e.target.value)
+                      llmOutputCost:
+                        e.target.value.trim() === '' ? undefined : Number(e.target.value)
                     })
                   }
                 />

From 9ec0c419dcf2a1d1784cd686455fb818e0072d30 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Tue, 31 Mar 2026 18:27:13 +0800
Subject: [PATCH 32/45] fixed formatting issue with \n

---
 .../__tests__/CseMachineAnimation.test.tsx    |  2 +-
 .../grading/subcomponents/GradingEditor.tsx   | 36 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/features/cseMachine/__tests__/CseMachineAnimation.test.tsx b/src/features/cseMachine/__tests__/CseMachineAnimation.test.tsx
index 20c4e7d711..0ea12b0899 100644
--- a/src/features/cseMachine/__tests__/CseMachineAnimation.test.tsx
+++ b/src/features/cseMachine/__tests__/CseMachineAnimation.test.tsx
@@ -218,7 +218,7 @@ test('AnimationComponent animates correctly with conflicting animateTo calls', a
       return {
         x:
           elapsed < d * 0.5
-            ? [easing(elapsed, 0, 200, d), 1]
+            ? [easing(elapsed, 0, 200, d), 2]
             : // Larger tolerance value at the start because of overshoot from 2nd animation,
               // will gradually go back to value of 100 towards the end.
               [100, easing(elapsed - d * 0.5, 15, 1, d)]
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index eba7138165..073cae1cfd 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -332,28 +332,32 @@ const GradingEditor: React.FC<Props> = props => {
   const [hasGenerated, setHasGenerated] = useState<boolean>(false); //If generate comments button has been pressed
 
   const restoreUserText = (savedComments: string, selectedTexts: string[]): string => {
+    const normalizedSavedComments = savedComments.replace(/\r\n/g, '\n');
+
     if (selectedTexts.length === 0) {
-      return savedComments;
+      return normalizedSavedComments;
     }
 
-    const normalizedBlock = selectedTexts.join('\n');
-    if (!normalizedBlock) {
-      return savedComments;
-    }
+    // Support both historical storage formats:
+    // 1) comments joined by single newlines
+    // 2) comments joined by double newlines
+    const candidateBlocks = [selectedTexts.join('\n'), selectedTexts.join('\n\n')].filter(Boolean);
 
-    if (savedComments === normalizedBlock) {
-      return '';
-    }
+    for (const block of candidateBlocks) {
+      if (normalizedSavedComments === block) {
+        return '';
+      }
 
-    if (savedComments.endsWith(`\n${normalizedBlock}`)) {
-      return savedComments.slice(0, -1 * (normalizedBlock.length + 1));
-    }
+      if (normalizedSavedComments.endsWith(`\n${block}`)) {
+        return normalizedSavedComments.slice(0, -1 * (block.length + 1));
+      }
 
-    if (savedComments.endsWith(`\n\n${normalizedBlock}`)) {
-      return savedComments.slice(0, -1 * (normalizedBlock.length + 2));
+      if (normalizedSavedComments.endsWith(`\n\n${block}`)) {
+        return normalizedSavedComments.slice(0, -1 * (block.length + 2));
+      }
     }
 
-    return savedComments;
+    return normalizedSavedComments;
   };
 
   const makeInitialState = () => {
@@ -521,9 +525,7 @@ const GradingEditor: React.FC<Props> = props => {
    */
   const discardChanges = (): void => {
     if (!checkHasUnsavedChanges() || window.confirm('This will reset the editor. Are you sure?')) {
-      setXpAdjustmentInput(props.xpAdjustment!.toString());
-      setEditorValue(props.comments);
-      // TODO: Check (not sure how) if this results in a regression.
+      makeInitialState();
       showSuccessMessage('Discarded!', 1000);
     }
   };

From 90f52f27f2f6ccc003f479acca683398b6bf89e7 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:01:07 +0800
Subject: [PATCH 33/45] fix(ground-control): ensure action buttons remain
 visible on small screens

---
 .../academy/groundControl/GroundControl.tsx   |  7 ++++--
 .../subcomponents/GroundControlEditCell.tsx   |  6 +++--
 src/styles/_groundcontrol.scss                | 25 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/pages/academy/groundControl/GroundControl.tsx b/src/pages/academy/groundControl/GroundControl.tsx
index 203f30fa19..1a3a1d6067 100644
--- a/src/pages/academy/groundControl/GroundControl.tsx
+++ b/src/pages/academy/groundControl/GroundControl.tsx
@@ -83,6 +83,7 @@ const GroundControl: React.FC<Props> = props => {
     {
       headerName: 'Open Date',
       field: 'openAt',
+      minWidth: 240,
       filter: 'agDateColumnFilter',
       filterParams: {
         comparator: dateFilterComparator,
@@ -99,6 +100,7 @@ const GroundControl: React.FC<Props> = props => {
     {
       headerName: 'Close Date',
       field: 'closeAt',
+      minWidth: 240,
       filter: 'agDateColumnFilter',
       filterParams: {
         comparator: dateFilterComparator,
@@ -148,9 +150,10 @@ const GroundControl: React.FC<Props> = props => {
     {
       headerName: 'Actions',
       field: 'placeholderDelete' as any,
+      minWidth: 132,
       cellRenderer: ({ data }: { data: AssessmentOverview }) => {
         return (
-          <>
+          <div className="ground-control-actions-cell">
             <DeleteCell data={data} handleDeleteAssessment={props.handleDeleteAssessment} />
             <ConfigureCell
               data={data}
@@ -158,7 +161,7 @@ const GroundControl: React.FC<Props> = props => {
               handleAssignEntriesForVoting={props.handleAssignEntriesForVoting}
             />
             <LLMStatsCell data={data} />
-          </>
+          </div>
         );
       },
       cellRendererParams: {
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
index f6a6c61d04..2cea457214 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
@@ -80,8 +80,10 @@ const EditCell: React.FC<Props> = ({ data, forOpenDate, handleAssessmentChangeDa
 
   return (
     <>
-      <span className="date-cell-text">{currentDate.format(dateDisplayFormat)}</span>
-      <ControlButton icon={IconNames.EDIT} onClick={handleOpenDialog} />
+      <div className="date-cell-content">
+        <span className="date-cell-text">{currentDate.format(dateDisplayFormat)}</span>
+        <ControlButton icon={IconNames.EDIT} onClick={handleOpenDialog} />
+      </div>
       <Dialog
         icon={IconNames.INFO_SIGN}
         isOpen={isDialogOpen}
diff --git a/src/styles/_groundcontrol.scss b/src/styles/_groundcontrol.scss
index 78d5ad9fe1..ac070641ef 100644
--- a/src/styles/_groundcontrol.scss
+++ b/src/styles/_groundcontrol.scss
@@ -54,8 +54,23 @@
     }
   }
 
+  .date-cell-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+  }
+
   .date-cell-text {
-    margin-right: 4px;
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .date-cell-content .control-button-container {
+    flex-shrink: 0;
   }
 
   .publish-cell.publish-cell {
@@ -66,6 +81,14 @@
     margin-right: auto;
     width: 28px;
   }
+
+  .ground-control-actions-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    width: 100%;
+  }
 }
 
 .voting-related-configs,

From 1beb5b145b4a5b3fee72c5d90403de71875d1775 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sat, 4 Apr 2026 00:41:50 +0800
Subject: [PATCH 34/45] fix(grading): refactor AI comment selection with
 unified UI and persistent state

---
 .../grading/subcomponents/GradingEditor.tsx   | 455 +++++++++++-------
 src/styles/_workspace.scss                    |  56 +++
 2 files changed, 350 insertions(+), 161 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 073cae1cfd..8f9159afc4 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -67,16 +67,30 @@ type Props = {
 const gradingEditorButtonClass = 'grading-editor-button';
 const EMPTY_SELECTION_SAVE_KEY = JSON.stringify({ selected_indices: [], edits: {} });
 
+type SelectedComment = {
+  originalIndex: number;
+  text: string;
+  isEdited: boolean;
+};
+
+const normalizeCommentText = (text: string): string => text.replace(/^\n+/, '');
+
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useTypedDispatch();
   const tokens = useTokens();
   const prompts = props.prompts ?? [];
   const hasPrompts = prompts.length > 0;
   const gradingSaveResult = useTypedSelector(state => state.session.gradingSaveResult);
+  const currentGrading = useTypedSelector(state => state.session.gradings[props.submissionId]);
+  const gradingSaveResultRef = useRef(gradingSaveResult);
   const lastSavedSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
+  const initialSelectionKeyRef = useRef<string>(EMPTY_SELECTION_SAVE_KEY);
   const saveInFlightRef = useRef<boolean>(false);
   const saveAndContinueTimeoutRef = useRef<number | undefined>(undefined);
   const saveTimeoutRef = useRef<number | undefined>(undefined);
+  const selectedCommentsRef = useRef<SelectedComment[]>([]);
+  const suggestionsRef = useRef<string[]>([]);
+  const aiCommentTextareaRefs = useRef<Record<number, HTMLTextAreaElement | null>>({});
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
       ({
@@ -101,10 +115,7 @@ const GradingEditor: React.FC<Props> = props => {
   const [xpAdjustmentInput, setXpAdjustmentInput] = useState<string | null>(
     props.xpAdjustment.toString()
   );
-  /**
-   * The text in the react-mde editor, that will be saved
-   * to a comment displayed below the numerical XP */
-  const [editorValue, setEditorValue] = useState(props.comments);
+  const [userText, setUserText] = useState(props.comments);
   /**
    * The selected tab for the react-mde editor (either 'write' or 'preview')
    */
@@ -123,6 +134,10 @@ const GradingEditor: React.FC<Props> = props => {
   const [currentlySaving, setCurrentlySaving] = useState(false);
   const [isSaveInFlight, setIsSaveInFlight] = useState(false);
 
+  useEffect(() => {
+    gradingSaveResultRef.current = gradingSaveResult;
+  }, [gradingSaveResult]);
+
   useEffect(() => {
     makeInitialState();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -153,6 +168,11 @@ const GradingEditor: React.FC<Props> = props => {
       return;
     }
 
+    // Ignore stale save results when the editor is (re)mounted without an active save.
+    if (!saveInFlightRef.current && !currentlySaving) {
+      return;
+    }
+
     saveInFlightRef.current = false;
     setIsSaveInFlight(false);
 
@@ -165,110 +185,162 @@ const GradingEditor: React.FC<Props> = props => {
       saveTimeoutRef.current = undefined;
     }
 
+    if (gradingSaveResult.success) {
+      const currentSelectionKey = buildSelectionKey(
+        selectedCommentsRef.current,
+        suggestionsRef.current
+      );
+      initialSelectionKeyRef.current = currentSelectionKey;
+      lastSavedSelectionKeyRef.current = currentSelectionKey;
+    }
+
     if (!gradingSaveResult.success || !gradingSaveResult.saveAndContinue) {
       setCurrentlySaving(false);
     }
-  }, [gradingSaveResult, props.questionId, props.submissionId]);
+  }, [gradingSaveResult, currentlySaving, props.questionId, props.submissionId]);
 
-  // Invisible delimiters used internally to preserve per-comment editing state
-  // without showing any marker text in the editor.
-  const COMMENT_SEPARATOR = '\n\u2063\u2063\n';
-  const SECTION_MARKER = '\n\u2064\u2064\n';
+  const buildSelectionPayload = (selected: SelectedComment[], sourceSuggestions: string[]) => {
+    const sorted = [...selected].sort((a, b) => a.originalIndex - b.originalIndex);
+    const selectedIndices = sorted.map(comment => comment.originalIndex);
+    const changedEdits: Record<number, string> = {};
 
-  /**
-   * Splits the editor value into the user's freeform text (above the marker)
-   * and the generated-comments block (below the marker).
-   */
-  const splitEditor = (value: string): { userText: string; commentsBlock: string } => {
-    const markerIdx = value.indexOf(SECTION_MARKER);
-    if (markerIdx === -1) {
-      return { userText: value, commentsBlock: '' };
-    }
-    return {
-      userText: value.slice(0, markerIdx),
-      commentsBlock: value.slice(markerIdx + SECTION_MARKER.length)
-    };
+    sorted.forEach(comment => {
+      const original = sourceSuggestions[comment.originalIndex] ?? '';
+      if (comment.text !== original) {
+        changedEdits[comment.originalIndex] = comment.text;
+      }
+    });
+
+    return { selectedIndices, changedEdits };
   };
 
-  /**
-   * Joins the user freeform text and the generated-comments block back together.
-   * If there are no selected comments the marker is omitted so the editor stays clean.
-   */
-  const joinEditor = (userText: string, commentsBlock: string): string => {
-    if (!commentsBlock) return userText;
-    return userText + SECTION_MARKER + commentsBlock;
+  const buildSelectionKey = (selected: SelectedComment[], sourceSuggestions: string[]) => {
+    const payload = buildSelectionPayload(selected, sourceSuggestions);
+    return JSON.stringify({
+      selected_indices: payload.selectedIndices,
+      edits: payload.changedEdits
+    });
   };
 
-  const buildCommentsBlock = (indices: number[], texts: Record<number, string>) => {
-    return (
-      [...indices]
-        .sort((a, b) => a - b)
-        // Preserve one block segment per selected index, including empty edits,
-        // so split/join order always stays aligned with sorted selected indices.
-        .map(i => texts[i] ?? '')
-        .join(COMMENT_SEPARATOR)
+  const syncAiCommentsToStore = (selected: SelectedComment[], sourceSuggestions: string[]) => {
+    if (!currentGrading) {
+      return;
+    }
+
+    const { selectedIndices, changedEdits } = buildSelectionPayload(selected, sourceSuggestions);
+    const updatedAnswers = currentGrading.answers.map(answer => {
+      if (answer.question.id !== props.questionId) {
+        return answer;
+      }
+
+      return {
+        ...answer,
+        ai_comments: {
+          comments: sourceSuggestions,
+          selectedIndices,
+          selectedEdits: changedEdits
+        }
+      };
+    });
+
+    dispatch(
+      SessionActions.updateGrading(props.submissionId, {
+        ...currentGrading,
+        answers: updatedAnswers
+      })
     );
   };
 
-  /**
-   * Parses the current comments block back into per-comment texts so that
-   * user edits made directly in the editor are preserved.
-   */
-  const syncCommentsBlock = (
-    commentsBlock: string,
-    indices: number[],
-    currentTexts: Record<number, string>
-  ): Record<number, string> => {
-    const sorted = [...indices].sort((a, b) => a - b);
-    if (sorted.length === 0) return { ...currentTexts };
-    const parts = commentsBlock.split(COMMENT_SEPARATOR);
-    const updated = { ...currentTexts };
-
-    sorted.forEach((idx, i) => {
-      if (i < parts.length) {
-        updated[idx] = parts[i];
-      }
+  const buildPersistedSelectionKey = () => {
+    const existingComments = props.ai_comments?.comments || [];
+    const persistedSelectedIndices = props.ai_comments?.selectedIndices || [];
+    const persistedSelectedEdits = props.ai_comments?.selectedEdits || {};
+
+    const validSelectedIndices = [...new Set(persistedSelectedIndices)]
+      .filter(index => index >= 0 && index < existingComments.length)
+      .sort((a, b) => a - b);
+
+    const hydratedSelectedComments: SelectedComment[] = validSelectedIndices.map(index => {
+      const original = existingComments[index] ?? '';
+      const text = normalizeCommentText(persistedSelectedEdits[index] ?? original);
+      return {
+        originalIndex: index,
+        text,
+        isEdited: text !== original
+      };
     });
 
-    // If user added extra separators, fold remainder into the last comment
-    if (parts.length > sorted.length && sorted.length > 0) {
-      const lastIdx = sorted[sorted.length - 1];
-      updated[lastIdx] = parts.slice(sorted.length - 1).join(COMMENT_SEPARATOR);
-    }
+    return buildSelectionKey(hydratedSelectedComments, existingComments);
+  };
+
+  const waitForGradingSaveResult = (saveAndContinue: boolean) => {
+    const lastRequestId = gradingSaveResultRef.current?.requestId ?? 0;
+    return new Promise<boolean>(resolve => {
+      const startedAt = Date.now();
+      const maxWaitMs = 15000;
+      const pollIntervalMs = 100;
+      const interval = window.setInterval(() => {
+        const result = gradingSaveResultRef.current;
+        const timedOut = Date.now() - startedAt >= maxWaitMs;
+
+        if (
+          result &&
+          result.submissionId === props.submissionId &&
+          result.questionId === props.questionId &&
+          result.saveAndContinue === saveAndContinue &&
+          result.requestId > lastRequestId
+        ) {
+          window.clearInterval(interval);
+          resolve(result.success);
+          return;
+        }
 
-    return updated;
+        if (timedOut) {
+          window.clearInterval(interval);
+          resolve(false);
+        }
+      }, pollIntervalMs);
+    });
   };
 
   const onToggleComment = (index: number) => {
-    const isDeselecting = selectedIndices.includes(index);
-    const { userText, commentsBlock } = splitEditor(editorValue);
-
-    // Sync current comments block back to per-comment texts
-    const synced =
-      selectedIndices.length > 0
-        ? syncCommentsBlock(commentsBlock, selectedIndices, commentTexts)
-        : { ...commentTexts };
-
-    if (isDeselecting) {
-      const newTexts = { ...synced };
-      const newIndices = selectedIndices.filter(i => i !== index);
-      setCommentTexts(newTexts);
-      setSelectedIndices(newIndices);
-      setEditorValue(joinEditor(userText, buildCommentsBlock(newIndices, newTexts)));
-    } else {
-      const newTexts = { ...synced };
-      if (newTexts[index] === undefined) {
-        newTexts[index] = suggestions[index];
+    setSelectedComments(prev => {
+      const alreadySelected = prev.some(comment => comment.originalIndex === index);
+      if (alreadySelected) {
+        return prev.filter(comment => comment.originalIndex !== index);
       }
-      const newIndices = [...selectedIndices, index];
-      setCommentTexts(newTexts);
-      setSelectedIndices(newIndices);
-      setEditorValue(joinEditor(userText, buildCommentsBlock(newIndices, newTexts)));
-    }
+
+      const original = suggestions[index] ?? '';
+      return [
+        ...prev,
+        { originalIndex: index, text: normalizeCommentText(original), isEdited: false }
+      ].sort(
+        (a, b) => a.originalIndex - b.originalIndex
+      );
+    });
   };
 
-  const stripInternalMarkers = (value: string): string => {
-    return value.replaceAll(SECTION_MARKER, '\n').replaceAll(COMMENT_SEPARATOR, '\n');
+  const onSelectedCommentTextChange = (originalIndex: number, text: string) => {
+    const normalizedText = normalizeCommentText(text);
+    setSelectedComments(prev =>
+      prev.map(comment => {
+        if (comment.originalIndex !== originalIndex) {
+          return comment;
+        }
+        const original = suggestions[originalIndex] ?? '';
+        return { ...comment, text: normalizedText, isEdited: normalizedText !== original };
+      })
+    );
+
+    window.requestAnimationFrame(() => {
+      const textarea = aiCommentTextareaRefs.current[originalIndex];
+      if (!textarea) {
+        return;
+      }
+
+      textarea.style.height = '0px';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    });
   };
 
   const postSaveChosenComments = async (): Promise<boolean> => {
@@ -277,30 +349,8 @@ const GradingEditor: React.FC<Props> = props => {
       return true;
     }
 
-    const { commentsBlock } = splitEditor(editorValue);
-    const synced =
-      selectedIndices.length > 0
-        ? syncCommentsBlock(commentsBlock, selectedIndices, commentTexts)
-        : { ...commentTexts };
-
-    setCommentTexts(synced);
-
-    const sortedSelectedIndices = [...selectedIndices].sort((a, b) => a - b);
-
-    // Send only edits that differ from the original generated text.
-    const changedEdits: Record<number, string> = {};
-    sortedSelectedIndices.forEach(idx => {
-      const original = suggestions[idx] ?? '';
-      const edited = synced[idx] ?? original;
-      if (edited !== original) {
-        changedEdits[idx] = stripInternalMarkers(edited);
-      }
-    });
-
-    const currentSelectionKey = JSON.stringify({
-      selected_indices: sortedSelectedIndices,
-      edits: changedEdits
-    });
+    const { selectedIndices, changedEdits } = buildSelectionPayload(selectedComments, suggestions);
+    const currentSelectionKey = JSON.stringify({ selected_indices: selectedIndices, edits: changedEdits });
 
     // Avoid rewriting identical selection state on repeated saves.
     if (currentSelectionKey === lastSavedSelectionKeyRef.current) {
@@ -310,7 +360,7 @@ const GradingEditor: React.FC<Props> = props => {
     const resp = await saveChosenComments(
       tokens,
       props.answer_id,
-      sortedSelectedIndices,
+      selectedIndices,
       changedEdits
     );
 
@@ -325,40 +375,30 @@ const GradingEditor: React.FC<Props> = props => {
   };
 
   const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
-  const [commentTexts, setCommentTexts] = useState<Record<number, string>>({});
+  const [selectedComments, setSelectedComments] = useState<SelectedComment[]>([]);
   const [hasClickedGenerate, setHasClickedGenerate] = useState<boolean>(false);
   const [isViewLLMPromptOpen, setIsViewLLMPromptOpen] = useState<boolean>(false);
   const [hasGenerated, setHasGenerated] = useState<boolean>(false); //If generate comments button has been pressed
 
-  const restoreUserText = (savedComments: string, selectedTexts: string[]): string => {
-    const normalizedSavedComments = savedComments.replace(/\r\n/g, '\n');
-
-    if (selectedTexts.length === 0) {
-      return normalizedSavedComments;
-    }
-
-    // Support both historical storage formats:
-    // 1) comments joined by single newlines
-    // 2) comments joined by double newlines
-    const candidateBlocks = [selectedTexts.join('\n'), selectedTexts.join('\n\n')].filter(Boolean);
-
-    for (const block of candidateBlocks) {
-      if (normalizedSavedComments === block) {
-        return '';
-      }
+  useEffect(() => {
+    selectedCommentsRef.current = selectedComments;
+  }, [selectedComments]);
 
-      if (normalizedSavedComments.endsWith(`\n${block}`)) {
-        return normalizedSavedComments.slice(0, -1 * (block.length + 1));
-      }
+  useEffect(() => {
+    suggestionsRef.current = suggestions;
+  }, [suggestions]);
 
-      if (normalizedSavedComments.endsWith(`\n\n${block}`)) {
-        return normalizedSavedComments.slice(0, -1 * (block.length + 2));
+  useEffect(() => {
+    selectedComments.forEach(comment => {
+      const textarea = aiCommentTextareaRefs.current[comment.originalIndex];
+      if (!textarea) {
+        return;
       }
-    }
 
-    return normalizedSavedComments;
-  };
+      textarea.style.height = '0px';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    });
+  }, [selectedComments]);
 
   const makeInitialState = () => {
     setXpAdjustmentInput(props.xpAdjustment.toString());
@@ -369,26 +409,28 @@ const GradingEditor: React.FC<Props> = props => {
     const persistedSelectedIndices = props.ai_comments?.selectedIndices || [];
     const persistedSelectedEdits = props.ai_comments?.selectedEdits || {};
 
-    const validSelectedIndices = [...persistedSelectedIndices]
+    const validSelectedIndices = [...new Set(persistedSelectedIndices)]
       .filter(index => index >= 0 && index < existingComments.length)
       .sort((a, b) => a - b);
 
-    const hydratedCommentTexts: Record<number, string> = {};
-    validSelectedIndices.forEach(index => {
-      hydratedCommentTexts[index] = persistedSelectedEdits[index] ?? existingComments[index] ?? '';
+    const hydratedSelectedComments: SelectedComment[] = validSelectedIndices.map(index => {
+      const original = existingComments[index] ?? '';
+      const text = normalizeCommentText(persistedSelectedEdits[index] ?? original);
+      return {
+        originalIndex: index,
+        text,
+        isEdited: text !== original
+      };
     });
 
-    const selectedTexts = validSelectedIndices.map(index => hydratedCommentTexts[index] || '');
-    const restoredUserText = restoreUserText(props.comments, selectedTexts);
-    const restoredCommentsBlock = buildCommentsBlock(validSelectedIndices, hydratedCommentTexts);
-
-    setEditorValue(joinEditor(restoredUserText, restoredCommentsBlock));
+    setUserText(props.comments);
     setSuggestions(existingComments);
     // Lock the button if we already have comments for this submission
     setHasGenerated(existingComments.length > 0);
-    setSelectedIndices(validSelectedIndices);
-    setCommentTexts(hydratedCommentTexts);
-    lastSavedSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
+    setSelectedComments(hydratedSelectedComments);
+    const persistedSelectionKey = buildSelectionKey(hydratedSelectedComments, existingComments);
+    initialSelectionKeyRef.current = persistedSelectionKey;
+    lastSavedSelectionKeyRef.current = persistedSelectionKey;
     if (saveAndContinueTimeoutRef.current !== undefined) {
       window.clearTimeout(saveAndContinueTimeoutRef.current);
       saveAndContinueTimeoutRef.current = undefined;
@@ -428,11 +470,27 @@ const GradingEditor: React.FC<Props> = props => {
         return;
       }
 
-      const cleanedEditorValue = stripInternalMarkers(editorValue);
+      const cleanedEditorValue = userText;
 
+      setCurrentlySaving(true);
       saveInFlightRef.current = true;
       setIsSaveInFlight(true);
 
+      const saveAndContinue = handleSaving === onClickSaveAndContinue;
+      const previousSelectionKey = buildPersistedSelectionKey();
+      const previousSelectedComments: SelectedComment[] = (props.ai_comments?.selectedIndices || [])
+        .filter(index => index >= 0 && index < (props.ai_comments?.comments || []).length)
+        .map(index => {
+          const original = props.ai_comments?.comments?.[index] ?? '';
+          const text = props.ai_comments?.selectedEdits?.[index] ?? original;
+          return { originalIndex: index, text, isEdited: text !== original };
+        });
+      const { selectedIndices: previousSelectedIndices, changedEdits: previousChangedEdits } =
+        buildSelectionPayload(
+          previousSelectedComments,
+          props.ai_comments?.comments || []
+        );
+
       const hasSavedChosenComments = await postSaveChosenComments();
       if (!hasSavedChosenComments) {
         saveInFlightRef.current = false;
@@ -446,7 +504,44 @@ const GradingEditor: React.FC<Props> = props => {
         return;
       }
 
+      // Keep the in-memory grading state aligned with the latest saved AI selection
+      // so leaving and re-entering preserves selected comments and edits.
+      syncAiCommentsToStore(selectedComments, suggestions);
+
       handleSaving(props.submissionId, props.questionId, newXpAdjustmentInput, cleanedEditorValue);
+
+      if (saveAndContinue) {
+        return;
+      }
+
+      const gradingSaved = await waitForGradingSaveResult(saveAndContinue);
+      if (!gradingSaved) {
+        const currentSelectionKey = buildSelectionKey(selectedComments, suggestions);
+        if (currentSelectionKey !== previousSelectionKey) {
+          const rollbackResp = await saveChosenComments(
+            tokens,
+            props.answer_id,
+            previousSelectedIndices,
+            previousChangedEdits
+          );
+
+          if (rollbackResp && rollbackResp.ok) {
+            lastSavedSelectionKeyRef.current = previousSelectionKey;
+            initialSelectionKeyRef.current = previousSelectionKey;
+            syncAiCommentsToStore(previousSelectedComments, props.ai_comments?.comments || []);
+            showWarningMessage('Failed to save grading. Reverted AI comment selection to last saved state.');
+          } else {
+            showWarningMessage(
+              'Failed to save grading, and failed to rollback AI comment selection. Please refresh and retry.'
+            );
+          }
+        }
+      } else {
+        // Mark AI selection as clean after full grading save succeeds.
+        const currentSelectionKey = buildSelectionKey(selectedComments, suggestions);
+        initialSelectionKeyRef.current = currentSelectionKey;
+        lastSavedSelectionKeyRef.current = currentSelectionKey;
+      }
     };
 
   /**
@@ -496,6 +591,7 @@ const GradingEditor: React.FC<Props> = props => {
       window.clearTimeout(saveTimeoutRef.current);
     }
     saveTimeoutRef.current = window.setTimeout(() => {
+      setCurrentlySaving(false);
       saveInFlightRef.current = false;
       setIsSaveInFlight(false);
       saveTimeoutRef.current = undefined;
@@ -542,8 +638,10 @@ const GradingEditor: React.FC<Props> = props => {
 
   const checkHasUnsavedChanges = () => {
     const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined);
-    const normalizedEditorValue = stripInternalMarkers(editorValue);
-    return props.xpAdjustment !== newXpAdjustmentInput || props.comments !== normalizedEditorValue;
+    const hasTextChanges = props.comments !== userText;
+    const hasSelectionChanges =
+      buildSelectionKey(selectedComments, suggestions) !== initialSelectionKeyRef.current;
+    return props.xpAdjustment !== newXpAdjustmentInput || hasTextChanges || hasSelectionChanges;
   };
 
   const checkIsNewQuestion = () => {
@@ -627,8 +725,9 @@ const GradingEditor: React.FC<Props> = props => {
       if (resp && resp.comments) {
         setSuggestions(resp.comments);
         setHasGenerated(true);
-        setSelectedIndices([]);
-        setCommentTexts({});
+        setSelectedComments([]);
+        lastSavedSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
+        initialSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
 
         showSuccessMessage(force ? 'Comments re-generated!' : 'Comments generated!');
       }
@@ -642,7 +741,7 @@ const GradingEditor: React.FC<Props> = props => {
   return (
     <div className="GradingEditor">
       <Prompt
-        when={!currentlySaving && hasUnsavedChanges}
+        when={!currentlySaving && !isSaveInFlight && hasUnsavedChanges}
         message={'You have unsaved changes. Are you sure you want to leave?'}
       />
 
@@ -741,7 +840,7 @@ const GradingEditor: React.FC<Props> = props => {
               onToggle={onToggleComment}
               isLoading={hasClickedGenerate}
               comments={suggestions}
-              selectedIndices={selectedIndices}
+              selectedIndices={selectedComments.map(comment => comment.originalIndex)}
             />
             <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
               {hasPrompts && (
@@ -775,10 +874,14 @@ const GradingEditor: React.FC<Props> = props => {
         </>
       )}
 
-      <div className="react-mde-parent">
+      <div
+        className={`react-mde-parent grading-editor-writing-surface${
+          selectedComments.length > 0 ? ' with-ai-comments' : ''
+        }`}
+      >
         <ReactMde
-          value={editorValue}
-          onChange={setEditorValue}
+          value={userText}
+          onChange={setUserText}
           selectedTab={selectedTab}
           onTabChange={onTabChange}
           generateMarkdownPreview={generateMarkdownPreview}
@@ -787,7 +890,37 @@ const GradingEditor: React.FC<Props> = props => {
           minPreviewHeight={240}
           getIcon={blueprintIconProvider}
         />
-      </div>
+
+        {selectedComments.length > 0 && (
+          <div className="grading-editor-ai-comment-blocks">
+            {selectedComments
+              .slice()
+              .sort((a, b) => a.originalIndex - b.originalIndex)
+              .map(comment => (
+                <textarea
+                  className="grading-editor-ai-comment-input"
+                  ref={node => {
+                    aiCommentTextareaRefs.current[comment.originalIndex] = node;
+                  }}
+                  key={comment.originalIndex}
+                  value={comment.text}
+                  onChange={event =>
+                    onSelectedCommentTextChange(comment.originalIndex, event.target.value)
+                  }
+                  rows={1}
+                  style={{
+                    outline: 'none',
+                    resize: 'none',
+                    margin: 0,
+                    display: 'block',
+                    width: '100%',
+                    overflow: 'hidden'
+                  }}
+                />
+              ))}
+          </div>
+        )}
+        </div>
 
       {selectedTab === 'write' && (
         <div className="grading-editor-draft-buttons">
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index f55c293a88..a6afdb4a0f 100644
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -344,6 +344,62 @@ $code-color-notification: #f9f0d7;
         margin-bottom: 12px;
       }
 
+      $grading-editor-input-bg: #202b33;
+
+      .grading-editor-writing-surface {
+        border: 1px solid #1b2530;
+        border-radius: 3px;
+        overflow: hidden;
+        background-color: $grading-editor-input-bg;
+
+        .react-mde {
+          border: 0 !important;
+          border-radius: 0;
+          background-color: $grading-editor-input-bg;
+          margin-bottom: 0;
+
+          .mde-textarea-wrapper {
+            background-color: $grading-editor-input-bg;
+          }
+
+          textarea.mde-text {
+            background-color: $grading-editor-input-bg;
+          }
+
+          .grip {
+            background-color: $grading-editor-input-bg;
+            border-top: 1px solid #1b2530;
+          }
+        }
+
+        .grading-editor-ai-comment-blocks {
+          background-color: $grading-editor-input-bg;
+        }
+
+        .grading-editor-ai-comment-input {
+          display: block;
+          width: 100%;
+          padding: 11px;
+          box-sizing: border-box;
+          font-family: inherit;
+          line-height: 1.5;
+          color: $cadet-color-5;
+          background-color: $grading-editor-input-bg;
+          border: 0;
+
+          &:focus {
+            box-shadow: none;
+          }
+        }
+
+        &.with-ai-comments {
+          .react-mde .grip {
+            display: none;
+          }
+        }
+
+      }
+
       .grading-editor-draft-buttons {
         display: flex;
         flex-direction: row;

From 71e04d9ff2e9869caf486940e09d3a53f1487a8e Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sat, 4 Apr 2026 00:44:45 +0800
Subject: [PATCH 35/45] fix(grading): refactor AI comment selection

---
 .../grading/subcomponents/GradingEditor.tsx   | 27 ++++++++-----------
 src/styles/_workspace.scss                    |  1 -
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 8f9159afc4..eec7343c8a 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -314,9 +314,7 @@ const GradingEditor: React.FC<Props> = props => {
       return [
         ...prev,
         { originalIndex: index, text: normalizeCommentText(original), isEdited: false }
-      ].sort(
-        (a, b) => a.originalIndex - b.originalIndex
-      );
+      ].sort((a, b) => a.originalIndex - b.originalIndex);
     });
   };
 
@@ -350,19 +348,17 @@ const GradingEditor: React.FC<Props> = props => {
     }
 
     const { selectedIndices, changedEdits } = buildSelectionPayload(selectedComments, suggestions);
-    const currentSelectionKey = JSON.stringify({ selected_indices: selectedIndices, edits: changedEdits });
+    const currentSelectionKey = JSON.stringify({
+      selected_indices: selectedIndices,
+      edits: changedEdits
+    });
 
     // Avoid rewriting identical selection state on repeated saves.
     if (currentSelectionKey === lastSavedSelectionKeyRef.current) {
       return true;
     }
 
-    const resp = await saveChosenComments(
-      tokens,
-      props.answer_id,
-      selectedIndices,
-      changedEdits
-    );
+    const resp = await saveChosenComments(tokens, props.answer_id, selectedIndices, changedEdits);
 
     if (!resp || !resp.ok) {
       showWarningMessage('Failed to save selected AI comments. Please try again.');
@@ -486,10 +482,7 @@ const GradingEditor: React.FC<Props> = props => {
           return { originalIndex: index, text, isEdited: text !== original };
         });
       const { selectedIndices: previousSelectedIndices, changedEdits: previousChangedEdits } =
-        buildSelectionPayload(
-          previousSelectedComments,
-          props.ai_comments?.comments || []
-        );
+        buildSelectionPayload(previousSelectedComments, props.ai_comments?.comments || []);
 
       const hasSavedChosenComments = await postSaveChosenComments();
       if (!hasSavedChosenComments) {
@@ -529,7 +522,9 @@ const GradingEditor: React.FC<Props> = props => {
             lastSavedSelectionKeyRef.current = previousSelectionKey;
             initialSelectionKeyRef.current = previousSelectionKey;
             syncAiCommentsToStore(previousSelectedComments, props.ai_comments?.comments || []);
-            showWarningMessage('Failed to save grading. Reverted AI comment selection to last saved state.');
+            showWarningMessage(
+              'Failed to save grading. Reverted AI comment selection to last saved state.'
+            );
           } else {
             showWarningMessage(
               'Failed to save grading, and failed to rollback AI comment selection. Please refresh and retry.'
@@ -920,7 +915,7 @@ const GradingEditor: React.FC<Props> = props => {
               ))}
           </div>
         )}
-        </div>
+      </div>
 
       {selectedTab === 'write' && (
         <div className="grading-editor-draft-buttons">
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index a6afdb4a0f..95f51511db 100644
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -397,7 +397,6 @@ $code-color-notification: #f9f0d7;
             display: none;
           }
         }
-
       }
 
       .grading-editor-draft-buttons {

From d2580aa375e0e52b7cc23a70c511dcf97c8111a0 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sat, 4 Apr 2026 00:48:55 +0800
Subject: [PATCH 36/45] Update LLMStatsTab and LLMStatsPage

---
 src/commons/adminStats/LLMStatsTab.tsx      | 726 ++++++++++----------
 src/pages/academy/llmStats/LLMStatsPage.tsx |  26 +-
 2 files changed, 376 insertions(+), 376 deletions(-)

diff --git a/src/commons/adminStats/LLMStatsTab.tsx b/src/commons/adminStats/LLMStatsTab.tsx
index 164cde569f..fa0ea99665 100644
--- a/src/commons/adminStats/LLMStatsTab.tsx
+++ b/src/commons/adminStats/LLMStatsTab.tsx
@@ -1,363 +1,363 @@
-import {
-  Button,
-  Card,
-  Divider,
-  H3,
-  H4,
-  Icon,
-  Intent,
-  NonIdealState,
-  Spinner,
-  SpinnerSize,
-  Tag
-} from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { LLMAssessmentStat, LLMCourseStat, LLMQuestionStat } from '../assessment/AssessmentTypes';
-import { getLLMCourseStats } from '../sagas/RequestsSaga';
-import { useTokens } from '../utils/Hooks';
-
-const formatNumber = (value: number | string | null | undefined): string => {
-  if (value === null || value === undefined || value === '') {
-    return '0';
-  }
-  if (typeof value === 'string') {
-    const parsed = Number(value);
-    return Number.isNaN(parsed) ? value : parsed.toLocaleString();
-  }
-  return value.toLocaleString();
-};
-
-const formatCost = (value: number | string | null | undefined): string => {
-  if (value === null || value === undefined || value === '') {
-    return '$0.00';
-  }
-  const parsed = Number(value);
-  if (Number.isNaN(parsed)) {
-    return `${value}`;
-  }
-  return `$${parsed.toFixed(2)}`;
-};
-
-const getTotalTokens = (assessment: LLMAssessmentStat): number => {
-  return (assessment.llm_total_input_tokens || 0) + (assessment.llm_total_output_tokens || 0);
-};
-
-const getQuestionTotalTokens = (question: LLMQuestionStat): number => {
-  return (question.llm_total_input_tokens || 0) + (question.llm_total_output_tokens || 0);
-};
-
-const LLMStatsTab: React.FC = () => {
-  const { accessToken, refreshToken } = useTokens();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [data, setData] = useState<LLMCourseStat | null>(null);
-  const [sortKey, setSortKey] = useState<
-    'title' | 'category' | 'total_uses' | 'total_tokens' | 'llm_total_cost' | 'avg_rating'
-  >('llm_total_cost');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
-  const [expanded, setExpanded] = useState<Set<number>>(new Set());
-
-  useEffect(() => {
-    const fetch = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const resp = await getLLMCourseStats({ accessToken, refreshToken });
-        if (!resp) {
-          setError('Failed to load LLM statistics.');
-        } else {
-          setData(resp);
-        }
-      } catch (err) {
-        setError('Failed to load LLM statistics.');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetch();
-  }, [accessToken, refreshToken]);
-
-  const sortedAssessments: LLMAssessmentStat[] = useMemo(() => {
-    if (!data?.assessments) {
-      return [];
-    }
-
-    const assessments = [...data.assessments];
-    const compare = (a: LLMAssessmentStat, b: LLMAssessmentStat): number => {
-      const direction = sortDirection === 'asc' ? 1 : -1;
-      switch (sortKey) {
-        case 'title':
-          return direction * a.title.localeCompare(b.title);
-        case 'category':
-          return direction * a.category.localeCompare(b.category);
-        case 'total_uses':
-          return direction * (a.total_uses - b.total_uses);
-        case 'avg_rating':
-          return direction * ((a.avg_rating || 0) - (b.avg_rating || 0));
-        case 'llm_total_cost':
-          return direction * (Number(a.llm_total_cost || 0) - Number(b.llm_total_cost || 0));
-        case 'total_tokens':
-          return direction * (getTotalTokens(a) - getTotalTokens(b));
-        default:
-          return 0;
-      }
-    };
-
-    return assessments.sort(compare);
-  }, [data, sortKey, sortDirection]);
-
-  const toggleSort = (key: typeof sortKey) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortKey(key);
-      setSortDirection('desc');
-    }
-  };
-
-  const toggleRow = (assessmentId: number) => {
-    const next = new Set(expanded);
-    if (next.has(assessmentId)) {
-      next.delete(assessmentId);
-    } else {
-      next.add(assessmentId);
-    }
-    setExpanded(next);
-  };
-
-  const downloadReport = () => {
-    if (!data) {
-      return;
-    }
-
-    const headers = [
-      'Assessment Title',
-      'Category',
-      'Question Number',
-      'Uses',
-      'Input Tokens',
-      'Output Tokens',
-      'Total Tokens',
-      'Cost',
-      'Avg Rating'
-    ];
-
-    const rows: string[] = [];
-    data.assessments.forEach(assessment => {
-      if (assessment.questions.length === 0) {
-        rows.push(
-          [
-            assessment.title,
-            assessment.category,
-            '',
-            assessment.total_uses.toString(),
-            assessment.llm_total_input_tokens.toString(),
-            assessment.llm_total_output_tokens.toString(),
-            getTotalTokens(assessment).toString(),
-            Number(assessment.llm_total_cost || 0).toFixed(6),
-            assessment.avg_rating?.toString() ?? ''
-          ].join(',')
-        );
-      } else {
-        assessment.questions.forEach(question => {
-          rows.push(
-            [
-              assessment.title,
-              assessment.category,
-              question.display_order.toString(),
-              question.total_uses.toString(),
-              question.llm_total_input_tokens.toString(),
-              question.llm_total_output_tokens.toString(),
-              getQuestionTotalTokens(question).toString(),
-              Number(question.llm_total_cost || 0).toFixed(6),
-              question.avg_rating?.toString() ?? ''
-            ].join(',')
-          );
-        });
-      }
-    });
-
-    const content = [headers.join(','), ...rows].join('\n');
-    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-
-    link.href = url;
-    link.setAttribute('download', 'llm_stats_report.csv');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  if (loading) {
-    return (
-      <div style={{ padding: '20px', textAlign: 'center' }}>
-        <Spinner size={SpinnerSize.STANDARD} />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <NonIdealState
-        icon={IconNames.ERROR}
-        title="Unable to load LLM statistics"
-        description={error}
-      />
-    );
-  }
-
-  if (!data || data.assessments.length === 0) {
-    return (
-      <NonIdealState
-        icon={IconNames.CHART}
-        title="No LLM usage data yet"
-        description="Once students start generating comments, this panel will show LLM statistics."
-      />
-    );
-  }
-
-  return (
-    <div style={{ padding: '14px' }}>
-      <div style={{ display: 'flex', gap: '12px', marginBottom: '12px', flexWrap: 'wrap' }}>
-        <Card style={{ flex: 1, textAlign: 'center' }}>
-          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_input_tokens)}</H3>
-          <div>Course-wide Input Tokens</div>
-        </Card>
-        <Card style={{ flex: 1, textAlign: 'center' }}>
-          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_output_tokens)}</H3>
-          <div>Course-wide Output Tokens</div>
-        </Card>
-        <Card style={{ flex: 1, textAlign: 'center' }}>
-          <H3 style={{ margin: 0 }}>{formatCost(data.course_total_cost)}</H3>
-          <div>Total LLM Expenditure</div>
-        </Card>
-      </div>
-
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <H4 style={{ margin: '8px 0' }}>Assessments</H4>
-        <Button icon={IconNames.DOWNLOAD} intent={Intent.PRIMARY} onClick={downloadReport}>
-          Download Report
-        </Button>
-      </div>
-
-      <table
-        className="bp3-html-table bp3-html-table-striped bp3-html-table-condensed"
-        style={{ width: '100%', marginTop: '8px' }}
-      >
-        <thead>
-          <tr>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('title')}>
-                Title
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('category')}>
-                Category
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('total_uses')}>
-                Uses
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('total_tokens')}>
-                Total Tokens
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('llm_total_cost')}>
-                Total Cost
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('avg_rating')}>
-                Avg Rating
-              </Button>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedAssessments.map(assessment => {
-            const isExpanded = expanded.has(assessment.assessment_id);
-            return (
-              <React.Fragment key={assessment.assessment_id}>
-                <tr
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => toggleRow(assessment.assessment_id)}
-                >
-                  <td>
-                    <span style={{ marginRight: '6px' }}>
-                      <Icon icon={isExpanded ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT} />
-                    </span>
-                    {assessment.title}
-                  </td>
-                  <td>{assessment.category}</td>
-                  <td>{assessment.total_uses}</td>
-                  <td>{formatNumber(getTotalTokens(assessment))}</td>
-                  <td>{formatCost(assessment.llm_total_cost)}</td>
-                  <td>
-                    {assessment.avg_rating === null || assessment.avg_rating === undefined
-                      ? 'N/A'
-                      : assessment.avg_rating.toFixed(2)}
-                  </td>
-                </tr>
-                {isExpanded && assessment.questions.length > 0 && (
-                  <tr>
-                    <td colSpan={6} style={{ padding: 0, background: '#f3f3f3' }}>
-                      <div style={{ padding: '8px' }}>
-                        <table
-                          className="bp3-html-table bp3-html-table-condensed"
-                          style={{ width: '100%' }}
-                        >
-                          <thead>
-                            <tr>
-                              <th>Question</th>
-                              <th>Uses</th>
-                              <th>Tokens</th>
-                              <th>Cost</th>
-                              <th>Avg Rating</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {assessment.questions.map(question => (
-                              <tr key={question.question_id}>
-                                <td>{question.display_order}</td>
-                                <td>{question.total_uses}</td>
-                                <td>{formatNumber(getQuestionTotalTokens(question))}</td>
-                                <td>{formatCost(question.llm_total_cost)}</td>
-                                <td>
-                                  {question.avg_rating === null || question.avg_rating === undefined
-                                    ? 'N/A'
-                                    : question.avg_rating.toFixed(2)}
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </td>
-                  </tr>
-                )}
-              </React.Fragment>
-            );
-          })}
-        </tbody>
-      </table>
-
-      <Divider style={{ marginTop: '16px' }} />
-
-      <Tag minimal intent={Intent.PRIMARY} style={{ marginTop: '8px' }}>
-        Data is shown for published assessments and questions with LLM prompts.
-      </Tag>
-    </div>
-  );
-};
-
-export default LLMStatsTab;
+import {
+  Button,
+  Card,
+  Divider,
+  H3,
+  H4,
+  Icon,
+  Intent,
+  NonIdealState,
+  Spinner,
+  SpinnerSize,
+  Tag
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { LLMAssessmentStat, LLMCourseStat, LLMQuestionStat } from '../assessment/AssessmentTypes';
+import { getLLMCourseStats } from '../sagas/RequestsSaga';
+import { useTokens } from '../utils/Hooks';
+
+const formatNumber = (value: number | string | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '0';
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? value : parsed.toLocaleString();
+  }
+  return value.toLocaleString();
+};
+
+const formatCost = (value: number | string | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '$0.00';
+  }
+  const parsed = Number(value);
+  if (Number.isNaN(parsed)) {
+    return `${value}`;
+  }
+  return `$${parsed.toFixed(2)}`;
+};
+
+const getTotalTokens = (assessment: LLMAssessmentStat): number => {
+  return (assessment.llm_total_input_tokens || 0) + (assessment.llm_total_output_tokens || 0);
+};
+
+const getQuestionTotalTokens = (question: LLMQuestionStat): number => {
+  return (question.llm_total_input_tokens || 0) + (question.llm_total_output_tokens || 0);
+};
+
+const LLMStatsTab: React.FC = () => {
+  const { accessToken, refreshToken } = useTokens();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<LLMCourseStat | null>(null);
+  const [sortKey, setSortKey] = useState<
+    'title' | 'category' | 'total_uses' | 'total_tokens' | 'llm_total_cost' | 'avg_rating'
+  >('llm_total_cost');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [expanded, setExpanded] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    const fetch = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const resp = await getLLMCourseStats({ accessToken, refreshToken });
+        if (!resp) {
+          setError('Failed to load LLM statistics.');
+        } else {
+          setData(resp);
+        }
+      } catch (err) {
+        setError('Failed to load LLM statistics.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetch();
+  }, [accessToken, refreshToken]);
+
+  const sortedAssessments: LLMAssessmentStat[] = useMemo(() => {
+    if (!data?.assessments) {
+      return [];
+    }
+
+    const assessments = [...data.assessments];
+    const compare = (a: LLMAssessmentStat, b: LLMAssessmentStat): number => {
+      const direction = sortDirection === 'asc' ? 1 : -1;
+      switch (sortKey) {
+        case 'title':
+          return direction * a.title.localeCompare(b.title);
+        case 'category':
+          return direction * a.category.localeCompare(b.category);
+        case 'total_uses':
+          return direction * (a.total_uses - b.total_uses);
+        case 'avg_rating':
+          return direction * ((a.avg_rating || 0) - (b.avg_rating || 0));
+        case 'llm_total_cost':
+          return direction * (Number(a.llm_total_cost || 0) - Number(b.llm_total_cost || 0));
+        case 'total_tokens':
+          return direction * (getTotalTokens(a) - getTotalTokens(b));
+        default:
+          return 0;
+      }
+    };
+
+    return assessments.sort(compare);
+  }, [data, sortKey, sortDirection]);
+
+  const toggleSort = (key: typeof sortKey) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortDirection('desc');
+    }
+  };
+
+  const toggleRow = (assessmentId: number) => {
+    const next = new Set(expanded);
+    if (next.has(assessmentId)) {
+      next.delete(assessmentId);
+    } else {
+      next.add(assessmentId);
+    }
+    setExpanded(next);
+  };
+
+  const downloadReport = () => {
+    if (!data) {
+      return;
+    }
+
+    const headers = [
+      'Assessment Title',
+      'Category',
+      'Question Number',
+      'Uses',
+      'Input Tokens',
+      'Output Tokens',
+      'Total Tokens',
+      'Cost',
+      'Avg Rating'
+    ];
+
+    const rows: string[] = [];
+    data.assessments.forEach(assessment => {
+      if (assessment.questions.length === 0) {
+        rows.push(
+          [
+            assessment.title,
+            assessment.category,
+            '',
+            assessment.total_uses.toString(),
+            assessment.llm_total_input_tokens.toString(),
+            assessment.llm_total_output_tokens.toString(),
+            getTotalTokens(assessment).toString(),
+            Number(assessment.llm_total_cost || 0).toFixed(6),
+            assessment.avg_rating?.toString() ?? ''
+          ].join(',')
+        );
+      } else {
+        assessment.questions.forEach(question => {
+          rows.push(
+            [
+              assessment.title,
+              assessment.category,
+              question.display_order.toString(),
+              question.total_uses.toString(),
+              question.llm_total_input_tokens.toString(),
+              question.llm_total_output_tokens.toString(),
+              getQuestionTotalTokens(question).toString(),
+              Number(question.llm_total_cost || 0).toFixed(6),
+              question.avg_rating?.toString() ?? ''
+            ].join(',')
+          );
+        });
+      }
+    });
+
+    const content = [headers.join(','), ...rows].join('\n');
+    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.setAttribute('download', 'llm_stats_report.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <Spinner size={SpinnerSize.STANDARD} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <NonIdealState
+        icon={IconNames.ERROR}
+        title="Unable to load LLM statistics"
+        description={error}
+      />
+    );
+  }
+
+  if (!data || data.assessments.length === 0) {
+    return (
+      <NonIdealState
+        icon={IconNames.CHART}
+        title="No LLM usage data yet"
+        description="Once students start generating comments, this panel will show LLM statistics."
+      />
+    );
+  }
+
+  return (
+    <div style={{ padding: '14px' }}>
+      <div style={{ display: 'flex', gap: '12px', marginBottom: '12px', flexWrap: 'wrap' }}>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_input_tokens)}</H3>
+          <div>Course-wide Input Tokens</div>
+        </Card>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_output_tokens)}</H3>
+          <div>Course-wide Output Tokens</div>
+        </Card>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatCost(data.course_total_cost)}</H3>
+          <div>Total LLM Expenditure</div>
+        </Card>
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <H4 style={{ margin: '8px 0' }}>Assessments</H4>
+        <Button icon={IconNames.DOWNLOAD} intent={Intent.PRIMARY} onClick={downloadReport}>
+          Download Report
+        </Button>
+      </div>
+
+      <table
+        className="bp3-html-table bp3-html-table-striped bp3-html-table-condensed"
+        style={{ width: '100%', marginTop: '8px' }}
+      >
+        <thead>
+          <tr>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('title')}>
+                Title
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('category')}>
+                Category
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('total_uses')}>
+                Uses
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('total_tokens')}>
+                Total Tokens
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('llm_total_cost')}>
+                Total Cost
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('avg_rating')}>
+                Avg Rating
+              </Button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedAssessments.map(assessment => {
+            const isExpanded = expanded.has(assessment.assessment_id);
+            return (
+              <React.Fragment key={assessment.assessment_id}>
+                <tr
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => toggleRow(assessment.assessment_id)}
+                >
+                  <td>
+                    <span style={{ marginRight: '6px' }}>
+                      <Icon icon={isExpanded ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT} />
+                    </span>
+                    {assessment.title}
+                  </td>
+                  <td>{assessment.category}</td>
+                  <td>{assessment.total_uses}</td>
+                  <td>{formatNumber(getTotalTokens(assessment))}</td>
+                  <td>{formatCost(assessment.llm_total_cost)}</td>
+                  <td>
+                    {assessment.avg_rating === null || assessment.avg_rating === undefined
+                      ? 'N/A'
+                      : assessment.avg_rating.toFixed(2)}
+                  </td>
+                </tr>
+                {isExpanded && assessment.questions.length > 0 && (
+                  <tr>
+                    <td colSpan={6} style={{ padding: 0, background: '#f3f3f3' }}>
+                      <div style={{ padding: '8px' }}>
+                        <table
+                          className="bp3-html-table bp3-html-table-condensed"
+                          style={{ width: '100%' }}
+                        >
+                          <thead>
+                            <tr>
+                              <th>Question</th>
+                              <th>Uses</th>
+                              <th>Tokens</th>
+                              <th>Cost</th>
+                              <th>Avg Rating</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {assessment.questions.map(question => (
+                              <tr key={question.question_id}>
+                                <td>{question.display_order}</td>
+                                <td>{question.total_uses}</td>
+                                <td>{formatNumber(getQuestionTotalTokens(question))}</td>
+                                <td>{formatCost(question.llm_total_cost)}</td>
+                                <td>
+                                  {question.avg_rating === null || question.avg_rating === undefined
+                                    ? 'N/A'
+                                    : question.avg_rating.toFixed(2)}
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+
+      <Divider style={{ marginTop: '16px' }} />
+
+      <Tag minimal intent={Intent.PRIMARY} style={{ marginTop: '8px' }}>
+        Data is shown for published assessments and questions with LLM prompts.
+      </Tag>
+    </div>
+  );
+};
+
+export default LLMStatsTab;
diff --git a/src/pages/academy/llmStats/LLMStatsPage.tsx b/src/pages/academy/llmStats/LLMStatsPage.tsx
index fe79c9abc8..2104cb7cfd 100644
--- a/src/pages/academy/llmStats/LLMStatsPage.tsx
+++ b/src/pages/academy/llmStats/LLMStatsPage.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-
-import LLMStatsTab from '../../../commons/adminStats/LLMStatsTab';
-import ContentDisplay from '../../../commons/ContentDisplay';
-
-const LLMStatsPage: React.FC = () => {
-  return <ContentDisplay display={<LLMStatsTab />} fullWidth={false} />;
-};
-
-export const Component = LLMStatsPage;
-Component.displayName = 'LLMStatsPage';
-
-export default LLMStatsPage;
+import React from 'react';
+
+import LLMStatsTab from '../../../commons/adminStats/LLMStatsTab';
+import ContentDisplay from '../../../commons/ContentDisplay';
+
+const LLMStatsPage: React.FC = () => {
+  return <ContentDisplay display={<LLMStatsTab />} fullWidth={false} />;
+};
+
+export const Component = LLMStatsPage;
+Component.displayName = 'LLMStatsPage';
+
+export default LLMStatsPage;

From 0bf8aa01e4764890cef11f5187dfa3b305b8237c Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sat, 4 Apr 2026 00:56:14 +0800
Subject: [PATCH 37/45] Save LLMStats updates before merging master

---
 src/commons/adminStats/LLMStatsTab.tsx      | 726 ++++++++++----------
 src/pages/academy/llmStats/LLMStatsPage.tsx |  26 +-
 2 files changed, 376 insertions(+), 376 deletions(-)

diff --git a/src/commons/adminStats/LLMStatsTab.tsx b/src/commons/adminStats/LLMStatsTab.tsx
index 164cde569f..fa0ea99665 100644
--- a/src/commons/adminStats/LLMStatsTab.tsx
+++ b/src/commons/adminStats/LLMStatsTab.tsx
@@ -1,363 +1,363 @@
-import {
-  Button,
-  Card,
-  Divider,
-  H3,
-  H4,
-  Icon,
-  Intent,
-  NonIdealState,
-  Spinner,
-  SpinnerSize,
-  Tag
-} from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { LLMAssessmentStat, LLMCourseStat, LLMQuestionStat } from '../assessment/AssessmentTypes';
-import { getLLMCourseStats } from '../sagas/RequestsSaga';
-import { useTokens } from '../utils/Hooks';
-
-const formatNumber = (value: number | string | null | undefined): string => {
-  if (value === null || value === undefined || value === '') {
-    return '0';
-  }
-  if (typeof value === 'string') {
-    const parsed = Number(value);
-    return Number.isNaN(parsed) ? value : parsed.toLocaleString();
-  }
-  return value.toLocaleString();
-};
-
-const formatCost = (value: number | string | null | undefined): string => {
-  if (value === null || value === undefined || value === '') {
-    return '$0.00';
-  }
-  const parsed = Number(value);
-  if (Number.isNaN(parsed)) {
-    return `${value}`;
-  }
-  return `$${parsed.toFixed(2)}`;
-};
-
-const getTotalTokens = (assessment: LLMAssessmentStat): number => {
-  return (assessment.llm_total_input_tokens || 0) + (assessment.llm_total_output_tokens || 0);
-};
-
-const getQuestionTotalTokens = (question: LLMQuestionStat): number => {
-  return (question.llm_total_input_tokens || 0) + (question.llm_total_output_tokens || 0);
-};
-
-const LLMStatsTab: React.FC = () => {
-  const { accessToken, refreshToken } = useTokens();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [data, setData] = useState<LLMCourseStat | null>(null);
-  const [sortKey, setSortKey] = useState<
-    'title' | 'category' | 'total_uses' | 'total_tokens' | 'llm_total_cost' | 'avg_rating'
-  >('llm_total_cost');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
-  const [expanded, setExpanded] = useState<Set<number>>(new Set());
-
-  useEffect(() => {
-    const fetch = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const resp = await getLLMCourseStats({ accessToken, refreshToken });
-        if (!resp) {
-          setError('Failed to load LLM statistics.');
-        } else {
-          setData(resp);
-        }
-      } catch (err) {
-        setError('Failed to load LLM statistics.');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetch();
-  }, [accessToken, refreshToken]);
-
-  const sortedAssessments: LLMAssessmentStat[] = useMemo(() => {
-    if (!data?.assessments) {
-      return [];
-    }
-
-    const assessments = [...data.assessments];
-    const compare = (a: LLMAssessmentStat, b: LLMAssessmentStat): number => {
-      const direction = sortDirection === 'asc' ? 1 : -1;
-      switch (sortKey) {
-        case 'title':
-          return direction * a.title.localeCompare(b.title);
-        case 'category':
-          return direction * a.category.localeCompare(b.category);
-        case 'total_uses':
-          return direction * (a.total_uses - b.total_uses);
-        case 'avg_rating':
-          return direction * ((a.avg_rating || 0) - (b.avg_rating || 0));
-        case 'llm_total_cost':
-          return direction * (Number(a.llm_total_cost || 0) - Number(b.llm_total_cost || 0));
-        case 'total_tokens':
-          return direction * (getTotalTokens(a) - getTotalTokens(b));
-        default:
-          return 0;
-      }
-    };
-
-    return assessments.sort(compare);
-  }, [data, sortKey, sortDirection]);
-
-  const toggleSort = (key: typeof sortKey) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortKey(key);
-      setSortDirection('desc');
-    }
-  };
-
-  const toggleRow = (assessmentId: number) => {
-    const next = new Set(expanded);
-    if (next.has(assessmentId)) {
-      next.delete(assessmentId);
-    } else {
-      next.add(assessmentId);
-    }
-    setExpanded(next);
-  };
-
-  const downloadReport = () => {
-    if (!data) {
-      return;
-    }
-
-    const headers = [
-      'Assessment Title',
-      'Category',
-      'Question Number',
-      'Uses',
-      'Input Tokens',
-      'Output Tokens',
-      'Total Tokens',
-      'Cost',
-      'Avg Rating'
-    ];
-
-    const rows: string[] = [];
-    data.assessments.forEach(assessment => {
-      if (assessment.questions.length === 0) {
-        rows.push(
-          [
-            assessment.title,
-            assessment.category,
-            '',
-            assessment.total_uses.toString(),
-            assessment.llm_total_input_tokens.toString(),
-            assessment.llm_total_output_tokens.toString(),
-            getTotalTokens(assessment).toString(),
-            Number(assessment.llm_total_cost || 0).toFixed(6),
-            assessment.avg_rating?.toString() ?? ''
-          ].join(',')
-        );
-      } else {
-        assessment.questions.forEach(question => {
-          rows.push(
-            [
-              assessment.title,
-              assessment.category,
-              question.display_order.toString(),
-              question.total_uses.toString(),
-              question.llm_total_input_tokens.toString(),
-              question.llm_total_output_tokens.toString(),
-              getQuestionTotalTokens(question).toString(),
-              Number(question.llm_total_cost || 0).toFixed(6),
-              question.avg_rating?.toString() ?? ''
-            ].join(',')
-          );
-        });
-      }
-    });
-
-    const content = [headers.join(','), ...rows].join('\n');
-    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-
-    link.href = url;
-    link.setAttribute('download', 'llm_stats_report.csv');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  if (loading) {
-    return (
-      <div style={{ padding: '20px', textAlign: 'center' }}>
-        <Spinner size={SpinnerSize.STANDARD} />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <NonIdealState
-        icon={IconNames.ERROR}
-        title="Unable to load LLM statistics"
-        description={error}
-      />
-    );
-  }
-
-  if (!data || data.assessments.length === 0) {
-    return (
-      <NonIdealState
-        icon={IconNames.CHART}
-        title="No LLM usage data yet"
-        description="Once students start generating comments, this panel will show LLM statistics."
-      />
-    );
-  }
-
-  return (
-    <div style={{ padding: '14px' }}>
-      <div style={{ display: 'flex', gap: '12px', marginBottom: '12px', flexWrap: 'wrap' }}>
-        <Card style={{ flex: 1, textAlign: 'center' }}>
-          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_input_tokens)}</H3>
-          <div>Course-wide Input Tokens</div>
-        </Card>
-        <Card style={{ flex: 1, textAlign: 'center' }}>
-          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_output_tokens)}</H3>
-          <div>Course-wide Output Tokens</div>
-        </Card>
-        <Card style={{ flex: 1, textAlign: 'center' }}>
-          <H3 style={{ margin: 0 }}>{formatCost(data.course_total_cost)}</H3>
-          <div>Total LLM Expenditure</div>
-        </Card>
-      </div>
-
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <H4 style={{ margin: '8px 0' }}>Assessments</H4>
-        <Button icon={IconNames.DOWNLOAD} intent={Intent.PRIMARY} onClick={downloadReport}>
-          Download Report
-        </Button>
-      </div>
-
-      <table
-        className="bp3-html-table bp3-html-table-striped bp3-html-table-condensed"
-        style={{ width: '100%', marginTop: '8px' }}
-      >
-        <thead>
-          <tr>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('title')}>
-                Title
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('category')}>
-                Category
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('total_uses')}>
-                Uses
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('total_tokens')}>
-                Total Tokens
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('llm_total_cost')}>
-                Total Cost
-              </Button>
-            </th>
-            <th>
-              <Button minimal={true} small={true} onClick={() => toggleSort('avg_rating')}>
-                Avg Rating
-              </Button>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedAssessments.map(assessment => {
-            const isExpanded = expanded.has(assessment.assessment_id);
-            return (
-              <React.Fragment key={assessment.assessment_id}>
-                <tr
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => toggleRow(assessment.assessment_id)}
-                >
-                  <td>
-                    <span style={{ marginRight: '6px' }}>
-                      <Icon icon={isExpanded ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT} />
-                    </span>
-                    {assessment.title}
-                  </td>
-                  <td>{assessment.category}</td>
-                  <td>{assessment.total_uses}</td>
-                  <td>{formatNumber(getTotalTokens(assessment))}</td>
-                  <td>{formatCost(assessment.llm_total_cost)}</td>
-                  <td>
-                    {assessment.avg_rating === null || assessment.avg_rating === undefined
-                      ? 'N/A'
-                      : assessment.avg_rating.toFixed(2)}
-                  </td>
-                </tr>
-                {isExpanded && assessment.questions.length > 0 && (
-                  <tr>
-                    <td colSpan={6} style={{ padding: 0, background: '#f3f3f3' }}>
-                      <div style={{ padding: '8px' }}>
-                        <table
-                          className="bp3-html-table bp3-html-table-condensed"
-                          style={{ width: '100%' }}
-                        >
-                          <thead>
-                            <tr>
-                              <th>Question</th>
-                              <th>Uses</th>
-                              <th>Tokens</th>
-                              <th>Cost</th>
-                              <th>Avg Rating</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {assessment.questions.map(question => (
-                              <tr key={question.question_id}>
-                                <td>{question.display_order}</td>
-                                <td>{question.total_uses}</td>
-                                <td>{formatNumber(getQuestionTotalTokens(question))}</td>
-                                <td>{formatCost(question.llm_total_cost)}</td>
-                                <td>
-                                  {question.avg_rating === null || question.avg_rating === undefined
-                                    ? 'N/A'
-                                    : question.avg_rating.toFixed(2)}
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </td>
-                  </tr>
-                )}
-              </React.Fragment>
-            );
-          })}
-        </tbody>
-      </table>
-
-      <Divider style={{ marginTop: '16px' }} />
-
-      <Tag minimal intent={Intent.PRIMARY} style={{ marginTop: '8px' }}>
-        Data is shown for published assessments and questions with LLM prompts.
-      </Tag>
-    </div>
-  );
-};
-
-export default LLMStatsTab;
+import {
+  Button,
+  Card,
+  Divider,
+  H3,
+  H4,
+  Icon,
+  Intent,
+  NonIdealState,
+  Spinner,
+  SpinnerSize,
+  Tag
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { LLMAssessmentStat, LLMCourseStat, LLMQuestionStat } from '../assessment/AssessmentTypes';
+import { getLLMCourseStats } from '../sagas/RequestsSaga';
+import { useTokens } from '../utils/Hooks';
+
+const formatNumber = (value: number | string | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '0';
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? value : parsed.toLocaleString();
+  }
+  return value.toLocaleString();
+};
+
+const formatCost = (value: number | string | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return '$0.00';
+  }
+  const parsed = Number(value);
+  if (Number.isNaN(parsed)) {
+    return `${value}`;
+  }
+  return `$${parsed.toFixed(2)}`;
+};
+
+const getTotalTokens = (assessment: LLMAssessmentStat): number => {
+  return (assessment.llm_total_input_tokens || 0) + (assessment.llm_total_output_tokens || 0);
+};
+
+const getQuestionTotalTokens = (question: LLMQuestionStat): number => {
+  return (question.llm_total_input_tokens || 0) + (question.llm_total_output_tokens || 0);
+};
+
+const LLMStatsTab: React.FC = () => {
+  const { accessToken, refreshToken } = useTokens();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<LLMCourseStat | null>(null);
+  const [sortKey, setSortKey] = useState<
+    'title' | 'category' | 'total_uses' | 'total_tokens' | 'llm_total_cost' | 'avg_rating'
+  >('llm_total_cost');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [expanded, setExpanded] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    const fetch = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const resp = await getLLMCourseStats({ accessToken, refreshToken });
+        if (!resp) {
+          setError('Failed to load LLM statistics.');
+        } else {
+          setData(resp);
+        }
+      } catch (err) {
+        setError('Failed to load LLM statistics.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetch();
+  }, [accessToken, refreshToken]);
+
+  const sortedAssessments: LLMAssessmentStat[] = useMemo(() => {
+    if (!data?.assessments) {
+      return [];
+    }
+
+    const assessments = [...data.assessments];
+    const compare = (a: LLMAssessmentStat, b: LLMAssessmentStat): number => {
+      const direction = sortDirection === 'asc' ? 1 : -1;
+      switch (sortKey) {
+        case 'title':
+          return direction * a.title.localeCompare(b.title);
+        case 'category':
+          return direction * a.category.localeCompare(b.category);
+        case 'total_uses':
+          return direction * (a.total_uses - b.total_uses);
+        case 'avg_rating':
+          return direction * ((a.avg_rating || 0) - (b.avg_rating || 0));
+        case 'llm_total_cost':
+          return direction * (Number(a.llm_total_cost || 0) - Number(b.llm_total_cost || 0));
+        case 'total_tokens':
+          return direction * (getTotalTokens(a) - getTotalTokens(b));
+        default:
+          return 0;
+      }
+    };
+
+    return assessments.sort(compare);
+  }, [data, sortKey, sortDirection]);
+
+  const toggleSort = (key: typeof sortKey) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortDirection('desc');
+    }
+  };
+
+  const toggleRow = (assessmentId: number) => {
+    const next = new Set(expanded);
+    if (next.has(assessmentId)) {
+      next.delete(assessmentId);
+    } else {
+      next.add(assessmentId);
+    }
+    setExpanded(next);
+  };
+
+  const downloadReport = () => {
+    if (!data) {
+      return;
+    }
+
+    const headers = [
+      'Assessment Title',
+      'Category',
+      'Question Number',
+      'Uses',
+      'Input Tokens',
+      'Output Tokens',
+      'Total Tokens',
+      'Cost',
+      'Avg Rating'
+    ];
+
+    const rows: string[] = [];
+    data.assessments.forEach(assessment => {
+      if (assessment.questions.length === 0) {
+        rows.push(
+          [
+            assessment.title,
+            assessment.category,
+            '',
+            assessment.total_uses.toString(),
+            assessment.llm_total_input_tokens.toString(),
+            assessment.llm_total_output_tokens.toString(),
+            getTotalTokens(assessment).toString(),
+            Number(assessment.llm_total_cost || 0).toFixed(6),
+            assessment.avg_rating?.toString() ?? ''
+          ].join(',')
+        );
+      } else {
+        assessment.questions.forEach(question => {
+          rows.push(
+            [
+              assessment.title,
+              assessment.category,
+              question.display_order.toString(),
+              question.total_uses.toString(),
+              question.llm_total_input_tokens.toString(),
+              question.llm_total_output_tokens.toString(),
+              getQuestionTotalTokens(question).toString(),
+              Number(question.llm_total_cost || 0).toFixed(6),
+              question.avg_rating?.toString() ?? ''
+            ].join(',')
+          );
+        });
+      }
+    });
+
+    const content = [headers.join(','), ...rows].join('\n');
+    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.setAttribute('download', 'llm_stats_report.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <Spinner size={SpinnerSize.STANDARD} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <NonIdealState
+        icon={IconNames.ERROR}
+        title="Unable to load LLM statistics"
+        description={error}
+      />
+    );
+  }
+
+  if (!data || data.assessments.length === 0) {
+    return (
+      <NonIdealState
+        icon={IconNames.CHART}
+        title="No LLM usage data yet"
+        description="Once students start generating comments, this panel will show LLM statistics."
+      />
+    );
+  }
+
+  return (
+    <div style={{ padding: '14px' }}>
+      <div style={{ display: 'flex', gap: '12px', marginBottom: '12px', flexWrap: 'wrap' }}>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_input_tokens)}</H3>
+          <div>Course-wide Input Tokens</div>
+        </Card>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatNumber(data.course_total_output_tokens)}</H3>
+          <div>Course-wide Output Tokens</div>
+        </Card>
+        <Card style={{ flex: 1, textAlign: 'center' }}>
+          <H3 style={{ margin: 0 }}>{formatCost(data.course_total_cost)}</H3>
+          <div>Total LLM Expenditure</div>
+        </Card>
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <H4 style={{ margin: '8px 0' }}>Assessments</H4>
+        <Button icon={IconNames.DOWNLOAD} intent={Intent.PRIMARY} onClick={downloadReport}>
+          Download Report
+        </Button>
+      </div>
+
+      <table
+        className="bp3-html-table bp3-html-table-striped bp3-html-table-condensed"
+        style={{ width: '100%', marginTop: '8px' }}
+      >
+        <thead>
+          <tr>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('title')}>
+                Title
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('category')}>
+                Category
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('total_uses')}>
+                Uses
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('total_tokens')}>
+                Total Tokens
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('llm_total_cost')}>
+                Total Cost
+              </Button>
+            </th>
+            <th>
+              <Button minimal={true} small={true} onClick={() => toggleSort('avg_rating')}>
+                Avg Rating
+              </Button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedAssessments.map(assessment => {
+            const isExpanded = expanded.has(assessment.assessment_id);
+            return (
+              <React.Fragment key={assessment.assessment_id}>
+                <tr
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => toggleRow(assessment.assessment_id)}
+                >
+                  <td>
+                    <span style={{ marginRight: '6px' }}>
+                      <Icon icon={isExpanded ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT} />
+                    </span>
+                    {assessment.title}
+                  </td>
+                  <td>{assessment.category}</td>
+                  <td>{assessment.total_uses}</td>
+                  <td>{formatNumber(getTotalTokens(assessment))}</td>
+                  <td>{formatCost(assessment.llm_total_cost)}</td>
+                  <td>
+                    {assessment.avg_rating === null || assessment.avg_rating === undefined
+                      ? 'N/A'
+                      : assessment.avg_rating.toFixed(2)}
+                  </td>
+                </tr>
+                {isExpanded && assessment.questions.length > 0 && (
+                  <tr>
+                    <td colSpan={6} style={{ padding: 0, background: '#f3f3f3' }}>
+                      <div style={{ padding: '8px' }}>
+                        <table
+                          className="bp3-html-table bp3-html-table-condensed"
+                          style={{ width: '100%' }}
+                        >
+                          <thead>
+                            <tr>
+                              <th>Question</th>
+                              <th>Uses</th>
+                              <th>Tokens</th>
+                              <th>Cost</th>
+                              <th>Avg Rating</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {assessment.questions.map(question => (
+                              <tr key={question.question_id}>
+                                <td>{question.display_order}</td>
+                                <td>{question.total_uses}</td>
+                                <td>{formatNumber(getQuestionTotalTokens(question))}</td>
+                                <td>{formatCost(question.llm_total_cost)}</td>
+                                <td>
+                                  {question.avg_rating === null || question.avg_rating === undefined
+                                    ? 'N/A'
+                                    : question.avg_rating.toFixed(2)}
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+
+      <Divider style={{ marginTop: '16px' }} />
+
+      <Tag minimal intent={Intent.PRIMARY} style={{ marginTop: '8px' }}>
+        Data is shown for published assessments and questions with LLM prompts.
+      </Tag>
+    </div>
+  );
+};
+
+export default LLMStatsTab;
diff --git a/src/pages/academy/llmStats/LLMStatsPage.tsx b/src/pages/academy/llmStats/LLMStatsPage.tsx
index fe79c9abc8..2104cb7cfd 100644
--- a/src/pages/academy/llmStats/LLMStatsPage.tsx
+++ b/src/pages/academy/llmStats/LLMStatsPage.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-
-import LLMStatsTab from '../../../commons/adminStats/LLMStatsTab';
-import ContentDisplay from '../../../commons/ContentDisplay';
-
-const LLMStatsPage: React.FC = () => {
-  return <ContentDisplay display={<LLMStatsTab />} fullWidth={false} />;
-};
-
-export const Component = LLMStatsPage;
-Component.displayName = 'LLMStatsPage';
-
-export default LLMStatsPage;
+import React from 'react';
+
+import LLMStatsTab from '../../../commons/adminStats/LLMStatsTab';
+import ContentDisplay from '../../../commons/ContentDisplay';
+
+const LLMStatsPage: React.FC = () => {
+  return <ContentDisplay display={<LLMStatsTab />} fullWidth={false} />;
+};
+
+export const Component = LLMStatsPage;
+Component.displayName = 'LLMStatsPage';
+
+export default LLMStatsPage;

From 608f7234eebf84d4756edfcd3622533bc51ec3a5 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Sat, 4 Apr 2026 01:13:52 +0800
Subject: [PATCH 38/45] fix(grading): persist cleared AI comment selection
 after re-generate and rollback AI comment selections when save-and-continue
 grading save fails

---
 src/pages/academy/grading/subcomponents/GradingEditor.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index eec7343c8a..a35042b39a 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -478,7 +478,7 @@ const GradingEditor: React.FC<Props> = props => {
         .filter(index => index >= 0 && index < (props.ai_comments?.comments || []).length)
         .map(index => {
           const original = props.ai_comments?.comments?.[index] ?? '';
-          const text = props.ai_comments?.selectedEdits?.[index] ?? original;
+          const text = normalizeCommentText(props.ai_comments?.selectedEdits?.[index] ?? original);
           return { originalIndex: index, text, isEdited: text !== original };
         });
       const { selectedIndices: previousSelectedIndices, changedEdits: previousChangedEdits } =
@@ -503,10 +503,6 @@ const GradingEditor: React.FC<Props> = props => {
 
       handleSaving(props.submissionId, props.questionId, newXpAdjustmentInput, cleanedEditorValue);
 
-      if (saveAndContinue) {
-        return;
-      }
-
       const gradingSaved = await waitForGradingSaveResult(saveAndContinue);
       if (!gradingSaved) {
         const currentSelectionKey = buildSelectionKey(selectedComments, suggestions);
@@ -721,7 +717,6 @@ const GradingEditor: React.FC<Props> = props => {
         setSuggestions(resp.comments);
         setHasGenerated(true);
         setSelectedComments([]);
-        lastSavedSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
         initialSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
 
         showSuccessMessage(force ? 'Comments re-generated!' : 'Comments generated!');

From e14306aa84ea74e692869ec050e34040eb218353 Mon Sep 17 00:00:00 2001
From: Leong Yi Quan <yiquan.leong@gmail.com>
Date: Tue, 7 Apr 2026 16:19:55 +0800
Subject: [PATCH 39/45] Fixed rollback logic for AI comments

---
 .../grading/subcomponents/GradingEditor.tsx   | 80 +++++++++++--------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index a35042b39a..f795a1ae25 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -73,6 +73,12 @@ type SelectedComment = {
   isEdited: boolean;
 };
 
+type PersistedAiSelectionState = {
+  selectionKey: string;
+  selectedComments: SelectedComment[];
+  suggestions: string[];
+};
+
 const normalizeCommentText = (text: string): string => text.replace(/^\n+/, '');
 
 const GradingEditor: React.FC<Props> = props => {
@@ -90,6 +96,11 @@ const GradingEditor: React.FC<Props> = props => {
   const saveTimeoutRef = useRef<number | undefined>(undefined);
   const selectedCommentsRef = useRef<SelectedComment[]>([]);
   const suggestionsRef = useRef<string[]>([]);
+  const persistedAiSelectionRef = useRef<PersistedAiSelectionState>({
+    selectionKey: EMPTY_SELECTION_SAVE_KEY,
+    selectedComments: [],
+    suggestions: []
+  });
   const aiCommentTextareaRefs = useRef<Record<number, HTMLTextAreaElement | null>>({});
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
@@ -214,6 +225,9 @@ const GradingEditor: React.FC<Props> = props => {
     return { selectedIndices, changedEdits };
   };
 
+  const cloneSelectedComments = (selected: SelectedComment[]): SelectedComment[] =>
+    selected.map(comment => ({ ...comment }));
+
   const buildSelectionKey = (selected: SelectedComment[], sourceSuggestions: string[]) => {
     const payload = buildSelectionPayload(selected, sourceSuggestions);
     return JSON.stringify({
@@ -251,28 +265,6 @@ const GradingEditor: React.FC<Props> = props => {
     );
   };
 
-  const buildPersistedSelectionKey = () => {
-    const existingComments = props.ai_comments?.comments || [];
-    const persistedSelectedIndices = props.ai_comments?.selectedIndices || [];
-    const persistedSelectedEdits = props.ai_comments?.selectedEdits || {};
-
-    const validSelectedIndices = [...new Set(persistedSelectedIndices)]
-      .filter(index => index >= 0 && index < existingComments.length)
-      .sort((a, b) => a - b);
-
-    const hydratedSelectedComments: SelectedComment[] = validSelectedIndices.map(index => {
-      const original = existingComments[index] ?? '';
-      const text = normalizeCommentText(persistedSelectedEdits[index] ?? original);
-      return {
-        originalIndex: index,
-        text,
-        isEdited: text !== original
-      };
-    });
-
-    return buildSelectionKey(hydratedSelectedComments, existingComments);
-  };
-
   const waitForGradingSaveResult = (saveAndContinue: boolean) => {
     const lastRequestId = gradingSaveResultRef.current?.requestId ?? 0;
     return new Promise<boolean>(resolve => {
@@ -366,6 +358,11 @@ const GradingEditor: React.FC<Props> = props => {
     }
 
     lastSavedSelectionKeyRef.current = currentSelectionKey;
+    persistedAiSelectionRef.current = {
+      selectionKey: currentSelectionKey,
+      selectedComments: cloneSelectedComments(selectedComments),
+      suggestions: [...suggestions]
+    };
 
     return true;
   };
@@ -427,6 +424,11 @@ const GradingEditor: React.FC<Props> = props => {
     const persistedSelectionKey = buildSelectionKey(hydratedSelectedComments, existingComments);
     initialSelectionKeyRef.current = persistedSelectionKey;
     lastSavedSelectionKeyRef.current = persistedSelectionKey;
+    persistedAiSelectionRef.current = {
+      selectionKey: persistedSelectionKey,
+      selectedComments: cloneSelectedComments(hydratedSelectedComments),
+      suggestions: [...existingComments]
+    };
     if (saveAndContinueTimeoutRef.current !== undefined) {
       window.clearTimeout(saveAndContinueTimeoutRef.current);
       saveAndContinueTimeoutRef.current = undefined;
@@ -473,16 +475,16 @@ const GradingEditor: React.FC<Props> = props => {
       setIsSaveInFlight(true);
 
       const saveAndContinue = handleSaving === onClickSaveAndContinue;
-      const previousSelectionKey = buildPersistedSelectionKey();
-      const previousSelectedComments: SelectedComment[] = (props.ai_comments?.selectedIndices || [])
-        .filter(index => index >= 0 && index < (props.ai_comments?.comments || []).length)
-        .map(index => {
-          const original = props.ai_comments?.comments?.[index] ?? '';
-          const text = normalizeCommentText(props.ai_comments?.selectedEdits?.[index] ?? original);
-          return { originalIndex: index, text, isEdited: text !== original };
-        });
+      const previousPersistedSelection = {
+        selectionKey: persistedAiSelectionRef.current.selectionKey,
+        selectedComments: cloneSelectedComments(persistedAiSelectionRef.current.selectedComments),
+        suggestions: [...persistedAiSelectionRef.current.suggestions]
+      };
       const { selectedIndices: previousSelectedIndices, changedEdits: previousChangedEdits } =
-        buildSelectionPayload(previousSelectedComments, props.ai_comments?.comments || []);
+        buildSelectionPayload(
+          previousPersistedSelection.selectedComments,
+          previousPersistedSelection.suggestions
+        );
 
       const hasSavedChosenComments = await postSaveChosenComments();
       if (!hasSavedChosenComments) {
@@ -506,7 +508,7 @@ const GradingEditor: React.FC<Props> = props => {
       const gradingSaved = await waitForGradingSaveResult(saveAndContinue);
       if (!gradingSaved) {
         const currentSelectionKey = buildSelectionKey(selectedComments, suggestions);
-        if (currentSelectionKey !== previousSelectionKey) {
+        if (currentSelectionKey !== previousPersistedSelection.selectionKey) {
           const rollbackResp = await saveChosenComments(
             tokens,
             props.answer_id,
@@ -515,9 +517,17 @@ const GradingEditor: React.FC<Props> = props => {
           );
 
           if (rollbackResp && rollbackResp.ok) {
-            lastSavedSelectionKeyRef.current = previousSelectionKey;
-            initialSelectionKeyRef.current = previousSelectionKey;
-            syncAiCommentsToStore(previousSelectedComments, props.ai_comments?.comments || []);
+            lastSavedSelectionKeyRef.current = previousPersistedSelection.selectionKey;
+            initialSelectionKeyRef.current = previousPersistedSelection.selectionKey;
+            persistedAiSelectionRef.current = {
+              selectionKey: previousPersistedSelection.selectionKey,
+              selectedComments: cloneSelectedComments(previousPersistedSelection.selectedComments),
+              suggestions: [...previousPersistedSelection.suggestions]
+            };
+            syncAiCommentsToStore(
+              previousPersistedSelection.selectedComments,
+              previousPersistedSelection.suggestions
+            );
             showWarningMessage(
               'Failed to save grading. Reverted AI comment selection to last saved state.'
             );

From a16bfaa06a853ec0edd6a4983398452c8efab513 Mon Sep 17 00:00:00 2001
From: tzj04 <190485478+tzj04@users.noreply.github.com>
Date: Thu, 9 Apr 2026 10:44:20 +0800
Subject: [PATCH 40/45] fix(grading): prevent AI comment rollback corruption on
 regenerate+save failure

---
 .../grading/subcomponents/GradingEditor.tsx   | 132 ++++++++++++------
 1 file changed, 86 insertions(+), 46 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index a35042b39a..5ff45ce11c 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -73,8 +73,33 @@ type SelectedComment = {
   isEdited: boolean;
 };
 
+type PersistedAiSelectionSnapshot = {
+  selectedComments: SelectedComment[];
+  suggestions: string[];
+};
+
 const normalizeCommentText = (text: string): string => text.replace(/^\n+/, '');
 
+const hydrateSelectedComments = (
+  sourceSuggestions: string[],
+  persistedSelectedIndices: number[],
+  persistedSelectedEdits: Record<number, string>
+): SelectedComment[] => {
+  const validSelectedIndices = [...new Set(persistedSelectedIndices)]
+    .filter(index => index >= 0 && index < sourceSuggestions.length)
+    .sort((a, b) => a - b);
+
+  return validSelectedIndices.map(index => {
+    const original = sourceSuggestions[index] ?? '';
+    const text = normalizeCommentText(persistedSelectedEdits[index] ?? original);
+    return {
+      originalIndex: index,
+      text,
+      isEdited: text !== original
+    };
+  });
+};
+
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useTypedDispatch();
   const tokens = useTokens();
@@ -90,6 +115,10 @@ const GradingEditor: React.FC<Props> = props => {
   const saveTimeoutRef = useRef<number | undefined>(undefined);
   const selectedCommentsRef = useRef<SelectedComment[]>([]);
   const suggestionsRef = useRef<string[]>([]);
+  const persistedAiSelectionRef = useRef<PersistedAiSelectionSnapshot>({
+    selectedComments: [],
+    suggestions: []
+  });
   const aiCommentTextareaRefs = useRef<Record<number, HTMLTextAreaElement | null>>({});
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
@@ -214,6 +243,38 @@ const GradingEditor: React.FC<Props> = props => {
     return { selectedIndices, changedEdits };
   };
 
+  const updatePersistedAiSelectionSnapshot = (
+    selected: SelectedComment[],
+    sourceSuggestions: string[]
+  ) => {
+    const sanitizedSelectedComments = selected
+      .filter(
+        comment => comment.originalIndex >= 0 && comment.originalIndex < sourceSuggestions.length
+      )
+      .map(comment => {
+        const original = sourceSuggestions[comment.originalIndex] ?? '';
+        const text = normalizeCommentText(comment.text);
+        return {
+          originalIndex: comment.originalIndex,
+          text,
+          isEdited: text !== original
+        };
+      })
+      .sort((a, b) => a.originalIndex - b.originalIndex);
+
+    persistedAiSelectionRef.current = {
+      selectedComments: sanitizedSelectedComments,
+      suggestions: [...sourceSuggestions]
+    };
+  };
+
+  const getPersistedAiSelectionSnapshot = (): PersistedAiSelectionSnapshot => ({
+    selectedComments: persistedAiSelectionRef.current.selectedComments.map(comment => ({
+      ...comment
+    })),
+    suggestions: [...persistedAiSelectionRef.current.suggestions]
+  });
+
   const buildSelectionKey = (selected: SelectedComment[], sourceSuggestions: string[]) => {
     const payload = buildSelectionPayload(selected, sourceSuggestions);
     return JSON.stringify({
@@ -251,28 +312,6 @@ const GradingEditor: React.FC<Props> = props => {
     );
   };
 
-  const buildPersistedSelectionKey = () => {
-    const existingComments = props.ai_comments?.comments || [];
-    const persistedSelectedIndices = props.ai_comments?.selectedIndices || [];
-    const persistedSelectedEdits = props.ai_comments?.selectedEdits || {};
-
-    const validSelectedIndices = [...new Set(persistedSelectedIndices)]
-      .filter(index => index >= 0 && index < existingComments.length)
-      .sort((a, b) => a - b);
-
-    const hydratedSelectedComments: SelectedComment[] = validSelectedIndices.map(index => {
-      const original = existingComments[index] ?? '';
-      const text = normalizeCommentText(persistedSelectedEdits[index] ?? original);
-      return {
-        originalIndex: index,
-        text,
-        isEdited: text !== original
-      };
-    });
-
-    return buildSelectionKey(hydratedSelectedComments, existingComments);
-  };
-
   const waitForGradingSaveResult = (saveAndContinue: boolean) => {
     const lastRequestId = gradingSaveResultRef.current?.requestId ?? 0;
     return new Promise<boolean>(resolve => {
@@ -366,6 +405,7 @@ const GradingEditor: React.FC<Props> = props => {
     }
 
     lastSavedSelectionKeyRef.current = currentSelectionKey;
+    updatePersistedAiSelectionSnapshot(selectedComments, suggestions);
 
     return true;
   };
@@ -404,26 +444,18 @@ const GradingEditor: React.FC<Props> = props => {
     const existingComments = props.ai_comments?.comments || [];
     const persistedSelectedIndices = props.ai_comments?.selectedIndices || [];
     const persistedSelectedEdits = props.ai_comments?.selectedEdits || {};
-
-    const validSelectedIndices = [...new Set(persistedSelectedIndices)]
-      .filter(index => index >= 0 && index < existingComments.length)
-      .sort((a, b) => a - b);
-
-    const hydratedSelectedComments: SelectedComment[] = validSelectedIndices.map(index => {
-      const original = existingComments[index] ?? '';
-      const text = normalizeCommentText(persistedSelectedEdits[index] ?? original);
-      return {
-        originalIndex: index,
-        text,
-        isEdited: text !== original
-      };
-    });
+    const hydratedSelectedComments = hydrateSelectedComments(
+      existingComments,
+      persistedSelectedIndices,
+      persistedSelectedEdits
+    );
 
     setUserText(props.comments);
     setSuggestions(existingComments);
     // Lock the button if we already have comments for this submission
     setHasGenerated(existingComments.length > 0);
     setSelectedComments(hydratedSelectedComments);
+    updatePersistedAiSelectionSnapshot(hydratedSelectedComments, existingComments);
     const persistedSelectionKey = buildSelectionKey(hydratedSelectedComments, existingComments);
     initialSelectionKeyRef.current = persistedSelectionKey;
     lastSavedSelectionKeyRef.current = persistedSelectionKey;
@@ -473,16 +505,16 @@ const GradingEditor: React.FC<Props> = props => {
       setIsSaveInFlight(true);
 
       const saveAndContinue = handleSaving === onClickSaveAndContinue;
-      const previousSelectionKey = buildPersistedSelectionKey();
-      const previousSelectedComments: SelectedComment[] = (props.ai_comments?.selectedIndices || [])
-        .filter(index => index >= 0 && index < (props.ai_comments?.comments || []).length)
-        .map(index => {
-          const original = props.ai_comments?.comments?.[index] ?? '';
-          const text = normalizeCommentText(props.ai_comments?.selectedEdits?.[index] ?? original);
-          return { originalIndex: index, text, isEdited: text !== original };
-        });
+      const previousPersistedSnapshot = getPersistedAiSelectionSnapshot();
+      const previousSelectionKey = buildSelectionKey(
+        previousPersistedSnapshot.selectedComments,
+        previousPersistedSnapshot.suggestions
+      );
       const { selectedIndices: previousSelectedIndices, changedEdits: previousChangedEdits } =
-        buildSelectionPayload(previousSelectedComments, props.ai_comments?.comments || []);
+        buildSelectionPayload(
+          previousPersistedSnapshot.selectedComments,
+          previousPersistedSnapshot.suggestions
+        );
 
       const hasSavedChosenComments = await postSaveChosenComments();
       if (!hasSavedChosenComments) {
@@ -517,7 +549,14 @@ const GradingEditor: React.FC<Props> = props => {
           if (rollbackResp && rollbackResp.ok) {
             lastSavedSelectionKeyRef.current = previousSelectionKey;
             initialSelectionKeyRef.current = previousSelectionKey;
-            syncAiCommentsToStore(previousSelectedComments, props.ai_comments?.comments || []);
+            updatePersistedAiSelectionSnapshot(
+              previousPersistedSnapshot.selectedComments,
+              previousPersistedSnapshot.suggestions
+            );
+            syncAiCommentsToStore(
+              previousPersistedSnapshot.selectedComments,
+              previousPersistedSnapshot.suggestions
+            );
             showWarningMessage(
               'Failed to save grading. Reverted AI comment selection to last saved state.'
             );
@@ -717,6 +756,7 @@ const GradingEditor: React.FC<Props> = props => {
         setSuggestions(resp.comments);
         setHasGenerated(true);
         setSelectedComments([]);
+        updatePersistedAiSelectionSnapshot([], resp.comments);
         initialSelectionKeyRef.current = EMPTY_SELECTION_SAVE_KEY;
 
         showSuccessMessage(force ? 'Comments re-generated!' : 'Comments generated!');

From 4febf6a7879b871214ba4bbb6030e511c573b5b6 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 7 May 2026 17:25:41 +0800
Subject: [PATCH 41/45] Fix incorrect past merge resolution

---
 src/i18n/locales/en/commons.json              | 28 ------------------
 src/i18n/locales/en/grading.json              | 17 -----------
 src/i18n/locales/en/login.json                |  4 ---
 .../locales/en/sideContent/autograder.json    | 19 ------------
 .../en/sideContent/contestLeaderboard.json    | 22 --------------
 .../locales/en/sideContent/contestVoting.json |  5 ----
 .../locales/en/sideContent/cseMachine.json    | 17 -----------
 .../en/sideContent/dataVisualizer.json        |  8 -----
 .../en/sideContent/faceapiDisplay.json        |  4 ---
 .../locales/en/sideContent/htmlDisplay.json   |  4 ---
 .../locales/en/sideContent/resultCard.json    |  7 -----
 .../en/sideContent/sessionManagement.json     |  4 ---
 .../en/sideContent/substVisualizer.json       | 13 ---------
 src/i18n/locales/en/sideContent/upload.json   | 11 -------
 src/i18n/locales/en/sourceRecorder.json       |  8 -----
 src/i18n/locales/en/sourcecast.json           |  6 ----
 src/i18n/locales/en/stories.json              |  7 -----
 src/i18n/locales/en/welcome.json              |  9 ------
 src/i18n/locales/pseudo/commons.json          | 29 -------------------
 src/i18n/locales/pseudo/login.json            |  4 ---
 src/i18n/locales/zh-SG/commons.json           | 28 ------------------
 src/i18n/locales/zh-SG/grading.json           | 17 -----------
 src/i18n/locales/zh-SG/login.json             |  4 ---
 .../locales/zh-SG/sideContent/autograder.json | 19 ------------
 .../zh-SG/sideContent/contestLeaderboard.json | 22 --------------
 .../zh-SG/sideContent/contestVoting.json      |  5 ----
 .../locales/zh-SG/sideContent/cseMachine.json | 17 -----------
 .../zh-SG/sideContent/dataVisualizer.json     |  8 -----
 .../zh-SG/sideContent/faceapiDisplay.json     |  4 ---
 .../zh-SG/sideContent/htmlDisplay.json        |  4 ---
 .../locales/zh-SG/sideContent/resultCard.json |  7 -----
 .../zh-SG/sideContent/sessionManagement.json  |  4 ---
 .../zh-SG/sideContent/substVisualizer.json    | 13 ---------
 .../locales/zh-SG/sideContent/upload.json     | 11 -------
 src/i18n/locales/zh-SG/sourceRecorder.json    |  8 -----
 src/i18n/locales/zh-SG/sourcecast.json        |  6 ----
 src/i18n/locales/zh-SG/stories.json           |  7 -----
 src/i18n/locales/zh-SG/welcome.json           |  9 ------
 38 files changed, 419 deletions(-)
 delete mode 100644 src/i18n/locales/en/commons.json
 delete mode 100644 src/i18n/locales/en/grading.json
 delete mode 100644 src/i18n/locales/en/login.json
 delete mode 100644 src/i18n/locales/en/sideContent/autograder.json
 delete mode 100644 src/i18n/locales/en/sideContent/contestLeaderboard.json
 delete mode 100644 src/i18n/locales/en/sideContent/contestVoting.json
 delete mode 100644 src/i18n/locales/en/sideContent/cseMachine.json
 delete mode 100644 src/i18n/locales/en/sideContent/dataVisualizer.json
 delete mode 100644 src/i18n/locales/en/sideContent/faceapiDisplay.json
 delete mode 100644 src/i18n/locales/en/sideContent/htmlDisplay.json
 delete mode 100644 src/i18n/locales/en/sideContent/resultCard.json
 delete mode 100644 src/i18n/locales/en/sideContent/sessionManagement.json
 delete mode 100644 src/i18n/locales/en/sideContent/substVisualizer.json
 delete mode 100644 src/i18n/locales/en/sideContent/upload.json
 delete mode 100644 src/i18n/locales/en/sourceRecorder.json
 delete mode 100644 src/i18n/locales/en/sourcecast.json
 delete mode 100644 src/i18n/locales/en/stories.json
 delete mode 100644 src/i18n/locales/en/welcome.json
 delete mode 100644 src/i18n/locales/pseudo/commons.json
 delete mode 100644 src/i18n/locales/pseudo/login.json
 delete mode 100644 src/i18n/locales/zh-SG/commons.json
 delete mode 100644 src/i18n/locales/zh-SG/grading.json
 delete mode 100644 src/i18n/locales/zh-SG/login.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/autograder.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/contestLeaderboard.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/contestVoting.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/cseMachine.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/dataVisualizer.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/faceapiDisplay.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/htmlDisplay.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/resultCard.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/sessionManagement.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/substVisualizer.json
 delete mode 100644 src/i18n/locales/zh-SG/sideContent/upload.json
 delete mode 100644 src/i18n/locales/zh-SG/sourceRecorder.json
 delete mode 100644 src/i18n/locales/zh-SG/sourcecast.json
 delete mode 100644 src/i18n/locales/zh-SG/stories.json
 delete mode 100644 src/i18n/locales/zh-SG/welcome.json

diff --git a/src/i18n/locales/en/commons.json b/src/i18n/locales/en/commons.json
deleted file mode 100644
index 1b230b2147..0000000000
--- a/src/i18n/locales/en/commons.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "navigationBar": {
-    "Ground Control": "Ground Control",
-    "Dashboard": "Dashboard",
-    "Sourcereel": "Sourcereel",
-    "Team Formation": "Team Formation",
-    "Grading": "Grading",
-    "Game Simulator": "Game Simulator",
-    "Admin Panel": "Admin Panel",
-    "Stories": "Stories",
-    "Sourcecast": "Sourcecast",
-    "Playground": "Playground",
-    "SICP JS": "SICP JS",
-    "Achievements": "Achievements",
-    "Quests": "Quests",
-    "Paths": "Paths",
-    "Contests": "Contests",
-    "Others": "Others"
-  },
-  "dropdown": {
-    "My Courses": "My Courses",
-    "Create Course": "Create Course",
-    "Logout": "Logout",
-    "Settings": "Settings",
-    "About": "About",
-    "Help": "Help"
-  }
-}
diff --git a/src/i18n/locales/en/grading.json b/src/i18n/locales/en/grading.json
deleted file mode 100644
index bcb1e85bbd..0000000000
--- a/src/i18n/locales/en/grading.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "gradingCsv": {
-    "assessmentNumber": "Assessment Number",
-    "assessmentName": "Assessment Name",
-    "studentName": "Student Name",
-    "studentUsername": "Student Username",
-    "group": "Group",
-    "progress": "Progress",
-    "questionCount": "Question Count",
-    "questionsGraded": "Questions Graded",
-    "initialXp": "Initial XP",
-    "xpAdjustment": "XP Adjustment",
-    "currentXpExclBonus": "Current XP (excl. bonus)",
-    "maxXp": "Max XP",
-    "bonusXp": "Bonus XP"
-  }
-}
diff --git a/src/i18n/locales/en/login.json b/src/i18n/locales/en/login.json
deleted file mode 100644
index ca4bf45059..0000000000
--- a/src/i18n/locales/en/login.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "Logging In": "Logging In...",
-  "Log in with": "Log in with {{name}}"
-}
diff --git a/src/i18n/locales/en/sideContent/autograder.json b/src/i18n/locales/en/sideContent/autograder.json
deleted file mode 100644
index dafe0969b4..0000000000
--- a/src/i18n/locales/en/sideContent/autograder.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "noTestcases": "There are no testcases provided for this question.",
-  "noResults": "There are no results to show.",
-  "testcases": "Testcases",
-  "results": "Autograder Results",
-  "tooltip": {
-    "clickTestcase": "Click on each testcase below to execute it with the program in the editor.",
-    "executeAll": "To execute all testcases at once, evaluate the program in the editor with this tab active.",
-    "backgroundInfo": "A green or red background indicates a passed or failed testcase respectively.",
-    "privateTestcases": "Private testcases (only visible to staff when grading) have a grey background."
-  },
-  "headers": {
-    "testcase": "Testcase",
-    "expected": "Expected result",
-    "actual": "Actual result",
-    "sn": "S/N",
-    "status": "Testcase status"
-  }
-}
diff --git a/src/i18n/locales/en/sideContent/contestLeaderboard.json b/src/i18n/locales/en/sideContent/contestLeaderboard.json
deleted file mode 100644
index 0dc3182403..0000000000
--- a/src/i18n/locales/en/sideContent/contestLeaderboard.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "noEntries": "There are no eligible contest leaderboard entries found.",
-  "titles": {
-    "score": "Score Leaderboard",
-    "popularVote": "Popular Vote Leaderboard",
-    "default": "Contest Leaderboard"
-  },
-  "tooltips": {
-    "score": "View the highest scoring contest entries!",
-    "popularVote": "View the most popular contest entries!",
-    "default": "View the top-rated contest entries!"
-  },
-  "headers": {
-    "studentName": "Student Name",
-    "rank": "Rank",
-    "score": {
-      "calculated": "Calculated Score",
-      "popularity": "Popularity Score",
-      "default": "Metric"
-    }
-  }
-}
diff --git a/src/i18n/locales/en/sideContent/contestVoting.json b/src/i18n/locales/en/sideContent/contestVoting.json
deleted file mode 100644
index c08a749ae3..0000000000
--- a/src/i18n/locales/en/sideContent/contestVoting.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "noEntries": "There are no eligible entries for voting found.",
-  "title": "Contest Voting",
-  "tooltip": "Rank your favourite contest entries from tiers D (worst) to S (best)!"
-}
diff --git a/src/i18n/locales/en/sideContent/cseMachine.json b/src/i18n/locales/en/sideContent/cseMachine.json
deleted file mode 100644
index 9af655daaf..0000000000
--- a/src/i18n/locales/en/sideContent/cseMachine.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "maxStepsExceeded": "Maximum number of steps exceeded.",
-  "increaseStepLimit": "Please increase the step limit if you would like to see further evaluation.",
-  "csecDescription": "The CSEC machine generates control, stash, environment and class model diagrams adapted from the notation introduced in <0>Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2</0>.",
-  "javaCsec": "You have chosen the sublanguage <0>Java CSEC</0>.",
-  "cseDescription": "The CSE machine generates control, stash and environment model diagrams following a notation introduced in <0>Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2</0>.",
-  "instructions": "On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program.",
-  "shortcutsTitle": "Some useful keyboard shortcuts:",
-  "shortcuts": {
-    "a": "a: Move to the first step",
-    "e": "e: Move to the last step",
-    "f": "f: Move to the next step",
-    "b": "b: Move to the previous step"
-  },
-  "shortcutsNote": "Note that these shortcuts are only active when the browser focus is on this tab.",
-  "label": "CSE Machine"
-}
diff --git a/src/i18n/locales/en/sideContent/dataVisualizer.json b/src/i18n/locales/en/sideContent/dataVisualizer.json
deleted file mode 100644
index cd60cb8543..0000000000
--- a/src/i18n/locales/en/sideContent/dataVisualizer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "defaultText": "The data visualizer helps you to visualize data structures.",
-  "instructions": "It is activated by calling the function <0/>, where <1/> would be the <2/> data structure that you want to visualize and <3/> is the number of structures.",
-  "reference": "The data visualizer uses box-and-pointer diagrams, as introduced in <0>Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 2, Section 2</0>.",
-  "label": "Data Visualizer",
-  "previous": "Previous",
-  "next": "Next"
-}
diff --git a/src/i18n/locales/en/sideContent/faceapiDisplay.json b/src/i18n/locales/en/sideContent/faceapiDisplay.json
deleted file mode 100644
index d0dbdaa7cd..0000000000
--- a/src/i18n/locales/en/sideContent/faceapiDisplay.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "takePicture": "Take picture",
-  "reset": "Reset"
-}
diff --git a/src/i18n/locales/en/sideContent/htmlDisplay.json b/src/i18n/locales/en/sideContent/htmlDisplay.json
deleted file mode 100644
index a2b678ab08..0000000000
--- a/src/i18n/locales/en/sideContent/htmlDisplay.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "title": "HTML Display",
-  "label": "HTML Display"
-}
diff --git a/src/i18n/locales/en/sideContent/resultCard.json b/src/i18n/locales/en/sideContent/resultCard.json
deleted file mode 100644
index 6e8fed69d0..0000000000
--- a/src/i18n/locales/en/sideContent/resultCard.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "timeout": "[TIMEOUT] Submission exceeded time limit for this test case.",
-  "syntax": "[SYNTAX] Line {{line}}: {{errorExplanation}}",
-  "runtime": "[RUNTIME] Line {{line}}: {{errorExplanation}}",
-  "systemError": "[SYSTEM] {{errorMessage}}",
-  "unknown": "[UNKNOWN] Autograder error: type {{errorType}}"
-}
diff --git a/src/i18n/locales/en/sideContent/sessionManagement.json b/src/i18n/locales/en/sideContent/sessionManagement.json
deleted file mode 100644
index 870847b05e..0000000000
--- a/src/i18n/locales/en/sideContent/sessionManagement.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "Name",
-  "role": "Role"
-}
diff --git a/src/i18n/locales/en/sideContent/substVisualizer.json b/src/i18n/locales/en/sideContent/substVisualizer.json
deleted file mode 100644
index b429b43ce5..0000000000
--- a/src/i18n/locales/en/sideContent/substVisualizer.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "welcome": "Welcome to the Stepper!",
-  "instructions": "On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by writing your program on the left, then dragging the slider above to see its evaluation.",
-  "evaluationSteps": "On even-numbered steps, the part of the program that will be evaluated next is highlighted in yellow. On odd-numbered steps, the result of the evaluation is highlighted in green. You can change the maximum steps limit (500-5000, default 1000) in the control bar.",
-  "shortcutsTitle": "Some useful keyboard shortcuts:",
-  "shortcuts": {
-    "a": "a: Move to the first step",
-    "e": "e: Move to the last step",
-    "f": "f: Move to the next step",
-    "b": "b: Move to the previous step"
-  },
-  "shortcutsNote": "Note that these shortcuts are only active when the browser focus is on this tab (click on or above the explanation text)."
-}
diff --git a/src/i18n/locales/en/sideContent/upload.json b/src/i18n/locales/en/sideContent/upload.json
deleted file mode 100644
index 136ad6d471..0000000000
--- a/src/i18n/locales/en/sideContent/upload.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "description": "Bypass the compiler and type checker by uploading class files to run in the JVM.",
-  "acceptedFiles": "Only .class files are accepted. Code in the editor will be ignored when running while this tab is active.",
-  "compileCommand": "Compile the files with the following command:",
-  "javacCommand": "javac *.java -target 8 -source 8",
-  "warning": "Avoid running class files downloaded from unknown sources.",
-  "mainClass": "Main class must be named Main and uploaded as Main.class.",
-  "chooseFiles": "Choose files...",
-  "filesUploaded": "file(s) uploaded.",
-  "label": "Upload files"
-}
diff --git a/src/i18n/locales/en/sourceRecorder.json b/src/i18n/locales/en/sourceRecorder.json
deleted file mode 100644
index 52e19e14e2..0000000000
--- a/src/i18n/locales/en/sourceRecorder.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "sourceRecorder": {
-    "deleteTitle": "Delete Sourcecast",
-    "deleteConfirmation": "Are you sure to delete this sourcecast entry?",
-    "confirmDelete": "Confirm Delete",
-    "cancel": "Cancel"
-  }
-}
diff --git a/src/i18n/locales/en/sourcecast.json b/src/i18n/locales/en/sourcecast.json
deleted file mode 100644
index 44fc66d1e0..0000000000
--- a/src/i18n/locales/en/sourcecast.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "sourcecast": {
-    "titleDescription": "Title: {{title}}\nDescription: {{description}}",
-    "introduction": "Welcome to Sourcecast!"
-  }
-}
diff --git a/src/i18n/locales/en/stories.json b/src/i18n/locales/en/stories.json
deleted file mode 100644
index f852f2c81b..0000000000
--- a/src/i18n/locales/en/stories.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "stories": {
-    "deleteConfirmation": "Are you sure you want to delete this story?",
-    "delete": "Delete",
-    "allStories": "All Stories"
-  }
-}
diff --git a/src/i18n/locales/en/welcome.json b/src/i18n/locales/en/welcome.json
deleted file mode 100644
index 4f28e465db..0000000000
--- a/src/i18n/locales/en/welcome.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "welcome": {
-    "title": "Welcome to {{sourceAcademyDeploymentName}}",
-    "loggedInMessage": "You have logged in as <0>{{name}}</0>. {{sourceAcademyDeploymentName}} does not have any course information for this account",
-    "enrollmentMessage": "If you are enrolled in a course, check with the course staff to make sure your account is added to the course.",
-    "resourcesForLearners": "Click <0>here</0> to find a course that suits your needs.",
-    "resourcesForEducators": "Click <0>here</0> for a list of resources to get started."
-  }
-}
diff --git a/src/i18n/locales/pseudo/commons.json b/src/i18n/locales/pseudo/commons.json
deleted file mode 100644
index bd069e431e..0000000000
--- a/src/i18n/locales/pseudo/commons.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "navigationBar": {
-    "Ground Control": "Ģŗőûñď Çőñţŗőļ",
-    "Dashboard": "Ďáşħƀőáŗď",
-    "Sourcereel": "Śőûŗćéŗééļ",
-    "Team Formation": "Ťéâm Ƒőŗmáţíőñ",
-    "Grading": "Ĝŗáďíñĝ",
-    "Game Simulator": "Ĝámé Śímûļáţőŗ",
-    "Admin Panel": "Áďmíñ Ƥáñéļ",
-    "Stories": "Šţőŗíéş",
-    "Sourcecast": "Šőûŗčéčáşţ",
-    "Playground": "Ƥļáÿğŕőûñď",
-    "SICP JS": "ŠĨĆƤ ĴŚ",
-    "Achievements": "Ãčĥíéṽéḿéñţş",
-    "Missions": "Ḿíşşíőñş",
-    "Quests": "Ǫûéşţş",
-    "Paths": "Ƥáţĥş",
-    "Contests": "Ċőñţéşţş",
-    "Others": "Őţĥéŕş"
-  },
-  "dropdown": {
-    "My Courses": "Mÿ Côûrsês",
-    "Create Course": "Crêâtê Côûrsê",
-    "Logout": "Lôgôût",
-    "Settings": "Sêttîñgs",
-    "About": "Âbôût",
-    "Help": "Hêlp"
-  }
-}
diff --git a/src/i18n/locales/pseudo/login.json b/src/i18n/locales/pseudo/login.json
deleted file mode 100644
index eeb499fe79..0000000000
--- a/src/i18n/locales/pseudo/login.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "Logging In": "Lògging Ìn...",
-  "Log in with": "Lòg in with {{name}}"
-}
diff --git a/src/i18n/locales/zh-SG/commons.json b/src/i18n/locales/zh-SG/commons.json
deleted file mode 100644
index 3cb498f267..0000000000
--- a/src/i18n/locales/zh-SG/commons.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "navigationBar": {
-    "Ground Control": "课程管理",
-    "Dashboard": "仪表板",
-    "Sourcereel": "源代码卷轴",
-    "Team Formation": "团队组建",
-    "Grading": "评分",
-    "Game Simulator": "游戏模拟器",
-    "Admin Panel": "管理面板",
-    "Stories": "故事",
-    "Sourcecast": "源代码广播",
-    "Playground": "游乐场",
-    "SICP JS": "SICP JS",
-    "Achievements": "成就",
-    "Quests": "任务",
-    "Paths": "路径",
-    "Contests": "比赛",
-    "Others": "其他"
-  },
-  "dropdown": {
-    "My Courses": "我的课程",
-    "Create Course": "创建课程",
-    "Logout": "登出",
-    "Settings": "设置",
-    "About": "关于",
-    "Help": "帮助"
-  }
-}
diff --git a/src/i18n/locales/zh-SG/grading.json b/src/i18n/locales/zh-SG/grading.json
deleted file mode 100644
index bf92dd2ca4..0000000000
--- a/src/i18n/locales/zh-SG/grading.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "gradingCsv": {
-    "assessmentNumber": "评估编号",
-    "assessmentName": "评估名称",
-    "studentName": "学生姓名",
-    "studentUsername": "学生用户名",
-    "group": "组别",
-    "progress": "进度",
-    "questionCount": "问题数量",
-    "questionsGraded": "已评分问题",
-    "initialXp": "初始经验值",
-    "xpAdjustment": "经验值调整",
-    "currentXpExclBonus": "当前经验值（不含奖励）",
-    "maxXp": "最大经验值",
-    "bonusXp": "奖励经验值"
-  }
-}
diff --git a/src/i18n/locales/zh-SG/login.json b/src/i18n/locales/zh-SG/login.json
deleted file mode 100644
index 6b412240fb..0000000000
--- a/src/i18n/locales/zh-SG/login.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "Logging In": "登录中...",
-  "Log in with": "使用 {{name}} 登录"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/autograder.json b/src/i18n/locales/zh-SG/sideContent/autograder.json
deleted file mode 100644
index 981845e892..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/autograder.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "noTestcases": "此问题没有提供测试用例。",
-  "noResults": "没有结果可显示。",
-  "testcases": "测试用例",
-  "results": "自动评分结果",
-  "tooltip": {
-    "clickTestcase": "点击下面的每个测试用例以使用编辑器中的程序执行它。",
-    "executeAll": "要一次性执行所有测试用例，请在此选项卡处于活动状态时评估编辑器中的程序。",
-    "backgroundInfo": "绿色或红色背景分别表示测试用例通过或失败。",
-    "privateTestcases": "私有测试用例（仅在评分时对工作人员可见）具有灰色背景。"
-  },
-  "headers": {
-    "testcase": "测试用例",
-    "expected": "预期结果",
-    "actual": "实际结果",
-    "sn": "序号",
-    "status": "测试用例状态"
-  }
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/contestLeaderboard.json b/src/i18n/locales/zh-SG/sideContent/contestLeaderboard.json
deleted file mode 100644
index 8d9c9ca5df..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/contestLeaderboard.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "noEntries": "未找到符合条件的比赛排行榜条目。",
-  "titles": {
-    "score": "得分排行榜",
-    "popularVote": "人气投票排行榜",
-    "default": "比赛排行榜"
-  },
-  "tooltips": {
-    "score": "查看得分最高的比赛条目！",
-    "popularVote": "查看最受欢迎的比赛条目！",
-    "default": "查看评分最高的比赛条目！"
-  },
-  "headers": {
-    "studentName": "学生姓名",
-    "rank": "排名",
-    "score": {
-      "calculated": "计算得分",
-      "popularity": "人气得分",
-      "default": "指标"
-    }
-  }
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/contestVoting.json b/src/i18n/locales/zh-SG/sideContent/contestVoting.json
deleted file mode 100644
index fd951363f7..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/contestVoting.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "noEntries": "未找到符合条件的投票条目。",
-  "title": "比赛投票",
-  "tooltip": "从 D（最差）到 S（最佳）为您最喜欢的比赛条目排名！"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/cseMachine.json b/src/i18n/locales/zh-SG/sideContent/cseMachine.json
deleted file mode 100644
index bd20c011ec..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/cseMachine.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "maxStepsExceeded": "超出最大步骤数。",
-  "increaseStepLimit": "如果您希望查看进一步的评估，请增加步骤限制。",
-  "csecDescription": "CSEC 机器生成控制、存储、环境和类模型图，这些图基于<0>《计算机程序的构造和解释，JavaScript 版》第 3 章第 2 节</0>中介绍的符号。",
-  "javaCsec": "您已选择子语言 <0>Java CSEC</0>。",
-  "cseDescription": "CSE 机器生成控制、存储和环境模型图，这些图基于<0>《计算机程序的构造和解释，JavaScript 版》第 3 章第 2 节</0>中介绍的符号。",
-  "instructions": "在此选项卡上，REPL 将被隐藏，因此请确保您的代码在运行前没有错误。您可以通过运行程序，然后拖动上方的滑块来查看程序评估过程中不同阶段的控制、存储和环境状态。点击快进按钮（双箭头）将跳到程序中的下一个断点。",
-  "shortcutsTitle": "一些有用的键盘快捷键：",
-  "shortcuts": {
-    "a": "a: 移动到第一步",
-    "e": "e: 移动到最后一步",
-    "f": "f: 移动到下一步",
-    "b": "b: 移动到上一步"
-  },
-  "shortcutsNote": "请注意，这些快捷键仅在浏览器焦点位于此选项卡时有效。",
-  "label": "CSE 机器"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/dataVisualizer.json b/src/i18n/locales/zh-SG/sideContent/dataVisualizer.json
deleted file mode 100644
index 09f00b91e2..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/dataVisualizer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "defaultText": "数据可视化工具帮助您可视化数据结构。",
-  "instructions": "通过调用函数 <0/> 激活，其中 <1/> 是您想要可视化的 <2/> 数据结构，<3/> 是结构的数量。",
-  "reference": "数据可视化工具使用框图和指针图，这些图基于<0>《计算机程序的构造和解释，JavaScript 版》第 2 章第 2 节</0>中介绍的符号。",
-  "label": "数据可视化工具",
-  "previous": "上一个",
-  "next": "下一个"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/faceapiDisplay.json b/src/i18n/locales/zh-SG/sideContent/faceapiDisplay.json
deleted file mode 100644
index c33e04681f..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/faceapiDisplay.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "takePicture": "拍照",
-  "reset": "重置"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/htmlDisplay.json b/src/i18n/locales/zh-SG/sideContent/htmlDisplay.json
deleted file mode 100644
index 7867c95a9b..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/htmlDisplay.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "title": "HTML 显示",
-  "label": "HTML 显示"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/resultCard.json b/src/i18n/locales/zh-SG/sideContent/resultCard.json
deleted file mode 100644
index 0eb95524f1..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/resultCard.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "timeout": "[超时] 提交的测试用例超出时间限制。",
-  "syntax": "[语法] 第 {{line}} 行：{{errorExplanation}}",
-  "runtime": "[运行时] 第 {{line}} 行：{{errorExplanation}}",
-  "systemError": "[系统] {{errorMessage}}",
-  "unknown": "[未知] 自动评分器错误：类型 {{errorType}}"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/sessionManagement.json b/src/i18n/locales/zh-SG/sideContent/sessionManagement.json
deleted file mode 100644
index 80c2fe42e4..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/sessionManagement.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "姓名",
-  "role": "角色"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/substVisualizer.json b/src/i18n/locales/zh-SG/sideContent/substVisualizer.json
deleted file mode 100644
index 352c118d8d..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/substVisualizer.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "welcome": "欢迎来到步骤器！",
-  "instructions": "在此标签页中，REPL 将被隐藏，因此请确保您的代码在运行步骤器之前没有错误。您可以通过在左侧编写程序，然后拖动上方的滑块来查看其评估过程。",
-  "evaluationSteps": "在偶数步骤中，将要评估的程序部分会以黄色突出显示。在奇数步骤中，评估结果会以绿色突出显示。您可以在控制栏中更改最大步骤限制（500-5000，默认值为1000）。",
-  "shortcutsTitle": "一些有用的键盘快捷键：",
-  "shortcuts": {
-    "a": "a: 跳到第一步",
-    "e": "e: 跳到最后一步",
-    "f": "f: 跳到下一步",
-    "b": "b: 跳到上一步"
-  },
-  "shortcutsNote": "请注意，这些快捷键仅在浏览器焦点位于此标签页时有效（点击说明文字或其上方区域）。"
-}
diff --git a/src/i18n/locales/zh-SG/sideContent/upload.json b/src/i18n/locales/zh-SG/sideContent/upload.json
deleted file mode 100644
index 4dc0d88a11..0000000000
--- a/src/i18n/locales/zh-SG/sideContent/upload.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "description": "通过上传类文件绕过编译器和类型检查器，在 JVM 中运行。",
-  "acceptedFiles": "仅接受 .class 文件。当此选项卡处于活动状态时，编辑器中的代码将被忽略。",
-  "compileCommand": "使用以下命令编译文件：",
-  "javacCommand": "javac *.java -target 8 -source 8",
-  "warning": "避免运行从未知来源下载的类文件。",
-  "mainClass": "主类必须命名为 Main 并作为 Main.class 上传。",
-  "chooseFiles": "选择文件...",
-  "filesUploaded": "文件已上传。",
-  "label": "上传文件"
-}
diff --git a/src/i18n/locales/zh-SG/sourceRecorder.json b/src/i18n/locales/zh-SG/sourceRecorder.json
deleted file mode 100644
index 96fe008d9f..0000000000
--- a/src/i18n/locales/zh-SG/sourceRecorder.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "sourceRecorder": {
-    "deleteTitle": "删除 Sourcecast",
-    "deleteConfirmation": "您确定要删除此 Sourcecast 条目吗？",
-    "confirmDelete": "确认删除",
-    "cancel": "取消"
-  }
-}
diff --git a/src/i18n/locales/zh-SG/sourcecast.json b/src/i18n/locales/zh-SG/sourcecast.json
deleted file mode 100644
index fab72fac7a..0000000000
--- a/src/i18n/locales/zh-SG/sourcecast.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "sourcecast": {
-    "titleDescription": "标题：{{title}}\n描述：{{description}}",
-    "introduction": "欢迎来到 Sourcecast！"
-  }
-}
diff --git a/src/i18n/locales/zh-SG/stories.json b/src/i18n/locales/zh-SG/stories.json
deleted file mode 100644
index e5b6bf7110..0000000000
--- a/src/i18n/locales/zh-SG/stories.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "stories": {
-    "deleteConfirmation": "您确定要删除此故事吗？",
-    "delete": "删除",
-    "allStories": "所有故事"
-  }
-}
diff --git a/src/i18n/locales/zh-SG/welcome.json b/src/i18n/locales/zh-SG/welcome.json
deleted file mode 100644
index 7e7f9438dd..0000000000
--- a/src/i18n/locales/zh-SG/welcome.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "welcome": {
-    "title": "欢迎来到 {{sourceAcademyDeploymentName}}",
-    "loggedInMessage": "您已登录为 <0>{{name}}</0>。{{sourceAcademyDeploymentName}} 没有此账户的课程信息",
-    "enrollmentMessage": "如果您已注册课程，请联系课程团队，确保您的账户已加入课程。",
-    "resourcesForLearners": "点击<0>这里</0>寻找适合您的课程。",
-    "resourcesForEducators": "点击<0>这里</0>查看入门资源列表。"
-  }
-}

From 4f1b9a3a454e33541776fa0e38563b9dec5e3fa2 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 7 May 2026 17:28:34 +0800
Subject: [PATCH 42/45] Undo more incorrect changes

---
 src/global.d.ts | 4 ----
 yarn.lock       | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index b7d373f6d9..b0ac762b09 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,5 +1 @@
 /// <reference types="@rsbuild/core/types" />
-
-declare module '@blueprintjs/core' {
-  export * from '@blueprintjs/core/lib/esnext/index';
-}
diff --git a/yarn.lock b/yarn.lock
index d4bd68cf79..1e23e62eb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5216,9 +5216,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001726":
-  version: 1.0.30001782
-  resolution: "caniuse-lite@npm:1.0.30001782"
-  checksum: 10c0/f11685de4ce1f0bc16d385fc0a07b0877da0b14af8bf510cee6a3cdfe9da1602360e1f11320e92d4f5d63cd6bec8b43539de25ee78ff94bdb7ec0fa3cce5200c
+  version: 1.0.30001733
+  resolution: "caniuse-lite@npm:1.0.30001733"
+  checksum: 10c0/2c03ad3362be7c93c09537f3853156ade5c70fb131888971dd538631971873ba27b83c5aad48dd06b6cde005fe57caae2db5d0f467d0c63a315391add70f01f5
   languageName: node
   linkType: hard
 

From 80975b567087f96e97190ac7ca62de6fd3ec32ee Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 7 May 2026 17:29:58 +0800
Subject: [PATCH 43/45] Remove unnecessary Vitest config change

---
 vitest.config.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/vitest.config.ts b/vitest.config.ts
index 5f473dafe6..a8bc5b8ef2 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -7,13 +7,6 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./src/setupTests.ts'],
-    // Prevent worker startup timeout cascades in constrained environments.
-    pool: 'threads',
-    poolOptions: {
-      threads: {
-        singleThread: true
-      }
-    },
     coverage: {
       reporter: ['text', 'html', 'lcov']
     }

From 09c48150abbc952e7e1b71141eba7c9c508bc032 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Fri, 8 May 2026 01:21:04 +0800
Subject: [PATCH 44/45] Fix errors post-merge

---
 src/commons/adminStats/LLMStatsTab.tsx                      | 6 +++---
 .../groundControl/subcomponents/GroundControlEditCell.tsx   | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/commons/adminStats/LLMStatsTab.tsx b/src/commons/adminStats/LLMStatsTab.tsx
index fa0ea99665..fee2611f1f 100644
--- a/src/commons/adminStats/LLMStatsTab.tsx
+++ b/src/commons/adminStats/LLMStatsTab.tsx
@@ -12,7 +12,7 @@ import {
   Tag
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useEffect, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 
 import { LLMAssessmentStat, LLMCourseStat, LLMQuestionStat } from '../assessment/AssessmentTypes';
 import { getLLMCourseStats } from '../sagas/RequestsSaga';
@@ -287,7 +287,7 @@ const LLMStatsTab: React.FC = () => {
           {sortedAssessments.map(assessment => {
             const isExpanded = expanded.has(assessment.assessment_id);
             return (
-              <React.Fragment key={assessment.assessment_id}>
+              <Fragment key={assessment.assessment_id}>
                 <tr
                   style={{ cursor: 'pointer' }}
                   onClick={() => toggleRow(assessment.assessment_id)}
@@ -345,7 +345,7 @@ const LLMStatsTab: React.FC = () => {
                     </td>
                   </tr>
                 )}
-              </React.Fragment>
+              </Fragment>
             );
           })}
         </tbody>
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
index 3abc00b192..c4273e9465 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx
@@ -2,7 +2,6 @@ import { Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import dayjs from 'dayjs';
 import { useCallback, useState } from 'react';
-import { DateInput } from 'src/commons/DateTimePickers';
 
 import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
 import ControlButton from '../../../../commons/ControlButton';
@@ -46,7 +45,7 @@ const EditCell: React.FC<Props> = ({ data, forOpenDate, handleAssessmentChangeDa
     }
   }, [newDate, currentDate, data, handleAssessmentChangeDate, forOpenDate, handleCloseDialog]);
 
-  const handleDateChange = React.useCallback(
+  const handleDateChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const selected = dayjs(event.target.value);
 

From 4186f20081ee4fa0ae4dd9ff2965a0f323e312db Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Fri, 8 May 2026 01:22:24 +0800
Subject: [PATCH 45/45] Migrate changes post-merge

---
 .../academy/grading/subcomponents/LLMFeedbackButton.tsx     | 4 ++--
 .../subcomponents/GroundControlLLMStatsCell.tsx             | 6 +++---
 .../academy/groundControl/subcomponents/LLMStatsDialog.tsx  | 4 ++--
 src/pages/academy/llmStats/LLMStatsPage.tsx                 | 2 --
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx b/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
index 0f57556f19..6f85c6e314 100644
--- a/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
+++ b/src/pages/academy/grading/subcomponents/LLMFeedbackButton.tsx
@@ -8,7 +8,7 @@ import {
   TextArea
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Tokens } from 'src/commons/application/types/SessionTypes';
 
 import { submitLLMFeedback } from '../../../../commons/sagas/RequestsSaga';
@@ -30,7 +30,7 @@ const LLMFeedbackButton: React.FC<Props> = ({ tokens, assessmentId, questionId }
   const [body, setBody] = useState('');
   const [rating, setRating] = useState<number>(0);
   const [submitting, setSubmitting] = useState(false);
-  const starButtonRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
+  const starButtonRefs = useRef<Array<HTMLButtonElement | null>>([]);
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleClose = useCallback(() => {
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx
index 55e3f629e8..37d5b40232 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlLLMStatsCell.tsx
@@ -1,17 +1,17 @@
 import { Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useSession } from 'src/commons/utils/Hooks';
 
 import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
 import ControlButton from '../../../../commons/ControlButton';
 import LLMStatsDialog from './LLMStatsDialog';
 
-type LLMStatsCellProps = {
+type Props = {
   data: AssessmentOverview;
 };
 
-const LLMStatsCell: React.FC<LLMStatsCellProps> = ({ data }) => {
+const LLMStatsCell: React.FC<Props> = ({ data }) => {
   const { enableLlmGrading } = useSession();
   const [isDialogOpen, setDialogOpen] = useState(false);
 
diff --git a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
index c3a0f5ae9d..b9116c0848 100644
--- a/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
+++ b/src/pages/academy/groundControl/subcomponents/LLMStatsDialog.tsx
@@ -15,7 +15,7 @@ import {
   Tag
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTokens } from 'src/commons/utils/Hooks';
 
 import {
@@ -180,7 +180,7 @@ const LLMStatsDialog: React.FC<LLMStatsDialogProps> = ({
   const [questionFeedback, setQuestionFeedback] = useState<FeedbackEntry[]>([]);
   const [questionFeedbackLoading, setQuestionFeedbackLoading] = useState(false);
 
-  const questionDisplayOrderById = React.useMemo(() => {
+  const questionDisplayOrderById = useMemo(() => {
     const map = new Map<number, number>();
     stats?.questions.forEach(q => map.set(q.question_id, q.display_order));
     return map;
diff --git a/src/pages/academy/llmStats/LLMStatsPage.tsx b/src/pages/academy/llmStats/LLMStatsPage.tsx
index 2104cb7cfd..053bed552f 100644
--- a/src/pages/academy/llmStats/LLMStatsPage.tsx
+++ b/src/pages/academy/llmStats/LLMStatsPage.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import LLMStatsTab from '../../../commons/adminStats/LLMStatsTab';
 import ContentDisplay from '../../../commons/ContentDisplay';