Ryan Malloy
44ed9936b7
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>
334 lines
13 KiB
HTML
334 lines
13 KiB
HTML
{% 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 %} |