[v2] Mastery Dashboard and Progress Visualization

[nicholaspsmith]

Overview

Create a comprehensive dashboard showing learning progress, mastery levels, and review forecasts.

Part of

Memoryloop v2 Pivot - Branch 014-goal-based-learning

Dashboard Components

Skill Tree Mastery View

• Visual tree with color-coded mastery (red→yellow→green)
• Percentage shown per node
• Click to expand/collapse branches
• Click node to study or generate cards

Review Forecast

• Cards due today/this week
• "Next review" predictions from FSRS
• "All caught up!" state when nothing due

Metrics Panel

• Total time invested
• Overall retention rate
• Cards mastered vs. total
• Current title/rank

Goal Progress

• Per-goal progress bars
• Status indicators (active/paused)
• Quick actions (study, add cards)

Pages

• app/(protected)/goals/page.tsx - Main goals dashboard
• app/(protected)/goals/[goalId]/page.tsx - Goal detail with tree

Components

• components/dashboard/MasteryDashboard.tsx
• components/dashboard/SkillTreeVisualization.tsx
• components/dashboard/ReviewForecast.tsx
• components/dashboard/MetricsPanel.tsx
• components/dashboard/GoalProgressCard.tsx

Calculations

• Mastery % = cards with stability > threshold / total cards
• Retention rate = successful recalls / total reviews
• Time invested = sum of study session durations

Acceptance Criteria

• Skill tree displays with mastery colors
• Review forecast shows accurate FSRS predictions
• Metrics calculate correctly (SC-007)
• Dashboard loads in under 2 seconds
• Mobile-responsive layout

Dependencies

• Issue [v2] Database Schema: Learning Goals and Skill Trees #220 (Database Schema)
• Issue [v2] Goal Creation and Skill Tree Generation #221 (Goal Creation)

Related Spec

See specs/014-goal-based-learning/spec.md - User Story 4