feat: Learning insights dashboard #16

New issue

Closed

opened 2026-01-21 20:45:31 +00:00 by jack · 0 comments

jack commented

2026-01-21 20:45:31 +00:00

Owner

Summary

A dashboard showing learning insights over time - what you've learned, patterns in your work, technologies used, and knowledge gaps. Provides gamification and self-reflection features.

Insights Categories

1. Activity Metrics

Metric	Description	Visualization
Observations/day	Learning activity level	Line chart
Sessions/week	Coding frequency	Bar chart
Projects worked on	Project diversity	Pie chart
Active hours	When you code most	Heatmap

2. Learning Insights

interface LearningInsight {
  type: 'bug-fix' | 'new-tech' | 'pattern' | 'improvement';
  title: string;
  count: number;
  trend: 'up' | 'down' | 'stable';
  examples: Observation[];
}

// Examples:
// "You fixed 23 bugs this week (+15% from last week)"
// "You learned 3 new technologies: Bun, Qdrant, MikroORM"
// "Most common error: TypeScript type mismatches (47 times)"

3. Technology Tracking

interface TechnologyUsage {
  name: string;           // "TypeScript", "React", "PostgreSQL"
  category: string;       // "language", "framework", "database"
  firstSeen: Date;
  lastUsed: Date;
  observationCount: number;
  proficiencyTrend: number;  // -1 to 1 (declining to improving)
  relatedTechnologies: string[];
}

4. Knowledge Gaps

Identify areas with few memories or declining activity:

interface KnowledgeGap {
  area: string;
  reason: 'few-observations' | 'old-observations' | 'many-errors';
  lastActivity: Date;
  suggestion: string;
  relatedResources?: string[];
}

// Example:
// "Testing: Only 12 observations in 3 months. Consider learning Jest/Vitest."

5. Streaks & Achievements

interface Achievement {
  id: string;
  name: string;
  description: string;
  icon: string;
  unlockedAt?: Date;
  progress?: number;
}

const achievements = [
  { id: 'first-decision', name: 'Decision Maker', description: 'Record your first architectural decision' },
  { id: 'bug-hunter-10', name: 'Bug Hunter', description: 'Fix 10 bugs' },
  { id: 'streak-7', name: 'Week Warrior', description: '7-day coding streak' },
  { id: 'polyglot', name: 'Polyglot', description: 'Work with 5+ programming languages' },
  { id: 'deep-dive', name: 'Deep Diver', description: '100+ observations in one project' },
];

Database Schema

