Implement the following plan:

First Day of Class Plan - CS 199 UAI

Date: Thursday, January 22, 2026 Time: 2:00-3:15pm (75 minutes) Location: 3217 Everitt

Goals for Today

1. Students meet each other through AI-themed discussions
2. Surface the range of perspectives and experiences in the room
3. Brief course overview
4. Tee up the Turing test as something to explore before next class

Schedule

Philosophy: Minimal presenting. Students discover and discuss.

Meet & Greet Activity: "AI Perspectives Speed Rounds"

Format: Students mingle and find a new partner for each question. With each partner, they introduce themselves (name, major/year) and discuss the question for 3-4 minutes before finding someone new.

Time: ~30-35 minutes (8 questions)

The Questions

1. How is AI affecting you personally?

   • Your daily life, habits, how you work or create

2. How is AI affecting society?

   • What changes do you see happening around you?

3. Are you impressed by AI as a technological accomplishment?

   • Is this a big deal, or overhyped?

4. How is AI affecting your education?

   • How you learn, study, complete assignments

5. Do you think AI is actually intelligent?

   • What would convince you either way?

6. What worries you most about AI?

   • Or does nothing worry you?

7. What excites you most about AI?

   • Or does nothing excite you?

8. What do you hope to get out of this course?

   • Why did you sign up? What are you curious about?

Adjust based on energy: Can skip questions or extend discussions as needed. End with the course goals question.

Logistics

• Signal for transitions (bell, music, verbal cue)
• Encourage finding someone they haven't talked to yet
• Can display current question on screen
• Optional: brief full-class share-out after ("Anyone hear something surprising?")

Why This Works

• Movement: Gets energy up, students meet 5-6 classmates
• Substantive: Questions surface the range of perspectives in the room
• Sets the tone: Signals this is a discussion-based course about real questions
• Diagnostic: You learn where students are coming from
• Natural arc: Moves from personal → societal → course-specific

Share-Out + Course Overview (20 min)

Share-Out (7-10 min)

After speed rounds, bring everyone back together:

• "What surprised you in your conversations?"
• "Did you hear perspectives very different from your own?"
• "What questions came up that you want to explore this semester?"

This surfaces themes and shows students the diversity in the room.

Course Overview (10 min)

Keep it brief - they can read the syllabus:

• Format: Tuesday = concepts, Thursday = labs/discussions (alternating)
• No technical prerequisites - using AI, not building it
• Assessment: Labs (50%), Quizzes (35%), Final project (10%), Final video (5%)
• AI is part of course operations - this is an experiment
• Ethical complexity acknowledged - using these tools isn't neutral

Turing Test Teaser (10 min)

Brief framing to set up self-directed learning:

"One of the first questions in AI is: What is intelligence? How do we know if a machine is intelligent? In 1950, a mathematician named Alan Turing proposed a test. Before next class, I want you to learn about the Turing test - and here's the twist: use AI to teach you about it."

"Ask ChatGPT, Claude, or Gemini to explain who Turing was, what the test is, and why it matters. Then ask the AI: 'Do you think you pass the Turing test?' Pay attention to how it responds."

This is meta - they're using AI to learn about a test designed to evaluate AI intelligence.

Preview next Tuesday: "We'll discuss what you learned and do our first hands-on lab with AI tools."

Implementation: Role-Aware MDX Components

Core Concept

Components that render completely different UIs based on user role, not just show/hide. The same <GroupActivity> component might render:

• Students: "Join a group" dialog → activity interface
• Instructors: "Start activity" button → dashboard with groups, progress, timing

Architecture

1. Role Detection Utility

// apps/web/lib/roles.ts
import { headers } from "next/headers";
import { auth } from "@/auth";

export type UserRole = "instructor" | "staff" | "student" | "guest";

export async function getUserRole(): Promise<UserRole> {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
  if (!session?.user) return "guest";
  return (session.user.role as UserRole) ?? "student";
}

export async function isInstructor(): Promise<boolean> {
  const role = await getUserRole();
  return role === "instructor" || role === "staff";
}

2. Simple Visibility Components

// apps/web/components/mdx/instructor-only.tsx
import { isInstructor } from "@/lib/roles";

export async function InstructorOnly({ children }: { children: React.ReactNode }) {
  if (!(await isInstructor())) return null;
  return (
    <div className="instructor-notes border-l-4 border-amber-500 pl-4 my-4 bg-amber-500/10">
      {children}
    </div>
  );
}

