Ryan Malloy
bec1606c86
## Documentation System - Create complete documentation hub at /dashboard/docs with: - Getting Started guide with quick setup and troubleshooting - Hook Setup Guide with platform-specific configurations - API Reference with all endpoints and examples - FAQ with searchable questions and categories - Add responsive design with interactive features - Update navigation in base template ## Tool Call Tracking - Add ToolCall model for tracking Claude Code tool usage - Create /api/tool-calls endpoints for recording and analytics - Add tool_call hook type with auto-session detection - Include tool calls in project statistics and recalculation - Track tool names, parameters, execution time, and success rates ## Project Enhancements - Add project timeline and statistics pages (fix 404 errors) - Create recalculation script for fixing zero statistics - Update project stats to include tool call counts - Enhance session model with tool call relationships ## Infrastructure - Switch from requirements.txt to pyproject.toml/uv.lock - Add data import functionality for claude.json files - Update database connection to include all new models - Add comprehensive API documentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
416 lines
16 KiB
HTML
416 lines
16 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>
|
|
<button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
|
|
<i class="fas fa-times me-1"></i>
|
|
Clear
|
|
</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">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading conversations...</span>
|
|
</div>
|
|
<p class="mt-2">Loading your recent conversations...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadProjects();
|
|
loadRecentConversations();
|
|
});
|
|
|
|
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);
|
|
});
|
|
|
|
// Add event listener for project filtering
|
|
select.addEventListener('change', function() {
|
|
const selectedProjectId = this.value ? parseInt(this.value) : null;
|
|
loadConversationsForProject(selectedProjectId);
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to load projects:', error);
|
|
}
|
|
}
|
|
|
|
async function loadRecentConversations() {
|
|
await loadConversationsForProject(null);
|
|
}
|
|
|
|
async function loadConversationsForProject(projectId = null) {
|
|
const resultsContainer = document.getElementById('conversation-results');
|
|
const resultsTitle = document.getElementById('results-title');
|
|
|
|
// Show loading state
|
|
resultsContainer.innerHTML = `
|
|
<div class="text-center text-muted py-3">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-2">Loading conversations...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// Update title based on filtering
|
|
if (projectId) {
|
|
const projects = await apiClient.getProjects();
|
|
const project = projects.find(p => p.id === projectId);
|
|
resultsTitle.textContent = `Conversations - ${project ? project.name : 'Selected Project'}`;
|
|
} else {
|
|
resultsTitle.textContent = 'Recent Conversations';
|
|
}
|
|
|
|
const conversations = await apiClient.getConversations(projectId, 50);
|
|
|
|
if (!conversations.length) {
|
|
const noResultsMessage = projectId ?
|
|
`No conversations found for this project.` :
|
|
`No conversation history has been recorded yet.`;
|
|
|
|
resultsContainer.innerHTML = `
|
|
<div class="text-center text-muted py-5">
|
|
<i class="fas fa-comments fa-3x mb-3"></i>
|
|
<h5>No Conversations Found</h5>
|
|
<p>${noResultsMessage}</p>
|
|
${!projectId ? '<p class="small text-muted">Conversations will appear here as you use Claude Code.</p>' : ''}
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
displaySearchResults(conversations, null);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load conversations:', error);
|
|
resultsContainer.innerHTML = `
|
|
<div class="text-center text-danger py-4">
|
|
<i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
|
|
<p>Failed to load conversations. Please try again.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function handleSearchKeypress(event) {
|
|
if (event.key === 'Enter') {
|
|
searchConversations();
|
|
}
|
|
}
|
|
|
|
function clearSearch() {
|
|
// Clear the search input
|
|
document.getElementById('search-query').value = '';
|
|
|
|
// Return to filtered/unfiltered conversation list based on current project filter
|
|
const projectId = document.getElementById('project-filter').value || null;
|
|
loadConversationsForProject(projectId ? parseInt(projectId) : null);
|
|
}
|
|
|
|
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>
|
|
${query ? `
|
|
<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">${query ? highlightSearchTerms(ApiUtils.truncateText(result.user_prompt, 200), query) : ApiUtils.truncateText(result.user_prompt, 200)}</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">${query ? highlightSearchTerms(ApiUtils.truncateText(result.claude_response, 200), query) : ApiUtils.truncateText(result.claude_response, 200)}</p>
|
|
</div>
|
|
` : ''}
|
|
|
|
${result.context && result.context.length && query ? `
|
|
<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 %} |