-- Aggregated daily stats for performance
CREATE TABLE daily_stats (
  id INTEGER PRIMARY KEY,
  date DATE NOT NULL UNIQUE,
  observation_count INTEGER DEFAULT 0,
  session_count INTEGER DEFAULT 0,
  project_count INTEGER DEFAULT 0,
  decision_count INTEGER DEFAULT 0,
  error_count INTEGER DEFAULT 0,
  technologies TEXT,  -- JSON array
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_daily_stats_date ON daily_stats(date);

-- Technology tracking
CREATE TABLE technology_usage (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  category TEXT,
  first_seen DATE,
  last_used DATE,
  observation_count INTEGER DEFAULT 0,
  UNIQUE(name)
);

-- Achievement tracking
CREATE TABLE achievements (
  id INTEGER PRIMARY KEY,
  achievement_id TEXT NOT NULL UNIQUE,
  unlocked_at DATETIME,
  progress FLOAT DEFAULT 0
);

API Endpoints

// Get dashboard overview
GET /api/insights/dashboard
Response: {
  summary: {
    totalObservations: number,
    totalSessions: number,
    totalProjects: number,
    activeDays: number,
    currentStreak: number
  },
  recentActivity: DailyStats[],
  topTechnologies: TechnologyUsage[],
  achievements: Achievement[]
}

// Get learning insights
GET /api/insights/learning?period=week|month|year
Response: {
  insights: LearningInsight[],
  trends: TrendData[],
  knowledgeGaps: KnowledgeGap[]
}

// Get technology breakdown
GET /api/insights/technologies
Response: {
  technologies: TechnologyUsage[],
  categories: { [category: string]: number },
  learningPath: string[]  // Suggested next technologies
}

// Get activity heatmap
GET /api/insights/heatmap?year=2026
Response: {
  data: { date: string, count: number }[]
}

// Get achievements
GET /api/insights/achievements
Response: {
  unlocked: Achievement[],
  inProgress: Achievement[],
  locked: Achievement[]
}

UI Components

Main Dashboard

┌─────────────────────────────────────────────────────────────────┐
│ 📊 Learning Insights                                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐           │
│  │  11,878  │ │   108    │ │    15    │ │  🔥 23   │           │
│  │  Memories│ │ Sessions │ │ Projects │ │  Streak  │           │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘           │
│                                                                 │
│  Activity (Last 12 Months)                                      │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ ░░▓▓░░▓▓▓▓░░░░▓▓▓▓▓▓▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │   │
│  │ Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec        │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  This Week's Insights                         Technologies      │
│  ┌─────────────────────────────────┐  ┌─────────────────────┐  │
│  │ ✅ Fixed 12 bugs (+20%)         │  │ TypeScript ████████ │  │
│  │ 📚 Learned: Qdrant, MikroORM    │  │ React      ██████   │  │
│  │ ⚠️ Gap: Testing (low activity)  │  │ Node.js    █████    │  │
│  │ 🎯 Pattern: N+1 queries (5x)    │  │ PostgreSQL ████     │  │
│  └─────────────────────────────────┘  └─────────────────────┘  │
│                                                                 │
│  Achievements                                                   │
│  🏆 Bug Hunter  🏆 Week Warrior  🏆 Decision Maker  🔒 Polyglot │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Calendar Heatmap (GitHub-style)

// Component using contribution graph
<CalendarHeatmap
  startDate={oneYearAgo}
  endDate={today}
  values={dailyStats}
  classForValue={(value) => {
    if (!value) return 'color-empty';
    return `color-scale-${Math.min(4, Math.floor(value.count / 5))}`;
  }}
/>

Word Cloud

// Technologies and concepts word cloud
<WordCloud
  words={technologies.map(t => ({
    text: t.name,
    value: t.observationCount
  }))}
  options={{
    rotations: 0,
    fontSizes: [14, 48]
  }}
/>

Implementation Steps

Create daily_stats aggregation table
Create background job to aggregate daily stats
Create technology_usage tracking
Implement technology extraction from observations
Create achievements system
Add API endpoints for insights
Create dashboard UI with charts
Add calendar heatmap component
Add word cloud component
Implement streak tracking
Add knowledge gap detection
Create weekly/monthly report generation (optional)

Files to Create/Modify

packages/database/src/entities/DailyStats.ts - New entity
packages/database/src/entities/TechnologyUsage.ts - New entity
packages/database/src/entities/Achievement.ts - New entity
packages/backend/src/services/insights-service.ts - Aggregation logic
packages/backend/src/services/achievement-service.ts - Achievement tracking
packages/backend/src/routes/insights.ts - API endpoints
packages/worker/src/tasks/aggregate-stats.ts - Daily aggregation job
packages/ui/src/views/InsightsView.tsx - Main dashboard
packages/ui/src/components/CalendarHeatmap.tsx - Heatmap component
packages/ui/src/components/WordCloud.tsx - Word cloud component
packages/ui/src/components/AchievementCard.tsx - Achievement display

Dependencies

{
  "react-calendar-heatmap": "^1.9.0",
  "react-wordcloud": "^1.2.7",
  "recharts": "^2.x"  // Already in project?
}

Acceptance Criteria

Dashboard shows activity overview
Calendar heatmap displays daily activity
Technology usage is tracked and displayed
Learning insights are generated weekly
Knowledge gaps are identified
Achievement system works with progress tracking
Streaks are calculated correctly
Performance is acceptable (aggregated data, caching)

Migrated-From: jack/claude-mem-fork#30

## Summary A dashboard showing learning insights over time - what you've learned, patterns in your work, technologies used, and knowledge gaps. Provides gamification and self-reflection features. ## Insights Categories ### 1. Activity Metrics | Metric | Description | Visualization | |--------|-------------|---------------| | Observations/day | Learning activity level | Line chart | | Sessions/week | Coding frequency | Bar chart | | Projects worked on | Project diversity | Pie chart | | Active hours | When you code most | Heatmap | ### 2. Learning Insights ```typescript interface LearningInsight { type: 'bug-fix' | 'new-tech' | 'pattern' | 'improvement'; title: string; count: number; trend: 'up' | 'down' | 'stable'; examples: Observation[]; } // Examples: // "You fixed 23 bugs this week (+15% from last week)" // "You learned 3 new technologies: Bun, Qdrant, MikroORM" // "Most common error: TypeScript type mismatches (47 times)" ``` ### 3. Technology Tracking ```typescript interface TechnologyUsage { name: string; // "TypeScript", "React", "PostgreSQL" category: string; // "language", "framework", "database" firstSeen: Date; lastUsed: Date; observationCount: number; proficiencyTrend: number; // -1 to 1 (declining to improving) relatedTechnologies: string[]; } ``` ### 4. Knowledge Gaps Identify areas with few memories or declining activity: ```typescript interface KnowledgeGap { area: string; reason: 'few-observations' | 'old-observations' | 'many-errors'; lastActivity: Date; suggestion: string; relatedResources?: string[]; } // Example: // "Testing: Only 12 observations in 3 months. Consider learning Jest/Vitest." ``` ### 5. Streaks & Achievements ```typescript interface Achievement { id: string; name: string; description: string; icon: string; unlockedAt?: Date; progress?: number; } const achievements = [ { id: 'first-decision', name: 'Decision Maker', description: 'Record your first architectural decision' }, { id: 'bug-hunter-10', name: 'Bug Hunter', description: 'Fix 10 bugs' }, { id: 'streak-7', name: 'Week Warrior', description: '7-day coding streak' }, { id: 'polyglot', name: 'Polyglot', description: 'Work with 5+ programming languages' }, { id: 'deep-dive', name: 'Deep Diver', description: '100+ observations in one project' }, ]; ``` ## Database Schema ```sql -- Aggregated daily stats for performance CREATE TABLE daily_stats ( id INTEGER PRIMARY KEY, date DATE NOT NULL UNIQUE, observation_count INTEGER DEFAULT 0, session_count INTEGER DEFAULT 0, project_count INTEGER DEFAULT 0, decision_count INTEGER DEFAULT 0, error_count INTEGER DEFAULT 0, technologies TEXT, -- JSON array created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE INDEX idx_daily_stats_date ON daily_stats(date); -- Technology tracking CREATE TABLE technology_usage ( id INTEGER PRIMARY KEY, name TEXT NOT NULL, category TEXT, first_seen DATE, last_used DATE, observation_count INTEGER DEFAULT 0, UNIQUE(name) ); -- Achievement tracking CREATE TABLE achievements ( id INTEGER PRIMARY KEY, achievement_id TEXT NOT NULL UNIQUE, unlocked_at DATETIME, progress FLOAT DEFAULT 0 ); ``` ## API Endpoints ```typescript // Get dashboard overview GET /api/insights/dashboard Response: { summary: { totalObservations: number, totalSessions: number, totalProjects: number, activeDays: number, currentStreak: number }, recentActivity: DailyStats[], topTechnologies: TechnologyUsage[], achievements: Achievement[] } // Get learning insights GET /api/insights/learning?period=week|month|year Response: { insights: LearningInsight[], trends: TrendData[], knowledgeGaps: KnowledgeGap[] } // Get technology breakdown GET /api/insights/technologies Response: { technologies: TechnologyUsage[], categories: { [category: string]: number }, learningPath: string[] // Suggested next technologies } // Get activity heatmap GET /api/insights/heatmap?year=2026 Response: { data: { date: string, count: number }[] } // Get achievements GET /api/insights/achievements Response: { unlocked: Achievement[], inProgress: Achievement[], locked: Achievement[] } ``` ## UI Components ### Main Dashboard ``` ┌─────────────────────────────────────────────────────────────────┐ │ 📊 Learning Insights │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 11,878 │ │ 108 │ │ 15 │ │ 🔥 23 │ │ │ │ Memories│ │ Sessions │ │ Projects │ │ Streak │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ Activity (Last 12 Months) │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ░░▓▓░░▓▓▓▓░░░░▓▓▓▓▓▓▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ │ Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ This Week's Insights Technologies │ │ ┌─────────────────────────────────┐ ┌─────────────────────┐ │ │ │ ✅ Fixed 12 bugs (+20%) │ │ TypeScript ████████ │ │ │ │ 📚 Learned: Qdrant, MikroORM │ │ React ██████ │ │ │ │ ⚠️ Gap: Testing (low activity) │ │ Node.js █████ │ │ │ │ 🎯 Pattern: N+1 queries (5x) │ │ PostgreSQL ████ │ │ │ └─────────────────────────────────┘ └─────────────────────┘ │ │ │ │ Achievements │ │ 🏆 Bug Hunter 🏆 Week Warrior 🏆 Decision Maker 🔒 Polyglot │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Calendar Heatmap (GitHub-style) ```typescript // Component using contribution graph <CalendarHeatmap startDate={oneYearAgo} endDate={today} values={dailyStats} classForValue={(value) => { if (!value) return 'color-empty'; return `color-scale-${Math.min(4, Math.floor(value.count / 5))}`; }} /> ``` ### Word Cloud ```typescript // Technologies and concepts word cloud <WordCloud words={technologies.map(t => ({ text: t.name, value: t.observationCount }))} options={{ rotations: 0, fontSizes: [14, 48] }} /> ``` ## Implementation Steps 1. [ ] Create `daily_stats` aggregation table 2. [ ] Create background job to aggregate daily stats 3. [ ] Create `technology_usage` tracking 4. [ ] Implement technology extraction from observations 5. [ ] Create `achievements` system 6. [ ] Add API endpoints for insights 7. [ ] Create dashboard UI with charts 8. [ ] Add calendar heatmap component 9. [ ] Add word cloud component 10. [ ] Implement streak tracking 11. [ ] Add knowledge gap detection 12. [ ] Create weekly/monthly report generation (optional) ## Files to Create/Modify - `packages/database/src/entities/DailyStats.ts` - New entity - `packages/database/src/entities/TechnologyUsage.ts` - New entity - `packages/database/src/entities/Achievement.ts` - New entity - `packages/backend/src/services/insights-service.ts` - Aggregation logic - `packages/backend/src/services/achievement-service.ts` - Achievement tracking - `packages/backend/src/routes/insights.ts` - API endpoints - `packages/worker/src/tasks/aggregate-stats.ts` - Daily aggregation job - `packages/ui/src/views/InsightsView.tsx` - Main dashboard - `packages/ui/src/components/CalendarHeatmap.tsx` - Heatmap component - `packages/ui/src/components/WordCloud.tsx` - Word cloud component - `packages/ui/src/components/AchievementCard.tsx` - Achievement display ## Dependencies ```json { "react-calendar-heatmap": "^1.9.0", "react-wordcloud": "^1.2.7", "recharts": "^2.x" // Already in project? } ``` ## Acceptance Criteria - [ ] Dashboard shows activity overview - [ ] Calendar heatmap displays daily activity - [ ] Technology usage is tracked and displayed - [ ] Learning insights are generated weekly - [ ] Knowledge gaps are identified - [ ] Achievement system works with progress tracking - [ ] Streaks are calculated correctly - [ ] Performance is acceptable (aggregated data, caching) --- Migrated-From: jack/claude-mem-fork#30