// apps/web/components/mdx/student-only.tsx
export async function StudentOnly({ children }: { children: React.ReactNode }) {
  if (await isInstructor()) return null;
  return <>{children}</>;
}

3. Role-Aware Interactive Components (Example Pattern)

// components/mdx/group-activity.tsx
import { isInstructor } from "@/lib/roles";
import { GroupActivityInstructor } from "./group-activity-instructor";
import { GroupActivityStudent } from "./group-activity-student";

interface GroupActivityProps {
  id: string;
  title: string;
  duration?: number; // minutes
}

export async function GroupActivity(props: GroupActivityProps) {
  if (await isInstructor()) {
    return <GroupActivityInstructor {...props} />;
  }
  return <GroupActivityStudent {...props} />;
}

4. Register in mdx-components.tsx

import { InstructorOnly } from "./components/mdx/instructor-only";
import { StudentOnly } from "./components/mdx/student-only";
import { GroupActivity } from "./components/mdx/group-activity";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    InstructorOnly,
    StudentOnly,
    GroupActivity,
    // Future: Poll, Discussion, Timer, etc.
  };
}

Example Meeting MDX

# Meeting 1: First Day

<InstructorOnly>
## Facilitation Notes
- Start at 2:05 realistically
- Watch for isolated students during speed rounds
- If energy drops, skip to question 8
</InstructorOnly>

## AI Perspectives Speed Rounds

<StudentOnly>
Find a partner for each question. Introduce yourself and discuss for 3-4 minutes,
then find someone new when the instructor signals.
</StudentOnly>

<GroupActivity id="speed-rounds" title="AI Perspectives" duration={35} />

### Questions

1. **How is AI affecting you personally?**

<InstructorOnly>
*Look for: range of experiences from "I use it daily" to "I've never tried it"*
</InstructorOnly>

2. **How is AI affecting society?**
...

File Structure & Naming Convention

content/spring2026/meetings/
├── 2026-01-22-welcome.mdx
├── 2026-01-27-history-of-ai.mdx
├── 2026-01-29-discussion-intelligence.mdx
└── ...

Naming: YYYY-MM-DD-slug.mdx

Frontmatter Schema

---
date: 2026-01-22
semester: spring2026
title: "Welcome & AI Perspectives"
summary: "First day introductions through AI-themed discussions"
---

Security Note

Server Components filter content before reaching the client. When <InstructorOnly> returns null, its children are never serialized to the client bundle.

Implementation Tasks

Infrastructure

1. Create role detection utility: apps/web/lib/roles.ts
2. Create InstructorOnly component: apps/web/components/mdx/instructor-only.tsx
3. Create StudentOnly component: apps/web/components/mdx/student-only.tsx
4. Register components: Update apps/web/mdx-components.tsx

Test Routes (dev only)

5. Create testing layout: apps/web/app/testing/layout.tsx - returns 404 in production
6. Create InstructorOnly test page: apps/web/app/testing/components/instructor-only/page.tsx
7. Create StudentOnly test page: apps/web/app/testing/components/student-only/page.tsx

Meetings Page Route

8. Create meeting detail page: apps/web/app/[semester]/meetings/[slug]/page.tsx

E2E Tests

9. Create role-content tests: testing/e2e/tests/role-content.spec.ts
10. Add test project: Update testing/e2e/playwright.config.ts

First Real Meeting

11. Create first meeting: content/spring2026/meetings/2026-01-22-welcome.mdx
    • YAML frontmatter (date, semester, title, summary)
    • InstructorOnly facilitation notes
    • Student-facing activity instructions
    • Questions with inline instructor notes

E2E Testing Details

Test routes (dev only, 404 in production):

/testing/components/instructor-only  → Tests InstructorOnly component
/testing/components/student-only     → Tests StudentOnly component

InstructorOnly test page (apps/web/app/testing/components/instructor-only/page.tsx):

import { InstructorOnly } from "@/components/mdx/instructor-only";

export default function TestInstructorOnly() {
  return (
    <div data-testid="test-page">
      <InstructorOnly>
        <p data-testid="instructor-content">This content is for instructors only.</p>
      </InstructorOnly>
      <p data-testid="public-content">This content is visible to everyone.</p>
    </div>
  );
}

StudentOnly test page (apps/web/app/testing/components/student-only/page.tsx):

import { StudentOnly } from "@/components/mdx/student-only";

export default function TestStudentOnly() {
  return (
    <div data-testid="test-page">
      <StudentOnly>
        <p data-testid="student-content">This content is for students only.</p>
      </StudentOnly>
      <p data-testid="public-content">This content is visible to everyone.</p>
    </div>
  );
}

