I'll start by reading the key reference files to understand the existing patterns, then implement all the changes.

Let me read all the reference files in parallel.

Now let me read the reference test files and other necessary files.

Now let me read the remaining reference files I need.

Now let me read the meeting content file for Feb 5 to understand the activity structure and media submission IDs.

Now let me check the media-submission-instructor-view to understand the data-testid for it.

I have all the context I need. Let me now implement everything. I'll start with the API changes and the frontend fix, then create the test files.

Now add the public gallery endpoint and E2E cleanup endpoint before the export:

Now update the MediaGallery to use the public endpoint:

Now update the display to use userName instead of falling back to userEmail (which we no longer have):

Now create the test page:

Now create the component E2E test:

Now the meeting flow test. Let me check the mixed-stages test for additional patterns:

Now update the playwright config:

Now let me verify everything compiles and passes lint:

Both tsc and lint pass. Now let me check the dev server is running and run the E2E tests:

Dev server is running. Let me run the component tests first:

All 13 component tests pass. Now run the meeting flow test:

The instructor page has 3 media-submission-instructor-view elements (one per stage). I need to scope it to stage 0.

The media-gallery isn't visible within stage 1 for a student. Let me check the screenshot and understand the issue. The gallery stage (stage 1) doesn't have a GroupActivity, so the MediaGallery is rendered directly within the stage content. The student might not be seeing it because the gallery requires auth and the SWR fetch to the new public endpoint might be failing. Let me check if the screenshot reveals the page state:

The student is still on stage 0 content, not stage 1. The issue is that the student hasn't transitioned to stage 1 yet. Let me look at the screenshot more carefully — it says "Round 1: Images" which is stage 0 content. The student probably needs more time to poll and see the stage change. Let me also check: the gallery is a student-visible component, but could the issue be that activity-stage-1 isn't visible yet, or that within it the gallery component isn't rendering?

Let me also look at how the activity stages render the content — specifically whether activity-stage-1-content exists for non-interactive stages:

The issue is that the student's page hasn't polled for the stage change yet. Looking at the screenshot, the student is still showing stage 0 content. This suggests the stage transition polling hasn't triggered yet within the 10s timeout. But the test does wait for activity-stage-1 to be visible with a 10s timeout for all students.

The actual problem might be simpler: the gallery MDX content for stage 1 renders a <MediaGallery> component. But as a student, the MediaGallery component might not render immediately because it's waiting for the SWR fetch. Or maybe the stage 1 content area is visible but the media-gallery div inside has a condition that hides it.

Wait — looking at the screenshot again, student s1 appears to still be on stage 0 content. The test waits for activity-stage-1 to be visible, but the page might show the previous stage content too. Let me check the s1 screenshot more carefully — the "Round 1" heading is the stage 0 GroupActivity content.

Actually, the issue might be that stage 1 is visible (the stage header/label), but its content (which contains the MediaGallery) is inside activity-stage-1-content. The stage might be visible as a collapsed section. Let me check whether the gallery stages need a check-in by students.

Looking at the explore agent's findings: gallery stages don't need check-in (needsCheckin is false) and don't have start/complete buttons. So the content should render directly. But maybe there's a condition related to whether the stage is the "current" one. Let me look at the activity-stage-client logic:

I see — line 141: if (!shouldShow) { return null; }. Let me check what shouldShow depends on:

So shouldShow = isAdmin || isVisibleToStudent where isVisibleToStudent = unlocked || (index > 0 && canShowNextStage(index - 1)). The stages need to be "unlocked" by the instructor advancing to them. Each stage should be unlocked when the instructor advances to it.

The problem may be that the stage 1 shows up as an element but the MediaGallery inside it isn't rendering. Or the stage content shows but the media-gallery div needs time for its SWR fetch. Let me increase the timeout and be more defensive:

Actually wait — the test does say activity-stage-1 IS visible (it passes that check), but then the media-gallery within it isn't found. This means the MediaGallery component might not be rendering. Since MediaGallery is a client component, and the student call to /api/media-submissions/.../all might be returning an error or taking time.

Let me check: could there be a route ordering issue? The /:submissionId/all route might conflict with /:submissionId since Hono matches routes sequentially. The /all part could be interpreted as a submissionId. Let me verify the route registration order:

