Implement the following plan:

Plan: Add Chat Sidebar to Instructors Page

Context

The /instructors page showcases the course to other educators. Adding a chat lets visiting instructors ask questions about the course — pedagogical approach, technical implementation, assessment design, etc. The chat uses the existing public endpoint (/api/chat/public) with a new agent tailored for educators. No backend changes needed.

Layout: Sticky sidebar on desktop (lg+), slide-up bottom sheet on mobile.

Files

Task 1: Agent Definition (content/agents/instructor-assistant.md)

New agent following existing pattern (content/agents/course-assistant.md as reference):

name: Instructor Assistant
description: Help for instructors and educators exploring the course
useRag: true
ragLimit: 8
visibility: public

System prompt persona: Geoff's knowledgeable colleague, not a student TA. Focuses on:

• Pedagogical approach and design decisions
• Technical implementation details (two-agent architecture, activity framework, RAG pipeline)
• How to adapt ideas for other courses/contexts
• Links to relevant pages when helpful (design docs, demos, blog posts)

Task 2: Chat Component (apps/web/components/instructor-chat.tsx)

Client component ("use client") with two modes:

Desktop (lg+): Sidebar panel

• Renders as a panel in the right column of the page layout
• sticky top-12 so it stays in view while scrolling content
• Terminal-style UI (bg-terminal-bg, monospace) matching the site aesthetic
• Height: h-[calc(100vh-6rem)] or similar to fill the viewport
• Scrollable message area + fixed input at the bottom

Mobile (<lg): Floating button + bottom sheet

• A floating "Chat" button fixed to the bottom-right corner
• Tapping opens a slide-up panel (bottom sheet) covering ~80% of viewport
• Panel has a handle/close button at top, same chat UI inside
• Backdrop overlay to indicate modal state

Chat functionality (shared between both modes)

• Greeting: "Have questions about the course? Ask away."
• Placeholder: "Ask about assessments, activities, course design..."
• Streams responses via POST /api/chat/public with agentSlug: "instructor-assistant"
• Markdown rendering with ReactMarkdown + remarkGfm
• Uses env.NEXT_PUBLIC_API_URL from @/lib/env
• No slash commands, no typing animation, no collapse/expand buttons

Task 3: Page Layout (apps/web/app/instructors/page.tsx)

Change from single-column to responsive two-column layout:

// Desktop: two columns — content + sticky chat sidebar
// Mobile: single column content + floating chat button/bottom sheet
<div className="px-4 py-12 sm:px-6" data-testid="instructors-page">
  <div className="mx-auto max-w-6xl lg:grid lg:grid-cols-[1fr_380px] lg:gap-8">
    <Prose>
      <InstructorsContent />
    </Prose>
    <InstructorChat />
  </div>
</div>

The InstructorChat component handles its own responsive behavior internally:

• On lg+: renders as the sidebar panel (visible in the grid column)
• On <lg: hides the sidebar, shows floating button + bottom sheet instead

Verification

1. Visit https://[local-hostname]/instructors on desktop
   • Content in left column, sticky chat sidebar on right
   • Chat stays in view while scrolling
2. Resize to mobile width
   • Sidebar disappears, floating chat button appears
   • Tapping button opens bottom sheet with chat
   • Closing sheet returns to content
3. Ask a question like "How do conversational assessments work?"
   • Response streams in with markdown formatting
   • RAG context used (references specific course details)
   • Tone is educator-to-educator, not TA-to-student
4. Verify no auth required

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/b76890d1-6ed5-4f69-8809-4b444af29c89.jsonl

Sorry for interrupting! Please continue.

Cool! Can we write some tests for this?