claude-code-templates 1.24.17 → 1.26.0

package/bin/create-claude-config.js

@@ -78,6 +78,7 @@ program
   .option('--sandbox <provider>', 'execute Claude Code in isolated sandbox environment (e.g., e2b)')
   .option('--e2b-api-key <key>', 'E2B API key for sandbox execution (alternative to environment variable)')
   .option('--anthropic-api-key <key>', 'Anthropic API key for Claude Code (alternative to environment variable)')
+  .option('--clone-session <url>', 'download and import a shared Claude Code session from URL')
   .action(async (options) => {
     try {
       // Only show banner for non-agent-list commands

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.24.17",
+  "version": "1.26.0",
   "description": "CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects",
   "main": "src/index.js",
   "bin": {
@@ -74,6 +74,7 @@
     "js-yaml": "^4.1.0",
     "open": "^8.4.2",
     "ora": "^5.4.1",
+    "qrcode": "^1.5.3",
     "uuid": "^11.1.0",
     "ws": "^8.18.3"
   },

package/src/analytics-web/chats_mobile.html

@@ -704,31 +704,82 @@
             box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
         }
 
-        /* Search toggle button in header */
-        .search-toggle-btn {
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-primary);
-            color: var(--terminal-orange);
-            padding: 6px 12px;
-            border-radius: 6px;
+        /* Action buttons group - unified design with orange accent */
+        .action-buttons-group {
+            display: inline-flex;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 2px solid rgba(255, 170, 0, 0.4);
+            background: rgba(255, 170, 0, 0.08);
+            box-shadow: 0 2px 8px rgba(255, 170, 0, 0.15);
+        }
+
+        .action-btn {
+            background: transparent;
+            border: none;
+            border-right: 1px solid rgba(255, 170, 0, 0.2);
+            color: var(--text-primary);
+            padding: 10px 18px;
             cursor: pointer;
             font-size: 0.875rem;
+            font-weight: 600;
             transition: all 0.2s ease;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
+            white-space: nowrap;
         }
 
-        .search-toggle-btn:hover {
-            background: var(--terminal-orange);
-            color: white;
-            border-color: var(--terminal-orange);
+        .action-btn:last-child {
+            border-right: none;
         }
 
-        .search-toggle-btn.active {
-            background: var(--terminal-orange);
-            color: white;
-            border-color: var(--terminal-orange);
+        .action-btn svg {
+            width: 15px;
+            height: 15px;
+            transition: all 0.2s ease;
+            stroke: var(--text-primary);
+        }
+
+        .action-btn:hover {
+            background: rgba(255, 170, 0, 0.12);
+            transform: translateY(-1px);
+        }
+
+        .action-btn.resume-btn:hover {
+            background: rgba(63, 185, 80, 0.15);
+            color: rgba(63, 185, 80, 1);
+        }
+
+        .action-btn.resume-btn:hover svg {
+            stroke: rgba(63, 185, 80, 1);
+        }
+
+        .action-btn.download-btn:hover {
+            background: rgba(59, 130, 246, 0.15);
+            color: rgba(59, 130, 246, 1);
+        }
+
+        .action-btn.download-btn:hover svg {
+            stroke: rgba(59, 130, 246, 1);
+        }
+
+        .action-btn.search-btn:hover {
+            background: rgba(251, 146, 60, 0.15);
+            color: rgba(251, 146, 60, 1);
+        }
+
+        .action-btn.search-btn:hover svg {
+            stroke: rgba(251, 146, 60, 1);
+        }
+
+        .action-btn.search-btn.active {
+            background: rgba(251, 146, 60, 0.2);
+            color: rgba(251, 146, 60, 1);
+        }
+
+        .action-btn.search-btn.active svg {
+            stroke: rgba(251, 146, 60, 1);
         }
 
         /* Conversations list */
@@ -816,6 +867,88 @@
             margin-top: 4px;
         }
 
+        /* Project grouping styles */
+        .project-group {
+            border-bottom: 1px solid var(--border-secondary);
+        }
+
+        .project-header {
+            display: flex;
+            align-items: center;
+            padding: 16px 20px;
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-primary);
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .project-header:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .project-avatar {
+            width: 44px;
+            height: 44px;
+            border-radius: 8px;
+            background: linear-gradient(135deg, var(--terminal-orange) 0%, #e67e22 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            margin-right: 12px;
+            flex-shrink: 0;
+            color: var(--bg-primary);
+            font-weight: bold;
+        }
+
+        .project-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .project-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 1rem;
+            margin-bottom: 2px;
+        }
+
+        .project-count {
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+        }
+
+        .project-toggle {
+            margin-left: 8px;
+            color: var(--text-secondary);
+            transition: transform 0.2s ease;
+        }
+
+        .toggle-icon {
+            transition: transform 0.2s ease;
+        }
+
+        .toggle-icon.expanded {
+            transform: rotate(180deg);
+        }
+
+        /* Smaller avatar for conversations within groups */
+        .conversation-avatar-small {
+            width: 36px;
+            height: 36px;
+            font-size: 0.85rem;
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+
+        /* Indent conversations within project groups */
+        .project-group .conversation-item {
+            padding-left: 36px;
+        }
+
         .conversation-state {
             font-size: 0.7rem;
             padding: 3px 8px;
@@ -1353,13 +1486,16 @@
             align-items: center;
             justify-content: center;
             flex: 0 0 auto;
+            gap: 8px;
         }
 
+
         .header-right {
             display: flex;
             align-items: center;
             justify-content: flex-end;
             flex: 1;
+            gap: 12px;
         }
 
         .chat-view-back {
@@ -1904,20 +2040,36 @@
                         ←
                     </button>
                     <div class="chat-view-info">
-                        <h2 class="chat-view-title" id="chatViewTitle">Select a conversation</h2>
+                        <h2 class="chat-view-title" id="chatViewTitle">Select a session</h2>
                         <p class="chat-view-subtitle" id="chatViewSubtitle"></p>
                     </div>
                 </div>
                 <div class="header-center">
-                    <button class="header-btn resume-btn" id="resumeConversation" style="display: none;" onclick="resumeConversationWithClaude()">
-                        ▶️ Resume
-                    </button>
+                    <div class="action-buttons-group" style="display: none;" id="actionButtonsGroup">
+                        <button class="action-btn resume-btn" id="resumeConversation" onclick="resumeConversationWithClaude()">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                            </svg>
+                            <span>Resume</span>
+                        </button>
+                        <button class="action-btn download-btn" id="downloadConversation" onclick="downloadConversation()">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                <polyline points="7 10 12 15 17 10"></polyline>
+                                <line x1="12" y1="15" x2="12" y2="3"></line>
+                            </svg>
+                            <span>Download</span>
+                        </button>
+                        <button class="action-btn search-btn" id="chatSearchToggle">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="m21 21-4.35-4.35"></path>
+                            </svg>
+                            <span>Search</span>
+                        </button>
+                    </div>
                 </div>
                 <div class="header-right">
-                    <button class="search-toggle-btn" id="chatSearchToggle">
-                        <span>🔍</span>
-                        <span>Search</span>
-                    </button>
                     <div class="tools-toggle" id="toolsToggle">
                         <span class="tools-toggle-label" onclick="document.getElementById('showToolsSwitch').click()">Show Tools</span>
                         <label class="toggle-switch">
@@ -1991,6 +2143,58 @@
         </div>
     </div>
 
+    <!-- Download Context Modal -->
+    <div class="modal-overlay" id="downloadModal">
+        <div class="modal">
+            <div class="modal-header" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
+                <span class="modal-icon">📥</span>
+                <h3 class="modal-title">Download Conversation Context</h3>
+            </div>
+            <div style="padding: 20px;">
+                <p class="modal-description" style="margin-bottom: 16px; line-height: 1.5;">
+                    Download this conversation as a <strong>Markdown context file</strong> that Claude Code can read to continue your work.
+                </p>
+
+                <div style="background: rgba(59, 130, 246, 0.08); border-left: 3px solid #3b82f6; padding: 12px; border-radius: 6px; margin-bottom: 16px;">
+                    <h4 style="color: #3b82f6; margin: 0 0 8px 0; font-size: 14px;">📋 What's included</h4>
+                    <p style="margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4;">
+                        Full conversation history (last <strong>100 messages</strong>) formatted for Claude Code to understand
+                    </p>
+                </div>
+
+                <div style="background: rgba(16, 185, 129, 0.08); border-left: 3px solid #10b981; padding: 12px; border-radius: 6px; margin-bottom: 16px;">
+                    <h4 style="color: #10b981; margin: 0 0 8px 0; font-size: 14px;">💡 How to continue the conversation</h4>
+                    <p style="margin: 0 0 12px 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4;">
+                        After downloading, use one of these commands to load the context:
+                    </p>
+
+                    <div style="margin-bottom: 10px;">
+                        <p style="margin: 0 0 4px 0; font-size: 12px; font-weight: 600; color: #10b981;">Option 1: Direct reference</p>
+                        <code style="display: block; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 4px; font-size: 12px; color: #e5e7eb; overflow-x: auto; white-space: nowrap;">claude "read @context-file.md and continue"</code>
+                    </div>
+
+                    <div>
+                        <p style="margin: 0 0 4px 0; font-size: 12px; font-weight: 600; color: #10b981;">Option 2: Using cat (pipe)</p>
+                        <code style="display: block; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 4px; font-size: 12px; color: #e5e7eb; overflow-x: auto; white-space: nowrap;">cat context-file.md | claude</code>
+                    </div>
+                </div>
+
+                <div style="background: rgba(100, 116, 139, 0.08); border-left: 3px solid #64748b; padding: 12px; border-radius: 6px;">
+                    <p style="margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4;">
+                        💾 <strong>Tip:</strong> Save the downloaded file in your project directory for easy access
+                    </p>
+                </div>
+            </div>
+
+            <div class="modal-actions">
+                <button class="modal-btn secondary" onclick="closeDownloadModal()">Cancel</button>
+                <button class="modal-btn primary" onclick="proceedWithDownload()" style="background: #3b82f6;">
+                    Download Context File
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- Import WebSocket and Data Services -->
     <script src="services/WebSocketService.js"></script>
     <script src="services/DataService.js"></script>
@@ -2239,56 +2443,101 @@
 
             renderConversations(conversations, states = {}) {
                 const conversationsList = document.getElementById('conversationsList');
-                
+
                 if (conversations.length === 0) {
                     conversationsList.innerHTML = `
                         <div class="no-conversations">
                             <div class="no-conversations-icon">💬</div>
-                            <h3>No conversations found</h3>
-                            <p>Start a conversation with Claude Code to see it here</p>
+                            <h3>No sessions found</h3>
+                            <p>Start a session with Claude Code to see it here</p>
                         </div>
                     `;
                     return;
                 }
 
-                conversationsList.innerHTML = conversations.map(conv => {
-                    const state = states[conv.id] || 'inactive';
-                    const stateClass = this.getStateClass(state);
-                    const stateLabel = this.getStateLabel(state);
-                    
-                    // Debug logging for first few conversations
-                    console.log(`🔍 Conversation ${conv.id.slice(-8)}: State="${state}" -> Label="${stateLabel}" Class="${stateClass}"`);
-                    
-                    const lastActivity = this.formatRelativeTime(new Date(conv.lastModified));
-                    const messageCount = conv.messageCount || 0;
+                // Group conversations by project
+                const groupedByProject = conversations.reduce((groups, conv) => {
                     const projectName = conv.project || 'Unknown Project';
-                    const conversationId = conv.id.slice(-8);
-                    
-                    // Get first letter of project name for avatar
+                    if (!groups[projectName]) {
+                        groups[projectName] = [];
+                    }
+                    groups[projectName].push(conv);
+                    return groups;
+                }, {});
+
+                // Sort projects alphabetically
+                const sortedProjects = Object.keys(groupedByProject).sort();
+
+                // Initialize expanded state if not exists
+                if (!this.expandedProjects) {
+                    this.expandedProjects = new Set(); // All collapsed by default
+                }
+
+                // Render grouped conversations
+                conversationsList.innerHTML = sortedProjects.map(projectName => {
+                    const projectConversations = groupedByProject[projectName];
+                    const isExpanded = this.expandedProjects.has(projectName);
                     const firstLetter = projectName.charAt(0).toUpperCase();
-                    
-                    return `
-                        <div class="conversation-item" data-conversation-id="${conv.id}">
-                            <div class="conversation-avatar">
-                                ${firstLetter}
+                    const conversationCount = projectConversations.length;
+
+                    // Render conversations for this project
+                    const conversationsHTML = projectConversations.map(conv => {
+                        const state = states[conv.id] || 'inactive';
+                        const stateClass = this.getStateClass(state);
+                        const stateLabel = this.getStateLabel(state);
+
+                        const lastActivity = this.formatRelativeTime(new Date(conv.lastModified));
+                        const messageCount = conv.messageCount || 0;
+                        const conversationId = conv.id.slice(-8);
+
+                        return `
+                            <div class="conversation-item" data-conversation-id="${conv.id}" style="display: ${isExpanded ? 'flex' : 'none'}">
+                                <div class="conversation-avatar conversation-avatar-small">
+                                    ${conversationId.substring(0, 2).toUpperCase()}
+                                </div>
+                                <div class="conversation-content">
+                                    <div class="conversation-header">
+                                        <div class="conversation-name">Session ${conversationId}</div>
+                                        <div class="conversation-time">${lastActivity}</div>
+                                    </div>
+                                    <div class="conversation-meta">
+                                        <span class="conversation-state ${stateClass}">${stateLabel}</span>
+                                        ${messageCount > 0 ? `<span class="message-count">${messageCount}</span>` : ''}
+                                    </div>
+                                </div>
                             </div>
-                            <div class="conversation-content">
-                                <div class="conversation-header">
-                                    <div class="conversation-name">${projectName}</div>
-                                    <div class="conversation-time">${lastActivity}</div>
+                        `;
+                    }).join('');
+
+                    return `
+                        <div class="project-group" data-project="${projectName}">
+                            <div class="project-header" data-project="${projectName}">
+                                <div class="project-avatar">
+                                    ${firstLetter}
                                 </div>
-                                <div class="conversation-preview">
-                                    Conversation ${conversationId}
+                                <div class="project-info">
+                                    <div class="project-name">${projectName}</div>
+                                    <div class="project-count">${conversationCount} session${conversationCount !== 1 ? 's' : ''}</div>
                                 </div>
-                                <div class="conversation-meta">
-                                    <span class="conversation-state ${stateClass}">${stateLabel}</span>
-                                    ${messageCount > 0 ? `<span class="message-count">${messageCount}</span>` : ''}
+                                <div class="project-toggle">
+                                    <svg class="toggle-icon ${isExpanded ? 'expanded' : ''}" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                                    </svg>
                                 </div>
                             </div>
+                            ${conversationsHTML}
                         </div>
                     `;
                 }).join('');
 
+                // Bind project toggle events
+                conversationsList.querySelectorAll('.project-header').forEach(header => {
+                    header.addEventListener('click', (e) => {
+                        const projectName = header.dataset.project;
+                        this.toggleProject(projectName);
+                    });
+                });
+
                 // Bind conversation click events
                 conversationsList.querySelectorAll('.conversation-item').forEach(item => {
                     item.addEventListener('click', () => {
@@ -2298,6 +2547,17 @@
                 });
             }
 
+            toggleProject(projectName) {
+                if (this.expandedProjects.has(projectName)) {
+                    this.expandedProjects.delete(projectName);
+                } else {
+                    this.expandedProjects.add(projectName);
+                }
+
+                // Re-render conversations with current states
+                this.renderConversations(this.conversations, this.conversationStates);
+            }
+
             selectConversation(conversationId) {
                 this.selectedConversationId = conversationId;
                 
@@ -2322,7 +2582,7 @@
                 const projectName = conversation.project || 'Unknown Project';
                 const convId = conversation.id.slice(-8);
                 chatViewTitle.textContent = projectName;
-                chatViewSubtitle.textContent = `Conversation ${convId}`;
+                chatViewSubtitle.textContent = `Session ${convId}`;
                 
                 // Show chat view with animation
                 chatView.classList.add('active');
@@ -2334,10 +2594,14 @@
                     chatView.classList.remove('show-tools');
                 }
                 
-                // Show resume button
+                // Show action buttons group
+                const actionButtonsGroup = document.getElementById('actionButtonsGroup');
+                actionButtonsGroup.style.display = 'inline-flex';
+
                 const resumeBtn = document.getElementById('resumeConversation');
-                resumeBtn.style.display = 'block';
+                const downloadBtn = document.getElementById('downloadConversation');
                 resumeBtn.setAttribute('data-conversation-id', conversationId);
+                downloadBtn.setAttribute('data-conversation-id', conversationId);
 
                 // Load messages (placeholder for now)
                 this.loadChatMessages(conversationId);
@@ -2352,9 +2616,9 @@
                 // Clean up scroll tracking when leaving conversation
                 this.removeScrollTracking();
 
-                // Hide resume button
-                const resumeBtn = document.getElementById('resumeConversation');
-                resumeBtn.style.display = 'none';
+                // Hide action buttons group
+                const actionButtonsGroup = document.getElementById('actionButtonsGroup');
+                actionButtonsGroup.style.display = 'none';
                 
                 // Remove active state from conversations
                 document.querySelectorAll('.conversation-item').forEach(item => {
@@ -3024,14 +3288,68 @@
 
 
             filterConversations(searchTerm) {
-                const items = document.querySelectorAll('.conversation-item');
-                const term = searchTerm.toLowerCase();
+                const term = searchTerm.toLowerCase().trim();
+                const projectGroups = document.querySelectorAll('.project-group');
+
+                if (!term) {
+                    // If search is empty, collapse all projects and reset
+                    this.expandedProjects.clear(); // Close all projects
 
-                items.forEach(item => {
-                    const name = item.querySelector('.conversation-name').textContent.toLowerCase();
-                    const preview = item.querySelector('.conversation-preview').textContent.toLowerCase();
-                    const matches = name.includes(term) || preview.includes(term);
-                    item.style.display = matches ? 'flex' : 'none';
+                    projectGroups.forEach(group => {
+                        group.style.display = 'block';
+
+                        // Hide all conversations
+                        const conversations = group.querySelectorAll('.conversation-item');
+                        conversations.forEach(conv => {
+                            conv.style.display = 'none';
+                        });
+
+                        // Update toggle icon to collapsed state
+                        const toggleIcon = group.querySelector('.toggle-icon');
+                        if (toggleIcon) {
+                            toggleIcon.classList.remove('expanded');
+                        }
+                    });
+                    return;
+                }
+
+                // Filter projects and conversations
+                projectGroups.forEach(group => {
+                    const projectName = group.dataset.project;
+                    const projectNameLower = projectName.toLowerCase();
+                    const conversations = group.querySelectorAll('.conversation-item');
+
+                    let hasMatchingConversation = false;
+
+                    // Check each conversation in this project
+                    conversations.forEach(item => {
+                        const nameElement = item.querySelector('.conversation-name');
+                        const name = nameElement ? nameElement.textContent.toLowerCase() : '';
+                        const matches = name.includes(term) || projectNameLower.includes(term);
+
+                        if (matches) {
+                            item.style.display = 'flex';
+                            hasMatchingConversation = true;
+                        } else {
+                            item.style.display = 'none';
+                        }
+                    });
+
+                    // Show project group if it has matching conversations or if project name matches
+                    if (hasMatchingConversation || projectNameLower.includes(term)) {
+                        group.style.display = 'block';
+                        // Auto-expand project when searching
+                        if (!this.expandedProjects.has(projectName)) {
+                            this.expandedProjects.add(projectName);
+                            // Update toggle icon
+                            const toggleIcon = group.querySelector('.toggle-icon');
+                            if (toggleIcon) {
+                                toggleIcon.classList.add('expanded');
+                            }
+                        }
+                    } else {
+                        group.style.display = 'none';
+                    }
                 });
             }
 
@@ -3647,6 +3965,11 @@
                 // Clear advanced search filters
                 this.resetAdvancedSearch();
 
+                // Reset expanded projects state (close all projects)
+                if (this.expandedProjects) {
+                    this.expandedProjects.clear();
+                }
+
                 // Hide search results info
                 searchResultsInfo.classList.remove('active');
 
@@ -4351,6 +4674,93 @@
             }
         }
 
+        // Download conversation context functions
+        function downloadConversation() {
+            const downloadBtn = document.getElementById('downloadConversation');
+            const conversationId = downloadBtn.getAttribute('data-conversation-id');
+
+            if (!conversationId) {
+                console.error('No conversation ID found');
+                return;
+            }
+
+            console.log('📥 Opening download modal for conversation:', conversationId);
+
+            // Show download modal
+            const downloadModal = document.getElementById('downloadModal');
+            downloadModal.classList.add('show');
+
+            // Close modal when clicking outside
+            downloadModal.addEventListener('click', (e) => {
+                if (e.target === downloadModal) {
+                    closeDownloadModal();
+                }
+            });
+        }
+
+        function closeDownloadModal() {
+            const downloadModal = document.getElementById('downloadModal');
+            downloadModal.classList.remove('show');
+        }
+
+        async function proceedWithDownload() {
+            // Close modal
+            closeDownloadModal();
+
+            const downloadBtn = document.getElementById('downloadConversation');
+            const conversationId = downloadBtn.getAttribute('data-conversation-id');
+
+            if (!conversationId) {
+                console.error('No conversation ID found');
+                return;
+            }
+
+            console.log('📥 Downloading context for conversation:', conversationId);
+
+            try {
+                // Call API to export the conversation as markdown
+                const response = await fetch(`/api/conversations/${conversationId}/download`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to export session: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+
+                console.log('✅ Session exported successfully:', data);
+
+                // Create a blob from the markdown content
+                const blob = new Blob([data.markdown], { type: 'text/markdown;charset=utf-8' });
+
+                // Create a temporary download link
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = data.filename;
+                document.body.appendChild(a);
+                a.click();
+
+                // Cleanup
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+
+                // Show success notification
+                console.log(`📥 Downloaded: ${data.filename}`);
+                if (data.wasLimited) {
+                    console.log(`⚠️  Exported ${data.messageCount} of ${data.totalMessageCount} messages`);
+                }
+
+            } catch (error) {
+                console.error('❌ Failed to download context:', error);
+                alert(`Failed to download context: ${error.message}`);
+            }
+        }
+
         // Initialize the app
         document.addEventListener('DOMContentLoaded', () => {
             new ChatsMobileApp();

package/src/chats-mobile.js

@@ -10,6 +10,7 @@ const StateCalculator = require('./analytics/core/StateCalculator');
 const FileWatcher = require('./analytics/core/FileWatcher');
 const DataCache = require('./analytics/data/DataCache');
 const WebSocketServer = require('./analytics/notifications/WebSocketServer');
+const SessionSharing = require('./session-sharing');
 
 class ChatsMobile {
   constructor(options = {}) {
@@ -28,7 +29,10 @@ class ChatsMobile {
     const homeDir = os.homedir();
     const claudeDir = path.join(homeDir, '.claude');
     this.conversationAnalyzer = new ConversationAnalyzer(claudeDir, this.dataCache);
-    
+
+    // Initialize SessionSharing for export/import functionality
+    this.sessionSharing = new SessionSharing(this.conversationAnalyzer);
+
     this.data = {
       conversations: [],
       conversationStates: {},
@@ -474,6 +478,40 @@ class ChatsMobile {
       }
     });
 
+    // API to download a conversation session as markdown
+    this.app.post('/api/conversations/:id/download', async (req, res) => {
+      try {
+        const conversationId = req.params.id;
+        const conversation = this.data.conversations.find(conv => conv.id === conversationId);
+
+        if (!conversation) {
+          return res.status(404).json({ error: 'Conversation not found' });
+        }
+
+        console.log(chalk.cyan(`📥 Exporting conversation ${conversationId} as markdown...`));
+
+        // Export the session as markdown using SessionSharing module
+        const exportResult = await this.sessionSharing.exportSessionAsMarkdown(conversationId, conversation);
+
+        res.json({
+          success: true,
+          conversationId: conversationId,
+          markdown: exportResult.markdown,
+          filename: exportResult.filename,
+          messageCount: exportResult.messageCount,
+          totalMessageCount: exportResult.totalMessageCount,
+          wasLimited: exportResult.wasLimited,
+          timestamp: new Date().toISOString()
+        });
+      } catch (error) {
+        console.error('Error exporting conversation:', error);
+        res.status(500).json({
+          error: 'Failed to export session',
+          message: error.message
+        });
+      }
+    });
+
     // Serve the mobile chats page as default
     this.app.get('/', (req, res) => {
       res.sendFile(path.join(__dirname, 'analytics-web', 'chats_mobile.html'));

package/src/index.js

@@ -18,6 +18,8 @@ const { runHealthCheck } = require('./health-check');
 const { runPluginDashboard } = require('./plugin-dashboard');
 const { trackingService } = require('./tracking-service');
 const { createGlobalAgent, listGlobalAgents, removeGlobalAgent, updateGlobalAgent } = require('./sdk/global-agent-manager');
+const SessionSharing = require('./session-sharing');
+const ConversationAnalyzer = require('./analytics/core/ConversationAnalyzer');
 
 async function showMainMenu() {
   console.log('');
@@ -222,7 +224,48 @@ async function createClaudeConfig(options = {}) {
     await startChatsMobile(options);
     return;
   }
-  
+
+  // Handle session clone (download and import shared session)
+  if (options.cloneSession) {
+    console.log(chalk.blue('📥 Cloning shared Claude Code session...'));
+
+    try {
+      const os = require('os');
+      const homeDir = os.homedir();
+      const claudeDir = path.join(homeDir, '.claude');
+
+      // Initialize ConversationAnalyzer and SessionSharing
+      const conversationAnalyzer = new ConversationAnalyzer(claudeDir);
+      const sessionSharing = new SessionSharing(conversationAnalyzer);
+
+      // Clone the session (cloneSession method handles all console output)
+      const result = await sessionSharing.cloneSession(options.cloneSession, {
+        projectPath: options.directory || process.cwd()
+      });
+
+      // Track session clone
+      trackingService.trackAnalyticsDashboard({
+        page: 'session-clone',
+        source: 'command_line',
+        success: true
+      });
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to clone session:'), error.message);
+
+      // Track failed clone
+      trackingService.trackAnalyticsDashboard({
+        page: 'session-clone',
+        source: 'command_line',
+        success: false,
+        error: error.message
+      });
+
+      process.exit(1);
+    }
+
+    return;
+  }
+
   // Handle health check
   let shouldRunSetup = false;
   if (options.healthCheck || options.health || options.check || options.verify) {

package/src/session-sharing.js

@@ -0,0 +1,457 @@
+const chalk = require('chalk');
+const fs = require('fs-extra');
+const path = require('path');
+const os = require('os');
+const { exec } = require('child_process');
+const { promisify } = require('util');
+const execAsync = promisify(exec);
+const QRCode = require('qrcode');
+
+/**
+ * SessionSharing - Handles exporting Claude Code sessions as downloadable context
+ */
+class SessionSharing {
+  constructor(conversationAnalyzer) {
+    this.conversationAnalyzer = conversationAnalyzer;
+  }
+
+  /**
+   * Export conversation session as downloadable markdown file
+   * @param {string} conversationId - Conversation ID to export
+   * @param {Object} conversationData - Full conversation data object
+   * @param {Object} options - Export options (messageLimit, etc.)
+   * @returns {Promise<Object>} Export result with markdown content and filename
+   */
+  async exportSessionAsMarkdown(conversationId, conversationData, options = {}) {
+    console.log(chalk.blue(`📥 Preparing session ${conversationId} for download...`));
+
+    try {
+      // 1. Get conversation messages
+      const allMessages = await this.conversationAnalyzer.getParsedConversation(conversationData.filePath);
+
+      // Limit messages to avoid large file sizes (default: last 100 messages)
+      const messageLimit = options.messageLimit || 100;
+      const messages = allMessages.slice(-messageLimit);
+
+      // 2. Convert to markdown format
+      const markdown = this.convertToMarkdown(messages, conversationData, {
+        messageCount: messages.length,
+        totalMessageCount: allMessages.length,
+        wasLimited: allMessages.length > messageLimit
+      });
+
+      // 3. Generate filename
+      const projectName = (conversationData.project || 'session').replace(/[^a-zA-Z0-9-_]/g, '-');
+      const date = new Date().toISOString().split('T')[0];
+      const filename = `claude-context-${projectName}-${date}.md`;
+
+      console.log(chalk.green(`✅ Session exported successfully!`));
+      console.log(chalk.gray(`📊 Exported ${messages.length} messages`));
+
+      return {
+        success: true,
+        markdown,
+        filename,
+        messageCount: messages.length,
+        totalMessageCount: allMessages.length,
+        wasLimited: allMessages.length > messageLimit
+      };
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to export session:'), error.message);
+      throw error;
+    }
+  }
+
+  /**
+   * Convert conversation messages to markdown format optimized for Claude Code
+   * @param {Array} messages - Parsed conversation messages
+   * @param {Object} conversationData - Conversation metadata
+   * @param {Object} stats - Export statistics
+   * @returns {string} Markdown formatted content
+   */
+  convertToMarkdown(messages, conversationData, stats) {
+    const lines = [];
+
+    // Header for Claude Code
+    lines.push('# Previous Conversation Context\n');
+    lines.push('> **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.\n');
+    lines.push(`**Project:** ${conversationData.project || 'Unknown'}`);
+    lines.push(`**Date:** ${new Date().toISOString().split('T')[0]}`);
+    lines.push(`**Messages in this export:** ${stats.messageCount}${stats.wasLimited ? ` (most recent from a total of ${stats.totalMessageCount})` : ''}`);
+    lines.push('');
+    lines.push('---');
+    lines.push('');
+
+    // Conversation
+    lines.push('## 💬 Conversation History\n');
+
+    messages.forEach((msg, index) => {
+      const role = msg.role === 'user' ? '👤 User' : '🤖 Assistant';
+      const timestamp = new Date(msg.timestamp).toLocaleString();
+
+      lines.push(`### Message ${index + 1}: ${role}`);
+      lines.push(`*${timestamp}*\n`);
+
+      // Extract text content from message
+      if (Array.isArray(msg.content)) {
+        msg.content.forEach(block => {
+          if (block.type === 'text') {
+            lines.push(block.text);
+          } else if (block.type === 'tool_use') {
+            lines.push(`\`\`\`${block.name || 'tool'}`);
+            lines.push(JSON.stringify(block.input || {}, null, 2));
+            lines.push('```');
+          } else if (block.type === 'tool_result') {
+            lines.push('**Tool Result:**');
+            lines.push('```');
+            lines.push(typeof block.content === 'string' ? block.content : JSON.stringify(block.content, null, 2));
+            lines.push('```');
+          }
+        });
+      } else if (typeof msg.content === 'string') {
+        lines.push(msg.content);
+      }
+
+      lines.push('');
+      lines.push('---');
+      lines.push('');
+    });
+
+    // Footer
+    lines.push('\n---');
+    lines.push('');
+    lines.push('*Generated by Claude Code Templates - [aitmpl.com](https://aitmpl.com)*');
+
+    return lines.join('\n');
+  }
+
+  /**
+   * Export session data to standardized format
+   * @param {string} conversationId - Conversation ID
+   * @param {Object} conversationData - Conversation metadata
+   * @param {Object} options - Export options
+   * @returns {Promise<Object>} Exported session object
+   */
+  async exportSessionData(conversationId, conversationData, options = {}) {
+    // Get all messages from the conversation
+    const allMessages = await this.conversationAnalyzer.getParsedConversation(conversationData.filePath);
+
+    // Limit messages to avoid large file sizes (default: last 100 messages)
+    const messageLimit = options.messageLimit || 100;
+    const messages = allMessages.slice(-messageLimit);
+
+    // Convert parsed messages back to JSONL format (original Claude Code format)
+    const jsonlMessages = messages.map(msg => {
+      // Reconstruct original JSONL entry format
+      const entry = {
+        uuid: msg.uuid || msg.id,
+        type: msg.role === 'assistant' ? 'assistant' : 'user',
+        timestamp: msg.timestamp.toISOString(),
+        message: {
+          id: msg.id,
+          role: msg.role,
+          content: msg.content
+        }
+      };
+
+      // Add model info for assistant messages
+      if (msg.model) {
+        entry.message.model = msg.model;
+      }
+
+      // Add usage info
+      if (msg.usage) {
+        entry.message.usage = msg.usage;
+      }
+
+      // Add compact summary flag if present
+      if (msg.isCompactSummary) {
+        entry.isCompactSummary = true;
+      }
+
+      return entry;
+    });
+
+    // Create export package
+    const exportData = {
+      version: '1.0.0',
+      exported_at: new Date().toISOString(),
+      conversation: {
+        id: conversationId,
+        project: conversationData.project || 'shared-session',
+        created: conversationData.created,
+        lastModified: conversationData.lastModified,
+        messageCount: messages.length,
+        totalMessageCount: allMessages.length,
+        wasLimited: allMessages.length > messageLimit,
+        tokens: conversationData.tokens,
+        model: conversationData.modelInfo?.primaryModel || 'claude-sonnet-4-5-20250929'
+      },
+      messages: jsonlMessages,
+      metadata: {
+        exportTool: 'claude-code-templates',
+        exportVersion: require('../package.json').version || '1.0.0',
+        messageLimit: messageLimit,
+        description: 'Claude Code session export - can be cloned with: npx claude-code-templates@latest --clone-session <url>'
+      }
+    };
+
+    // Log information about exported messages
+    if (allMessages.length > messageLimit) {
+      console.log(chalk.yellow(`⚠️  Session has ${allMessages.length} messages, exporting last ${messageLimit} messages`));
+    } else {
+      console.log(chalk.gray(`📊 Exporting ${messages.length} messages`));
+    }
+
+    return exportData;
+  }
+
+  /**
+   * Upload session to x0.at
+   * @param {Object} sessionData - Session export data
+   * @param {string} conversationId - Conversation ID for filename
+   * @returns {Promise<string>} Upload URL
+   */
+  async uploadToX0(sessionData, conversationId) {
+    const tmpDir = path.join(os.tmpdir(), 'claude-code-sessions');
+    await fs.ensureDir(tmpDir);
+
+    const tmpFile = path.join(tmpDir, `session-${conversationId}.json`);
+
+    try {
+      // Write session data to temp file
+      await fs.writeFile(tmpFile, JSON.stringify(sessionData, null, 2), 'utf8');
+
+      console.log(chalk.gray(`📁 Created temp file: ${tmpFile}`));
+      console.log(chalk.gray(`📤 Uploading to x0.at...`));
+
+      // Upload to x0.at using curl with form data
+      // x0.at API: curl -F'file=@yourfile.png' https://x0.at
+      // Response: Direct URL in plain text
+      const { stdout, stderr } = await execAsync(
+        `curl -s -F "file=@${tmpFile}" ${this.uploadUrl}`,
+        { maxBuffer: 10 * 1024 * 1024 } // 10MB buffer
+      );
+
+      // x0.at returns URL directly in plain text
+      const uploadUrl = stdout.trim();
+
+      // Validate response
+      if (!uploadUrl || !uploadUrl.startsWith('http')) {
+        throw new Error(`Invalid response from x0.at: ${uploadUrl || stderr}`);
+      }
+
+      console.log(chalk.green(`✅ Uploaded to x0.at successfully`));
+      console.log(chalk.yellow(`⚠️  Files kept for 3-100 days (based on size)`));
+      console.log(chalk.gray(`🔓 Note: Files are not encrypted by default`));
+
+      // Clean up temp file
+      await fs.remove(tmpFile);
+
+      return uploadUrl;
+    } catch (error) {
+      // Clean up temp file on error
+      await fs.remove(tmpFile).catch(() => {});
+      throw error;
+    }
+  }
+
+  /**
+   * Clone a session from a shared URL
+   * Downloads the session and places it in the correct Claude Code location
+   * @param {string} url - URL to download session from
+   * @param {Object} options - Clone options
+   * @returns {Promise<Object>} Result with session path
+   */
+  async cloneSession(url, options = {}) {
+    console.log(chalk.blue(`📥 Downloading session from ${url}...`));
+
+    try {
+      // 1. Download session data
+      const sessionData = await this.downloadSession(url);
+
+      // 2. Validate session data
+      this.validateSessionData(sessionData);
+
+      console.log(chalk.green(`✅ Session downloaded successfully`));
+      console.log(chalk.gray(`📊 Project: ${sessionData.conversation.project}`));
+      console.log(chalk.gray(`💬 Messages: ${sessionData.conversation.messageCount}`));
+      console.log(chalk.gray(`🤖 Model: ${sessionData.conversation.model}`));
+
+      // 3. Install session in Claude Code directory
+      const installResult = await this.installSession(sessionData, options);
+
+      console.log(chalk.green(`\n✅ Session installed successfully!`));
+      console.log(chalk.cyan(`📂 Location: ${installResult.sessionPath}`));
+
+      // Show resume command (only conversation ID needed)
+      const resumeCommand = `claude --resume ${installResult.conversationId}`;
+      console.log(chalk.yellow(`\n💡 To continue this conversation, run:`));
+      console.log(chalk.white(`\n   ${resumeCommand}\n`));
+      console.log(chalk.gray(`   Or open Claude Code to see it in your sessions list`));
+
+      return installResult;
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to clone session:'), error.message);
+      throw error;
+    }
+  }
+
+  /**
+   * Download session data from URL
+   * @param {string} url - URL to download from
+   * @returns {Promise<Object>} Session data
+   */
+  async downloadSession(url) {
+    try {
+      // Use curl to download (works with x0.at and other services)
+      const { stdout, stderr } = await execAsync(`curl -L "${url}"`, {
+        maxBuffer: 50 * 1024 * 1024 // 50MB buffer for large sessions
+      });
+
+      if (stderr && !stdout) {
+        throw new Error(`Download failed: ${stderr}`);
+      }
+
+      // Parse JSON response
+      const sessionData = JSON.parse(stdout);
+      return sessionData;
+    } catch (error) {
+      if (error.message.includes('Unexpected token')) {
+        throw new Error('Invalid session file - corrupted or not a Claude Code session');
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Validate session data structure
+   * @param {Object} sessionData - Session data to validate
+   * @throws {Error} If validation fails
+   */
+  validateSessionData(sessionData) {
+    if (!sessionData.version) {
+      throw new Error('Invalid session file - missing version');
+    }
+
+    if (!sessionData.conversation || !sessionData.conversation.id) {
+      throw new Error('Invalid session file - missing conversation data');
+    }
+
+    if (!sessionData.messages || !Array.isArray(sessionData.messages)) {
+      throw new Error('Invalid session file - missing or invalid messages');
+    }
+
+    if (sessionData.messages.length === 0) {
+      throw new Error('Invalid session file - no messages found');
+    }
+  }
+
+  /**
+   * Install session in Claude Code directory structure
+   * @param {Object} sessionData - Session data to install
+   * @param {Object} options - Installation options
+   * @returns {Promise<Object>} Installation result
+   */
+  async installSession(sessionData, options = {}) {
+    const homeDir = os.homedir();
+    const claudeDir = path.join(homeDir, '.claude');
+
+    // Determine project directory
+    const projectName = sessionData.conversation.project || 'shared-session';
+    const projectDirName = this.sanitizeProjectName(projectName);
+
+    // Create project directory structure
+    // Format: ~/.claude/projects/-path-to-project/
+    const projectDir = path.join(claudeDir, 'projects', projectDirName);
+    await fs.ensureDir(projectDir);
+
+    // Generate conversation filename with original ID
+    const conversationId = sessionData.conversation.id;
+    const conversationFile = path.join(projectDir, `${conversationId}.jsonl`);
+
+    // Convert messages back to JSONL format (one JSON object per line)
+    const jsonlContent = sessionData.messages
+      .map(msg => JSON.stringify(msg))
+      .join('\n');
+
+    // Write conversation file
+    await fs.writeFile(conversationFile, jsonlContent, 'utf8');
+
+    console.log(chalk.gray(`📝 Created conversation file: ${conversationFile}`));
+
+    // Create or update settings.json
+    const settingsFile = path.join(projectDir, 'settings.json');
+    const settings = {
+      projectName: sessionData.conversation.project,
+      projectPath: options.projectPath || process.cwd(),
+      sharedSession: true,
+      originalExport: {
+        exportedAt: sessionData.exported_at,
+        exportTool: sessionData.metadata?.exportTool,
+        exportVersion: sessionData.metadata?.exportVersion
+      },
+      importedAt: new Date().toISOString()
+    };
+
+    await fs.writeFile(settingsFile, JSON.stringify(settings, null, 2), 'utf8');
+
+    console.log(chalk.gray(`⚙️  Created settings file: ${settingsFile}`));
+
+    return {
+      success: true,
+      sessionPath: conversationFile,
+      projectDir,
+      projectPath: settings.projectPath,
+      conversationId,
+      messageCount: sessionData.messages.length
+    };
+  }
+
+  /**
+   * Generate QR code for share command
+   * @param {string} command - Command to encode in QR
+   * @returns {Promise<Object>} QR code data (Data URL for web display)
+   */
+  async generateQRCode(command) {
+    try {
+      // Generate QR code as Data URL (for web display)
+      const qrDataUrl = await QRCode.toDataURL(command, {
+        errorCorrectionLevel: 'M',
+        type: 'image/png',
+        width: 300,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF'
+        }
+      });
+
+      return {
+        dataUrl: qrDataUrl,
+        command: command
+      };
+    } catch (error) {
+      console.warn(chalk.yellow('⚠️  Could not generate QR code:'), error.message);
+      return {
+        dataUrl: null,
+        command: command
+      };
+    }
+  }
+
+  /**
+   * Sanitize project name for directory usage
+   * @param {string} projectName - Original project name
+   * @returns {string} Sanitized name
+   */
+  sanitizeProjectName(projectName) {
+    // Replace spaces and special chars with hyphens
+    return projectName
+      .replace(/[^a-zA-Z0-9-_]/g, '-')
+      .replace(/-+/g, '-')
+      .toLowerCase();
+  }
+}
+
+module.exports = SessionSharing;