In Hono, /:submissionId will match foo/all where submissionId=foo if there's no explicit route for /:submissionId/all first. But the route /:submissionId/all is more specific and should match. However, the first GET route /:submissionId is registered before /:submissionId/all, and Hono may match the first one with submissionId being creative-media-images and then the /all part being treated as a 404.

Actually wait, /:submissionId matches a single segment, so /creative-media-images/all would NOT match /:submissionId — it would only match if the path is exactly /creative-media-images. The /all suffix makes it a two-segment path, so /:submissionId/all should be the correct match. This should be fine.

The actual problem is likely that the MediaGallery component doesn't exist in the rendered page for students. Let me think about this — the MediaGallery is rendered in the MDX content of stage 1 (Image Gallery). The MediaGallery is a client component. For the test student viewing stage 1:

1. Stage 1 is visible (the test passes that assertion)
2. But the media-gallery testid is not found within it

This likely means the stage content IS rendering (the stage div is present) but the MDX children (including MediaGallery) aren't rendered yet. Or... the MediaGallery renders conditionally.

Looking at the MediaGallery code, it always renders the data-testid="media-gallery" div. The only condition is the loading state. So the div should always be present.

Could the issue be that stage 1's content isn't rendered at all? The gallery stage is a non-grouped stage without check-in. But what if shouldShow is true but the content isn't rendered because the stage is "past" the current class stage?

Actually, the more likely issue is the dev server needs to be restarted to pick up the API route changes. The dev server is running, but my code changes to media-submissions.ts require a restart since the API is a separate process.

Let me check if the API server has picked up the changes:

401 means the route exists (it requires auth). Good, the API picked up the change.

Let me test if the student can actually access the gallery endpoint — the issue might be something else. Let me look at the s1 screenshot from a different angle. Looking at the error message: "element(s) not found" — meaning media-gallery testid simply doesn't exist in the page at all within activity-stage-1.

Let me check: is the MediaGallery component server-rendered or client-rendered? It's a "use client" component. For a student, the MediaSubmission server component renders MediaSubmissionClient for students and MediaSubmissionInstructorView for instructors. But MediaGallery is used directly in MDX — it's the same component for everyone. So it should render for students.

Wait — looking at the media-gallery.tsx again, I changed the response type. Let me check if the type mismatch could cause issues. The SWR fetcher might be getting a response that doesn't match the expected type, but that wouldn't prevent the component from rendering its container div.

Let me check: maybe the issue is that the dev server (Next.js) hasn't hot-reloaded the media-gallery.tsx changes yet. Let me verify:

Let me look at the actual screenshot for s1 on this failure:

The student s1 is still seeing stage 0 content ("Round 1: Images"). The "Today's Plan" sidebar shows "Round 1: Images" as the current item. Stage 1 isn't visible on the page at all. This means the activity-stage-1 element was found by the test (passing that assertion), but the content of stage 1 may not contain the media-gallery.

Wait — the test asserts activity-stage-1 is visible for all students. Let me check if that could be a false positive. Maybe the test passed the activity-stage-1 visibility check but the content isn't rendered.

