claude-code-templates 1.24.16 → 1.25.0

package/src/analytics-web/chats_mobile.html

@@ -183,6 +183,605 @@
             color: var(--text-secondary);
         }
 
+        /* Advanced Search Panel - Telegram Style */
+        .search-panel-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            display: none;
+            animation: fadeIn 0.2s ease;
+        }
+
+        .search-panel-overlay.active {
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            padding-top: 10vh;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .search-panel {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            width: 90%;
+            max-width: 600px;
+            max-height: 80vh;
+            overflow-y: auto;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+            animation: slideDown 0.3s ease;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .search-panel-header {
+            padding: 20px;
+            border-bottom: 1px solid var(--border-primary);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: sticky;
+            top: 0;
+            background: var(--bg-secondary);
+            z-index: 10;
+        }
+
+        .search-panel-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .search-panel-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+        }
+
+        .search-panel-close:hover {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+
+        .search-panel-body {
+            padding: 20px;
+        }
+
+        .search-filter-group {
+            margin-bottom: 24px;
+        }
+
+        .search-filter-label {
+            display: block;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .search-filter-input {
+            width: 100%;
+            padding: 12px 16px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.2s ease;
+        }
+
+        .search-filter-input:focus {
+            border-color: var(--terminal-orange);
+            background: var(--bg-primary);
+        }
+
+        .search-filter-input::placeholder {
+            color: var(--text-secondary);
+        }
+
+        .search-filter-date-range {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .search-filter-date-wrapper {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .search-filter-date-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-bottom: 4px;
+        }
+
+        .search-panel-actions {
+            padding: 16px 20px;
+            border-top: 1px solid var(--border-primary);
+            display: flex;
+            gap: 12px;
+            position: sticky;
+            bottom: 0;
+            background: var(--bg-secondary);
+        }
+
+        .search-btn {
+            flex: 1;
+            padding: 14px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .search-btn-primary {
+            background: var(--terminal-orange);
+            color: white;
+        }
+
+        .search-btn-primary:hover {
+            background: var(--terminal-orange-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
+        }
+
+        .search-btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+
+        .search-btn-secondary:hover {
+            background: var(--border-secondary);
+        }
+
+        .search-btn:active {
+            transform: translateY(0);
+        }
+
+        .search-filter-icon {
+            display: inline-block;
+            margin-right: 6px;
+        }
+
+        .advanced-search-toggle {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            color: var(--terminal-orange);
+            padding: 8px 12px;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            margin-left: 8px;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .advanced-search-toggle:hover {
+            background: var(--terminal-orange);
+            color: white;
+            border-color: var(--terminal-orange);
+        }
+
+        .search-results-info {
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+            padding: 12px 16px;
+            margin-bottom: 16px;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            display: none;
+        }
+
+        .search-results-info.active {
+            display: block;
+        }
+
+        .search-results-count {
+            color: var(--terminal-orange);
+            font-weight: 600;
+        }
+
+        .clear-filters-btn {
+            background: none;
+            border: none;
+            color: var(--terminal-orange);
+            cursor: pointer;
+            font-size: 0.875rem;
+            text-decoration: underline;
+            padding: 0;
+            margin-left: 8px;
+        }
+
+        .clear-filters-btn:hover {
+            color: var(--terminal-orange-hover);
+        }
+
+        .filter-tag {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-secondary);
+            border-radius: 12px;
+            padding: 4px 10px;
+            font-size: 0.75rem;
+            color: var(--text-primary);
+        }
+
+        .filter-tag-icon {
+            font-size: 0.7rem;
+        }
+
+        .filter-tag-label {
+            color: var(--text-secondary);
+            margin-right: 2px;
+        }
+
+        .filter-tag-value {
+            color: var(--terminal-orange);
+            font-weight: 500;
+        }
+
+        /* Folder Browser */
+        .folder-browser-wrapper {
+            position: relative;
+        }
+
+        .folder-browser-toggle {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: var(--terminal-orange);
+            border: none;
+            color: white;
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            z-index: 1;
+        }
+
+        .folder-browser-toggle:hover {
+            background: var(--terminal-orange-hover);
+            transform: translateY(-50%) scale(1.05);
+        }
+
+        .folder-browser-dropdown {
+            position: absolute;
+            top: calc(100% + 8px);
+            left: 0;
+            right: 0;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-secondary);
+            border-radius: 8px;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 100;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+            display: none;
+        }
+
+        .folder-browser-dropdown.active {
+            display: block;
+            animation: slideDown 0.2s ease;
+        }
+
+        .folder-browser-header {
+            padding: 12px 16px;
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-primary);
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .folder-browser-search {
+            width: 100%;
+            padding: 8px 12px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.875rem;
+            outline: none;
+        }
+
+        .folder-browser-search:focus {
+            border-color: var(--terminal-orange);
+        }
+
+        .folder-browser-list {
+            padding: 4px 0;
+        }
+
+        .folder-item {
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            border-bottom: 1px solid var(--border-primary);
+        }
+
+        .folder-item:last-child {
+            border-bottom: none;
+        }
+
+        .folder-item:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .folder-item.selected {
+            background: var(--terminal-orange);
+            color: white;
+        }
+
+        .folder-icon {
+            font-size: 1.2rem;
+            flex-shrink: 0;
+        }
+
+        .folder-path {
+            flex: 1;
+            font-size: 0.875rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .folder-item.selected .folder-path {
+            color: white;
+        }
+
+        .folder-count {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            background: var(--bg-tertiary);
+            padding: 2px 8px;
+            border-radius: 10px;
+            flex-shrink: 0;
+        }
+
+        .folder-item.selected .folder-count {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+
+        .folder-browser-empty {
+            padding: 24px 16px;
+            text-align: center;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        /* In-Conversation Search */
+        .chat-search-bar {
+            display: none;
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-primary);
+            padding: 12px 16px;
+            align-items: center;
+            gap: 12px;
+            animation: slideDown 0.2s ease;
+        }
+
+        .chat-search-bar.active {
+            display: flex;
+        }
+
+        .chat-search-input-wrapper {
+            flex: 1;
+            position: relative;
+        }
+
+        .chat-search-input {
+            width: 100%;
+            padding: 8px 12px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.875rem;
+            outline: none;
+        }
+
+        .chat-search-input:focus {
+            border-color: var(--terminal-orange);
+        }
+
+        .chat-search-controls {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .chat-search-counter {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            min-width: 60px;
+            text-align: center;
+        }
+
+        .chat-search-counter.has-results {
+            color: var(--terminal-orange);
+            font-weight: 500;
+        }
+
+        .chat-search-nav-btn {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-primary);
+            color: var(--text-primary);
+            padding: 6px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .chat-search-nav-btn:hover:not(:disabled) {
+            background: var(--terminal-orange);
+            border-color: var(--terminal-orange);
+            color: white;
+        }
+
+        .chat-search-nav-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .chat-search-close-btn {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1.2rem;
+            transition: all 0.2s ease;
+        }
+
+        .chat-search-close-btn:hover {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+        }
+
+        /* Message highlight */
+        .message-highlight {
+            background: var(--terminal-orange);
+            color: white;
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-weight: 500;
+        }
+
+        .message-current-highlight {
+            background: #ffaa00;
+            color: white;
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-weight: 600;
+            box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
+        }
+
+        /* 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: 8px;
+            white-space: nowrap;
+        }
+
+        .action-btn:last-child {
+            border-right: none;
+        }
+
+        .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 */
         .conversations-list {
             flex: 1;
@@ -268,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;
@@ -805,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 {
@@ -1195,12 +1879,30 @@
 
             <!-- Search -->
             <div class="chat-search">
-                <input 
-                    type="text" 
-                    class="search-input" 
-                    placeholder="Search conversations..." 
-                    id="searchInput"
-                />
+                <div style="display: flex; align-items: center;">
+                    <input
+                        type="text"
+                        class="search-input"
+                        placeholder="Search conversations..."
+                        id="searchInput"
+                        style="flex: 1;"
+                    />
+                    <button class="advanced-search-toggle" id="advancedSearchToggle">
+                        <span>🔍</span>
+                        <span>Advanced</span>
+                    </button>
+                </div>
+
+                <!-- Search Results Info -->
+                <div class="search-results-info" id="searchResultsInfo">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <span>Found <span class="search-results-count" id="searchResultsCount">0</span> conversations</span>
+                            <button class="clear-filters-btn" id="clearFiltersBtn">Clear filters</button>
+                        </div>
+                        <div id="appliedFilters" style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;"></div>
+                    </div>
+                </div>
             </div>
 
             <!-- Conversations List -->
@@ -1209,6 +1911,127 @@
             </div>
         </div>
 
+        <!-- Advanced Search Panel Overlay -->
+        <div class="search-panel-overlay" id="searchPanelOverlay">
+            <div class="search-panel">
+                <!-- Panel Header -->
+                <div class="search-panel-header">
+                    <h3 class="search-panel-title">
+                        <span class="search-filter-icon">🔍</span>
+                        Advanced Search
+                    </h3>
+                    <button class="search-panel-close" id="searchPanelClose">✕</button>
+                </div>
+
+                <!-- Panel Body -->
+                <div class="search-panel-body">
+                    <!-- Quick Search -->
+                    <div class="search-filter-group">
+                        <label class="search-filter-label">
+                            <span class="search-filter-icon">💬</span>
+                            Quick Search
+                        </label>
+                        <input
+                            type="text"
+                            class="search-filter-input"
+                            placeholder="Search by conversation ID or filename..."
+                            id="filterQuery"
+                        />
+                    </div>
+
+                    <!-- Working Directory Filter -->
+                    <div class="search-filter-group">
+                        <label class="search-filter-label">
+                            <span class="search-filter-icon">📁</span>
+                            Working Directory
+                        </label>
+                        <div class="folder-browser-wrapper">
+                            <input
+                                type="text"
+                                class="search-filter-input"
+                                placeholder="e.g., /Users/name/Projects/MyProject"
+                                id="filterWorkingDirectory"
+                                style="padding-right: 100px;"
+                            />
+                            <button class="folder-browser-toggle" id="folderBrowserToggle">
+                                📂 Browse
+                            </button>
+
+                            <!-- Folder Browser Dropdown -->
+                            <div class="folder-browser-dropdown" id="folderBrowserDropdown">
+                                <div class="folder-browser-header">
+                                    <input
+                                        type="text"
+                                        class="folder-browser-search"
+                                        placeholder="Filter directories..."
+                                        id="folderBrowserSearch"
+                                    />
+                                </div>
+                                <div class="folder-browser-list" id="folderBrowserList">
+                                    <div class="folder-browser-empty">
+                                        Loading directories...
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Date Range Filter -->
+                    <div class="search-filter-group">
+                        <label class="search-filter-label">
+                            <span class="search-filter-icon">📅</span>
+                            Date Range
+                        </label>
+                        <div class="search-filter-date-range">
+                            <div class="search-filter-date-wrapper">
+                                <span class="search-filter-date-label">From</span>
+                                <input
+                                    type="date"
+                                    class="search-filter-input"
+                                    id="filterDateFrom"
+                                />
+                            </div>
+                            <div class="search-filter-date-wrapper">
+                                <span class="search-filter-date-label">To</span>
+                                <input
+                                    type="date"
+                                    class="search-filter-input"
+                                    id="filterDateTo"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Content Search -->
+                    <div class="search-filter-group">
+                        <label class="search-filter-label">
+                            <span class="search-filter-icon">🔎</span>
+                            Search in Messages
+                        </label>
+                        <input
+                            type="text"
+                            class="search-filter-input"
+                            placeholder="Search within conversation content..."
+                            id="filterContentSearch"
+                        />
+                        <small style="color: var(--text-secondary); font-size: 0.75rem; margin-top: 4px; display: block;">
+                            ⚠️ This may take longer for large conversations
+                        </small>
+                    </div>
+                </div>
+
+                <!-- Panel Actions -->
+                <div class="search-panel-actions">
+                    <button class="search-btn search-btn-secondary" id="searchPanelReset">
+                        Reset
+                    </button>
+                    <button class="search-btn search-btn-primary" id="searchPanelApply">
+                        Search
+                    </button>
+                </div>
+            </div>
+        </div>
+
         <!-- Chat View -->
         <div class="chat-view" id="chatView">
             <div class="chat-view-header">
@@ -1217,14 +2040,34 @@
                         ←
                     </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">
                     <div class="tools-toggle" id="toolsToggle">
@@ -1236,6 +2079,31 @@
                     </div>
                 </div>
             </div>
+
+            <!-- In-Conversation Search Bar -->
+            <div class="chat-search-bar" id="chatSearchBar">
+                <div class="chat-search-input-wrapper">
+                    <input
+                        type="text"
+                        class="chat-search-input"
+                        placeholder="Search in this conversation..."
+                        id="chatSearchInput"
+                    />
+                </div>
+                <div class="chat-search-controls">
+                    <span class="chat-search-counter" id="chatSearchCounter">0/0</span>
+                    <button class="chat-search-nav-btn" id="chatSearchPrev" title="Previous match (↑)">
+                        ↑
+                    </button>
+                    <button class="chat-search-nav-btn" id="chatSearchNext" title="Next match (↓)">
+                        ↓
+                    </button>
+                    <button class="chat-search-close-btn" id="chatSearchClose">
+                        ✕
+                    </button>
+                </div>
+            </div>
+
             <div class="chat-messages" id="chatMessages">
                 <div class="no-conversations">
                     <div class="no-conversations-icon">💬</div>
@@ -1275,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>
@@ -1340,6 +2308,109 @@
                     this.filterConversations(e.target.value);
                 });
 
+                // Advanced search toggle
+                document.getElementById('advancedSearchToggle').addEventListener('click', () => {
+                    this.openAdvancedSearch();
+                });
+
+                // Advanced search panel close
+                document.getElementById('searchPanelClose').addEventListener('click', () => {
+                    this.closeAdvancedSearch();
+                });
+
+                // Close panel on overlay click
+                document.getElementById('searchPanelOverlay').addEventListener('click', (e) => {
+                    if (e.target.id === 'searchPanelOverlay') {
+                        this.closeAdvancedSearch();
+                    }
+                });
+
+                // Advanced search apply
+                document.getElementById('searchPanelApply').addEventListener('click', () => {
+                    this.applyAdvancedSearch();
+                });
+
+                // Advanced search reset
+                document.getElementById('searchPanelReset').addEventListener('click', () => {
+                    this.resetAdvancedSearch();
+                });
+
+                // Clear filters button
+                document.getElementById('clearFiltersBtn').addEventListener('click', () => {
+                    this.clearAllFilters();
+                });
+
+                // Folder browser toggle
+                document.getElementById('folderBrowserToggle').addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.toggleFolderBrowser();
+                });
+
+                // Folder browser search
+                document.getElementById('folderBrowserSearch').addEventListener('input', (e) => {
+                    this.filterFolderBrowserList(e.target.value);
+                });
+
+                // Close folder browser when clicking outside
+                document.addEventListener('click', (e) => {
+                    const dropdown = document.getElementById('folderBrowserDropdown');
+                    const toggle = document.getElementById('folderBrowserToggle');
+                    const wrapper = document.querySelector('.folder-browser-wrapper');
+
+                    if (dropdown.classList.contains('active') &&
+                        !wrapper.contains(e.target)) {
+                        dropdown.classList.remove('active');
+                    }
+                });
+
+                // In-conversation search toggle
+                document.getElementById('chatSearchToggle').addEventListener('click', () => {
+                    this.toggleChatSearch();
+                });
+
+                // In-conversation search input (only search with 3+ characters)
+                document.getElementById('chatSearchInput').addEventListener('input', (e) => {
+                    const query = e.target.value.trim();
+                    if (query.length >= 3) {
+                        this.performChatSearch(query);
+                    } else if (query.length === 0) {
+                        // Clear search when input is empty
+                        this.clearChatSearch();
+                    } else {
+                        // Show message that minimum 3 characters are required
+                        this.updateSearchCounter(0, 0, true);
+                    }
+                });
+
+                // In-conversation search navigation
+                document.getElementById('chatSearchPrev').addEventListener('click', () => {
+                    this.navigateSearchResults('prev');
+                });
+
+                document.getElementById('chatSearchNext').addEventListener('click', () => {
+                    this.navigateSearchResults('next');
+                });
+
+                // In-conversation search close
+                document.getElementById('chatSearchClose').addEventListener('click', () => {
+                    this.closeChatSearch();
+                });
+
+                // Keyboard shortcuts for search
+                document.getElementById('chatSearchInput').addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        if (e.shiftKey) {
+                            this.navigateSearchResults('prev');
+                        } else {
+                            this.navigateSearchResults('next');
+                        }
+                    } else if (e.key === 'Escape') {
+                        this.closeChatSearch();
+                    }
+                });
+
                 // Show Tools toggle functionality
                 const showToolsSwitch = document.getElementById('showToolsSwitch');
                 showToolsSwitch.addEventListener('change', (e) => {
@@ -1420,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', () => {
@@ -1479,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;
                 
@@ -1503,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');
@@ -1515,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);
@@ -1533,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 => {
@@ -1717,22 +2848,26 @@
                     const scrollHeight = chatMessages.scrollHeight;
                     
                     // Prepend new messages
-                    const newMessagesHTML = messages.map(msg => this.renderMessage(msg)).join('');
+                    // Calculate message indices (considering we're prepending older messages)
+                    const startIndex = this.messagesPagination.currentPage * this.messagesPagination.limit;
+                    const newMessagesHTML = messages.map((msg, idx) =>
+                        this.renderMessage(msg, startIndex + idx)
+                    ).join('');
                     existingMessagesDiv.innerHTML = newMessagesHTML + existingMessagesDiv.innerHTML;
-                    
+
                     // Restore scroll position (account for new content)
                     const newScrollHeight = chatMessages.scrollHeight;
                     const scrollDiff = newScrollHeight - scrollHeight;
                     chatMessages.scrollTop = scrollTop + scrollDiff;
-                    
+
                 } else {
                     // Normal render (initial load or replace all)
                     const messageHTML = `
                         <div class="messages-list">
-                            ${messages.map(msg => this.renderMessage(msg)).join('')}
+                            ${messages.map((msg, idx) => this.renderMessage(msg, idx)).join('')}
                         </div>
                     `;
-                    
+
                     chatMessages.innerHTML = messageHTML;
                 }
             }
@@ -1800,17 +2935,17 @@
                 chatMessages.addEventListener('scroll', this.messagesScrollListener);
             }
 
-            renderMessage(message) {
+            renderMessage(message, messageIndex) {
                 const timestamp = this.formatRelativeTime(new Date(message.timestamp));
                 const fullTimestamp = new Date(message.timestamp).toLocaleString();
                 const isUser = message.role === 'user' && !message.isCompactSummary;
-                
+
                 // Detect if message contains tools (either in content or as correlated toolResults)
-                const hasToolsInContent = Array.isArray(message.content) && 
+                const hasToolsInContent = Array.isArray(message.content) &&
                                          message.content.some(block => block.type === 'tool_use');
                 const hasCorrelatedTools = message.toolResults && message.toolResults.length > 0;
                 const hasTools = hasToolsInContent || hasCorrelatedTools;
-                
+
                 // Debug logging for tool detection
                 if (hasTools) {
                     console.log('🔧 Rendering message with tools', {
@@ -1823,16 +2958,19 @@
                         willHaveHasToolsClass: !isUser && hasTools
                     });
                 }
-                
-                const toolCount = hasToolsInContent ? 
+
+                const toolCount = hasToolsInContent ?
                                  message.content.filter(block => block.type === 'tool_use').length :
                                  (hasCorrelatedTools ? message.toolResults.length : 0);
-                
+
                 // Add has-tools class to assistant messages that contain tools
                 const hasToolsClass = (!isUser && hasTools) ? ' has-tools' : '';
-                
+
+                // Add message index for search functionality
+                const messageIndexAttr = messageIndex !== undefined ? ` data-message-index="${messageIndex}"` : '';
+
                 return `
-                    <div class="message message-${isUser ? 'user' : 'assistant'}${hasToolsClass}" data-message-id="${message.id || ''}">
+                    <div class="message message-${isUser ? 'user' : 'assistant'}${hasToolsClass}" data-message-id="${message.id || ''}"${messageIndexAttr}>
                         <div class="message-bubble">
                             <div class="message-content">
                                 ${this.formatMessageContent(message.content, message)}
@@ -2106,107 +3244,785 @@
                 return scrollHeight - scrollTop - clientHeight <= this.scrollThreshold;
             }
 
-            /**
-             * Smart scroll to bottom with chat logic
-             * Only scrolls if user is near bottom or auto-scroll is enabled
-             */
-            scrollToBottom() {
-                const chatMessages = document.getElementById('chatMessages');
-                if (!chatMessages) return;
-                
-                // Always scroll on initial load or if user is near bottom
-                if (this.autoScrollEnabled || this.isNearBottom()) {
-                    console.log('📱 Auto-scrolling to bottom', {
-                        autoScrollEnabled: this.autoScrollEnabled,
-                        isNearBottom: this.isNearBottom(),
-                        userScrolling: this.isUserScrolling
-                    });
-                    
-                    chatMessages.scrollTop = chatMessages.scrollHeight;
+            /**
+             * Smart scroll to bottom with chat logic
+             * Only scrolls if user is near bottom or auto-scroll is enabled
+             */
+            scrollToBottom() {
+                const chatMessages = document.getElementById('chatMessages');
+                if (!chatMessages) return;
+                
+                // Always scroll on initial load or if user is near bottom
+                if (this.autoScrollEnabled || this.isNearBottom()) {
+                    console.log('📱 Auto-scrolling to bottom', {
+                        autoScrollEnabled: this.autoScrollEnabled,
+                        isNearBottom: this.isNearBottom(),
+                        userScrolling: this.isUserScrolling
+                    });
+                    
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                } else {
+                    console.log('📱 Skipping auto-scroll (user viewing older messages)', {
+                        scrollTop: chatMessages.scrollTop,
+                        scrollHeight: chatMessages.scrollHeight,
+                        isNearBottom: this.isNearBottom()
+                    });
+                }
+            }
+
+            /**
+             * Setup scroll tracking for intelligent auto-scroll
+             */
+            setupScrollTracking() {
+                const chatMessages = document.getElementById('chatMessages');
+                if (!chatMessages || this.scrollListener) return;
+
+                this.scrollListener = () => {
+                    // Clear previous timeout
+                    if (this.userScrollTimeout) {
+                        clearTimeout(this.userScrollTimeout);
+                    }
+
+                    // Mark as user scrolling
+                    this.isUserScrolling = true;
+
+                    // Check if user scrolled back to bottom
+                    if (this.isNearBottom()) {
+                        this.autoScrollEnabled = true;
+                        console.log('📱 User scrolled to bottom, re-enabling auto-scroll');
+                    } else {
+                        this.autoScrollEnabled = false;
+                    }
+
+                    // Reset user scrolling flag after a delay
+                    this.userScrollTimeout = setTimeout(() => {
+                        this.isUserScrolling = false;
+                    }, 1000);
+                };
+
+                chatMessages.addEventListener('scroll', this.scrollListener, { passive: true });
+                console.log('📱 Scroll tracking enabled for intelligent auto-scroll');
+            }
+
+            /**
+             * Remove scroll tracking
+             */
+            removeScrollTracking() {
+                const chatMessages = document.getElementById('chatMessages');
+                if (chatMessages && this.scrollListener) {
+                    chatMessages.removeEventListener('scroll', this.scrollListener);
+                    this.scrollListener = null;
+                }
+                
+                if (this.userScrollTimeout) {
+                    clearTimeout(this.userScrollTimeout);
+                    this.userScrollTimeout = null;
+                }
+            }
+
+            /**
+             * Escape HTML characters to prevent double-encoding issues
+             * @param {string} text - Text to escape
+             * @returns {string} Escaped text
+             */
+            escapeHtml(text) {
+                if (typeof text !== 'string') return text;
+                
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+
+
+
+            filterConversations(searchTerm) {
+                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
+
+                    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';
+                    }
+                });
+            }
+
+            // Advanced Search Methods
+            openAdvancedSearch() {
+                const overlay = document.getElementById('searchPanelOverlay');
+                overlay.classList.add('active');
+                document.body.style.overflow = 'hidden'; // Prevent background scrolling
+            }
+
+            closeAdvancedSearch() {
+                const overlay = document.getElementById('searchPanelOverlay');
+                overlay.classList.remove('active');
+                document.body.style.overflow = ''; // Restore scrolling
+            }
+
+            async applyAdvancedSearch() {
+                const conversationsList = document.getElementById('conversationsList');
+                const searchResultsInfo = document.getElementById('searchResultsInfo');
+                const searchResultsCount = document.getElementById('searchResultsCount');
+                const appliedFiltersContainer = document.getElementById('appliedFilters');
+
+                try {
+                    // Show loading state
+                    conversationsList.innerHTML = '<div class="loading-spinner" style="margin: 40px auto;"></div>';
+
+                    // Get filter values
+                    const filters = {
+                        query: document.getElementById('filterQuery').value.trim(),
+                        workingDirectory: document.getElementById('filterWorkingDirectory').value.trim(),
+                        dateFrom: document.getElementById('filterDateFrom').value,
+                        dateTo: document.getElementById('filterDateTo').value,
+                        contentSearch: document.getElementById('filterContentSearch').value.trim()
+                    };
+
+                    // Call the search API
+                    const response = await fetch('/api/search', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(filters)
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`Search failed: ${response.status}`);
+                    }
+
+                    const data = await response.json();
+
+                    // Update conversations with search results
+                    this.conversations = data.results || [];
+
+                    // Get conversation states for the results
+                    const statesResponse = await fetch('/api/conversation-state');
+                    let states = {};
+                    if (statesResponse.ok) {
+                        const statesData = await statesResponse.json();
+                        states = statesData.activeStates || {};
+                    }
+
+                    // Render search results
+                    this.renderConversations(this.conversations, states);
+
+                    // Show search results info with applied filters
+                    searchResultsCount.textContent = data.count;
+                    this.renderAppliedFilters(filters, appliedFiltersContainer);
+                    searchResultsInfo.classList.add('active');
+
+                    // Close the search panel
+                    this.closeAdvancedSearch();
+
+                    console.log('🔍 Search completed:', data.count, 'results found');
+                } catch (error) {
+                    console.error('Error performing advanced search:', error);
+                    conversationsList.innerHTML = `
+                        <div class="no-conversations">
+                            <div class="no-conversations-icon">⚠️</div>
+                            <h3>Search Error</h3>
+                            <p>${error.message}</p>
+                            <button onclick="location.reload()" style="margin-top: 12px; padding: 8px 16px; background: var(--text-accent); color: white; border: none; border-radius: 4px; cursor: pointer;">Retry</button>
+                        </div>
+                    `;
+                }
+            }
+
+            renderAppliedFilters(filters, container) {
+                container.innerHTML = '';
+
+                const filterTags = [];
+
+                // Quick search filter
+                if (filters.query) {
+                    filterTags.push({
+                        icon: '💬',
+                        label: 'Search',
+                        value: filters.query
+                    });
+                }
+
+                // Working directory filter
+                if (filters.workingDirectory) {
+                    // Shorten the path for display
+                    const shortPath = filters.workingDirectory.length > 30
+                        ? '...' + filters.workingDirectory.slice(-30)
+                        : filters.workingDirectory;
+                    filterTags.push({
+                        icon: '📁',
+                        label: 'Directory',
+                        value: shortPath
+                    });
+                }
+
+                // Date range filter
+                if (filters.dateFrom || filters.dateTo) {
+                    let dateValue = '';
+                    if (filters.dateFrom && filters.dateTo) {
+                        dateValue = `${this.formatDate(filters.dateFrom)} → ${this.formatDate(filters.dateTo)}`;
+                    } else if (filters.dateFrom) {
+                        dateValue = `From ${this.formatDate(filters.dateFrom)}`;
+                    } else if (filters.dateTo) {
+                        dateValue = `Until ${this.formatDate(filters.dateTo)}`;
+                    }
+                    filterTags.push({
+                        icon: '📅',
+                        label: 'Date',
+                        value: dateValue
+                    });
+                }
+
+                // Content search filter
+                if (filters.contentSearch) {
+                    filterTags.push({
+                        icon: '🔎',
+                        label: 'Content',
+                        value: filters.contentSearch
+                    });
+                }
+
+                // Render filter tags
+                filterTags.forEach(tag => {
+                    const tagElement = document.createElement('div');
+                    tagElement.className = 'filter-tag';
+                    tagElement.innerHTML = `
+                        <span class="filter-tag-icon">${tag.icon}</span>
+                        <span class="filter-tag-label">${tag.label}:</span>
+                        <span class="filter-tag-value">${tag.value}</span>
+                    `;
+                    container.appendChild(tagElement);
+                });
+            }
+
+            formatDate(dateString) {
+                const date = new Date(dateString);
+                const options = { month: 'short', day: 'numeric', year: 'numeric' };
+                return date.toLocaleDateString('en-US', options);
+            }
+
+            // Folder Browser Methods
+            async toggleFolderBrowser() {
+                const dropdown = document.getElementById('folderBrowserDropdown');
+                const isActive = dropdown.classList.contains('active');
+
+                if (isActive) {
+                    dropdown.classList.remove('active');
+                } else {
+                    // Load directories if not loaded yet
+                    if (!this.directories) {
+                        await this.loadDirectories();
+                    }
+                    dropdown.classList.add('active');
+                }
+            }
+
+            async loadDirectories() {
+                const listContainer = document.getElementById('folderBrowserList');
+
+                try {
+                    listContainer.innerHTML = '<div class="folder-browser-empty">Loading directories...</div>';
+
+                    const response = await fetch('/api/directories');
+                    if (!response.ok) {
+                        throw new Error('Failed to load directories');
+                    }
+
+                    const data = await response.json();
+                    this.directories = data.directories || [];
+
+                    // Count conversations per directory
+                    this.directoryCounts = {};
+                    this.conversations.forEach(conv => {
+                        if (conv.project) {
+                            this.directoryCounts[conv.project] = (this.directoryCounts[conv.project] || 0) + 1;
+                        }
+                    });
+
+                    this.renderFolderBrowserList(this.directories);
+                } catch (error) {
+                    console.error('Error loading directories:', error);
+                    listContainer.innerHTML = '<div class="folder-browser-empty">Error loading directories</div>';
+                }
+            }
+
+            renderFolderBrowserList(directories) {
+                const listContainer = document.getElementById('folderBrowserList');
+                const currentValue = document.getElementById('filterWorkingDirectory').value;
+
+                if (directories.length === 0) {
+                    listContainer.innerHTML = '<div class="folder-browser-empty">No directories found</div>';
+                    return;
+                }
+
+                listContainer.innerHTML = directories.map(dir => {
+                    const count = this.directoryCounts[dir] || 0;
+                    const isSelected = dir === currentValue;
+
+                    return `
+                        <div class="folder-item ${isSelected ? 'selected' : ''}" data-path="${this.escapeHtml(dir)}">
+                            <span class="folder-icon">📁</span>
+                            <span class="folder-path" title="${this.escapeHtml(dir)}">${this.escapeHtml(dir)}</span>
+                            <span class="folder-count">${count}</span>
+                        </div>
+                    `;
+                }).join('');
+
+                // Add click handlers to folder items
+                listContainer.querySelectorAll('.folder-item').forEach(item => {
+                    item.addEventListener('click', () => {
+                        const path = item.getAttribute('data-path');
+                        this.selectDirectory(path);
+                    });
+                });
+            }
+
+            selectDirectory(path) {
+                const input = document.getElementById('filterWorkingDirectory');
+                const dropdown = document.getElementById('folderBrowserDropdown');
+
+                input.value = path;
+                dropdown.classList.remove('active');
+
+                // Update UI to show selected folder
+                this.renderFolderBrowserList(this.directories);
+            }
+
+            filterFolderBrowserList(searchTerm) {
+                if (!this.directories) return;
+
+                const term = searchTerm.toLowerCase();
+                const filtered = this.directories.filter(dir =>
+                    dir.toLowerCase().includes(term)
+                );
+
+                this.renderFolderBrowserList(filtered);
+            }
+
+            escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+
+            // In-Conversation Search Methods
+            toggleChatSearch() {
+                const searchBar = document.getElementById('chatSearchBar');
+                const toggle = document.getElementById('chatSearchToggle');
+                const isActive = searchBar.classList.contains('active');
+
+                if (isActive) {
+                    this.closeChatSearch();
+                } else {
+                    searchBar.classList.add('active');
+                    toggle.classList.add('active');
+                    document.getElementById('chatSearchInput').focus();
+                }
+            }
+
+            closeChatSearch() {
+                const searchBar = document.getElementById('chatSearchBar');
+                const toggle = document.getElementById('chatSearchToggle');
+                const input = document.getElementById('chatSearchInput');
+
+                searchBar.classList.remove('active');
+                toggle.classList.remove('active');
+                input.value = '';
+
+                // Clear search state
+                this.chatSearchMatches = [];
+                this.chatSearchCurrentIndex = -1;
+                this.updateSearchCounter();
+                this.clearSearchHighlights();
+            }
+
+            clearChatSearch() {
+                // Clear search results but keep search bar open
+                this.chatSearchMatches = [];
+                this.chatSearchCurrentIndex = -1;
+                this.updateSearchCounter();
+                this.clearSearchHighlights();
+            }
+
+            async performChatSearch(query) {
+                if (!this.selectedConversationId || !query || query.trim().length === 0) {
+                    this.chatSearchMatches = [];
+                    this.chatSearchCurrentIndex = -1;
+                    this.updateSearchCounter();
+                    this.clearSearchHighlights();
+                    return;
+                }
+
+                try {
+                    const response = await fetch(`/api/conversations/${this.selectedConversationId}/search`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ query: query.trim() })
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Search failed');
+                    }
+
+                    const data = await response.json();
+                    this.chatSearchMatches = data.matches || [];
+                    this.chatSearchCurrentIndex = this.chatSearchMatches.length > 0 ? 0 : -1;
+
+                    console.log('🔍 Search results:', {
+                        query: query,
+                        totalMatches: this.chatSearchMatches.length,
+                        matches: this.chatSearchMatches
+                    });
+
+                    this.updateSearchCounter();
+                    this.highlightSearchResults(query);
+
+                    // Navigate to first match
+                    if (this.chatSearchMatches.length > 0) {
+                        await this.scrollToSearchMatch(0);
+                    }
+                } catch (error) {
+                    console.error('Error searching in conversation:', error);
+                }
+            }
+
+            async navigateSearchResults(direction) {
+                if (this.chatSearchMatches.length === 0) return;
+
+                if (direction === 'next') {
+                    this.chatSearchCurrentIndex = (this.chatSearchCurrentIndex + 1) % this.chatSearchMatches.length;
                 } else {
-                    console.log('📱 Skipping auto-scroll (user viewing older messages)', {
-                        scrollTop: chatMessages.scrollTop,
-                        scrollHeight: chatMessages.scrollHeight,
-                        isNearBottom: this.isNearBottom()
-                    });
+                    this.chatSearchCurrentIndex = (this.chatSearchCurrentIndex - 1 + this.chatSearchMatches.length) % this.chatSearchMatches.length;
                 }
+
+                this.updateSearchCounter();
+                await this.scrollToSearchMatch(this.chatSearchCurrentIndex);
             }
 
-            /**
-             * Setup scroll tracking for intelligent auto-scroll
-             */
-            setupScrollTracking() {
-                const chatMessages = document.getElementById('chatMessages');
-                if (!chatMessages || this.scrollListener) return;
+            async scrollToSearchMatch(index) {
+                if (index < 0 || index >= this.chatSearchMatches.length) return;
 
-                this.scrollListener = () => {
-                    // Clear previous timeout
-                    if (this.userScrollTimeout) {
-                        clearTimeout(this.userScrollTimeout);
+                const match = this.chatSearchMatches[index];
+                const messageId = match.messageId;
+                const messageIndex = match.messageIndex;
+
+                // Try to find the message by ID first (more reliable)
+                let messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+
+                // Fallback to index if ID doesn't work
+                if (!messageElement) {
+                    messageElement = document.querySelector(`[data-message-index="${messageIndex}"]`);
+                }
+
+                if (messageElement) {
+                    // Message is already in DOM, just scroll to it
+                    this.scrollToMessage(messageElement);
+                    this.highlightCurrentMatchById(messageId);
+                } else {
+                    // Message not loaded yet - need to load more messages
+                    // This handles the infinite scroll case
+                    await this.loadMessageById(messageId, messageIndex);
+                }
+            }
+
+            async loadMessageById(messageId, messageIndex) {
+                // Keep loading more messages until we find the target message by ID
+                let attempts = 0;
+                const maxAttempts = 10; // Prevent infinite loops
+
+                while (attempts < maxAttempts) {
+                    // Try to find by ID first
+                    let messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+
+                    if (messageElement) {
+                        // Found the message!
+                        this.scrollToMessage(messageElement);
+                        this.highlightCurrentMatchById(messageId);
+                        return;
                     }
 
-                    // Mark as user scrolling
-                    this.isUserScrolling = true;
+                    // Try to load more messages
+                    if (this.messagesPagination.hasMore && !this.messagesPagination.isLoading) {
+                        console.log(`🔄 Loading more messages to find message ${messageId}...`);
+                        await this.loadMoreMessages(this.selectedConversationId, false);
+                        attempts++;
 
-                    // Check if user scrolled back to bottom
-                    if (this.isNearBottom()) {
-                        this.autoScrollEnabled = true;
-                        console.log('📱 User scrolled to bottom, re-enabling auto-scroll');
+                        // Wait a bit for messages to render
+                        await new Promise(resolve => setTimeout(resolve, 500));
                     } else {
-                        this.autoScrollEnabled = false;
+                        // No more messages to load or already loading
+                        console.warn('Could not find message with ID', messageId, 'after', attempts, 'attempts');
+                        break;
                     }
+                }
+            }
 
-                    // Reset user scrolling flag after a delay
-                    this.userScrollTimeout = setTimeout(() => {
-                        this.isUserScrolling = false;
-                    }, 1000);
-                };
+            scrollToMessage(messageElement) {
+                if (!messageElement) {
+                    console.warn('No message element to scroll to');
+                    return;
+                }
 
-                chatMessages.addEventListener('scroll', this.scrollListener, { passive: true });
-                console.log('📱 Scroll tracking enabled for intelligent auto-scroll');
+                const messagesContainer = document.getElementById('chatMessages');
+                if (!messagesContainer) return;
+
+                // Get the absolute position of the message within the scrollable container
+                const containerTop = messagesContainer.getBoundingClientRect().top;
+                const messageTop = messageElement.getBoundingClientRect().top;
+                const containerHeight = messagesContainer.clientHeight;
+                const messageHeight = messageElement.offsetHeight;
+
+                // Calculate the current scroll position
+                const currentScroll = messagesContainer.scrollTop;
+
+                // Calculate the offset from the top of the container
+                const messageOffsetFromTop = messageTop - containerTop;
+
+                // Calculate target scroll position to center the message
+                // We want the message to be in the middle of the visible area
+                const targetScroll = currentScroll + messageOffsetFromTop - (containerHeight / 2) + (messageHeight / 2);
+
+                // Scroll to the target position
+                messagesContainer.scrollTo({
+                    top: Math.max(0, targetScroll), // Don't scroll to negative values
+                    behavior: 'smooth'
+                });
+
+                // Add a brief highlight animation to make it more visible
+                messageElement.style.transition = 'background-color 0.3s ease';
+                const originalBg = messageElement.style.backgroundColor;
+                messageElement.style.backgroundColor = 'rgba(255, 107, 53, 0.1)';
+
+                setTimeout(() => {
+                    messageElement.style.backgroundColor = originalBg;
+                    setTimeout(() => {
+                        messageElement.style.transition = '';
+                    }, 300);
+                }, 600);
             }
 
-            /**
-             * Remove scroll tracking
-             */
-            removeScrollTracking() {
-                const chatMessages = document.getElementById('chatMessages');
-                if (chatMessages && this.scrollListener) {
-                    chatMessages.removeEventListener('scroll', this.scrollListener);
-                    this.scrollListener = null;
+            highlightSearchResults(query) {
+                this.clearSearchHighlights();
+                const searchTerm = query.toLowerCase();
+                const messageElements = document.querySelectorAll('.message-content');
+
+                messageElements.forEach(element => {
+                    const text = element.textContent;
+                    if (text.toLowerCase().includes(searchTerm)) {
+                        const highlightedHTML = this.highlightText(element.innerHTML, query);
+                        element.innerHTML = highlightedHTML;
+                    }
+                });
+            }
+
+            highlightText(html, searchTerm) {
+                const text = document.createElement('div');
+                text.innerHTML = html;
+                const textContent = text.textContent;
+
+                if (!textContent.toLowerCase().includes(searchTerm.toLowerCase())) {
+                    return html;
                 }
-                
-                if (this.userScrollTimeout) {
-                    clearTimeout(this.userScrollTimeout);
-                    this.userScrollTimeout = null;
+
+                // Use regex to find all occurrences (case-insensitive)
+                const regex = new RegExp(`(${this.escapeRegex(searchTerm)})`, 'gi');
+                const newHTML = textContent.replace(regex, '<span class="message-highlight">$1</span>');
+
+                return newHTML;
+            }
+
+            highlightCurrentMatch(messageIndex) {
+                // Remove previous current highlight
+                document.querySelectorAll('.message-current-highlight').forEach(el => {
+                    el.classList.remove('message-current-highlight');
+                    el.classList.add('message-highlight');
+                });
+
+                // Add current highlight to the current match
+                const messageElement = document.querySelector(`[data-message-index="${messageIndex}"]`);
+                if (messageElement) {
+                    const firstHighlight = messageElement.querySelector('.message-highlight');
+                    if (firstHighlight) {
+                        firstHighlight.classList.remove('message-highlight');
+                        firstHighlight.classList.add('message-current-highlight');
+
+                        // Scroll the highlight into view within the message
+                        // This ensures the actual highlighted text is visible
+                        setTimeout(() => {
+                            firstHighlight.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'center',
+                                inline: 'nearest'
+                            });
+                        }, 100);
+                    }
                 }
             }
 
-            /**
-             * Escape HTML characters to prevent double-encoding issues
-             * @param {string} text - Text to escape
-             * @returns {string} Escaped text
-             */
-            escapeHtml(text) {
-                if (typeof text !== 'string') return text;
-                
-                const div = document.createElement('div');
-                div.textContent = text;
-                return div.innerHTML;
+            highlightCurrentMatchById(messageId) {
+                // Remove previous current highlight
+                document.querySelectorAll('.message-current-highlight').forEach(el => {
+                    el.classList.remove('message-current-highlight');
+                    el.classList.add('message-highlight');
+                });
+
+                // Add current highlight to the current match (find by message ID)
+                const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
+                if (messageElement) {
+                    const firstHighlight = messageElement.querySelector('.message-highlight');
+                    if (firstHighlight) {
+                        firstHighlight.classList.remove('message-highlight');
+                        firstHighlight.classList.add('message-current-highlight');
+
+                        // Scroll the highlight into view within the message
+                        // This ensures the actual highlighted text is visible
+                        setTimeout(() => {
+                            firstHighlight.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'center',
+                                inline: 'nearest'
+                            });
+                        }, 100);
+                    }
+                }
+            }
+
+            clearSearchHighlights() {
+                document.querySelectorAll('.message-highlight, .message-current-highlight').forEach(el => {
+                    const parent = el.parentNode;
+                    parent.replaceChild(document.createTextNode(el.textContent), el);
+                    parent.normalize(); // Merge adjacent text nodes
+                });
             }
 
+            updateSearchCounter(currentIndex = null, totalMatches = null, showMinCharsMessage = false) {
+                const counter = document.getElementById('chatSearchCounter');
+                const prevBtn = document.getElementById('chatSearchPrev');
+                const nextBtn = document.getElementById('chatSearchNext');
 
+                // Use provided values or fall back to instance values
+                const current = currentIndex !== null ? currentIndex : this.chatSearchCurrentIndex;
+                const total = totalMatches !== null ? totalMatches : this.chatSearchMatches.length;
 
-            filterConversations(searchTerm) {
-                const items = document.querySelectorAll('.conversation-item');
-                const term = searchTerm.toLowerCase();
-                
-                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';
+                console.log('📊 Updating counter:', {
+                    currentIndex: current,
+                    totalMatches: total,
+                    showMinCharsMessage: showMinCharsMessage
                 });
+
+                if (showMinCharsMessage) {
+                    counter.textContent = 'Min 3 chars';
+                    counter.classList.remove('has-results');
+                    prevBtn.disabled = true;
+                    nextBtn.disabled = true;
+                } else if (total === 0) {
+                    counter.textContent = '0/0';
+                    counter.classList.remove('has-results');
+                    prevBtn.disabled = true;
+                    nextBtn.disabled = true;
+                } else {
+                    counter.textContent = `${current + 1}/${total}`;
+                    counter.classList.add('has-results');
+                    prevBtn.disabled = false;
+                    nextBtn.disabled = false;
+                }
+            }
+
+            async getTotalMessageCount(conversationId) {
+                const conversation = this.conversations.find(c => c.id === conversationId);
+                return conversation ? conversation.messageCount : 0;
+            }
+
+            escapeRegex(string) {
+                return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            }
+
+            resetAdvancedSearch() {
+                // Clear all filter inputs
+                document.getElementById('filterQuery').value = '';
+                document.getElementById('filterWorkingDirectory').value = '';
+                document.getElementById('filterDateFrom').value = '';
+                document.getElementById('filterDateTo').value = '';
+                document.getElementById('filterContentSearch').value = '';
+            }
+
+            async clearAllFilters() {
+                const searchResultsInfo = document.getElementById('searchResultsInfo');
+                const searchInput = document.getElementById('searchInput');
+
+                // Clear simple search
+                searchInput.value = '';
+
+                // 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');
+
+                // Reload all conversations
+                await this.loadConversations();
             }
 
             getStateLabel(state) {
@@ -2906,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();