Test file (testing/e2e/tests/role-content.spec.ts):

import { test, expect } from "../fixtures/auth.fixture";

test.describe("InstructorOnly component", () => {
  const URL = "/testing/components/instructor-only";

  test("hides content from guests", async ({ page }) => {
    await page.goto(URL);
    await expect(page.getByTestId("public-content")).toBeVisible();
    await expect(page.getByTestId("instructor-content")).toHaveCount(0);
  });

  test("hides content from students", async ({ testUsers }) => {
    await testUsers.create([{ id: "student", role: "student" }]);
    const { page } = await testUsers.getContext("student");
    await page.goto(URL);
    await expect(page.getByTestId("instructor-content")).toHaveCount(0);
  });

  test("shows content to instructors", async ({ testUsers }) => {
    await testUsers.create([{ id: "instructor", role: "instructor" }]);
    const { page } = await testUsers.getContext("instructor");
    await page.goto(URL);
    await expect(page.getByTestId("instructor-content")).toBeVisible();
  });

  test("content not leaked in page source for guests", async ({ page }) => {
    await page.goto(URL);
    const html = await page.content();
    expect(html).not.toContain("instructors only");
  });
});

test.describe("StudentOnly component", () => {
  const URL = "/testing/components/student-only";

  test("shows content to guests", async ({ page }) => {
    await page.goto(URL);
    await expect(page.getByTestId("student-content")).toBeVisible();
  });

  test("shows content to students", async ({ testUsers }) => {
    await testUsers.create([{ id: "student", role: "student" }]);
    const { page } = await testUsers.getContext("student");
    await page.goto(URL);
    await expect(page.getByTestId("student-content")).toBeVisible();
  });

  test("hides content from instructors", async ({ testUsers }) => {
    await testUsers.create([{ id: "instructor", role: "instructor" }]);
    const { page } = await testUsers.getContext("instructor");
    await page.goto(URL);
    await expect(page.getByTestId("student-content")).toHaveCount(0);
  });
});

Add test project to testing/e2e/playwright.config.ts:

{
  name: "role-content",
  testMatch: /role-content\.spec\.ts/,
  use: { ...devices["Desktop Chrome"] },
  dependencies: ["smoke"],
},

Verification

1. Run e2e tests: CI=true bun run test:e2e - role-content tests should pass
2. Test InstructorOnly (/testing/components/instructor-only):
   • Guest: sees "public content" only
   • Instructor: sees "instructor content" with amber styling
   • Page source as guest: no "instructors only" text
3. Test StudentOnly (/testing/components/student-only):
   • Guest/Student: sees "student content"
   • Instructor: does NOT see "student content"
4. Test routes 404 in prod: Verify /testing/* returns 404 when NODE_ENV=production
5. Real meeting: Visit /spring2026/meetings/2026-01-22-welcome to verify first meeting renders

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/4769d350-ee09-4d3e-a1ed-52f6b17aecfa.jsonl

Is there a way to use data testIDs for these tests rather than string matching? Maybe them on a div inside the component?

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 add a meetings page. Add /meet to the homepage menu. It should take you to a meetings page for the current semester. By default the page should show only until the next meeting and show older meetings below it chronologically. We can add the ability to show all meetings including ones past the next later.

Cool! A few issues. Frontmatter is rendering on the MDX pages, so we want to remove that. Second, let's add a "View as Student" toggle for instructors so that I can see what a student would see. That should probably be done via a prop to role-aware components, since it may work differently per component or not make sense in certain cases.

Ah, sorry. The dev command stopped. We're back to this again: ✓ Starting... @repo/web:dev: Error: loader ~/www/usingandunderstanding.ai/node_modules/.bun/@next+mdx@16.1.1+7dbd04c81aa74883/node_modules/@next/mdx/mdx-js-loader.js for match "{*,next-mdx-rule}" does not have serializable options. Ensure that options passed are plain JavaScript objects and values. @repo/web:dev: at ignore-listed frames @repo/web:dev:

Running.

NO.

No. We need these plugins to work. We had them working before. What changed?

It's working now.

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. I'd like to implement a navigation sidebar on certain pages that have a lot of text content: the syllabus, the meetings pages. It should show h2 and h3 headings opening dynamically as the user scrolls. You may want to look at ~/www/geoffreychallen.com for an example, but it will need to be adapted for this project. h2s should always show and expand to show h3s dynamically.