Add comprehensive Docker deployment and file upload functionality
Features Added: • Docker containerization with multi-stage Python 3.12 build • Caddy reverse proxy integration with automatic SSL • File upload interface for .claude.json imports with preview • Comprehensive hook system with 39+ hook types across 9 categories • Complete documentation system with Docker and import guides Technical Improvements: • Enhanced database models with hook tracking capabilities • Robust file validation and error handling for uploads • Production-ready Docker compose configuration • Health checks and resource limits for containers • Database initialization scripts for containerized deployments Documentation: • Docker Deployment Guide with troubleshooting • Data Import Guide with step-by-step instructions • Updated Getting Started guide with new features • Enhanced documentation index with responsive grid layout 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
bec1606c86
commit
50c80596d0
36 changed files with 4334 additions and 172 deletions
562
app/dashboard/templates/docs/data-import.html
Normal file
562
app/dashboard/templates/docs/data-import.html
Normal file
|
|
@ -0,0 +1,562 @@
|
|||
{% extends "docs/base.html" %}
|
||||
|
||||
{% block title %}Data Import Guide - Claude Code Project Tracker{% endblock %}
|
||||
|
||||
{% block doc_content %}
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="mb-4">
|
||||
<i class="fas fa-cloud-upload-alt text-primary me-2"></i>
|
||||
Data Import Guide
|
||||
</h1>
|
||||
|
||||
<p class="lead">
|
||||
Learn how to import your Claude Code usage history using the <code>~/.claude.json</code> file.
|
||||
</p>
|
||||
|
||||
<!-- Overview -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-info-circle me-2"></i>What is .claude.json?</h2>
|
||||
<p>
|
||||
The <code>~/.claude.json</code> file is automatically created by Claude Code and contains your usage history,
|
||||
including project paths, conversation summaries, and usage statistics.
|
||||
</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Typical Location</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<strong>macOS:</strong><br>
|
||||
<code>~/.claude.json</code>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<strong>Linux:</strong><br>
|
||||
<code>~/.claude.json</code>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<strong>Windows:</strong><br>
|
||||
<code>%USERPROFILE%\.claude.json</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Import Methods -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-upload me-2"></i>Import Methods</h2>
|
||||
<p>There are two ways to import your Claude Code data:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-cloud-upload-alt me-1"></i>File Upload</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Recommended method</strong></p>
|
||||
<ul>
|
||||
<li>Upload file directly through web interface</li>
|
||||
<li>Works with any .claude.json file</li>
|
||||
<li>Preview before importing</li>
|
||||
<li>No server file system access needed</li>
|
||||
</ul>
|
||||
<p class="text-success mb-0"><i class="fas fa-check me-1"></i>Best for most users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-folder-open me-1"></i>File Path</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Server-side import</strong></p>
|
||||
<ul>
|
||||
<li>Specify path to .claude.json file</li>
|
||||
<li>Uses default ~/.claude.json if no path given</li>
|
||||
<li>Requires file system access</li>
|
||||
<li>Good for server deployments</li>
|
||||
</ul>
|
||||
<p class="text-info mb-0"><i class="fas fa-info me-1"></i>For advanced users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- File Upload Guide -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-step-forward me-2"></i>File Upload Step-by-Step</h2>
|
||||
|
||||
<div class="accordion" id="uploadStepsAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="step1">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStep1">
|
||||
Step 1: Locate your .claude.json file
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseStep1" class="accordion-collapse collapse show" data-bs-parent="#uploadStepsAccordion">
|
||||
<div class="accordion-body">
|
||||
<p>Find the .claude.json file on your system:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>macOS/Linux</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre><code class="language-bash"># Open terminal and check if file exists
|
||||
ls -la ~/.claude.json
|
||||
|
||||
# Or use finder/file manager
|
||||
open ~/.claude.json</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Windows</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre><code class="language-cmd"># Open Command Prompt
|
||||
dir %USERPROFILE%\.claude.json
|
||||
|
||||
# Or use File Explorer
|
||||
explorer %USERPROFILE%</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-3">
|
||||
<i class="fas fa-lightbulb me-1"></i>
|
||||
<strong>Tip:</strong> If the file doesn't exist, use Claude Code for a few sessions to generate usage data first.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="step2">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStep2">
|
||||
Step 2: Access the Import Page
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseStep2" class="accordion-collapse collapse" data-bs-parent="#uploadStepsAccordion">
|
||||
<div class="accordion-body">
|
||||
<p>Navigate to the data import page:</p>
|
||||
<ol>
|
||||
<li>Go to your Claude Code Tracker dashboard</li>
|
||||
<li>Click <strong>"Import Data"</strong> in the navigation menu</li>
|
||||
<li>Ensure the <strong>"Upload File"</strong> tab is selected (default)</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-link me-1"></i>
|
||||
<strong>Direct Link:</strong> <a href="/dashboard/import" class="alert-link">Go to Import Page</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="step3">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStep3">
|
||||
Step 3: Select and Upload File
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseStep3" class="accordion-collapse collapse" data-bs-parent="#uploadStepsAccordion">
|
||||
<div class="accordion-body">
|
||||
<p>Upload your .claude.json file:</p>
|
||||
<ol>
|
||||
<li>Click <strong>"Select .claude.json file"</strong> button</li>
|
||||
<li>Navigate to and select your .claude.json file</li>
|
||||
<li>File information will be displayed (name, size, modified date)</li>
|
||||
<li>The upload buttons will become enabled</li>
|
||||
</ol>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<strong>File Validation</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>Must be a .json file</li>
|
||||
<li>Maximum size: 10 MB</li>
|
||||
<li>Must be UTF-8 encoded</li>
|
||||
<li>Must contain valid JSON</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="step4">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStep4">
|
||||
Step 4: Preview Import (Recommended)
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseStep4" class="accordion-collapse collapse" data-bs-parent="#uploadStepsAccordion">
|
||||
<div class="accordion-body">
|
||||
<p>Before importing, preview what data will be imported:</p>
|
||||
|
||||
<ol>
|
||||
<li>Click <strong>"Preview Upload"</strong> button</li>
|
||||
<li>Review the import summary showing:
|
||||
<ul>
|
||||
<li>Number of projects to be imported</li>
|
||||
<li>Total history entries</li>
|
||||
<li>Claude usage statistics</li>
|
||||
<li>Sample project paths</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Verify the data looks correct</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-eye me-1"></i>
|
||||
<strong>Preview Benefits:</strong> Catch potential issues before importing and verify data integrity.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="step5">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStep5">
|
||||
Step 5: Import Data
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseStep5" class="accordion-collapse collapse" data-bs-parent="#uploadStepsAccordion">
|
||||
<div class="accordion-body">
|
||||
<p>Complete the import process:</p>
|
||||
|
||||
<ol>
|
||||
<li>Click <strong>"Import Upload"</strong> button (or "Looks good - Import this data" after preview)</li>
|
||||
<li>Confirm the import when prompted</li>
|
||||
<li>Wait for the import to complete</li>
|
||||
<li>Review the success summary showing imported counts</li>
|
||||
<li>Use the provided links to view your data</li>
|
||||
</ol>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<strong>Import Results</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>After successful import, you'll see:</p>
|
||||
<ul class="mb-0">
|
||||
<li>Number of projects imported</li>
|
||||
<li>Number of estimated sessions created</li>
|
||||
<li>Number of conversations imported</li>
|
||||
<li>Any warnings or errors encountered</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What Gets Imported -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-database me-2"></i>What Gets Imported</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-folder me-1"></i>Projects</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>Project directory paths</li>
|
||||
<li>Automatically detected programming languages</li>
|
||||
<li>Project names (derived from directory names)</li>
|
||||
<li>Creation timestamps (estimated)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-chart-line me-1"></i>Usage Statistics</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>Total Claude Code startup count</li>
|
||||
<li>First usage timestamp</li>
|
||||
<li>Prompt queue usage statistics</li>
|
||||
<li>Estimated session distribution over time</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-comments me-1"></i>Conversations</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>Conversation topic summaries from project history</li>
|
||||
<li>Estimated timestamps</li>
|
||||
<li>Association with imported projects</li>
|
||||
<li>Import metadata for tracking</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h5 class="mb-0"><i class="fas fa-clock me-1"></i>Sessions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>Estimated sessions based on startup count</li>
|
||||
<li>Distributed over your usage period</li>
|
||||
<li>Random but realistic session durations</li>
|
||||
<li>Associated activity and conversation counts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Data Privacy & Security -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-shield-alt me-2"></i>Data Privacy & Security</h2>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<h5><i class="fas fa-lock me-1"></i>Your Data Stays Local</h5>
|
||||
<ul class="mb-0">
|
||||
<li>All data is processed and stored locally on your server</li>
|
||||
<li>No external services are contacted during import</li>
|
||||
<li>Upload is handled securely over HTTPS</li>
|
||||
<li>Files are processed in memory and not stored on disk</li>
|
||||
<li>Only the structured data is saved to your database</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>File Security</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>10 MB upload size limit</li>
|
||||
<li>JSON format validation</li>
|
||||
<li>UTF-8 encoding requirement</li>
|
||||
<li>No executable code processing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Data Handling</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>Files processed in memory only</li>
|
||||
<li>No temporary file creation</li>
|
||||
<li>Immediate cleanup after processing</li>
|
||||
<li>Error handling for malformed data</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-tools me-2"></i>Troubleshooting</h2>
|
||||
|
||||
<div class="accordion" id="troubleshootingAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="troubleFile">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTroubleFile">
|
||||
"File must be a JSON file" error
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTroubleFile" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Cause:</strong> The selected file doesn't have a .json extension.</p>
|
||||
<p><strong>Solution:</strong></p>
|
||||
<ul>
|
||||
<li>Ensure you're selecting the correct .claude.json file</li>
|
||||
<li>Check the file extension is exactly ".json"</li>
|
||||
<li>On some systems, file extensions might be hidden</li>
|
||||
<li>Try copying the file and renaming it to ensure .json extension</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="troubleSize">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTroubleSize">
|
||||
"File too large" error
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTroubleSize" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Cause:</strong> The .claude.json file is larger than 10 MB.</p>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ul>
|
||||
<li>Use the "File Path" import method instead</li>
|
||||
<li>Contact your administrator to increase upload limits</li>
|
||||
<li>Try importing a newer, smaller version of the file</li>
|
||||
<li>Clean up the .claude.json file by backing up old data</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="troubleJson">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTroubleJson">
|
||||
"Invalid JSON" error
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTroubleJson" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Cause:</strong> The file contains malformed JSON data.</p>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ul>
|
||||
<li>Check if the file was corrupted during transfer</li>
|
||||
<li>Try re-generating the file by using Claude Code again</li>
|
||||
<li>Use a JSON validator to check the file structure</li>
|
||||
<li>Ensure the file wasn't partially downloaded</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="troubleImport">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTroubleImport">
|
||||
Import completed but no data appears
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTroubleImport" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Possible causes and solutions:</strong></p>
|
||||
<ul>
|
||||
<li><strong>Empty file:</strong> The .claude.json file might be empty or contain no project data</li>
|
||||
<li><strong>Duplicate import:</strong> Data might already exist and wasn't imported again (this is normal)</li>
|
||||
<li><strong>Filtering:</strong> Check if any filters are applied in the project view</li>
|
||||
<li><strong>Refresh:</strong> Try refreshing the page or clicking the "Refresh" button</li>
|
||||
<li><strong>Check import results:</strong> Review the import summary for any warnings or errors</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Advanced Topics -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-cogs me-2"></i>Advanced Topics</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Multiple Imports</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>The import system prevents duplicates:</p>
|
||||
<ul>
|
||||
<li>Projects are identified by path</li>
|
||||
<li>Duplicate projects won't be re-created</li>
|
||||
<li>Safe to import multiple times</li>
|
||||
<li>New data will be added to existing projects</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Data Estimation</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Since .claude.json has limited data:</p>
|
||||
<ul>
|
||||
<li>Session times are estimated</li>
|
||||
<li>Durations are randomized realistically</li>
|
||||
<li>Activity counts are approximated</li>
|
||||
<li>Language detection uses file system</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card sticky-top" style="top: 1rem;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="fas fa-rocket me-1"></i>Quick Start</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ol class="mb-3">
|
||||
<li>Find your <code>~/.claude.json</code> file</li>
|
||||
<li><a href="/dashboard/import">Go to Import Page</a></li>
|
||||
<li>Click "Select .claude.json file"</li>
|
||||
<li>Choose your file</li>
|
||||
<li>Click "Preview Upload"</li>
|
||||
<li>Click "Import Upload"</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-lightbulb me-1"></i>
|
||||
<strong>Pro Tip:</strong> Always preview before importing to catch any issues early.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="fas fa-question-circle me-1"></i>Need Help?</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Common import questions:</p>
|
||||
<ul class="mb-0">
|
||||
<li><a href="#troubleshootingAccordion">Troubleshooting Guide</a></li>
|
||||
<li><a href="/dashboard/docs/faq">FAQ Page</a></li>
|
||||
<li><a href="/dashboard/docs/api-reference">API Documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
415
app/dashboard/templates/docs/docker-deployment.html
Normal file
415
app/dashboard/templates/docs/docker-deployment.html
Normal file
|
|
@ -0,0 +1,415 @@
|
|||
{% extends "docs/base.html" %}
|
||||
|
||||
{% block title %}Docker Deployment - Claude Code Project Tracker{% endblock %}
|
||||
|
||||
{% block doc_content %}
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="mb-4">
|
||||
<i class="fab fa-docker text-primary me-2"></i>
|
||||
Docker Deployment Guide
|
||||
</h1>
|
||||
|
||||
<p class="lead">
|
||||
Deploy Claude Code Project Tracker using Docker with Caddy reverse proxy for production environments.
|
||||
</p>
|
||||
|
||||
<!-- Prerequisites -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-check-circle me-2"></i>Prerequisites</h2>
|
||||
<div class="alert alert-info">
|
||||
<p class="mb-2"><strong>Required:</strong></p>
|
||||
<ul class="mb-0">
|
||||
<li>Docker and Docker Compose installed</li>
|
||||
<li>Caddy with docker-proxy plugin</li>
|
||||
<li>External Caddy network configured</li>
|
||||
<li>Domain name (or local development domain)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-rocket me-2"></i>Quick Start</h2>
|
||||
<p>Follow these steps to get Claude Code Tracker running with Docker:</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">1. Clone and Configure</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre><code class="language-bash"># Clone the repository
|
||||
git clone <repository-url> claude-tracker
|
||||
cd claude-tracker
|
||||
|
||||
# Copy environment template
|
||||
cp .env.example .env</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">2. Configure Environment</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Edit the <code>.env</code> file with your settings:</p>
|
||||
<pre><code class="language-bash"># Domain configuration
|
||||
DOMAIN=claude.l.supported.systems
|
||||
|
||||
# Database settings
|
||||
DATABASE_URL=sqlite+aiosqlite:////app/data/tracker.db
|
||||
|
||||
# Application settings
|
||||
DEBUG=false
|
||||
PYTHONPATH=/app</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">3. Deploy with Docker Compose</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre><code class="language-bash"># Build and start the container
|
||||
docker-compose up -d
|
||||
|
||||
# View logs
|
||||
docker-compose logs -f
|
||||
|
||||
# Check status
|
||||
docker-compose ps</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Docker Configuration -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-cog me-2"></i>Docker Configuration</h2>
|
||||
|
||||
<h4 class="mt-4">Dockerfile</h4>
|
||||
<p>The application uses a multi-stage Docker build with Python 3.12 and uv package manager:</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<pre><code class="language-dockerfile"># Multi-stage build with Python 3.12
|
||||
FROM python:3.12-slim
|
||||
|
||||
# Install uv package manager
|
||||
COPY --from=ghcr.io/astral-sh/uv:latest /uv /bin/uv
|
||||
|
||||
# Application setup
|
||||
WORKDIR /app
|
||||
COPY . .
|
||||
|
||||
# Install dependencies and create virtual environment
|
||||
RUN uv venv && uv pip install -r requirements.txt
|
||||
|
||||
# Database initialization script
|
||||
COPY init_db.py ./
|
||||
|
||||
# Startup script with database initialization
|
||||
CMD ["./start.sh"]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4">docker-compose.yml</h4>
|
||||
<p>The Docker Compose configuration includes Caddy integration:</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<pre><code class="language-yaml">services:
|
||||
claude-tracker:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: claude-tracker-api
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- DATABASE_URL=sqlite+aiosqlite:////app/data/tracker.db
|
||||
- DEBUG=true
|
||||
- PYTHONPATH=/app
|
||||
volumes:
|
||||
- ./data:/app/data
|
||||
- ./app/dashboard/static:/app/app/dashboard/static:ro
|
||||
networks:
|
||||
- caddy
|
||||
labels:
|
||||
# Caddy reverse proxy configuration
|
||||
caddy: ${DOMAIN:-claude.l.supported.systems}
|
||||
caddy.reverse_proxy: "{{upstreams 8000}}"
|
||||
expose:
|
||||
- 8000
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-f", "http://localhost:8000/health"]
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
start_period: 30s
|
||||
|
||||
networks:
|
||||
caddy:
|
||||
external: true
|
||||
name: caddy</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Caddy Integration -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-globe me-2"></i>Caddy Integration</h2>
|
||||
<p>The application integrates with Caddy using docker-proxy labels for automatic SSL and reverse proxy configuration.</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Caddy Labels Explained</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code>caddy: ${DOMAIN}</code> - Sets the domain for the service</li>
|
||||
<li><code>caddy.reverse_proxy: "{{upstreams 8000}}"</code> - Proxies to port 8000</li>
|
||||
<li>Automatic SSL certificate generation</li>
|
||||
<li>Health check integration</li>
|
||||
<li>Load balancing support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Database & Persistence -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-database me-2"></i>Database & Persistence</h2>
|
||||
<p>The application uses SQLite with proper volume mounting for data persistence:</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Volume Configuration</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code>./data:/app/data</code> - Database and file storage</li>
|
||||
<li><code>./app/dashboard/static:/app/app/dashboard/static:ro</code> - Static assets (read-only)</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-warning mt-3">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>
|
||||
<strong>Important:</strong> Ensure the <code>./data</code> directory exists and has proper permissions before starting the container.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Management Commands -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-terminal me-2"></i>Management Commands</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Container Management</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre><code class="language-bash"># Start services
|
||||
docker-compose up -d
|
||||
|
||||
# Stop services
|
||||
docker-compose down
|
||||
|
||||
# Restart services
|
||||
docker-compose restart
|
||||
|
||||
# View logs
|
||||
docker-compose logs -f
|
||||
|
||||
# Check status
|
||||
docker-compose ps</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Database Management</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre><code class="language-bash"># Execute shell in container
|
||||
docker-compose exec claude-tracker sh
|
||||
|
||||
# Initialize database manually
|
||||
docker-compose exec claude-tracker python init_db.py
|
||||
|
||||
# Backup database
|
||||
cp ./data/tracker.db ./data/tracker.db.backup
|
||||
|
||||
# View database size
|
||||
du -h ./data/tracker.db</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Monitoring & Health -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-heartbeat me-2"></i>Monitoring & Health</h2>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Health Checks</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>The container includes built-in health checks:</p>
|
||||
<ul>
|
||||
<li><strong>Endpoint:</strong> <code>http://localhost:8000/health</code></li>
|
||||
<li><strong>Interval:</strong> 30 seconds</li>
|
||||
<li><strong>Timeout:</strong> 10 seconds</li>
|
||||
<li><strong>Retries:</strong> 3 attempts</li>
|
||||
<li><strong>Start Period:</strong> 30 seconds</li>
|
||||
</ul>
|
||||
|
||||
<pre><code class="language-bash"># Check health status
|
||||
docker-compose ps
|
||||
curl https://your-domain.com/health</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0">Resource Limits</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Configured resource limits:</p>
|
||||
<ul>
|
||||
<li><strong>CPU Limit:</strong> 1.0 core</li>
|
||||
<li><strong>Memory Limit:</strong> 512MB</li>
|
||||
<li><strong>CPU Reservation:</strong> 0.25 core</li>
|
||||
<li><strong>Memory Reservation:</strong> 128MB</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-tools me-2"></i>Troubleshooting</h2>
|
||||
|
||||
<div class="accordion" id="troubleshootingAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
|
||||
Container keeps restarting
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<pre><code class="language-bash"># Check logs for errors
|
||||
docker-compose logs claude-tracker
|
||||
|
||||
# Check database permissions
|
||||
ls -la ./data/
|
||||
|
||||
# Verify database initialization
|
||||
docker-compose exec claude-tracker python init_db.py</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
|
||||
502 Bad Gateway errors
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<pre><code class="language-bash"># Check if container is running
|
||||
docker-compose ps
|
||||
|
||||
# Verify health check
|
||||
docker-compose exec claude-tracker curl localhost:8000/health
|
||||
|
||||
# Check Caddy network connectivity
|
||||
docker network ls | grep caddy</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
|
||||
Database connection issues
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
||||
<div class="accordion-body">
|
||||
<pre><code class="language-bash"># Create data directory if missing
|
||||
mkdir -p ./data
|
||||
chmod 755 ./data
|
||||
|
||||
# Remove corrupted database
|
||||
rm ./data/tracker.db
|
||||
|
||||
# Restart container to reinitialize
|
||||
docker-compose restart</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security Considerations -->
|
||||
<section class="mb-5">
|
||||
<h2><i class="fas fa-shield-alt me-2"></i>Security Considerations</h2>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<h5><i class="fas fa-exclamation-triangle me-1"></i>Production Security</h5>
|
||||
<ul class="mb-0">
|
||||
<li>Set <code>DEBUG=false</code> in production</li>
|
||||
<li>Use strong domain names and SSL certificates</li>
|
||||
<li>Regularly backup the database</li>
|
||||
<li>Monitor container logs for suspicious activity</li>
|
||||
<li>Keep Docker images updated</li>
|
||||
<li>Limit container resource usage</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card sticky-top" style="top: 1rem;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="fas fa-list me-1"></i>Quick Reference</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6>Essential Commands</h6>
|
||||
<div class="code-block mb-3">
|
||||
<pre><code># Deploy
|
||||
docker-compose up -d
|
||||
|
||||
# Logs
|
||||
docker-compose logs -f
|
||||
|
||||
# Stop
|
||||
docker-compose down</code></pre>
|
||||
</div>
|
||||
|
||||
<h6>Key Files</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fas fa-file me-1"></i><code>.env</code></li>
|
||||
<li><i class="fas fa-file me-1"></i><code>docker-compose.yml</code></li>
|
||||
<li><i class="fas fa-file me-1"></i><code>Dockerfile</code></li>
|
||||
<li><i class="fas fa-folder me-1"></i><code>./data/</code></li>
|
||||
</ul>
|
||||
|
||||
<h6>Default Ports</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fas fa-network-wired me-1"></i>8000 (Internal)</li>
|
||||
<li><i class="fas fa-globe me-1"></i>80/443 (Caddy)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -71,13 +71,18 @@
|
|||
<p class="text-muted mb-3">Start by importing your existing Claude Code conversation history from your <code>~/.claude.json</code> file.</p>
|
||||
|
||||
<div class="bg-light p-3 rounded mb-3">
|
||||
<h6><i class="fas fa-terminal me-2"></i>Steps:</h6>
|
||||
<ol class="mb-0">
|
||||
<h6><i class="fas fa-cloud-upload-alt me-2"></i>File Upload Method (Recommended):</h6>
|
||||
<ol class="mb-2">
|
||||
<li>Navigate to the <a href="/dashboard/import">Import Data</a> page</li>
|
||||
<li>Click "Choose File" and select your <code>~/.claude.json</code> file</li>
|
||||
<li>Click "Import Data" and wait for processing to complete</li>
|
||||
<li>Review the import summary for any issues</li>
|
||||
<li>Click "Select .claude.json file" and choose your file</li>
|
||||
<li>Click "Preview Upload" to review what will be imported</li>
|
||||
<li>Click "Import Upload" to complete the import</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-success mt-2 mb-0">
|
||||
<i class="fas fa-lightbulb me-1"></i>
|
||||
<strong>New:</strong> File upload method works with any .claude.json file and provides detailed previews before importing.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mb-0">
|
||||
|
|
|
|||
531
app/dashboard/templates/docs/hook-reference.html
Normal file
531
app/dashboard/templates/docs/hook-reference.html
Normal file
|
|
@ -0,0 +1,531 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/dashboard/docs">Documentation</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Complete Hook Reference</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h2><i class="fas fa-book-open me-3"></i>Complete Hook Reference</h2>
|
||||
<p class="lead text-muted">Comprehensive guide to all available Claude Code hooks</p>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
30+ Hook Types
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Quick Overview -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h3><i class="fas fa-lightning-bolt me-2 text-primary"></i>Hook Categories Overview</h3>
|
||||
<p>Claude Code Tracker supports comprehensive development intelligence through these hook categories:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-primary bg-opacity-10">
|
||||
<div class="card-body p-3 text-center">
|
||||
<i class="fas fa-play-circle fa-2x text-primary mb-2"></i>
|
||||
<h6>Essential (5)</h6>
|
||||
<small class="text-muted">Core session & tool tracking</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-warning bg-opacity-10">
|
||||
<div class="card-body p-3 text-center">
|
||||
<i class="fas fa-tachometer-alt fa-2x text-warning mb-2"></i>
|
||||
<h6>Performance (5)</h6>
|
||||
<small class="text-muted">System & debug monitoring</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-success bg-opacity-10">
|
||||
<div class="card-body p-3 text-center">
|
||||
<i class="fas fa-code-branch fa-2x text-success mb-2"></i>
|
||||
<h6>Code Quality (4)</h6>
|
||||
<small class="text-muted">Linting, testing, builds</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-info bg-opacity-10">
|
||||
<div class="card-body p-3 text-center">
|
||||
<i class="fas fa-project-diagram fa-2x text-info mb-2"></i>
|
||||
<h6>Workflow (4)</h6>
|
||||
<small class="text-muted">Development patterns</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-secondary bg-opacity-10">
|
||||
<div class="card-body p-3 text-center">
|
||||
<i class="fas fa-users fa-2x text-secondary mb-2"></i>
|
||||
<h6>Collaboration (4)</h6>
|
||||
<small class="text-muted">External interactions</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-dark bg-opacity-10">
|
||||
<div class="card-body p-3 text-center">
|
||||
<i class="fas fa-brain fa-2x text-dark mb-2"></i>
|
||||
<h6>Intelligence (5)</h6>
|
||||
<small class="text-muted">High-level project insights</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Essential Hooks -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h3 class="mb-0"><i class="fas fa-play-circle me-2"></i>Essential Hooks</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-4">Core hooks that every user should enable for basic session and development tracking.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><code>session_start</code></h6>
|
||||
<p class="small text-muted mb-2">Triggered when a new Claude Code session begins</p>
|
||||
<div class="badge bg-success">Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><code>session_end</code></h6>
|
||||
<p class="small text-muted mb-2">Triggered when a Claude Code session ends</p>
|
||||
<div class="badge bg-success">Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><code>conversation_update</code></h6>
|
||||
<p class="small text-muted mb-2">Logs conversation messages and interactions</p>
|
||||
<div class="badge bg-warning">Recommended</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><code>tool_call</code></h6>
|
||||
<p class="small text-muted mb-2">Tracks which tools are used and their performance</p>
|
||||
<div class="badge bg-warning">Recommended</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><code>file_modified</code></h6>
|
||||
<p class="small text-muted mb-2">Records file creations, modifications, and deletions</p>
|
||||
<div class="badge bg-info">Optional</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance & Debugging Hooks -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h3 class="mb-0"><i class="fas fa-tachometer-alt me-2"></i>Performance & Debugging</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-4">Monitor system performance and track debugging activities.</p>
|
||||
|
||||
<div class="accordion" id="performanceAccordion">
|
||||
<div class="accordion-item border-0">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf1">
|
||||
<i class="fas fa-exclamation-triangle me-2 text-danger"></i>
|
||||
<code>tool_error</code> - Track failed tool calls
|
||||
</button>
|
||||
</h2>
|
||||
<div id="perf1" class="accordion-collapse collapse show" data-bs-parent="#performanceAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Purpose:</strong> Record when tools fail with detailed error information.</p>
|
||||
<div class="bg-dark text-light p-3 rounded mb-3">
|
||||
<h6 class="text-light">Hook Configuration:</h6>
|
||||
<code class="small">
|
||||
"tool_error": "curl -X POST http://localhost:8000/api/hooks/tool-error -H 'Content-Type: application/json' -d '{\"tool_name\": \"$TOOL_NAME\", \"error_type\": \"$ERROR_TYPE\", \"error_message\": \"$ERROR_MESSAGE\", \"stack_trace\": \"$STACK_TRACE\"}'"
|
||||
</code>
|
||||
</div>
|
||||
<p><strong>Variables:</strong> <code>$TOOL_NAME</code>, <code>$ERROR_TYPE</code>, <code>$ERROR_MESSAGE</code>, <code>$STACK_TRACE</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item border-0">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf2">
|
||||
<i class="fas fa-clock me-2 text-primary"></i>
|
||||
<code>waiting_period_start/end</code> - Track thinking time
|
||||
</button>
|
||||
</h2>
|
||||
<div id="perf2" class="accordion-collapse collapse" data-bs-parent="#performanceAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Purpose:</strong> Monitor periods when Claude is processing vs actively working.</p>
|
||||
<div class="bg-dark text-light p-3 rounded mb-3">
|
||||
<h6 class="text-light">Hook Configurations:</h6>
|
||||
<code class="small d-block mb-2">
|
||||
"waiting_period_start": "curl -X POST .../api/hooks/waiting-period -d '{\"reason\": \"thinking\", \"context\": \"$CONTEXT\"}'"
|
||||
</code>
|
||||
<code class="small d-block">
|
||||
"waiting_period_end": "curl -X POST .../api/hooks/waiting-period -d '{\"duration_ms\": $DURATION_MS, \"end_time\": \"$TIMESTAMP\"}'"
|
||||
</code>
|
||||
</div>
|
||||
<p><strong>Use Cases:</strong> Identify bottlenecks, optimize prompts, understand processing patterns</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item border-0">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf3">
|
||||
<i class="fas fa-memory me-2 text-info"></i>
|
||||
<code>memory_usage</code> - Monitor system resources
|
||||
</button>
|
||||
</h2>
|
||||
<div id="perf3" class="accordion-collapse collapse" data-bs-parent="#performanceAccordion">
|
||||
<div class="accordion-body">
|
||||
<p><strong>Purpose:</strong> Track memory, CPU, and disk usage during development.</p>
|
||||
<div class="bg-dark text-light p-3 rounded mb-3">
|
||||
<h6 class="text-light">Hook Configuration:</h6>
|
||||
<code class="small">
|
||||
"memory_usage": "curl -X POST .../api/hooks/performance -d '{\"metric_type\": \"memory\", \"value\": $MEMORY_MB, \"unit\": \"MB\", \"threshold_exceeded\": $THRESHOLD_EXCEEDED}'"
|
||||
</code>
|
||||
</div>
|
||||
<p><strong>Metrics:</strong> memory, cpu, disk, network</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Quality Hooks -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h3 class="mb-0"><i class="fas fa-code-branch me-2"></i>Code Quality & Testing</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-4">Track linting, testing, builds, and dependency changes.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-search me-2 text-primary"></i><code>code_analysis</code></h6>
|
||||
<p class="small text-muted">ESLint, Prettier, type checking results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-vial me-2 text-success"></i><code>test_execution</code></h6>
|
||||
<p class="small text-muted">Unit tests, integration tests, coverage</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-hammer me-2 text-warning"></i><code>build_process</code></h6>
|
||||
<p class="small text-muted">Compilation, bundling, deployment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-boxes me-2 text-info"></i><code>dependency_change</code></h6>
|
||||
<p class="small text-muted">Package installs, updates, removals</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Hooks -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h3 class="mb-0"><i class="fas fa-project-diagram me-2"></i>Development Workflow</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-4">Understand development patterns and workflow efficiency.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-exchange-alt me-2 text-primary"></i><code>context_switch</code></h6>
|
||||
<p class="small text-muted">Track project/context changes</p>
|
||||
<div class="small">
|
||||
<strong>Impact:</strong> Measure multitasking overhead
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-search me-2 text-success"></i><code>search_query</code></h6>
|
||||
<p class="small text-muted">What you search for in code/files</p>
|
||||
<div class="small">
|
||||
<strong>Insights:</strong> Common patterns, knowledge gaps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-globe me-2 text-warning"></i><code>browser_tab</code></h6>
|
||||
<p class="small text-muted">Documentation, StackOverflow visits</p>
|
||||
<div class="small">
|
||||
<strong>Analysis:</strong> Research patterns, learning topics
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 bg-light">
|
||||
<div class="card-body">
|
||||
<h6><i class="fas fa-copy me-2 text-info"></i><code>copy_paste</code></h6>
|
||||
<p class="small text-muted">Code copying patterns</p>
|
||||
<div class="small">
|
||||
<strong>Quality:</strong> Identify repetitive work
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pre-configured Setups -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white">
|
||||
<h3 class="mb-0"><i class="fas fa-download me-2"></i>Pre-configured Hook Setups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted mb-4">Download ready-to-use configurations for different development styles:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-primary bg-opacity-10">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-rocket fa-2x text-primary mb-2"></i>
|
||||
<h6>Essential</h6>
|
||||
<p class="small text-muted">Core tracking only</p>
|
||||
<a href="/static/claude-hooks-essential.json" download class="btn btn-sm btn-primary">
|
||||
<i class="fas fa-download me-1"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-success bg-opacity-10">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-code fa-2x text-success mb-2"></i>
|
||||
<h6>Developer</h6>
|
||||
<p class="small text-muted">Code quality focused</p>
|
||||
<a href="/static/claude-hooks-developer.json" download class="btn btn-sm btn-success">
|
||||
<i class="fas fa-download me-1"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-warning bg-opacity-10">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-bolt fa-2x text-warning mb-2"></i>
|
||||
<h6>Power User</h6>
|
||||
<p class="small text-muted">Advanced analytics</p>
|
||||
<a href="/static/claude-hooks-power_user.json" download class="btn btn-sm btn-warning">
|
||||
<i class="fas fa-download me-1"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-info bg-opacity-10">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-graduation-cap fa-2x text-info mb-2"></i>
|
||||
<h6>Research</h6>
|
||||
<p class="small text-muted">Learning focused</p>
|
||||
<a href="/static/claude-hooks-research.json" download class="btn btn-sm btn-info">
|
||||
<i class="fas fa-download me-1"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-secondary bg-opacity-10">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-users fa-2x text-secondary mb-2"></i>
|
||||
<h6>Team</h6>
|
||||
<p class="small text-muted">Collaboration tracking</p>
|
||||
<a href="/static/claude-hooks-team.json" download class="btn btn-sm btn-secondary">
|
||||
<i class="fas fa-download me-1"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-3">
|
||||
<div class="card border-0 bg-dark bg-opacity-10">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-cogs fa-2x text-dark mb-2"></i>
|
||||
<h6>Comprehensive</h6>
|
||||
<p class="small text-muted">All hooks enabled</p>
|
||||
<a href="/static/claude-hooks-comprehensive.json" download class="btn btn-sm btn-dark">
|
||||
<i class="fas fa-download me-1"></i>Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<div class="sticky-top" style="top: 2rem;">
|
||||
<!-- Quick Navigation -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-list me-2"></i>Hook Categories</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#essential">Essential (5)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#performance">Performance (5)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#code-quality">Code Quality (4)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#workflow">Workflow (4)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#collaboration">Collaboration (4)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#intelligence">Intelligence (5)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#environment">Environment (4)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#learning">Learning (4)</a>
|
||||
<a class="nav-link py-1 px-2 text-sm" href="#testing">Testing (4)</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hook Statistics -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h6 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Hook Statistics</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="small">Total Hooks Available:</span>
|
||||
<span class="badge bg-primary">39</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="small">API Endpoints:</span>
|
||||
<span class="badge bg-success">10</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="small">Pre-built Configs:</span>
|
||||
<span class="badge bg-info">7</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small">Hook Variables:</span>
|
||||
<span class="badge bg-warning">25+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Setup -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h6 class="mb-0"><i class="fas fa-zap me-2"></i>Quick Setup</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ol class="small">
|
||||
<li>Download a pre-configured setup above</li>
|
||||
<li>Copy JSON content to your Claude settings</li>
|
||||
<li>Ensure tracker is running on port 8000</li>
|
||||
<li>Start Claude Code - hooks activate automatically!</li>
|
||||
</ol>
|
||||
<div class="d-grid gap-2 mt-3">
|
||||
<a href="/dashboard/docs/hook-setup" class="btn btn-sm btn-primary">
|
||||
<i class="fas fa-cogs me-1"></i>Setup Guide
|
||||
</a>
|
||||
<a href="/dashboard/docs/api-reference" class="btn btn-sm btn-outline-info">
|
||||
<i class="fas fa-code me-1"></i>API Reference
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Variable Reference -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h6 class="mb-0"><i class="fas fa-dollar-sign me-2"></i>Key Variables</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="small">
|
||||
<div class="mb-2">
|
||||
<code>$SESSION_ID</code>
|
||||
<div class="text-muted">Current session ID</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code>$TOOL_NAME</code>
|
||||
<div class="text-muted">Tool being called</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code>$TIMESTAMP</code>
|
||||
<div class="text-muted">Current timestamp</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code>$FILE_PATH</code>
|
||||
<div class="text-muted">Modified file path</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<code>$ERROR_MESSAGE</code>
|
||||
<div class="text-muted">Error details</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/dashboard/docs/hook-setup#variables" class="text-decoration-none small">
|
||||
<i class="fas fa-external-link-alt me-1"></i>
|
||||
View all variables
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<div class="row">
|
||||
<!-- Getting Started -->
|
||||
<div class="col-md-6 col-lg-3 mb-4">
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
|
|
@ -38,8 +38,54 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Import -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-secondary bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-cloud-upload-alt fa-lg text-secondary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title text-center">Data Import Guide</h5>
|
||||
<p class="card-text text-center text-muted flex-grow-1">
|
||||
Step-by-step guide to importing your .claude.json file using file upload or file paths.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="/dashboard/docs/data-import" class="btn btn-secondary">
|
||||
<i class="fas fa-arrow-right me-1"></i>
|
||||
Import Data
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Docker Deployment -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-info bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fab fa-docker fa-lg text-info"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title text-center">Docker Deployment</h5>
|
||||
<p class="card-text text-center text-muted flex-grow-1">
|
||||
Deploy Claude Code Tracker using Docker with Caddy reverse proxy integration.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="/dashboard/docs/docker-deployment" class="btn btn-info">
|
||||
<i class="fas fa-arrow-right me-1"></i>
|
||||
Deploy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hook Setup -->
|
||||
<div class="col-md-6 col-lg-3 mb-4">
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
|
|
@ -61,13 +107,36 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Reference -->
|
||||
<div class="col-md-6 col-lg-3 mb-4">
|
||||
<!-- Hook Reference -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-info bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-code fa-lg text-info"></i>
|
||||
<div class="bg-dark bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-book-open fa-lg text-dark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title text-center">Hook Reference</h5>
|
||||
<p class="card-text text-center text-muted flex-grow-1">
|
||||
Complete reference for all 39+ available Claude Code hooks and configurations.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="/dashboard/docs/hook-reference" class="btn btn-dark">
|
||||
<i class="fas fa-arrow-right me-1"></i>
|
||||
Browse Hooks
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Reference -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-code fa-lg text-warning"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title text-center">API Reference</h5>
|
||||
|
|
@ -75,7 +144,7 @@
|
|||
Detailed API documentation for integrating with Claude Code Tracker.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="/dashboard/docs/api-reference" class="btn btn-info">
|
||||
<a href="/dashboard/docs/api-reference" class="btn btn-warning">
|
||||
<i class="fas fa-arrow-right me-1"></i>
|
||||
View API
|
||||
</a>
|
||||
|
|
@ -85,12 +154,12 @@
|
|||
</div>
|
||||
|
||||
<!-- FAQ -->
|
||||
<div class="col-md-6 col-lg-3 mb-4">
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-question-circle fa-lg text-warning"></i>
|
||||
<div class="bg-danger bg-opacity-10 rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
||||
<i class="fas fa-question-circle fa-lg text-danger"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title text-center">FAQ</h5>
|
||||
|
|
@ -98,7 +167,7 @@
|
|||
Frequently asked questions and troubleshooting guide.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="/dashboard/docs/faq" class="btn btn-warning">
|
||||
<a href="/dashboard/docs/faq" class="btn btn-danger">
|
||||
<i class="fas fa-arrow-right me-1"></i>
|
||||
Get Help
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue