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
|
|
@ -96,10 +96,22 @@ async def dashboard_docs_section(request: Request, section: str, db: AsyncSessio
|
|||
"template": "docs/getting-started.html",
|
||||
"title": "Getting Started - Claude Code Tracker"
|
||||
},
|
||||
"data-import": {
|
||||
"template": "docs/data-import.html",
|
||||
"title": "Data Import Guide - Claude Code Tracker"
|
||||
},
|
||||
"docker-deployment": {
|
||||
"template": "docs/docker-deployment.html",
|
||||
"title": "Docker Deployment Guide - Claude Code Tracker"
|
||||
},
|
||||
"hook-setup": {
|
||||
"template": "docs/hook-setup.html",
|
||||
"title": "Hook Setup Guide - Claude Code Tracker"
|
||||
},
|
||||
"hook-reference": {
|
||||
"template": "docs/hook-reference.html",
|
||||
"title": "Complete Hook Reference - Claude Code Tracker"
|
||||
},
|
||||
"api-reference": {
|
||||
"template": "docs/api-reference.html",
|
||||
"title": "API Reference - Claude Code Tracker"
|
||||
|
|
|
|||
9
app/dashboard/static/claude-hooks-basic.json
Normal file
9
app/dashboard/static/claude-hooks-basic.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"hooks": {
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\"}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\"}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\"}'"
|
||||
}
|
||||
}
|
||||
50
app/dashboard/static/claude-hooks-comprehensive.json
Normal file
50
app/dashboard/static/claude-hooks-comprehensive.json
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
{
|
||||
"hooks": {
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\", \"user\": \"$USER\"}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME, \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"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\", \"parameters\": $TOOL_PARAMS}'",
|
||||
"waiting_period_start": "curl -X POST http://localhost:8000/api/hooks/waiting-period -H \"Content-Type: application/json\" -d '{\"reason\": \"thinking\", \"context\": \"$CONTEXT\"}'",
|
||||
"waiting_period_end": "curl -X POST http://localhost:8000/api/hooks/waiting-period -H \"Content-Type: application/json\" -d '{\"reason\": \"thinking\", \"duration_ms\": $DURATION_MS, \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"memory_usage": "curl -X POST http://localhost:8000/api/hooks/performance -H \"Content-Type: application/json\" -d '{\"metric_type\": \"memory\", \"value\": $MEMORY_MB, \"unit\": \"MB\", \"threshold_exceeded\": $THRESHOLD_EXCEEDED}'",
|
||||
"large_file_warning": "curl -X POST http://localhost:8000/api/hooks/performance -H \"Content-Type: application/json\" -d '{\"metric_type\": \"file_size\", \"value\": $FILE_SIZE_MB, \"unit\": \"MB\", \"threshold_exceeded\": true}'",
|
||||
"code_analysis": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"analysis\", \"file_path\": \"$FILE_PATH\", \"tool_name\": \"$ANALYSIS_TOOL\", \"status\": \"$STATUS\", \"issues_count\": $ISSUES_COUNT, \"details\": $DETAILS}'",
|
||||
"test_execution": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"test\", \"tool_name\": \"$TEST_FRAMEWORK\", \"status\": \"$STATUS\", \"details\": {\"passed\": $PASSED_COUNT, \"failed\": $FAILED_COUNT}, \"duration_ms\": $DURATION_MS}'",
|
||||
"build_process": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"build\", \"tool_name\": \"$BUILD_TOOL\", \"status\": \"$STATUS\", \"duration_ms\": $DURATION_MS}'",
|
||||
"dependency_change": "curl -X POST http://localhost:8000/api/hooks/environment -H \"Content-Type: application/json\" -d '{\"event_type\": \"dependency_change\", \"config_file\": \"$PACKAGE_FILE\", \"changes\": {\"action\": \"$ACTION\", \"package\": \"$PACKAGE_NAME\", \"version\": \"$VERSION\"}}'",
|
||||
"context_switch": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"context_switch\", \"description\": \"Switched to $NEW_PROJECT\", \"metadata\": {\"from\": \"$OLD_PROJECT\", \"to\": \"$NEW_PROJECT\"}}'",
|
||||
"search_query": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"search_query\", \"description\": \"$SEARCH_QUERY\", \"metadata\": {\"search_type\": \"$SEARCH_TYPE\", \"context\": \"$CONTEXT\"}}'",
|
||||
"browser_tab": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"browser_tab\", \"description\": \"$TAB_TITLE\", \"metadata\": {\"url\": \"$TAB_URL\", \"category\": \"$TAB_CATEGORY\"}}'",
|
||||
"copy_paste": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"copy_paste\", \"description\": \"Code copied/pasted\", \"metadata\": {\"action\": \"$ACTION\", \"source\": \"$SOURCE\", \"lines\": $LINE_COUNT}}'",
|
||||
"external_resource": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"external_resource\", \"interaction_type\": \"$RESOURCE_TYPE\", \"resource_url\": \"$URL\", \"query_or_topic\": \"$TOPIC\"}'",
|
||||
"ai_question": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"ai_question\", \"query_or_topic\": \"$QUESTION\", \"metadata\": {\"question_type\": \"$QUESTION_TYPE\", \"complexity\": \"$COMPLEXITY\"}}'",
|
||||
"code_explanation": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"code_explanation\", \"query_or_topic\": \"$CODE_CONTEXT\", \"metadata\": {\"explanation_type\": \"$TYPE\", \"code_lines\": $CODE_LINES}}'",
|
||||
"review_request": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"review_request\", \"query_or_topic\": \"$REVIEW_SCOPE\", \"metadata\": {\"files_count\": $FILES_COUNT, \"review_type\": \"$REVIEW_TYPE\"}}'",
|
||||
"refactor_start": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"scope\": \"$SCOPE\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST}'",
|
||||
"refactor_end": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"end_time\": \"$TIMESTAMP\", \"duration_minutes\": $DURATION_MIN, \"outcome\": \"$OUTCOME\", \"notes\": \"$NOTES\"}'",
|
||||
"feature_flag": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"feature_flag\", \"scope\": \"$SCOPE\", \"notes\": \"Feature flag: $FLAG_NAME - $ACTION\"}'",
|
||||
"debugging_session": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"debugging_session\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST, \"notes\": \"$DEBUG_CONTEXT\"}'",
|
||||
"documentation_update": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"documentation_update\", \"scope\": \"small\", \"files_affected\": [\"$DOC_FILE\"], \"notes\": \"$UPDATE_DESCRIPTION\"}'",
|
||||
"environment_change": "curl -X POST http://localhost:8000/api/hooks/environment -H \"Content-Type: application/json\" -d '{\"event_type\": \"env_change\", \"environment\": \"$NEW_ENV\", \"impact_level\": \"$IMPACT_LEVEL\"}'",
|
||||
"config_update": "curl -X POST http://localhost:8000/api/hooks/environment -H \"Content-Type: application/json\" -d '{\"event_type\": \"config_update\", \"config_file\": \"$CONFIG_FILE\", \"changes\": $CONFIG_CHANGES, \"impact_level\": \"$IMPACT_LEVEL\"}'",
|
||||
"security_scan": "curl -X POST http://localhost:8000/api/hooks/environment -H \"Content-Type: application/json\" -d '{\"event_type\": \"security_scan\", \"changes\": {\"tool\": \"$SCAN_TOOL\", \"vulnerabilities\": $VULN_COUNT, \"severity\": \"$MAX_SEVERITY\"}}'",
|
||||
"performance_benchmark": "curl -X POST http://localhost:8000/api/hooks/environment -H \"Content-Type: application/json\" -d '{\"event_type\": \"performance_benchmark\", \"changes\": {\"benchmark_type\": \"$BENCHMARK_TYPE\", \"results\": $BENCHMARK_RESULTS}}'",
|
||||
"learning_session": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"learning_session\", \"topic\": \"$LEARNING_TOPIC\", \"confidence_before\": $CONFIDENCE_BEFORE, \"confidence_after\": $CONFIDENCE_AFTER, \"duration_ms\": $DURATION_MS}'",
|
||||
"tutorial_follow": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"tutorial\", \"topic\": \"$TUTORIAL_TOPIC\", \"resource_url\": \"$TUTORIAL_URL\", \"notes\": \"$TUTORIAL_NOTES\"}'",
|
||||
"experimentation": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"experimentation\", \"topic\": \"$EXPERIMENT_TYPE\", \"notes\": \"$EXPERIMENT_DESCRIPTION\"}'",
|
||||
"knowledge_gap": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"knowledge_gap\", \"topic\": \"$UNKNOWN_CONCEPT\", \"notes\": \"$GAP_DESCRIPTION\"}'",
|
||||
"manual_testing": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"manual_test\", \"status\": \"$TEST_RESULT\", \"details\": {\"test_type\": \"$TEST_TYPE\", \"scenarios\": $SCENARIO_COUNT}, \"duration_ms\": $DURATION_MS}'",
|
||||
"bug_reproduction": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"bug_reproduction\", \"complexity\": \"$BUG_COMPLEXITY\", \"notes\": \"$BUG_DESCRIPTION\", \"outcome\": \"$REPRODUCTION_RESULT\"}'",
|
||||
"edge_case_testing": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"edge_case_test\", \"status\": \"$TEST_RESULT\", \"details\": {\"edge_cases\": $EDGE_CASE_COUNT, \"findings\": \"$FINDINGS\"}}'",
|
||||
"user_feedback": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"user_feedback\", \"query_or_topic\": \"$FEEDBACK_TOPIC\", \"response_quality\": $FEEDBACK_RATING, \"metadata\": {\"feedback_type\": \"$FEEDBACK_TYPE\", \"urgency\": \"$URGENCY\"}}'"
|
||||
},
|
||||
"hook_settings": {
|
||||
"timeout": 10,
|
||||
"retry_count": 3,
|
||||
"async": true,
|
||||
"log_errors": true,
|
||||
"log_file": "~/.claude-hooks.log"
|
||||
}
|
||||
}
|
||||
25
app/dashboard/static/claude-hooks-developer.json
Normal file
25
app/dashboard/static/claude-hooks-developer.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"hooks": {
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"waiting_period_start": "curl -X POST http://localhost:8000/api/hooks/waiting-period -H \"Content-Type: application/json\" -d '{\"reason\": \"thinking\", \"context\": \"$CONTEXT\"}'",
|
||||
"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\", \"parameters\": $TOOL_PARAMS}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME, \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"test_execution": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"test\", \"tool_name\": \"$TEST_FRAMEWORK\", \"status\": \"$STATUS\", \"details\": {\"passed\": $PASSED_COUNT, \"failed\": $FAILED_COUNT}, \"duration_ms\": $DURATION_MS}'",
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\", \"user\": \"$USER\"}'",
|
||||
"waiting_period_end": "curl -X POST http://localhost:8000/api/hooks/waiting-period -H \"Content-Type: application/json\" -d '{\"reason\": \"thinking\", \"duration_ms\": $DURATION_MS, \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"large_file_warning": "curl -X POST http://localhost:8000/api/hooks/performance -H \"Content-Type: application/json\" -d '{\"metric_type\": \"file_size\", \"value\": $FILE_SIZE_MB, \"unit\": \"MB\", \"threshold_exceeded\": true}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"memory_usage": "curl -X POST http://localhost:8000/api/hooks/performance -H \"Content-Type: application/json\" -d '{\"metric_type\": \"memory\", \"value\": $MEMORY_MB, \"unit\": \"MB\", \"threshold_exceeded\": $THRESHOLD_EXCEEDED}'",
|
||||
"code_analysis": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"analysis\", \"file_path\": \"$FILE_PATH\", \"tool_name\": \"$ANALYSIS_TOOL\", \"status\": \"$STATUS\", \"issues_count\": $ISSUES_COUNT, \"details\": $DETAILS}'",
|
||||
"dependency_change": "curl -X POST http://localhost:8000/api/hooks/environment -H \"Content-Type: application/json\" -d '{\"event_type\": \"dependency_change\", \"config_file\": \"$PACKAGE_FILE\", \"changes\": {\"action\": \"$ACTION\", \"package\": \"$PACKAGE_NAME\", \"version\": \"$VERSION\"}}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"build_process": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"build\", \"tool_name\": \"$BUILD_TOOL\", \"status\": \"$STATUS\", \"duration_ms\": $DURATION_MS}'"
|
||||
},
|
||||
"hook_settings": {
|
||||
"timeout": 10,
|
||||
"retry_count": 3,
|
||||
"async": true,
|
||||
"log_errors": true,
|
||||
"log_file": "~/.claude-hooks.log"
|
||||
}
|
||||
}
|
||||
16
app/dashboard/static/claude-hooks-essential.json
Normal file
16
app/dashboard/static/claude-hooks-essential.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"hooks": {
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME, \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\", \"user\": \"$USER\"}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\", \"timestamp\": \"$TIMESTAMP\"}'"
|
||||
},
|
||||
"hook_settings": {
|
||||
"timeout": 10,
|
||||
"retry_count": 3,
|
||||
"async": true,
|
||||
"log_errors": true,
|
||||
"log_file": "~/.claude-hooks.log"
|
||||
}
|
||||
}
|
||||
30
app/dashboard/static/claude-hooks-power_user.json
Normal file
30
app/dashboard/static/claude-hooks-power_user.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"hooks": {
|
||||
"refactor_end": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"end_time\": \"$TIMESTAMP\", \"duration_minutes\": $DURATION_MIN, \"outcome\": \"$OUTCOME\", \"notes\": \"$NOTES\"}'",
|
||||
"browser_tab": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"browser_tab\", \"description\": \"$TAB_TITLE\", \"metadata\": {\"url\": \"$TAB_URL\", \"category\": \"$TAB_CATEGORY\"}}'",
|
||||
"search_query": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"search_query\", \"description\": \"$SEARCH_QUERY\", \"metadata\": {\"search_type\": \"$SEARCH_TYPE\", \"context\": \"$CONTEXT\"}}'",
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME, \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\", \"user\": \"$USER\"}'",
|
||||
"waiting_period_end": "curl -X POST http://localhost:8000/api/hooks/waiting-period -H \"Content-Type: application/json\" -d '{\"reason\": \"thinking\", \"duration_ms\": $DURATION_MS, \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"debugging_session": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"debugging_session\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST, \"notes\": \"$DEBUG_CONTEXT\"}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"memory_usage": "curl -X POST http://localhost:8000/api/hooks/performance -H \"Content-Type: application/json\" -d '{\"metric_type\": \"memory\", \"value\": $MEMORY_MB, \"unit\": \"MB\", \"threshold_exceeded\": $THRESHOLD_EXCEEDED}'",
|
||||
"documentation_update": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"documentation_update\", \"scope\": \"small\", \"files_affected\": [\"$DOC_FILE\"], \"notes\": \"$UPDATE_DESCRIPTION\"}'",
|
||||
"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\", \"parameters\": $TOOL_PARAMS}'",
|
||||
"refactor_start": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"scope\": \"$SCOPE\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST}'",
|
||||
"copy_paste": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"copy_paste\", \"description\": \"Code copied/pasted\", \"metadata\": {\"action\": \"$ACTION\", \"source\": \"$SOURCE\", \"lines\": $LINE_COUNT}}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"waiting_period_start": "curl -X POST http://localhost:8000/api/hooks/waiting-period -H \"Content-Type: application/json\" -d '{\"reason\": \"thinking\", \"context\": \"$CONTEXT\"}'",
|
||||
"feature_flag": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"feature_flag\", \"scope\": \"$SCOPE\", \"notes\": \"Feature flag: $FLAG_NAME - $ACTION\"}'",
|
||||
"large_file_warning": "curl -X POST http://localhost:8000/api/hooks/performance -H \"Content-Type: application/json\" -d '{\"metric_type\": \"file_size\", \"value\": $FILE_SIZE_MB, \"unit\": \"MB\", \"threshold_exceeded\": true}'",
|
||||
"context_switch": "curl -X POST http://localhost:8000/api/hooks/workflow -H \"Content-Type: application/json\" -d '{\"event_type\": \"context_switch\", \"description\": \"Switched to $NEW_PROJECT\", \"metadata\": {\"from\": \"$OLD_PROJECT\", \"to\": \"$NEW_PROJECT\"}}'"
|
||||
},
|
||||
"hook_settings": {
|
||||
"timeout": 10,
|
||||
"retry_count": 3,
|
||||
"async": true,
|
||||
"log_errors": true,
|
||||
"log_file": "~/.claude-hooks.log"
|
||||
}
|
||||
}
|
||||
29
app/dashboard/static/claude-hooks-research.json
Normal file
29
app/dashboard/static/claude-hooks-research.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"hooks": {
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"refactor_end": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"end_time\": \"$TIMESTAMP\", \"duration_minutes\": $DURATION_MIN, \"outcome\": \"$OUTCOME\", \"notes\": \"$NOTES\"}'",
|
||||
"code_explanation": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"code_explanation\", \"query_or_topic\": \"$CODE_CONTEXT\", \"metadata\": {\"explanation_type\": \"$TYPE\", \"code_lines\": $CODE_LINES}}'",
|
||||
"feature_flag": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"feature_flag\", \"scope\": \"$SCOPE\", \"notes\": \"Feature flag: $FLAG_NAME - $ACTION\"}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME, \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"learning_session": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"learning_session\", \"topic\": \"$LEARNING_TOPIC\", \"confidence_before\": $CONFIDENCE_BEFORE, \"confidence_after\": $CONFIDENCE_AFTER, \"duration_ms\": $DURATION_MS}'",
|
||||
"tutorial_follow": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"tutorial\", \"topic\": \"$TUTORIAL_TOPIC\", \"resource_url\": \"$TUTORIAL_URL\", \"notes\": \"$TUTORIAL_NOTES\"}'",
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\", \"user\": \"$USER\"}'",
|
||||
"ai_question": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"ai_question\", \"query_or_topic\": \"$QUESTION\", \"metadata\": {\"question_type\": \"$QUESTION_TYPE\", \"complexity\": \"$COMPLEXITY\"}}'",
|
||||
"external_resource": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"external_resource\", \"interaction_type\": \"$RESOURCE_TYPE\", \"resource_url\": \"$URL\", \"query_or_topic\": \"$TOPIC\"}'",
|
||||
"debugging_session": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"debugging_session\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST, \"notes\": \"$DEBUG_CONTEXT\"}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"experimentation": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"experimentation\", \"topic\": \"$EXPERIMENT_TYPE\", \"notes\": \"$EXPERIMENT_DESCRIPTION\"}'",
|
||||
"knowledge_gap": "curl -X POST http://localhost:8000/api/hooks/learning -H \"Content-Type: application/json\" -d '{\"event_type\": \"knowledge_gap\", \"topic\": \"$UNKNOWN_CONCEPT\", \"notes\": \"$GAP_DESCRIPTION\"}'",
|
||||
"refactor_start": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"scope\": \"$SCOPE\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST}'",
|
||||
"review_request": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"review_request\", \"query_or_topic\": \"$REVIEW_SCOPE\", \"metadata\": {\"files_count\": $FILES_COUNT, \"review_type\": \"$REVIEW_TYPE\"}}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"documentation_update": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"documentation_update\", \"scope\": \"small\", \"files_affected\": [\"$DOC_FILE\"], \"notes\": \"$UPDATE_DESCRIPTION\"}'"
|
||||
},
|
||||
"hook_settings": {
|
||||
"timeout": 10,
|
||||
"retry_count": 3,
|
||||
"async": true,
|
||||
"log_errors": true,
|
||||
"log_file": "~/.claude-hooks.log"
|
||||
}
|
||||
}
|
||||
29
app/dashboard/static/claude-hooks-team.json
Normal file
29
app/dashboard/static/claude-hooks-team.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"hooks": {
|
||||
"conversation_update": "curl -X POST http://localhost:8000/api/conversations -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"content\": \"$CONTENT\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"refactor_end": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"end_time\": \"$TIMESTAMP\", \"duration_minutes\": $DURATION_MIN, \"outcome\": \"$OUTCOME\", \"notes\": \"$NOTES\"}'",
|
||||
"code_explanation": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"code_explanation\", \"query_or_topic\": \"$CODE_CONTEXT\", \"metadata\": {\"explanation_type\": \"$TYPE\", \"code_lines\": $CODE_LINES}}'",
|
||||
"edge_case_testing": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"edge_case_test\", \"status\": \"$TEST_RESULT\", \"details\": {\"edge_cases\": $EDGE_CASE_COUNT, \"findings\": \"$FINDINGS\"}}'",
|
||||
"feature_flag": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"feature_flag\", \"scope\": \"$SCOPE\", \"notes\": \"Feature flag: $FLAG_NAME - $ACTION\"}'",
|
||||
"tool_call": "curl -X POST http://localhost:8000/api/tool-calls -H \"Content-Type: application/json\" -d '{\"tool_name\": \"$TOOL_NAME\", \"parameters\": $TOOL_PARAMS, \"result_status\": \"$RESULT_STATUS\", \"execution_time_ms\": $EXECUTION_TIME, \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"session_start": "curl -X POST http://localhost:8000/api/sessions/start -H \"Content-Type: application/json\" -d '{\"project_path\": \"$PWD\", \"start_time\": \"$TIMESTAMP\", \"user\": \"$USER\"}'",
|
||||
"ai_question": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"ai_question\", \"query_or_topic\": \"$QUESTION\", \"metadata\": {\"question_type\": \"$QUESTION_TYPE\", \"complexity\": \"$COMPLEXITY\"}}'",
|
||||
"external_resource": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"external_resource\", \"interaction_type\": \"$RESOURCE_TYPE\", \"resource_url\": \"$URL\", \"query_or_topic\": \"$TOPIC\"}'",
|
||||
"debugging_session": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"debugging_session\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST, \"notes\": \"$DEBUG_CONTEXT\"}'",
|
||||
"session_end": "curl -X POST http://localhost:8000/api/sessions/end -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"end_time\": \"$TIMESTAMP\"}'",
|
||||
"manual_testing": "curl -X POST http://localhost:8000/api/hooks/code-quality -H \"Content-Type: application/json\" -d '{\"event_type\": \"manual_test\", \"status\": \"$TEST_RESULT\", \"details\": {\"test_type\": \"$TEST_TYPE\", \"scenarios\": $SCENARIO_COUNT}, \"duration_ms\": $DURATION_MS}'",
|
||||
"bug_reproduction": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"bug_reproduction\", \"complexity\": \"$BUG_COMPLEXITY\", \"notes\": \"$BUG_DESCRIPTION\", \"outcome\": \"$REPRODUCTION_RESULT\"}'",
|
||||
"user_feedback": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"user_feedback\", \"query_or_topic\": \"$FEEDBACK_TOPIC\", \"response_quality\": $FEEDBACK_RATING, \"metadata\": {\"feedback_type\": \"$FEEDBACK_TYPE\", \"urgency\": \"$URGENCY\"}}'",
|
||||
"review_request": "curl -X POST http://localhost:8000/api/hooks/collaboration -H \"Content-Type: application/json\" -d '{\"event_type\": \"review_request\", \"query_or_topic\": \"$REVIEW_SCOPE\", \"metadata\": {\"files_count\": $FILES_COUNT, \"review_type\": \"$REVIEW_TYPE\"}}'",
|
||||
"file_modified": "curl -X POST http://localhost:8000/api/activities -H \"Content-Type: application/json\" -d '{\"session_id\": \"$SESSION_ID\", \"file_path\": \"$FILE_PATH\", \"action\": \"$ACTION\", \"timestamp\": \"$TIMESTAMP\"}'",
|
||||
"refactor_start": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"refactor\", \"scope\": \"$SCOPE\", \"complexity\": \"$COMPLEXITY\", \"files_affected\": $FILES_LIST}'",
|
||||
"documentation_update": "curl -X POST http://localhost:8000/api/hooks/project-intelligence -H \"Content-Type: application/json\" -d '{\"event_type\": \"documentation_update\", \"scope\": \"small\", \"files_affected\": [\"$DOC_FILE\"], \"notes\": \"$UPDATE_DESCRIPTION\"}'"
|
||||
},
|
||||
"hook_settings": {
|
||||
"timeout": 10,
|
||||
"retry_count": 3,
|
||||
"async": true,
|
||||
"log_errors": true,
|
||||
"log_file": "~/.claude-hooks.log"
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -29,28 +29,79 @@
|
|||
This will create projects and estimate sessions based on your past usage.
|
||||
</p>
|
||||
|
||||
<!-- Import Form -->
|
||||
<form id="import-form">
|
||||
<div class="mb-3">
|
||||
<label for="file-path" class="form-label">File Path (optional)</label>
|
||||
<input type="text" class="form-control" id="file-path"
|
||||
placeholder="Leave empty to use ~/.claude.json">
|
||||
<div class="form-text">
|
||||
If left empty, will try to import from the default location: <code>~/.claude.json</code>
|
||||
<!-- Import Method Tabs -->
|
||||
<ul class="nav nav-pills mb-3" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="upload-tab" data-bs-toggle="pill"
|
||||
data-bs-target="#upload-panel" type="button" role="tab">
|
||||
<i class="fas fa-cloud-upload-alt me-1"></i>
|
||||
Upload File
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="path-tab" data-bs-toggle="pill"
|
||||
data-bs-target="#path-panel" type="button" role="tab">
|
||||
<i class="fas fa-folder-open me-1"></i>
|
||||
File Path
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<!-- Upload File Panel -->
|
||||
<div class="tab-pane fade show active" id="upload-panel" role="tabpanel">
|
||||
<div class="mb-3">
|
||||
<label for="file-upload" class="form-label">Select .claude.json file</label>
|
||||
<input type="file" class="form-control" id="file-upload"
|
||||
accept=".json" onchange="handleFileSelect(event)">
|
||||
<div class="form-text">
|
||||
Upload your <code>.claude.json</code> file directly from your computer
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="file-info" class="alert alert-info" style="display: none;">
|
||||
<div id="file-details"></div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-primary" onclick="previewUpload()"
|
||||
id="preview-upload-btn" disabled>
|
||||
<i class="fas fa-eye me-1"></i>
|
||||
Preview Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="runUpload()"
|
||||
id="import-upload-btn" disabled>
|
||||
<i class="fas fa-cloud-upload-alt me-1"></i>
|
||||
Import Upload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-primary" onclick="previewImport()">
|
||||
<i class="fas fa-eye me-1"></i>
|
||||
Preview Import
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="runImport()">
|
||||
<i class="fas fa-download me-1"></i>
|
||||
Import Data
|
||||
</button>
|
||||
|
||||
<!-- File Path Panel -->
|
||||
<div class="tab-pane fade" id="path-panel" role="tabpanel">
|
||||
<form id="import-form">
|
||||
<div class="mb-3">
|
||||
<label for="file-path" class="form-label">File Path (optional)</label>
|
||||
<input type="text" class="form-control" id="file-path"
|
||||
placeholder="Leave empty to use ~/.claude.json">
|
||||
<div class="form-text">
|
||||
If left empty, will try to import from the default location: <code>~/.claude.json</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-primary" onclick="previewImport()">
|
||||
<i class="fas fa-eye me-1"></i>
|
||||
Preview Import
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" onclick="runImport()">
|
||||
<i class="fas fa-download me-1"></i>
|
||||
Import Data
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div id="import-results" class="mt-4" style="display: none;">
|
||||
|
|
@ -122,6 +173,142 @@
|
|||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let selectedFile = null;
|
||||
|
||||
function handleFileSelect(event) {
|
||||
const file = event.target.files[0];
|
||||
selectedFile = file;
|
||||
|
||||
if (file) {
|
||||
// Validate file type
|
||||
if (!file.name.endsWith('.json')) {
|
||||
showError('Please select a JSON file (.json)');
|
||||
resetFileUpload();
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file size (10MB limit)
|
||||
const maxSize = 10 * 1024 * 1024; // 10MB
|
||||
if (file.size > maxSize) {
|
||||
showError('File too large. Maximum size is 10MB.');
|
||||
resetFileUpload();
|
||||
return;
|
||||
}
|
||||
|
||||
// Show file info
|
||||
const fileInfo = document.getElementById('file-info');
|
||||
const fileDetails = document.getElementById('file-details');
|
||||
|
||||
fileDetails.innerHTML = `
|
||||
<strong>Selected file:</strong> ${file.name}<br>
|
||||
<strong>Size:</strong> ${(file.size / 1024).toFixed(1)} KB<br>
|
||||
<strong>Modified:</strong> ${new Date(file.lastModified).toLocaleString()}
|
||||
`;
|
||||
|
||||
fileInfo.style.display = 'block';
|
||||
|
||||
// Enable buttons
|
||||
document.getElementById('preview-upload-btn').disabled = false;
|
||||
document.getElementById('import-upload-btn').disabled = false;
|
||||
} else {
|
||||
resetFileUpload();
|
||||
}
|
||||
}
|
||||
|
||||
function resetFileUpload() {
|
||||
selectedFile = null;
|
||||
document.getElementById('file-info').style.display = 'none';
|
||||
document.getElementById('preview-upload-btn').disabled = true;
|
||||
document.getElementById('import-upload-btn').disabled = true;
|
||||
}
|
||||
|
||||
async function previewUpload() {
|
||||
if (!selectedFile) {
|
||||
showError('Please select a file first');
|
||||
return;
|
||||
}
|
||||
|
||||
const resultsDiv = document.getElementById('import-results');
|
||||
const resultsContent = document.getElementById('results-content');
|
||||
|
||||
// Show loading
|
||||
resultsContent.innerHTML = `
|
||||
<div class="text-center py-3">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Previewing...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Analyzing uploaded file...</p>
|
||||
</div>
|
||||
`;
|
||||
resultsDiv.style.display = 'block';
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', selectedFile);
|
||||
|
||||
const response = await fetch('/api/import/claude-json/preview-upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showPreviewResults(data, true); // Pass true to indicate this is an upload
|
||||
} else {
|
||||
showError(data.detail || 'Preview failed');
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Network error: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function runUpload() {
|
||||
if (!selectedFile) {
|
||||
showError('Please select a file first');
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm import
|
||||
if (!confirm('This will import data into your tracker database. Continue?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const resultsDiv = document.getElementById('import-results');
|
||||
const resultsContent = document.getElementById('results-content');
|
||||
|
||||
// Show loading
|
||||
resultsContent.innerHTML = `
|
||||
<div class="text-center py-3">
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Importing...</span>
|
||||
</div>
|
||||
<p class="mt-2 text-muted">Importing uploaded file...</p>
|
||||
</div>
|
||||
`;
|
||||
resultsDiv.style.display = 'block';
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', selectedFile);
|
||||
|
||||
const response = await fetch('/api/import/claude-json/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showImportResults(data, true); // Pass true to indicate this is an upload
|
||||
} else {
|
||||
showError(data.detail || 'Import failed');
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Network error: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function previewImport() {
|
||||
const filePath = document.getElementById('file-path').value.trim();
|
||||
const resultsDiv = document.getElementById('import-results');
|
||||
|
|
@ -204,14 +391,14 @@ async function runImport() {
|
|||
}
|
||||
}
|
||||
|
||||
function showPreviewResults(data) {
|
||||
function showPreviewResults(data, isUpload = false) {
|
||||
const html = `
|
||||
<div class="alert alert-info">
|
||||
<h6><i class="fas fa-eye me-1"></i> Import Preview</h6>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong>File:</strong> <code>${data.file_path}</code></p>
|
||||
<p><strong>File:</strong> <code>${isUpload ? data.file_name : data.file_path}</code></p>
|
||||
<p><strong>Size:</strong> ${data.file_size_mb} MB</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -241,7 +428,7 @@ function showPreviewResults(data) {
|
|||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="btn btn-success" onclick="runImport()">
|
||||
<button class="btn btn-success" onclick="${isUpload ? 'runUpload()' : 'runImport()'}">
|
||||
<i class="fas fa-check me-1"></i>
|
||||
Looks good - Import this data
|
||||
</button>
|
||||
|
|
@ -251,13 +438,18 @@ function showPreviewResults(data) {
|
|||
document.getElementById('results-content').innerHTML = html;
|
||||
}
|
||||
|
||||
function showImportResults(data) {
|
||||
function showImportResults(data, isUpload = false) {
|
||||
const results = data.results;
|
||||
const hasErrors = results.errors && results.errors.length > 0;
|
||||
|
||||
let successMessage = '<h6><i class="fas fa-check me-1"></i> Import Completed Successfully!</h6>';
|
||||
if (isUpload) {
|
||||
successMessage += `<p class="mb-0"><strong>File:</strong> ${data.file_name} (${data.file_size_kb} KB)</p>`;
|
||||
}
|
||||
|
||||
const html = `
|
||||
<div class="alert alert-success">
|
||||
<h6><i class="fas fa-check me-1"></i> Import Completed Successfully!</h6>
|
||||
${successMessage}
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-md-4 text-center">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue