@vheins/local-memory-mcp 0.4.10 → 0.4.12

package/dist/dashboard/public/app.js

@@ -1757,7 +1757,10 @@ let currentTasks = [];
 
 async function loadTasks() {
     if (!currentRepo) return;
-    
+
+    taskTimeStats = null; // Force reload
+    updateTimeStats('daily');
+
     // Reset pagination
     taskPagination.backlog = { page: 1, pageSize: 20, hasMore: true, loading: false };
     taskPagination.todo = { page: 1, pageSize: 20, hasMore: true, loading: false };
@@ -1903,6 +1906,222 @@ function renderTaskCards(containerId, tasks, clear = false) {
     }
 }
 
+let taskTimeStats = null;
+
+async function updateTimeStats(period) {
+    const btns = ['daily', 'weekly', 'monthly', 'overall'];
+    btns.forEach(p => {
+        const btn = document.getElementById(`${p}StatsBtn`);
+        if (btn) {
+            if (p === period) {
+                btn.classList.add('bg-white', 'dark:bg-slate-800', 'shadow-sm', 'text-sky-600', 'dark:text-sky-400');
+                btn.classList.remove('text-slate-500', 'hover:text-slate-700', 'dark:hover:text-slate-300');
+            } else {
+                btn.classList.remove('bg-white', 'dark:bg-slate-800', 'shadow-sm', 'text-sky-600', 'dark:text-sky-400');
+                btn.classList.add('text-slate-500', 'hover:text-slate-700', 'dark:hover:text-slate-300');
+            }
+        }
+    });
+
+    const labels = {
+        daily: 'Today',
+        weekly: 'This Week',
+        monthly: 'This Month',
+        overall: 'Overall'
+    };
+
+    for (let i = 1; i <= 4; i++) {
+        const el = document.getElementById(`statsPeriodLabel${i}`);
+        if (el) {
+            const currentText = el.textContent;
+            const type = currentText.split(' ').slice(1).join(' ');
+            el.textContent = `${labels[period]} ${type}`;
+        }
+    }
+
+    try {
+        if (!taskTimeStats) {
+            const resp = await fetch(`/api/tasks/stats/time?repo=${encodeURIComponent(currentRepo)}`);
+            taskTimeStats = await resp.json();
+        }
+
+        const stats = taskTimeStats[period];
+        document.getElementById('todayCompletedTasksCount').textContent = stats.completed;
+        document.getElementById('todayAddedTasksCount').textContent = stats.added;
+        document.getElementById('todayTokensTasksCount').textContent = stats.tokens.toLocaleString();
+        
+        const mins = Math.round(stats.avgDuration / 60);
+        document.getElementById('todayAvgTimeTasksCount').textContent = `${mins}m`;
+    } catch (err) {
+        console.error('Failed to load time stats:', err);
+    }
+}
+
+async function exportAllData() {
+    try {
+        const resp = await fetch(`/api/export?repo=${encodeURIComponent(currentRepo)}`);
+        const data = await resp.json();
+        
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `mcp-export-${currentRepo.replace(/\//g, '-')}-${new Date().toISOString().split('T')[0]}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        
+        showToast('Export successful', 'success');
+    } catch (err) {
+        showToast('Export failed: ' + err.message, 'error');
+    }
+}
+
+async function updateTaskStatus(id, newStatus, comment = '') {
+    try {
+        const resp = await fetch(`/api/tasks/${id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status: newStatus, comment })
+        });
+        
+        if (resp.ok) {
+            showToast(`Task moved to ${newStatus}`, 'success');
+            loadTasks();
+            showTaskDetail(id); // Refresh detail view
+        } else {
+            const err = await resp.json();
+            throw new Error(err.error || 'Update failed');
+        }
+    } catch (err) {
+        showToast('Failed to update task: ' + err.message, 'error');
+    }
+}
+
+let isEditingTask = false;
+async function toggleTaskEdit(id) {
+    if (isEditingTask) {
+        await saveTaskEdits(id);
+    } else {
+        enterTaskEditMode();
+    }
+}
+
+function enterTaskEditMode() {
+    isEditingTask = true;
+    const titleEl = document.getElementById('taskDetailTitle');
+    const descEl = document.getElementById('taskDetailDesc');
+    const editBtn = document.getElementById('taskEditBtn');
+    
+    if (titleEl) {
+        const titleText = titleEl.textContent;
+        titleEl.innerHTML = `<input type="text" id="editTaskTitle" class="w-full p-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-lg font-bold" value="${escapeHtml(titleText)}">`;
+    }
+    
+    if (descEl) {
+        const descText = descEl.dataset.raw || '';
+        descEl.innerHTML = `<textarea id="editTaskDesc" class="w-full p-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm min-h-[150px] font-mono">${escapeHtml(descText)}</textarea>`;
+    }
+    
+    if (editBtn) {
+        editBtn.innerHTML = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Save`;
+        editBtn.classList.add('bg-emerald-500', 'text-white');
+        editBtn.classList.remove('bg-white', 'dark:bg-slate-800');
+    }
+}
+
+async function saveTaskEdits(id) {
+    const newTitle = document.getElementById('editTaskTitle').value;
+    const newDesc = document.getElementById('editTaskDesc').value;
+    
+    try {
+        const resp = await fetch(`/api/tasks/${id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title: newTitle, description: newDesc })
+        });
+        
+        if (resp.ok) {
+            showToast('Task updated', 'success');
+            isEditingTask = false;
+            loadTasks();
+            showTaskDetail(id);
+        } else {
+            const err = await resp.json();
+            throw new Error(err.error || 'Update failed');
+        }
+    } catch (err) {
+        showToast('Failed to save changes: ' + err.message, 'error');
+    }
+}
+
+async function addTaskComment(taskId) {
+    const commentInput = document.getElementById('newTaskComment');
+    const comment = commentInput.value.trim();
+    if (!comment) return;
+    
+    try {
+        const resp = await fetch(`/api/tasks/${taskId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ comment })
+        });
+        
+        if (resp.ok) {
+            commentInput.value = '';
+            showTaskDetail(taskId);
+        } else {
+            const err = await resp.json();
+            throw new Error(err.error || 'Failed to add comment');
+        }
+    } catch (err) {
+        showToast(err.message, 'error');
+    }
+}
+
+async function editTaskComment(commentId, taskId) {
+    const commentEl = document.getElementById(`comment-body-${commentId}`);
+    const currentText = commentEl.dataset.raw || '';
+    
+    const newText = prompt('Edit comment:', currentText);
+    if (newText === null || newText === currentText) return;
+    
+    try {
+        const resp = await fetch(`/api/task-comments/${commentId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ comment: newText })
+        });
+        
+        if (resp.ok) {
+            showTaskDetail(taskId);
+        } else {
+            throw new Error('Failed to update comment');
+        }
+    } catch (err) {
+        showToast(err.message, 'error');
+    }
+}
+
+async function deleteTaskComment(commentId, taskId) {
+    if (!confirm('Are you sure you want to delete this comment?')) return;
+    
+    try {
+        const resp = await fetch(`/api/task-comments/${commentId}`, {
+            method: 'DELETE'
+        });
+        
+        if (resp.ok) {
+            showTaskDetail(taskId);
+        } else {
+            throw new Error('Failed to delete comment');
+        }
+    } catch (err) {
+        showToast(err.message, 'error');
+    }
+}
+
 async function showTaskDetail(id) {
     const drawer = document.getElementById('memoryDrawer');
     const title = document.getElementById('drawerTitle');
@@ -1919,11 +2138,10 @@ async function showTaskDetail(id) {
             <div class="skeleton h-64 w-full"></div>
         </div>
     `;
-    
+
     drawer.classList.remove('hidden');
     document.body.classList.add('drawer-open');
-    
-    // Trigger slide-in animation
+
     setTimeout(() => {
         const aside = document.getElementById('drawerAside');
         if (aside) {
@@ -1938,12 +2156,37 @@ async function showTaskDetail(id) {
         if (!response.ok) throw new Error(task.error || 'Failed to load task');
 
         title.textContent = `Task: ${task.task_code}`;
-        
+        isEditingTask = false;
+
+        const statusButtons = {
+            backlog: ['pending', 'blocked'],
+            pending: ['in_progress', 'backlog', 'blocked'],
+            in_progress: ['pending', 'backlog', 'blocked'],
+            blocked: ['pending', 'backlog'],
+            completed: ['pending']
+        };
+
+        const currentButtons = statusButtons[task.status] || [];
+        const actionButtonsHtml = currentButtons.map(s => `
+            <button onclick="updateTaskStatus('${task.id}', '${s}')" class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800">
+                Set to ${formatTaskStatusLabel(s)}
+            </button>
+        `).join('');
+
         body.innerHTML = `
             <div class="space-y-6">
-                <div class="p-5 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
-                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">Title</div>
-                    <h3 class="text-xl font-bold text-slate-900 dark:text-white leading-tight">${escapeHtml(task.title)}</h3>
+                <div class="flex items-center justify-between gap-4">
+                    <div class="flex-1 p-5 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
+                        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Title</div>
+                        <h3 id="taskDetailTitle" class="text-xl font-bold text-slate-900 dark:text-white leading-tight">${escapeHtml(task.title)}</h3>
+                    </div>
+                    <button id="taskEditBtn" onclick="toggleTaskEdit('${task.id}')" class="p-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm hover:shadow-md transition-all group">
+                        <svg class="w-5 h-5 text-slate-400 group-hover:text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                    </button>
+                </div>
+
+                <div class="flex flex-wrap gap-2 px-1">
+                    ${actionButtonsHtml}
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -1978,12 +2221,12 @@ async function showTaskDetail(id) {
 
                 <div class="p-5 bg-white dark:bg-slate-800/40 rounded-2xl border border-slate-100 dark:border-slate-800">
                     <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">Description</div>
-                    <div class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed markdown-body">
+                    <div id="taskDetailDesc" data-raw="${escapeHtml(task.description || '')}" class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed markdown-body">
                         ${task.description ? renderMarkdown(task.description) : '<span class="italic opacity-50">No description provided</span>'}
                     </div>
                 </div>
 
-                ${renderTaskComments(task.comments)}
+                ${renderTaskComments(task.comments, task.id)}
 
                 ${task.doc_path ? `
                     <div class="p-4 bg-sky-500/5 dark:bg-sky-500/10 rounded-xl border border-sky-500/20">
@@ -2026,52 +2269,67 @@ function formatTaskStatusLabel(status) {
         .replace(/\b\w/g, (char) => char.toUpperCase());
 }
 
-function renderTaskComments(comments) {
-    if (!comments || comments.length === 0) {
-        return `
-            <div class="p-5 bg-white dark:bg-slate-800/40 rounded-2xl border border-slate-100 dark:border-slate-800">
-                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">History</div>
-                <div class="text-sm italic text-slate-400">No historical comments yet</div>
-            </div>
-        `;
-    }
+function renderTaskComments(comments, taskId) {
+    const commentsList = (!comments || comments.length === 0) ? `
+        <div class="text-sm italic text-slate-400 py-4">No historical comments yet</div>
+    ` : `
+        <div class="space-y-4 mt-4">
+            ${comments.map((item) => `
+                <div class="relative pl-5">
+                    <div class="absolute left-0 top-1.5 h-full w-px bg-slate-200 dark:bg-slate-700"></div>
+                    <div class="absolute left-[-4px] top-1.5 w-2.5 h-2.5 rounded-full bg-sky-500 shadow-[0_0_0_4px_rgba(14,165,233,0.12)]"></div>
+                    <div class="rounded-xl border border-slate-100 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-900/40 p-4 group/comment">
+                        <div class="flex flex-wrap items-center gap-2 mb-2">
+                            <span class="text-xs font-bold text-slate-800 dark:text-slate-100">${escapeHtml(item.agent || 'unknown')}</span>
+                            <span class="text-[10px] text-slate-400">•</span>
+                            <span class="text-[11px] text-slate-500 dark:text-slate-400">${escapeHtml(item.model || 'unknown')}</span>
+                            <span class="ml-auto text-[10px] text-slate-400">${new Date(item.created_at).toLocaleString()}</span>
+
+                            <div class="hidden group-hover/comment:flex items-center gap-1 ml-2">
+                                <button onclick="editTaskComment('${item.id}', '${taskId}')" class="p-1 text-slate-400 hover:text-sky-500 transition-colors" title="Edit comment">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                                </button>
+                                <button onclick="deleteTaskComment('${item.id}', '${taskId}')" class="p-1 text-slate-400 hover:text-rose-500 transition-colors" title="Delete comment">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                                </button>
+                            </div>
+                        </div>
+                        ${(item.previous_status || item.next_status) ? `
+                            <div class="flex flex-wrap items-center gap-2 mb-3 text-[10px] font-bold uppercase tracking-wide">
+                                <span class="px-2 py-1 rounded-lg bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300">${escapeHtml(formatTaskStatusLabel(item.previous_status || 'note'))}</span>
+                                <span class="text-slate-400">→</span>
+                                <span class="px-2 py-1 rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20">${escapeHtml(formatTaskStatusLabel(item.next_status || 'note'))}</span>
+                            </div>
+                        ` : ''}
+                        <div id="comment-body-${item.id}" data-raw="${escapeHtml(item.comment)}" class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed markdown-body">
+                            ${renderMarkdown(item.comment)}
+                        </div>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
 
     return `
         <div class="p-5 bg-white dark:bg-slate-800/40 rounded-2xl border border-slate-100 dark:border-slate-800">
             <div class="flex items-center justify-between gap-3 mb-4">
-                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">History</div>
-                <div class="text-[10px] text-slate-400">${comments.length} comment${comments.length === 1 ? '' : 's'}</div>
+                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Discussion & History</div>
+                <div class="text-[10px] text-slate-400">${comments ? comments.length : 0} item${comments && comments.length === 1 ? '' : 's'}</div>
             </div>
-            <div class="space-y-4">
-                ${comments.map((item) => `
-                    <div class="relative pl-5">
-                        <div class="absolute left-0 top-1.5 h-full w-px bg-slate-200 dark:bg-slate-700"></div>
-                        <div class="absolute left-[-4px] top-1.5 w-2.5 h-2.5 rounded-full bg-sky-500 shadow-[0_0_0_4px_rgba(14,165,233,0.12)]"></div>
-                        <div class="rounded-xl border border-slate-100 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-900/40 p-4">
-                            <div class="flex flex-wrap items-center gap-2 mb-2">
-                                <span class="text-xs font-bold text-slate-800 dark:text-slate-100">${escapeHtml(item.agent || 'unknown')}</span>
-                                <span class="text-[10px] text-slate-400">•</span>
-                                <span class="text-[11px] text-slate-500 dark:text-slate-400">${escapeHtml(item.model || 'unknown')}</span>
-                                <span class="ml-auto text-[10px] text-slate-400">${new Date(item.created_at).toLocaleString()}</span>
-                            </div>
-                            ${(item.previous_status || item.next_status) ? `
-                                <div class="flex flex-wrap items-center gap-2 mb-3 text-[10px] font-bold uppercase tracking-wide">
-                                    <span class="px-2 py-1 rounded-lg bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300">${escapeHtml(formatTaskStatusLabel(item.previous_status || 'note'))}</span>
-                                    <span class="text-slate-400">→</span>
-                                    <span class="px-2 py-1 rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20">${escapeHtml(formatTaskStatusLabel(item.next_status || 'note'))}</span>
-                                </div>
-                            ` : ''}
-                            <div class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed markdown-body">
-                                ${renderMarkdown(item.comment)}
-                            </div>
-                        </div>
-                    </div>
-                `).join('')}
+
+            <div class="mb-6">
+                <textarea id="newTaskComment" placeholder="Add a comment (Markdown supported)..." class="w-full p-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-sky-500/50 outline-none transition-all min-h-[80px]"></textarea>
+                <div class="flex justify-end mt-2">
+                    <button onclick="addTaskComment('${taskId}')" class="px-4 py-1.5 bg-sky-500 hover:bg-sky-600 text-white text-xs font-bold rounded-lg transition-all shadow-sm shadow-sky-500/20">Post Comment</button>
+                </div>
+            </div>
+
+            <div class="border-t border-slate-100 dark:border-slate-700/50 pt-2">
+                ${commentsList}
             </div>
         </div>
     `;
 }
-
 let currentTab = localStorage.getItem('activeTab') || 'dashboard';
 
 function syncTabIndicatorTheme(indicator) {

package/dist/dashboard/public/index.html

@@ -443,6 +443,30 @@
 
 
         /* Markdown body styles for Full Content section */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        .snap-x {
+            scroll-snap-type: x mandatory;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        .snap-center {
+            scroll-snap-align: center;
+        }
+
+        /* Responsive Kanban Board */
+        @media (max-width: 768px) {
+            #taskBoard {
+                margin-left: -1rem;
+                margin-right: -1rem;
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+        }
+
         .markdown-body {
             font-size: 0.875rem;
             line-height: 1.75;
@@ -1381,6 +1405,10 @@
                         </div>
                     </div>
                     <div class="flex items-center gap-2">
+                        <button onclick="exportAllData()" class="btn-refresh bg-amber-500! border-amber-600! shadow-amber-500/20!">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
+                            Export All
+                        </button>
                         <button onclick="showAddTaskModal()" class="btn-add-task">
                             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                             Add Task
@@ -1397,58 +1425,58 @@
                     </div>
                 </div>
 
-                <!-- Task Context Today's Stats -->
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4">
-                        <div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-600">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                        </div>
-                        <div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Completed</div>
-                            <div id="todayCompletedTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
-                        </div>
+                <!-- Task Context Stats with Tabs -->
+                <div class="mb-8">
+                    <div class="flex items-center gap-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit mb-4">
+                        <button onclick="updateTimeStats('daily')" id="dailyStatsBtn" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all bg-white dark:bg-slate-800 shadow-sm text-sky-600 dark:text-sky-400">Daily</button>
+                        <button onclick="updateTimeStats('weekly')" id="weeklyStatsBtn" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">Weekly</button>
+                        <button onclick="updateTimeStats('monthly')" id="monthlyStatsBtn" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">Monthly</button>
+                        <button onclick="updateTimeStats('overall')" id="overallStatsBtn" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">Overall</button>
                     </div>
-                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4">
-                        <div class="w-10 h-10 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-600">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
-                        </div>
-                        <div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Added</div>
-                            <div id="todayAddedTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
-                        </div>
-                    </div>
-                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4">
-                        <div class="w-10 h-10 rounded-full bg-sky-500/10 flex items-center justify-center text-sky-600">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
-                        </div>
-                        <div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Processed</div>
-                            <div id="todayProcessedTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
-                        </div>
-                    </div>
-                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4">
-                        <div class="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-600">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4 shadow-sm">
+                            <div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-600">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                            </div>
+                            <div>
+                                <div id="statsPeriodLabel1" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Completed</div>
+                                <div id="todayCompletedTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
+                            </div>
                         </div>
-                        <div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Tokens</div>
-                            <div id="todayTokensTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
+                        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4 shadow-sm">
+                            <div class="w-10 h-10 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-600">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                            </div>
+                            <div>
+                                <div id="statsPeriodLabel2" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Added</div>
+                                <div id="todayAddedTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4">
-                        <div class="w-10 h-10 rounded-full bg-rose-500/10 flex items-center justify-center text-rose-600">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4 shadow-sm">
+                            <div class="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-600">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                            </div>
+                            <div>
+                                <div id="statsPeriodLabel3" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Tokens</div>
+                                <div id="todayTokensTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0</div>
+                            </div>
                         </div>
-                        <div>
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Avg Time</div>
-                            <div id="todayAvgTimeTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0m</div>
+                        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4 flex items-center gap-4 shadow-sm">
+                            <div class="w-10 h-10 rounded-full bg-sky-500/10 flex items-center justify-center text-sky-600">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                            </div>
+                            <div>
+                                <div id="statsPeriodLabel4" class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today Avg Time</div>
+                                <div id="todayAvgTimeTasksCount" class="text-xl font-black text-slate-700 dark:text-slate-200">0m</div>
+                            </div>
                         </div>
                     </div>
                 </div>
 
-                <div id="taskBoard" class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <div id="taskBoard" class="flex overflow-x-auto pb-6 md:grid md:grid-cols-4 gap-6 snap-x custom-scrollbar">
                     <!-- Column: Backlog -->
-                    <div class="flex flex-col gap-4">
+                    <div class="flex flex-col gap-4 flex-shrink-0 w-[85vw] md:w-auto snap-center">
                         <div class="flex items-center justify-between px-2">
                             <h3 class="font-bold text-slate-400 uppercase tracking-wider text-xs">Backlog</h3>
                             <span id="backlogCount" class="bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 px-2 py-0.5 rounded-full text-[10px] font-bold">0</span>
@@ -1456,7 +1484,7 @@
                         <div id="backlogTasks" class="space-y-4 min-h-[200px] max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar"></div>
                     </div>
                     <!-- Column: Todo -->
-                    <div class="flex flex-col gap-4">
+                    <div class="flex flex-col gap-4 flex-shrink-0 w-[85vw] md:w-auto snap-center">
                         <div class="flex items-center justify-between px-2">
                             <h3 class="font-bold text-gray-500 uppercase tracking-wider text-xs">To Do</h3>
                             <span id="todoCount" class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 px-2 py-0.5 rounded-full text-[10px] font-bold">0</span>
@@ -1464,7 +1492,7 @@
                         <div id="todoTasks" class="space-y-4 min-h-[200px] max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar"></div>
                     </div>
                     <!-- Column: In Progress -->
-                    <div class="flex flex-col gap-4">
+                    <div class="flex flex-col gap-4 flex-shrink-0 w-[85vw] md:w-auto snap-center">
                         <div class="flex items-center justify-between px-2">
                             <h3 class="font-bold text-sky-500 uppercase tracking-wider text-xs">In Progress</h3>
                             <span id="inProgressCount" class="bg-sky-100 dark:bg-sky-900/40 text-sky-600 dark:text-sky-400 px-2 py-0.5 rounded-full text-[10px] font-bold">0</span>
@@ -1472,7 +1500,7 @@
                         <div id="inProgressTasks" class="space-y-4 min-h-[200px] max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar"></div>
                     </div>
                     <!-- Column: Completed -->
-                    <div class="flex flex-col gap-4">
+                    <div class="flex flex-col gap-4 flex-shrink-0 w-[85vw] md:w-auto snap-center">
                         <div class="flex items-center justify-between px-2">
                             <h3 class="font-bold text-emerald-500 uppercase tracking-wider text-xs">Completed</h3>
                             <span id="completedCount" class="bg-emerald-100 dark:bg-emerald-900/40 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 rounded-full text-[10px] font-bold">0</span>