@sugar-crash-studios/vibe-forge 0.4.0

package/bin/dashboard/frontend/src/lib/components/MobileTabs.svelte

@@ -0,0 +1,52 @@
+<script>
+    import { mobileActivePanel, setMobilePanel } from '../stores/ui.js';
+
+    const tabs = [
+        { id: 'tasks', label: 'Tasks', icon: 'M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11' },
+        { id: 'agents', label: 'Agents', icon: 'M12 8a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM20 21a8 8 0 0 0-16 0' },
+        { id: 'notifications', label: 'Notif', icon: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0' },
+        { id: 'issues', label: 'Issues', icon: 'M12 12a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 8v4M12 16h.01' },
+    ];
+
+    function handleTabClick(tabId) {
+        setMobilePanel(tabId);
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<nav class="mobile-tabs" role="tablist" aria-label="Panel navigation">
+    {#each tabs as tab}
+        <button
+            class="mobile-tab"
+            class:active={$mobileActivePanel === tab.id}
+            role="tab"
+            aria-selected={$mobileActivePanel === tab.id}
+            data-panel={tab.id}
+            onclick={() => handleTabClick(tab.id)}
+        >
+            {#if tab.id === 'tasks'}
+                <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 11l3 3L22 4"/>
+                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+                </svg>
+            {:else if tab.id === 'agents'}
+                <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="8" r="5"/>
+                    <path d="M20 21a8 8 0 0 0-16 0"/>
+                </svg>
+            {:else if tab.id === 'notifications'}
+                <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+                    <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+                </svg>
+            {:else if tab.id === 'issues'}
+                <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <line x1="12" y1="8" x2="12" y2="12"/>
+                    <line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+            {/if}
+            <span>{tab.label}</span>
+        </button>
+    {/each}
+</nav>

package/bin/dashboard/frontend/src/lib/components/NotificationCard.svelte

@@ -0,0 +1,60 @@
+<script>
+    import { dismissNotification } from '../stores/notifications.js';
+    import { formatRelativeTime, sanitizeClassName } from '../utils/formatters.js';
+
+    export let notification;
+
+    const icons = {
+        success: '\u2713',
+        info: 'i',
+        warning: '!',
+        attention: '\u{1F514}',
+        error: '\u2717',
+    };
+
+    $: type = notification.type || 'info';
+    $: sanitizedType = sanitizeClassName(type);
+    $: icon = icons[type] || 'i';
+
+    function handleDismiss(event) {
+        event.stopPropagation();
+        dismissNotification(notification.id);
+    }
+
+    function handleAction(event, action, index) {
+        event.stopPropagation();
+        console.log('Notification action:', action, notification.id);
+        dismissNotification(notification.id);
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div class="card notification-card" tabindex="0" data-notification-id={notification.id}>
+    <div class="notification-icon {sanitizedType}">{icon}</div>
+    <div class="notification-content">
+        <div class="notification-title">{notification.title}</div>
+        {#if notification.message}
+            <div class="notification-desc">{notification.message}</div>
+        {/if}
+        <div class="notification-time">{formatRelativeTime(notification.timestamp || notification.created_at)}</div>
+        {#if notification.actions && notification.actions.length > 0}
+            <div class="notification-actions">
+                {#each notification.actions as action, index}
+                    <button
+                        class="btn btn-secondary"
+                        onclick={(e) => handleAction(e, action.action, index)}
+                    >
+                        {action.label}
+                    </button>
+                {/each}
+            </div>
+        {/if}
+    </div>
+    <button
+        class="notification-dismiss"
+        onclick={handleDismiss}
+        aria-label="Dismiss notification"
+    >
+        &times;
+    </button>
+</div>

package/bin/dashboard/frontend/src/lib/components/NotificationsPanel.svelte

@@ -0,0 +1,44 @@
+<script>
+    import { notifications, groupedNotifications, clearAllNotifications } from '../stores/notifications.js';
+    import NotificationCard from './NotificationCard.svelte';
+</script>
+
+<section id="notifications-panel" class="panel notifications-panel" aria-labelledby="notifications-heading" tabindex="-1">
+    <div class="panel-header">
+        <h2 id="notifications-heading" class="panel-title">NOTIFICATIONS</h2>
+        <button class="panel-clear" onclick={clearAllNotifications} aria-label="Clear all notifications">
+            Clear
+        </button>
+    </div>
+
+    {#if $notifications.length === 0}
+        <div class="empty-state">
+            <div class="empty-icon" aria-hidden="true">&#x1F514;</div>
+            <p class="empty-title">Quiet day!</p>
+            <p class="empty-subtitle">No notifications</p>
+        </div>
+    {:else}
+        <div id="notifications-list" class="panel-content notifications-list" role="log" aria-live="polite" aria-busy="false">
+            {#if $groupedNotifications.today.length > 0}
+                <div class="notification-group-header">Today</div>
+                {#each $groupedNotifications.today as notification (notification.id)}
+                    <NotificationCard {notification} />
+                {/each}
+            {/if}
+
+            {#if $groupedNotifications.yesterday.length > 0}
+                <div class="notification-group-header">Yesterday</div>
+                {#each $groupedNotifications.yesterday as notification (notification.id)}
+                    <NotificationCard {notification} />
+                {/each}
+            {/if}
+
+            {#if $groupedNotifications.older.length > 0}
+                <div class="notification-group-header">Earlier</div>
+                {#each $groupedNotifications.older as notification (notification.id)}
+                    <NotificationCard {notification} />
+                {/each}
+            {/if}
+        </div>
+    {/if}
+</section>

package/bin/dashboard/frontend/src/lib/components/TaskCard.svelte

@@ -0,0 +1,63 @@
+<script>
+    import { selectedTaskId, toggleTaskExpand } from '../stores/tasks.js';
+    import { getAgentConfig } from '../stores/agents.js';
+    import { showToast } from '../stores/toast.js';
+    import { formatRelativeTime, truncate, sanitizeClassName } from '../utils/formatters.js';
+
+    export let task;
+
+    $: priority = sanitizeClassName((task.priority || 'medium').toLowerCase());
+    $: agent = getAgentConfig(task.assigned_to || task.assignee);
+    $: isExpanded = $selectedTaskId === task.id;
+
+    function handleClick() {
+        toggleTaskExpand(task.id);
+    }
+
+    function handleKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleTaskExpand(task.id);
+        }
+    }
+
+    function viewTask(event) {
+        event.stopPropagation();
+        showToast({
+            type: 'info',
+            title: 'View Task',
+            message: `Open tasks/pending/${task.id}.md in your editor`,
+        });
+    }
+</script>
+
+<div
+    class="card task-card"
+    class:expanded={isExpanded}
+    data-task-id={task.id}
+    tabindex="0"
+    role="button"
+    aria-expanded={isExpanded}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+>
+    <div class="task-card-header">
+        <span class="priority-dot {priority}" title="{task.priority || 'medium'} priority"></span>
+        <span class="task-id">{task.id}</span>
+    </div>
+    <div class="task-title" title={task.title}>{truncate(task.title, 40)}</div>
+    <div class="task-meta">
+        {#if agent}
+            <span class="task-agent">
+                <span class="agent-badge {agent.color}">@{agent.short.toLowerCase()}</span>
+            </span>
+        {/if}
+        <span class="task-time">{formatRelativeTime(task.updated_at || task.created_at)}</span>
+    </div>
+    <div class="task-expanded-content">
+        <div class="task-description">{task.description || 'No description provided.'}</div>
+        <div class="task-actions">
+            <button class="btn btn-secondary task-view-btn" onclick={viewTask}>View File</button>
+        </div>
+    </div>
+</div>

package/bin/dashboard/frontend/src/lib/components/TasksPanel.svelte

@@ -0,0 +1,82 @@
+<script>
+    import { filteredTasks, tasksLoading, tasksError, currentTaskFilter, taskCounts, setTaskFilter } from '../stores/tasks.js';
+    import { refreshTasks } from '../stores/websocket.js';
+    import TaskCard from './TaskCard.svelte';
+
+    let refreshing = false;
+
+    async function handleRefresh() {
+        refreshing = true;
+        await refreshTasks();
+        refreshing = false;
+    }
+
+    function handleFilterClick(filter) {
+        setTaskFilter(filter);
+    }
+
+    const filters = [
+        { id: 'pending', label: 'Pending', countKey: 'pending' },
+        { id: 'in-progress', label: 'Progress', countKey: 'in-progress' },
+        { id: 'review', label: 'Review', countKey: 'review' },
+        { id: 'done', label: 'Done', countKey: 'done' },
+    ];
+</script>
+
+<section id="tasks-panel" class="panel tasks-panel" aria-labelledby="tasks-heading" tabindex="-1">
+    <div class="panel-header">
+        <h2 id="tasks-heading" class="panel-title">TASKS</h2>
+        <button
+            class="panel-refresh"
+            class:loading={refreshing}
+            onclick={handleRefresh}
+            aria-label="Refresh tasks"
+        >
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M23 4v6h-6M1 20v-6h6"/>
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+            </svg>
+        </button>
+    </div>
+    <div class="tasks-filters" role="tablist" aria-label="Task status filters">
+        {#each filters as filter}
+            <button
+                class="filter-tab"
+                class:active={$currentTaskFilter === filter.id}
+                role="tab"
+                aria-selected={$currentTaskFilter === filter.id}
+                data-filter={filter.id}
+                onclick={() => handleFilterClick(filter.id)}
+            >
+                {filter.label} <span class="filter-count">{$taskCounts[filter.countKey]}</span>
+            </button>
+        {/each}
+    </div>
+
+    {#if $tasksLoading}
+        <div class="loading-state">
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+            <div class="skeleton-card"></div>
+        </div>
+    {:else if $tasksError}
+        <div class="error-state">
+            <div class="error-icon" aria-hidden="true">!</div>
+            <p class="error-title">Failed to load tasks</p>
+            <p class="error-message">{$tasksError}</p>
+            <button class="btn btn-secondary" onclick={handleRefresh}>Retry</button>
+        </div>
+    {:else if $filteredTasks.length === 0}
+        <div class="empty-state">
+            <div class="empty-icon" aria-hidden="true">&#x2713;</div>
+            <p class="empty-title">All caught up!</p>
+            <p class="empty-subtitle">No pending tasks</p>
+        </div>
+    {:else}
+        <div id="tasks-list" class="panel-content tasks-list" role="tabpanel" aria-busy="false">
+            {#each $filteredTasks as task (task.id)}
+                <TaskCard {task} />
+            {/each}
+        </div>
+    {/if}
+</section>

package/bin/dashboard/frontend/src/lib/components/Toast.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { toasts, removeToast } from '../stores/toast.js';
+
+    const icons = {
+        success: '\u2713',
+        error: '\u2717',
+        info: 'i',
+        warning: '!',
+    };
+
+    function handleAction(toast, action, index) {
+        if (action.action) {
+            action.action();
+        }
+        removeToast(toast.id);
+    }
+
+    function handleClose(toastId) {
+        removeToast(toastId);
+    }
+</script>
+
+<div id="toast-container" class="toast-container" role="status" aria-live="polite" aria-atomic="true">
+    {#each $toasts as toast (toast.id)}
+        <div class="toast {toast.type}" id={toast.id}>
+            <div class="toast-icon">{icons[toast.type] || 'i'}</div>
+            <div class="toast-content">
+                <div class="toast-title">{toast.title}</div>
+                {#if toast.message}
+                    <div class="toast-message">{toast.message}</div>
+                {/if}
+                {#if toast.actions && toast.actions.length > 0}
+                    <div class="toast-actions">
+                        {#each toast.actions as action, index}
+                            <button class="toast-action" onclick={() => handleAction(toast, action, index)}>
+                                {action.label}
+                            </button>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+            <button class="toast-close" onclick={() => handleClose(toast.id)} aria-label="Dismiss">&times;</button>
+        </div>
+    {/each}
+</div>

package/bin/dashboard/frontend/src/lib/stores/agents.js

@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store';
+
+// Agent data store
+export const agents = writable([]);
+export const agentsLoading = writable(true);
+export const agentsError = writable(null);
+
+// Agent configuration
+export const AGENTS = {
+    'planning-hub': { name: 'Planning Hub', short: 'Hub', icon: 'H', color: 'hub' },
+    'hub': { name: 'Planning Hub', short: 'Hub', icon: 'H', color: 'hub' },
+    'anvil': { name: 'Anvil', short: 'Anvil', icon: 'A', color: 'anvil' },
+    'furnace': { name: 'Furnace', short: 'Furnace', icon: 'F', color: 'furnace' },
+    'crucible': { name: 'Crucible', short: 'Crucible', icon: 'C', color: 'crucible' },
+    'scribe': { name: 'Scribe', short: 'Scribe', icon: 'S', color: 'scribe' },
+    'temper': { name: 'Temper', short: 'Temper', icon: 'T', color: 'temper' },
+    'ember': { name: 'Ember', short: 'Ember', icon: 'E', color: 'ember' },
+    'architect': { name: 'Architect', short: 'Arch', icon: 'Ar', color: 'architect' },
+    'aegis': { name: 'Aegis', short: 'Aegis', icon: 'Ae', color: 'aegis' },
+    'pixel': { name: 'Pixel', short: 'Pixel', icon: 'P', color: 'pixel' },
+    'oracle': { name: 'Oracle', short: 'Oracle', icon: 'O', color: 'oracle' },
+    'loki':   { name: 'Loki',   short: 'Loki',   icon: 'L', color: 'loki' },
+};
+
+// Helper to get agent config
+export function getAgentConfig(agentName) {
+    if (!agentName) return null;
+    return AGENTS[agentName.toLowerCase()] || {
+        name: agentName,
+        short: agentName.charAt(0).toUpperCase(),
+        icon: agentName.charAt(0).toUpperCase(),
+        color: '',
+    };
+}

package/bin/dashboard/frontend/src/lib/stores/issues.js

@@ -0,0 +1,54 @@
+import { writable } from 'svelte/store';
+
+// Issue data store
+export const issues = writable([]);
+export const issuesLoading = writable(true);
+export const issuesError = writable(null);
+export const issuesCollapsed = writable(false);
+
+// Dispatch modal state
+export const pendingDispatch = writable(null);
+export const dispatchLoading = writable(false);
+export const dispatchError = writable(null);
+
+// Issue category configuration
+export const ISSUE_CATEGORIES = {
+    'doc': { label: 'DOC', icon: 'D', agent: 'scribe', priority: 'medium' },
+    'test': { label: 'TEST', icon: 'T', agent: 'crucible', priority: 'high' },
+    'sec': { label: 'SEC', icon: 'S', agent: 'aegis', priority: 'critical' },
+    'cov': { label: 'COV', icon: 'C', agent: 'crucible', priority: 'medium' },
+    'todo': { label: 'TODO', icon: 'TD', agent: null, priority: 'low' },
+    'review': { label: 'REVIEW', icon: 'R', agent: 'sentinel', priority: 'high' },
+};
+
+// Helper to get category config
+export function getCategoryConfig(category) {
+    return ISSUE_CATEGORIES[category] || ISSUE_CATEGORIES.todo;
+}
+
+// Generate task ID
+export function generateTaskId() {
+    const timestamp = Date.now().toString(36);
+    const random = Math.random().toString(36).slice(2, 6);
+    return `AUTO-${timestamp}-${random}`;
+}
+
+// Actions
+export function openDispatchModal(issue) {
+    pendingDispatch.set(issue);
+    dispatchError.set(null);
+}
+
+export function closeDispatchModal() {
+    pendingDispatch.set(null);
+    dispatchLoading.set(false);
+    dispatchError.set(null);
+}
+
+export function toggleIssuesCollapse() {
+    issuesCollapsed.update(v => !v);
+}
+
+export function removeIssue(issueId) {
+    issues.update(items => items.filter(i => i.id !== issueId));
+}

package/bin/dashboard/frontend/src/lib/stores/notifications.js

@@ -0,0 +1,48 @@
+import { writable, derived } from 'svelte/store';
+
+// Notification data store
+export const notifications = writable([]);
+
+// Group notifications by date
+export const groupedNotifications = derived(notifications, ($notifications) => {
+    const today = new Date().toDateString();
+    const yesterday = new Date(Date.now() - 86400000).toDateString();
+
+    const grouped = {
+        today: [],
+        yesterday: [],
+        older: [],
+    };
+
+    $notifications.forEach(n => {
+        const date = new Date(n.timestamp || n.created_at).toDateString();
+        if (date === today) grouped.today.push(n);
+        else if (date === yesterday) grouped.yesterday.push(n);
+        else grouped.older.push(n);
+    });
+
+    return grouped;
+});
+
+// Actions
+export function addNotification(notification) {
+    const newNotification = {
+        id: `notif-${Date.now()}`,
+        timestamp: new Date().toISOString(),
+        ...notification,
+    };
+
+    notifications.update(items => {
+        const updated = [newNotification, ...items];
+        // Keep last 50 notifications
+        return updated.slice(0, 50);
+    });
+}
+
+export function dismissNotification(id) {
+    notifications.update(items => items.filter(n => n.id !== id));
+}
+
+export function clearAllNotifications() {
+    notifications.set([]);
+}

package/bin/dashboard/frontend/src/lib/stores/tasks.js

@@ -0,0 +1,63 @@
+import { writable, derived } from 'svelte/store';
+
+// Task data store
+export const tasks = writable([]);
+export const tasksLoading = writable(true);
+export const tasksError = writable(null);
+export const currentTaskFilter = writable('pending');
+export const selectedTaskId = writable(null);
+
+// Derived stores for filtered tasks and counts
+export const filteredTasks = derived(
+    [tasks, currentTaskFilter],
+    ([$tasks, $filter]) => {
+        return $tasks.filter(task => {
+            const status = (task.status || '').toLowerCase().replace(/[_\s]/g, '-');
+            if ($filter === 'pending') {
+                return status === 'pending' || !status;
+            }
+            if ($filter === 'in-progress') {
+                return status === 'in-progress' || status === 'working';
+            }
+            if ($filter === 'review') {
+                return status === 'review' || status === 'in-review' || status === 'needs-review';
+            }
+            if ($filter === 'done') {
+                return status === 'done' || status === 'completed';
+            }
+            return true;
+        });
+    }
+);
+
+export const taskCounts = derived(tasks, ($tasks) => {
+    const counts = {
+        pending: 0,
+        'in-progress': 0,
+        review: 0,
+        done: 0,
+    };
+
+    $tasks.forEach(task => {
+        const status = (task.status || '').toLowerCase().replace(/[_\s]/g, '-');
+        if (status === 'pending' || !status) counts.pending++;
+        else if (status === 'in-progress' || status === 'working') counts['in-progress']++;
+        else if (status === 'review' || status === 'in-review' || status === 'needs-review') counts.review++;
+        else if (status === 'done' || status === 'completed') counts.done++;
+    });
+
+    return counts;
+});
+
+// Actions
+export function setTaskFilter(filter) {
+    currentTaskFilter.set(filter);
+}
+
+export function toggleTaskExpand(taskId) {
+    selectedTaskId.update(current => current === taskId ? null : taskId);
+}
+
+export function clearSelectedTask() {
+    selectedTaskId.set(null);
+}

package/bin/dashboard/frontend/src/lib/stores/theme.js

@@ -0,0 +1,33 @@
+import { writable } from 'svelte/store';
+
+const STORAGE_KEY = 'vibe-forge-theme';
+
+// Get initial theme from localStorage or default to dark
+function getInitialTheme() {
+    if (typeof localStorage !== 'undefined') {
+        return localStorage.getItem(STORAGE_KEY) || 'dark';
+    }
+    return 'dark';
+}
+
+// Theme store
+export const theme = writable(getInitialTheme());
+
+// Initialize theme on document
+export function initTheme() {
+    const savedTheme = getInitialTheme();
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    theme.set(savedTheme);
+}
+
+// Toggle theme
+export function toggleTheme() {
+    theme.update(current => {
+        const newTheme = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', newTheme);
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, newTheme);
+        }
+        return newTheme;
+    });
+}

package/bin/dashboard/frontend/src/lib/stores/toast.js

@@ -0,0 +1,35 @@
+import { writable } from 'svelte/store';
+
+const TOAST_DURATION = 5000;
+
+// Toast store
+export const toasts = writable([]);
+
+// Show toast
+export function showToast({ type = 'info', title, message, actions = [], duration = TOAST_DURATION }) {
+    const toastId = `toast-${Date.now()}`;
+
+    const toast = {
+        id: toastId,
+        type,
+        title,
+        message,
+        actions,
+    };
+
+    toasts.update(items => [...items, toast]);
+
+    // Auto-dismiss after duration
+    if (duration > 0) {
+        setTimeout(() => {
+            removeToast(toastId);
+        }, duration);
+    }
+
+    return toastId;
+}
+
+// Remove toast
+export function removeToast(toastId) {
+    toasts.update(items => items.filter(t => t.id !== toastId));
+}

package/bin/dashboard/frontend/src/lib/stores/ui.js

@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store';
+
+// UI State
+export const focusedPanel = writable(null);
+export const focusedItemIndex = writable(-1);
+export const mobileActivePanel = writable('tasks');
+export const showKeyboardHelp = writable(false);
+
+// Actions
+export function setFocusedPanel(panel) {
+    focusedPanel.set(panel);
+    focusedItemIndex.set(-1);
+}
+
+export function setMobilePanel(panel) {
+    mobileActivePanel.set(panel);
+}
+
+export function openKeyboardHelp() {
+    showKeyboardHelp.set(true);
+}
+
+export function closeKeyboardHelp() {
+    showKeyboardHelp.set(false);
+}