feat: paginate History tab to prevent resource exhaustion

[fatherlinux]

Summary

• History tab now loads 50 pomodoros at a time using cursor-based IndexedDB pagination on the start_time index
• "Load More" button appends the next page with correct date-group continuity across page boundaries
• navigateToPomodoro() auto-loads pages until the target pomodoro is found
• All mutation callers (delete, edit, sync) reset to page 1 automatically

Changes

• static/js/storage.js: Added getPomodorosPage(limit, beforeTimestamp) using IndexedDB cursor with 'prev' direction
• templates/index.html: Rewrote loadHistory() to use paginated state, added "Load More" button, updated navigateToPomodoro()

Test plan

• Empty state renders correctly (no errors, no "Load More" button)
• First page shows 50 items with date grouping
• "Load More" appends next page with correct date-group continuity
• "Load More" button hides when all data loaded
• Delete resets to page 1
• 133 existing tests pass

Closes #100

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request implements cursor-based pagination for the Pomodoro history view, introducing a new paginated database fetch method in storage.js and updating the UI in index.html to support a 'Load More' button. The review feedback highlights several critical issues: chronological ordering can break when a single day's entries span across page boundaries, an infinite loop can freeze the browser if page loading fails while searching for a specific item, duplicate requests can occur if the 'Load More' button is clicked rapidly, and records might be skipped at page boundaries due to using a non-unique index (start_time) for pagination.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

When a single day's pomodoros are split across page boundaries, descending pagination loads the newer items (evening) on page 1 and the older items (morning) on page 2. Because page 2 is appended to the end of the DOM, the older items are rendered after the newer items, completely breaking the morning-to-evening chronological order within that day (e.g., showing 13:00, 15:00, then 09:00, 11:00).

Wrapping each day's items in a container allows us to easily append and re-sort them chronologically.

                // Render and append
                const fragment = document.createDocumentFragment();
                for (const date of groupOrder) {
                    const items = grouped[date];
                    
                    // Find or create the day group container
                    let dayGroup = list.querySelector(`.day-group[data-date="${date}"]`) || fragment.querySelector(`.day-group[data-date="${date}"]`);
                    let dayItemsContainer;
                    
                    if (!dayGroup) {
                        dayGroup = document.createElement('div');
                        dayGroup.className = 'day-group';
                        dayGroup.dataset.date = date;
                        
                        const h3 = document.createElement('h3');
                        h3.textContent = date;
                        dayGroup.appendChild(h3);
                        
                        dayItemsContainer = document.createElement('div');
                        dayItemsContainer.className = 'day-items';
                        dayGroup.appendChild(dayItemsContainer);
                        
                        fragment.appendChild(dayGroup);
                    } else {
                        dayItemsContainer = dayGroup.querySelector('.day-items');
                    }
                    
                    items.forEach(p => {
                        const color = TYPE_COLORS[p.type] || '#6b7280';
                        const time = new Date(p.start_time).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: tz });
                        const safeId = escapeHtml(p.id);
                        const linkedInfo = p.linked_todo_id && historyState.todoMap[p.linked_todo_id]
                            ? ` &middot; <span style="color:var(--success);">${escapeHtml(historyState.todoMap[p.linked_todo_id])}</span>` : '';

                        const div = document.createElement('div');
                        div.className = 'pomodoro-item';
                        div.dataset.id = safeId;
                        div.dataset.startTime = p.start_time;
                        div.innerHTML = `
                            <div>
                                <span class="pomodoro-name">${escapeHtml(p.name)}</span>
                                <span class="pomodoro-type" style="background:${color}20;color:${color}">${escapeHtml(p.type)}</span>
                                <div class="pomodoro-meta">${time} - ${p.duration_minutes} min${linkedInfo}</div>
                            </div>
                            <div class="pomodoro-actions">
                                <button class="delete-btn" title="Delete">&#10005;</button>
                            </div>
                        `;
                        div.addEventListener('click', () => {
                            document.querySelectorAll('.pomodoro-item.highlighted').forEach(el => el.classList.remove('highlighted'));
                            div.classList.add('highlighted');
                            showEditModal(safeId);
                        });
                        div.querySelector('.delete-btn').addEventListener('click', (e) => {
                            e.stopPropagation();
                            deletePomodoro(safeId);
                        });
                        dayItemsContainer.appendChild(div);
                    });
                    
                    // Sort all items in this day container morning to evening
                    const sortedElements = Array.from(dayItemsContainer.children)
                        .sort((a, b) => new Date(a.dataset.startTime) - new Date(b.dataset.startTime));
                    
                    dayItemsContainer.innerHTML = '';
                    sortedElements.forEach(el => dayItemsContainer.appendChild(el));
                }
                list.appendChild(fragment);

[gemini-code-assist]

If loadHistory(false) fails or encounters an error, the error is caught and swallowed inside loadHistory's try-catch block. Since the error is not rethrown and historyState.hasMore remains true, this while loop will continue to execute indefinitely, completely freezing the browser tab.

To prevent this infinite loop, we should check if any progress was made (i.e., if historyState.lastTimestamp changed) after calling loadHistory(false) and break the loop if no new items were loaded.

Suggested change

	let item = document.querySelector(`.pomodoro-item[data-id="${CSS.escape(id)}"]`);
	// Load up to 10 more pages (500 items) to find the target — cap prevents runaway loading
	let pagesLoaded = 0;
	while (!item && historyState.hasMore && pagesLoaded < 10) {
	await loadHistory(false);
	item = document.querySelector(`.pomodoro-item[data-id="${CSS.escape(id)}"]`);
	let item = document.querySelector(`.pomodoro-item[data-id="${CSS.escape(id)}"]`);
	// If not on current page, keep loading until found or exhausted
	while (!item && historyState.hasMore) {
	const prevTimestamp = historyState.lastTimestamp;
	await loadHistory(false);
	if (historyState.lastTimestamp === prevTimestamp) {
	// Prevent infinite loop if no progress is made (e.g. on error or empty page)
	break;
	}
	item = document.querySelector(`.pomodoro-item[data-id="${CSS.escape(id)}"]`);
	}

[gemini-code-assist]

To prevent duplicate items from being loaded and rendered if a user clicks the 'Load More' button multiple times quickly, we should disable the button while the asynchronous loadHistory call is in progress.

Suggested change

	document.getElementById('history-load-more').addEventListener('click', () => loadHistory(false));
	document.getElementById('history-load-more').addEventListener('click', async (e) => {
	const btn = e.currentTarget;
	if (btn.disabled) return;
	btn.disabled = true;
	try {
	await loadHistory(false);
	} finally {
	btn.disabled = false;
	}
	});

[gemini-code-assist]

Using IDBKeyRange.upperBound(beforeTimestamp, true) on a non-unique index like start_time can cause records to be skipped at page boundaries if multiple pomodoros have the exact same start_time (which is common for imported or manually added entries). Since the upper bound is exclusive, any other pomodoros with the same timestamp as the cursor will be excluded from the next page.

Consider documenting this limitation or eventually using a compound index (e.g., [start_time, id]) to ensure unique cursor-based pagination.