claude-code-templates 1.24.17 → 1.25.0

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.share-btn:hover {
+            background: rgba(59, 130, 246, 0.15);
+            color: rgba(59, 130, 246, 1);
+        }
+
+        .action-btn.share-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 share-btn" id="shareConversation" onclick="shareConversation()">
+                            <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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
+                                <polyline points="16 6 12 2 8 6"></polyline>
+                                <line x1="12" y1="2" x2="12" y2="15"></line>
+                            </svg>
+                            <span>Share</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,106 @@
         </div>
     </div>
 
+    <!-- Confirm Share Modal (Security Warning) -->
+    <div class="modal-overlay" id="confirmShareModal">
+        <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">Share Your Session</h3>
+            </div>
+            <div style="padding: 20px;">
+                <p class="modal-description" style="margin-bottom: 16px; line-height: 1.5;">
+                    Your conversation will be uploaded to <strong>x0.at</strong>, a temporary file hosting service.
+                    The generated link can be shared with others to clone your session.
+                </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 you're sharing</h4>
+                    <p style="margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4;">
+                        Last <strong>100 messages</strong> from this conversation (or all messages if less than 100)
+                    </p>
+                </div>
+
+                <div style="background: rgba(234, 179, 8, 0.08); border-left: 3px solid #eab308; padding: 12px; border-radius: 6px; margin-bottom: 16px;">
+                    <h4 style="color: #eab308; margin: 0 0 8px 0; font-size: 14px;">ℹ️ About x0.at</h4>
+                    <ul style="margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.5;">
+                        <li style="margin-bottom: 4px;">Simple temporary file hosting (open source)</li>
+                        <li style="margin-bottom: 4px;">Files available for 3-100 days depending on size</li>
+                        <li style="margin-bottom: 4px;">Anyone with the link can download your session</li>
+                        <li style="margin-bottom: 4px;">No encryption - avoid sharing sensitive data</li>
+                    </ul>
+                </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> Only share links with people you trust. The session includes your conversation history and may contain project-specific information.
+                    </p>
+                </div>
+            </div>
+
+            <div class="modal-actions">
+                <button class="modal-btn secondary" onclick="closeConfirmShareModal()">Cancel</button>
+                <button class="modal-btn primary" onclick="proceedWithShare()" style="background: #3b82f6;">
+                    Continue & Upload
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Share Modal -->
+    <div class="modal-overlay" id="shareModal">
+        <div class="modal">
+            <div class="modal-header">
+                <span class="modal-icon">📤</span>
+                <h3 class="modal-title">Share Conversation</h3>
+            </div>
+            <div id="shareModalLoading" style="text-align: center; padding: 40px; display: none;">
+                <div class="loading-spinner"></div>
+                <p style="margin-top: 16px; color: var(--text-secondary);">Uploading session...</p>
+            </div>
+            <div id="shareModalContent" style="display: none;">
+                <p class="modal-description">
+                    Your conversation has been uploaded to x0.at. Share the command or QR code below with others.
+                </p>
+                <div id="shareMessageInfo" style="display: none; padding: 12px; background: var(--bg-tertiary); border-radius: 6px; margin-bottom: 16px;">
+                    <p style="font-size: 13px; color: var(--text-secondary); margin: 0;">
+                        <span id="shareMessageCount"></span>
+                    </p>
+                </div>
+                <div style="text-align: center; margin: 24px 0;">
+                    <div style="margin-bottom: 16px; display: flex; flex-direction: column; align-items: center;">
+                        <h4 style="margin-bottom: 12px; color: var(--text-primary);">📱 Scan QR Code</h4>
+                        <img id="shareQRCode" src="" alt="QR Code" style="max-width: 300px; border-radius: 8px; border: 2px solid var(--border-color); display: block; margin: 0 auto;">
+                        <p style="font-size: 12px; color: var(--text-secondary); margin-top: 12px; margin-bottom: 0;">
+                            Scan this QR code to get the share command
+                        </p>
+                    </div>
+                </div>
+                <div>
+                    <h4 style="margin-bottom: 8px; color: var(--text-primary);">📋 Share Command</h4>
+                    <div class="modal-command" id="shareModalCommand">
+                        <!-- Command will be inserted here -->
+                    </div>
+                </div>
+                <div style="margin-top: 16px; padding: 12px; background: var(--bg-tertiary); border-radius: 6px;">
+                    <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">
+                        🔗 Direct URL: <a id="shareDirectUrl" href="#" target="_blank" style="color: var(--text-accent); word-break: break-all;"></a>
+                    </p>
+                    <p style="font-size: 12px; color: var(--text-warning); margin: 8px 0 0 0;">
+                        ⚠️ Files kept for 3-100 days (based on size)
+                    </p>
+                    <p style="font-size: 12px; color: var(--text-secondary); margin: 4px 0 0 0;">
+                        🔓 Files are not encrypted by default
+                    </p>
+                </div>
+            </div>
+            <div class="modal-actions">
+                <button class="modal-btn secondary" onclick="closeShareModal()">Close</button>
+                <button class="modal-btn primary" id="copyShareCommandBtn" onclick="copyShareCommand()" style="display: none;">Copy Command</button>
+            </div>
+        </div>
+    </div>
+
     <!-- Import WebSocket and Data Services -->
     <script src="services/WebSocketService.js"></script>
     <script src="services/DataService.js"></script>
