Daniel Avila 65156dda84 Session Sharing & Chats UI Improvements (#122)
* 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>
2025-10-27 15:42:15 -04:00
2025-10-10 13:01:39 -04:00
2025-10-27 09:19:58 -04:00
2025-10-26 12:14:07 -04:00
2025-10-24 17:05:21 -04:00
2025-09-13 10:13:51 -04:00
2025-09-13 10:13:51 -04:00
2025-09-02 09:15:15 -04:00
2025-09-07 17:39:35 -04:00
2025-09-13 10:13:51 -04:00
2025-10-26 11:48:33 -04:00
2025-08-04 18:49:19 -04:00

npm version npm downloads License: MIT PRs Welcome GitHub stars

davila7%2Fclaude-code-templates | Trendshift

Claude Code Templates (aitmpl.com)

Ready-to-use configurations for Anthropic's Claude Code. A comprehensive collection of AI agents, custom commands, settings, hooks, external integrations (MCPs), and project templates to enhance your development workflow.

Browse & Install Components and Templates

Browse All Templates - Interactive web interface to explore and install 100+ agents, commands, settings, hooks, and MCPs.

Screenshot 2025-08-19 at 08 09 24

🚀 Quick Installation

# Install a complete development stack
npx claude-code-templates@latest --agent development-team/frontend-developer --command testing/generate-tests --mcp development/github-integration

# Browse and install interactively
npx claude-code-templates@latest

# Install specific components
npx claude-code-templates@latest --agent business-marketing/security-auditor
npx claude-code-templates@latest --command performance/optimize-bundle
npx claude-code-templates@latest --setting performance/mcp-timeouts
npx claude-code-templates@latest --hook git/pre-commit-validation
npx claude-code-templates@latest --mcp database/postgresql-integration

What You Get

Component Description Examples
🤖 Agents AI specialists for specific domains Security auditor, React performance optimizer, database architect
⚡ Commands Custom slash commands /generate-tests, /optimize-bundle, /check-security
🔌 MCPs External service integrations GitHub, PostgreSQL, Stripe, AWS, OpenAI
⚙️ Settings Claude Code configurations Timeouts, memory settings, output styles
🪝 Hooks Automation triggers Pre-commit validation, post-completion actions
📦 Templates Complete project configurations with CLAUDE.md, .claude/* files and .mcp.json Framework-specific setups, project best practices

🛠️ Additional Tools

Beyond the template catalog, Claude Code Templates includes powerful development tools:

📊 Claude Code Analytics

Monitor your AI-powered development sessions in real-time with live state detection and performance metrics.

npx claude-code-templates@latest --analytics

💬 Conversation Monitor

Mobile-optimized interface to view Claude responses in real-time with secure remote access.

# Local access
npx claude-code-templates@latest --chats

# Secure remote access via Cloudflare Tunnel
npx claude-code-templates@latest --chats --tunnel

🔍 Health Check

Comprehensive diagnostics to ensure your Claude Code installation is optimized.

npx claude-code-templates@latest --health-check

🔌 Plugin Dashboard

View marketplaces, installed plugins, and manage permissions from a unified interface.

npx claude-code-templates@latest --plugins

📖 Documentation

📚 docs.aitmpl.com - Complete guides, examples, and API reference for all components and tools.

Contributing

We welcome contributions! Browse existing templates to see what's available, then check our contributing guidelines to add your own agents, commands, MCPs, settings, or hooks.

Please read our Code of Conduct before contributing.

Attribution

This collection includes components from multiple sources:

Agents Collection:

  • wshobson/agents Collection by wshobson - Licensed under MIT License (48 agents)

Commands Collection:

  • awesome-claude-code Commands by hesreallyhim - Licensed under CC0 1.0 Universal (21 commands)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Star History

Star History Chart

⭐ Found this useful? Give us a star to support the project!

Buy Me A Coffee

S
Description
senior-data-scientist: World-class data science skill for statistical modeling, experimentation, causal inference, and advanced analytics. Expertise in Python (NumPy, Pandas,…; senior-backend: Comprehensive backend development skill for building scalable backend systems using NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs. Includes API…; excel-analysis: Analyze Excel spreadsheets, create pivot tables, generate charts, and perform data analysis. Use when analyzing Excel files, spreads…
Readme MIT 256 MiB
Languages
Python 44.1%
HTML 13.7%
JavaScript 12.6%
TypeScript 9.5%
TeX 7.7%
Other 12%