@anantagnanam/lms 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @anantagnanam/lms
 
-A native LMS for EmDash 1.4 with Astro 7 and React 19. Version 0.2.0 provides free courses, flexible enrollment, cohorts, lessons, quizzes, assignments, progress, certificates, discussions, moderation, reporting, notifications, published course editions, learning paths, a private library, and native media resume.
+A native LMS for EmDash 1.4 with Astro 7 and React 19. Version 0.3.0 provides free courses, flexible enrollment, cohorts, lessons, quizzes, assignments, progress, certificates, discussions, moderation, reporting, notifications, published course editions, learning paths, a private library, native media resume, recoverable assignment drafts, rubric grading, private notebooks, course agendas and transcript search.
 
 This is a free preview release. Before upgrading from 0.1.0, back up the full host database, rebuild the site, and run **LMS settings → Course edition migration** until complete. Do not downgrade after migration begins. Production database/auth/email verification, backup restoration, accessibility and capacity checks remain operator release gates. Payment processing is deferred.
 
@@ -9,7 +9,7 @@ This is a free preview release. Before upgrading from 0.1.0, back up the full ho
 Install the public npm release in an existing EmDash site:
 
 ```sh
-npm install --save-exact @anantagnanam/lms@0.2.0
+npm install --save-exact @anantagnanam/lms@0.3.0
 ```
 
 This is a trusted native dependency configured by the site developer. Local builds can also be installed from their release tarball.
@@ -44,6 +44,7 @@ After rebuilding the site, visit:
 - `/academy`: course catalog
 - `/academy/my-learning`: learner dashboard
 - `/academy/my-learning/library`: saved courses, joined path progress, preferences and own-data downloads
+- `/academy/my-learning/study`: private course notebooks and agendas
 - `/academy/paths`: published learning paths
 - `/academy/teach`: instructor course studio
 - `/academy/teach/courses/<courseId>/lessons/<lessonId>`: private saved author preview
@@ -57,6 +58,22 @@ Existing courses now have separate saved drafts and published editions. Save a d
 
 After upgrading, run **LMS settings → Course edition migration** batches until complete. Checkpoints survive interruption; courses also upgrade lazily before editing or enrollment. Keep a full database backup: course exports contain only draft curriculum, and this migration is not a full backup or cross-site import. Publication scheduling, editorial review and moving existing enrollments between editions remain future work.
 
+## Assignment workflow enhancements
+
+Version 0.3.0 adds private assignment autosave/recovery, explicit conflict review, safe submission retries, optional grading rubrics, and feedback history across resubmissions. Rubrics support up to 20 criteria and 1000 total points; criteria and passing rules are frozen with each submission from the learner's enrolled course edition. Staff score each criterion and the server totals the grade. Existing submissions keep scalar grading.
+
+Saved drafts are excluded from staff APIs and included in the learner's own data export. The browser must stay open for unacknowledged work; offline drafts, private file uploads, late policies and audited regrading are not included. Custom clients should send `expectedDraftRevision` for draft writes/submission and a stable `submissionId` for retryable submission. See the repository API and operator guides for recovery semantics.
+
+## Study tools
+
+Version 0.3.0 adds searchable course notebooks with multiple notes, stars, archive/restore, and playback bookmarks. Native audio/video can capture the current time and jump back from a saved note without autoplay. Transcript search highlights plain-text matches with previous/next controls. Embedded providers retain their own playback behavior.
+
+Notebooks preserve existing lesson summaries, stay private from staff, and remain readable in the notebook and learner export after access expires. Creating, editing, archiving and restoring require current lesson access. Each course supports up to 100 notes of 5000 characters, with a 150,000-byte serialized notebook budget; archived entries count toward both limits. Saves require the last acknowledged revision and preserve local text after conflicts. Keep the page open until a save is confirmed; no offline note store is included.
+
+The course agenda lists assignment deadlines, live sessions and future lesson releases from the enrolled edition, displays the selected timezone and downloads upcoming events as `.ics`. This is a private snapshot, not a subscription or automatic reminder. It contains authenticated lesson links, not meeting credentials. Calendar apps retain downloaded data independently of later course access changes.
+
+Custom clients must send `expectedRevision` to the existing `learner/note` route; legacy summaries begin at revision zero. New notebook clients use stable note IDs and retry identical unacknowledged requests. See the API guide for the full contract.
+
 ## Enrollment and access
 
 `open` courses enroll learners immediately. `approval` courses create pending requests. `invite` courses require administrator enrollment. Cohort membership always requires an administrator decision. Administrators can reject, suspend, restore, cancel, and date access without deleting progress.