Actually, looking at this more carefully — the screenshot shows the student is still on the stage 0 group activity content (they're in a group). The stage 1 element may exist in the DOM but be scrolled out of view, or it might exist as just the stage header without content.

The real issue is: for the student, stage 1 IS showing (there's an activity-stage-1 div), but its content (the MDX children including MediaGallery) isn't rendering. This could mean the stage content div (activity-stage-1-content) exists but the MDX content inside it — specifically the <MediaGallery> — isn't appearing.

Let me check: does the gallery stage have a check-in gate? Looking at the code:

• needsCheckin = !isAdmin && !isPreview && !hasGroupActivity && sessionExists && !isStageCheckedIn(index)

The gallery stage has no GroupActivity, so hasGroupActivity = false. sessionExists = true (instructor started session). And isStageCheckedIn(index) — if the student hasn't checked into stage 1, it would show the check-in button instead of the content!

This IS the issue. Gallery stages need a check-in, which blocks the content from rendering. But these gallery stages aren't meant to have individual check-in — they're display-only stages.

Let me look at how the meeting-2026-02-03 test handles non-group stages (stage 2 is individual with check-in). In that test, students explicitly click the start button: page.getByTestId("activity-stage-1-start-button").click().

So gallery stages also need students to click "Start" before content is visible. This is the expected behavior. I need to add a check-in step for gallery stages in my test.

Now do the same for the other gallery stages (3 and 5):

Also need to add check-in for the discussion stage (stage 6):

Now let me run the test again:

All tests pass. Let me run all 3 test suites together plus verify tsc and lint still pass:

These are all pre-existing TypeScript errors in the e2e testing package (not related to my changes — they're about missing @types/node in the e2e project). Let me verify my changes specifically by running tsc on the relevant packages only:

Both tsc and lint pass for the packages I modified. Let me also run the media-submission component tests one more time to confirm everything still works together:

All 14 tests pass (5 smoke + 8 component + 1 meeting flow).

Here's a summary of everything implemented:

Bug Fix: MediaGallery public endpoint

Problem: MediaGallery (student-facing) was calling /api/admin/media-submissions/:id which requires instructor/staff role, causing 403 for students.

Fix:

• apps/api/src/routes/media-submissions.ts — Added GET /:submissionId/all public gallery endpoint (requires auth but no role restriction), returns submissions with userName, url, caption (no email)
• apps/web/components/mdx/media-gallery.tsx — Changed API path to /api/media-submissions/.../all, updated response types to remove userEmail and groupMembers

New E2E infrastructure

• apps/api/src/routes/media-submissions.ts — Added DELETE /e2e/clear/:submissionId endpoint (dev-only)
• apps/web/app/testing/components/media-submission/page.tsx — Test page with MediaSubmission in a MeetingProvider

New E2E tests

• testing/e2e/tests/media-submission.spec.ts — 8 component tests: disabled empty, link preview, image preview, submit, persistence, resubmission with version increment, disabled with no changes, invalid URL error
• testing/e2e/tests/meeting-2026-02-05.spec.ts — Full meeting flow test: 7 stages with paired groups (autoComplete=false), media submissions, instructor view verification, gallery stages with student check-in, discussion stage
• testing/e2e/playwright.config.ts — Added media-submission (with smoke dependency) and meeting-2026-02-05 (no dependency) projects

No debugging statements or unnecessary logging in the changes. The untracked files are all intentional new test files. I'll structure this as two commits: one for the bug fix + API changes, and one for the E2E tests.

Both commits are in place, working tree is clean.

(no content)

Let me verify meeting tests still work when explicitly enabled:

That's a transient failure — the session was likely already started from the previous run and the reset didn't complete between runs. Let me check the screenshot and retry:

Passes. The prior failure was stale test users from the previous run — global setup cleaned them up on retry. Let me also verify the meeting tests are excluded from default runs:

Zero meeting tests in the default run. They're excluded as expected.

Moved both meeting-2026-02-03 and meeting-2026-02-05 behind a MEETING_TESTS env var gate, following the same pattern as mobile screenshots. To run them: MEETING_TESTS=1 bunx playwright test --project=meeting-2026-02-05.

(no content)

You're right, I overcomplicated that. I'll just remove meeting-2026-02-03 from the projects array — it can still be run directly by file path.

Verify it's excluded from default runs but still runnable by file path:

meeting-2026-02-05 is in the default run, meeting-2026-02-03 is not. The 02-03 test can still be run directly:

bunx playwright test tests/meeting-2026-02-03.spec.ts

Clean change — just removing the meeting-2026-02-03 project entry. No debugging statements.

(no content)

Let me read the existing plan file and explore the relevant code.

Different task. Let me explore the relevant code areas.

(no content)

Let me read the specific instructor controls rendering to understand exactly where to add the timing display.

Now let me see the full ScheduleTable and the StageStatus interface:

Now I have a complete picture. The estimatedTimeSeconds is already in stageMetadata and available to the instructor controls. The StageRow component shows elapsed time but doesn't know about estimated time. The StageStatus interface (from the API) doesn't include estimated time — but stageMetadata (from MDX props) does. I need to pass estimatedTimeSeconds into StageRow and add an overall session timing indicator.

Let me also check how the ScheduleTable computes total time, since I'll want a similar calculation for the "ahead/behind" indicator:

Now I have everything I need. Let me write the plan.