claude/claude-code-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Initial commit: Claude Code Project Tracker

Browse source 
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>
This commit is contained in:
Ryan Malloy 2025-08-11 02:59:21 -06:00
commit 44ed9936b7
48 changed files with 9707 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

334
app/dashboard/templates/conversations.html Normal file
View file

@ -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 %}