@vheins/local-memory-mcp 0.2.1 → 0.3.14

package/dist/capabilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.d.ts","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAoBxB,CAAC"}
+{"version":3,"file":"capabilities.d.ts","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAoBxB,CAAC"}

package/dist/capabilities.js

@@ -1,8 +1,23 @@
+import { fileURLToPath } from "url";
+import path from "path";
+import fs from "fs";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pkgPath = path.join(__dirname, "../package.json");
+let pkgVersion = "0.1.0";
+try {
+    if (fs.existsSync(pkgPath)) {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+        pkgVersion = pkg.version;
+    }
+}
+catch (e) {
+    // Fallback to default version if reading fails
+}
 // MCP Server Capabilities
 export const CAPABILITIES = {
     serverInfo: {
         name: "mcp-memory-local",
-        version: "0.1.0"
+        version: pkgVersion
     },
     capabilities: {
         resources: {

package/dist/capabilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.js","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,IAAI,EAAE,kBAAkB;QACxB,OAAO,EAAE,OAAO;KACjB;IACD,YAAY,EAAE;QACZ,SAAS,EAAE;YACT,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,IAAI;SAChB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;SACX;QACD,OAAO,EAAE;YACP,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;SACV;KACF;CACF,CAAC"}
+{"version":3,"file":"capabilities.js","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,IAAI,CAAC;AAEpB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/D,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AACxD,IAAI,UAAU,GAAG,OAAO,CAAC;AAEzB,IAAI,CAAC;IACH,IAAI,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QAC3B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;QACzD,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC;IAC3B,CAAC;AACH,CAAC;AAAC,OAAO,CAAC,EAAE,CAAC;IACX,+CAA+C;AACjD,CAAC;AAED,0BAA0B;AAC1B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,IAAI,EAAE,kBAAkB;QACxB,OAAO,EAAE,UAAU;KACpB;IACD,YAAY,EAAE;QACZ,SAAS,EAAE;YACT,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,IAAI;SAChB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;SACX;QACD,OAAO,EAAE;YACP,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;SACV;KACF;CACF,CAAC"}

package/dist/dashboard/public/app.js

@@ -6,6 +6,11 @@ let totalPages = 1;
 let totalItems = 0;
 let selectedIds = new Set();
 let currentPaginatedData = [];
+let taskPagination = {
+    todo: { page: 1, pageSize: 20, hasMore: true, loading: false },
+    in_progress: { page: 1, pageSize: 20, hasMore: true, loading: false },
+    completed: { page: 1, pageSize: 20, hasMore: true, loading: false }
+};
 let charts = {};
 let lastSyncTime = Date.now();
 let countdownSeconds = 30;
@@ -428,6 +433,11 @@ async function setCurrentRepo(repo) {
     currentPage = 1;
     recentActionsPage = 1;
     selectedIds.clear();
+    
+    // Clear search input on repo change
+    const taskSearch = document.getElementById('taskSearchInput');
+    if (taskSearch) taskSearch.value = '';
+
     localStorage.setItem('selectedRepo', currentRepo);
     renderRepoSidebar();
     closeRepoSidebarDrawer();
@@ -435,6 +445,7 @@ async function setCurrentRepo(repo) {
         loadStats(),
         loadMemories(),
         loadRecentActions(),
+        loadTasks()
     ]);
     syncStickyOffsets();
 }
@@ -600,6 +611,21 @@ async function loadStats() {
         document.getElementById('mistakeCount').textContent = data.byType?.mistake || 0;
         document.getElementById('patternCount').textContent = data.byType?.pattern || 0;
 
+        // Fill Task stats
+        if (data.taskStats) {
+            document.getElementById('totalTasks').textContent = data.taskStats.total || 0;
+            document.getElementById('todoTasksCount').textContent = data.taskStats.todo || 0;
+            document.getElementById('inProgressTasksCount').textContent = data.taskStats.inProgress || 0;
+            document.getElementById('completedTasksCount').textContent = data.taskStats.completed || 0;
+            
+            document.getElementById('todoStatCount').textContent = data.taskStats.todo || 0;
+            document.getElementById('inProgressStatCount').textContent = data.taskStats.inProgress || 0;
+            document.getElementById('completedStatCount').textContent = data.taskStats.completed || 0;
+            document.getElementById('blockedStatCount').textContent = data.taskStats.blocked || 0;
+            
+            updateTaskStatusChart(data.taskStats);
+        }
+
         updateTypeChart(data.byType);
         updateTimeSeriesChart(data.timeSeries || {});
         updateScatterChart(data.scatterData || []);
@@ -655,6 +681,51 @@ function updateTypeChart(byType) {
     });
 }
 
+function updateTaskStatusChart(taskStats) {
+    const ctx = document.getElementById('taskStatusChart');
+    if (!window.Chart || !ctx) return;
+    if (charts.taskStatusChart) charts.taskStatusChart.destroy();
+
+    const isDark = document.documentElement.classList.contains('dark');
+    const counts = [
+        taskStats?.todo || 0,
+        taskStats?.inProgress || 0,
+        taskStats?.completed || 0,
+        taskStats?.blocked || 0
+    ];
+
+    charts.taskStatusChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: ['To Do', 'In Progress', 'Completed', 'Blocked'],
+            datasets: [{
+                data: counts,
+                backgroundColor: ['#94a3b8', '#38bdf8', '#10b981', '#fb7185'],
+                borderWidth: 2,
+                borderColor: isDark ? '#1e293b' : '#ffffff',
+                hoverOffset: 12
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            cutout: '68%',
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: isDark ? '#1e293b' : '#ffffff',
+                    titleColor: isDark ? '#f8fafc' : '#1e293b',
+                    bodyColor: isDark ? '#94a3b8' : '#64748b',
+                    borderColor: isDark ? '#334155' : '#e2e8f0',
+                    borderWidth: 1,
+                    padding: 10,
+                    cornerRadius: 10
+                }
+            }
+        }
+    });
+}
+
 function updateTopMemoriesChart(memories = []) {
     const ctx = document.getElementById('topMemoriesChart');
     if (!window.Chart) {
@@ -1089,6 +1160,7 @@ function renderTable(memories) {
                         <td class="p-3">
                             <div class="flex flex-col">
                                 <span class="text-[10px] font-bold text-sky-600 dark:text-sky-400 truncate max-w-[100px]" title="${m.agent || 'unknown'}">${m.agent || 'unknown'}</span>
+                                <span class="text-[9px] font-medium text-slate-500 dark:text-slate-400 truncate max-w-[100px]" title="${m.role || 'unknown'}">${m.role || 'unknown'}</span>
                                 <span class="text-[9px] text-gray-400 dark:text-gray-500 truncate max-w-[100px]" title="${m.model || 'unknown'}">${m.model || 'unknown'}</span>
                             </div>
                         </td>
@@ -1589,47 +1661,103 @@ let currentTasks = [];
 
 async function loadTasks() {
     if (!currentRepo) return;
+    
+    // Reset pagination
+    taskPagination.todo = { page: 1, pageSize: 20, hasMore: true, loading: false };
+    taskPagination.in_progress = { page: 1, pageSize: 20, hasMore: true, loading: false };
+    taskPagination.completed = { page: 1, pageSize: 20, hasMore: true, loading: false };
+
+    // Clear containers
+    document.getElementById('todoTasks').innerHTML = '';
+    document.getElementById('inProgressTasks').innerHTML = '';
+    document.getElementById('completedTasks').innerHTML = '';
+
+    await Promise.all([
+        loadTaskCategory('pending,blocked,canceled'),
+        loadTaskCategory('in_progress'),
+        loadTaskCategory('completed')
+    ]);
+    
+    setupTaskScrollListeners();
+}
+
+async function loadTaskCategory(status) {
+    const category = (status.includes('pending') || status.includes('blocked') || status.includes('canceled')) ? 'todo' : (status === 'in_progress' ? 'in_progress' : 'completed');
+    const pag = taskPagination[category];
+    
+    if (!pag.hasMore || pag.loading) return;
+    
+    pag.loading = true;
+    const containerId = { todo: 'todoTasks', in_progress: 'inProgressTasks', completed: 'completedTasks' }[category];
+    const container = document.getElementById(containerId);
+    
+    // Show loading indicator
+    const loadingId = `loading-${category}`;
+    if (!document.getElementById(loadingId)) {
+        const loader = document.createElement('div');
+        loader.id = loadingId;
+        loader.className = 'py-4 text-center text-gray-400 text-[10px] animate-pulse w-full';
+        loader.textContent = 'Loading more...';
+        container.appendChild(loader);
+    }
+
     try {
-        const response = await fetch(`/api/tasks?repo=${encodeURIComponent(currentRepo)}`);
+        const searchInput = document.getElementById('taskSearchInput');
+        const searchTerm = searchInput ? encodeURIComponent(searchInput.value.trim()) : '';
+        const response = await fetch(`/api/tasks?repo=${encodeURIComponent(currentRepo)}&status=${status}&page=${pag.page}&pageSize=${pag.pageSize}&search=${searchTerm}`);
         const data = await response.json();
-        currentTasks = data.tasks || [];
-        renderTasks();
+        
+        const tasks = data.tasks || [];
+        
+        // Remove loader
+        const loader = document.getElementById(loadingId);
+        if (loader) loader.remove();
+
+        if (tasks.length < pag.pageSize) {
+            pag.hasMore = false;
+        }
+
+        renderTaskCards(containerId, tasks, pag.page === 1);
+        pag.page++;
     } catch (err) {
-        console.error('Failed to load tasks:', err);
+        console.error(`Failed to load ${category} tasks:`, err);
+    } finally {
+        pag.loading = false;
     }
 }
 
-function renderTasks() {
-    if (!document.getElementById('todoTasks')) return;
-    
-    const todoTasks = currentTasks.filter(t => t.status === 'pending' || t.status === 'blocked');
-    const inProgressTasks = currentTasks.filter(t => t.status === 'in_progress');
-    const completedTasks = currentTasks.filter(t => t.status === 'completed');
-
-    document.getElementById('todoCount').textContent = todoTasks.length;
-    document.getElementById('inProgressCount').textContent = inProgressTasks.length;
-    document.getElementById('completedCount').textContent = completedTasks.length;
-
-    renderTaskColumn('todoTasks', todoTasks);
-    renderTaskColumn('inProgressTasks', inProgressTasks);
-    renderTaskColumn('completedTasks', completedTasks);
+function setupTaskScrollListeners() {
+    ['todoTasks', 'inProgressTasks', 'completedTasks'].forEach(id => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        
+        el.onscroll = () => {
+            if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
+                const category = id === 'todoTasks' ? 'todo' : (id === 'inProgressTasks' ? 'in_progress' : 'completed');
+                const status = category === 'todo' ? 'pending,blocked,canceled' : (category === 'in_progress' ? 'in_progress' : 'completed');
+                loadTaskCategory(status);
+            }
+        };
+    });
 }
 
-function renderTaskColumn(id, tasks) {
-    const container = document.getElementById(id);
+function renderTaskCards(containerId, tasks, clear = false) {
+    const container = document.getElementById(containerId);
     if (!container) return;
-    
-    if (!tasks || tasks.length === 0) {
+
+    if (clear && (!tasks || tasks.length === 0)) {
         container.innerHTML = '<div class="text-center py-8 text-gray-400 text-xs italic bg-gray-50/50 dark:bg-gray-900/20 rounded-xl border border-dashed border-gray-200 dark:border-gray-700">No tasks</div>';
         return;
     }
 
-    container.innerHTML = tasks.map(t => `
-        <div class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-sm border border-gray-100 dark:border-gray-600 hover:shadow-md transition-all group">
+    const html = tasks.map(t => `
+        <div onclick="showTaskDetail('${t.id}')" class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-sm border border-gray-100 dark:border-gray-600 hover:shadow-md transition-all group cursor-pointer">
             <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center gap-2">
                     <span class="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-[10px] font-bold text-gray-600 dark:text-gray-400 font-mono border border-gray-200 dark:border-gray-700">${t.task_code}</span>
                     <span class="text-[10px] font-bold uppercase tracking-wider text-gray-400">${t.phase}</span>
+                    ${t.status === 'blocked' ? '<span class="px-1 py-0.5 rounded bg-red-500 text-white text-[8px] font-bold uppercase">Blocked</span>' : ''}
+                    ${t.status === 'canceled' ? '<span class="px-1 py-0.5 rounded bg-slate-500 text-white text-[8px] font-bold uppercase">Canceled</span>' : ''}
                 </div>
                 <div class="flex items-center gap-1">
                     ${t.priority >= 4 ? '<span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>' : ''}
@@ -1637,7 +1765,25 @@ function renderTaskColumn(id, tasks) {
                 </div>
             </div>
             <h4 class="font-bold text-sm text-gray-900 dark:text-gray-100 mb-1">${escapeHtml(t.title)}</h4>
-            <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mb-3">${escapeHtml(t.description || '')}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mb-2">${escapeHtml(t.description || '')}</p>
+            
+            ${t.doc_path ? `
+                <div class="mb-3" onclick="event.stopPropagation()">
+                    <a href="${t.doc_path.startsWith('http') ? t.doc_path : '#'}" target="_blank" class="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-[10px] text-slate-500 dark:text-gray-400 hover:text-sky-600 transition-colors">
+                        <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                        <span class="truncate max-w-[150px]">${escapeHtml(t.doc_path)}</span>
+                    </a>
+                </div>
+            ` : ''}
+
+            <div class="flex items-center gap-2 mb-3">
+                <div class="px-1.5 py-0.5 rounded bg-sky-50 dark:bg-sky-900/30 border border-sky-100 dark:border-sky-800 flex items-center gap-1">
+                    <span class="text-[9px] font-bold text-sky-600 dark:text-sky-400">${escapeHtml(t.agent || 'unknown')}</span>
+                    <span class="text-[8px] text-sky-400 dark:text-sky-600">|</span>
+                    <span class="text-[9px] font-medium text-sky-500 dark:text-sky-500">${escapeHtml(t.role || 'unknown')}</span>
+                </div>
+            </div>
+
             ${t.depends_on ? `
                 <div class="mt-2 pt-2 border-t border-gray-50 dark:border-gray-600 flex items-center gap-1.5">
                     <svg class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
@@ -1646,10 +1792,117 @@ function renderTaskColumn(id, tasks) {
             ` : ''}
             <div class="mt-3 flex items-center justify-between">
                 <span class="text-[10px] font-mono text-gray-400">${t.id.substring(0, 8)}</span>
-                <span class="text-[10px] text-gray-400">${formatDate(t.created_at)}</span>
+                <span class="text-[10px] text-gray-400">${t.status === 'completed' && t.finished_at ? 'Done ' + formatDate(t.finished_at) : formatDate(t.created_at)}</span>
             </div>
         </div>
     `).join('');
+
+    if (clear) {
+        container.innerHTML = html;
+    } else {
+        container.insertAdjacentHTML('beforeend', html);
+    }
+}
+
+async function showTaskDetail(id) {
+    const drawer = document.getElementById('memoryDrawer');
+    const title = document.getElementById('drawerTitle');
+    const body = document.getElementById('drawerBody');
+
+    title.textContent = 'Loading Task...';
+    body.innerHTML = `
+        <div class="space-y-4">
+            <div class="skeleton h-20 w-full"></div>
+            <div class="grid gap-4 md:grid-cols-2">
+                <div class="skeleton h-36 w-full"></div>
+                <div class="skeleton h-36 w-full"></div>
+            </div>
+            <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) {
+            aside.classList.remove('translate-x-full');
+            aside.classList.add('translate-x-0');
+        }
+    }, 10);
+
+    try {
+        const response = await fetch(`/api/tasks/${id}?repo=${encodeURIComponent(currentRepo)}`);
+        const task = await response.json();
+        if (!response.ok) throw new Error(task.error || 'Failed to load task');
+
+        title.textContent = `Task: ${task.task_code}`;
+        
+        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>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="p-4 bg-white dark:bg-slate-800/40 rounded-xl border border-slate-100 dark:border-slate-800">
+                        <div class="text-[10px] font-bold text-slate-400 uppercase mb-2">Status & Priority</div>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="px-2 py-1 rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-400 text-xs font-bold border border-sky-500/20 capitalize">${task.status}</span>
+                            <span class="px-2 py-1 rounded-lg bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 text-xs font-bold border border-indigo-500/20">P${task.priority}</span>
+                            <span class="px-2 py-1 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700 uppercase">${task.phase}</span>
+                        </div>
+                    </div>
+                    <div class="p-4 bg-white dark:bg-slate-800/40 rounded-xl border border-slate-100 dark:border-slate-800">
+                        <div class="text-[10px] font-bold text-slate-400 uppercase mb-2">Owner</div>
+                        <div class="flex items-center gap-2">
+                            <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-sky-400 to-indigo-500 flex items-center justify-center text-white text-[10px] font-bold">
+                                ${getRepoInitials(task.agent || 'UK')}
+                            </div>
+                            <div>
+                                <div class="text-xs font-bold">${escapeHtml(task.agent || 'unknown')}</div>
+                                <div class="text-[10px] text-slate-500 dark:text-slate-400">${escapeHtml(task.role || 'unknown')}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <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">
+                        ${task.description ? renderMarkdown(task.description) : '<span class="italic opacity-50">No description provided</span>'}
+                    </div>
+                </div>
+
+                ${task.doc_path ? `
+                    <div class="p-4 bg-sky-500/5 dark:bg-sky-500/10 rounded-xl border border-sky-500/20">
+                        <div class="text-[10px] font-bold text-sky-600/60 dark:text-sky-400/60 uppercase mb-2">Documentation</div>
+                        <a href="${task.doc_path.startsWith('http') ? task.doc_path : '#'}" target="_blank" class="flex items-center gap-2 text-sky-600 dark:text-sky-400 hover:underline" onclick="event.stopPropagation()">
+                            <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                            <span class="text-sm font-medium truncate">${escapeHtml(task.doc_path)}</span>
+                        </a>
+                    </div>
+                ` : ''}
+
+                <div class="pt-4 border-t border-slate-100 dark:border-slate-800 grid grid-cols-2 gap-4">
+                    <div>
+                        <div class="text-[9px] font-bold text-slate-400 uppercase">Created</div>
+                        <div class="text-[11px] text-slate-500">${new Date(task.created_at).toLocaleString()}</div>
+                    </div>
+                    <div>
+                        <div class="text-[9px] font-bold text-slate-400 uppercase">Updated</div>
+                        <div class="text-[11px] text-slate-500">${new Date(task.updated_at).toLocaleString()}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    } catch (err) {
+        showToast('Failed to load task: ' + err.message, 'error');
+        closeDrawer();
+    }
 }
 
 function getPriorityColor(p) {
@@ -1665,25 +1918,27 @@ function switchTab(tab) {
     const dashTab = document.getElementById('dashboardTabBtn');
     const memTab = document.getElementById('memoriesTabBtn');
     const taskTab = document.getElementById('tasksTabBtn');
+    const refTab = document.getElementById('referenceTabBtn');
     const indicator = document.getElementById('tabIndicator');
-    
+
     const dashContent = document.getElementById('dashboardContent');
     const memContent = document.getElementById('memoriesContent');
     const taskContent = document.getElementById('tasksContent');
+    const refContent = document.getElementById('referenceContent');
 
     currentTab = tab;
     localStorage.setItem('activeTab', tab);
 
-    const tabs = [dashTab, memTab, taskTab];
-    const contents = [dashContent, memContent, taskContent];
-    const targetId = tab + 'TabBtn';
+    const tabs = [dashTab, memTab, taskTab, refTab];
+    const contents = [dashContent, memContent, taskContent, refContent];    const targetId = tab + 'TabBtn';
     const targetContentId = tab + 'Content';
 
     // Update indicator
     if (indicator) {
         if (tab === 'dashboard') indicator.style.transform = 'translateX(0)';
-        else if (tab === 'memories') indicator.style.transform = 'translateX(100%)';
-        else if (tab === 'tasks') indicator.style.transform = 'translateX(200%)';
+        if (tab === 'memories') indicator.style.transform = 'translateX(100%)';
+        if (tab === 'tasks') indicator.style.transform = 'translateX(200%)';
+        if (tab === 'reference') indicator.style.transform = 'translateX(300%)';
     }
 
     // Update button states
@@ -1714,6 +1969,8 @@ function switchTab(tab) {
     if (tab === 'tasks') loadTasks();
     if (tab === 'dashboard') loadStats();
     if (tab === 'memories') loadMemories();
+    if (tab === 'reference') loadCapabilities();
+    syncStickyOffsets();
 }
 
 window.loadTasks = loadTasks;
@@ -1765,8 +2022,194 @@ safeAddEventListener('repoCollapsedSummaryButton', 'click', () => {
     }
 });
 
+safeAddEventListener('taskSearchInput', 'input', () => {
+    if (window.taskSearchDebounce) clearTimeout(window.taskSearchDebounce);
+    window.taskSearchDebounce = setTimeout(() => {
+        loadTasks();
+    }, 300);
+});
+
 window.addEventListener('resize', syncStickyOffsets);
 
+let currentCapabilities = { tools: [], resources: [], prompts: [] };
+
+async function loadCapabilities() {
+    const toolsList = document.getElementById('toolsList');
+    const resourcesList = document.getElementById('resourcesList');
+    const promptsList = document.getElementById('promptsList');
+    
+    if (!toolsList) return;
+    
+    toolsList.innerHTML = '<div class="text-center py-4 text-gray-400 text-xs">Loading capabilities...</div>';
+    
+    try {
+        const response = await fetch('/api/capabilities');
+        const data = await response.json();
+        
+        currentCapabilities.tools = Array.isArray(data.tools) ? data.tools : [];
+        currentCapabilities.resources = Array.isArray(data.resources) ? data.resources : [];
+        currentCapabilities.prompts = Array.isArray(data.prompts) ? data.prompts : [];
+
+        toolsList.innerHTML = currentCapabilities.tools.map(t => `
+            <div onclick="showCapabilityDetail('tools', '${t.name}')" class="p-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer hover:border-sky-500/50 transition-all group">
+                <div class="font-bold text-xs text-sky-600 dark:text-sky-400 mb-1 group-hover:text-sky-500">${escapeHtml(t.name)}</div>
+                <p class="text-[10px] text-gray-500 dark:text-gray-400 line-clamp-2">${escapeHtml(t.description)}</p>
+            </div>
+        `).join('') || '<div class="text-center py-4 text-gray-400 text-xs">No tools available</div>';
+        
+        resourcesList.innerHTML = currentCapabilities.resources.map(r => `
+            <div onclick="showCapabilityDetail('resources', '${r.name}')" class="p-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer hover:border-indigo-500/50 transition-all group">
+                <div class="font-bold text-xs text-indigo-600 dark:text-indigo-400 mb-1 group-hover:text-indigo-500">${escapeHtml(r.name)}</div>
+                <p class="text-[10px] text-gray-500 dark:text-gray-400 line-clamp-2">${escapeHtml(r.description || 'No description')}</p>
+                <div class="text-[8px] font-mono text-gray-400 mt-1 truncate">${escapeHtml(r.uri)}</div>
+            </div>
+        `).join('') || '<div class="text-center py-4 text-gray-400 text-xs">No resources available</div>';
+        
+        promptsList.innerHTML = currentCapabilities.prompts.map(p => `
+            <div onclick="showCapabilityDetail('prompts', '${p.name}')" class="p-3 bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 rounded-lg cursor-pointer hover:border-emerald-500/50 transition-all group">
+                <div class="font-bold text-xs text-emerald-600 dark:text-emerald-400 mb-1 group-hover:text-emerald-500">${escapeHtml(p.name)}</div>
+                <p class="text-[10px] text-gray-500 dark:text-gray-400 line-clamp-2">${escapeHtml(p.description || 'No description')}</p>
+            </div>
+        `).join('') || '<div class="text-center py-4 text-gray-400 text-xs">No prompts available</div>';
+        
+    } catch (err) {
+        console.error('Failed to load capabilities:', err);
+        toolsList.innerHTML = `<div class="text-center py-4 text-red-400 text-xs">Error: ${err.message}</div>`;
+    }
+}
+
+async function handleCsvImport(event) {
+    const file = event.target.files[0];
+    if (!file || !currentRepo) return;
+    
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+        const csvData = e.target.result;
+        try {
+            const response = await fetch('/api/tasks/import-csv', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ repo: currentRepo, csvData })
+            });
+            const result = await response.json();
+            if (result.success) {
+                showToast(`Successfully imported ${result.count} tasks`, 'success');
+                loadTasks();
+                loadStats();
+            } else {
+                showToast(result.error || 'Failed to import CSV', 'error');
+            }
+        } catch (err) {
+            showToast('Import failed: ' + err.message, 'error');
+        }
+    };
+    reader.readAsText(file);
+    event.target.value = ''; 
+}
+
+function downloadCsvTemplate() {
+    const headers = "task_code,phase,title,description,priority,status,agent,role,doc_path";
+    const example = "TASK-001,research,Integrate CSV,Add import feature to dashboard,4,pending,Gemini CLI,expert,docs/tasks.md";
+    const csv = `${headers}\n${example}`;
+    
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.setAttribute('hidden', '');
+    a.setAttribute('href', url);
+    a.setAttribute('download', 'task_template.csv');
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
+
+function showCapabilityDetail(type, name) {
+    const item = currentCapabilities[type].find(i => i.name === name);
+    if (!item) return;
+
+    const drawer = document.getElementById('memoryDrawer');
+    const title = document.getElementById('drawerTitle');
+    const body = document.getElementById('drawerBody');
+
+    title.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: ${name}`;
+    
+    let contentHtml = `
+        <div class="space-y-6">
+            <div class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800">
+                <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">Description</h4>
+                <p class="text-sm text-slate-600 dark:text-slate-300">${escapeHtml(item.description || 'No description')}</p>
+            </div>
+    `;
+
+    if (type === 'tools' && item.inputSchema) {
+        contentHtml += `
+            <div class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800">
+                <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">Input Schema</h4>
+                <pre class="text-[10px] font-mono text-sky-600 dark:text-sky-400 overflow-x-auto">${JSON.stringify(item.inputSchema, null, 2)}</pre>
+            </div>
+        `;
+    }
+
+    if (type === 'resources' && item.uri) {
+        contentHtml += `
+            <div class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800">
+                <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">URI</h4>
+                <code class="text-xs font-mono text-indigo-600 dark:text-indigo-400">${escapeHtml(item.uri)}</code>
+            </div>
+        `;
+    }
+
+    if (type === 'prompts' && item.arguments) {
+        contentHtml += `
+            <div class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800">
+                <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">Arguments</h4>
+                <div class="space-y-3">
+                    ${item.arguments.map(arg => `
+                        <div class="border-l-2 border-emerald-500 pl-3 py-1">
+                            <div class="text-xs font-bold text-emerald-600 dark:text-emerald-400">${escapeHtml(arg.name)} ${arg.required ? '<span class="text-[8px] bg-emerald-500 text-white px-1 rounded">REQUIRED</span>' : ''}</div>
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400">${escapeHtml(arg.description || '')}</div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    if (type === 'prompts' && item.messages) {
+        contentHtml += `
+            <div class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800">
+                <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">Instructions</h4>
+                <div class="space-y-4">
+                    ${item.messages.map(msg => {
+                        const rawContent = typeof msg.content === 'string' ? msg.content : (msg.content?.text || '');
+                        const renderedMarkdown = window.marked ? window.marked.parse(rawContent) : escapeHtml(rawContent);
+                        return `
+                            <div class="space-y-1">
+                                <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">${escapeHtml(msg.role)}</div>
+                                <div class="p-4 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-lg text-sm markdown-body">
+                                    ${renderedMarkdown}
+                                </div>
+                            </div>
+                        `;
+                    }).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    contentHtml += `</div>`;
+    body.innerHTML = contentHtml;
+    
+    drawer.classList.remove('hidden');
+    document.body.classList.add('drawer-open');
+    setTimeout(() => document.getElementById('drawerAside').classList.remove('translate-x-full'), 10);
+}
+
+window.handleCsvImport = handleCsvImport;
+window.downloadCsvTemplate = downloadCsvTemplate;
+window.loadCapabilities = loadCapabilities;
+window.showCapabilityDetail = showCapabilityDetail;
+
 initTheme();
 initRepoSidebarState();
 initPinnedRepos();