- Token Distribution by Type: compute totals from date-filtered
conversations instead of pre-aggregated detailedTokenUsage which
always contained all historical data regardless of the selected range
- Daily Productivity Trends: skip conversations outside the selected
date range (was iterating all conversations unconditionally)
- Workflow Intelligence charts: re-fetch /api/agents with startDate
and endDate query params on filter apply instead of reusing stale
initial-load data
Fixes#382
* fix: improve Chats Mobile security, CSS quality, and desktop layout
- Sanitize error.message with escapeHtml() to prevent XSS in innerHTML
- Replace !important overrides in .back-btn with proper specificity (.header-btn.back-btn)
- Add desktop side-by-side layout at 769px+ (360px sidebar + flexible chat view)
- Extract 100+ inline styles from analytics modal into reusable CSS classes
https://claude.ai/code/session_01Cfg7GGRKxgJoWiNj1EjWSb
* chore: standardize all 15 blog posts for consistency
Apply unified style guide across all local blog posts:
- Fix copyright year 2025 -> 2026 in all footers
- Remove inline styles from explore-components-banner (use CSS classes)
- Standardize CTA text to "800+" and relative links
- Fix OG tag prefix og:article: -> article: (code-reviewer)
- Fix www.aitmpl.com -> aitmpl.com in OG/Twitter/structured data
- Fix cover image absolute URLs to relative paths (e2b, nextjs)
- Standardize Mermaid theme to orange #F97316 (heygen)
- Fix author name to "Claude Code Templates" (neon-complete)
- Add missing explore-components-banner (security-hooks, vercel-monitor, hackathon)
- Add missing callout boxes (info-box, success-box) where absent
- Standardize CodeCopy JS and MarkdownCopier across posts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* feat: add worktree commands and blog post for parallel development
Add 4 worktree slash commands for git worktree lifecycle management:
- /worktree-init: create parallel worktrees from task descriptions
- /worktree-check: show current worktree status and task
- /worktree-deliver: commit, push, and create PR
- /worktree-cleanup: remove merged worktrees and branches
Add blog post explaining the Skill + Commands architecture pattern
where a discoverable Skill (worktree-guide) orchestrates manual
Commands for execution.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* chore: ignore settings.local.json in all subdirectories
Change .claude/settings.local.json to **/settings.local.json
to cover nested paths like docs/.claude/settings.local.json.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix: add missing allowed-tools to worktree commands
- worktree-cleanup: add Bash(grep:*) for merge check commands
- worktree-init: add Bash(sed:*) for branch name detection
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
- Increased HUD panel size (padding: 30px, min-width: 280px)
- Larger fonts (labels: 16px, values: 18px)
- Implemented smooth counter animation from 0 to target value
- Counters now gradually increment instead of jumping to final value
- Added statsTarget and statsDisplay for smooth interpolation
- All three counters animate: Conversations, Components, Tool Calls
- Fixed Components counter showing 0 (now increments with component-layer2 events)
- Removed Active Days from HUD display
- Cleaned up stats.days calculation and references
- Components now properly tracked in stats.components
- Increased beam speed 5x (0.02 → 0.1) for faster completion
- Implemented beam queue system with max 10 active beams
- Removed visual effects (shadows, labels, particles) for better FPS
- Fixed duplicate counter increments (now updates once before beam)
- Added beamQueue cleanup in restart function
- Significantly improves rendering performance with many tools
- Changed from bulk toolCounts processing to individual tool-use events
- Implemented sequential dayOfYear assignment for controlled loading order
- Tools now load one by one like components (no simultaneous loading)
- Models load first (day 0), then tools (day 10+), then components
- Increased toolIncrement to 3 for proper spacing between tool animations
- Components start immediately after tools (no delay)
- Fixes extreme lag when loading many tools at once
- Change from 3 tools/frame to 1 tool every 5 frames
- Reduces processing speed from 180 tools/sec to ~12 tools/sec
- Matches component loading speed for smoother rendering
- Prevents lag on slower devices
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Implement tool queue system to process tools gradually
- Process only 3 tools per frame instead of all at once
- Prevents browser freeze when loading many tools simultaneously
- Improves rendering performance on slower devices
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove timeline bar and date display from visualization
- Remove numbers from right panel (Models, Tools, Components lists)
- Implement collision detection system to prevent nodes overlapping
- Add restart function to clear permanent connection beams
- Clean up token tracking (removed from frontend display)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Group Plan, Explore, Agent subagents by type instead of individual IDs
- Aggregate counts per day to reduce timeline events
- Prevents rendering issues with thousands of subagent nodes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Display percentages instead of absolute counts for tools, models, and components
- Position nodes randomly based on percentage (higher % = closer to center)
- Add zoom in/out with mouse wheel (30%-300%)
- Add pan canvas by dragging background
- Add drag & drop for tool and component nodes
- Double-click to reset zoom/pan
- Make connection beams permanent with subtle pulse animation
- One permanent connection per node for clean visualization
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Gource-style 3-layer circular visualization (models/tools/components)
- Interactive tooltips with usage counts for all node types
- Real-time legend panels: Models Used, Tools Used, Components Used
- Multiple animated beams based on actual tool call counts
- Backend uses totalToolCalls for accurate activity metrics
- Optimized performance (~100ms for 86 conversations)
Technical Details:
- Center layer: Model pie chart with usage-based sizing
- Middle layer (250px): Tools with count badges
- Outer layer (400px): Commands, Skills, MCPs, Subagents
- YearInReview2025 backend analyzes conversations without overhead
- Tooltip system detects hover on pie slices, circles, and outer nodes
- Frontend processes toolCounts and modelCounts for precise visualization
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added detailed analytics modal for each chat session including:
- Overview metrics (messages, tokens, tools, models, cache efficiency)
- Token usage breakdown with cost estimation
- Session timeline with duration tracking
- Time breakdown (Claude execution vs user conversing)
- Model information with usage percentages and message counts
- Tool usage statistics
- Components used (agents, slash commands, skills)
Key features:
- Real-time analytics calculation from JSONL conversation files
- Multi-model usage detection (Sonnet/Haiku switching)
- Intelligent time filtering (excludes long breaks)
- Cost estimation based on Claude API pricing
- Component detection from tool_use blocks
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The 'cat | claude' command doesn't work with interactive mode
because pipe consumes stdin. Replaced with proper interactive
mode usage:
Option 1: claude "read @context-file.md and continue"
Option 2: claude (then > @context-file.md continue)
This fixes the 'Raw mode is not supported' error users were
experiencing.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Added two simple command options for loading context:
Option 1: Direct reference with @
claude "read @context-file.md and continue"
Option 2: Using cat (pipe)
cat context-file.md | claude
Changes:
- Replaced generic instructions with specific commands
- Added syntax-highlighted code blocks
- Clear visual separation between options
- Added tip about saving file in project directory
UI improvements:
- Dark code blocks for better readability
- Green headers for each option
- Concise, actionable instructions
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changes:
- Header now directly addresses Claude Code instead of the user
- Clear note: "This file contains the complete conversation history"
- Removed user-facing instructions
- Simplified metadata format
- Updated modal text to reflect that file is FOR Claude Code to read
New header format:
```markdown
# Previous Conversation Context
> **Note to Claude Code**: This file contains the complete
> conversation history from a previous session. Read and
> understand this context to continue helping the user with
> their task.
**Project:** project-name
**Date:** 2025-10-29
**Messages in this export:** 100
```
Modal improvements:
- "Markdown context file that Claude Code can read"
- "Claude will read and understand the previous conversation"
- Clearer example of @ usage
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete overhaul of session sharing feature:
REMOVED:
- x0.at upload functionality
- Share command and QR code generation
- External file hosting dependencies
- Clone session command (--clone-session)
ADDED:
- Download conversation as Markdown file
- Context file optimized for Claude Code @ references
- Simple download modal with usage instructions
- Instructions for using @filename in Claude Code
Changes:
Backend:
- New exportSessionAsMarkdown() method in SessionSharing
- Convert conversations to readable Markdown format
- Include usage instructions in exported files
- Changed endpoint from /api/conversations/:id/share to /download
Frontend:
- Replaced "Share" button with "Download" button
- New download modal with clear instructions
- Removed QR code and upload functionality
- Direct browser download of .md files
User Experience:
- Download context file to local machine
- Add file to project repository
- Reference in Claude Code with @filename
- Continue conversation with full context
Example workflow:
1. Click Download button
2. Save claude-context-project-2025-10-27.md
3. Add to git repo
4. In Claude Code: "Read @claude-context-project-2025-10-27.md and continue"
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* feat: add session sharing and cloning functionality
Implement complete session sharing system for Claude Code conversations:
Features:
- Share button in chats interface with QR code generation
- Upload sessions to x0.at (temporary file hosting)
- Clone sessions with --clone-session command
- Limit shared sessions to last 100 messages
- Security confirmation modal with service information
- Resume command display after cloning
Backend:
- New SessionSharing class for export/upload/download/install
- Integration with ConversationAnalyzer
- x0.at upload service (tested and working)
- JSONL format conversion for Claude Code compatibility
Frontend:
- Confirmation modal with x0.at security info
- Centered QR code display
- Improved button styling (Resume, Share, Search)
- Real-time upload progress indication
CLI:
- Added --clone-session <url> parameter
- Automatic session installation to ~/.claude/projects/
- Display resume command with conversation ID
Dependencies:
- Added qrcode package for QR generation
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* feat: improve chats UI with project grouping and unified action buttons
Major improvements to chats interface:
Project Organization:
- Group conversations by project with collapsible sections
- Projects collapsed by default for cleaner interface
- Auto-expand projects during search with matching results
- Sticky project headers for better navigation
- Project avatars with gradients and conversation counts
Terminology Update:
- Changed "conversations" to "sessions" throughout UI
- Updated empty state messages
- Consistent terminology in headers and labels
Action Buttons Enhancement:
- Unified Resume, Share, and Search buttons in center header
- Replaced emojis with professional SVG icons
- Grouped design with orange accent border
- Individual hover states (green/blue/orange)
- Responsive button group with smooth transitions
Search Improvements:
- Fixed search to work with grouped project structure
- Search in both project names and session IDs
- Auto-collapse all projects when clearing search
- Proper filter clearing in advanced search
- Maintained state management across search operations
Visual Design:
- Orange accent border highlighting action buttons (2px)
- Subtle orange background for button group
- Consistent hover effects with color coding
- Enhanced visual hierarchy
- Better spacing and alignment
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
- Add advanced search panel with filters for directory, date range, and content
- Implement in-conversation search with navigation (↑↓ arrows)
- Add folder browser with conversation counts per directory
- Add search result highlighting with current match emphasis
- Implement 3-character minimum for search to prevent performance issues
- Add ID-based message navigation for reliable infinite scroll support
- Add visual feedback with flash animations and match counters
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add elegant modal for resume conversation functionality
- Modal shows claude --resume command with copy functionality
- Center Resume button in chat view header
- Add centered GitHub star button in main chat header
- Improve responsive design with three-column header layout
- Enhanced user experience with visual feedback on copy actions
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added padding-bottom to chat-messages container
- Footer now has proper spacing and doesn't cover content
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Introduced AgentAnalyzer class to analyze agent invocation data, usage frequency, and workflow patterns.
- Implemented endpoint for agent usage analytics in ClaudeAnalytics.
- Enhanced session management to account for scheduled reset times instead of fixed durations.
- Updated SessionAnalyzer to reflect new session reset logic and improved warning messages.
- Added functionality to calculate agent efficiency and popular usage hours.
- Created a .nojekyll file for GitHub Pages deployment in Docusaurus configuration.
- Exposed agentsPage globally for modal access in App.js, allowing for custom tool modals.
- Implemented cleanup of global references when navigating away from the agents page.
- Added detailed logging for token chart data in DashboardPage.js to aid in debugging.
- Improved tool display logic in ToolDisplay.js to store tool data for supported tools, enhancing modal interactions.
- Introduced extensive styling for various tool modals in index.html, ensuring a consistent and responsive design.
- Updated showResultsModal function to handle custom tool modals based on stored tool data, improving user experience.
- Added a new SVG file `undraw_docusaurus_tree.svg` to the static images directory for enhanced visual representation.
- Introduced a new TypeScript configuration file `tsconfig.json` to improve editor experience and project structure.
* feat: Enhance DataService with paginated conversations and improved error handling
- Added `getConversationsPaginated` method to fetch conversations with pagination support.
- Improved error handling in `cachedFetch` to provide clearer messages and fallback behavior.
- Updated WebSocket integration to handle connection failures with fallback polling.
- Reduced WebSocket auto-reconnect attempts and disabled auto-reconnect to minimize console noise.
- Added CORS middleware to the web server for better API accessibility.
- Implemented paginated conversations endpoint in the server.
- Added conversation messages endpoint to retrieve messages for a specific conversation.
- Enhanced conversation analysis to include detailed session data and compatibility with original dashboard.
* feat: Implement real-time conversation change handling and notifications
- Added handleConversationChange method to ClaudeAnalytics for processing updates to conversation files.
- Integrated WebSocket notifications for new messages in conversations.
- Enhanced setupFileWatchers to include conversation change callbacks.
- Updated conversation state API to calculate states for all conversations, improving performance and accuracy.
- Introduced pagination for conversation messages endpoint to support large message sets.
- Implemented cache management endpoint for clearing specific cache types.
- Enhanced DataCache and ConversationAnalyzer to support tool correlation in message parsing.
- Created ToolDisplay component for safe rendering of tool uses and results in the analytics dashboard.
- Added comprehensive documentation for Claude data structures and formats.
* feat: Enhance real-time messaging and dashboard features
- Improved logging for new messages in DataService to include message data.
- Increased WebSocket reconnection attempts for better reliability.
- Enabled auto-reconnect in WebSocketService for real-time updates.
- Updated conversation change handling in ClaudeAnalytics to include file path.
- Enhanced error handling and logging in ConversationAnalyzer and DataCache.
- Added new settings file for local permissions.
- Introduced a new Chats Dashboard option in the main menu.
- Created detailed architecture documentation for the analytics web application.
- Deprecated old main.js and Dashboard.js files in favor of a modular structure.
* feat: Implement real-time message handling and improve logging in DataService and AgentsPage
* feat: Implement comprehensive conversation state detection improvements
- Enhanced frontend message analysis for tool execution and content analysis.
- Introduced file activity detection to accurately identify user typing.
- Adopted a WebSocket-first approach for real-time state updates.
- Expanded state vocabulary with new contextual states and visual indicators.
- Improved state banner display with new CSS classes.
- Integrated system components for cohesive state management.
- Added health check feature to validate system requirements and configurations.
- Developed ConsoleBridge for web-based interaction with Claude Code processes.
- Created test script for ConsoleBridge to facilitate integration testing.
- Add Tool Usage Trends bar chart with date filtering and improved tooltips
- Implement Tool Activity Summary panel with key metrics:
* Total tool calls, unique tools used, conversation coverage
* Average tools per conversation and tool balance score
* Most used tool highlight with usage statistics
- Fix tooltip reliability issues with enhanced Chart.js configuration
- Add proper date range filtering for tool usage data
- Implement Shannon Diversity Index for accurate tool balance scoring
- Update dashboard layout to 2x2 grid for better chart organization
- Add comprehensive tool usage caching for improved performance
- Enhance ConversationAnalyzer with extractToolUsage() method
- Support both string-based and structured tool_use block detection
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement CSS variables for comprehensive theming system
- Add minimalist toggle switch with smooth animation
- Support both light and dark modes with terminal-style design
- Persist theme preference in localStorage
- Dynamic chart color adaptation for theme changes
- Responsive design for mobile devices
- Clean, icon-only switch without text labels for elegance
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
- Add automatic DataCache cleanup with 30-second intervals
- Implement size limit enforcement to prevent memory buildup
- Increase memory threshold to 300MB for realistic analytics usage
- Add Claude session tracking integration throughout dashboard
- Fix message counting to respect actual Claude session windows
- Stabilize conversation state transitions with extended time intervals
- Add comprehensive token breakdown with cache tokens
- Implement Claude session popover with hover functionality
- Fix table layout stability with fixed column widths
- Reduce cache size limits from 1000 to 100 entries
- Add proper cleanup methods for graceful shutdown
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix token calculation discrepancy by including cache tokens in main dashboard
- Add detailed token breakdown popover with hover functionality
- Improve conversation history loading with comprehensive message metadata
- Fix message coloring logic using JSON metadata instead of content parsing
- Add version number integration to dashboard
- Enhance SessionTimer with info icon and message calculation tooltip
- Move notifications button to filter row for better UX
- Add comprehensive token usage tracking (input, output, cache creation, cache read)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement comprehensive unit tests for StateCalculator to validate conversation status detection and state management.
- Create unit tests for StateService covering state management, subscriber notifications, and error handling.
- Develop unit tests for WebSocketServer to ensure proper handling of WebSocket connections, message broadcasting, and heartbeat mechanisms.
- Include edge case handling and validation for all components to enhance robustness and reliability.
- Implement 500ms refresh rate for near real-time updates
- Add 250ms fast refresh for first 30 seconds for instant state changes
- Prioritize conversation flow over file timestamps for immediate response detection
- Improve "Claude Code working..." detection to trigger instantly when user sends message
- Extend file activity detection window to 15 seconds for better accuracy
- Create dedicated npm README for better package discoverability
- Update root README to highlight new notification and state detection features
- Remove debug console logs for cleaner production experience
Performance improvements result in near-instantaneous state change detection.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Bump version to 1.5.18
- Sync web dashboard HTML with latest analytics improvements
- Add process indicators and orphan process handling UI elements
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Param