Course view

# Course view

The teacher-facing class page, scoped to a single course. Redesigned from a 7-tab interface down to 2 tabs — Students and Assignments — with status-badge drilldowns and batch grading/release actions.

## Current status

`yawp-2.0` PR #101 is open. It remains ready for engineering/product QA, but the rollout call is explicit: treat this as feature-flagged, not a direct replacement. Internal QA and Brian signoff come before a Saint Joe's Prep pilot. Paste-activity drilldown stays deferred behind [paste-alert-detection-broken](../bugs/paste-alert-detection-broken.md).

## Problem

The previous class page had 7 tabs: In Progress, Submitted, Graded, Released, Assignments, Paste Activity, Students. Each tab was a separate slice of the same course's work. Teachers had to jump between tabs to build a picture of what needed attention, and there was no way to act on multiple essays at once — grading or releasing meant opening each submission individually.

## What's been built (PR #101 in yawp-2.0)

### Layout

- Reduced tabs from 7 → 2: **Students** | **Assignments**
- **"+ Create New Assignment"** button is always visible above the tab content, regardless of active tab
- Removed the summary stats cards (Students, In Progress, Submitted, To Release counts)
- Removed the assignment filter dropdown
- Defaults to the **Students** tab on load

### Assignments tab

A table with one row per assignment. Each row shows the assignment name, due date, and per-status counts as color-coded badges:

| Color | Status | Meaning |
|---|---|---|
| Orange | Submitted | Needs grading — teacher action required |
| Blue | Graded | Graded but not released — waiting on teacher |
| Red | Paste alerts | Copy/paste activity detected |
| Default | In Progress / Released | No action needed |

Each badge count is a **clickable link** that navigates to a filtered drilldown list for that assignment at that status. The assignment title itself is plain text — not a link.

### Students tab

Roster of enrolled students. Each row has a **View Details** link that opens a student details panel showing the student's work organized by state: Submitted, Graded, Released, and Drafts in progress. This is a second route to a student's work alongside the Assignments tab drilldowns.

### Submitted drilldown

Filtered list of papers for a given assignment that are in the Submitted state (ungraded). Features:

- Per-row checkboxes and a Select All checkbox
- **"Grade with AI"** button — disabled until at least one row is checked
- Selecting and clicking starts sequential AI grading in the browser; per-row status indicators update as each essay grades; completed essays drop off the list automatically
- Already-graded essays are excluded from this view

### Graded drilldown

Filtered list of papers graded but not yet released. Features:

- Same checkbox + Select All pattern as the Submitted drilldown
- **"Release Grades"** button — greyed out until at least one row is selected; shows count when active, e.g. "Release Grades (3)"
- Clicking sends all selected IDs to the release API in one POST; released essays drop off the list; a prompt links to the Released tab to confirm

## UX sketch

```
+------------------------------------------------------------------+
| Period 1 English                                                  |
| [ + Create New Assignment ]                                       |
+------------------------------------------------------------------+
| [ Students ]  [ Assignments ]                                     |
+------------------------------------------------------------------+

  Students tab (default):
  +----------------------------------------------------------------+
  | Ada Lovelace            3 docs     [View Details]              |
  | Alan Turing             1 doc      [View Details]              |
  | Grace Hopper            2 docs     [View Details]              |
  +----------------------------------------------------------------+

  Student details panel (opens on View Details):
  +----------------------------------------------------------------+
  | Ada Lovelace                                           [Close] |
  | Submitted                                                       |
  |   Macbeth essay — submitted May 8                              |
  | Graded                                                          |
  |   Reading reflection — B+                                      |
  | Released                                                        |
  |   ...                                                           |
  | Drafts in progress                                              |
  |   Op-ed draft — last edited May 9                              |
  +----------------------------------------------------------------+

  Assignments tab:
  +----------------------------------------------------------------+
  | Assignment         Due     In Prog  Submitted  Graded  Paste  |
  | Macbeth essay      May 10  11       [3]        [1]     [0]    |
  |                            (grey)   (orange)   (blue)  (grey) |
  | Reading reflection May 5   0        0          0       0      |
  |                    (past)  all released                        |
  +----------------------------------------------------------------+

  Submitted drilldown (clicking orange "3" on Macbeth essay):
  +----------------------------------------------------------------+
  | Macbeth essay — Submitted (3)                                  |
  | [ ] Select All                        [ Grade with AI ]        |
  | [x] Ada Lovelace    submitted May 8   [View]                   |
  | [x] Alan Turing     submitted May 7   [View]                   |
  | [ ] Linus Torvalds  submitted May 6   [View]                   |
  +----------------------------------------------------------------+

  Graded drilldown (clicking blue "1" on Macbeth essay):
  +----------------------------------------------------------------+
  | Macbeth essay — Graded (1)                                     |
  | [ ] Select All              [ Release Grades (1) ]             |
  | [x] Grace Hopper   B+   graded May 7   [View]                  |
  +----------------------------------------------------------------+
```

