From 111bdfd129bf43122ef082bfe0886db4c5692687 Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Fri, 21 Aug 2026 09:53:02 -0700
Subject: [PATCH 1/3] Give FRQ templates real prompt and rubric data; fix
 authoring and test taking

FRQTemplate carried neither prompt content nor a rubric, so the editor had
nothing to persist and the test renderer fell back to hardcoded AP Human
Geography content for every FRQ. This adds the missing data model and fixes
the authoring and test-taking paths that depend on it.

Data model
- types/frq.ts: add criteria, prompt, answerType, status, timeLimitMinutes
- add src/lib/frq/template.ts to normalize legacy and partial template docs
  so older documents keep loading

Authoring and taking
- editorRenderer/editorFooter: actually persist questions and rubric
- testRenderer: render the real prompt and rubric, and persist drafts
- admin subject page: surface load errors, clean up references to deleted
  units, and tolerate partial fetch failures
- subject page, sidebar layout, and sidebar: add the missing FRQ links
- remove components/global/frqFooter.tsx, which had no remaining references

Rules and tooling
- firestore.rules: null-guard resource in the FRQ collections, where a
  missing document raised an evaluation error that surfaced to the client
  as "insufficient permissions"; let graders read templates, since the
  rubric and prompt they score against live there
- firestore.rules: also add the graded-frqs grades key here so the whole
  rules file lands in one PR. It is declarative and unused until the
  grading PR that builds on this branch.
- package.json: add deploy:rules
---
 firestore.rules                               |  15 +-
 package.json                                  |   3 +-
 .../subject/[slug]/[unit]/frq/[id]/page.tsx   |  80 ++-
 src/app/admin/subject/[slug]/page.tsx         |  99 +++-
 .../(no-sidebar)/[unit]/frq/[id]/page.tsx     |  90 +--
 src/app/subject/[slug]/(sidebar)/layout.tsx   |  48 +-
 src/app/subject/[slug]/(sidebar)/page.tsx     |  64 ++-
 src/components/frq/editorFooter.tsx           | 151 ++---
 src/components/frq/editorRenderer.tsx         | 528 +++++++++---------
 src/components/frq/testRenderer.tsx           | 427 +++++++-------
 src/components/global/frqFooter.tsx           |  98 ----
 src/components/subject/subject-sidebar.tsx    |  36 +-
 src/lib/frq/template.ts                       | 193 +++++++
 src/types/frq.ts                              |  71 ++-
 14 files changed, 1093 insertions(+), 810 deletions(-)
 delete mode 100644 src/components/global/frqFooter.tsx
 create mode 100644 src/lib/frq/template.ts

diff --git a/firestore.rules b/firestore.rules
index 9fb850bf..1edc8124 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -76,8 +76,11 @@ service cloud.firestore {
 
 
     match /ungraded-frqs/{submissionId} {
+  // `resource` is null when the document does not exist, and dereferencing it
+  // raises an evaluation error rather than denying, which surfaces to the
+  // client as "insufficient permissions" for what is really a missing doc.
   allow get, list: if isGraderOrAdmin() ||
-    (isAuthenticated() && resource.data.studentId == request.auth.uid);
+    (isAuthenticated() && resource != null && resource.data.studentId == request.auth.uid);
 
   allow create: if isAuthenticated()
     && request.resource.data.keys().hasOnly([
@@ -102,7 +105,7 @@ service cloud.firestore {
 
     match /graded-frqs/{resultId} {
   allow get, list: if isGraderOrAdmin() ||
-    (isAuthenticated() && resource.data.studentId == request.auth.uid);
+    (isAuthenticated() && resource != null && resource.data.studentId == request.auth.uid);
 
   allow create: if isGraderOrAdmin()
     && resultId == request.resource.data.sourceSubmissionId
@@ -116,9 +119,11 @@ service cloud.firestore {
       'submittedAt',
       'score',
       'feedback',
+      'grades',
       'graderId',
       'gradedAt'
     ])
+    && request.resource.data.grades is list
     && request.resource.data.sourceSubmissionId is string
     && request.resource.data.templateId is string
     && request.resource.data.subject is string
@@ -156,8 +161,12 @@ service cloud.firestore {
           allow write: if isMemberOrAdmin();
         }
 
+        // Graders read templates too: the rubric being scored against lives on
+        // the template, and so does the prompt shown beside a student's answer.
+        // Restricting reads to members left graders unable to open a private
+        // FRQ's submission at all.
         match /frqs/{frq} {
-          allow read: if resource.data.isPublic == true || isMemberOrAdmin();
+          allow read: if (resource != null && resource.data.isPublic == true) || isGraderOrMemberOrAdmin();
           allow write: if isMemberOrAdmin();
         }
       }
diff --git a/package.json b/package.json
index 37713219..88b388ea 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",
-    "emulate": "firebase emulators:start --import emulator --export-on-exit"
+    "emulate": "firebase emulators:start --import emulator --export-on-exit",
+    "deploy:rules": "firebase deploy --only firestore:rules,firestore:indexes"
   },
   "dependencies": {
     "@editorjs/attaches": "^1.3.0",
diff --git a/src/app/admin/subject/[slug]/[unit]/frq/[id]/page.tsx b/src/app/admin/subject/[slug]/[unit]/frq/[id]/page.tsx
index 990f7845..43246005 100644
--- a/src/app/admin/subject/[slug]/[unit]/frq/[id]/page.tsx
+++ b/src/app/admin/subject/[slug]/[unit]/frq/[id]/page.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import FRQEditorRenderer from "@/components/frq/editorRenderer";
+import { useUser } from "@/components/hooks/UserContext";
 import { getFrqTemplateDocRef } from "@/lib/firestore/frqRefs";
+import { normalizeFrqTemplate } from "@/lib/frq/template";
 import type { FRQTemplate } from "@/types/frq";
 import { getDoc } from "firebase/firestore";
 import { usePathname } from "next/navigation";
@@ -9,49 +11,67 @@ import { useEffect, useState } from "react";
 
 const Page = () => {
   const pathname = usePathname() ?? "";
+  const { user, loading: userLoading } = useUser();
 
   const pathParts = pathname.split("/").slice(-4);
   const subject = pathParts[0] ?? "";
   const unitId = pathParts[1] ?? "";
   const frqId = pathParts[3] ?? "";
 
-  const [frqTemplate, setFrqTemplate] =
-    useState<FRQTemplate | null>(null);
+  const [frqTemplate, setFrqTemplate] = useState<FRQTemplate | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [frqFound, setFrqFound] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  // Firestore rules are the real gate, but without a UI check an unauthorized
+  // visitor gets the full editor and only discovers the denial when Save fails.
+  const canEdit = user?.access === "admin" || user?.access === "member";
 
   useEffect(() => {
+    if (userLoading) {
+      return;
+    }
+
+    if (!canEdit) {
+      setIsLoading(false);
+      return;
+    }
+
     if (!subject || !unitId || !frqId) {
-      setFrqFound(false);
+      setLoadError("This FRQ address is not valid.");
       setIsLoading(false);
       return;
     }
 
     const loadFrq = async () => {
+      setIsLoading(true);
+      setLoadError(null);
+
       try {
-        const docRef = getFrqTemplateDocRef(
-          subject,
-          unitId,
-          frqId,
+        const docSnap = await getDoc(
+          getFrqTemplateDocRef(subject, unitId, frqId),
         );
 
-        const docSnap = await getDoc(docRef);
-
         if (!docSnap.exists()) {
-          setFrqFound(false);
+          setLoadError("This FRQ no longer exists.");
           setFrqTemplate(null);
           return;
         }
 
-        const loadedFrq: FRQTemplate = {
-          id: docSnap.id,
-          ...(docSnap.data() as Omit<FRQTemplate, "id">),
-        };
+        setFrqTemplate(
+          normalizeFrqTemplate(docSnap.data(), {
+            id: docSnap.id,
+            subject,
+            unitId,
+          }),
+        );
+      } catch (error) {
+        console.error("Error loading FRQ template:", error);
 
-        setFrqTemplate(loadedFrq);
-        setFrqFound(true);
-      } catch {
-        setFrqFound(false);
+        setLoadError(
+          error instanceof Error
+            ? `Could not load this FRQ: ${error.message}`
+            : "Could not load this FRQ.",
+        );
         setFrqTemplate(null);
       } finally {
         setIsLoading(false);
@@ -59,18 +79,30 @@ const Page = () => {
     };
 
     void loadFrq();
-  }, [subject, unitId, frqId]);
+  }, [userLoading, canEdit, subject, unitId, frqId]);
+
+  if (userLoading || isLoading) {
+    return <div className="p-8">Loading...</div>;
+  }
+
+  if (!canEdit) {
+    return (
+      <div className="p-8">
+        You need porter or admin access to edit FRQs.
+      </div>
+    );
+  }
 
-  if (isLoading) {
-    return <div>Loading...</div>;
+  if (loadError) {
+    return <div className="p-8">{loadError}</div>;
   }
 
   return (
     <FRQEditorRenderer
-      frqFound={frqFound}
+      frqFound={frqTemplate !== null}
       frqTemplate={frqTemplate}
     />
   );
 };
 
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/src/app/admin/subject/[slug]/page.tsx b/src/app/admin/subject/[slug]/page.tsx
index b444a376..f3ae5cca 100644
--- a/src/app/admin/subject/[slug]/page.tsx
+++ b/src/app/admin/subject/[slug]/page.tsx
@@ -107,18 +107,29 @@ export default function Page({ params }: { params: { slug: string } }) {
 
           const frqSnapshots = await Promise.all(
             fetchedUnits.map(async (unit) => {
-              const snapshot = await getDocs(
-                getFrqTemplatesCollectionRef(params.slug, unit.id),
-              );
-
-              return snapshot.docs.map(
-                (frqDoc): FRQTemplate => ({
-                  id: frqDoc.id,
-                  ...(frqDoc.data() as Omit<FRQTemplate, "id">),
-                  subject: params.slug,
-                  unitId: unit.id,
-                }),
-              );
+              // One unreadable FRQ subcollection must not blank the whole
+              // subject editor; the units and chapters loaded fine.
+              try {
+                const snapshot = await getDocs(
+                  getFrqTemplatesCollectionRef(params.slug, unit.id),
+                );
+
+                return snapshot.docs.map(
+                  (frqDoc): FRQTemplate => ({
+                    id: frqDoc.id,
+                    ...(frqDoc.data() as Omit<FRQTemplate, "id">),
+                    subject: params.slug,
+                    unitId: unit.id,
+                  }),
+                );
+              } catch (frqError) {
+                console.error(
+                  `Unable to load FRQs for unit ${unit.id}:`,
+                  frqError,
+                );
+
+                return [];
+              }
             }),
           );
 
@@ -251,8 +262,16 @@ const handleAddFrq = async (
     ]);
 
     setUnsavedChanges(true);
-  } catch {
-    alert("Unable to add the FRQ. Please try again.");
+  } catch (error) {
+    // Discarding this error is what made a permission-denied rule look
+    // identical to a network blip, so the real cause never reached anyone.
+    console.error("Error adding FRQ:", error);
+
+    alert(
+      error instanceof Error
+        ? `Unable to add the FRQ: ${error.message}`
+        : "Unable to add the FRQ. Please try again.",
+    );
   }
 };
 
@@ -291,8 +310,14 @@ const handleRenameFrq = async (
     );
 
     setUnsavedChanges(true);
-  } catch {
-    alert("Unable to rename the FRQ. Please try again.");
+  } catch (error) {
+    console.error("Error renaming FRQ:", error);
+
+    alert(
+      error instanceof Error
+        ? `Unable to rename the FRQ: ${error.message}`
+        : "Unable to rename the FRQ. Please try again.",
+    );
   }
 };
 
@@ -325,8 +350,14 @@ const handleFrqVisibilityChange = async (
     );
 
     setUnsavedChanges(true);
-  } catch {
-    alert("Unable to update the FRQ visibility. Please try again.");
+  } catch (error) {
+    console.error("Error updating FRQ visibility:", error);
+
+    alert(
+      error instanceof Error
+        ? `Unable to update the FRQ visibility: ${error.message}`
+        : "Unable to update the FRQ visibility. Please try again.",
+    );
   }
 };
   /****************************************************
@@ -429,6 +460,38 @@ const handleFrqVisibilityChange = async (
       // 1. Save the main subject doc
       batch.set(doc(db, "subjects", params.slug), subjectToSave);
 
+      // 1b. Remove units that were deleted locally. The loop below only visits
+      // units that still exist, so a deleted unit previously kept its document
+      // and every chapter, test, and FRQ underneath it. The orphaned FRQs are
+      // the visible symptom: they stay readable at their old URL and keep
+      // appearing in the grading queue's template lookups.
+      const unitsCollectionRef = collection(
+        db,
+        "subjects",
+        params.slug,
+        "units",
+      );
+      const existingUnitsSnap = await getDocs(unitsCollectionRef);
+      const localUnitIds = new Set(subjectToSave.units.map((u) => u.id));
+
+      for (const unitDoc of existingUnitsSnap.docs) {
+        if (localUnitIds.has(unitDoc.id)) {
+          continue;
+        }
+
+        for (const subcollection of ["chapters", "tests", "frqs"]) {
+          const staleDocs = await getDocs(
+            collection(unitDoc.ref, subcollection),
+          );
+
+          staleDocs.forEach((staleDoc) => {
+            batch.delete(staleDoc.ref);
+          });
+        }
+
+        batch.delete(unitDoc.ref);
+      }
+
       // 2. For each Unit, update or create the unit doc, then manage sub-collections
       for (const unit of subjectToSave.units) {
         // Set (upsert) the Unit itself
diff --git a/src/app/subject/[slug]/(no-sidebar)/[unit]/frq/[id]/page.tsx b/src/app/subject/[slug]/(no-sidebar)/[unit]/frq/[id]/page.tsx
index a16439c7..b0112f10 100644
--- a/src/app/subject/[slug]/(no-sidebar)/[unit]/frq/[id]/page.tsx
+++ b/src/app/subject/[slug]/(no-sidebar)/[unit]/frq/[id]/page.tsx
@@ -3,23 +3,31 @@
 import usePathname from "@/components/client/pathname";
 import FRQTestRenderer from "@/components/frq/testRenderer";
 import { getFrqTemplateDocRef } from "@/lib/firestore/frqRefs";
+import { normalizeFrqTemplate } from "@/lib/frq/template";
+import type { FRQTemplate } from "@/types/frq";
 import { getDoc } from "firebase/firestore";
 import { useEffect, useState } from "react";
 
+/**
+ * The unit segment is built as `unit-{displayNumber}-{unitId}`, so the id is
+ * everything after the second dash rather than the last dash-delimited chunk —
+ * that keeps working if a unit id ever contains a dash.
+ */
+const parseUnitId = (unitSegment: string | undefined) => {
+  const parts = (unitSegment ?? "").split("-");
+
+  return parts.length > 2 ? parts.slice(2).join("-") : "";
+};
+
 const Page = () => {
   const pathname = usePathname();
 
-  const basePath = pathname
-    .split("/")
-    .filter(Boolean)
-    .slice(-4)
-    .join("_");
+  const pathParts = pathname.split("/").filter(Boolean).slice(-4);
+  const subject = pathParts[0] ?? "";
+  const unitId = parseUnitId(pathParts[1]);
+  const frqId = pathParts[3] ?? "";
 
-  const subject = basePath.split("_")[0]!;
-  const unitId = basePath.split("_")[1]?.split("-").at(-1);
-  const frqId = basePath.split("_")[3]!;
-
-  const [frq, setFrq] = useState<Record<string, unknown> | null>(null);
+  const [template, setTemplate] = useState<FRQTemplate | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -27,35 +35,39 @@ const Page = () => {
     const fetchFRQ = async () => {
       setLoading(true);
       setError(null);
-      setFrq(null);
+      setTemplate(null);
 
-      try {
-        if (!subject || !unitId || !frqId) {
-          setError("Invalid FRQ route.");
-          return;
-        }
+      if (!subject || !unitId || !frqId) {
+        setError("This FRQ address is not valid.");
+        setLoading(false);
+        return;
+      }
 
-        const docRef = getFrqTemplateDocRef(
-          subject,
-          unitId,
-          frqId,
+      try {
+        const docSnap = await getDoc(
+          getFrqTemplateDocRef(subject, unitId, frqId),
         );
 
-        const docSnap = await getDoc(docRef);
+        if (!docSnap.exists()) {
+          setError("FRQ not found.");
+          return;
+        }
 
-        if (docSnap.exists()) {
-          setFrq({
+        setTemplate(
+          normalizeFrqTemplate(docSnap.data(), {
             id: docSnap.id,
-            ...docSnap.data(),
             subject,
             unitId,
-          });
-        } else {
-          setFrq(null);
-        }
-      } catch (error: unknown) {
-        console.error("Error fetching FRQ data:", error);
-        setError("Error fetching FRQ data.");
+          }),
+        );
+      } catch (fetchError: unknown) {
+        console.error("Error fetching FRQ data:", fetchError);
+
+        setError(
+          fetchError instanceof Error
+            ? `Error fetching FRQ data: ${fetchError.message}`
+            : "Error fetching FRQ data.",
+        );
       } finally {
         setLoading(false);
       }
@@ -64,19 +76,9 @@ const Page = () => {
     void fetchFRQ();
   }, [subject, unitId, frqId]);
 
-  if (loading) {
-    return <div>Loading...</div>;
-  }
-
-  if (error) {
-    return <div>{error}</div>;
-  }
-
-  if (!frq) {
-    return <div>FRQ not found.</div>;
-  }
-
-  return <FRQTestRenderer frq={frq} />;
+  return (
+    <FRQTestRenderer template={template} loading={loading} error={error} />
+  );
 };
 
 export default Page;
diff --git a/src/app/subject/[slug]/(sidebar)/layout.tsx b/src/app/subject/[slug]/(sidebar)/layout.tsx
index dd37cfa0..3767358b 100644
--- a/src/app/subject/[slug]/(sidebar)/layout.tsx
+++ b/src/app/subject/[slug]/(sidebar)/layout.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { type Subject } from "@/types/firestore";
 
 import { db } from "@/lib/firebase";
-import { doc, getDoc } from "firebase/firestore";
+import { collection, doc, getDoc, getDocs, query, where } from "firebase/firestore";
 import { useUser } from "@/components/hooks/UserContext";
 
 export default function Layout({
@@ -35,7 +35,51 @@ export default function Layout({
         const docRef = doc(db, "subjects", params.slug);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
-          setSubject(docSnap.data() as Subject);
+          const subjectData = docSnap.data() as Subject;
+
+          const canPreview =
+            user?.access === "admin" || user?.access === "member";
+
+          // The sidebar is the only navigation on chapter and test pages, so it
+          // needs the unit's FRQs too — otherwise an FRQ is reachable only from
+          // the subject landing page.
+          const unitsWithFrqs = await Promise.all(
+            subjectData.units.map(async (unit) => {
+              try {
+                const frqsCollectionRef = collection(
+                  db,
+                  "subjects",
+                  params.slug,
+                  "units",
+                  unit.id,
+                  "frqs",
+                );
+
+                const frqsSnapshot = await getDocs(
+                  canPreview
+                    ? frqsCollectionRef
+                    : query(frqsCollectionRef, where("isPublic", "==", true)),
+                );
+
+                return {
+                  ...unit,
+                  frqs: frqsSnapshot.docs.map((frqDoc) => ({
+                    ...frqDoc.data(),
+                    id: frqDoc.id,
+                  })),
+                };
+              } catch (frqError) {
+                console.error(
+                  `Unable to load FRQs for unit ${unit.id}:`,
+                  frqError,
+                );
+
+                return { ...unit, frqs: [] };
+              }
+            }),
+          );
+
+          setSubject({ ...subjectData, units: unitsWithFrqs });
         }
       } catch (error) {
         console.error("Error fetching subject data:", error);
diff --git a/src/app/subject/[slug]/(sidebar)/page.tsx b/src/app/subject/[slug]/(sidebar)/page.tsx
index 4d74a2d3..94717080 100644
--- a/src/app/subject/[slug]/(sidebar)/page.tsx
+++ b/src/app/subject/[slug]/(sidebar)/page.tsx
@@ -50,30 +50,46 @@ const Page = ({ params }: { params: { slug: string } }) => {
 
           const unitsWithFrqs = await Promise.all(
             subjectData.units.map(async (unit) => {
-              const frqsCollectionRef = collection(
-                db,
-                "subjects",
-                params.slug,
-                "units",
-                unit.id,
-                "frqs",
-              );
-
-              const frqsQuery = canPreview
-                ? frqsCollectionRef
-                : query(frqsCollectionRef, where("isPublic", "==", true));
-
-              const frqsSnapshot = await getDocs(frqsQuery);
-
-              const frqs = frqsSnapshot.docs.map((frqDoc) => ({
-                ...frqDoc.data(),
-                id: frqDoc.id,
-              }));
-
-              return {
-                ...unit,
-                frqs,
-              };
+              // FRQs are supplementary to the curriculum. A failure here — a
+              // rules change that has not been deployed, an offline read —
+              // must not take down the whole subject page, which is what an
+              // unguarded rejection inside Promise.all did for every visitor.
+              try {
+                const frqsCollectionRef = collection(
+                  db,
+                  "subjects",
+                  params.slug,
+                  "units",
+                  unit.id,
+                  "frqs",
+                );
+
+                const frqsQuery = canPreview
+                  ? frqsCollectionRef
+                  : query(frqsCollectionRef, where("isPublic", "==", true));
+
+                const frqsSnapshot = await getDocs(frqsQuery);
+
+                const frqs = frqsSnapshot.docs.map((frqDoc) => ({
+                  ...frqDoc.data(),
+                  id: frqDoc.id,
+                }));
+
+                return {
+                  ...unit,
+                  frqs,
+                };
+              } catch (frqError) {
+                console.error(
+                  `Unable to load FRQs for unit ${unit.id}:`,
+                  frqError,
+                );
+
+                return {
+                  ...unit,
+                  frqs: [],
+                };
+              }
             }),
           );
 
diff --git a/src/components/frq/editorFooter.tsx b/src/components/frq/editorFooter.tsx
index de83390e..cbd2f077 100644
--- a/src/components/frq/editorFooter.tsx
+++ b/src/components/frq/editorFooter.tsx
@@ -1,155 +1,104 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ChevronUp, MapPin, Plus, Trash2 } from "lucide-react";
+import { ChevronUp } from "lucide-react";
 import { useState } from "react";
 
-type BatchVisibility = "public" | "private";
+type FRQVisibility = "public" | "private";
 
-interface FRQNavigationItem {
+interface FRQPartSummary {
   id: string;
-  title: string;
+  label: string;
 }
 
 interface FRQEditorFooterProps {
-  frqs: FRQNavigationItem[];
-  currentFrqIndex: number;
-  batchName: string;
-  batchVisibility: BatchVisibility;
-  onCreateFrq: () => void;
-  onDeleteFrq: () => void;
-  onSelectFrq: (index: number) => void;
-  onPrevious: () => void;
-  onNext: () => void;
+  parts: FRQPartSummary[];
+  frqName: string;
+  visibility: FRQVisibility;
+  hasUnsavedChanges: boolean;
 }
 
+/**
+ * Status bar for the FRQ editor. Each FRQ is its own Firestore document, so
+ * this navigates the parts of the open FRQ rather than a batch of FRQs; adding
+ * and removing whole FRQs belongs to the admin subject page that owns the list.
+ */
 const FRQEditorFooter = ({
-  frqs,
-  currentFrqIndex,
-  batchName,
-  batchVisibility,
-  onCreateFrq,
-  onDeleteFrq,
-  onSelectFrq,
-  onPrevious,
-  onNext,
+  parts,
+  frqName,
+  visibility,
+  hasUnsavedChanges,
 }: FRQEditorFooterProps) => {
-  // Controlled so picking an FRQ closes the panel instead of leaving it parked
+  // Controlled so picking a part closes the panel instead of leaving it parked
   // over the footer, matching frq/FRQFooter.tsx on the other FRQ pages.
   const [navigationOpen, setNavigationOpen] = useState(false);
 
-  const selectFrq = (index: number) => {
-    onSelectFrq(index);
+  const scrollToPart = (partId: string) => {
     setNavigationOpen(false);
+    document
+      .querySelector(`[data-frq-part="${partId}"]`)
+      ?.scrollIntoView({ behavior: "smooth", block: "start" });
   };
 
   return (
     <footer className="fixed bottom-0 left-0 z-50 grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-4 border-t-2 border-gray-300 bg-background px-4 py-2.5 text-foreground">
       <div className="flex min-w-0 items-center gap-4">
-        <p className="truncate font-medium" title={batchName}>
-          {batchName}
+        <p className="truncate font-medium" title={frqName}>
+          {frqName}
         </p>
 
         <p className="shrink-0 text-sm text-muted-foreground">
           Visibility:{" "}
-          <span className="capitalize text-foreground">{batchVisibility}</span>
+          <span className="capitalize text-foreground">{visibility}</span>
         </p>
       </div>
 
       <div className="flex items-center justify-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          onClick={onDeleteFrq}
-          disabled={frqs.length <= 1}
-          title={
-            frqs.length <= 1
-              ? "An FRQ batch must contain at least one FRQ"
-              : "Delete the current FRQ"
-          }
-        >
-          <Trash2 className="mr-2 size-4" />
-          Delete FRQ
-        </Button>
-
         <Popover open={navigationOpen} onOpenChange={setNavigationOpen}>
           <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black py-1 pl-3 pr-1 text-sm font-bold tabular-nums text-white">
-            FRQ {currentFrqIndex + 1} of {frqs.length}
+            {parts.length} {parts.length === 1 ? "part" : "parts"}
             <ChevronUp />
           </PopoverTrigger>
 
           <PopoverContent side="top" sideOffset={12} className="w-72">
-            <p className="font-semibold">Navigate to an FRQ</p>
-
-            <p className="mt-1 text-sm text-muted-foreground">
-              Select an FRQ from this batch.
-            </p>
-
-            <div className="mt-6 grid grid-cols-6 gap-4">
-              {frqs.map((frq, index) => {
-                const isCurrent = index === currentFrqIndex;
-
-                return (
+            <p className="font-semibold">Jump to a part</p>
+
+            {parts.length === 0 ? (
+              <p className="mt-1 text-sm text-muted-foreground">
+                This FRQ has no parts yet.
+              </p>
+            ) : (
+              <div className="mt-6 grid grid-cols-6 gap-4">
+                {parts.map((part) => (
                   <button
-                    key={frq.id}
+                    key={part.id}
                     type="button"
-                    aria-label={`Go to ${frq.title}`}
-                    onClick={() => selectFrq(index)}
-                    className={`relative flex size-8 items-center justify-center border-2 font-medium ${
-                      isCurrent
-                        ? "border-transparent bg-[#2a47bb] text-white"
-                        : "border-dotted border-gray-400 text-[#2a47bb] hover:bg-blue-50"
-                    }`}
+                    aria-label={`Go to part ${part.label}`}
+                    onClick={() => scrollToPart(part.id)}
+                    className="flex size-8 items-center justify-center border-2 border-dotted border-gray-400 font-medium text-[#2a47bb] hover:bg-blue-50"
                   >
-                    {index + 1}
-
-                    {isCurrent && (
-                      <MapPin className="absolute -top-5 fill-white stroke-black" />
-                    )}
+                    {part.label}
                   </button>
-                );
-              })}
-            </div>
+                ))}
+              </div>
+            )}
           </PopoverContent>
         </Popover>
-
-        <Button
-          type="button"
-          variant="outline"
-          onClick={onCreateFrq}
-          title="Create an FRQ"
-        >
-          <Plus className="mr-2 size-4" />
-          Create FRQ
-        </Button>
       </div>
 
-      <div className="justify-self-end">
-        <button
-          type="button"
-          onClick={onPrevious}
-          disabled={currentFrqIndex === 0}
-          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white hover:bg-[#2a47bb] disabled:cursor-not-allowed disabled:bg-gray-300"
-        >
-          Back
-        </button>
-
-        <button
-          type="button"
-          onClick={onNext}
-          disabled={currentFrqIndex === frqs.length - 1}
-          className="ml-3 rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white hover:bg-[#2a47bb] disabled:cursor-not-allowed disabled:bg-gray-300"
-        >
-          Next
-        </button>
+      <div className="justify-self-end text-sm">
+        {hasUnsavedChanges ? (
+          <span className="font-medium text-amber-600">Unsaved changes</span>
+        ) : (
+          <span className="text-muted-foreground">All changes saved</span>
+        )}
       </div>
     </footer>
   );
 };
 
-export default FRQEditorFooter;
\ No newline at end of file
+export default FRQEditorFooter;
diff --git a/src/components/frq/editorRenderer.tsx b/src/components/frq/editorRenderer.tsx
index 799c1690..534b9ca7 100644
--- a/src/components/frq/editorRenderer.tsx
+++ b/src/components/frq/editorRenderer.tsx
@@ -23,91 +23,58 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
+import { getFrqTemplateDocRef } from "@/lib/firestore/frqRefs";
+import {
+  DEFAULT_TIME_LIMIT_MINUTES,
+  getPartLabel,
+  getQuestionPoints,
+  toQuestionInput,
+} from "@/lib/frq/template";
 import type { QuestionFormat, QuestionInput } from "@/types/questions";
-import { Clock3, Eye, Info, Plus, Save, Trash2 } from "lucide-react";
-import type { FRQTemplate, FRQTemplateQuestion } from "@/types/frq";
-import { useMemo, useState } from "react";
-
-type QuestionStatus = "public" | "legacy";
-type InputType = "text" | "equation";
-type BatchVisibility = "public" | "private";
-
-interface GradingCriterion {
-  id: string;
-  description: string;
-  points: number;
-}
+import { serverTimestamp, updateDoc } from "firebase/firestore";
+import { Clock3, Info, Plus, Save, Trash2 } from "lucide-react";
+import type {
+  FRQAnswerType,
+  FRQGradingCriterion,
+  FRQQuestionStatus,
+  FRQTemplate,
+  FRQTemplateQuestion,
+} from "@/types/frq";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 interface EditorQuestion {
   id: string;
   questionData: QuestionFormat;
-  status: QuestionStatus;
-  inputType: InputType;
-  criteria: GradingCriterion[];
-}
-
-interface EditorFRQ {
-  id: string;
-  title: string;
-  description: QuestionInput;
-  questions: EditorQuestion[];
+  status: FRQQuestionStatus;
+  answerType: FRQAnswerType;
+  criteria: FRQGradingCriterion[];
 }
 
-type CompatibleFrqTemplate = FRQTemplate & {
-  name?: string;
-  isVisible?: boolean;
-  timeLimit?: number;
-  timeLimitMinutes?: number;
-};
-
 interface FRQEditorRendererProps {
   frqFound: boolean;
   frqTemplate: FRQTemplate | null;
 }
 
+type SaveState = "idle" | "saving" | "saved" | "error";
+
 const createQuestionInput = (value = ""): QuestionInput => ({
   value,
   files: [],
 });
 
 /**
- * Unique, immutable ID built from the current time plus a short random suffix,
- * per the FRQ system spec. The random half is what makes it collision-safe:
- * a timestamp alone repeats when several IDs are minted in the same
- * millisecond.
+ * Unique, immutable ID built from the current time plus a short random suffix.
+ * The random half is what makes it collision-safe: a timestamp alone repeats
+ * when several IDs are minted in the same millisecond.
  */
 const makeId = (prefix: string) =>
   `${prefix}-${Date.now().toString(36)}-${Math.random()
     .toString(36)
     .slice(2, 8)}`;
 
-/**
- * A question's point value is the sum of its grading criteria. Criteria are the
- * single source of truth so the editor can never disagree with what the grading
- * page will actually award.
- */
-
 const formatPoints = (points: number) =>
   `${points} ${points === 1 ? "point" : "points"}`;
 
-const getQuestionPoints = (question: EditorQuestion) =>
-  question.criteria.reduce((total, criterion) => total + criterion.points, 0);
-
-const createDescriptionQuestion = (
-  description: QuestionInput,
-): QuestionFormat => ({
-  question: {
-    value: description.value,
-    files: [...description.files],
-  },
-  type: "frq",
-  options: [],
-  answers: [],
-  explanation: createQuestionInput(),
-  content: createQuestionInput(),
-  topic: "",
-});
-
 const createQuestionData = (
   question = createQuestionInput(),
 ): QuestionFormat => ({
@@ -124,186 +91,142 @@ const createEditorQuestion = (): EditorQuestion => ({
   id: makeId("question"),
   questionData: createQuestionData(),
   status: "public",
-  inputType: "text",
+  answerType: "text",
   criteria: [],
 });
 
 const createEditorQuestionFromTemplate = (
   templateQuestion: FRQTemplateQuestion,
-): EditorQuestion => {
-  const trimmedPrompt = templateQuestion.prompt?.trim();
-  const prompt =
-    trimmedPrompt && trimmedPrompt.length > 0
-      ? trimmedPrompt
-      : templateQuestion.title;
-
-  return {
-    id: templateQuestion.id,
-    questionData: createQuestionData(createQuestionInput(prompt)),
-    status: "public",
-    inputType: "text",
-    criteria: [],
-  };
-};
-
-/**
- * AP-style subquestion label: 1a, 1b, 1c. Past 26 questions it rolls over to
- * two letters (1aa, 1ab) rather than walking off the end of the alphabet into
- * punctuation, which is what a bare String.fromCharCode(97 + index) would do.
- */
-const getSubquestionLabel = (frqIndex: number, questionIndex: number) => {
-  let label = "";
-  let remaining = questionIndex;
-
-  do {
-    label = String.fromCharCode(97 + (remaining % 26)) + label;
-    remaining = Math.floor(remaining / 26) - 1;
-  } while (remaining >= 0);
+): EditorQuestion => ({
+  id: templateQuestion.id,
+  questionData: createQuestionData(
+    toQuestionInput(templateQuestion.prompt, templateQuestion.promptFiles),
+  ),
+  status: templateQuestion.status ?? "public",
+  answerType: templateQuestion.answerType ?? "text",
+  criteria: templateQuestion.criteria ?? [],
+});
 
-  return `${frqIndex + 1}${label}`;
-};
+interface EditorState {
+  title: string;
+  description: QuestionInput;
+  questions: EditorQuestion[];
+  timeLimitMinutes: number;
+  isPublic: boolean;
+}
 
-const createEditorFrqFromTemplate = (template: FRQTemplate): EditorFRQ => ({
-  id: template.id ?? makeId("frq"),
-  title: template.title?.trim() || "Untitled FRQ",
-  description: createQuestionInput(template.directions ?? ""),
-  questions: (template.questions ?? []).map(createEditorQuestionFromTemplate),
+const buildInitialState = (template: FRQTemplate | null): EditorState => ({
+  title: template?.title ?? "",
+  description: toQuestionInput(
+    template?.directions,
+    template?.directionsFiles,
+  ),
+  questions: (template?.questions ?? []).map(createEditorQuestionFromTemplate),
+  timeLimitMinutes: template?.timeLimitMinutes ?? DEFAULT_TIME_LIMIT_MINUTES,
+  isPublic: template?.isPublic === true,
 });
 
-const createBlankEditorFrq = (position: number): EditorFRQ => ({
-  id: makeId("frq"),
-  title: `FRQ ${position}`,
-  description: createQuestionInput(),
-  questions: [],
+/**
+ * The exact document body a save writes, minus the server timestamp. Unsaved
+ * state is detected by comparing this against the last persisted version rather
+ * than by watching for state updates: React StrictMode double-invokes effects
+ * in development, and the rich-text children re-emit equal values on mount, so
+ * a "something changed" listener reported unsaved work before any edit.
+ */
+const buildTemplatePayload = (state: EditorState) => ({
+  title: state.title.trim() || "Untitled FRQ",
+  directions: state.description.value,
+  directionsFiles: state.description.files,
+  timeLimitMinutes: state.timeLimitMinutes,
+  isPublic: state.isPublic,
+  questions: state.questions.map((question, index) => ({
+    id: question.id,
+    title: getPartLabel(index),
+    prompt: question.questionData.question.value,
+    promptFiles: question.questionData.question.files,
+    answerType: question.answerType,
+    status: question.status,
+    criteria: question.criteria,
+  })),
 });
 
-const createEditorFrqsFromTemplate = (template: FRQTemplate): EditorFRQ[] => [
-  createEditorFrqFromTemplate(template),
-];
-
-const getBatchName = (template: FRQTemplate | null) => {
-  if (!template) {
-    return "Untitled FRQ";
-  }
-
-  const compatibleTemplate = template as CompatibleFrqTemplate;
-  const practiceName = compatibleTemplate.name?.trim();
-
-  if (practiceName && practiceName.length > 0) {
-    return practiceName;
-  }
-
-  const templateTitle = template.title?.trim();
-
-  return templateTitle && templateTitle.length > 0
-    ? templateTitle
-    : "Untitled FRQ";
-};
-
-const getBatchVisibility = (template: FRQTemplate | null): BatchVisibility => {
-  if (!template) {
-    return "private";
-  }
-
-  const compatibleTemplate = template as CompatibleFrqTemplate;
-  const isVisible =
-    typeof compatibleTemplate.isVisible === "boolean"
-      ? compatibleTemplate.isVisible
-      : template.isPublic === true;
-
-  return isVisible ? "public" : "private";
-};
-
-const getInitialTimeLimit = (template: FRQTemplate | null) => {
-  if (!template) {
-    return 90;
-  }
-
-  const compatibleTemplate = template as CompatibleFrqTemplate;
-  const configuredLimit =
-    compatibleTemplate.timeLimitMinutes ?? compatibleTemplate.timeLimit;
-
-  return typeof configuredLimit === "number" &&
-    Number.isFinite(configuredLimit) &&
-    configuredLimit >= 1
-    ? Math.floor(configuredLimit)
-    : 90;
-};
-
 const FRQEditorRenderer = ({
   frqFound,
   frqTemplate,
 }: FRQEditorRendererProps) => {
-  const [frqs, setFrqs] = useState<EditorFRQ[]>(() =>
-    frqTemplate ? createEditorFrqsFromTemplate(frqTemplate) : [],
+  const initialState = useRef(buildInitialState(frqTemplate)).current;
+
+  const [title, setTitle] = useState(initialState.title);
+  const [description, setDescription] = useState<QuestionInput>(
+    initialState.description,
   );
-  const [currentFrqIndex, setCurrentFrqIndex] = useState(0);
-  const batchName = getBatchName(frqTemplate);
-  const batchVisibility = getBatchVisibility(frqTemplate);
-  const [timeLimitMinutes, setTimeLimitMinutes] = useState(() =>
-    getInitialTimeLimit(frqTemplate),
+  const [questions, setQuestions] = useState<EditorQuestion[]>(
+    initialState.questions,
   );
+  const [timeLimitMinutes, setTimeLimitMinutes] = useState(
+    initialState.timeLimitMinutes,
+  );
+  const [isPublic, setIsPublic] = useState(initialState.isPublic);
 
-  const goToPreviousFrq = () => {
-    setCurrentFrqIndex((index) => Math.max(index - 1, 0));
-  };
-
-  const goToNextFrq = () => {
-    setCurrentFrqIndex((index) => Math.min(index + 1, frqs.length - 1));
-  };
-
-  const updateCurrentFrq = (updater: (frq: EditorFRQ) => EditorFRQ) => {
-    setFrqs((currentFrqs) =>
-      currentFrqs.map((frq, index) =>
-        index === currentFrqIndex ? updater(frq) : frq,
-      ),
-    );
-  };
+  const [saveState, setSaveState] = useState<SaveState>("idle");
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [savedSignature, setSavedSignature] = useState(() =>
+    JSON.stringify(buildTemplatePayload(initialState)),
+  );
 
-  const createFrq = () => {
-    const newFrq = createBlankEditorFrq(frqs.length + 1);
+  const currentPayload = useMemo(
+    () =>
+      buildTemplatePayload({
+        title,
+        description,
+        questions,
+        timeLimitMinutes,
+        isPublic,
+      }),
+    [title, description, questions, timeLimitMinutes, isPublic],
+  );
 
-    setFrqs((currentFrqs) => [...currentFrqs, newFrq]);
-    setCurrentFrqIndex(frqs.length);
-  };
+  const hasUnsavedChanges = JSON.stringify(currentPayload) !== savedSignature;
 
-  const deleteCurrentFrq = () => {
-    if (frqs.length <= 1) {
+  useEffect(() => {
+    if (!hasUnsavedChanges) {
       return;
     }
 
-    const remainingFrqs = frqs.filter(
-      (_frq, index) => index !== currentFrqIndex,
-    );
+    const warnBeforeLeaving = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
 
-    setFrqs(remainingFrqs);
-    setCurrentFrqIndex(Math.min(currentFrqIndex, remainingFrqs.length - 1));
-  };
+    window.addEventListener("beforeunload", warnBeforeLeaving);
 
-  const addQuestion = () => {
-    updateCurrentFrq((frq) => ({
-      ...frq,
-      questions: [...frq.questions, createEditorQuestion()],
-    }));
-  };
+    return () => {
+      window.removeEventListener("beforeunload", warnBeforeLeaving);
+    };
+  }, [hasUnsavedChanges]);
 
   const updateQuestion = (
     questionId: string,
     updater: (question: EditorQuestion) => EditorQuestion,
   ) => {
-    updateCurrentFrq((frq) => ({
-      ...frq,
-      questions: frq.questions.map((question) =>
+    setQuestions((currentQuestions) =>
+      currentQuestions.map((question) =>
         question.id === questionId ? updater(question) : question,
       ),
-    }));
+    );
+  };
+
+  const addQuestion = () => {
+    setQuestions((currentQuestions) => [
+      ...currentQuestions,
+      createEditorQuestion(),
+    ]);
   };
 
   const deleteQuestion = (questionId: string) => {
-    updateCurrentFrq((frq) => ({
-      ...frq,
-      questions: frq.questions.filter((question) => question.id !== questionId),
-    }));
+    setQuestions((currentQuestions) =>
+      currentQuestions.filter((question) => question.id !== questionId),
+    );
   };
 
   const addCriterion = (questionId: string) => {
@@ -311,11 +234,7 @@ const FRQEditorRenderer = ({
       ...question,
       criteria: [
         ...question.criteria,
-        {
-          id: makeId("criterion"),
-          description: "",
-          points: 1,
-        },
+        { id: makeId("criterion"), description: "", points: 1 },
       ],
     }));
   };
@@ -323,7 +242,7 @@ const FRQEditorRenderer = ({
   const updateCriterion = (
     questionId: string,
     criterionId: string,
-    changes: Partial<Pick<GradingCriterion, "description" | "points">>,
+    changes: Partial<Pick<FRQGradingCriterion, "description" | "points">>,
   ) => {
     updateQuestion(questionId, (question) => ({
       ...question,
@@ -342,44 +261,80 @@ const FRQEditorRenderer = ({
     }));
   };
 
-  const currentFrq = frqs[currentFrqIndex];
+  const saveTemplate = useCallback(async () => {
+    if (!frqTemplate?.id) {
+      setSaveState("error");
+      setSaveError("This FRQ has no document to save to.");
+      return;
+    }
 
-  // Read through to the fields the memos actually depend on. AdvancedTextbox
-  // treats its `questions[qIndex]` entry as a stable reference, so these must
-  // keep their identity across unrelated re-renders instead of being rebuilt
-  // fresh every time the parent renders. Both memos sit above the early returns
-  // so the hooks stay unconditional.
-  const currentDescription = currentFrq?.description;
-  const currentQuestions = currentFrq?.questions;
+    setSaveState("saving");
+    setSaveError(null);
+
+    try {
+      await updateDoc(
+        getFrqTemplateDocRef(
+          frqTemplate.subject,
+          frqTemplate.unitId,
+          frqTemplate.id,
+        ),
+        { ...currentPayload, updatedAt: serverTimestamp() },
+      );
+
+      // Re-baseline against exactly what was written, so an edit made while the
+      // save was in flight still registers as unsaved.
+      setSavedSignature(JSON.stringify(currentPayload));
+      setSaveState("saved");
+    } catch (error) {
+      // The previous version swallowed this entirely, which is why a
+      // permission-denied rule looked identical to a successful save.
+      console.error("Error saving FRQ template:", error);
+
+      setSaveState("error");
+      setSaveError(
+        error instanceof Error
+          ? error.message
+          : "Unknown error while saving this FRQ.",
+      );
+    }
+  }, [currentPayload, frqTemplate]);
 
+  // AdvancedTextbox treats its `questions[qIndex]` entry as a stable reference,
+  // so these must keep identity across unrelated re-renders instead of being
+  // rebuilt fresh. Both memos sit above the early return so hooks stay
+  // unconditional.
   const descriptionQuestions = useMemo(
-    () =>
-      currentDescription ? [createDescriptionQuestion(currentDescription)] : [],
-    [currentDescription],
+    () => [createQuestionData(description)],
+    [description],
   );
 
   const questionFormats = useMemo(
-    () => currentQuestions?.map((question) => question.questionData) ?? [],
-    [currentQuestions],
+    () => questions.map((question) => question.questionData),
+    [questions],
   );
 
-  if (!frqFound || !currentFrq) {
+  const totalPoints = questions.reduce(
+    (total, question) =>
+      total +
+      getQuestionPoints({
+        id: question.id,
+        title: "",
+        criteria: question.criteria,
+      }),
+    0,
+  );
+
+  if (!frqFound || !frqTemplate) {
     return <div>Failed to load FRQ.</div>;
   }
 
   return (
     <div className="min-h-screen bg-background text-foreground">
       <header className="fixed inset-x-0 top-0 z-50 grid h-16 grid-cols-3 items-center border-b bg-background px-5 shadow-sm">
-        <div>
-          <Button
-            type="button"
-            variant="outline"
-            disabled
-            title="Preview is not implemented yet"
-          >
-            <Eye className="mr-2 size-4" />
-            Preview
-          </Button>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-muted-foreground">
+            {formatPoints(totalPoints)} total
+          </span>
         </div>
 
         <div className="flex items-center justify-center gap-2">
@@ -400,14 +355,32 @@ const FRQEditorRenderer = ({
           <span className="text-sm text-muted-foreground">minutes</span>
         </div>
 
-        <div className="justify-self-end">
+        <div className="flex items-center justify-end gap-3">
+          {saveState === "saved" && !hasUnsavedChanges && (
+            <span className="text-sm text-green-700">Saved</span>
+          )}
+
+          {saveState === "error" && (
+            <span
+              className="max-w-64 truncate text-sm text-destructive"
+              title={saveError ?? undefined}
+            >
+              {saveError}
+            </span>
+          )}
+
           <Button
             type="button"
-            disabled
-            title="Saving to Firestore is not implemented yet"
+            onClick={() => void saveTemplate()}
+            disabled={saveState === "saving" || !hasUnsavedChanges}
+            title={
+              hasUnsavedChanges
+                ? "Save this FRQ"
+                : "No changes to save"
+            }
           >
             <Save className="mr-2 size-4" />
-            Save Changes
+            {saveState === "saving" ? "Saving..." : "Save Changes"}
           </Button>
         </div>
       </header>
@@ -416,10 +389,6 @@ const FRQEditorRenderer = ({
         <div className="grid h-full grid-cols-1 overflow-y-auto lg:grid-cols-2 lg:overflow-hidden">
           <section className="min-h-0 overflow-y-auto border-b p-6 lg:border-b-0 lg:border-r">
             <div className="mb-6">
-              <p className="text-sm font-medium text-muted-foreground">
-                FRQ {currentFrqIndex + 1} of {frqs.length}
-              </p>
-
               <label
                 htmlFor="frq-title"
                 className="mt-4 block text-sm font-medium"
@@ -428,27 +397,34 @@ const FRQEditorRenderer = ({
               </label>
               <Input
                 id="frq-title"
-                value={currentFrq.title}
-                onChange={(event) =>
-                  updateCurrentFrq((frq) => ({
-                    ...frq,
-                    title: event.target.value,
-                  }))
-                }
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
                 className="mt-2 max-w-md text-base font-semibold"
               />
+
+              <div className="mt-4 flex items-center gap-2">
+                <input
+                  id="frq-visibility"
+                  type="checkbox"
+                  checked={isPublic}
+                  onChange={(event) => setIsPublic(event.target.checked)}
+                />
+                <label htmlFor="frq-visibility" className="text-sm font-medium">
+                  Visible to students
+                </label>
+              </div>
             </div>
 
             <div>
               <h1 className="text-xl font-semibold">FRQ Description</h1>
               <p className="mt-1 text-sm text-muted-foreground">
                 Add the source material and directions students need for this
-                FRQ.
+                FRQ. This is what students see beside the response box.
               </p>
 
               <div className="mt-4">
                 <AdvancedTextbox
-                  key={`${currentFrq.id}-description`}
+                  key={`${frqTemplate.id}-description`}
                   questions={descriptionQuestions}
                   setQuestions={(updatedQuestions) => {
                     const updatedDescription = updatedQuestions[0]?.question;
@@ -457,10 +433,7 @@ const FRQEditorRenderer = ({
                       return;
                     }
 
-                    updateCurrentFrq((frq) => ({
-                      ...frq,
-                      description: updatedDescription,
-                    }));
+                    setDescription(updatedDescription);
                   }}
                   origin="question"
                   qIndex={0}
@@ -475,7 +448,7 @@ const FRQEditorRenderer = ({
               <div>
                 <h2 className="text-xl font-semibold">Questions</h2>
                 <p className="mt-1 text-sm text-muted-foreground">
-                  {currentFrq.questions.length} questions in this FRQ
+                  {questions.length} questions in this FRQ
                 </p>
               </div>
 
@@ -490,15 +463,15 @@ const FRQEditorRenderer = ({
             </div>
 
             <Accordion
-              key={currentFrq.id}
               type="multiple"
-              defaultValue={currentFrq.questions.map((question) => question.id)}
+              defaultValue={questions.map((question) => question.id)}
               className="space-y-4"
             >
-              {currentFrq.questions.map((question, questionIndex) => (
+              {questions.map((question, questionIndex) => (
                 <AccordionItem
                   key={question.id}
                   value={question.id}
+                  data-frq-part={question.id}
                   className="rounded-lg border bg-background px-4 shadow-sm"
                 >
                   <AccordionTrigger
@@ -508,7 +481,7 @@ const FRQEditorRenderer = ({
                     <div className="flex flex-1 items-center justify-between pr-3">
                       <span className="flex items-center gap-2">
                         <span className="font-semibold">
-                          {getSubquestionLabel(currentFrqIndex, questionIndex)}
+                          {getPartLabel(questionIndex)}
                         </span>
 
                         {question.status === "legacy" && (
@@ -518,7 +491,13 @@ const FRQEditorRenderer = ({
                         )}
                       </span>
                       <span className="text-sm font-normal text-muted-foreground">
-                        {formatPoints(getQuestionPoints(question))}
+                        {formatPoints(
+                          getQuestionPoints({
+                            id: question.id,
+                            title: "",
+                            criteria: question.criteria,
+                          }),
+                        )}
                       </span>
                     </div>
                   </AccordionTrigger>
@@ -574,14 +553,14 @@ const FRQEditorRenderer = ({
                               variant="outline"
                               className="mt-2 w-full justify-between"
                             >
-                              {question.inputType === "text"
+                              {question.answerType === "text"
                                 ? "Text"
                                 : "Equation"}
                             </Button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="start">
                             <DropdownMenuRadioGroup
-                              value={question.inputType}
+                              value={question.answerType}
                               onValueChange={(value) => {
                                 if (value !== "text" && value !== "equation") {
                                   return;
@@ -591,7 +570,7 @@ const FRQEditorRenderer = ({
                                   question.id,
                                   (currentQuestion) => ({
                                     ...currentQuestion,
-                                    inputType: value,
+                                    answerType: value,
                                   }),
                                 );
                               }}
@@ -674,8 +653,8 @@ const FRQEditorRenderer = ({
 
                         <PopoverContent align="start" className="w-72 text-sm">
                           A question&apos;s point total is calculated from its
-                          grading criteria. Set its response type and status
-                          above.
+                          grading criteria. Graders award points against these
+                          exact lines.
                         </PopoverContent>
                       </Popover>
 
@@ -698,7 +677,8 @@ const FRQEditorRenderer = ({
 
                       {question.criteria.length === 0 ? (
                         <p className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
-                          No grading criteria have been added.
+                          No grading criteria have been added. A question with
+                          no criteria is worth zero points.
                         </p>
                       ) : (
                         question.criteria.map((criterion, criterionIndex) => (
@@ -770,18 +750,16 @@ const FRQEditorRenderer = ({
       </main>
 
       <FRQEditorFooter
-        frqs={frqs}
-        currentFrqIndex={currentFrqIndex}
-        batchName={batchName}
-        batchVisibility={batchVisibility}
-        onCreateFrq={createFrq}
-        onDeleteFrq={deleteCurrentFrq}
-        onSelectFrq={setCurrentFrqIndex}
-        onPrevious={goToPreviousFrq}
-        onNext={goToNextFrq}
+        parts={questions.map((question, index) => ({
+          id: question.id,
+          label: getPartLabel(index),
+        }))}
+        frqName={title.trim() || "Untitled FRQ"}
+        visibility={isPublic ? "public" : "private"}
+        hasUnsavedChanges={hasUnsavedChanges}
       />
     </div>
   );
 };
 
-export default FRQEditorRenderer;
\ No newline at end of file
+export default FRQEditorRenderer;
diff --git a/src/components/frq/testRenderer.tsx b/src/components/frq/testRenderer.tsx
index 1e169094..404a4e0d 100644
--- a/src/components/frq/testRenderer.tsx
+++ b/src/components/frq/testRenderer.tsx
@@ -1,82 +1,132 @@
 "use client";
 
+import { RenderContent } from "@/components/article-creator/custom_questions/RenderAdvancedTextbox";
 import { useUser } from "@/components/hooks/UserContext";
 import FRQFooter from "@/components/frq/FRQFooter";
 import FRQResponseEditor from "@/components/frq/responseEditor";
 import { getUngradedFrqsCollectionRef } from "@/lib/firestore/frqRefs";
+import {
+  DEFAULT_TIME_LIMIT_MINUTES,
+  getPartLabel,
+  getStudentFacingQuestions,
+  hasResponseText,
+  toQuestionInput,
+} from "@/lib/frq/template";
+import type { FRQTemplate } from "@/types/frq";
 import { addDoc, serverTimestamp } from "firebase/firestore";
 import { Bookmark, LogOut } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 type FRQTestRendererProps = {
-  frq: Record<string, unknown> | null;
+  template: FRQTemplate | null;
   loading?: boolean;
   error?: string | null;
 };
 
-type FRQQuestion = {
-  id: string;
-  title: string;
-};
+/**
+ * Answers live in localStorage until they are submitted. A refresh, a closed
+ * laptop, or a stray back-navigation used to lose the whole attempt, and there
+ * is no server-side draft store to write to.
+ */
+const getDraftKey = (templateId: string, studentId: string) =>
+  `frq-draft:${templateId}:${studentId}`;
+
+const readDraft = (draftKey: string): Record<string, string> => {
+  try {
+    const stored = window.localStorage.getItem(draftKey);
 
-const mockFRQs: FRQQuestion[] = [
-  { id: "mock-demographic-transition", title: "Demographic Transition Model" },
-  { id: "mock-urban-land-use", title: "Urban Land Use" },
-  { id: "mock-agricultural-regions", title: "Agricultural Regions" },
-];
-const emptyQuestions: FRQQuestion[] = [];
+    if (!stored) {
+      return {};
+    }
 
-const isTemplateQuestion = (value: unknown): value is FRQQuestion =>
-  typeof value === "object" &&
-  value !== null &&
-  typeof (value as FRQQuestion).id === "string" &&
-  typeof (value as FRQQuestion).title === "string";
+    const parsed: unknown = JSON.parse(stored);
+
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+      return {};
+    }
+
+    return Object.fromEntries(
+      Object.entries(parsed).filter(
+        (entry): entry is [string, string] => typeof entry[1] === "string",
+      ),
+    );
+  } catch {
+    // A corrupt or unreadable draft must not block the student from starting.
+    return {};
+  }
+};
 
 const FRQTestRenderer = ({
-  frq,
+  template,
   loading = false,
   error = null,
 }: FRQTestRendererProps) => {
   const router = useRouter();
   const { user } = useUser();
+
+  const questions = useMemo(
+    () => (template ? getStudentFacingQuestions(template) : []),
+    [template],
+  );
+
   const [submitting, setSubmitting] = useState(false);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
   const [currentFRQIndex, setCurrentFRQIndex] = useState(0);
-  const templateQuestions = useMemo<FRQQuestion[] | null>(
-    () => (Array.isArray(frq?.questions) ? frq.questions : null),
-    [frq],
-  );
-  const hasInvalidTemplateQuestions =
-    templateQuestions !== null &&
-    (templateQuestions.length === 0 ||
-      !templateQuestions.every(isTemplateQuestion));
-  const questions = hasInvalidTemplateQuestions
-    ? emptyQuestions
-    : (templateQuestions ?? mockFRQs);
   const [responses, setResponses] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    setResponses((currentResponses) =>
-      Object.fromEntries(
-        questions.map((question) => [
-          question.id,
-          currentResponses[question.id] ?? "",
-        ]),
-      ),
-    );
-    setCurrentFRQIndex(0);
-  }, [questions]);
   const [markedForReview, setMarkedForReview] = useState<
     Record<number, boolean>
   >({});
 
-  const [timeRemaining, setTimeRemaining] = useState(1 * 60 * 60 + 30 * 60);
+  const [timeRemaining, setTimeRemaining] = useState(
+    () => (template?.timeLimitMinutes ?? DEFAULT_TIME_LIMIT_MINUTES) * 60,
+  );
   const [timerHidden, setTimerHidden] = useState(false);
   const [showTimeUpPopup, setShowTimeUpPopup] = useState(false);
   const [showReviewPage, setShowReviewPage] = useState(false);
   const [showSubmissionModal, setShowSubmissionModal] = useState(false);
 
+  const templateId = template?.id ?? "";
+  const studentId = user?.uid ?? "";
+  const draftKey =
+    templateId && studentId ? getDraftKey(templateId, studentId) : "";
+
+  // Seed responses from the saved draft, then keep every question id present so
+  // the review grid and submission payload never have holes.
+  useEffect(() => {
+    const draft = draftKey ? readDraft(draftKey) : {};
+
+    setResponses(
+      Object.fromEntries(
+        questions.map((question) => [question.id, draft[question.id] ?? ""]),
+      ),
+    );
+    setCurrentFRQIndex(0);
+  }, [questions, draftKey]);
+
   useEffect(() => {
+    if (!draftKey || hasSubmitted) {
+      return;
+    }
+
+    try {
+      window.localStorage.setItem(draftKey, JSON.stringify(responses));
+    } catch {
+      // A full or disabled localStorage should not interrupt the attempt.
+    }
+  }, [draftKey, responses, hasSubmitted]);
+
+  useEffect(() => {
+    setTimeRemaining(
+      (template?.timeLimitMinutes ?? DEFAULT_TIME_LIMIT_MINUTES) * 60,
+    );
+  }, [template?.timeLimitMinutes]);
+
+  useEffect(() => {
+    if (hasSubmitted) {
+      return;
+    }
+
     const timer = window.setInterval(() => {
       setTimeRemaining((currentTime) =>
         currentTime > 0 ? currentTime - 1 : 0,
@@ -86,20 +136,66 @@ const FRQTestRenderer = ({
     return () => {
       window.clearInterval(timer);
     };
-  }, []);
+  }, [hasSubmitted]);
 
   useEffect(() => {
-    if (timeRemaining === 0) {
+    if (timeRemaining === 0 && !hasSubmitted) {
       setShowTimeUpPopup(true);
     }
-  }, [timeRemaining]);
+  }, [timeRemaining, hasSubmitted]);
+
+  const submitForGrading = useCallback(async () => {
+    if (!template?.id || !user) {
+      window.alert("Please sign in before submitting this FRQ for grading.");
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      await addDoc(getUngradedFrqsCollectionRef(), {
+        templateId: template.id,
+        subject: template.subject,
+        unitId: template.unitId,
+        studentId: user.uid,
+        responses,
+        submittedAt: serverTimestamp(),
+      });
+
+      setHasSubmitted(true);
+      setShowSubmissionModal(false);
+      setShowTimeUpPopup(false);
+
+      // Only clear the draft once the write has actually landed, so a failed
+      // submission still leaves the student's work recoverable.
+      if (draftKey) {
+        try {
+          window.localStorage.removeItem(draftKey);
+        } catch {
+          // Nothing to do: the submission already succeeded.
+        }
+      }
+
+      window.alert("Your FRQ was submitted for grading.");
+    } catch (submissionError) {
+      console.error("Error submitting FRQ for grading:", submissionError);
+
+      window.alert(
+        submissionError instanceof Error
+          ? `We could not submit your FRQ: ${submissionError.message}`
+          : "We could not submit your FRQ. Please try again.",
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  }, [draftKey, responses, template, user]);
 
   const formattedTime = `${Math.floor(timeRemaining / 3600)}:${String(
     Math.floor((timeRemaining % 3600) / 60),
   ).padStart(2, "0")}:${String(timeRemaining % 60).padStart(2, "0")}`;
 
   const currentFRQ = questions[currentFRQIndex];
-  const hasBackendData = Boolean(frq);
+  const testName = template?.title ?? "FRQ";
 
   const handleNext = () => {
     if (currentFRQIndex === questions.length - 1) {
@@ -111,19 +207,28 @@ const FRQTestRenderer = ({
   };
 
   if (loading) {
-    return <p>Loading FRQ test...</p>;
+    return <p className="p-8">Loading FRQ test...</p>;
   }
 
   if (error) {
-    return <p>Failed to load FRQ test.</p>;
+    return <p className="p-8">{error}</p>;
+  }
+
+  if (!template) {
+    return <p className="p-8">FRQ test not found.</p>;
   }
 
-  if (hasInvalidTemplateQuestions) {
-    return <p>This FRQ template has invalid question identifiers.</p>;
+  if (questions.length === 0) {
+    return (
+      <p className="p-8">
+        This FRQ has no questions yet. Check back once a porter has finished
+        writing it.
+      </p>
+    );
   }
 
   if (!currentFRQ) {
-    return <p>FRQ test not found.</p>;
+    return <p className="p-8">FRQ test not found.</p>;
   }
 
   const timeUpModal = showTimeUpPopup ? (
@@ -153,18 +258,17 @@ const FRQTestRenderer = ({
 
           <button
             type="button"
-            className="rounded bg-blue-700 px-4 py-2 font-semibold text-white"
-            onClick={() => {
-              setShowTimeUpPopup(false);
-              window.alert("Final submission will be connected later.");
-            }}
+            className="rounded bg-blue-700 px-4 py-2 font-semibold text-white disabled:opacity-50"
+            disabled={submitting}
+            onClick={() => void submitForGrading()}
           >
-            Submit Test
+            {submitting ? "Submitting..." : "Submit Test"}
           </button>
         </div>
       </div>
     </div>
   ) : null;
+
   const downloadResponsesAsPdf = () => {
     const printWindow = window.open("", "_blank", "width=900,height=700");
 
@@ -183,7 +287,7 @@ const FRQTestRenderer = ({
 
     const printDocument = printWindow.document;
 
-    printDocument.title = "FRQ Responses";
+    printDocument.title = `${testName} Responses`;
     printDocument.head.replaceChildren();
     printDocument.body.replaceChildren();
 
@@ -221,7 +325,7 @@ const FRQTestRenderer = ({
     printDocument.head.appendChild(styleElement);
 
     const pageTitle = printDocument.createElement("h1");
-    pageTitle.textContent = "AP Human Geography FRQ Responses";
+    pageTitle.textContent = `${testName} Responses`;
     printDocument.body.appendChild(pageTitle);
 
     questions.forEach((question, index) => {
@@ -229,7 +333,7 @@ const FRQTestRenderer = ({
       section.className = "response";
 
       const heading = printDocument.createElement("h2");
-      heading.textContent = `FRQ ${index + 1}: ${question.title}`;
+      heading.textContent = `Part ${getPartLabel(index)}`;
 
       const responseText = printDocument.createElement("p");
       responseText.textContent = getPlainText(responses[question.id] ?? "");
@@ -245,38 +349,6 @@ const FRQTestRenderer = ({
     }, 250);
   };
 
-  const submitForGrading = async () => {
-    const templateId = typeof frq?.id === "string" ? frq.id : null;
-    const subject = typeof frq?.subject === "string" ? frq.subject : null;
-    const unitId = typeof frq?.unitId === "string" ? frq.unitId : null;
-
-    if (!user || !templateId || !subject || !unitId) {
-      window.alert("Please sign in before submitting this FRQ for grading.");
-      return;
-    }
-
-    setSubmitting(true);
-
-    try {
-      await addDoc(getUngradedFrqsCollectionRef(), {
-        templateId,
-        subject,
-        unitId,
-        studentId: user.uid,
-        responses,
-        submittedAt: serverTimestamp(),
-      });
-
-      setShowSubmissionModal(false);
-      window.alert("Your FRQ was submitted for grading.");
-    } catch (submissionError) {
-      console.error("Error submitting FRQ for grading:", submissionError);
-      window.alert("We could not submit your FRQ. Please try again.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
   const submissionModal = showSubmissionModal ? (
     <div
       className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
@@ -313,7 +385,7 @@ const FRQTestRenderer = ({
 
           <button
             type="button"
-            className="rounded bg-blue-700 px-5 py-3 font-semibold text-white"
+            className="rounded bg-blue-700 px-5 py-3 font-semibold text-white disabled:opacity-50"
             onClick={() => void submitForGrading()}
             disabled={submitting}
           >
@@ -332,6 +404,27 @@ const FRQTestRenderer = ({
     </div>
   ) : null;
 
+  if (hasSubmitted) {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-center gap-4 bg-gray-50 px-6 text-black">
+        <h1 className="text-4xl font-bold">Test submitted</h1>
+
+        <p className="max-w-md text-center text-gray-600">
+          Your responses for {testName} are in the grading queue. You will be
+          able to see your score and feedback once a grader has reviewed them.
+        </p>
+
+        <button
+          type="button"
+          className="rounded-full bg-blue-700 px-6 py-3 font-semibold text-white"
+          onClick={() => router.back()}
+        >
+          Return to the unit
+        </button>
+      </main>
+    );
+  }
+
   if (showReviewPage) {
     return (
       <main className="min-h-screen bg-gray-50 px-6 py-12 text-black">
@@ -342,7 +435,7 @@ const FRQTestRenderer = ({
 
           <div className="mx-auto mt-6 max-w-2xl space-y-0.5 text-center text-base leading-5">
             <p>Review your responses before submitting your test.</p>
-            <p>Select an FRQ number to return to that question.</p>
+            <p>Select a part to return to that question.</p>
           </div>
 
           <section className="mt-8 rounded-xl bg-white p-8 shadow-lg">
@@ -370,14 +463,7 @@ const FRQTestRenderer = ({
 
             <div className="mt-8 flex flex-wrap items-center justify-start gap-10 py-6 pl-6">
               {questions.map((question, index) => {
-                const response = responses[question.id] ?? "";
-
-                const isAnswered =
-                  response
-                    .replace(/<[^>]*>/g, "")
-                    .replace(/&nbsp;/g, " ")
-                    .trim().length > 0;
-
+                const isAnswered = hasResponseText(responses[question.id]);
                 const isMarked = markedForReview[index] ?? false;
 
                 return (
@@ -394,7 +480,7 @@ const FRQTestRenderer = ({
                       setShowReviewPage(false);
                     }}
                   >
-                    {index + 1}
+                    {getPartLabel(index)}
 
                     {isMarked && (
                       <Bookmark
@@ -434,11 +520,12 @@ const FRQTestRenderer = ({
   return (
     <main className="min-h-screen w-full bg-white text-black">
       {timeUpModal}
+      {submissionModal}
       <section className="flex min-h-screen w-full flex-col border-4 border-black">
         <header className="relative flex items-start justify-between px-6 py-3">
           <div>
-            <p className="text-sm font-bold">Section I</p>
-            <p className="text-xs">Directions ▾</p>
+            <p className="text-sm font-bold">Section II</p>
+            <p className="text-xs">Free response</p>
           </div>
 
           <div className="text-center">
@@ -475,65 +562,21 @@ const FRQTestRenderer = ({
         </header>
 
         <div className="grid flex-1 grid-cols-1 lg:grid-cols-2">
-          <section className="border-b-2 border-solid border-gray-500 p-8 lg:border-b-0 lg:border-r-[3px]">
-            <div className="mb-6 text-xs text-gray-600">
-              {hasBackendData ? "FRQ data loaded" : "Using mock FRQ content"}
-            </div>
-
-            <div className="mb-8">
-              <div className="mx-auto flex h-80 max-w-md items-end justify-center gap-1 border-b border-l border-gray-300 border-gray-300 px-6">
-                {Array.from({ length: 17 }).map((_, index) => (
-                  <div
-                    key={`left-bar-${index}`}
-                    className="bg-sky-500"
-                    style={{
-                      height: `${40 + Math.abs(8 - index) * 10}px`,
-                      width: "10px",
-                    }}
-                  />
-                ))}
-                {Array.from({ length: 17 }).map((_, index) => (
-                  <div
-                    key={`right-bar-${index}`}
-                    className="bg-pink-400"
-                    style={{
-                      height: `${40 + Math.abs(index - 8) * 10}px`,
-                      width: "10px",
-                    }}
-                  />
-                ))}
-              </div>
-              <p className="mt-3 text-center text-sm">Figure 1</p>
-              <p className="mt-2 text-xs italic">
-                Source: populationpyramid.net
-              </p>
-            </div>
-
-            <div className="mx-auto max-w-lg">
-              <p className="mb-4 text-center text-sm font-bold">
-                DEMOGRAPHIC TRANSITION MODEL
-              </p>
-              <div className="relative h-44 border border-gray-300">
-                <div className="absolute left-6 right-6 top-12 h-0.5 bg-black" />
-                <div className="absolute left-6 right-6 top-24 border-t-2 border-solid border-gray-500" />
-                <div className="absolute left-6 top-10 h-20 w-72 rounded-br-full border-b-4 border-r-4 border-black" />
-                <div className="absolute bottom-2 left-8 right-8 flex justify-between text-xs text-gray-600">
-                  <span>Stage 1</span>
-                  <span>Stage 2</span>
-                  <span>Stage 3</span>
-                  <span>Stage 4</span>
-                  <span>Stage 5</span>
-                </div>
-              </div>
-              <p className="mt-3 text-center text-sm">Figure 2</p>
-            </div>
+          <section className="overflow-y-auto border-b-2 border-solid border-gray-500 p-8 lg:border-b-0 lg:border-r-[3px]">
+            <RenderContent
+              content={toQuestionInput(
+                template.directions,
+                template.directionsFiles,
+              )}
+              origin="question"
+            />
           </section>
 
           <section className="p-8">
             <div className="mb-6 w-full max-w-[50rem] bg-gray-100">
               <div className="flex h-8 items-center">
                 <span className="flex h-8 w-8 items-center justify-center bg-black text-lg font-bold text-white">
-                  {currentFRQIndex + 1}
+                  {getPartLabel(currentFRQIndex)}
                 </span>
 
                 <button
@@ -565,65 +608,27 @@ const FRQTestRenderer = ({
                   <span>Mark for Review</span>
                 </button>
               </div>
-
-              <div className="flex h-1 w-full gap-1">
-                <div className="flex-1 bg-blue-600" />
-                <div className="flex-1 bg-red-300" />
-                <div className="flex-1 bg-green-300" />
-                <div className="flex-1 bg-emerald-300" />
-                <div className="flex-1 bg-pink-300" />
-                <div className="flex-1 bg-purple-500" />
-                <div className="flex-1 bg-lime-300" />
-                <div className="flex-1 bg-cyan-500" />
-                <div className="flex-1 bg-indigo-400" />
-                <div className="flex-1 bg-fuchsia-500" />
-                <div className="flex-1 bg-teal-300" />
-                <div className="flex-1 bg-orange-500" />
-                <div className="flex-1 bg-red-500" />
-                <div className="flex-1 bg-sky-400" />
-                <div className="flex-1 bg-green-400" />
-              </div>
             </div>
 
-            <p className="mb-4 font-sans text-sm">
-              The <strong>{currentFRQ.title}</strong> can be used to theorize
-              changes in a country&apos;s total population over time.
-            </p>
-
-            <ol className="mb-6 list-[upper-alpha] space-y-2 pl-6 font-sans text-sm leading-relaxed">
-              <li>
-                Identify the stage of the model that this country is most likely
-                in.
-              </li>
-              <li>
-                Explain one social cause of the transition between two stages.
-              </li>
-              <li>Define the term post-industrial society.</li>
-              <li>
-                Explain one change in the birth rate or death rate shown in the
-                model.
-              </li>
-              <li>
-                Describe how economic development can affect population growth.
-              </li>
-              <li>
-                Explain one factor that may contribute to a country&apos;s aging
-                population.
-              </li>
-              <li>Explain how migration may influence population trends.</li>
-            </ol>
+            <div className="mb-4 font-sans text-sm">
+              <RenderContent
+                content={toQuestionInput(
+                  currentFRQ.prompt,
+                  currentFRQ.promptFiles,
+                )}
+                origin="question"
+              />
+            </div>
 
             <div className="w-full max-w-[50rem]">
               <FRQResponseEditor
-                ariaLabel={`Response for FRQ ${currentFRQIndex + 1}`}
+                ariaLabel={`Response for part ${getPartLabel(currentFRQIndex)}`}
                 value={responses[currentFRQ.id] ?? ""}
                 onChange={(newResponse) => {
-                  setResponses((currentResponses) => {
-                    return {
-                      ...currentResponses,
-                      [currentFRQ.id]: newResponse,
-                    };
-                  });
+                  setResponses((currentResponses) => ({
+                    ...currentResponses,
+                    [currentFRQ.id]: newResponse,
+                  }));
                 }}
               />
             </div>
@@ -631,7 +636,7 @@ const FRQTestRenderer = ({
         </div>
 
         <FRQFooter
-          testName="AP Human Geography Practice Exam 1"
+          testName={testName}
           currentFrqIndex={currentFRQIndex}
           totalFrqs={questions.length}
           onPrevious={() => {
diff --git a/src/components/global/frqFooter.tsx b/src/components/global/frqFooter.tsx
deleted file mode 100644
index 906f4849..00000000
--- a/src/components/global/frqFooter.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import { ChevronLeft, ChevronRight, ChevronUp, MapPin, X } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
-import { useState } from "react";
-
-
-interface FooterProps {
-  testName: string;
-  currentFrqIndex: number;
-  totalFrqs: number;
-  onPrevious: () => void;
-  onNext: () => void;
-  onJumpToFrq: (index: number) => void;
-}
-
-export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious, onNext, onJumpToFrq,}: FooterProps) {
-  const [navigationOpen, setNavigationOpen] = useState(false);
-
-  return (
-    <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
-      <p className="font-semibold">{testName}</p>
-
-      <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2">
-        <button
-          onClick={onPrevious}
-          className="rounded-md bg-black p-2 text-white"
-        >
-          <ChevronLeft className="size-5" />
-        </button>
-
-        <Popover open={navigationOpen} onOpenChange={setNavigationOpen}>
-            <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white">
-                Question {currentFrqIndex + 1} of {totalFrqs}
-                <ChevronUp className="size-4" />
-            </PopoverTrigger>
-
-            <PopoverContent className="w-[480px] p-0">
-              <div className="rounded-md bg-white">
-                <div className="relative px-8 py-5 text-center">
-                  <h2 className="text-xl font-bold">{testName} Questions</h2>
-
-              <button
-                type="button"
-                aria-label="Close question navigation"
-                onClick={() => setNavigationOpen(false)}
-                className="absolute right-5 top-5"
-              >
-                <X className="size-5" />
-              </button>
-                </div>
-
-                <div className="border-t border-gray-300" />
-
-                <div className="px-8 py-8">
-                  <div className="grid grid-cols-6 gap-x-5 gap-y-8">
-                    {Array.from({ length: totalFrqs }).map((_, index) => (
-                      <button
-                        key={index}
-                        onClick={() => {onJumpToFrq(index); setNavigationOpen(false);}}                        
-                        className="relative flex size-10 items-center justify-center border-2 border-transparent bg-[#294ad1] text-base font-bold text-white"
-                      >
-                        {index + 1}
-
-                        {index === currentFrqIndex && (
-                          <MapPin className="absolute -top-7 size-5 fill-white stroke-black" />
-                        )}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </PopoverContent>
-            </Popover>
-
-        <button onClick={onNext} className="rounded-md bg-black p-2 text-white">
-          <ChevronRight className="size-5" />
-        </button>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onPrevious}
-          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white"
-        >
-          Back
-        </button>
-
-        <button
-          onClick={onNext}
-          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white"
-        >
-          Next
-        </button>
-      </div>
-    </footer>
-  );
-}
diff --git a/src/components/subject/subject-sidebar.tsx b/src/components/subject/subject-sidebar.tsx
index 80ec007e..1e0c341a 100644
--- a/src/components/subject/subject-sidebar.tsx
+++ b/src/components/subject/subject-sidebar.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { BookDashed, BookOpenCheck, ChevronsLeft } from "lucide-react";
+import { BookDashed, BookOpenCheck, ChevronsLeft, PenLine } from "lucide-react";
 import {
   Accordion,
   AccordionContent,
@@ -142,6 +142,40 @@ const SubjectSidebar = (props: Props) => {
                       </p>
                     </Link>
                   ))}
+                  {unit.frqs?.map((frq, frqIndex) => (
+                    <Link
+                      className={cn(
+                        "group mb-3 flex items-center gap-x-1.5 text-sm font-medium last:mb-0",
+                        !props.preview &&
+                          !frq.isPublic &&
+                          "pointer-events-none opacity-70",
+                      )}
+                      aria-disabled={!props.preview && !frq.isPublic}
+                      tabIndex={!props.preview && !frq.isPublic ? -1 : undefined}
+                      href={`${pathname.split("/").slice(0, 3).join("/")}/unit-${uNum}-${unit.id}/frq/${frq.id}`}
+                      key={frq.id}
+                    >
+                      <PenLine
+                        className={cn(
+                          "size-6 shrink-0",
+                          !frq.isPublic && "opacity-70",
+                        )}
+                      />
+                      <span className="text-balance group-hover:underline">
+                        {frq.title
+                          ? frq.title
+                          : `Unit ${uNum} FRQ ${unit.frqs && unit.frqs.length > 1 ? ` ${frqIndex + 1}` : ""}`}
+                      </span>
+                      <p
+                        className={cn(
+                          "ml-auto text-nowrap rounded-full border border-gray-400 px-2 text-xs",
+                          frq.isPublic && "hidden",
+                        )}
+                      >
+                        WIP
+                      </p>
+                    </Link>
+                  ))}
                 </div>
               </AccordionContent>
             </AccordionItem>
diff --git a/src/lib/frq/template.ts b/src/lib/frq/template.ts
new file mode 100644
index 00000000..648bbbda
--- /dev/null
+++ b/src/lib/frq/template.ts
@@ -0,0 +1,193 @@
+import type {
+  FRQAnswerType,
+  FRQGradingCriterion,
+  FRQQuestionStatus,
+  FRQTemplate,
+  FRQTemplateQuestion,
+} from "@/types/frq";
+import type { QuestionFile, QuestionInput } from "@/types/questions";
+
+/** Default minutes on the clock when a template predates the time-limit field. */
+export const DEFAULT_TIME_LIMIT_MINUTES = 90;
+
+const asString = (value: unknown): string =>
+  typeof value === "string" ? value : "";
+
+const asRecord = (value: unknown): Record<string, unknown> | null =>
+  typeof value === "object" && value !== null && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+
+/**
+ * Firestore hands back whatever was written, and FRQ documents predate several
+ * schema passes. Every field is therefore re-checked rather than cast, so one
+ * malformed document degrades to an empty prompt instead of crashing the page
+ * that renders it.
+ */
+const normalizeFiles = (value: unknown): QuestionFile[] => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.flatMap((entry): QuestionFile[] => {
+    const record = asRecord(entry);
+
+    if (!record || typeof record.key !== "string") {
+      return [];
+    }
+
+    const file: QuestionFile = {
+      key: record.key,
+      name: asString(record.name) || record.key,
+    };
+
+    if (typeof record.url === "string") file.url = record.url;
+    if (typeof record.id === "string") file.id = record.id;
+    if (typeof record.alt === "string") file.alt = record.alt;
+    if (typeof record.order === "number") file.order = record.order;
+
+    return [file];
+  });
+};
+
+const normalizeCriteria = (value: unknown): FRQGradingCriterion[] => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.flatMap((entry, index): FRQGradingCriterion[] => {
+    const record = asRecord(entry);
+
+    if (!record) {
+      return [];
+    }
+
+    const points = Number(record.points);
+
+    return [
+      {
+        id: asString(record.id) || `criterion-${index}`,
+        description: asString(record.description),
+        // A criterion worth a fraction of a point would make the "x/y points"
+        // summaries on three separate pages disagree, so clamp to whole points.
+        points: Number.isFinite(points) ? Math.max(0, Math.round(points)) : 0,
+      },
+    ];
+  });
+};
+
+const normalizeAnswerType = (value: unknown): FRQAnswerType =>
+  value === "equation" ? "equation" : "text";
+
+const normalizeStatus = (value: unknown): FRQQuestionStatus =>
+  value === "legacy" ? "legacy" : "public";
+
+const normalizeQuestion = (
+  value: unknown,
+  index: number,
+): FRQTemplateQuestion[] => {
+  const record = asRecord(value);
+
+  if (!record) {
+    return [];
+  }
+
+  const id = asString(record.id);
+
+  // A part with no stable id cannot be scored or matched to a response, so it
+  // is dropped rather than given a positional id that would silently rebind to
+  // a different part the next time the author reorders the list.
+  if (!id) {
+    return [];
+  }
+
+  return [
+    {
+      id,
+      title: asString(record.title) || `Part ${index + 1}`,
+      prompt: asString(record.prompt),
+      promptFiles: normalizeFiles(record.promptFiles),
+      answerType: normalizeAnswerType(record.answerType),
+      status: normalizeStatus(record.status),
+      criteria: normalizeCriteria(record.criteria),
+    },
+  ];
+};
+
+/**
+ * Turn a raw Firestore FRQ document into a template every page can trust.
+ * `identity` supplies the values that live in the document path rather than the
+ * document body, so a template still knows where it came from when the stored
+ * `subject`/`unitId` fields are missing.
+ */
+export const normalizeFrqTemplate = (
+  raw: unknown,
+  identity: { id: string; subject: string; unitId: string },
+): FRQTemplate => {
+  const record = asRecord(raw) ?? {};
+  const timeLimit = Number(record.timeLimitMinutes);
+
+  return {
+    id: identity.id,
+    subject: asString(record.subject) || identity.subject,
+    unitId: asString(record.unitId) || identity.unitId,
+    title: asString(record.title) || "Untitled FRQ",
+    directions: asString(record.directions),
+    directionsFiles: normalizeFiles(record.directionsFiles),
+    questions: Array.isArray(record.questions)
+      ? record.questions.flatMap(normalizeQuestion)
+      : [],
+    isPublic: record.isPublic === true,
+    timeLimitMinutes:
+      Number.isFinite(timeLimit) && timeLimit >= 1
+        ? Math.floor(timeLimit)
+        : DEFAULT_TIME_LIMIT_MINUTES,
+  };
+};
+
+export const toQuestionInput = (
+  value: string | undefined,
+  files: QuestionFile[] | undefined,
+): QuestionInput => ({
+  value: value ?? "",
+  files: files ? [...files] : [],
+});
+
+/** Parts a student actually sits. Legacy parts stay readable but unassigned. */
+export const getStudentFacingQuestions = (template: FRQTemplate) =>
+  template.questions.filter((question) => question.status !== "legacy");
+
+export const getQuestionPoints = (question: FRQTemplateQuestion) =>
+  (question.criteria ?? []).reduce(
+    (total, criterion) => total + criterion.points,
+    0,
+  );
+
+export const getTemplatePoints = (questions: FRQTemplateQuestion[]) =>
+  questions.reduce(
+    (total, question) => total + getQuestionPoints(question),
+    0,
+  );
+
+/**
+ * AP-style part label: A, B, C ... then AA, AB past 26 parts rather than
+ * walking off the end of the alphabet into punctuation.
+ */
+export const getPartLabel = (index: number) => {
+  let label = "";
+  let remaining = index;
+
+  do {
+    label = String.fromCharCode(65 + (remaining % 26)) + label;
+    remaining = Math.floor(remaining / 26) - 1;
+  } while (remaining >= 0);
+
+  return label;
+};
+
+/** Strips markup so "did the student write anything" is not fooled by `<p></p>`. */
+export const hasResponseText = (response: string | undefined) =>
+  (response ?? "")
+    .replace(/<[^>]*>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .trim().length > 0;
diff --git a/src/types/frq.ts b/src/types/frq.ts
index 3a76c78a..025d1c83 100644
--- a/src/types/frq.ts
+++ b/src/types/frq.ts
@@ -1,4 +1,38 @@
 import type { Timestamp } from "firebase/firestore";
+import type { QuestionFile } from "@/types/questions";
+
+/** How a student is expected to answer a single FRQ part. */
+export type FRQAnswerType = "text" | "equation";
+
+/**
+ * Whether a part is shown to students. "legacy" parts stay attached to the
+ * template so old submissions still resolve their prompts, but new test takers
+ * never see them.
+ */
+export type FRQQuestionStatus = "public" | "legacy";
+
+/**
+ * One line of a part's rubric. Points are the single source of truth for what a
+ * part is worth: the editor, the grading page, and the student's feedback page
+ * all derive totals by summing these, so none of them can disagree.
+ */
+export interface FRQGradingCriterion {
+  id: string;
+  description: string;
+  points: number;
+}
+
+export interface FRQTemplateQuestion {
+  /** Stable template-local identifier; never derived from display order. */
+  id: string;
+  title: string;
+  /** Authored prompt text. Files referenced by it live in `promptFiles`. */
+  prompt?: string;
+  promptFiles?: QuestionFile[];
+  answerType?: FRQAnswerType;
+  status?: FRQQuestionStatus;
+  criteria?: FRQGradingCriterion[];
+}
 
 /** An admin-authored prompt used by the digital FRQ testing experience. */
 export interface FRQTemplate {
@@ -6,20 +40,21 @@ export interface FRQTemplate {
   subject: string;
   unitId: string;
   title: string;
+  /**
+   * Stimulus and directions shown in the left-hand pane of the test. Stored as
+   * text plus a file list rather than a nested object so that documents written
+   * before the editor could save still load without migration.
+   */
   directions: string;
+  directionsFiles?: QuestionFile[];
   questions: FRQTemplateQuestion[];
   isPublic?: boolean;
+  /** Minutes on the test clock. Absent on templates authored before timing. */
+  timeLimitMinutes?: number;
   createdAt?: Timestamp;
   updatedAt?: Timestamp;
 }
 
-export interface FRQTemplateQuestion {
-  /** Stable template-local identifier; never derived from display order. */
-  id: string;
-  title: string;
-  prompt?: string;
-}
-
 /** A completed digital-test response awaiting staff grading. */
 export interface GradableFRQSubmission {
   id?: string;
@@ -32,10 +67,30 @@ export interface GradableFRQSubmission {
   submittedAt: Timestamp;
 }
 
+/** Points a grader awarded for one rubric line. */
+export interface FRQCriterionScore {
+  criterionId: string;
+  points: number;
+}
+
+/**
+ * A grader's verdict on a single part. Stored per part rather than as one
+ * aggregate blob so the student's feedback page can show which rubric lines
+ * were earned and what the grader said about each part.
+ */
+export interface FRQQuestionGrade {
+  questionId: string;
+  feedback: string;
+  criteria: FRQCriterionScore[];
+}
+
 /** The immutable grading result presented on a student's dashboard. */
 export interface GradedFRQSubmission extends GradableFRQSubmission {
+  /** Human-readable aggregate, e.g. "4/6". Derived from `grades`. */
   score: string;
+  /** Overall comment. Per-part comments live in `grades`. */
   feedback: string;
+  grades: FRQQuestionGrade[];
   graderId: string;
   gradedAt: Timestamp;
   sourceSubmissionId: string;
@@ -58,4 +113,4 @@ export interface FRQSubmission {
   };
 }
 
-export type GradingStatus = "ungraded" | "graded" | "flagged" | "rejected";
\ No newline at end of file
+export type GradingStatus = "ungraded" | "graded" | "flagged" | "rejected";

From 72d16470ed0da45fa1686254097038454809b190 Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Fri, 21 Aug 2026 09:53:55 -0700
Subject: [PATCH 2/3] Point FRQ grading at the collection submissions are
 actually written to

The grading queue read `gradableFrqSubmissions`, a collection name from an
earlier schema pass that nothing writes to, so the queue was permanently
empty no matter how many tests students submitted. The grader view itself
rendered mock data rather than the submission being graded.

- frq-grading list: read `ungraded-frqs`, the collection the student test
  writes to, and resolve templates through their real nested location
  instead of a flat `frqTemplates` collection
- frq-grading list: gate on grader/admin access, so a non-grader sees why
  the queue is empty rather than an unexplained blank page
- frq-grading/[id]: load the real submission and its template
- gradingRenderer: score against the template's rubric and write grades
  back, replacing the mock content

Builds on the data model and rules from the previous PR.
---
 src/app/frq-grading/[id]/page.tsx      | 110 +++-
 src/app/frq-grading/page.tsx           |  90 ++-
 src/components/frq/gradingRenderer.tsx | 880 +++++++++++--------------
 3 files changed, 547 insertions(+), 533 deletions(-)

diff --git a/src/app/frq-grading/[id]/page.tsx b/src/app/frq-grading/[id]/page.tsx
index 8ccc8a9f..c0be8e77 100644
--- a/src/app/frq-grading/[id]/page.tsx
+++ b/src/app/frq-grading/[id]/page.tsx
@@ -1,8 +1,13 @@
 "use client";
 
 import FRQGradingRenderer from "@/components/frq/gradingRenderer";
-import { getUngradedFrqDocRef } from "@/lib/firestore/frqRefs";
-import type { GradableFRQSubmission } from "@/types/frq";
+import { useUser } from "@/components/hooks/UserContext";
+import {
+  getFrqTemplateDocRef,
+  getUngradedFrqDocRef,
+} from "@/lib/firestore/frqRefs";
+import { normalizeFrqTemplate } from "@/lib/frq/template";
+import type { FRQTemplate, GradableFRQSubmission } from "@/types/frq";
 import { getDoc } from "firebase/firestore";
 import { useEffect, useState } from "react";
 
@@ -13,39 +18,100 @@ type PageProps = {
 };
 
 const Page = ({ params }: PageProps) => {
-  const [frq, setFrq] = useState<GradableFRQSubmission | null>(null);
+  const { user, loading: userLoading } = useUser();
+
+  const [submission, setSubmission] = useState<GradableFRQSubmission | null>(
+    null,
+  );
+  const [template, setTemplate] = useState<FRQTemplate | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const canGrade = user?.access === "admin" || user?.access === "grader";
 
   useEffect(() => {
-    const fetchFrq = async () => {
+    if (userLoading || !canGrade) {
+      if (!userLoading) {
+        setIsLoading(false);
+      }
+      return;
+    }
+
+    const fetchSubmissionAndTemplate = async () => {
+      setIsLoading(true);
+      setLoadError(null);
+
       try {
-        const docRef = getUngradedFrqDocRef(params.id);
-        const docSnap = await getDoc(docRef);
-
-        if (docSnap.exists()) {
-          setFrq({
-            id: docSnap.id,
-            ...(docSnap.data() as GradableFRQSubmission),
-          });
-        } else {
-          setFrq(null);
+        const submissionSnapshot = await getDoc(
+          getUngradedFrqDocRef(params.id),
+        );
+
+        if (!submissionSnapshot.exists()) {
+          setLoadError(
+            "This submission is no longer in the queue. It may already have been graded.",
+          );
+          return;
         }
+
+        const loadedSubmission = {
+          id: submissionSnapshot.id,
+          ...(submissionSnapshot.data() as Omit<GradableFRQSubmission, "id">),
+        };
+
+        setSubmission(loadedSubmission);
+
+        // The rubric being graded against lives on the template, not on the
+        // submission, so both have to be in hand before grading can start.
+        const templateSnapshot = await getDoc(
+          getFrqTemplateDocRef(
+            loadedSubmission.subject,
+            loadedSubmission.unitId,
+            loadedSubmission.templateId,
+          ),
+        );
+
+        setTemplate(
+          templateSnapshot.exists()
+            ? normalizeFrqTemplate(templateSnapshot.data(), {
+                id: templateSnapshot.id,
+                subject: loadedSubmission.subject,
+                unitId: loadedSubmission.unitId,
+              })
+            : null,
+        );
       } catch (error) {
-        console.error("Error fetching FRQ:", error);
-        setFrq(null);
+        console.error("Error loading FRQ submission:", error);
+
+        setLoadError(
+          error instanceof Error
+            ? `Could not load this submission: ${error.message}`
+            : "Could not load this submission.",
+        );
       } finally {
         setIsLoading(false);
       }
     };
 
-    void fetchFrq();
-  }, [params.id]);
+    void fetchSubmissionAndTemplate();
+  }, [params.id, userLoading, canGrade]);
+
+  if (userLoading || isLoading) {
+    return <div className="p-8">Loading...</div>;
+  }
+
+  if (!canGrade) {
+    return (
+      <div className="p-8">
+        You need grader or admin access to grade FRQ submissions.
+      </div>
+    );
+  }
 
-  if (isLoading) {
-    return <div>Loading...</div>;
+  if (loadError) {
+    return <div className="p-8">{loadError}</div>;
   }
 
-  return <FRQGradingRenderer frq={frq} />;
+  return <FRQGradingRenderer submission={submission} template={template} />;
 };
 
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/src/app/frq-grading/page.tsx b/src/app/frq-grading/page.tsx
index 6de4f474..287cc688 100644
--- a/src/app/frq-grading/page.tsx
+++ b/src/app/frq-grading/page.tsx
@@ -3,8 +3,13 @@
 import Navbar from "@/components/global/navbar";
 import Footer from "@/components/global/footer";
 import Link from "next/link";
-import { db } from "@/lib/firebase";
-import { deleteDoc, collection, doc, getDoc, getCountFromServer, getDocs, limit, orderBy, query, startAfter, type DocumentData, type QueryDocumentSnapshot, Timestamp } from "firebase/firestore";
+import { useUser } from "@/components/hooks/UserContext";
+import {
+  getFrqTemplateDocRef,
+  getUngradedFrqDocRef,
+  getUngradedFrqsCollectionRef,
+} from "@/lib/firestore/frqRefs";
+import { deleteDoc, getDoc, getCountFromServer, getDocs, limit, orderBy, query, startAfter, type DocumentData, type QueryDocumentSnapshot, Timestamp } from "firebase/firestore";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Trash2, ChevronLeft, ChevronRight } from "lucide-react";
@@ -28,6 +33,12 @@ type PageCursor =
   QueryDocumentSnapshot<DocumentData> | null;
 
 const Page = () => {
+  const { user, loading: userLoading } = useUser();
+
+  // Firestore rules already reject a non-grader's reads, but without this check
+  // the page renders a full, permanently empty queue and gives no hint why.
+  const canGrade = user?.access === "admin" || user?.access === "grader";
+
   const [frqs, setFrqs] = useState<UngradedFrqRow[] | null>(null);
 
   const [frqToDelete, setFrqToDelete] = useState<UngradedFrqRow | null>(null);
@@ -54,10 +65,11 @@ const Page = () => {
     const fetchFrqs = useCallback(async (cursor: PageCursor) => {
       setIsPageLoading(true);
       try {
-        const collectionRef = collection(
-          db,
-          "gradableFrqSubmissions",
-        );
+        // `ungraded-frqs` is the collection the student test actually writes to.
+        // This page previously read `gradableFrqSubmissions`, a name from an
+        // earlier schema pass that nothing has written to since, so the queue
+        // read as permanently empty no matter how many tests were submitted.
+        const collectionRef = getUngradedFrqsCollectionRef();
 
       const pageQuery = cursor
         ? query(
@@ -107,20 +119,27 @@ const Page = () => {
               )
             : {};
 
+          // A submission records where its template lives, so the location no
+          // longer has to be recovered from a flat template collection.
+          const subject =
+            typeof rawData.subject === "string" ? rawData.subject : "";
+          const unitId =
+            typeof rawData.unitId === "string" ? rawData.unitId : "";
+
           let isMalformed =
             templateId === "" ||
             studentId === "" ||
+            subject === "" ||
+            unitId === "" ||
             submittedAt === null ||
             !hasValidResponses;
-          
+
           let frqTitle = "Unknown FRQ";
-          let subject = "Unknown subject";
-          let unitId = "Unknown unit";
 
-          if (templateId !== "") {
+          if (!isMalformed) {
             try {
               const templateSnapshot = await getDoc(
-                doc(db, "frqTemplates", templateId),
+                getFrqTemplateDocRef(subject, unitId, templateId),
               );
 
               if (templateSnapshot.exists()) {
@@ -131,18 +150,6 @@ const Page = () => {
                 } else {
                   isMalformed = true;
                 }
-
-                if (typeof templateData.subject === "string") {
-                  subject = templateData.subject;
-                } else {
-                  isMalformed = true;
-                }
-
-                if (typeof templateData.unitId === "string") {
-                  unitId = templateData.unitId;
-                } else {
-                  isMalformed = true;
-                }
               } else {
                 isMalformed = true;
               }
@@ -163,8 +170,8 @@ const Page = () => {
             responses,
             isMalformed,
             frqTitle,
-            subject,
-            unitId
+            subject: subject || "Unknown subject",
+            unitId: unitId || "Unknown unit",
           };
         }),
       );
@@ -179,9 +186,13 @@ const Page = () => {
 
 
     useEffect(() => {
+      if (userLoading || !canGrade) {
+        return;
+      }
+
       const initializePage = async () => {
         const countSnapshot = await getCountFromServer(
-          collection(db, "gradableFrqSubmissions"),
+          getUngradedFrqsCollectionRef(),
         );
 
         setTotalCount(countSnapshot.data().count);
@@ -195,7 +206,7 @@ const Page = () => {
         );
         setFrqs([]);
       });
-    }, [fetchFrqs]);
+    }, [fetchFrqs, userLoading, canGrade]);
 
 
 const handleNextPage = async () => {
@@ -239,8 +250,7 @@ const handlePreviousPage = async () => {
     setIsDeleting(true);
 
     try {
-      await deleteDoc(
-        doc(db, "gradableFrqSubmissions", frqToDelete.id));
+      await deleteDoc(getUngradedFrqDocRef(frqToDelete.id));
 
       setFrqs((currentFrqs) =>
         currentFrqs
@@ -270,8 +280,28 @@ const handlePreviousPage = async () => {
     }
   };
 
+  if (userLoading) {
+    return <div className="p-8">Loading...</div>;
+  }
+
+  if (!canGrade) {
+    return (
+      <div className="flex min-h-screen flex-col">
+        <Navbar />
+        <main className="mx-auto mt-12 w-full max-w-6xl flex-1 px-8 pb-8">
+          <h1 className="text-4xl font-bold">Grader access required</h1>
+          <p className="mt-4 text-gray-600">
+            Ask an admin to grant your account grader access to review FRQ
+            submissions.
+          </p>
+        </main>
+        <Footer className="w-full" />
+      </div>
+    );
+  }
+
   if (frqs === null) {
-    return <div>Loading...</div>;
+    return <div className="p-8">Loading...</div>;
   }
 
   return (
diff --git a/src/components/frq/gradingRenderer.tsx b/src/components/frq/gradingRenderer.tsx
index b5458d24..580bf65d 100644
--- a/src/components/frq/gradingRenderer.tsx
+++ b/src/components/frq/gradingRenderer.tsx
@@ -1,15 +1,10 @@
 "use client";
 
+import { RenderContent } from "@/components/article-creator/custom_questions/RenderAdvancedTextbox";
 import { db } from "@/lib/firebase";
-import { useState, type ReactNode } from "react";
+import { useMemo, useState } from "react";
 import Link from "next/link";
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  LogOut,
-} from "lucide-react";
+import { ChevronLeft, ChevronRight, ChevronUp, LogOut } from "lucide-react";
 import { runTransaction, serverTimestamp } from "firebase/firestore";
 import {
   Popover,
@@ -20,75 +15,127 @@ import {
   getGradedFrqDocRef,
   getUngradedFrqDocRef,
 } from "@/lib/firestore/frqRefs";
+import {
+  getPartLabel,
+  getQuestionPoints,
+  getTemplatePoints,
+  toQuestionInput,
+} from "@/lib/frq/template";
 
 import { useUser } from "@/components/hooks/UserContext";
-import type { GradableFRQSubmission } from "@/types/frq";
+import type {
+  FRQTemplate,
+  FRQTemplateQuestion,
+  GradableFRQSubmission,
+} from "@/types/frq";
 
 type FRQGradingRendererProps = {
-  frq: GradableFRQSubmission | null;
+  submission: GradableFRQSubmission | null;
+  template: FRQTemplate | null;
 };
 
-type MockFrq = { title: string; questionCount: number };
-type RubricItem = {
-  description: string;
-  earnedPoints: number;
-  possiblePoints: number;
+/** Points awarded per criterion, and the grader's note, for one part. */
+type PartGrade = {
+  feedback: string;
+  criteria: Record<string, number>;
 };
 
-const MOCK_FRQS: MockFrq[] = [
-  { title: "FRQ 1", questionCount: 3 },
-  { title: "FRQ 2", questionCount: 4 },
-  { title: "FRQ 3", questionCount: 2 },
-];
-
-const RUBRIC_ITEMS: RubricItem[] = [
-  {
-    description: "Answer draws a connection to the Great Demographic Shift",
-    earnedPoints: 0,
-    possiblePoints: 2,
-  },
-  {
-    description: "Answer mentions John Smith’s contributions",
-    earnedPoints: 0,
-    possiblePoints: 1,
-  },
-  {
-    description: "Answer is at least 27 paragraphs long",
-    earnedPoints: 1,
-    possiblePoints: 1,
-  },
-  {
-    description:
-      "Answer contains correct punctuation, capitalization, and supporting details",
-    earnedPoints: 2,
-    possiblePoints: 2,
-  },
-];
-
-const FRQGradingRenderer = ({ frq }: FRQGradingRendererProps) => {
+const createEmptyGrade = (question: FRQTemplateQuestion): PartGrade => ({
+  feedback: "",
+  criteria: Object.fromEntries(
+    (question.criteria ?? []).map((criterion) => [criterion.id, 0]),
+  ),
+});
+
+const FRQGradingRenderer = ({
+  submission,
+  template,
+}: FRQGradingRendererProps) => {
   const { user } = useUser();
-  const [currentFrqIndex, setCurrentFrqIndex] = useState(0);
+
+  // Grading covers every part the template defines, including ones marked
+  // legacy: an older submission may still hold a response to them.
+  const questions = useMemo(() => template?.questions ?? [], [template]);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
   const [isNavigationOpen, setIsNavigationOpen] = useState(false);
-  const [feedback, setFeedback] = useState("");
-  const [savedFeedback, setSavedFeedback] = useState("");
+  const [overallFeedback, setOverallFeedback] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPrompt, setShowPrompt] = useState(true);
+  const [grades, setGrades] = useState<Record<string, PartGrade>>(() =>
+    Object.fromEntries(
+      questions.map((question) => [question.id, createEmptyGrade(question)]),
+    ),
+  );
 
-  if (!frq) return <div>FRQ not found.</div>;
+  const possiblePoints = getTemplatePoints(questions);
 
-  const currentFrq = MOCK_FRQS[currentFrqIndex];
-  if (!currentFrq) return <div>No FRQs available.</div>;
+  const earnedPoints = questions.reduce((total, question) => {
+    const partGrade = grades[question.id];
+
+    if (!partGrade) {
+      return total;
+    }
+
+    return (
+      total +
+      (question.criteria ?? []).reduce(
+        (partTotal, criterion) =>
+          partTotal + (partGrade.criteria[criterion.id] ?? 0),
+        0,
+      )
+    );
+  }, 0);
+
+  // A part counts as graded once the grader has written a note for it, which is
+  // the only signal that distinguishes "looked at and awarded zero" from
+  // "not looked at yet".
+  const gradedPartCount = questions.filter((question) =>
+    (grades[question.id]?.feedback ?? "").trim(),
+  ).length;
+
+  const setCriterionPoints = (
+    questionId: string,
+    criterionId: string,
+    rawPoints: number,
+    maximumPoints: number,
+  ) => {
+    const points = Math.min(
+      Math.max(Number.isFinite(rawPoints) ? Math.round(rawPoints) : 0, 0),
+      maximumPoints,
+    );
+
+    setGrades((currentGrades) => ({
+      ...currentGrades,
+      [questionId]: {
+        feedback: currentGrades[questionId]?.feedback ?? "",
+        criteria: {
+          ...(currentGrades[questionId]?.criteria ?? {}),
+          [criterionId]: points,
+        },
+      },
+    }));
+  };
+
+  const setPartFeedback = (questionId: string, feedback: string) => {
+    setGrades((currentGrades) => ({
+      ...currentGrades,
+      [questionId]: {
+        feedback,
+        criteria: currentGrades[questionId]?.criteria ?? {},
+      },
+    }));
+  };
 
-  const earnedPoints = RUBRIC_ITEMS.reduce(
-    (total, item) => total + item.earnedPoints,
-    0,
-  );
-  const possiblePoints = RUBRIC_ITEMS.reduce(
-    (total, item) => total + item.possiblePoints,
-    0,
-  );
   const submitGradeReport = async () => {
-    if (!frq.id || !user || !feedback.trim()) return;
+    if (!submission?.id || !user || !template) {
+      return;
+    }
+
+    if (!overallFeedback.trim()) {
+      window.alert("Add overall feedback before submitting the grade report.");
+      return;
+    }
 
     setIsSubmitting(true);
 
@@ -96,8 +143,8 @@ const FRQGradingRenderer = ({ frq }: FRQGradingRendererProps) => {
       // Use the submission ID as the result ID and atomically claim the queue
       // item. Firestore retries concurrent transactions, so only one grader
       // can successfully issue a report for a submission.
-      const queueRef = getUngradedFrqDocRef(frq.id);
-      const resultRef = getGradedFrqDocRef(frq.id);
+      const queueRef = getUngradedFrqDocRef(submission.id);
+      const resultRef = getGradedFrqDocRef(submission.id);
 
       await runTransaction(db, async (transaction) => {
         const [queueSnapshot, resultSnapshot] = await Promise.all([
@@ -109,22 +156,31 @@ const FRQGradingRenderer = ({ frq }: FRQGradingRendererProps) => {
           throw new Error("This submission has already been graded.");
         }
 
-        const queuedSubmission =
-          queueSnapshot.data() as GradableFRQSubmission;
-
-          transaction.set(resultRef, {
-            sourceSubmissionId: frq.id,
-            templateId: queuedSubmission.templateId,
-            subject: queuedSubmission.subject,
-            unitId: queuedSubmission.unitId,
-            studentId: queuedSubmission.studentId,
-            responses: queuedSubmission.responses,
-            submittedAt: queuedSubmission.submittedAt,
-            score: `${earnedPoints}/${possiblePoints}`,
-            feedback: feedback.trim(),
-            graderId: user.uid,
-            gradedAt: serverTimestamp(),
-          });
+        const queuedSubmission = queueSnapshot.data() as GradableFRQSubmission;
+
+        transaction.set(resultRef, {
+          sourceSubmissionId: submission.id,
+          templateId: queuedSubmission.templateId,
+          subject: queuedSubmission.subject,
+          unitId: queuedSubmission.unitId,
+          studentId: queuedSubmission.studentId,
+          responses: queuedSubmission.responses,
+          submittedAt: queuedSubmission.submittedAt,
+          score: `${earnedPoints}/${possiblePoints}`,
+          feedback: overallFeedback.trim(),
+          // Per-part detail is what lets the student's feedback page show which
+          // rubric lines were earned instead of a bare aggregate.
+          grades: questions.map((question) => ({
+            questionId: question.id,
+            feedback: grades[question.id]?.feedback?.trim() ?? "",
+            criteria: (question.criteria ?? []).map((criterion) => ({
+              criterionId: criterion.id,
+              points: grades[question.id]?.criteria[criterion.id] ?? 0,
+            })),
+          })),
+          graderId: user.uid,
+          gradedAt: serverTimestamp(),
+        });
 
         transaction.delete(queueRef);
       });
@@ -144,427 +200,289 @@ const FRQGradingRenderer = ({ frq }: FRQGradingRendererProps) => {
     }
   };
 
-  return (
-    <div className="flex min-h-screen flex-col border-t-[6px] border-black bg-white pb-14">
-      <GradingHeader
-        gradedQuestionCount={5}
-        totalQuestionCount={6}
-        isSubmitting={isSubmitting}
-        onSaveChanges={() => setSavedFeedback(feedback)}
-        onSubmitGradeReport={() => void submitGradeReport()}
-      />
-
-      <main className="grid flex-1 grid-cols-1 divide-y divide-gray-300 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
-        <GraderResponsePanel
-          frqTitle={currentFrq.title}
-          feedback={feedback}
-          savedFeedback={savedFeedback}
-          onFeedbackChange={setFeedback}
-        />
-        <StudentResponsePanel
-          frqTitle={currentFrq.title}
-          questionCount={currentFrq.questionCount}
-          responses={frq.responses}
-          showPrompt={showPrompt}
-          onShowPromptChange={() => setShowPrompt((visible) => !visible)}
-        />
-      </main>
+  if (!submission) return <div className="p-8">FRQ submission not found.</div>;
 
-      <GradingFooter
-        currentFrqIndex={currentFrqIndex}
-        totalFrqs={MOCK_FRQS.length}
-        isFirstFrq={currentFrqIndex === 0}
-        isLastFrq={currentFrqIndex === MOCK_FRQS.length - 1}
-        isNavigationOpen={isNavigationOpen}
-        onNavigationOpenChange={setIsNavigationOpen}
-        onPrevious={() => setCurrentFrqIndex((index) => Math.max(index - 1, 0))}
-        onNext={() =>
-          setCurrentFrqIndex((index) =>
-            Math.min(index + 1, MOCK_FRQS.length - 1),
-          )
-        }
-        onJumpToFrq={(index) => {
-          if (index >= 0 && index < MOCK_FRQS.length) {
-            setCurrentFrqIndex(index);
-            setIsNavigationOpen(false);
-          }
-        }}
-      />
-    </div>
-  );
-};
-
-function GradingHeader({
-  gradedQuestionCount,
-  totalQuestionCount,
-  isSubmitting,
-  onSaveChanges,
-  onSubmitGradeReport,
-}: {
-  gradedQuestionCount: number;
-  totalQuestionCount: number;
-  isSubmitting: boolean;
-  onSaveChanges: () => void;
-  onSubmitGradeReport: () => void;
-}) {
-  return (
-    <header className="flex min-h-[72px] items-center border-b border-dashed border-gray-400 bg-white px-10 py-3">
-      <div className="flex flex-1 items-center gap-4">
-        <button
-          type="button"
-          disabled={isSubmitting}
-          onClick={onSubmitGradeReport}
-          className="min-w-[176px] rounded-full bg-[#294ad1] px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#203cad] disabled:opacity-50"
-        >
-          {isSubmitting ? "Submitting..." : "Submit Grade Report"}
-        </button>
-        <button
-          type="button"
-          onClick={onSaveChanges}
-          className="min-w-[176px] rounded-full bg-[#294ad1] px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#203cad]"
-        >
-          Save Changes
-        </button>
-      </div>
-      <div className="flex flex-1 justify-center">
-        <p className="text-sm font-semibold text-gray-900">
-          {gradedQuestionCount}/{totalQuestionCount} Questions Graded
-        </p>
-      </div>
-      <div className="flex flex-1 justify-end">
-        <Link
-          href="/admin"
-          className="flex items-center gap-2 text-sm font-semibold text-red-500 transition-colors hover:text-red-600 hover:underline"
-        >
-          <LogOut aria-hidden="true" size={19} strokeWidth={2} />
-          Return To Admin Dashboard
-        </Link>
-      </div>
-    </header>
-  );
-}
-
-function GraderResponsePanel({
-  frqTitle,
-  feedback,
-  savedFeedback,
-  onFeedbackChange,
-}: {
-  frqTitle: string;
-  feedback: string;
-  savedFeedback: string;
-  onFeedbackChange: (feedback: string) => void;
-}) {
-  return (
-    <section className="px-10 py-8">
-      <h2 className="mb-5 text-base font-semibold">
-        {frqTitle} | Question A | Grader Response
-      </h2>
-      <QuestionHeader label="A" points="3/6 Points" expanded />
-      <div className="space-y-1">
-        {RUBRIC_ITEMS.map((item) => (
-          <RubricRow key={item.description} item={item} />
-        ))}
+  if (!template) {
+    return (
+      <div className="p-8">
+        The FRQ this submission came from no longer exists, so it cannot be
+        graded.
       </div>
-      <div className="mt-4 min-h-[150px] rounded-md border border-gray-300">
-        <div className="flex h-10 items-center gap-3 border-b border-gray-300 px-3 text-sm">
-          <button type="button" className="font-bold">
-            B
-          </button>
-          <button type="button" className="italic">
-            I
-          </button>
-          <button type="button" className="underline">
-            U
-          </button>
-          <span>Ω</span>
-        </div>
-        <textarea
-          aria-label="Grader feedback"
-          value={feedback}
-          placeholder="Grader feedback will be entered here."
-          onChange={(event) => onFeedbackChange(event.target.value)}
-          className="min-h-[110px] w-full resize-y p-3 text-sm outline-none"
-        />
-        {savedFeedback === feedback && feedback && (
-          <p className="px-3 pb-2 text-xs text-green-700">
-            Changes saved locally.
-          </p>
-        )}
-      </div>
-      <QuestionHeader label="B" points="0/3 Points" />
-      <QuestionHeader label="C" points="0/3 Points" />
-    </section>
-  );
-}
+    );
+  }
 
-type RubricRowProps = {
-  item: RubricItem;
-};
+  const currentQuestion = questions[currentIndex];
 
-function RubricRow({ item }: RubricRowProps) {
-  return (
-    <div className="flex min-h-9 items-center gap-2">
-      <div className="min-w-0 flex-1 rounded-md border border-gray-300 px-3 py-1.5 text-sm">
-        <span className="block truncate">{item.description}</span>
+  if (!currentQuestion) {
+    return (
+      <div className="p-8">
+        This FRQ has no questions to grade.
       </div>
-      <div className="flex shrink-0 items-center gap-1">
-        <span className="flex h-8 min-w-8 items-center justify-center rounded-md border border-gray-300 px-2">
-          {item.earnedPoints}
-        </span>
-        <span>/</span>
-        <span>{item.possiblePoints}</span>
-      </div>
-    </div>
-  );
-}
-
-function StudentResponsePanel({
-  frqTitle,
-  questionCount,
-  responses,
-  showPrompt,
-  onShowPromptChange,
-}: {
-  frqTitle: string;
-  questionCount: number;
-  responses: Record<string, string>;
-  showPrompt: boolean;
-  onShowPromptChange: () => void;
-}) {
-  return (
-    <section className="px-10 py-8">
-      <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-base font-semibold">
-          {frqTitle} | {questionCount} Questions
-        </h2>
-
-        <button
-          type="button"
-          className="rounded-md bg-black px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-800"
-        >
-          Show Prompt
-        </button>
-      </div>
-
-      <QuestionHeader label="A" expanded />
-
-      <div className="mb-5 text-sm leading-6 text-gray-900">
-        <p className="mb-4">
-          The demographic transition model can be used to theorize changes in a
-          country&apos;s total population over time.
-        </p>
-
-        <p className="mb-3 font-medium">
-          Respond to parts A, B, C, D, E, F, and G.
-        </p>
+    );
+  }
 
-        <ol className="space-y-2">
-          <li>
-            <strong>A.</strong> Referring to Figure 1, identify the stage of the
-            Demographic Transition Model that this country is most likely in.
-          </li>
-
-          <li>
-            <strong>B.</strong> Explain one social cause of the transition
-            between Stage 2 and Stage 3.
-          </li>
-
-          <li>
-            <strong>C.</strong> Define the term pro-natalist policy.
-          </li>
-
-          <li>
-            <strong>D.</strong> Explain the change in cause of death between
-            Stage 3 and Stage 4.
-          </li>
-        </ol>
-      </div>
+  const currentGrade = grades[currentQuestion.id];
+  const currentCriteria = currentQuestion.criteria ?? [];
+  const currentEarned = currentCriteria.reduce(
+    (total, criterion) => total + (currentGrade?.criteria[criterion.id] ?? 0),
+    0,
+  );
 
-      <div className="min-h-[260px] rounded-md border border-gray-400 p-4 text-sm leading-6">
-        <p className="mb-4">
-          This is temporary student response content used to match the
-          grading-page mockup. The actual FRQ response will be loaded in a
-          future work item.
-        </p>
+  return (
+    <div className="flex min-h-screen flex-col border-t-[6px] border-black bg-white pb-14">
+      <header className="flex min-h-[72px] items-center border-b border-dashed border-gray-400 bg-white px-10 py-3">
+        <div className="flex flex-1 items-center gap-4">
+          <button
+            type="button"
+            disabled={isSubmitting}
+            onClick={() => void submitGradeReport()}
+            className="min-w-[176px] rounded-full bg-[#294ad1] px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#203cad] disabled:opacity-50"
+          >
+            {isSubmitting ? "Submitting..." : "Submit Grade Report"}
+          </button>
 
-        <p className="mb-4">
-          The student response area will use the advanced textbox renderer after
-          its required properties are confirmed.
-        </p>
+          <p className="text-sm font-semibold tabular-nums">
+            {earnedPoints}/{possiblePoints} points
+          </p>
+        </div>
 
-        <p>
-          Navigating through the footer changes the displayed FRQ title and
-          question count.
-        </p>
+        <div className="flex flex-1 justify-center">
+          <p className="text-sm font-semibold text-gray-900">
+            {gradedPartCount}/{questions.length} Questions Graded
+          </p>
+        </div>
 
-        {/*
-          Replace this temporary content with RenderAdvancedTextbox.
-        */}
-      </div>
+        <div className="flex flex-1 justify-end">
+          <Link
+            href="/frq-grading"
+            className="flex items-center gap-2 text-sm font-semibold text-red-500 transition-colors hover:text-red-600 hover:underline"
+          >
+            <LogOut aria-hidden="true" size={19} strokeWidth={2} />
+            Return To Grading Queue
+          </Link>
+        </div>
+      </header>
 
-      <QuestionHeader label="B" />
-      <QuestionHeader label="C" />
-    </section>
-  );
-}
-
-function QuestionHeader({
-  label,
-  points,
-  expanded = false,
-}: {
-  label: string;
-  points?: string;
-  expanded?: boolean;
-}) {
-  const Icon = expanded ? ChevronDown : ChevronRight;
-  return (
-    <button
-      type="button"
-      aria-expanded={expanded}
-      className="mb-3 flex h-9 w-full items-center justify-between bg-gray-100 pr-3 text-left"
-    >
-      <div className="flex h-full items-center">
-        <span className="flex h-full w-9 items-center justify-center bg-black font-bold text-white">
-          {label}
-        </span>
-        {points && <span className="px-3 font-semibold">{points}</span>}
-      </div>
-      <Icon aria-hidden="true" className="size-5" />
-    </button>
-  );
-}
-
-type GradingFooterProps = {
-  currentFrqIndex: number;
-  totalFrqs: number;
-  isFirstFrq: boolean;
-  isLastFrq: boolean;
-  isNavigationOpen: boolean;
-  onNavigationOpenChange: (open: boolean) => void;
-  onPrevious: () => void;
-  onNext: () => void;
-  onJumpToFrq: (index: number) => void;
-};
+      <main className="grid flex-1 grid-cols-1 divide-y divide-gray-300 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
+        <section className="px-10 py-8">
+          <h2 className="mb-5 text-base font-semibold">
+            {template.title} | Part {getPartLabel(currentIndex)} | Grader
+            Response
+          </h2>
+
+          <div className="mb-3 flex h-9 items-center bg-gray-100 pr-3">
+            <span className="flex h-full w-9 items-center justify-center bg-black font-bold text-white">
+              {getPartLabel(currentIndex)}
+            </span>
+            <span className="px-3 font-semibold tabular-nums">
+              {currentEarned}/{getQuestionPoints(currentQuestion)} Points
+            </span>
+          </div>
+
+          <div className="space-y-1">
+            {currentCriteria.length === 0 ? (
+              <p className="rounded-md border border-dashed p-4 text-sm text-gray-500">
+                This part has no grading criteria, so it is worth zero points.
+                Add criteria in the FRQ editor.
+              </p>
+            ) : (
+              currentCriteria.map((criterion) => (
+                <div
+                  key={criterion.id}
+                  className="flex min-h-9 items-center gap-2"
+                >
+                  <div className="min-w-0 flex-1 rounded-md border border-gray-300 px-3 py-1.5 text-sm">
+                    <span className="block">
+                      {criterion.description || "Untitled criterion"}
+                    </span>
+                  </div>
+
+                  <div className="flex shrink-0 items-center gap-1">
+                    <input
+                      type="number"
+                      min={0}
+                      max={criterion.points}
+                      step={1}
+                      aria-label={`Points for ${
+                        criterion.description || "criterion"
+                      }`}
+                      value={currentGrade?.criteria[criterion.id] ?? 0}
+                      onChange={(event) =>
+                        setCriterionPoints(
+                          currentQuestion.id,
+                          criterion.id,
+                          Number(event.target.value),
+                          criterion.points,
+                        )
+                      }
+                      className="h-8 w-16 rounded-md border border-gray-300 px-2 text-center"
+                    />
+                    <span>/</span>
+                    <span className="tabular-nums">{criterion.points}</span>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="mt-4">
+            <label
+              htmlFor="part-feedback"
+              className="text-sm font-semibold"
+            >
+              Feedback for part {getPartLabel(currentIndex)}
+            </label>
+            <textarea
+              id="part-feedback"
+              value={currentGrade?.feedback ?? ""}
+              placeholder="Explain what this part earned and what was missing."
+              onChange={(event) =>
+                setPartFeedback(currentQuestion.id, event.target.value)
+              }
+              className="mt-2 min-h-[110px] w-full resize-y rounded-md border border-gray-300 p-3 text-sm outline-none"
+            />
+          </div>
+
+          <div className="mt-6">
+            <label
+              htmlFor="overall-feedback"
+              className="text-sm font-semibold"
+            >
+              Overall feedback
+            </label>
+            <textarea
+              id="overall-feedback"
+              value={overallFeedback}
+              placeholder="Summarize the response as a whole. Required to submit."
+              onChange={(event) => setOverallFeedback(event.target.value)}
+              className="mt-2 min-h-[110px] w-full resize-y rounded-md border border-gray-300 p-3 text-sm outline-none"
+            />
+          </div>
+        </section>
+
+        <section className="px-10 py-8">
+          <div className="mb-4 flex items-center justify-between">
+            <h2 className="text-base font-semibold">
+              {template.title} | {questions.length}{" "}
+              {questions.length === 1 ? "Question" : "Questions"}
+            </h2>
 
-function GradingFooter({
-  currentFrqIndex,
-  totalFrqs,
-  isFirstFrq,
-  isLastFrq,
-  isNavigationOpen,
-  onNavigationOpenChange,
-  onPrevious,
-  onNext,
-  onJumpToFrq,
-}: GradingFooterProps) {
-  return (
-    <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
-      <p className="font-semibold">AP Human Geography Practice FRQ</p>
-
-      <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2">
-        <FooterIconButton
-          label="Previous FRQ"
-          disabled={isFirstFrq}
-          onClick={onPrevious}
-        >
-          <ChevronLeft aria-hidden="true" className="size-5" />
-        </FooterIconButton>
-        <Popover open={isNavigationOpen} onOpenChange={onNavigationOpenChange}>
-          <PopoverTrigger asChild>
             <button
               type="button"
-              className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white transition-colors hover:bg-gray-800"
+              onClick={() => setShowPrompt((visible) => !visible)}
+              className="rounded-md bg-black px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-800"
             >
-              Question {currentFrqIndex + 1} of {totalFrqs}
-              <ChevronUp aria-hidden="true" className="size-4" />
+              {showPrompt ? "Hide Prompt" : "Show Prompt"}
             </button>
-          </PopoverTrigger>
-          <PopoverContent align="center" side="top" className="w-40 p-2">
-            <div className="flex flex-col gap-2">
-              {Array.from({ length: totalFrqs }, (_, index) => (
-                <button
-                  key={index}
-                  type="button"
-                  onClick={() => onJumpToFrq(index)}
-                  className={`rounded-md px-3 py-2 text-left text-sm transition-colors ${
-                    index === currentFrqIndex
-                      ? "bg-[#294ad1] font-bold text-white"
-                      : "bg-gray-100 hover:bg-gray-200"
-                  }`}
-                >
-                  FRQ {index + 1}
-                </button>
-              ))}
+          </div>
+
+          {showPrompt && (
+            <div className="mb-5 border-b border-gray-200 pb-5 text-sm leading-6 text-gray-900">
+              <RenderContent
+                content={toQuestionInput(
+                  template.directions,
+                  template.directionsFiles,
+                )}
+                origin="question"
+              />
+
+              <div className="mt-4">
+                <RenderContent
+                  content={toQuestionInput(
+                    currentQuestion.prompt,
+                    currentQuestion.promptFiles,
+                  )}
+                  origin="question"
+                />
+              </div>
             </div>
-          </PopoverContent>
-        </Popover>
-        <FooterIconButton
-          label="Next FRQ"
-          disabled={isLastFrq}
-          onClick={onNext}
-        >
-          <ChevronRight aria-hidden="true" className="size-5" />
-        </FooterIconButton>
-      </div>
-      <div className="flex items-center gap-3">
-        <FooterNavigationButton disabled={isFirstFrq} onClick={onPrevious}>
-          Back
-        </FooterNavigationButton>
-        <FooterNavigationButton disabled={isLastFrq} onClick={onNext}>
-          Next
-        </FooterNavigationButton>
-      </div>
-    </footer>
-  );
-}
+          )}
+
+          <h3 className="mb-2 text-sm font-semibold">Student response</h3>
+
+          <div
+            className="min-h-[260px] rounded-md border border-gray-400 p-4 text-sm leading-6 [&_p]:mb-3"
+            // The student response is authored in a contenteditable that
+            // sanitizes on every keystroke and again on submit, so what is
+            // stored is already safe to render.
+            dangerouslySetInnerHTML={{
+              __html:
+                submission.responses[currentQuestion.id] ??
+                "<em>No response submitted for this part.</em>",
+            }}
+          />
+        </section>
+      </main>
 
-type FooterIconButtonProps = {
-  label: string;
-  disabled: boolean;
-  onClick: () => void;
-  children: React.ReactNode;
-};
+      <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
+        <p className="font-semibold">{template.title}</p>
+
+        <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2">
+          <button
+            type="button"
+            aria-label="Previous part"
+            disabled={currentIndex === 0}
+            onClick={() => setCurrentIndex((index) => Math.max(index - 1, 0))}
+            className="rounded-md bg-black p-2 text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            <ChevronLeft aria-hidden="true" className="size-5" />
+          </button>
 
-function FooterIconButton({
-  label,
-  disabled,
-  onClick,
-  children,
-}: FooterIconButtonProps) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      disabled={disabled}
-      onClick={onClick}
-      className="rounded-md bg-black p-2 text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {children}
-    </button>
-  );
-}
-
-function FooterNavigationButton({
-  disabled,
-  onClick,
-  children,
-}: {
-  disabled: boolean;
-  onClick: () => void;
-  children: ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={onClick}
-      className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white transition-colors hover:bg-[#203cad] disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {children}
-    </button>
+          <Popover open={isNavigationOpen} onOpenChange={setIsNavigationOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white transition-colors hover:bg-gray-800"
+              >
+                Part {getPartLabel(currentIndex)} of {questions.length}
+                <ChevronUp aria-hidden="true" className="size-4" />
+              </button>
+            </PopoverTrigger>
+
+            <PopoverContent align="center" side="top" className="w-40 p-2">
+              <div className="flex flex-col gap-2">
+                {questions.map((question, index) => (
+                  <button
+                    key={question.id}
+                    type="button"
+                    onClick={() => {
+                      setCurrentIndex(index);
+                      setIsNavigationOpen(false);
+                    }}
+                    className={`rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                      index === currentIndex
+                        ? "bg-[#294ad1] font-bold text-white"
+                        : "bg-gray-100 hover:bg-gray-200"
+                    }`}
+                  >
+                    Part {getPartLabel(index)}
+                  </button>
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          <button
+            type="button"
+            aria-label="Next part"
+            disabled={currentIndex === questions.length - 1}
+            onClick={() =>
+              setCurrentIndex((index) =>
+                Math.min(index + 1, questions.length - 1),
+              )
+            }
+            className="rounded-md bg-black p-2 text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            <ChevronRight aria-hidden="true" className="size-5" />
+          </button>
+        </div>
+
+        <p className="text-sm text-gray-600">
+          Student: <span className="font-mono">{submission.studentId}</span>
+        </p>
+      </footer>
+    </div>
   );
-}
+};
 
 export default FRQGradingRenderer;

From bd8c9b2179e827d3d8d11a273445439165f3a059 Mon Sep 17 00:00:00 2001
From: saa938 <ashays@outlook.com>
Date: Fri, 21 Aug 2026 09:54:34 -0700
Subject: [PATCH 3/3] Show students their real FRQ feedback instead of
 placeholder data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The student feedback page rendered `fallBackData.ts` — a fixture of sample
scores and comments — so every student saw the same placeholder feedback
regardless of what a grader had actually written.

- frq-feedback/[id]: load the student's real graded submission
- add src/lib/frq/feedbackDocument.ts to adapt a graded submission into the
  shape the feedback view renders, tolerating older graded documents
- feedbackRenderer and the feedback/* components: thread readOnly through,
  so a student cannot edit the rubric they are being shown
- delete feedback/fallBackData.ts, now unreferenced

Builds on the data model and rules from the first PR. Independent of the
grading PR — the two touch no files in common.
---
 src/app/frq-feedback/[id]/page.tsx            | 139 +++++++++++----
 .../frq/feedback/dropdownContent.tsx          |  26 ++-
 src/components/frq/feedback/fallBackData.ts   | 167 ------------------
 src/components/frq/feedback/layout.tsx        |  16 +-
 src/components/frq/feedback/rightSide.tsx     |   3 +
 .../frq/feedback/rubricCriteriaRow.tsx        |  27 ++-
 src/components/frq/feedbackRenderer.tsx       |  20 ++-
 src/lib/frq/feedbackDocument.ts               |  97 ++++++++++
 8 files changed, 273 insertions(+), 222 deletions(-)
 delete mode 100644 src/components/frq/feedback/fallBackData.ts
 create mode 100644 src/lib/frq/feedbackDocument.ts

diff --git a/src/app/frq-feedback/[id]/page.tsx b/src/app/frq-feedback/[id]/page.tsx
index 1ff69ae3..6d8cf3a4 100644
--- a/src/app/frq-feedback/[id]/page.tsx
+++ b/src/app/frq-feedback/[id]/page.tsx
@@ -2,72 +2,143 @@
 
 import usePathname from "@/components/client/pathname";
 import FRQFeedbackRenderer from "@/components/frq/feedbackRenderer";
-import { getGradedFrqDocRef } from "@/lib/firestore/frqRefs";
+import type { FRQFeedbackDocument } from "@/components/frq/feedback/types";
+import {
+  getFrqTemplateDocRef,
+  getGradedFrqDocRef,
+} from "@/lib/firestore/frqRefs";
+import { buildFeedbackDocument } from "@/lib/frq/feedbackDocument";
+import { normalizeFrqTemplate } from "@/lib/frq/template";
+import type { GradedFRQSubmission } from "@/types/frq";
 import { getDoc } from "firebase/firestore";
 import { useEffect, useState } from "react";
 
-type FeedbackStatus = "loading" | "found" | "not-found";
-
 const Page = () => {
   const pathname = usePathname() ?? "";
   const frqId = pathname.split("/").at(-1) ?? "";
 
-  const [status, setStatus] = useState<FeedbackStatus>("loading");
+  const [feedbackData, setFeedbackData] = useState<FRQFeedbackDocument | null>(
+    null,
+  );
+  const [overallFeedback, setOverallFeedback] = useState("");
+  const [storedScore, setStoredScore] = useState("");
+  const [hasPerPartGrades, setHasPerPartGrades] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchFeedback = async () => {
-      setStatus("loading");
+      setIsLoading(true);
+      setLoadError(null);
 
       if (!frqId) {
-        setStatus("not-found");
+        setLoadError("Feedback not found.");
+        setIsLoading(false);
         return;
       }
 
       try {
-        const docRef = getGradedFrqDocRef(frqId);
-        const docSnap = await getDoc(docRef);
+        const gradedSnapshot = await getDoc(getGradedFrqDocRef(frqId));
+
+        if (!gradedSnapshot.exists()) {
+          setLoadError("Feedback not found.");
+          return;
+        }
+
+        const graded = {
+          id: gradedSnapshot.id,
+          ...(gradedSnapshot.data() as Omit<GradedFRQSubmission, "id">),
+        };
+
+        // The rubric tree lives on the template. Without it there is nothing to
+        // show the awarded points against, which is exactly why this page used
+        // to fall back to canned AP Human Geography content.
+        const templateSnapshot = await getDoc(
+          getFrqTemplateDocRef(
+            graded.subject,
+            graded.unitId,
+            graded.templateId,
+          ),
+        );
+
+        if (!templateSnapshot.exists()) {
+          setLoadError(
+            "The FRQ this grade belongs to no longer exists, so its feedback cannot be shown.",
+          );
+          return;
+        }
 
-        setStatus(docSnap.exists() ? "found" : "not-found");
+        const template = normalizeFrqTemplate(templateSnapshot.data(), {
+          id: templateSnapshot.id,
+          subject: graded.subject,
+          unitId: graded.unitId,
+        });
+
+        setFeedbackData(buildFeedbackDocument(graded, template));
+        setOverallFeedback(graded.feedback ?? "");
+        setStoredScore(graded.score ?? "");
+        setHasPerPartGrades(
+          Array.isArray(graded.grades) && graded.grades.length > 0,
+        );
       } catch (error: unknown) {
         console.error("Error fetching FRQ feedback:", error);
-        setStatus("not-found");
+
+        // An ownership-scoped rule denies reads of a document that is missing
+        // *or* belongs to someone else, and the client cannot tell which. Both
+        // are reported as not-found so the page never confirms that another
+        // student's grade exists.
+        const isDenied =
+          typeof error === "object" &&
+          error !== null &&
+          (error as { code?: string }).code === "permission-denied";
+
+        if (isDenied) {
+          setLoadError("Feedback not found.");
+          return;
+        }
+
+        setLoadError(
+          error instanceof Error
+            ? `Could not load this feedback: ${error.message}`
+            : "Could not load this feedback.",
+        );
+      } finally {
+        setIsLoading(false);
       }
     };
 
     void fetchFeedback();
   }, [frqId]);
 
-  if (status === "loading") {
-    return <div>Loading...</div>;
+  if (isLoading) {
+    return <div className="p-8">Loading...</div>;
   }
 
-  if (status === "not-found") {
-    return <div>Feedback not found.</div>;
+  if (loadError !== null || feedbackData === null) {
+    return <div className="p-8">{loadError ?? "Feedback not found."}</div>;
   }
 
   return (
     <div>
-      {/*
-        A real `feedbackData` cannot be built from a GradedFRQSubmission yet, so
-        the renderer intentionally falls back to its mock data here.
-
-        FRQFeedbackDocument is rubric-shaped: layout.tsx derives the displayed
-        score by summing `feedback.questions[].gradingCriteria[].points` over
-        `frqs[].questions[].gradingCriteria[].points`, and dropdownContent.tsx
-        renders one row per criterion plus per-part feedback. A graded submission
-        stores only an aggregate `score` string ("3/6") and a single `feedback`
-        string, and its `templateId` resolves to an FRQTemplate that carries no
-        rubric criteria and no question/part tree.
-
-        Building a document from what is stored today would render 0/0 points
-        with empty rubric rows and drop the grader's written feedback entirely.
-        Closing this needs either the grading write side to persist per-criterion
-        scores and per-part feedback, or FRQFeedbackDocument to accept an
-        aggregate score/feedback pair.
-      */}
-      <FRQFeedbackRenderer />
+      {!hasPerPartGrades && (
+        <div className="border-b border-yellow-400 bg-yellow-50 px-8 py-3 text-sm">
+          This submission was graded before per-question scores were recorded,
+          so the rubric below shows zero for every line. The grader&apos;s
+          recorded score was{" "}
+          <strong>
+            {storedScore.trim().length > 0 ? storedScore : "not recorded"}
+          </strong>
+          .
+        </div>
+      )}
+
+      <FRQFeedbackRenderer
+        feedbackData={feedbackData}
+        readOnly
+        overallFeedback={overallFeedback}
+      />
     </div>
   );
 };
 
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/src/components/frq/feedback/dropdownContent.tsx b/src/components/frq/feedback/dropdownContent.tsx
index a463cd7d..43e2e91d 100644
--- a/src/components/frq/feedback/dropdownContent.tsx
+++ b/src/components/frq/feedback/dropdownContent.tsx
@@ -15,6 +15,7 @@ interface FeedbackSectionProps {
   answer?: ResponseAnswer;
   partFeedback?: FRQPartFeedback;
   isOpen: boolean;
+  readOnly?: boolean;
   onToggle: () => void;
   onFeedbackChange: (feedback: string) => void;
   onPointsChange: (criterionId: string, points: number) => void;
@@ -27,6 +28,7 @@ export default function FeedbackSection({
   answer,
   partFeedback,
   isOpen,
+  readOnly = false,
   onToggle,
   onFeedbackChange,
   onPointsChange,
@@ -98,6 +100,7 @@ export default function FeedbackSection({
                   key={criterion.id}
                   criterion={criterion}
                   points={criterionScore?.points ?? 0}
+                  readOnly={readOnly}
                   onPointsChange={(points) =>
                     onPointsChange(criterion.id, points)
                   }
@@ -106,12 +109,23 @@ export default function FeedbackSection({
             })}
           </div>
 
-          <Textarea
-            value={partFeedback?.feedback ?? ""}
-            onChange={(event) => onFeedbackChange(event.target.value)}
-            placeholder="Enter feedback"
-            className="min-h-24 resize-y border-gray-400"
-          />
+          {readOnly ? (
+            <div className="rounded-md border border-gray-400 p-3 text-sm leading-6">
+              <p className="mb-1 font-semibold">Grader feedback</p>
+              <p className="whitespace-pre-wrap">
+                {partFeedback?.feedback?.trim()
+                  ? partFeedback.feedback
+                  : "The grader did not leave a note for this part."}
+              </p>
+            </div>
+          ) : (
+            <Textarea
+              value={partFeedback?.feedback ?? ""}
+              onChange={(event) => onFeedbackChange(event.target.value)}
+              placeholder="Enter feedback"
+              className="min-h-24 resize-y border-gray-400"
+            />
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/frq/feedback/fallBackData.ts b/src/components/frq/feedback/fallBackData.ts
deleted file mode 100644
index 73cff602..00000000
--- a/src/components/frq/feedback/fallBackData.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-export const fallbackFeedbackData = {
-  name: "AP Human Geography FRQ 1",
-  creatorID: "1259823594",
-  mostRecentEditor: "1259823594",
-  id: "43281",
-  isVisible: true,
-  feedback: {
-    id: "47231",
-    graderId: "964923741",
-    submittedAt: "2026-07-13T18:30:00Z",
-    questions: [
-      {
-        questionId: "53213",
-        feedback: "",
-        gradingCriteria: [
-          {
-            criterionId: "59684",
-            points: 3,
-          },
-          {
-            criterionId: "85931",
-            points: 1,
-          },
-        ],
-      },
-      {
-        questionId: "53214",
-        feedback: "",
-        gradingCriteria: [
-          {
-            criterionId: "59685",
-            points: 1,
-          },
-          {
-            criterionId: "85930",
-            points: 1,
-          },
-        ],
-      },
-      {
-        questionId: "63213",
-        feedback: "",
-        gradingCriteria: [
-          {
-            criterionId: "69684",
-            points: 3,
-          },
-          {
-            criterionId: "75931",
-            points: 0,
-          },
-        ],
-      },
-    ],
-  },
-  response: {
-    id: "47231",
-    userId: "3749237134",
-    submittedAt: "2026-07-13T18:30:00Z",
-    answers: [
-      {
-        questionId: "53213",
-        value: "1-1 Answer",
-      },
-      {
-        questionId: "53214",
-        value: "1-2 Answer",
-      },
-      {
-        questionId: "63213",
-        value: "2-1 Answer",
-      },
-    ],
-  },
-  frqs: [
-    {
-      id: "12345",
-      name: "FRQ 1",
-      description: {
-        value:
-          "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$. Choice D is incorrect. To some extent, it is true that if a limit approaches infinity, it is a case of DNE since it experiences unbounded change. HOWEVER, the convention will ALWAYS be to specify whether or not it is a $@\\pm \\infty$, which makes C a better answer.",
-        files: [],
-      },
-      isVisible: true,
-      questions: [
-        {
-          id: "53213",
-          name: "Question 1",
-          isVisible: true,
-          prompt: {
-            value: "This is a prompt for frq 1 question 1",
-            files: [],
-          },
-          answerType: "text",
-          gradingCriteria: [
-            {
-              id: "59684",
-              text: "Correct Grammar",
-              points: 4,
-            },
-            {
-              id: "85931",
-              text: "Mentions Demographics",
-              points: 2,
-            },
-          ],
-        },
-        {
-          id: "53214",
-          name: "Question 2",
-          isVisible: true,
-          prompt: {
-            value: "This is a prompt for frq 1 question 2",
-            files: [],
-          },
-          answerType: "text",
-          gradingCriteria: [
-            {
-              id: "59685",
-              text: "Correct Math",
-              points: 1,
-            },
-            {
-              id: "85930",
-              text: "Aura",
-              points: 2,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      id: "95312",
-      name: "FRQ 2",
-      description: {
-        value:
-          "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$.",
-        files: [],
-      },
-      isVisible: true,
-      questions: [
-        {
-          id: "63213",
-          name: "Question 1",
-          isVisible: true,
-          prompt: {
-            value: "This is a prompt for frq 2 question 1",
-            files: [],
-          },
-          answerType: "text",
-          gradingCriteria: [
-            {
-              id: "69684",
-              text: "Correct Grammar",
-              points: 4,
-            },
-            {
-              id: "75931",
-              text: "Mentions Demographics",
-              points: 2,
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
diff --git a/src/components/frq/feedback/layout.tsx b/src/components/frq/feedback/layout.tsx
index 4c4f9811..3710db69 100644
--- a/src/components/frq/feedback/layout.tsx
+++ b/src/components/frq/feedback/layout.tsx
@@ -8,6 +8,8 @@ interface LayoutProps {
   feedbackData: FRQFeedbackDocument;
   currentFrq: FRQQuestion;
   currentFrqIndex: number;
+  readOnly?: boolean;
+  overallFeedback?: string;
   onPrevious: () => void;
   onNext: () => void;
   onJumpToFrq: (index: number) => void;
@@ -23,6 +25,8 @@ export default function Layout({
   feedbackData,
   currentFrq,
   currentFrqIndex,
+  readOnly = false,
+  overallFeedback,
   onPrevious,
   onNext,
   onJumpToFrq,
@@ -59,13 +63,23 @@ export default function Layout({
       <Header earnedPoints={earnedPoints} totalPoints={totalPoints} />
 
       <main className="grid h-screen grid-cols-2 pb-14 pt-16">
-        <div className="border-r-2 border-gray-500">
+        <div className="overflow-y-auto border-r-2 border-gray-500">
           <LeftSide description={currentFrq.description} />
+
+          {overallFeedback?.trim() && (
+            <div className="mx-8 mb-8 rounded-md border border-gray-400 p-4">
+              <h2 className="mb-2 font-bold">Overall feedback</h2>
+              <p className="whitespace-pre-wrap text-sm leading-6">
+                {overallFeedback}
+              </p>
+            </div>
+          )}
         </div>
 
         <QuestionFeedback
           frq={currentFrq}
           feedbackData={feedbackData}
+          readOnly={readOnly}
           onFeedbackChange={onFeedbackChange}
           onPointsChange={onPointsChange}
         />
diff --git a/src/components/frq/feedback/rightSide.tsx b/src/components/frq/feedback/rightSide.tsx
index 2138bf2d..0bfe2217 100644
--- a/src/components/frq/feedback/rightSide.tsx
+++ b/src/components/frq/feedback/rightSide.tsx
@@ -7,11 +7,13 @@ import type { FRQFeedbackDocument, FRQQuestion } from "./types";
 export default function QuestionFeedback({
   frq,
   feedbackData,
+  readOnly = false,
   onFeedbackChange,
   onPointsChange,
 }: {
   frq: FRQQuestion;
   feedbackData: FRQFeedbackDocument;
+  readOnly?: boolean;
   onFeedbackChange: (questionId: string, feedback: string) => void;
   onPointsChange: (
     questionId: string,
@@ -77,6 +79,7 @@ export default function QuestionFeedback({
               answer={answer}
               partFeedback={partFeedback}
               isOpen={openParts.includes(part.id)}
+              readOnly={readOnly}
               onToggle={() => togglePart(part.id)}
               onFeedbackChange={(feedback) =>
                 onFeedbackChange(part.id, feedback)
diff --git a/src/components/frq/feedback/rubricCriteriaRow.tsx b/src/components/frq/feedback/rubricCriteriaRow.tsx
index c0af5f02..31c29b86 100644
--- a/src/components/frq/feedback/rubricCriteriaRow.tsx
+++ b/src/components/frq/feedback/rubricCriteriaRow.tsx
@@ -5,10 +5,12 @@ import type { GradingCriterion } from "./types";
 export default function RubricCriteriaRow({
   criterion,
   points,
+  readOnly = false,
   onPointsChange,
 }: {
   criterion: GradingCriterion;
   points: number;
+  readOnly?: boolean;
   onPointsChange: (points: number) => void;
 }) {
   const updatePoints = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -23,14 +25,23 @@ export default function RubricCriteriaRow({
       </p>
 
       <div className="flex items-baseline gap-1">
-        <input
-          type="number"
-          min={0}
-          max={criterion.points}
-          value={points}
-          onChange={updatePoints}
-          className="w-10 border-0 bg-transparent p-0 text-center text-2xl font-semibold outline-none focus:ring-0"
-        />
+        {/* A student is being shown a settled grade, so the awarded points are
+            rendered as text. Leaving the number input live implied the score
+            could be edited from the feedback page. */}
+        {readOnly ? (
+          <span className="w-10 text-center text-2xl font-semibold tabular-nums">
+            {points}
+          </span>
+        ) : (
+          <input
+            type="number"
+            min={0}
+            max={criterion.points}
+            value={points}
+            onChange={updatePoints}
+            className="w-10 border-0 bg-transparent p-0 text-center text-2xl font-semibold outline-none focus:ring-0"
+          />
+        )}
 
         <span className="text-base">/{criterion.points}</span>
       </div>
diff --git a/src/components/frq/feedbackRenderer.tsx b/src/components/frq/feedbackRenderer.tsx
index 9635c7a9..c0de0289 100644
--- a/src/components/frq/feedbackRenderer.tsx
+++ b/src/components/frq/feedbackRenderer.tsx
@@ -3,22 +3,28 @@
 import { useState } from "react";
 import Layout from "./feedback/layout";
 import type { FRQFeedbackDocument } from "./feedback/types";
-import { fallbackFeedbackData } from "./feedback/fallBackData";
 
 interface FRQFeedbackRendererProps {
-  feedbackData?: FRQFeedbackDocument;
+  /**
+   * Required. This used to be optional with a canned AP Human Geography
+   * fallback, which meant a page that failed to build a real document rendered
+   * a plausible-looking fake grade instead of an error.
+   */
+  feedbackData: FRQFeedbackDocument;
+  /** Students see a settled grade; only a grading surface should edit it. */
+  readOnly?: boolean;
+  overallFeedback?: string;
 }
 
 export default function FRQFeedbackRenderer({
   feedbackData,
+  readOnly = false,
+  overallFeedback,
 }: FRQFeedbackRendererProps) {
   const [currentFrqIndex, setCurrentFrqIndex] = useState(0);
 
-  const initialData =
-    feedbackData ?? (fallbackFeedbackData as FRQFeedbackDocument);
-
   const [data, setData] = useState<FRQFeedbackDocument>(() =>
-    structuredClone(initialData),
+    structuredClone(feedbackData),
   );
 
   const currentFrq = data.frqs[currentFrqIndex];
@@ -114,6 +120,8 @@ export default function FRQFeedbackRenderer({
       feedbackData={data}
       currentFrq={currentFrq}
       currentFrqIndex={currentFrqIndex}
+      readOnly={readOnly}
+      overallFeedback={overallFeedback}
       onPrevious={goToPreviousFrq}
       onNext={goToNextFrq}
       onJumpToFrq={jumpToFrq}
diff --git a/src/lib/frq/feedbackDocument.ts b/src/lib/frq/feedbackDocument.ts
new file mode 100644
index 00000000..91d4b82a
--- /dev/null
+++ b/src/lib/frq/feedbackDocument.ts
@@ -0,0 +1,97 @@
+import type { FRQFeedbackDocument } from "@/components/frq/feedback/types";
+import type { FRQTemplate, GradedFRQSubmission } from "@/types/frq";
+import type { Timestamp } from "firebase/firestore";
+import { toQuestionInput } from "./template";
+
+const formatTimestamp = (value: Timestamp | undefined) => {
+  if (!value || typeof value.toDate !== "function") {
+    return "";
+  }
+
+  try {
+    return value.toDate().toLocaleString();
+  } catch {
+    return "";
+  }
+};
+
+/**
+ * Rebuild the rubric-shaped document the feedback UI renders from the two
+ * things actually stored: the graded submission and the template it was graded
+ * against. The renderer needs the full question/criterion tree, and only the
+ * template has it — a graded submission stores just the awarded points, keyed
+ * by the ids the template defines.
+ */
+export const buildFeedbackDocument = (
+  graded: GradedFRQSubmission,
+  template: FRQTemplate,
+): FRQFeedbackDocument => {
+  const grades = graded.grades ?? [];
+
+  return {
+    name: template.title,
+    creatorID: "",
+    mostRecentEditor: graded.graderId,
+    id: graded.sourceSubmissionId,
+    isVisible: true,
+
+    feedback: {
+      id: graded.sourceSubmissionId,
+      graderId: graded.graderId,
+      submittedAt: formatTimestamp(graded.gradedAt),
+      questions: template.questions.map((question) => {
+        const partGrade = grades.find(
+          (grade) => grade.questionId === question.id,
+        );
+
+        return {
+          questionId: question.id,
+          feedback: partGrade?.feedback ?? "",
+          // Every criterion gets a row even when the grader left it at zero, so
+          // the student sees the whole rubric rather than only what was earned.
+          gradingCriteria: (question.criteria ?? []).map((criterion) => ({
+            criterionId: criterion.id,
+            points:
+              partGrade?.criteria.find(
+                (score) => score.criterionId === criterion.id,
+              )?.points ?? 0,
+          })),
+        };
+      }),
+    },
+
+    response: {
+      id: graded.sourceSubmissionId,
+      userId: graded.studentId,
+      submittedAt: formatTimestamp(graded.submittedAt),
+      answers: template.questions.map((question) => ({
+        questionId: question.id,
+        value: graded.responses?.[question.id] ?? "",
+      })),
+    },
+
+    frqs: [
+      {
+        id: template.id ?? graded.templateId,
+        name: template.title,
+        description: toQuestionInput(
+          template.directions,
+          template.directionsFiles,
+        ),
+        isVisible: true,
+        questions: template.questions.map((question) => ({
+          id: question.id,
+          name: question.title,
+          isVisible: question.status !== "legacy",
+          prompt: toQuestionInput(question.prompt, question.promptFiles),
+          answerType: "text" as const,
+          gradingCriteria: (question.criteria ?? []).map((criterion) => ({
+            id: criterion.id,
+            text: criterion.description,
+            points: criterion.points,
+          })),
+        })),
+      },
+    ],
+  };
+};