f644937604
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>
152 lines
7.8 KiB
Markdown
152 lines
7.8 KiB
Markdown
# Professor — Feature Roadmap
|
||
|
||
> Internal planning document. For architecture and file layout see [CLAUDE.md](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,2` tag (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 existing `LessonPane` — 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:
|
||
```bash
|
||
npm run db:push
|
||
```
|
||
New tables added: `revision_journal`, `curricula`. Existing data is unaffected.
|