## Open design questions

### Paste activity — blocked on bug fix (Bryant)

The paste alert count shows in the Assignments table and highlights red when non-zero, but clicking it does nothing. Paste alert detection is also currently broken — see `bugs/paste-alert-detection-broken.md`. No point designing the drilldown UI until the underlying detection is reliable. Bryant owns the bug; UI design for paste activity resumes after that's resolved.

### Student row status signals

The design principle for this page is that teachers organize their work around **students** and **assignments** — the two-tab structure reflects that directly. A status signal on the student row (e.g. a small badge for ungraded submissions) could reinforce that without adding a third organizational layer, but only if it stays genuinely low-noise. A badge showing "2 submitted" on a 50-student roster adds useful signal; a full status breakdown per row would defeat the purpose of having a details panel.

Decision: **lean toward a minimal badge**, but don't ship it speculatively — wait until teachers report friction opening the panel before adding row-level indicators. When it does ship, one badge maximum per row, showing only the most actionable state (submitted > graded unreleased > none).

### Assignment title click

The assignment title in the Assignments table is currently plain text. A full assignment detail page — showing the prompt, rubric, and all docs together — is a natural next step but hasn't been designed. Clickable status badges handle the "get to work" use case; the title click would handle the "inspect the assignment itself" use case. Deferred.

### Rollout — feature flag vs. direct replacement (Bryant + Brian)

Not decided. Saint Joe's Prep has been discussed as a first pilot for Kevin to test before broader rollout. Bryant and Brian to decide whether this ships behind a flag or replaces the existing class page directly for the pilot school first.

## Domain notes

- **Course** — the page is scoped to one Course; all data shown is filtered to it.
- **AssignmentType** — each row in the Assignments table corresponds to an AssignmentType active in this course.
- **Assignment** — per-student instances; status badge counts aggregate Assignment statuses across all students in the course for that AssignmentType.
- **Submission** — the grading drilldowns work at the Submission level (most recent submission per Assignment).
- **Document** — the student details panel surfaces active drafts via the underlying Document, not a Submission (no submission exists yet for in-progress drafts).

## Data model implications

No schema changes. This is a UI redesign over the existing data model. The main data operations:

- **Batch AI grading** — triggers the existing per-submission AI grading endpoint sequentially; no new API shape needed, just orchestration in the client.
- **Batch grade release** — single POST with an array of submission IDs; server sets `releasedAt` for each. If a bulk-release endpoint doesn't already exist, it needs to be added.

## File paths in `yawp-2.0` likely to change

These are informed by the PR #101 branch (`claude/redesign-class-page-tabs-ggL4Z` in yawp-2.0) — engineering should use the actual branch as ground truth:

- `services/web-app/app/routes/app.my-classes.$courseId/route.tsx` — 2-tab layout, Create New Assignment button
- `services/web-app/app/routes/app.my-classes.$courseId/components/assignments-table.tsx` — color-coded badge counts, clickable links
- `services/web-app/app/routes/app.my-classes.$courseId/components/students-table.tsx` — roster + View Details
- `services/web-app/app/routes/app.my-classes.$courseId/components/student-details-panel.tsx` — slide-in panel, categorized sections
- `services/web-app/app/routes/app.my-classes.$courseId/components/submitted-drilldown.tsx` — checkbox list + batch AI grading
- `services/web-app/app/routes/app.my-classes.$courseId/components/graded-drilldown.tsx` — checkbox list + batch release
- `services/web-app/app/routes/api.submissions.batch-release/route.ts` — bulk release endpoint (may already exist)

## Edge cases

- Teacher has no assignments in the course yet: Assignments tab shows empty state; "Create New Assignment" button is the primary CTA.
- All assignments fully released: Assignments tab shows all-grey badge rows (no orange, no blue); no pending action needed.
- Large roster (UA professor, 50+ students): Students tab should paginate or virtualize — full list rendered client-side will lag.
- Batch AI grading in progress and teacher navigates away: in-flight grading requests will complete but the UI state (drop-off animation, row removal) is lost. Should warn before navigating if grading is in progress.
- Batch release partial failure (one submission ID fails the server check): surface which ones failed rather than silently skipping. Design still needed.
- Student enrolled after an assignment was created: they may not have an Assignment row for earlier AssignmentTypes. They'll appear in the Students tab but not in the badge counts for that assignment.
- Paste alert count is non-zero but the detection bug is still present: misleading red badge. Gated on `bugs/paste-alert-detection-broken.md` being fixed first.

## Test plan

Unit:
- Assignments table aggregation: given a set of Assignment rows in mixed statuses, badge counts match expected values per status.
- Batch release endpoint: sets `releasedAt` on all provided IDs; skips already-released IDs without error; rejects IDs not owned by the requesting teacher.
- Batch AI grading: sequential execution order is correct; a failure on one essay does not abort the rest; failed rows stay on the list with an error state.

Integration:
- Render test: Assignments tab with zero, one, and many assignments.
- Render test: Students tab with the student details panel open.
- Render test: Submitted drilldown with checkboxes and the Grade with AI button.
- Render test: Graded drilldown — Release Grades button disabled with no selection, enabled with selection, shows correct count.

Manual QA:
- Color coding: orange badge for submitted, blue for graded unreleased, red for paste alerts, grey for in-progress and released.
- Clicking a badge navigates to the correct drilldown with the correct filtered list.
- Batch AI grading: selecting all and clicking Grade with AI grades each essay in sequence; rows drop off as they complete.
- Batch release: select subset, click Release Grades, confirm count, verify essays drop off and appear in Released.
- Student details panel: opens on View Details, shows correct categorized sections, closes cleanly.
- Create New Assignment button is visible on both tabs.

## Rollout

The PR is already in progress on the `claude/redesign-class-page-tabs-ggL4Z` branch in `yawp-2.0`. Feature flag vs. direct replacement is Bryant and Brian's call. Saint Joe's Prep has been discussed as the first pilot school so Kevin can test before broader rollout.

## Open questions for Bryant — resolve before building

Two things don't need to be specced in advance, but Bryant should decide them before writing code:

1. **Rollout plan** — feature flag or direct replacement? Saint Joe's Prep has been discussed as first pilot for Kevin to test. Bryant + Brian to call this before merging anything to production.

2. **Paste activity drilldown** — the red badge currently goes nowhere, and paste alert detection is still broken (`bugs/paste-alert-detection-broken.md`). Don't design or build the paste drilldown until the detection bug is fixed. For now, make the red badge non-clickable (or omit it entirely) so it doesn't confuse teachers.

## Engineering handoff checklist

- [x] Domain context covered
- [x] File paths in `yawp-2.0` listed
- [x] Data model implications spelled out
- [x] UX sketch in prose
- [x] Edge cases enumerated
- [x] Test plan written
- [ ] Rollout plan decided (Bryant + Brian)
- [ ] Paste activity drilldown (blocked on bug fix)