`;
// Heatmap tooltip
const heatmapTooltip = document.createElement('div');
heatmapTooltip.className = 'chart-tooltip';
usage.appendChild(heatmapTooltip);
usage.querySelectorAll('.heatmap-cell[data-label]').forEach(cell => {
cell.addEventListener('mouseenter', () => {
heatmapTooltip.textContent = cell.dataset.label;
heatmapTooltip.classList.add('show');
});
cell.addEventListener('mousemove', e => {
positionTooltip(heatmapTooltip, e.clientX, e.clientY);
});
cell.addEventListener('mouseleave', () => heatmapTooltip.classList.remove('show'));
cell.addEventListener('click', () => {
usage.querySelectorAll('.heatmap-cell.selected').forEach(c => c.classList.remove('selected'));
cell.classList.add('selected');
const date = cell.dataset.label.match(/on (.+)$/)?.[1] || '';
const dateKey = cell.getAttribute('data-label').split(' tokens')[0]; // not ideal
// Extract ISO date from cells array by matching position
const allCells = [...usage.querySelectorAll('.heatmap-cell[data-label]')];
const idx = allCells.indexOf(cell);
if (idx >= 0 && idx < cells.length) {
showDaySessions(cells[idx].key);
}
});
});
async function showDaySessions(dateKey) {
const panel = usage.querySelector('#day-sessions');
if (!panel) return;
const dayStart = dateKey + 'T00:00:00';
const dayEnd = dateKey + 'T23:59:59';
// Find sessions active on this day
const daySessions = state.sessions.filter(s => {
if (!s.started_at) return false;
const end = s.ended_at || s.started_at;
return s.started_at <= dayEnd && end >= dayStart;
});
// Classify each session
const classified = daySessions.map(s => {
const isNew = s.started_at.slice(0, 10) === dateKey;
let kind = 'continued'; // default: session spans this day
if (isNew) {
// Check if this project had any session before this one
const hasEarlierSession = state.sessions.some(
other => other.project === s.project && other.id !== s.id && other.started_at < s.started_at
);
kind = hasEarlierSession ? 'new-session' : 'new-workspace';
}
return { ...s, kind };
});
if (!classified.length) {
panel.innerHTML = `
${fmtTooltipDate(dateKey)} — no sessions
`;
return;
}
// Group by kind for visual hierarchy
const newWorkspaces = classified.filter(s => s.kind === 'new-workspace');
const newSessions = classified.filter(s => s.kind === 'new-session');
const continued = classified.filter(s => s.kind === 'continued');
let html = `
${fmtTooltipDate(dateKey)}
`;
if (newWorkspaces.length) {
html += `
★Created ${newWorkspaces.length} new workspace${newWorkspaces.length > 1 ? 's' : ''}
${newWorkspaces.map(s => `
`).join('')}
`;
}
if (newSessions.length) {
// Group new sessions by project
const byProject = {};
for (const s of newSessions) {
const p = s.project || '(none)';
if (!byProject[p]) byProject[p] = [];
byProject[p].push(s);
}
html += `
★Created ${newWorkspaces.length} new workspace${newWorkspaces.length > 1 ? 's' : ''}
${newWorkspaces.map(s => `
`).join('')}
`;
}
if (newSessions.length) {
const byProject = {};
for (const s of newSessions) { const p = s.project || '(none)'; if (!byProject[p]) byProject[p] = []; byProject[p].push(s); }
html += `