@@ -2239,56 +2491,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 +2595,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 +2630,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 +2642,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 shareBtn = document.getElementById('shareConversation');
                 resumeBtn.setAttribute('data-conversation-id', conversationId);
+                shareBtn.setAttribute('data-conversation-id', conversationId);
 
                 // Load messages (placeholder for now)
                 this.loadChatMessages(conversationId);
@@ -2352,9 +2664,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 +3336,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 +4013,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 +4722,199 @@
             }
         }
 
+        // Share conversation functions
+        function shareConversation() {
+            const shareBtn = document.getElementById('shareConversation');
+            const conversationId = shareBtn.getAttribute('data-conversation-id');
+
+            if (!conversationId) {
+                console.error('No conversation ID found');
+                return;
+            }
+
+            console.log('📤 Opening share confirmation for conversation:', conversationId);
+
+            // Show confirmation modal first
+            const confirmModal = document.getElementById('confirmShareModal');
+            confirmModal.classList.add('show');
+
+            // Close modal when clicking outside
+            confirmModal.addEventListener('click', (e) => {
+                if (e.target === confirmModal) {
+                    closeConfirmShareModal();
+                }
+            });
+        }
+
+        function closeConfirmShareModal() {
+            const confirmModal = document.getElementById('confirmShareModal');
+            confirmModal.classList.remove('show');
+        }
+
+        async function proceedWithShare() {
+            // Close confirmation modal
+            closeConfirmShareModal();
+
+            const shareBtn = document.getElementById('shareConversation');
+            const conversationId = shareBtn.getAttribute('data-conversation-id');
+
+            if (!conversationId) {
+                console.error('No conversation ID found');
+                return;
+            }
+
+            console.log('📤 User confirmed - Proceeding with share for conversation:', conversationId);
+
+            // Show share modal with loading state
+            const modal = document.getElementById('shareModal');
+            const loadingDiv = document.getElementById('shareModalLoading');
+            const contentDiv = document.getElementById('shareModalContent');
+            const copyBtn = document.getElementById('copyShareCommandBtn');
+
+            modal.classList.add('show');
+            loadingDiv.style.display = 'block';
+            contentDiv.style.display = 'none';
+            copyBtn.style.display = 'none';
+
+            // Close modal when clicking outside
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closeShareModal();
+                }
+            });
+
+            try {
+                // Call API to share the conversation
+                const response = await fetch(`/api/conversations/${conversationId}/share`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to share session: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+
+                console.log('✅ Session shared successfully:', data);
+
+                // Update modal with share data
+                const qrCodeImg = document.getElementById('shareQRCode');
+                const commandDiv = document.getElementById('shareModalCommand');
+                const directUrlLink = document.getElementById('shareDirectUrl');
+
+                // Set QR code
+                if (data.qrCode && data.qrCode.dataUrl) {
+                    qrCodeImg.src = data.qrCode.dataUrl;
+                    qrCodeImg.style.display = 'block';
+                } else {
+                    qrCodeImg.style.display = 'none';
+                }
+
+                // Set command
+                commandDiv.textContent = data.shareCommand;
+                commandDiv.setAttribute('data-command', data.shareCommand);
+
+                // Set direct URL
+                directUrlLink.textContent = data.uploadUrl;
+                directUrlLink.href = data.uploadUrl;
+
+                // Show message count information
+                const messageInfoDiv = document.getElementById('shareMessageInfo');
+                const messageCountSpan = document.getElementById('shareMessageCount');
+
+                if (data.wasLimited) {
+                    messageCountSpan.innerHTML = `⚠️ This session has <strong>${data.totalMessageCount}</strong> messages. Sharing last <strong>${data.messageCount}</strong> messages to keep file size manageable.`;
+                    messageInfoDiv.style.display = 'block';
+                } else {
+                    messageCountSpan.innerHTML = `✅ Sharing <strong>${data.messageCount}</strong> messages from this conversation.`;
+                    messageInfoDiv.style.display = 'block';
+                }
+
+                // Show content and hide loading
+                loadingDiv.style.display = 'none';
+                contentDiv.style.display = 'block';
+                copyBtn.style.display = 'block';
+
+            } catch (error) {
+                console.error('❌ Failed to share session:', error);
+                alert(`Failed to share session: ${error.message}`);
+                closeShareModal();
+            }
+        }
+
+        function closeShareModal() {
+            const modal = document.getElementById('shareModal');
+            modal.classList.remove('show');
+        }
+
+        function copyShareCommand() {
+            const commandDiv = document.getElementById('shareModalCommand');
+            const copyBtn = document.getElementById('copyShareCommandBtn');
+            const command = commandDiv.getAttribute('data-command');
+
+            if (!command) {
+                console.error('No command found to copy');
+                return;
+            }
+
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(command).then(() => {
+                    // Show success feedback
+                    const originalText = copyBtn.textContent;
+                    copyBtn.textContent = '✅ Copied!';
+                    copyBtn.style.backgroundColor = 'rgba(63, 185, 80, 0.8)';
+                    copyBtn.style.borderColor = 'rgba(63, 185, 80, 1)';
+
+                    setTimeout(() => {
+                        copyBtn.textContent = originalText;
+                        copyBtn.style.backgroundColor = '';
+                        copyBtn.style.borderColor = '';
+                    }, 1500);
+
+                    console.log('📋 Share command copied to clipboard:', command);
+                }).catch(err => {
+                    console.error('Failed to copy to clipboard:', err);
+                    fallbackCopyShare(command);
+                });
+            } else {
+                // Fallback for browsers without clipboard API
+                fallbackCopyShare(command);
+            }
+        }
+
+        function fallbackCopyShare(command) {
+            // Create a temporary text area to select and copy
+            const tempTextArea = document.createElement('textarea');
+            tempTextArea.value = command;
+            tempTextArea.style.position = 'fixed';
+            tempTextArea.style.left = '-9999px';
+            document.body.appendChild(tempTextArea);
+            tempTextArea.select();
+
+            try {
+                document.execCommand('copy');
+                const copyBtn = document.getElementById('copyShareCommandBtn');
+                const originalText = copyBtn.textContent;
+                copyBtn.textContent = '✅ Copied!';
+                copyBtn.style.backgroundColor = 'rgba(63, 185, 80, 0.8)';
+
+                setTimeout(() => {
+                    copyBtn.textContent = originalText;
+                    copyBtn.style.backgroundColor = '';
+                }, 1500);
+
+                console.log('📋 Share command copied using fallback method:', command);
+            } catch (err) {
+                console.error('Fallback copy failed:', err);
+                alert(`Please copy this command manually:\n\n${command}`);
+            } finally {
+                document.body.removeChild(tempTextArea);
+            }
+        }
+
         // Initialize the app
         document.addEventListener('DOMContentLoaded', () => {
             new ChatsMobileApp();