Initial commit: Claude Code Project Tracker

Add comprehensive development intelligence system that tracks:
- Development sessions with automatic start/stop
- Full conversation history with semantic search
- Tool usage and file operation analytics
- Think time and engagement analysis
- Git activity correlation
- Learning pattern recognition
- Productivity insights and metrics

Features:
- FastAPI backend with SQLite database
- Modern web dashboard with interactive charts
- Claude Code hook integration for automatic tracking
- Comprehensive test suite with 100+ tests
- Complete API documentation (OpenAPI/Swagger)
- Privacy-first design with local data storage

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/dashboard/templates/analytics.html

@@ -0,0 +1,390 @@
+{% extends "base.html" %}
+
+{% block title %}Analytics - Claude Code Project Tracker{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>
+                <i class="fas fa-chart-line me-2"></i>
+                Development Analytics
+            </h1>
+            <div class="btn-group" role="group">
+                <button type="button" class="btn btn-outline-primary active" onclick="setTimePeriod(30)">
+                    30 Days
+                </button>
+                <button type="button" class="btn btn-outline-primary" onclick="setTimePeriod(7)">
+                    7 Days
+                </button>
+                <button type="button" class="btn btn-outline-primary" onclick="setTimePeriod(90)">
+                    90 Days
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Productivity Metrics -->
+<div class="row mb-4">
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-brain me-2"></i>
+                    Engagement Analysis
+                </h6>
+            </div>
+            <div class="card-body text-center">
+                <div class="display-6 text-primary mb-2" id="engagement-metric">-</div>
+                <p class="text-muted">Engagement Score</p>
+                <canvas id="engagementChart" height="150"></canvas>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-clock me-2"></i>
+                    Time Analysis
+                </h6>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <div class="d-flex justify-content-between">
+                        <span>Average Session</span>
+                        <strong id="avg-session">-</strong>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <div class="d-flex justify-content-between">
+                        <span>Think Time</span>
+                        <strong id="think-time-metric">-</strong>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <div class="d-flex justify-content-between">
+                        <span>Files per Session</span>
+                        <strong id="files-per-session">-</strong>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-graduation-cap me-2"></i>
+                    Learning Insights
+                </h6>
+            </div>
+            <div class="card-body" id="learning-insights">
+                <div class="text-center py-3">
+                    <div class="spinner-border spinner-border-sm text-primary"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Development Patterns -->
+<div class="row mb-4">
+    <div class="col-md-8">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-chart-area me-2"></i>
+                    Development Patterns
+                </h6>
+            </div>
+            <div class="card-body">
+                <canvas id="patternsChart" height="100"></canvas>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-user-clock me-2"></i>
+                    Working Hours
+                </h6>
+            </div>
+            <div class="card-body">
+                <canvas id="hoursChart" height="150"></canvas>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Tool Usage & Git Activity -->
+<div class="row mb-4">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-tools me-2"></i>
+                    Tool Usage Statistics
+                </h6>
+            </div>
+            <div class="card-body">
+                <div id="tool-stats">
+                    <div class="text-center py-3">
+                        <div class="spinner-border spinner-border-sm text-primary"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fab fa-git-alt me-2"></i>
+                    Git Activity
+                </h6>
+            </div>
+            <div class="card-body">
+                <div id="git-stats">
+                    <div class="text-center py-3">
+                        <div class="spinner-border spinner-border-sm text-primary"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let currentTimePeriod = 30;
+let engagementChart = null;
+let patternsChart = null;
+let hoursChart = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    loadAnalyticsData();
+});
+
+function setTimePeriod(days) {
+    currentTimePeriod = days;
+    
+    // Update active button
+    document.querySelectorAll('.btn-group .btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    event.target.classList.add('active');
+    
+    loadAnalyticsData();
+}
+
+async function loadAnalyticsData() {
+    try {
+        const [
+            productivityMetrics,
+            developmentPatterns,
+            learningInsights,
+            toolUsageStats,
+            gitStats
+        ] = await Promise.all([
+            apiClient.getProductivityMetrics(null, currentTimePeriod),
+            apiClient.getDevelopmentPatterns(null, currentTimePeriod),
+            apiClient.getLearningInsights(null, currentTimePeriod),
+            apiClient.getToolUsageStats(null, null, currentTimePeriod),
+            apiClient.getGitActivityStats(null, currentTimePeriod)
+        ]);
+        
+        updateProductivityMetrics(productivityMetrics);
+        updateDevelopmentPatterns(developmentPatterns);
+        updateLearningInsights(learningInsights);
+        updateToolStats(toolUsageStats);
+        updateGitStats(gitStats);
+        
+    } catch (error) {
+        console.error('Failed to load analytics data:', error);
+    }
+}
+
+function updateProductivityMetrics(metrics) {
+    document.getElementById('engagement-metric').textContent = 
+        metrics.engagement_score?.toFixed(0) || '-';
+    
+    document.getElementById('avg-session').textContent = 
+        ApiUtils.formatDuration(metrics.average_session_length || 0);
+    
+    document.getElementById('think-time-metric').textContent = 
+        `${(metrics.think_time_average || 0).toFixed(1)}s`;
+    
+    document.getElementById('files-per-session').textContent = 
+        (metrics.files_per_session || 0).toFixed(1);
+}
+
+function updateDevelopmentPatterns(patterns) {
+    if (patterns.working_hours) {
+        updateWorkingHoursChart(patterns.working_hours);
+    }
+    
+    if (patterns.productivity_trends) {
+        updatePatternsChart(patterns);
+    }
+}
+
+function updateWorkingHoursChart(workingHours) {
+    const ctx = document.getElementById('hoursChart').getContext('2d');
+    
+    if (hoursChart) {
+        hoursChart.destroy();
+    }
+    
+    const hours = Array.from({length: 24}, (_, i) => i);
+    const data = hours.map(hour => workingHours.distribution[hour] || 0);
+    
+    hoursChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: hours.map(h => `${h}:00`),
+            datasets: [{
+                data: data,
+                backgroundColor: '#007bff',
+                borderRadius: 4
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false }
+            },
+            scales: {
+                x: {
+                    ticks: { maxTicksLimit: 8 }
+                },
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}
+
+function updateLearningInsights(insights) {
+    const container = document.getElementById('learning-insights');
+    
+    if (insights.message) {
+        container.innerHTML = `
+            <div class="text-center text-muted">
+                <i class="fas fa-info-circle mb-2"></i>
+                <p class="small">${insights.message}</p>
+            </div>
+        `;
+        return;
+    }
+    
+    const topTopics = Object.entries(insights.learning_topics?.frequency || {})
+        .sort(([,a], [,b]) => b - a)
+        .slice(0, 3);
+    
+    const insightsHtml = `
+        <div class="mb-3">
+            <small class="text-muted">Most Discussed Topics</small>
+            ${topTopics.map(([topic, count]) => `
+                <div class="d-flex justify-content-between align-items-center mt-1">
+                    <span class="small">${topic}</span>
+                    <span class="badge bg-primary">${count}</span>
+                </div>
+            `).join('')}
+        </div>
+        <div class="text-center">
+            <div class="fw-bold text-success">${insights.insights?.diverse_learning || 0}</div>
+            <small class="text-muted">Topics Explored</small>
+        </div>
+    `;
+    
+    container.innerHTML = insightsHtml;
+}
+
+function updateToolStats(toolStats) {
+    const container = document.getElementById('tool-stats');
+    
+    if (!toolStats.length) {
+        container.innerHTML = `
+            <div class="text-center text-muted py-3">
+                <i class="fas fa-tools mb-2"></i>
+                <p class="small">No tool usage data</p>
+            </div>
+        `;
+        return;
+    }
+    
+    const topTools = toolStats.slice(0, 5);
+    const maxUsage = Math.max(...topTools.map(t => t.usage_count));
+    
+    const toolsHtml = topTools.map(tool => {
+        const percentage = (tool.usage_count / maxUsage) * 100;
+        return `
+            <div class="mb-3">
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                    <span class="small">
+                        <i class="${ApiUtils.getToolIcon(tool.tool_name)} me-1"></i>
+                        ${tool.tool_name}
+                    </span>
+                    <span class="badge bg-${ApiUtils.getToolColor(tool.tool_name)}">${tool.usage_count}</span>
+                </div>
+                <div class="progress" style="height: 6px;">
+                    <div class="progress-bar bg-${ApiUtils.getToolColor(tool.tool_name)}" 
+                         style="width: ${percentage}%"></div>
+                </div>
+            </div>
+        `;
+    }).join('');
+    
+    container.innerHTML = toolsHtml;
+}
+
+function updateGitStats(gitStats) {
+    const container = document.getElementById('git-stats');
+    
+    if (!gitStats.total_operations) {
+        container.innerHTML = `
+            <div class="text-center text-muted py-3">
+                <i class="fab fa-git-alt mb-2"></i>
+                <p class="small">No git activity data</p>
+            </div>
+        `;
+        return;
+    }
+    
+    const statsHtml = `
+        <div class="row g-3 text-center">
+            <div class="col-6">
+                <div class="fw-bold text-primary">${gitStats.total_operations}</div>
+                <small class="text-muted">Operations</small>
+            </div>
+            <div class="col-6">
+                <div class="fw-bold text-success">${gitStats.success_rate || 0}%</div>
+                <small class="text-muted">Success Rate</small>
+            </div>
+        </div>
+        <hr>
+        <div class="mb-2">
+            <small class="text-muted">Operation Types</small>
+        </div>
+        ${Object.entries(gitStats.operations_by_type || {}).map(([type, count]) => `
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="small">${type}</span>
+                <span class="badge bg-secondary">${count}</span>
+            </div>
+        `).join('')}
+    `;
+    
+    container.innerHTML = statsHtml;
+}
+</script>
+{% endblock %}

app/dashboard/templates/base.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Claude Code Project Tracker{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="/static/css/dashboard.css" rel="stylesheet">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container">
+            <a class="navbar-brand" href="/dashboard">
+                <i class="fas fa-code-branch me-2"></i>
+                Claude Code Tracker
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard">
+                            <i class="fas fa-tachometer-alt me-1"></i>
+                            Dashboard
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard/projects">
+                            <i class="fas fa-folder-open me-1"></i>
+                            Projects
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard/analytics">
+                            <i class="fas fa-chart-line me-1"></i>
+                            Analytics
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard/conversations">
+                            <i class="fas fa-comments me-1"></i>
+                            Conversations
+                        </a>
+                    </li>
+                </ul>
+                
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/docs" target="_blank">
+                            <i class="fas fa-book me-1"></i>
+                            API Docs
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="container mt-4">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-light mt-5 py-4">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-8">
+                    <p class="text-muted mb-0">
+                        <i class="fas fa-info-circle me-1"></i>
+                        Claude Code Project Tracker - Development Intelligence System
+                    </p>
+                </div>
+                <div class="col-md-4 text-end">
+                    <p class="text-muted mb-0">
+                        <small>Version 1.0.0</small>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="/static/js/api-client.js"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

app/dashboard/templates/conversations.html

@@ -0,0 +1,334 @@
+{% extends "base.html" %}
+
+{% block title %}Conversations - Claude Code Project Tracker{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>
+                <i class="fas fa-comments me-2"></i>
+                Conversation History
+            </h1>
+        </div>
+    </div>
+</div>
+
+<!-- Search Interface -->
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="input-group">
+                            <input type="text" class="form-control form-control-lg" 
+                                   placeholder="Search conversations..." id="search-query"
+                                   onkeypress="handleSearchKeypress(event)">
+                            <button class="btn btn-primary" type="button" onclick="searchConversations()">
+                                <i class="fas fa-search me-1"></i>
+                                Search
+                            </button>
+                        </div>
+                        <div class="form-text">
+                            Search through your conversation history with Claude Code
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <select class="form-select" id="project-filter">
+                            <option value="">All Projects</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Search Results -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0">
+                    <i class="fas fa-history me-2"></i>
+                    <span id="results-title">Recent Conversations</span>
+                </h6>
+            </div>
+            <div class="card-body">
+                <div id="conversation-results">
+                    <div class="text-center text-muted py-5">
+                        <i class="fas fa-search fa-3x mb-3"></i>
+                        <h5>Search Your Conversations</h5>
+                        <p>Enter a search term to find relevant conversations with Claude.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    loadProjects();
+});
+
+async function loadProjects() {
+    try {
+        const projects = await apiClient.getProjects();
+        const select = document.getElementById('project-filter');
+        
+        projects.forEach(project => {
+            const option = document.createElement('option');
+            option.value = project.id;
+            option.textContent = project.name;
+            select.appendChild(option);
+        });
+    } catch (error) {
+        console.error('Failed to load projects:', error);
+    }
+}
+
+function handleSearchKeypress(event) {
+    if (event.key === 'Enter') {
+        searchConversations();
+    }
+}
+
+async function searchConversations() {
+    const query = document.getElementById('search-query').value.trim();
+    const projectId = document.getElementById('project-filter').value || null;
+    const resultsContainer = document.getElementById('conversation-results');
+    const resultsTitle = document.getElementById('results-title');
+    
+    if (!query) {
+        resultsContainer.innerHTML = `
+            <div class="text-center text-warning py-4">
+                <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
+                <p>Please enter a search term</p>
+            </div>
+        `;
+        return;
+    }
+    
+    // Show loading state
+    resultsContainer.innerHTML = `
+        <div class="text-center py-4">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Searching...</span>
+            </div>
+            <p class="mt-2 text-muted">Searching conversations...</p>
+        </div>
+    `;
+    
+    resultsTitle.textContent = `Search Results for "${query}"`;
+    
+    try {
+        const results = await apiClient.searchConversations(query, projectId, 20);
+        displaySearchResults(results, query);
+    } catch (error) {
+        console.error('Search failed:', error);
+        resultsContainer.innerHTML = `
+            <div class="text-center text-danger py-4">
+                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
+                <p>Search failed. Please try again.</p>
+            </div>
+        `;
+    }
+}
+
+function displaySearchResults(results, query) {
+    const container = document.getElementById('conversation-results');
+    
+    if (!results.length) {
+        container.innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="fas fa-search fa-3x mb-3"></i>
+                <h5>No Results Found</h5>
+                <p>No conversations match your search term: "${query}"</p>
+                <p class="small text-muted">Try using different keywords or check your spelling.</p>
+            </div>
+        `;
+        return;
+    }
+    
+    const resultsHtml = results.map(result => `
+        <div class="conversation-result border-bottom py-3 fade-in">
+            <div class="row">
+                <div class="col-md-8">
+                    <div class="d-flex align-items-center mb-2">
+                        <span class="badge bg-primary me-2">${result.project_name}</span>
+                        <small class="text-muted">
+                            <i class="fas fa-clock me-1"></i>
+                            ${ApiUtils.formatRelativeTime(result.timestamp)}
+                        </small>
+                        <span class="badge bg-success ms-2">
+                            ${(result.relevance_score * 100).toFixed(0)}% match
+                        </span>
+                    </div>
+                    
+                    ${result.user_prompt ? `
+                        <div class="mb-2">
+                            <strong class="text-primary">
+                                <i class="fas fa-user me-1"></i>
+                                You:
+                            </strong>
+                            <p class="mb-1">${highlightSearchTerms(ApiUtils.truncateText(result.user_prompt, 200), query)}</p>
+                        </div>
+                    ` : ''}
+                    
+                    ${result.claude_response ? `
+                        <div class="mb-2">
+                            <strong class="text-success">
+                                <i class="fas fa-robot me-1"></i>
+                                Claude:
+                            </strong>
+                            <p class="mb-1">${highlightSearchTerms(ApiUtils.truncateText(result.claude_response, 200), query)}</p>
+                        </div>
+                    ` : ''}
+                    
+                    ${result.context && result.context.length ? `
+                        <div class="mt-2">
+                            <small class="text-muted">Context snippets:</small>
+                            ${result.context.map(snippet => `
+                                <div class="bg-light p-2 rounded mt-1">
+                                    <small>${highlightSearchTerms(snippet, query)}</small>
+                                </div>
+                            `).join('')}
+                        </div>
+                    ` : ''}
+                </div>
+                
+                <div class="col-md-4 text-end">
+                    <button class="btn btn-outline-primary btn-sm" onclick="viewFullConversation(${result.id})">
+                        <i class="fas fa-eye me-1"></i>
+                        View Full
+                    </button>
+                </div>
+            </div>
+        </div>
+    `).join('');
+    
+    container.innerHTML = resultsHtml;
+}
+
+function highlightSearchTerms(text, query) {
+    if (!text || !query) return text;
+    
+    const terms = query.toLowerCase().split(' ');
+    let highlightedText = text;
+    
+    terms.forEach(term => {
+        const regex = new RegExp(`(${term})`, 'gi');
+        highlightedText = highlightedText.replace(regex, '<mark>$1</mark>');
+    });
+    
+    return highlightedText;
+}
+
+async function viewFullConversation(conversationId) {
+    try {
+        const conversation = await apiClient.getConversation(conversationId);
+        showConversationModal(conversation);
+    } catch (error) {
+        console.error('Failed to load conversation:', error);
+        alert('Failed to load full conversation');
+    }
+}
+
+function showConversationModal(conversation) {
+    const modalHtml = `
+        <div class="modal fade" id="conversationModal" tabindex="-1">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            <i class="fas fa-comments me-2"></i>
+                            Conversation Details
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <strong>Project:</strong> ${conversation.project_name}
+                                </div>
+                                <div class="col-md-6">
+                                    <strong>Date:</strong> ${ApiUtils.formatDate(conversation.timestamp)}
+                                </div>
+                            </div>
+                            ${conversation.tools_used && conversation.tools_used.length ? `
+                                <div class="mt-2">
+                                    <strong>Tools Used:</strong>
+                                    ${conversation.tools_used.map(tool => `
+                                        <span class="badge bg-${ApiUtils.getToolColor(tool)} me-1">${tool}</span>
+                                    `).join('')}
+                                </div>
+                            ` : ''}
+                        </div>
+                        
+                        ${conversation.user_prompt ? `
+                            <div class="mb-4">
+                                <div class="card">
+                                    <div class="card-header bg-primary text-white">
+                                        <i class="fas fa-user me-1"></i>
+                                        Your Question
+                                    </div>
+                                    <div class="card-body">
+                                        <p class="mb-0" style="white-space: pre-wrap;">${conversation.user_prompt}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        ` : ''}
+                        
+                        ${conversation.claude_response ? `
+                            <div class="mb-4">
+                                <div class="card">
+                                    <div class="card-header bg-success text-white">
+                                        <i class="fas fa-robot me-1"></i>
+                                        Claude's Response
+                                    </div>
+                                    <div class="card-body">
+                                        <p class="mb-0" style="white-space: pre-wrap;">${conversation.claude_response}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        ` : ''}
+                        
+                        ${conversation.files_affected && conversation.files_affected.length ? `
+                            <div class="mb-3">
+                                <strong>Files Affected:</strong>
+                                <ul class="list-unstyled mt-2">
+                                    ${conversation.files_affected.map(file => `
+                                        <li><code>${file}</code></li>
+                                    `).join('')}
+                                </ul>
+                            </div>
+                        ` : ''}
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    // Remove any existing modal
+    const existingModal = document.getElementById('conversationModal');
+    if (existingModal) {
+        existingModal.remove();
+    }
+    
+    // Add new modal to body
+    document.body.insertAdjacentHTML('beforeend', modalHtml);
+    
+    // Show modal
+    const modal = new bootstrap.Modal(document.getElementById('conversationModal'));
+    modal.show();
+}
+</script>
+{% endblock %}

app/dashboard/templates/dashboard.html

@@ -0,0 +1,207 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Claude Code Project Tracker{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>
+                <i class="fas fa-tachometer-alt me-2"></i>
+                Development Dashboard
+            </h1>
+            <div class="btn-group" role="group">
+                <button type="button" class="btn btn-outline-primary" onclick="refreshDashboard()">
+                    <i class="fas fa-sync-alt me-1"></i>
+                    Refresh
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Status Cards -->
+<div class="row mb-4">
+    <div class="col-md-3">
+        <div class="card bg-primary text-white">
+            <div class="card-body">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h5 class="card-title mb-0">Total Sessions</h5>
+                        <h2 class="mb-0" id="total-sessions">-</h2>
+                    </div>
+                    <i class="fas fa-play-circle fa-2x opacity-75"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-3">
+        <div class="card bg-success text-white">
+            <div class="card-body">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h5 class="card-title mb-0">Development Time</h5>
+                        <h2 class="mb-0" id="total-time">-</h2>
+                        <small class="opacity-75">hours</small>
+                    </div>
+                    <i class="fas fa-clock fa-2x opacity-75"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-3">
+        <div class="card bg-info text-white">
+            <div class="card-body">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h5 class="card-title mb-0">Active Projects</h5>
+                        <h2 class="mb-0" id="active-projects">-</h2>
+                    </div>
+                    <i class="fas fa-folder-open fa-2x opacity-75"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-3">
+        <div class="card bg-warning text-white">
+            <div class="card-body">
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <h5 class="card-title mb-0">Productivity Score</h5>
+                        <h2 class="mb-0" id="productivity-score">-</h2>
+                        <small class="opacity-75">out of 100</small>
+                    </div>
+                    <i class="fas fa-chart-line fa-2x opacity-75"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Charts Row -->
+<div class="row mb-4">
+    <div class="col-md-8">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-chart-area me-2"></i>
+                    Productivity Trends (Last 30 Days)
+                </h5>
+            </div>
+            <div class="card-body">
+                <canvas id="productivityChart" height="100"></canvas>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-tools me-2"></i>
+                    Top Tools Used
+                </h5>
+            </div>
+            <div class="card-body">
+                <canvas id="toolsChart" height="200"></canvas>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Recent Activity -->
+<div class="row mb-4">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-history me-2"></i>
+                    Recent Projects
+                </h5>
+            </div>
+            <div class="card-body">
+                <div id="recent-projects">
+                    <div class="text-center py-3">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">
+                    <i class="fas fa-bolt me-2"></i>
+                    Quick Stats
+                </h5>
+                <small class="text-muted">Last 7 days</small>
+            </div>
+            <div class="card-body">
+                <div id="quick-stats">
+                    <div class="text-center py-3">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Engagement Insights -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">
+                    <i class="fas fa-brain me-2"></i>
+                    Engagement & Flow Analysis
+                </h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="text-center">
+                            <div class="display-4 text-primary mb-2" id="engagement-score">-</div>
+                            <h6>Engagement Score</h6>
+                            <p class="text-muted small">Based on think times and response patterns</p>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="text-center">
+                            <div class="display-4 text-success mb-2" id="avg-session-length">-</div>
+                            <h6>Avg Session Length</h6>
+                            <p class="text-muted small">minutes per development session</p>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="text-center">
+                            <div class="display-4 text-info mb-2" id="think-time">-</div>
+                            <h6>Think Time</h6>
+                            <p class="text-muted small">average seconds between interactions</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/dashboard.js"></script>
+<script>
+    // Initialize dashboard on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        loadDashboardData();
+    });
+</script>
+{% endblock %}

app/dashboard/templates/projects.html

@@ -0,0 +1,192 @@
+{% extends "base.html" %}
+
+{% block title %}Projects - Claude Code Project Tracker{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>
+                <i class="fas fa-folder-open me-2"></i>
+                Projects Overview
+            </h1>
+            <div class="d-flex gap-2">
+                <div class="input-group" style="width: 300px;">
+                    <input type="text" class="form-control search-box" placeholder="Search projects..." id="search-input">
+                    <button class="btn btn-outline-secondary" type="button">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+                <button type="button" class="btn btn-outline-primary" onclick="refreshProjects()">
+                    <i class="fas fa-sync-alt me-1"></i>
+                    Refresh
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row mb-4">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div id="projects-list">
+                    <div class="text-center py-4">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-2 text-muted">Loading projects...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    loadProjects();
+    
+    // Search functionality
+    document.getElementById('search-input').addEventListener('input', function(e) {
+        filterProjects(e.target.value);
+    });
+});
+
+async function loadProjects() {
+    try {
+        const projects = await apiClient.getProjects();
+        displayProjects(projects);
+    } catch (error) {
+        console.error('Failed to load projects:', error);
+        document.getElementById('projects-list').innerHTML = `
+            <div class="text-center text-danger py-4">
+                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
+                <p>Failed to load projects</p>
+            </div>
+        `;
+    }
+}
+
+function displayProjects(projects) {
+    const container = document.getElementById('projects-list');
+    
+    if (!projects.length) {
+        container.innerHTML = `
+            <div class="text-center text-muted py-4">
+                <i class="fas fa-folder-plus fa-3x mb-3"></i>
+                <h5>No projects found</h5>
+                <p>Start using Claude Code in a project directory to begin tracking.</p>
+            </div>
+        `;
+        return;
+    }
+    
+    const projectsHtml = projects.map(project => `
+        <div class="project-card card mb-3 fade-in" data-name="${project.name.toLowerCase()}" data-path="${project.path.toLowerCase()}">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-8">
+                        <h5 class="card-title mb-2">
+                            <i class="fas fa-folder me-2 text-primary"></i>
+                            ${project.name}
+                        </h5>
+                        <p class="text-muted mb-2">
+                            <i class="fas fa-map-marker-alt me-1"></i>
+                            <code>${project.path}</code>
+                        </p>
+                        ${project.git_repo ? `
+                            <p class="text-muted mb-2">
+                                <i class="fab fa-git-alt me-1"></i>
+                                <a href="${project.git_repo}" target="_blank" class="text-decoration-none">${project.git_repo}</a>
+                            </p>
+                        ` : ''}
+                        ${project.languages && project.languages.length ? `
+                            <div class="mb-2">
+                                ${project.languages.map(lang => `
+                                    <span class="badge bg-secondary me-1">${lang}</span>
+                                `).join('')}
+                            </div>
+                        ` : ''}
+                    </div>
+                    <div class="col-md-4 text-end">
+                        <div class="row g-2 text-center">
+                            <div class="col-6">
+                                <div class="fw-bold text-primary">${project.total_sessions}</div>
+                                <small class="text-muted">Sessions</small>
+                            </div>
+                            <div class="col-6">
+                                <div class="fw-bold text-success">${ApiUtils.formatDuration(project.total_time_minutes)}</div>
+                                <small class="text-muted">Time</small>
+                            </div>
+                            <div class="col-6">
+                                <div class="fw-bold text-info">${project.files_modified_count}</div>
+                                <small class="text-muted">Files</small>
+                            </div>
+                            <div class="col-6">
+                                <div class="fw-bold text-warning">${project.lines_changed_count.toLocaleString()}</div>
+                                <small class="text-muted">Lines</small>
+                            </div>
+                        </div>
+                        <hr class="my-2">
+                        <small class="text-muted">
+                            Last active: ${ApiUtils.formatRelativeTime(project.last_activity)}
+                        </small>
+                        <div class="mt-2">
+                            <button class="btn btn-outline-primary btn-sm me-1" onclick="viewProjectTimeline(${project.id})">
+                                <i class="fas fa-timeline me-1"></i>
+                                Timeline
+                            </button>
+                            <button class="btn btn-outline-secondary btn-sm" onclick="viewProjectStats(${project.id})">
+                                <i class="fas fa-chart-bar me-1"></i>
+                                Stats
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `).join('');
+    
+    container.innerHTML = projectsHtml;
+}
+
+function filterProjects(searchTerm) {
+    const projects = document.querySelectorAll('.project-card');
+    const term = searchTerm.toLowerCase();
+    
+    projects.forEach(project => {
+        const name = project.dataset.name;
+        const path = project.dataset.path;
+        const matches = name.includes(term) || path.includes(term);
+        
+        project.style.display = matches ? 'block' : 'none';
+    });
+}
+
+function refreshProjects() {
+    const refreshBtn = document.querySelector('[onclick="refreshProjects()"]');
+    const icon = refreshBtn.querySelector('i');
+    
+    icon.classList.add('fa-spin');
+    refreshBtn.disabled = true;
+    
+    loadProjects().finally(() => {
+        icon.classList.remove('fa-spin');
+        refreshBtn.disabled = false;
+    });
+}
+
+function viewProjectTimeline(projectId) {
+    // Could open a modal or navigate to a detailed timeline view
+    window.open(`/dashboard/projects/${projectId}/timeline`, '_blank');
+}
+
+function viewProjectStats(projectId) {
+    // Could open a modal or navigate to detailed stats
+    window.open(`/dashboard/projects/${projectId}/stats`, '_blank');
+}
+</script>
+{% endblock %}