Implement the following plan:

Plan: Instructor Classroom Display

Context

During class, the instructor controls activities from their laptop but wants a separate browser tab on the classroom projector showing display-optimized content. This display tab should automatically update as stages advance and as data arrives (e.g., strategy aggregation results). The display should facilitate class discussion by showing relevant content large and clean — no controls, no instructor notes, no submission forms.

Architecture

Follow the existing print route pattern: a new /display route that re-renders the same meeting MDX with swapped components via a DisplayMDXProvider. The display tab joins the same WebSocket room (meeting:{meetingSlug}:{semester}), so it gets all real-time updates for free. No BroadcastChannel or cross-tab communication needed.

Instructor laptop: /spring2026/meetings/2026-03-03-study-guide-lab
  → Full page with instructor controls, facilitation notes, all content

Projector tab: /spring2026/meetings/2026-03-03-study-guide-lab/display
  → Same MDX, swapped components via DisplayMDXProvider
  → Only shows current stage content, large text, no controls
  → Updates in real-time via shared WebSocket room

Files to Create

Display Route

apps/web/app/[semester]/meetings/[slug]/display/page.tsx

• Server component, mirrors print/page.tsx pattern
• Requires instructor auth (redirect to login if not)
• Dynamically imports the meeting MDX
• Wraps in DisplayMDXProvider
• Fetches initial session status via serverApiFetch and passes to ActivityStagesProvider
• Generates static params from all semester/meeting combinations (same as print)

apps/web/app/[semester]/meetings/[slug]/display/layout.tsx

• Minimal layout with robots: noindex, no site chrome
• Renders just {children} with a wrapper div

Display Components

apps/web/components/display/display-init.tsx (client)

• Adds display-page class to document.body on mount (hides site chrome via CSS)
• Removes on unmount
• Analogous to PrintTrigger

apps/web/components/display/display-mdx-provider.tsx (client)

• Maps MDX component names to display variants, following PrintMDXProvider exactly
• Component mapping:

apps/web/components/display/display-activity-stages.tsx (server + client)

• Server component that fetches session status (same as activity-stages.tsx)
• Wraps children in ActivityStagesProvider with isAdmin: true (so all stages visible)
• No instructor controls rendered
• Indexes children with stage numbers (same pattern as main component)

apps/web/components/display/display-activity-stage.tsx (client)

• Uses useActivityStages() context to get currentStageIndex
• If this stage's index !== currentStageIndex, renders null
• If active, renders children with a stage label header and large text
• Fade transition when stage changes

apps/web/components/display/display-strategy-results.tsx (client)

• Same data fetching as StrategyResultsClient: SWR poll + socket listener for strategyAggregation:processed
• Large text (text-xl/2xl), high contrast colors for green/red/amber categories
• "Waiting for results..." state when no data

apps/web/components/display/display-group-activity.tsx (client)

• Simply renders {children} without the GroupActivity join/partner UI

CSS

apps/web/styles/globals.css — add body.display-page rules following the existing body.print-page pattern:

• Hide site chrome (header, footer, navigation, noise overlay, impersonation banner)
• Full viewport display area
• Match the site's current theme (no forced dark/light mode)
• Large base font size

Files to Modify

apps/web/components/mdx/activity-stage-instructor.tsx

• Add an "Open Display" link/button in the instructor controls header bar (next to "Instructor Controls" title)
• Opens /${semester}/meetings/${meetingSlug}/display in a new tab via target="_blank"

Real-Time Data Flow

Stage advances are already handled — the display tab's ActivityStagesProvider listens for session:advanced via socket and re-renders, showing only the new current stage. Component data updates (strategy results, selected questions) also flow through the existing socket events. No new socket events needed.

Instructor clicks "Advance" → API → socket broadcast session:advanced
  → Display tab's ActivityStagesProvider mutates → DisplayActivityStage shows new stage

Instructor clicks "Process Strategies" → API → socket broadcast strategyAggregation:processed
  → Display tab's DisplayStrategyResults mutates → results appear on projector

Implementation Order

1. CSS: Add body.display-page rules to globals.css
2. display-init.tsx — body class manager
3. display-activity-stages.tsx — core server component with session fetch + provider
4. display-activity-stage.tsx — current-stage-only rendering
5. display-strategy-results.tsx — large-text strategy results
6. display-group-activity.tsx — passthrough wrapper
7. display-mdx-provider.tsx — component swap map
8. display/layout.tsx + display/page.tsx — the route
9. Add "Open Display" link to activity-stage-instructor.tsx

Verification

1. bun run tsc — typecheck
2. Start dev server, navigate to a meeting page as instructor
3. Click "Open Display" — new tab should open with display view
4. Start an activity session from instructor controls
5. Verify display tab shows only the current stage content
6. Advance stages — display tab should update in real-time
7. If the meeting has StrategyResults, process strategies and verify they appear on display
8. Close and reopen display tab — should recover correct state

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/84f2f541-a2e4-47bb-8bae-08dee3e5ffc2.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.

./components/display/display-activity-stages.tsx #19 46.36 Error: x You're importing a component that needs "next/headers". That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.or g/docs/app/building-your-application/rendering/server-components #19 46.36 | #19 46.36 #19 46.36 ,-[/app/apps/web/components/display/display-activity-stages.tsx:2:1] #19 46.36 1 | import React, { cache } from "react"; #19 46.36 2 | import { headers } from "next/headers"; #19 46.36 : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ #19 46.36 3 | import { auth } from "@/auth";

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.