Ryan Malloy 50c80596d0 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>
2025-08-11 08:02:09 -06:00

531 lines
35 KiB
HTML

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