Skip to content

Commit b27ae0d

Browse files
davila7claude
davila7
and
claude
authored
Docs update (#21)
* feat: Enhanced analytics dashboard with custom tool modals - Implemented custom modals for all Claude Code tools (Read, Edit, Write, Bash, Glob, Grep, TodoWrite) - Added intelligent diff viewer for Edit tool with dual modes (By Lines vs Smart Diff) - Enhanced tool parameter visualization with project-specific insights - Improved modal consistency with unified design patterns - Added comprehensive CSS styling for all tool modals - Fixed modal functionality and error handling across all tools 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * docs: Update documentation structure and content - Reorganize documentation into focused sections - Add analytics dashboard documentation - Add project setup guides with framework-specific instructions - Add CLI options and usage examples - Add contributing guidelines and safety features - Update sidebar navigation and site configuration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent 0166c71 commit b27ae0d

25 files changed

+609
-390
lines changed

‎cli-tool/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "claude-code-templates",
3-
"version": "1.11.0",
3+
"version": "1.12.0",
44
"description": "CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects",
55
"main": "src/index.js",
66
"bin": {

‎docu/docs/analytics/agent-chats-manager.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
# Agent Chats Manager
6+
7+
The Agent Chats Manager within the `claude-code-templates` analytics dashboard allows you to monitor and analyze Claude agent interactions in real-time. This provides a clear visual flow of how Claude Code processes information and responds.
8+
9+
## How it Works
10+
11+
The process of real-time monitoring of agent chats is illustrated by the following flow:
12+
13+
```mermaid
14+
graph TD
15+
A[Claude Code writes message] --> B[.jsonl file changes]
16+
B --> C[FileWatcher detects change]
17+
C --> D[handleConversationChange]
18+
D --> E[getParsedConversation]
19+
E --> F[notifyNewMessage]
20+
F --> G[WebSocketServer.broadcast]
21+
G --> H[Frontend WebSocketService]
22+
H --> I[AgentsPage.handleNewMessage]
23+
I --> J[Updates UI in real time]
24+
```
25+
26+
This flow ensures that any message written by Claude Code is immediately reflected in your dashboard, providing a live view of the conversation.
27+
28+
## Features
29+
30+
- **Live Session Tracking**: See active conversations and their status in real-time.
31+
- **Conversation History**: Access complete session logs with export capabilities (CSV/JSON).
32+
- **Performance Monitoring**: Track Claude Code agent performance and identify optimization opportunities.
33+
- **Usage Patterns**: Identify your most productive coding sessions and workflows.

‎docu/docs/analytics/analysis-tools.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# Analysis Tools
6+
7+
The `claude-code-templates` CLI provides dedicated analysis tools to help you understand and optimize your existing Claude Code configurations. These tools offer insights into your commands, automation hooks, and MCP server configurations.
8+
9+
## Command Analysis
10+
11+
View detailed statistics about your custom commands:
12+
13+
```bash
14+
npx claude-code-templates --commands-stats
15+
```
16+
17+
**What you get:**
18+
19+
- Command name, file size, and token count
20+
- Lines, words, and last modified date
21+
- AI-powered optimization recommendations
22+
- Project-specific improvement suggestions
23+
24+
## Hook Analysis
25+
26+
Analyze your automation hooks configuration:
27+
28+
```bash
29+
npx claude-code-templates --hooks-stats
30+
```
31+
32+
**What you get:**
33+
34+
- Hook name, type, and status (enabled/disabled)
35+
- Hook descriptions and purpose
36+
- Hook summary by type (PreToolUse, PostToolUse, etc.)
37+
- AI-powered hook optimization suggestions
38+
- Missing hook recommendations for your workflow
39+
40+
## MCP Server Analysis
41+
42+
Analyze your MCP server configurations:
43+
44+
```bash
45+
npx claude-code-templates --mcps-stats
46+
```
47+
48+
**What you get:**
49+
50+
- Server name, category, and status (enabled/disabled)
51+
- Command, complexity rating, and descriptions
52+
- Server summary by category (IDE, Database, Web, etc.)
53+
- AI-powered MCP configuration optimization
54+
- Missing server recommendations for your workflow

‎docu/docs/analytics/overview.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Analytics Dashboard Overview
6+
7+
The `claude-code-templates` CLI includes a comprehensive analytics dashboard that allows you to monitor and optimize your Claude Code agents and interactions in real-time. This dashboard provides valuable insights into usage patterns, performance metrics, and conversation history.
8+
9+
## Key Features of the Analytics Dashboard
10+
11+
### 📊 Real-time Analytics Dashboard
12+
Monitor and optimize your Claude Code agents with our comprehensive analytics dashboard:
13+
- **Live Session Tracking**: See active conversations and their status in real-time.
14+
- **Usage Statistics**: Total sessions, tokens, and project activity with trends.
15+
- **Conversation History**: Complete session logs with export capabilities (CSV/JSON).
16+
- **Status Indicators**: PM2-style visual indicators for conversation health.
17+
- **File Watching**: Automatic updates as you work with Claude Code.
18+
- **Web Interface**: Clean, terminal-style dashboard at `http://localhost:3333`.
19+
- **Performance Monitoring**: Track Claude Code agent performance and optimization opportunities.
20+
- **Usage Patterns**: Identify your most productive coding sessions and workflows.
21+
22+
### 🤖 Agent Chats Manager
23+
Monitor and analyze Claude agent interactions in real-time.
24+
25+
```mermaid
26+
graph TD
27+
A[Claude Code writes message] --> B[.jsonl file changes]
28+
B --> C[FileWatcher detects change]
29+
C --> D[handleConversationChange]
30+
D --> E[getParsedConversation]
31+
E --> F[notifyNewMessage]
32+
F --> G[WebSocketServer.broadcast]
33+
G --> H[Frontend WebSocketService]
34+
H --> I[AgentsPage.handleNewMessage]
35+
I --> J[Updates UI in real time]
36+
```
37+
38+
## How to Launch the Analytics Dashboard
39+
40+
You can launch the analytics dashboard using the following command:
41+
42+
```bash
43+
npx claude-code-templates --analytics
44+
# or
45+
npx claude-code-templates --chats
46+
```
47+
48+
Once launched, you can access the web interface in your browser at `http://localhost:3333`.

‎docu/docs/analytics/real-time-monitoring.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
# Real-time Monitoring
6+
7+
The `claude-code-templates` analytics dashboard provides robust real-time monitoring capabilities to keep you informed about your Claude Code interactions as they happen.
8+
9+
## Features
10+
11+
- **Live Session Tracking**: See active Claude Code conversations and their status in real-time.
12+
- **File Watching**: Automatic updates to the dashboard as you work with Claude Code, ensuring you always have the latest information.
13+
- **Web Interface**: A clean, terminal-style dashboard accessible at `http://localhost:3333`.
14+
- **WebSocket Updates**: The dashboard utilizes WebSocket integration for live updates, meaning you don't need to refresh the page to see new data.
15+
- **Status Indicators**: PM2-style visual indicators provide quick insights into conversation health.
16+
- **Browser Notifications**: Desktop alerts for state changes and configurable notification preferences (if enabled in your browser).

‎docu/docs/available-templates.md‎

Lines changed: 0 additions & 179 deletions
This file was deleted.

‎docu/docs/cli-options.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# CLI Options Reference
6+
7+
This section provides a comprehensive reference of all available command-line options for `claude-code-templates`.
8+
9+
| Option | Description | Example |
10+
|--------|-------------|---------|
11+
| `-l, --language` | Specify programming language | `--language python` |
12+
| `-f, --framework` | Specify framework | `--framework react` |
13+
| `-d, --directory` | Target directory | `--directory /path/to/project` |
14+
| `-y, --yes` | Skip prompts and use defaults | `--yes` |
15+
| `--dry-run` | Show what would be installed | `--dry-run` |
16+
| `--health-check` | Run comprehensive system validation | `--health-check` |
17+
| `--command-stats, --commands-stats` | Analyze existing commands | `--command-stats` |
18+
| `--hook-stats, --hooks-stats` | Analyze automation hooks | `--hook-stats` |
19+
| `--mcp-stats, --mcps-stats` | Analyze MCP server configurations | `--mcp-stats` |
20+
| `--analytics` | Launch real-time analytics dashboard | `--analytics` |
21+
| `--help` | Show help information | `--help` |

0 commit comments

Comments
 (0)