package/astro/assignment-player.ts

@@ -0,0 +1,231 @@
+import { DraftQueue, type DraftState } from "./draft-queue.js";
+import type { AssignmentState } from "@anantagnanam/lms/types";
+
+type Call = <T>(route: string, input: Record<string, unknown>, method?: string) => Promise<T>;
+type Values = { body: string; attachmentUrl: string | null };
+
+export function initializeAssignments(call: Call) {
+  for (const form of document.querySelectorAll<HTMLFormElement>(
+    "form[data-lms-assignment]:not([data-lms-bound])",
+  )) {
+    form.dataset.lmsBound = "true";
+    bindAssignment(form, call);
+  }
+}
+
+function bindAssignment(form: HTMLFormElement, call: Call) {
+  const body = form.elements.namedItem("body") as HTMLTextAreaElement;
+  const attachment = form.elements.namedItem("attachmentUrl") as HTMLInputElement;
+  const save = form.querySelector<HTMLButtonElement>("[data-lms-save-draft]")!;
+  const submit = form.querySelector<HTMLButtonElement>('button[type="submit"]')!;
+  const status = form.querySelector<HTMLElement>("[data-lms-feedback]")!;
+  const conflict = form.querySelector<HTMLElement>("[data-lms-assignment-conflict]")!;
+  const savedText = conflict.querySelector<HTMLElement>("[data-lms-saved-draft]")!;
+  const review = form.querySelector<HTMLButtonElement>("[data-lms-review-draft]")!;
+  const useSaved = conflict.querySelector<HTMLButtonElement>("[data-lms-use-saved]")!;
+  const keepLocal = conflict.querySelector<HTMLButtonElement>("[data-lms-keep-local]")!;
+  const input = { courseId: form.dataset.courseId!, lessonId: form.dataset.lessonId! };
+  const values = (): Values => ({
+    body: body.value,
+    attachmentUrl: attachment.value.trim() || null,
+  });
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let busy = false;
+  let closed = false;
+  let disposed = false;
+  let submitted = false;
+  let remote: AssignmentState | undefined;
+  let reviewing: Promise<void> | undefined;
+  let request:
+    (Values & typeof input & { submissionId: string; expectedDraftRevision: number }) | undefined;
+  const tell = (text: string, error = false) => {
+    status.textContent = text;
+    status.setAttribute("role", error ? "alert" : "status");
+  };
+  const controls = () => {
+    body.readOnly = attachment.readOnly = busy || !!request;
+    save.disabled = busy || closed || !!request || queue.state === "conflict";
+    submit.disabled = busy || closed || queue.state === "conflict";
+    review.disabled = busy;
+    useSaved.disabled = keepLocal.disabled = busy || closed;
+    review.hidden = queue.state !== "conflict";
+  };
+  const changed = (state: DraftState) => {
+    const messages: Record<DraftState, string> = {
+      saved: "Draft saved. Only you can see it until submission.",
+      pending: "Unsaved changes…",
+      saving: "Saving draft…",
+      failed: "Draft not saved. Keep this page open and choose Retry save.",
+      conflict: "Another request changed this assignment. Review the saved work before continuing.",
+    };
+    tell(messages[state], state === "failed" || state === "conflict");
+    save.textContent = state === "failed" ? "Retry save" : "Save draft";
+    controls();
+  };
+  const queue = new DraftQueue<Values>(
+    values(),
+    Number(form.dataset.draftRevision ?? 0),
+    (write) =>
+      call("learner/assignment/draft", {
+        ...input,
+        ...write.value,
+        expectedDraftRevision: write.expectedDraftRevision,
+      }),
+    changed,
+  );
+
+  const refreshConflict = () =>
+    (reviewing ??= loadConflict().finally(() => {
+      reviewing = undefined;
+    }));
+  const loadConflict = async () => {
+    busy = true;
+    controls();
+    try {
+      remote = await call<AssignmentState>("learner/assignment/state", input, "GET");
+      if (disposed) return;
+      conflict.hidden = false;
+      closed = !remote.canSubmit;
+      savedText.textContent =
+        remote.submission && closed
+          ? `Submitted work:\n${remote.submission.body}\n${remote.submission.attachmentUrl ?? ""}`
+          : `${remote.draft.body || "(Empty saved draft)"}\n${remote.draft.attachmentUrl ?? ""}`;
+      if (closed)
+        tell(
+          `${remote.closedReason} Your local text is still in the form; copy it before leaving.`,
+          true,
+        );
+      else tell("Compare the saved draft below with your work, then choose which to keep.", true);
+    } catch (error) {
+      if (disposed) return;
+      tell(
+        `Could not load the saved work. ${error instanceof Error ? error.message : "Try again."}`,
+        true,
+      );
+    } finally {
+      busy = false;
+      controls();
+    }
+  };
+  const saveDraft = async () => {
+    if (busy || closed || request || disposed) return;
+    clearTimeout(timer);
+    queue.update(values());
+    if (!attachment.checkValidity()) {
+      tell("Correct the attachment URL before saving.", true);
+      return;
+    }
+    try {
+      await queue.flush();
+    } catch (error) {
+      if (disposed) return;
+      if (queue.state === "conflict") await refreshConflict();
+      else
+        tell(
+          `Draft not saved. ${error instanceof Error ? error.message : "Try again."} Use Retry save.`,
+          true,
+        );
+    }
+  };
+  for (const field of [body, attachment])
+    field.addEventListener("input", () => {
+      queue.update(values());
+      clearTimeout(timer);
+      if (!["failed", "conflict"].includes(queue.state))
+        timer = setTimeout(() => void saveDraft(), 900);
+    });
+  save.addEventListener("click", () => void saveDraft());
+  review.addEventListener("click", () => void refreshConflict());
+  for (const [button, keep] of [
+    [useSaved, false],
+    [keepLocal, true],
+  ] as const)
+    button.addEventListener("click", () => {
+      if (!remote || busy || closed) return;
+      if (!keep) {
+        body.value = remote.draft.body;
+        attachment.value = remote.draft.attachmentUrl ?? "";
+      }
+      queue.update(values());
+      queue.reconcile(
+        { body: remote.draft.body, attachmentUrl: remote.draft.attachmentUrl },
+        remote.draft.revision,
+        keep,
+      );
+      conflict.hidden = true;
+      remote = undefined;
+      if (keep) void saveDraft();
+    });
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    if (busy || closed || queue.state === "conflict") return;
+    if (!request && (!form.reportValidity() || !body.value.trim())) {
+      tell("Write your assignment before submitting.", true);
+      return;
+    }
+    clearTimeout(timer);
+    busy = true;
+    controls();
+    try {
+      if (!request) {
+        queue.update(values());
+        await queue.flush();
+        if (disposed) return;
+        request = {
+          ...input,
+          ...values(),
+          submissionId: crypto.randomUUID(),
+          expectedDraftRevision: queue.revision,
+        };
+      }
+      tell("Submitting assignment…");
+      await call("learner/assignment", request);
+      if (disposed) return;
+      submitted = true;
+      queue.dispose();
+      window.location.reload();
+    } catch (error) {
+      if (disposed) return;
+      const failure = error as { code?: string; status?: number };
+      if (failure.code === "DRAFT_CONFLICT") {
+        request = undefined;
+        queue.conflict();
+        await refreshConflict();
+      } else if (
+        !request ||
+        (failure.status && failure.status < 500 && failure.status !== 408 && failure.status !== 429)
+      ) {
+        request = undefined;
+        tell(
+          error instanceof Error ? error.message : "Could not submit. Your work is kept here.",
+          true,
+        );
+      } else {
+        tell(
+          "Submission status is unconfirmed. Retry submission to check the same request. Your work is kept here.",
+          true,
+        );
+        submit.textContent = "Retry submission";
+      }
+    } finally {
+      busy = false;
+      controls();
+    }
+  });
+  const warn = (event: BeforeUnloadEvent) => {
+    if (!submitted && (queue.dirty || busy || request)) {
+      event.preventDefault();
+    }
+  };
+  window.addEventListener("beforeunload", warn);
+  document.addEventListener(
+    "astro:before-swap",
+    () => {
+      disposed = true;
+      clearTimeout(timer);
+      queue.dispose();
+      window.removeEventListener("beforeunload", warn);
+    },
+    { once: true },
+  );
+}

package/astro/client.ts

@@ -1,6 +1,9 @@
 import { API_BASE } from "@anantagnanam/lms";
 import { renderQuiz } from "./quiz-player.js";
 import { initializeMedia } from "./media-player.js";
+import { initializeAssignments } from "./assignment-player.js";
+import { initializeStudyTools, protectStudyWork } from "./study-tools.js";
+import { initializeTranscripts } from "./transcript-search.js";
 import type { Discussion, Notification, Page, PublicQuizAttempt } from "@anantagnanam/lms/types";
 
 async function call<T>(route: string, input: Record<string, unknown>, method = "POST"): Promise<T> {
@@ -58,6 +61,16 @@ function forms() {
     "form[data-lms-route]:not([data-lms-bound])",
   )) {
     form.dataset.lmsBound = "true";
+    const noteField =
+      form.dataset.lmsRoute === "learner/note"
+        ? (form.elements.namedItem("note") as HTMLTextAreaElement)
+        : null;
+    let savedNote = noteField?.value;
+    if (noteField)
+      protectStudyWork(
+        form,
+        () => noteField.value !== savedNote || form.dataset.lmsBusy === "true",
+      );
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       if (form.dataset.lmsBusy === "true") return;
@@ -66,6 +79,8 @@ function forms() {
       if ("rating" in input) input.rating = Number(input.rating);
       if ("shared" in input) input.shared = input.shared === "true";
       if ("saved" in input) input.saved = input.saved === "true";
+      if (form.dataset.lmsRoute === "learner/note")
+        input.expectedRevision = Number(input.expectedRevision);
       if (form.dataset.lmsRoute === "learner/preferences/save") {
         input.data = {
           emailNotifications: input.emailNotifications === "true",
@@ -83,7 +98,12 @@ function forms() {
       feedback(form, "Saving…");
       try {
         const route = form.dataset.lmsRoute!;
-        const result = await call<{ status?: string }>(route, input);
+        const result = await call<{ status?: string; revision?: number }>(route, input);
+        if (route === "learner/note" && result.revision !== undefined) {
+          const revision = form.elements.namedItem("expectedRevision") as HTMLInputElement;
+          revision.value = String(result.revision);
+          savedNote = String(input.note);
+        }
         feedback(
           form,
           route === "learner/enroll"
@@ -249,9 +269,12 @@ async function updates(root: HTMLElement, cursor?: string, append = false) {
 }
 
 function initialize() {
+  initializeAssignments(call);
   forms();
   quizzes();
   initializeMedia(call);
+  initializeStudyTools(call);
+  initializeTranscripts();
   for (const root of document.querySelectorAll<HTMLElement>(
     "[data-lms-export]:not([data-lms-bound])",
   )) {

package/astro/components/AssignmentFeedback.astro

@@ -0,0 +1,32 @@
+---
+import type { AssignmentSubmission } from "@anantagnanam/lms/types";
+import AssignmentRubric from "./AssignmentRubric.astro";
+interface Props {
+  submission: AssignmentSubmission;
+}
+const { submission } = Astro.props;
+---
+
+<div class="lms-notice">
+  <strong>
+    {submission.status === "submitted"
+      ? "Submitted · awaiting feedback"
+      : `Graded · ${submission.points}/${submission.maxPoints} · ${submission.points! >= submission.passingPoints ? "Passed" : "Below passing grade"}`}
+  </strong>
+  <p>Submitted {new Date(submission.submittedAt).toLocaleString("en-IN")}</p>
+  {submission.gradedAt && <p>Graded {new Date(submission.gradedAt).toLocaleString("en-IN")}</p>}
+  {submission.feedback && <p class="lms-text">{submission.feedback}</p>}
+  <AssignmentRubric
+    rubric={submission.rubric}
+    scores={submission.status === "graded" ? submission.rubricScores : undefined}
+  />
+  <details>
+    <summary>Your submitted work</summary>
+    <p class="lms-text">{submission.body}</p>
+    {submission.attachmentUrl && (
+      <a href={submission.attachmentUrl} target="_blank" rel="noopener noreferrer">
+        Open attachment ↗
+      </a>
+    )}
+  </details>
+</div>

package/astro/components/AssignmentRubric.astro

@@ -0,0 +1,27 @@
+---
+import type { RubricCriterion, RubricScore } from "@anantagnanam/lms/types";
+interface Props {
+  rubric?: RubricCriterion[];
+  scores?: RubricScore[];
+}
+const { rubric = [], scores } = Astro.props;
+---
+
+{rubric.length > 0 && (
+  <div class="lms-rubric">
+    <h3>{scores ? "Criterion feedback" : "Grading rubric"}</h3>
+    <ul>
+      {rubric.map((criterion) => {
+        const score = scores?.find((item) => item.criterionId === criterion.id);
+        return (
+          <li>
+            <strong>{criterion.title}</strong> · {score ? `${score.points}/` : ""}
+            {criterion.maxPoints} points
+            {criterion.description && <p class="lms-text">{criterion.description}</p>}
+            {score?.feedback && <p class="lms-text">{score.feedback}</p>}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+)}

package/astro/components/LearnerDashboard.astro

@@ -82,6 +82,9 @@ next.searchParams.set("cursor", page.cursor ?? "");
           <a class="lms-btn lms-btn-outline" href={courseUrl(basePath, course.slug)}>
             Course overview
           </a>
+          <a href={`${basePath}/my-learning/study?courseId=${encodeURIComponent(course.id)}`}>
+            Notebook &amp; agenda
+          </a>
           {enrollment.certificate && (
             <a
               class="lms-btn lms-btn-outline"

package/astro/components/LearningShell.astro

@@ -27,6 +27,12 @@ const path = Astro.url.pathname;
     {Astro.locals.user && Astro.locals.user.role >= 20 && (
       <a href={`${basePath}/teach`}>Course studio</a>
     )}
+    <a
+      href={`${basePath}/my-learning/study`}
+      aria-current={path === `${basePath}/my-learning/study` ? "page" : undefined}
+    >
+      Notebook &amp; agenda
+    </a>
   </nav>
   <main id="lms-main" class="lms-container">
     <slot />

package/astro/components/LessonContent.astro

@@ -18,9 +18,23 @@ const { lesson } = Astro.props;
   />
 )}
 {lesson.transcript && (
-  <details class="lms-resources">
+  <details class="lms-resources" data-lms-transcript>
     <summary>Read transcript</summary>
-    <p class="lms-text">{lesson.transcript}</p>
+    <div class="lms-actions">
+      <label>
+        Search transcript <input type="search" maxlength={200} data-lms-transcript-search />
+      </label>
+      <button type="button" class="lms-btn lms-btn-outline" data-lms-transcript-previous disabled>
+        Previous match
+      </button>
+      <button type="button" class="lms-btn lms-btn-outline" data-lms-transcript-next disabled>
+        Next match
+      </button>
+    </div>
+    <p data-lms-transcript-status aria-live="polite"></p>
+    <p class="lms-text" data-lms-transcript-text>
+      {lesson.transcript}
+    </p>
   </details>
 )}
 <div class="lms-lesson-body">

package/astro/components/LessonPlayer.astro

@@ -1,13 +1,15 @@
 ---
 import LessonContent from "./LessonContent.astro";
 import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
+import AssignmentRubric from "./AssignmentRubric.astro";
+import AssignmentFeedback from "./AssignmentFeedback.astro";
 import type {
   CourseDetail,
   PublicLesson,
   PublicEnrollment,
   ProgressSummary,
 } from "@anantagnanam/lms/types";
-import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
+import { courseUrl, lessonUrl, certificateUrl, assignmentBlock } from "@anantagnanam/lms/server";
 import { basePath } from "virtual:anantagnanam-lms/config";
 interface Props {
   course: CourseDetail;
@@ -29,6 +31,14 @@ const current = enrollment?.progress[lesson.id];
 const complete = Boolean(current?.completedAt);
 const attempt = current?.quizAttempts.at(-1);
 const assignment = current?.assignments.at(-1);
+const draft = current?.assignmentDraft;
+const assignmentClosed = lesson.assignment
+  ? assignmentBlock(
+      lesson.assignment,
+      current ?? { completedAt: null, assignments: [] },
+      new Date(),
+    )
+  : null;
 ---
 
 <nav class="lms-breadcrumbs" aria-label="Breadcrumb">
@@ -168,45 +178,90 @@ const assignment = current?.assignments.at(-1);
             ? ` · Due ${new Date(lesson.assignment.dueAt).toLocaleString("en-IN")}`
             : ""}
         </p>
-        {assignment && (
-          <div class="lms-notice">
-            <strong>
-              {assignment.status === "submitted"
-                ? "Submitted · awaiting feedback"
-                : `Graded · ${assignment.points}/${assignment.maxPoints}`}
-            </strong>
-            <p class="lms-text">{assignment.feedback}</p>
-            <details>
-              <summary>Your submission</summary>
-              <p class="lms-text">{assignment.body}</p>
-              {assignment.attachmentUrl && (
-                <a href={assignment.attachmentUrl} target="_blank" rel="noopener noreferrer">
-                  Open attachment ↗
-                </a>
-              )}
-            </details>
-          </div>
+        <AssignmentRubric rubric={lesson.assignment.rubric} />
+        {assignment && <AssignmentFeedback submission={assignment} />}
+        {(current?.assignments.length ?? 0) > 1 && (
+          <details>
+            <summary>Earlier submissions and feedback ({current!.assignments.length - 1})</summary>
+            {current!.assignments
+              .slice(0, -1)
+              .toReversed()
+              .map((item) => (
+                <AssignmentFeedback submission={item} />
+              ))}
+          </details>
         )}
-        {!complete &&
-          (!assignment ||
-            (assignment.status === "graded" && lesson.assignment.allowResubmission)) && (
-            <form class="lms-form" data-lms-route="learner/assignment" data-lms-reload>
-              <input type="hidden" name="courseId" value={course.id} />
-              <input type="hidden" name="lessonId" value={lesson.id} />
-              <label>
-                <span>Your work</span>
-                <textarea name="body" required rows={8} maxlength={20_000}></textarea>
-              </label>
-              <label>
-                <span>Attachment link (optional)</span>
-                <input name="attachmentUrl" type="url" placeholder="https://…" />
-              </label>
-              <button class="lms-btn" type="submit">
-                Submit assignment
+        {assignmentClosed ? (
+          <>
+            <p class="lms-notice">{assignmentClosed.message}</p>
+            {(draft?.body || draft?.attachmentUrl) && (
+              <details open>
+                <summary>Your saved draft (not submitted)</summary>
+                <p class="lms-text">{draft.body}</p>
+                {draft.attachmentUrl && (
+                  <a href={draft.attachmentUrl} target="_blank" rel="noopener noreferrer">
+                    Open draft attachment ↗
+                  </a>
+                )}
+              </details>
+            )}
+          </>
+        ) : (
+          <form
+            class="lms-form"
+            data-lms-assignment
+            data-course-id={course.id}
+            data-lesson-id={lesson.id}
+            data-draft-revision={draft?.revision ?? 0}
+          >
+            <p>Drafts save automatically. Only you can see your draft until you submit it.</p>
+            <label>
+              <span>Your work</span>
+              <textarea
+                name="body"
+                required
+                rows={8}
+                maxlength={20_000}
+              >{draft?.body ?? ""}</textarea>
+            </label>
+            <label>
+              <span>Attachment link (optional)</span>
+              <input
+                name="attachmentUrl"
+                type="url"
+                placeholder="https://…"
+                value={draft?.attachmentUrl ?? ""}
+              />
+            </label>
+            <button class="lms-btn lms-btn-outline" type="button" data-lms-save-draft>
+              Save draft
+            </button>
+            <button class="lms-btn" type="submit">
+              Submit assignment
+            </button>
+            <p data-lms-feedback aria-live="polite">
+              {draft?.updatedAt ? "Saved draft restored." : "Your draft is empty."}
+            </p>
+            <button class="lms-btn lms-btn-outline" type="button" data-lms-review-draft hidden>
+              Review saved work
+            </button>
+            <section
+              class="lms-notice"
+              data-lms-assignment-conflict
+              hidden
+              aria-label="Review saved work"
+            >
+              <h3>Saved work</h3>
+              <p class="lms-text" data-lms-saved-draft></p>
+              <button class="lms-btn lms-btn-outline" type="button" data-lms-use-saved>
+                Use saved draft
               </button>
-              <p data-lms-feedback aria-live="polite"></p>
-            </form>
-          )}
+              <button class="lms-btn lms-btn-outline" type="button" data-lms-keep-local>
+                Keep my local draft
+              </button>
+            </section>
+          </form>
+        )}
       </section>
     )}
     {!preview && !["quiz", "assignment"].includes(lesson.kind) && (
@@ -262,6 +317,7 @@ const assignment = current?.assignments.at(-1);
           <h2>A note to your future self</h2>
           <p class="lms-muted">Only you can see these notes.</p>
           <form class="lms-form" data-lms-route="learner/note">
+            <input type="hidden" name="expectedRevision" value={current?.noteRevision ?? 0} />
             <input type="hidden" name="courseId" value={course.id} />
             <input type="hidden" name="lessonId" value={lesson.id} />
             <label>
@@ -273,6 +329,38 @@ const assignment = current?.assignments.at(-1);
             </button>
             <p data-lms-feedback aria-live="polite"></p>
           </form>
+          <p>
+            <a href={`${basePath}/my-learning/study?courseId=${encodeURIComponent(course.id)}`}>
+              Open course notebook &amp; agenda →
+            </a>
+          </p>
+          <section data-lms-quick-note data-course-id={course.id} data-lesson-id={lesson.id}>
+            <h3>Notes &amp; bookmarks</h3>
+            <p>
+              Save a separate thought or bookmark the current moment in native audio/video. Only you
+              can see it.
+            </p>
+            <form class="lms-form">
+              <label>
+                <span>New note</span>
+                <textarea name="body" rows={3} maxlength={5000}></textarea>
+              </label>
+              <label>
+                <input type="checkbox" name="starred" /> Star this note
+              </label>
+              <button type="button" class="lms-btn lms-btn-outline" data-lms-capture-time hidden>
+                Use current playback time
+              </button>
+              <p data-lms-note-time></p>
+              <button type="button" class="lms-text-button" data-lms-clear-time hidden>
+                Remove timestamp
+              </button>
+              <button type="submit" class="lms-btn lms-btn-outline">
+                Add to notebook
+              </button>
+              <p data-lms-feedback aria-live="polite"></p>
+            </form>
+          </section>
         </section>
         <section
           class="lms-content-section"