Next.js 16, React 19, Monaco editor, Anthropic SDK, multi-provider AI, Wandbox Python execution, iframe HTML preview, SQLite auth + session persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
7.8 KiB
Professor — Feature Roadmap
Internal planning document. For architecture and file layout see CLAUDE.md.
Status Key
[ ] Planned | [~] In Progress | [x] Done
Features
[x] Response Modes
Hint Mode · Strict · Lenient
Three toggles that change how the AI reviews code and responds in chat.
- Hint Mode (on/off): When ON the AI proactively suggests hints. When OFF it only confirms or rejects — the user must ask explicitly.
- Strict: AI only accepts code that uses the exact approach the task required. Alternatives are flagged.
- Lenient (default): Functionally equivalent code is accepted as long as it doesn't circumvent the lesson concept.
Implemented via system-prompt injections. UI: lightbulb toggle + Strict/Lenient pill in EditorToolbar. Settings persisted to localStorage under professor_response_mode and preserved across topic resets.
Key files: types/index.ts, lib/prompts.ts, hooks/useAppState.ts, components/editor/EditorToolbar.tsx, components/AppShell.tsx
[x] Resizable Panes
Drag handle between the editor and chat panes
A thin divider between the left and right panes can be dragged to resize. Clamped to 20–80%. Works in both the horizontal (desktop) and vertical (mobile) flex directions — cursor-col-resize on lg+, cursor-row-resize below. Highlights blue on hover/drag.
Key files: components/AppShell.tsx
[x] Custom Topic Input
Free-text topic entry on the topic selector
A "Custom" section at the bottom of the topic selector lets users type any topic (e.g. "Python Classes", "CSS Grid") and pick Python or HTML. Creates a synthetic Topic object and feeds it into the normal task-generation flow.
Key files: components/TopicSelector.tsx
[x] Classroom / Homework Modes
Two distinct learning modes toggled per-session
A Classroom | Homework pill in the ChatPane header switches modes. Mode is preserved across topic resets.
- Homework (default): Existing behaviour — Monaco editor on the left, task card + review chat on the right.
- Classroom: Left pane becomes a scrollable AI-generated markdown lesson for the selected topic. Right pane becomes a pure Q&A chat (separate message history, different system prompt, no code review). The lesson is generated lazily on first switch and cached for the session.
AppMode, lessonContent, and classroomMessages added to AppState. Two new AI modes: generate_lesson and classroom_chat.
Key files: types/index.ts, hooks/useAppState.ts, lib/prompts.ts, app/api/ai/route.ts, hooks/useAI.ts, components/AppShell.tsx, components/chat/ChatPane.tsx, components/classroom/LessonPane.tsx (new)
[ ] 1. LLM Personality Cards
Teaching personas that change AI tone and style
Five built-in personas:
| Persona | Avatar | Style |
|---|---|---|
| Professor | 🎓 | Formal, structured, methodical |
| Mentor | 🌱 | Warm, Socratic — asks "what do you think happens if…?" |
| Drill Sergeant | ⚡ | Terse, demanding, minimal praise |
| Peer | 👾 | Casual, like a knowledgeable dev friend |
| Rubber Duck | 🦆 | Reflects questions back — makes you explain your own reasoning |
Users can also define custom personas via a JSON template (public/personality-template.json). Custom cards are saved to localStorage.
Each persona adds a systemAddition string to every AI system prompt. Persona selection UI is a card-grid modal accessible via the toolbar.
Key files: lib/personalities.ts (new), components/PersonalityPicker.tsx (new), public/personality-template.json (new), types/index.ts, lib/prompts.ts, components/AppShell.tsx, components/editor/EditorToolbar.tsx
[ ] 2. TODO Tracker
AI-generated checklist that tracks lesson progress
When a task is generated the AI also produces a concrete checklist (e.g. "Define the function with the correct signature", "Handle the empty-input case"). Items are:
- Ticked automatically: the review response contains a
COMPLETED: 0,2tag (zero-based indices) that is parsed and stripped before display. - Togglable manually by clicking the checkbox.
A progress counter ("3 / 5 complete") is shown at the top of the checklist, rendered inside TaskCard below the hints section.
Key files: components/chat/TodoList.tsx (new), types/index.ts, lib/prompts.ts, hooks/useAI.ts, hooks/useAppState.ts, components/chat/TaskCard.tsx
[ ] 3. Revision Journal
AI-generated cheat sheets saved per topic
A notebook icon in the chat header lets the user generate a concise markdown "cheat sheet" at any point. The AI summarises: key concepts covered, syntax patterns used, common pitfalls encountered in the session.
Entries are stored in the revision_journal DB table (for logged-in users) or localStorage (anonymous). A journal modal shows all past entries as expandable markdown cards, newest first.
Key files: components/JournalModal.tsx (new), app/api/journal/route.ts (new), db/schema.ts, types/index.ts, lib/prompts.ts, hooks/useAI.ts, components/chat/ChatPane.tsx
[ ] 4. Curriculum Generator
End-to-end lesson plans on any topic
User enters a free-text subject (e.g. "Python object-oriented programming"), picks a language and depth (beginner / intermediate / advanced), and the AI generates a structured 6–10 lesson syllabus. Lessons are unlocked and completed sequentially; each task is generated on-demand when the lesson starts.
⚠️ Heavy token usage. Curriculum generation uses significantly more tokens than a single task. This is surfaced clearly in the UI before generation.
Navigation: a collapsible sidebar shows all lessons with ✓ / ▶ / ○ status. A "Generate Curriculum" secondary CTA appears on the topic selector screen.
New tables: curricula
Key files: components/CurriculumGenerator.tsx (new), components/CurriculumOverview.tsx (new), components/CurriculumSidebar.tsx (new), app/api/curriculum/route.ts (new), types/index.ts, hooks/useAppState.ts, hooks/useAI.ts, lib/prompts.ts, db/schema.ts, components/AppShell.tsx, components/TopicSelector.tsx
[ ] 5. Mermaid Diagrams in Classroom Mode
Flowcharts, sequence diagrams, and class diagrams in the lesson pane
Extends the Classroom mode lesson pane to render Mermaid diagrams embedded in the AI-generated lesson markdown. The lesson prompt is updated to produce diagrams where appropriate (e.g. flowcharts for control flow topics, class diagrams for OOP).
Note: This was originally scoped as a standalone "Q&A Mode / Blackboard" feature. The
---BLACKBOARD---split-response approach is dropped in favour of rendering diagrams inline in the existingLessonPane— simpler and consistent with how the lesson document already works.
New package: mermaid
Key files: components/classroom/LessonPane.tsx, lib/prompts.ts
Build Order Rationale
The original six features have been partially reordered based on what was built:
- Response Modes, Resizable Panes, Custom Topics, Classroom/Homework — all shipped. These were zero-DB, low-risk changes that improved the core UX immediately.
- Personality Cards next — still prompt-only, no DB, straightforward UI addition.
- TODO Tracker — introduces checklist parsing reused by Curriculum.
- Revision Journal — first new DB table; small scope, validates storage pattern.
- Curriculum Generator — highest complexity; builds on TODO Tracker and needs its own DB table.
- Mermaid in Classroom — cosmetic enhancement to an already-working mode; low risk, deferred until core features are stable.
DB Migration Notes
After Features 3 and 4 are implemented, run:
npm run db:push
New tables added: revision_journal, curricula. Existing data is unaffected.