Implement the following plan:

Plan: Homepage Feature Showcase + Activity Preview for Visitors

Overview

Two changes to make the site more accessible to casual visitors:

1. Add a feature showcase section below the homepage chat terminal
2. Replace the generic "log in" prompt on activity components with a read-only activity preview

Part 1: Homepage Feature Showcase

File to Modify

apps/web/app/page.tsx

Approach

Add a grid of feature cards below the TerminalPrompt component, inside the existing relative z-10 container. The homepage is a client component (needs shared terminalState), but the showcase is static content — just inline JSX with Link components.

Layout

• 2×2 grid on desktop (md:grid-cols-2), single column on mobile
• Same max-width as the terminal area (max-w-3xl)
• Cards follow the blog page pattern: border-border hover:border-accent/50 hover:bg-background-secondary rounded-lg border p-5 transition-colors
• Monospace /route tag, serif heading, muted description

Three Feature Cards

1. Conversational Assessments (/assessments tag) → links to /design/assessments

   • "AI-powered conversations that evaluate understanding through dialogue, not multiple choice."

2. Course Assistant (/chat tag) → links to /chat

   • "Ask questions about the course anytime — try the terminal above, or log in for full access."

3. In-Class Activities (/meet tag) → links to /meet

   • "Real-time paired and group activities with role assignment, stage progression, and instructor controls."

Grid layout: 3 columns on desktop (md:grid-cols-3), single column on mobile.

Blog Section (below feature cards)

A separate, prominent link to the blog beneath the feature grid. Not a feature card — more of a "From the Blog" callout that stands on its own. Simple link with the /blog route tag and a brief description, centered.

Test IDs

• Section: feature-showcase
• Cards: feature-card-assessments, feature-card-chat, feature-card-activities

Part 2: Activity Preview for Non-Logged-In Users

Files to Modify

File to Create

How It Works

ActivityStages (activity-stages.tsx)

Currently, the auth check at line 64 returns early with a login prompt, and the metadata extraction happens after (lines 88-180). Restructure:

1. Move metadata extraction (Map declaration, helper functions, metadata-only loop over children) to BEFORE the auth check. Reading child.props is safe — it inspects the element tree without rendering.
2. Add GroupActivity detection: Import GroupActivity and add an isGroupActivity() type guard (same pattern as isFacilitationNotes). Walk each stage's direct children to detect if the stage contains a GroupActivity. Store hasGroupActivity: boolean in the metadata.
3. In the !session?.user branch, render <ActivityStagesPreview stageMetadata={stageMetadata} /> instead of the plain login prompt.
4. The indexedChildren mapping (cloneElement with index prop) stays after the auth check — it's only needed for the authenticated render path.

ActivityStagesPreview (activity-stages-preview.tsx, new)

Server component. Receives stageMetadata Map. Renders:

+------------------------------------------------------+
| IN-CLASS ACTIVITY                          ~60 min    |
|                                                       |
| ① Review Assessment Design                ~15 min    |
|   Partner work · roles rotate                         |
|                                                       |
| ② Complete the Turing Test                ~20 min    |
|                                                       |
| ③ Assessment Feedback                     ~10 min    |
|                                                       |
| ④ Agents Talking to Agents                ~25 min    |
|   Partner work · roles rotate                         |
|                                                       |
| Log in to participate in this activity.               |
|                      [ Log In ]                       |
+------------------------------------------------------+

• Stage rows use numbered circle badges (matching activity-stage-client.tsx pattern)
• Total time calculated from estimatedTimeSeconds sum
• hasGroupActivity → "Partner work" annotation; combined with rotateRoles → "Partner work · roles rotate"
• Stages without GroupActivity show no annotation (implicitly individual work)
• data-testid="activity-stages-preview"

GroupActivity (group-activity.tsx)

Two nesting patterns exist in the codebase:

• Pattern A (scavenger hunts): <GroupActivity> wraps <ActivityStages>. GroupActivity's auth check fires first.
• Pattern B (assessments meeting): <ActivityStages> wraps content with <GroupActivity> inside individual stages. ActivityStages' auth check fires first.

For Pattern A, if GroupActivity blocks with a login prompt, the ActivityStages preview inside never renders. Fix: In the unauthenticated branch, render a "Partner Activity" banner AND pass through {children}. The children cascade to ActivityStages which renders its own preview.

For Pattern B, ActivityStages catches auth first and shows the preview — GroupActivity's branch is never reached.

Updated unauthenticated branch in group-activity.tsx:

if (!session?.user) {
  return (
    <div data-testid="group-activity">
      <div data-testid="group-activity-preview" className="...">
        <span>Partner Activity</span>
        <p>This activity involves working with a partner.</p>
      </div>
      {children}
    </div>
  );
}

E2E Test Update

Update the existing unauthenticated test in activity-stages.spec.ts to check for activity-stages-preview instead of activity-stages-login-prompt. Verify stage labels are visible and no interactive controls exist.

Verification

# TypeScript check
bunx turbo tsc --filter=@repo/web

# Check homepage renders
curl -sk https://[local-hostname]/ | grep "feature-showcase"

# Run relevant E2E tests
cd testing/e2e && CI=true bunx playwright test --project=homepage
cd testing/e2e && CI=true bunx playwright test --project=activity-stages

# Manual: visit a meeting page in an incognito window to verify activity preview

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/9b5053a5-4f50-448e-a2ee-7981c60142bc.jsonl

Continue.

Read the output file to retrieve the result: [tmp-path]

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, I added a m4a file with audio that I want to turn into my first blog entry! Perhaps we should use a new slash command for this called /geoff-post. First, transcribe the audio using uvx and WhisperX. Disable speaker annotations. Next, using the audio, generate a new post and add it to the posts directory. At that point I'll take over as far as reviewing the content. I wanted this to be back dated to 1/21 so it's right before the first day of class. I'll record a second entry the day after class.