Implement the following plan:

Thursday Creative Media Lab

Overview

Week 2 lab for Feb 5: 3 creative tasks (images, video, music) with formal partner pairing per round, a new MediaSubmission component for sharing creations, an instructor gallery for share-outs, and a closing discussion on creativity and energy tradeoffs.

Core pedagogical idea: partners agree on a concept, work independently to prompt AI, then compare results — demonstrating that AI outputs vary even for the same concept.

Activity Structure

7 stages, one ActivityStages block, GroupActivity nested inside creative stages:

~69 min total (fits 75 min class starting at 2:05pm)

Technical Changes

1. GroupActivity: add autoComplete prop

Currently, GroupActivity calls completeStage() when a group forms — appropriate when GroupActivity wraps all stages, but premature when it's inside a stage alongside other content.

• Add autoComplete boolean prop (default true for backward compat)
• When false, skip the completeStage() call on group formation
• The stage's existing timer/manual-complete handles progression
• The recursive hasGroupActivity metadata detection already works for nested GroupActivity (confirmed in codebase exploration)

File: apps/web/components/mdx/group-activity-client.tsx

2. New MediaSubmission component

Follows the TextSubmission pattern (server/client donut):

Student view:

• URL text input + optional caption field
• Preview: image URLs rendered inline; other URLs shown as link cards
• Submit button (version-tracked like TextSubmission)
• Captures context: groupId, stageIndex, meetingSlug

Instructor view (gallery):

• Grid layout of all submissions for a given submission ID
• Image URLs rendered as thumbnails
• Video/music URLs as clickable link cards
• "Present" button opens fullscreen gallery for projecting
• Real-time updates via WebSocket

Props: id (required), label (optional)

3. MediaGallery component (for share-out stages)

Read-only gallery visible to all users (students + instructor) during share-out stages.

• Shows all submissions for a given MediaSubmission ID
• Same grid rendering as instructor gallery
• Used in the gallery/share-out stages so everyone sees the creations
• Props: submissionId (required), references a MediaSubmission's id

4. Database

New media_submissions table (following text_submissions pattern):

id              text PK (nanoid)
submission_id   text NOT NULL (from MDX id prop)
user_id         text NOT NULL (FK → users)
semester        text NOT NULL
url             text NOT NULL
caption         text
meeting_slug    text
group_id        text (FK → activity_groups)
session_id      text (FK → activity_sessions)
stage_index     integer
version         integer NOT NULL DEFAULT 1
is_latest       boolean NOT NULL DEFAULT true
submitted_at    timestamp NOT NULL DEFAULT now()

Indexes on (submission_id, user_id, semester) and (meeting_slug, semester).

5. API endpoints

Following text-submissions route pattern:

• POST /api/media-submissions/:submissionId — submit URL + caption
• GET /api/media-submissions/:submissionId — get own latest submission
• GET /api/admin/media-submissions/:submissionId — get all submissions (instructor, enriched with user names and group members)

WebSocket event: mediaSubmission:submitted for real-time gallery updates.

AI Tool Suggestions (verify availability before class)

Images: ChatGPT (DALL-E 3), Microsoft Copilot/Designer, Google Gemini, Ideogram Video: Runway, Pika, Luma Dream Machine — free tiers are limited; verify current availability Music: Suno, Udio

Students using different tools is a feature — it reinforces the "same concept, different output" theme.

Activity Content Outline

Brief intro explaining the format, then 3 creative rounds:

Each creative stage:

1. GroupActivity pairing UI (enter partner's code)
2. Once paired: instructions to agree on a concept together
3. Work independently — each student prompts an AI tool of their choice
4. Compare results with partner
5. Submit best creation via MediaSubmission (paste URL + caption)

Each gallery stage:

• MediaGallery showing all class submissions
• Instructor projects and highlights interesting results
• Brief class discussion of what they notice

Closing discussion prompts:

• Which medium gave you the most creative control? The least?
• Did the AI ever surprise you with something better than what you imagined?
• When AI can generate images/music/video in seconds, what happens to human creators?
• How much energy did our class just use? (tie to Week 8 infrastructure topic)

Files

New

Modified

Verification

1. bun run db:generate + bun run db:migrate — schema applied
2. bun run tsc + bun run lint — no type/lint errors
3. Test GroupActivity inside ActivityStage with autoComplete={false} — pairing works, stage doesn't auto-complete
4. Test MediaSubmission: paste image URL → preview renders, submit works
5. Test instructor gallery: sees all submissions, present mode works
6. Test MediaGallery in share-out stage: all students see class creations
7. Test full activity flow: pair → create → submit → gallery → new pair → repeat
8. Verify WebSocket updates: new submission appears in gallery without refresh

If you need specific details from before exiting plan mode (like exact code snippets, error messages, or content you generated), read the full transcript at: ~/.claude/projects/-Users-challen-www-usingandunderstanding-ai/8ab7ce57-6797-4f73-8081-89ffa925c54c.jsonl

Your task

First, run git status, git diff, and git log --oneline -10 to understand the current state.

Then add and commit all modified files with a descriptive message. Break the changes into multiple commits if appropriate. If there are untracked files, ask if they should be added or added to the appropriate .gitignore file. The user may also want to take over at this point, so provide an abort option as well. Always check changes for unnecessary debugging statements or logging that might have been accidentally included. Prompt the user if you find any, and offer to remove each one by one. Do not use interactive git staging (git add -p) as it does not work.

Your task

First, run git status, git diff, and git log --oneline -10 to understand the current state.

Then add and commit all modified files with a descriptive message. Break the changes into multiple commits if appropriate. If there are untracked files, ask if they should be added or added to the appropriate .gitignore file. The user may also want to take over at this point, so provide an abort option as well. Always check changes for unnecessary debugging statements or logging that might have been accidentally included. Prompt the user if you find any, and offer to remove each one by one. Do not use interactive git staging (git add -p) as it does not work.

OK! Now let's write e2e tests for these new components, and a full e2e test for tomorrow's activity.