@sugar-crash-studios/vibe-forge 0.4.0

package/bin/dashboard/api/tasks.js

@@ -0,0 +1,416 @@
+/**
+ * Tasks API - List and manage tasks from tasks/ directory
+ *
+ * Endpoints:
+ *   GET  /api/tasks       - List all tasks grouped by status
+ *   GET  /api/tasks/:id   - Get single task details
+ *   POST /api/tasks       - Create new task
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Task directory structure
+const TASK_DIRS = ['pending', 'in-progress', 'review', 'completed'];
+
+// =============================================================================
+// Task List Cache
+// =============================================================================
+// Avoids a full filesystem scan on every GET /api/tasks request.
+// Invalidation strategy: track each task directory's mtime. When any directory
+// mtime changes (file added, removed, or renamed), the cache is invalidated
+// and rebuilt on the next request. This is O(TASK_DIRS) stat calls vs. O(N)
+// file reads per request, and is the same pattern used by the daemon's
+// sync_agent_status_to_db (mtime filtering before DB upsert).
+
+/** @type {Object|null} Cached listTasks result */
+let _taskCache = null;
+
+/** @type {Object.<string, number|null>} Last-seen mtime per task dir */
+let _taskCacheMtimes = {};
+
+/**
+ * Returns true if all task directory mtimes match the recorded values.
+ * A null entry means the directory was absent when last recorded.
+ * @param {string} tasksDir - Absolute path to tasks/ root
+ * @returns {boolean}
+ */
+function isTaskCacheValid(tasksDir) {
+    if (!_taskCache) return false;
+    for (const dir of TASK_DIRS) {
+        const dirPath = path.join(tasksDir, dir);
+        try {
+            const currentMtime = fs.statSync(dirPath).mtimeMs;
+            if (currentMtime !== _taskCacheMtimes[dir]) return false;
+        } catch (_err) {
+            // Directory does not exist — invalid if we previously recorded it
+            if (_taskCacheMtimes[dir] !== null) return false;
+        }
+    }
+    return true;
+}
+
+/**
+ * Snapshots the current mtime of each task directory.
+ * Called after a successful scan to anchor the cache.
+ * @param {string} tasksDir - Absolute path to tasks/ root
+ */
+function recordTaskCacheMtimes(tasksDir) {
+    for (const dir of TASK_DIRS) {
+        const dirPath = path.join(tasksDir, dir);
+        try {
+            _taskCacheMtimes[dir] = fs.statSync(dirPath).mtimeMs;
+        } catch (_err) {
+            _taskCacheMtimes[dir] = null;
+        }
+    }
+}
+
+/**
+ * Manually invalidate the task cache (e.g. after createTask).
+ * The next listTasks call will trigger a full rescan.
+ */
+function invalidateTaskCache() {
+    _taskCache = null;
+    _taskCacheMtimes = {};
+}
+
+/**
+ * Parse YAML-like frontmatter from task file
+ * @param {string} content - File content
+ * @returns {Object} Parsed frontmatter and body
+ */
+function parseFrontmatter(content) {
+    const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
+
+    if (!frontmatterMatch) {
+        return { metadata: {}, body: content };
+    }
+
+    const frontmatter = frontmatterMatch[1];
+    const body = frontmatterMatch[2];
+
+    // Parse YAML-like frontmatter (simple key: value format)
+    const metadata = {};
+    const lines = frontmatter.split('\n');
+
+    for (const line of lines) {
+        const match = line.match(/^([a-z_-]+):\s*(.*)$/i);
+        if (match) {
+            let value = match[2].trim();
+            // Remove quotes if present
+            if ((value.startsWith('"') && value.endsWith('"')) ||
+                (value.startsWith("'") && value.endsWith("'"))) {
+                value = value.slice(1, -1);
+            }
+            // Handle null
+            if (value === 'null') {
+                value = null;
+            }
+            metadata[match[1]] = value;
+        }
+    }
+
+    return { metadata, body };
+}
+
+/**
+ * Read a single task file
+ * @param {string} filePath - Path to task file
+ * @returns {Object|null} Task object or null if invalid
+ */
+function readTaskFile(filePath) {
+    try {
+        const content = fs.readFileSync(filePath, 'utf8');
+        const { metadata, body } = parseFrontmatter(content);
+
+        // Extract title from body if not in metadata
+        if (!metadata.title) {
+            const titleMatch = body.match(/^#\s+(.+)$/m);
+            if (titleMatch) {
+                metadata.title = titleMatch[1];
+            }
+        }
+
+        // Get file stats for timestamps
+        const stats = fs.statSync(filePath);
+
+        return {
+            id: metadata.id || path.basename(filePath, '.md'),
+            title: metadata.title || path.basename(filePath, '.md'),
+            type: metadata.type || 'task',
+            priority: metadata.priority || 'medium',
+            status: metadata.status || 'unknown',
+            assignedTo: metadata.assigned_to || null,
+            createdAt: metadata.created_at || stats.birthtime.toISOString(),
+            createdBy: metadata.created_by || 'unknown',
+            parent: metadata.parent || null,
+            file: path.basename(filePath),
+            filePath: filePath,
+            modifiedAt: stats.mtime.toISOString()
+        };
+    } catch (err) {
+        console.error(`[Tasks] Error reading ${filePath}: ${err.message}`);
+        return null;
+    }
+}
+
+/**
+ * Get task details including full body
+ * @param {string} filePath - Path to task file
+ * @returns {Object|null} Full task object or null
+ */
+function readTaskFull(filePath) {
+    try {
+        const content = fs.readFileSync(filePath, 'utf8');
+        const { metadata, body } = parseFrontmatter(content);
+        const stats = fs.statSync(filePath);
+
+        return {
+            id: metadata.id || path.basename(filePath, '.md'),
+            title: metadata.title || path.basename(filePath, '.md'),
+            type: metadata.type || 'task',
+            priority: metadata.priority || 'medium',
+            status: metadata.status || 'unknown',
+            assignedTo: metadata.assigned_to || null,
+            createdAt: metadata.created_at || stats.birthtime.toISOString(),
+            createdBy: metadata.created_by || 'unknown',
+            parent: metadata.parent || null,
+            file: path.basename(filePath),
+            filePath: filePath,
+            modifiedAt: stats.mtime.toISOString(),
+            body: body.trim(),
+            raw: content
+        };
+    } catch (err) {
+        console.error(`[Tasks] Error reading full ${filePath}: ${err.message}`);
+        return null;
+    }
+}
+
+/**
+ * List all tasks grouped by status.
+ * Results are cached and only rescanned when a task directory's mtime changes
+ * (i.e. a file was added, removed, or renamed). Individual file edits that
+ * don't change the directory mtime will not invalidate the list cache — use
+ * GET /api/tasks/:id for live file content.
+ *
+ * @param {string} projectRoot - Project root directory
+ * @returns {Object} Tasks grouped by status
+ */
+async function listTasks(projectRoot) {
+    const tasksDir = path.join(projectRoot, 'tasks');
+
+    // Return cached result when no directory has changed
+    if (isTaskCacheValid(tasksDir)) {
+        return _taskCache;
+    }
+
+    const result = {
+        pending: [],
+        'in-progress': [],
+        review: [],
+        completed: [],
+        summary: {
+            total: 0,
+            pending: 0,
+            inProgress: 0,
+            review: 0,
+            completed: 0
+        }
+    };
+
+    for (const dir of TASK_DIRS) {
+        const dirPath = path.join(tasksDir, dir);
+
+        if (!fs.existsSync(dirPath)) {
+            continue;
+        }
+
+        const files = fs.readdirSync(dirPath).filter(f => f.endsWith('.md'));
+
+        for (const file of files) {
+            const filePath = path.join(dirPath, file);
+            const task = readTaskFile(filePath);
+
+            if (task) {
+                result[dir].push(task);
+                result.summary.total++;
+
+                switch (dir) {
+                    case 'pending':
+                        result.summary.pending++;
+                        break;
+                    case 'in-progress':
+                        result.summary.inProgress++;
+                        break;
+                    case 'review':
+                        result.summary.review++;
+                        break;
+                    case 'completed':
+                        result.summary.completed++;
+                        break;
+                }
+            }
+        }
+
+        // Sort by priority (critical > high > medium > low)
+        const priorityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+        result[dir].sort((a, b) => {
+            const pa = priorityOrder[a.priority] ?? 2;
+            const pb = priorityOrder[b.priority] ?? 2;
+            return pa - pb;
+        });
+    }
+
+    // Store result and anchor mtimes for next validation
+    recordTaskCacheMtimes(tasksDir);
+    _taskCache = result;
+
+    return result;
+}
+
+/**
+ * Get a single task by ID
+ * @param {string} projectRoot - Project root directory
+ * @param {string} taskId - Task ID to find
+ * @returns {Object|null} Task object or null
+ */
+async function getTask(projectRoot, taskId) {
+    const tasksDir = path.join(projectRoot, 'tasks');
+
+    // Sanitize task ID to prevent path traversal
+    const safeId = taskId.replace(/[^a-zA-Z0-9_-]/g, '');
+
+    for (const dir of TASK_DIRS) {
+        const dirPath = path.join(tasksDir, dir);
+
+        if (!fs.existsSync(dirPath)) {
+            continue;
+        }
+
+        const files = fs.readdirSync(dirPath).filter(f => f.endsWith('.md'));
+
+        for (const file of files) {
+            // Check if filename starts with task ID
+            if (file.startsWith(safeId) || file === `${safeId}.md`) {
+                const filePath = path.join(dirPath, file);
+                return readTaskFull(filePath);
+            }
+
+            // Also check file content for matching ID
+            const task = readTaskFile(path.join(dirPath, file));
+            if (task && task.id === safeId) {
+                return readTaskFull(path.join(dirPath, file));
+            }
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Create a new task file
+ * @param {string} projectRoot - Project root directory
+ * @param {Object} taskData - Task data
+ * @returns {Object} Created task
+ */
+async function createTask(projectRoot, taskData) {
+    const tasksDir = path.join(projectRoot, 'tasks', 'pending');
+
+    // Validate required fields
+    if (!taskData.title) {
+        throw new Error('Task title is required');
+    }
+
+    // Generate task ID if not provided
+    const id = taskData.id || generateTaskId(taskData.type || 'TASK');
+
+    // Sanitize ID
+    const safeId = id.replace(/[^a-zA-Z0-9_-]/g, '');
+
+    // Generate filename
+    const slug = taskData.title
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .substring(0, 50);
+
+    const filename = `${safeId}-${slug}.md`;
+    const filePath = path.join(tasksDir, filename);
+
+    // Check if file already exists
+    if (fs.existsSync(filePath)) {
+        throw new Error(`Task file already exists: ${filename}`);
+    }
+
+    // Build task content
+    const now = new Date().toISOString();
+    const content = `---
+id: ${safeId}
+title: "${taskData.title.replace(/"/g, '\\"')}"
+type: ${taskData.type || 'task'}
+priority: ${taskData.priority || 'medium'}
+status: pending
+created_at: ${now}
+created_by: ${taskData.createdBy || 'dashboard'}
+assigned_to: ${taskData.assignedTo || 'null'}
+---
+
+# ${taskData.title}
+
+## Summary
+
+${taskData.summary || taskData.description || 'No description provided.'}
+
+## Context
+
+${taskData.context || 'Created via dashboard dispatch.'}
+
+## Acceptance Criteria
+
+- [ ] Task completed successfully
+`;
+
+    // Ensure directory exists
+    if (!fs.existsSync(tasksDir)) {
+        fs.mkdirSync(tasksDir, { recursive: true });
+    }
+
+    // Write file
+    fs.writeFileSync(filePath, content, 'utf8');
+
+    console.log(`[Tasks] Created: ${filename}`);
+
+    // Invalidate list cache — the pending directory mtime will have changed,
+    // but proactively clearing is cheaper than letting the next request do
+    // a stat comparison that would miss in-process writes on some OS/FS combos.
+    invalidateTaskCache();
+
+    // Return created task
+    return readTaskFile(filePath);
+}
+
+/**
+ * Generate a unique task ID
+ * @param {string} prefix - ID prefix (e.g., 'TASK', 'AUTO')
+ * @returns {string} Generated ID
+ */
+function generateTaskId(prefix = 'TASK') {
+    const timestamp = Date.now().toString(36).toUpperCase();
+    const random = Math.random().toString(36).substring(2, 5).toUpperCase();
+    return `${prefix}-${timestamp}-${random}`;
+}
+
+module.exports = {
+    listTasks,
+    getTask,
+    createTask,
+    readTaskFile,
+    readTaskFull,
+    parseFrontmatter,
+    invalidateTaskCache,
+    // Exported for testing only:
+    isTaskCacheValid,
+    recordTaskCacheMtimes
+};

package/bin/dashboard/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x1F525;</text></svg>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vibe Forge Dashboard</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/bin/dashboard/frontend/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "vibe-forge-dashboard",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.0",
+    "vite": "^5.4.0"
+  }
+}

package/bin/dashboard/frontend/src/App.svelte

@@ -0,0 +1,222 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { initTheme, toggleTheme } from './lib/stores/theme.js';
+    import { connectWebSocket, disconnectWebSocket, startPeriodicRefresh, stopPeriodicRefresh, refreshTasks, refreshAgents, refreshIssues, refreshAll } from './lib/stores/websocket.js';
+    import { pendingDispatch, closeDispatchModal, issues, openDispatchModal } from './lib/stores/issues.js';
+    import { clearSelectedTask, filteredTasks, currentTaskFilter, toggleTaskExpand, setTaskFilter } from './lib/stores/tasks.js';
+    import { focusedPanel, focusedItemIndex, setFocusedPanel, mobileActivePanel, setMobilePanel, showKeyboardHelp, openKeyboardHelp, closeKeyboardHelp } from './lib/stores/ui.js';
+    import { get } from 'svelte/store';
+
+    import Header from './lib/components/Header.svelte';
+    import Footer from './lib/components/Footer.svelte';
+    import TasksPanel from './lib/components/TasksPanel.svelte';
+    import AgentsPanel from './lib/components/AgentsPanel.svelte';
+    import NotificationsPanel from './lib/components/NotificationsPanel.svelte';
+    import IssuesPanel from './lib/components/IssuesPanel.svelte';
+    import DispatchModal from './lib/components/DispatchModal.svelte';
+    import KeyboardShortcutsModal from './lib/components/KeyboardShortcutsModal.svelte';
+    import Toast from './lib/components/Toast.svelte';
+    import MobileTabs from './lib/components/MobileTabs.svelte';
+
+    onMount(() => {
+        initTheme();
+        connectWebSocket();
+        startPeriodicRefresh();
+
+        // Setup keyboard shortcuts
+        document.addEventListener('keydown', handleKeydown);
+    });
+
+    onDestroy(() => {
+        disconnectWebSocket();
+        document.removeEventListener('keydown', handleKeydown);
+    });
+
+    function handleKeydown(event) {
+        // Don't handle shortcuts if typing in input
+        if (event.target.matches('input, textarea, select')) return;
+
+        // Check if modal is open
+        const dispatchOpen = get(pendingDispatch) !== null;
+        const keyboardHelpOpen = get(showKeyboardHelp);
+        const modalOpen = dispatchOpen || keyboardHelpOpen;
+
+        if (event.key === 'Escape') {
+            if (dispatchOpen) {
+                closeDispatchModal();
+                return;
+            }
+            if (keyboardHelpOpen) {
+                closeKeyboardHelp();
+                return;
+            }
+            // Deselect current item
+            clearSelectedTask();
+            return;
+        }
+
+        if (modalOpen) return;
+
+        switch (event.key) {
+            case '1':
+                focusPanelByName('tasks');
+                break;
+            case '2':
+                focusPanelByName('agents');
+                break;
+            case '3':
+                focusPanelByName('notifications');
+                break;
+            case '4':
+                focusPanelByName('issues');
+                break;
+            case 'j':
+            case 'ArrowDown':
+                navigateList('down');
+                event.preventDefault();
+                break;
+            case 'k':
+            case 'ArrowUp':
+                navigateList('up');
+                event.preventDefault();
+                break;
+            case 'Enter':
+                activateSelectedItem();
+                break;
+            case 'd':
+                dispatchSelectedIssue();
+                break;
+            case 'r':
+                refreshCurrentPanel();
+                break;
+            case 't':
+                toggleTheme();
+                break;
+            case '?':
+                openKeyboardHelp();
+                event.preventDefault();
+                break;
+        }
+    }
+
+    function focusPanelByName(panelName) {
+        setFocusedPanel(panelName);
+        focusedItemIndex.set(-1);
+
+        const panel = document.getElementById(`${panelName}-panel`);
+        panel?.focus();
+
+        // On mobile, also switch the active panel
+        if (window.innerWidth < 768) {
+            setMobilePanel(panelName);
+        }
+    }
+
+    function navigateList(direction) {
+        const currentPanel = get(focusedPanel);
+        if (!currentPanel) {
+            focusPanelByName('tasks');
+            return;
+        }
+
+        const panel = document.getElementById(`${currentPanel}-panel`);
+        const items = panel?.querySelectorAll('.card');
+        if (!items || items.length === 0) return;
+
+        if (direction === 'down') {
+            currentFocusedItemIndex = Math.min(currentFocusedItemIndex + 1, items.length - 1);
+        } else {
+            currentFocusedItemIndex = Math.max(currentFocusedItemIndex - 1, 0);
+        }
+
+        focusedItemIndex.set(currentFocusedItemIndex);
+
+        items.forEach((item, i) => {
+            item.classList.toggle('selected', i === currentFocusedItemIndex);
+        });
+
+        items[currentFocusedItemIndex]?.scrollIntoView({ block: 'nearest' });
+        items[currentFocusedItemIndex]?.focus();
+    }
+
+    function activateSelectedItem() {
+        const currentPanel = get(focusedPanel);
+
+        if (currentPanel === 'tasks' && currentFocusedItemIndex >= 0) {
+            const taskCards = document.querySelectorAll('#tasks-list .task-card');
+            const card = taskCards[currentFocusedItemIndex];
+            if (card) {
+                const taskId = card.dataset.taskId;
+                toggleTaskExpand(taskId);
+            }
+        } else if (currentPanel === 'issues' && currentFocusedItemIndex >= 0) {
+            dispatchSelectedIssue();
+        }
+    }
+
+    function dispatchSelectedIssue() {
+        const currentPanel = get(focusedPanel);
+        if (currentPanel !== 'issues') return;
+
+        const issueCards = document.querySelectorAll('#issues-list .issue-card');
+        const card = issueCards[currentFocusedItemIndex];
+        if (card) {
+            const issueId = card.dataset.issueId;
+            const issuesList = get(issues);
+            const issue = issuesList.find(i => i.id === issueId);
+            if (issue) {
+                openDispatchModal(issue);
+            }
+        }
+    }
+
+    function refreshCurrentPanel() {
+        const currentPanel = get(focusedPanel);
+        switch (currentPanel) {
+            case 'tasks':
+                refreshTasks();
+                break;
+            case 'agents':
+                refreshAgents();
+                break;
+            case 'issues':
+                refreshIssues();
+                break;
+            default:
+                refreshAll();
+        }
+    }
+</script>
+
+<!-- Skip Links for Accessibility -->
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<a href="#tasks-panel" class="skip-link">Skip to tasks</a>
+<a href="#issues-panel" class="skip-link">Skip to issues</a>
+
+<Header />
+
+<!-- Main Content -->
+<!-- svelte-ignore a11y_no_redundant_roles -->
+<main id="main-content" class="main" role="main">
+    <!-- Top Row: Tasks, Agents, Notifications -->
+    <div class="panels-top">
+        <TasksPanel />
+        <AgentsPanel />
+        <NotificationsPanel />
+    </div>
+
+    <!-- Bottom Row: Issues Panel -->
+    <IssuesPanel />
+</main>
+
+<Footer />
+
+<!-- Modals -->
+<DispatchModal />
+<KeyboardShortcutsModal />
+
+<!-- Toast Container -->
+<Toast />
+
+<!-- Mobile Tab Bar -->
+<MobileTabs />