Branding & Identity
Logos, color, typography, and design systems for scale.
-
-
-
-
-
-
- ![Drawbridge]()
- Drawbridge
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `;
-
- document.body.appendChild(moat);
- console.log('Moat: Sidebar element added to DOM');
-
- // Event listeners
- moat.querySelector('.float-moat-close').addEventListener('click', hideMoat);
-
- // Tools dropdown button functionality
- const toolsDropdown = moat.querySelector('.float-moat-tools-dropdown');
- if (toolsDropdown) {
- toolsDropdown.addEventListener('click', function(e) {
- e.stopPropagation();
- console.log('π§ Moat: Tools button clicked, showing tools menu');
- showToolsMenu();
- });
- }
-
- // Project dropdown button functionality
- const projectDropdown = moat.querySelector('.float-moat-project-dropdown');
-
- if (projectDropdown) {
- projectDropdown.addEventListener('click', function(e) {
- e.stopPropagation();
-
- // If not connected, trigger connection flow
- if (connectionManager.getState().status === 'not-connected') {
- handleProjectButton();
- return;
- }
-
- // If connected, show the dynamic project menu
- showProjectMenu();
- });
- }
-
- // More button functionality
- const moreBtn = moat.querySelector('.float-moat-more-btn');
- if (moreBtn) {
- moreBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- showMoreMenu();
- });
- }
-
- // Connect project inline buttons
- moat.querySelector('.float-connect-cancel').addEventListener('click', handleConnectCancel);
- moat.querySelector('.float-connect-confirm').addEventListener('click', handleConnectConfirm);
-
- // Tab system event listeners for both sets of tabs
- const tabButtons = moat.querySelectorAll('.float-tab-btn');
- tabButtons.forEach(button => {
- button.addEventListener('click', function(e) {
- e.stopPropagation();
- const status = button.dataset.status;
- handleTabClick(status);
- });
- });
-
- // Initialize position from saved preference
- initializePosition();
-
- // Initialize logo based on current theme
- initializeLogo();
-
- // Initialize content visibility based on current project status
- initializeContentVisibility();
-
- // Set up connection manager UI update callback
- connectionManager.onStateChange(() => {
- updateConnectionUI();
- // Update content visibility when connection state changes
- if (moat) {
- initializeContentVisibility();
- }
- });
-
- console.log('Moat: Event listeners attached');
- }
-
- // Handle project button click
- async function handleProjectButton() {
- const state = connectionManager.getState();
- console.log('π§ Moat: Connect button clicked! Connection state:', state);
-
- if (state.status === 'not-connected') {
- console.log('Moat: Triggering project setup...');
- // Trigger the content script project setup
- window.dispatchEvent(new CustomEvent('moat:setup-project'));
- // Note: Connection event will be handled by the permanent listener below
- }
- // Note: Connected state dropdown is now handled directly by the click event
- }
-
- // Show setup confirmation
- async function showSetupConfirmation() {
- console.log('Moat: Creating setup confirmation modal...');
-
- return new Promise((resolve) => {
- const modal = document.createElement('div');
- modal.className = 'float-modal-overlay';
- modal.innerHTML = `
-
-
-
-
-
- π Connect Moat to Your Project
-Moat will create a .moat directory in your project with markdown task logging and Cursor integration.
-
-
- β
- Markdown task list (.moat/moat-tasks.md)
-
-
- β
- Cursor integration (.moat/.moat-stream.jsonl)
-
-
- β
- Git-ignored by default
-
- You'll select your project folder in the next step.
-
-
-
-
-
-
- `;
-
- document.body.appendChild(modal);
- console.log('Moat: Modal added to page, setting up button listeners...');
-
- modal.querySelector('.float-modal-cancel').addEventListener('click', () => {
- console.log('Moat: User clicked Cancel');
- modal.remove();
- resolve(false);
- });
-
- modal.querySelector('.float-modal-confirm').addEventListener('click', () => {
- console.log('Moat: User clicked Connect Project');
- modal.remove();
- resolve(true);
- });
- });
- }
-
- // Close all open menus
- function closeAllMenus() {
- const projectMenu = document.querySelector('.float-project-menu');
- const moreMenu = document.querySelector('.float-more-menu');
- if (projectMenu) projectMenu.remove();
- if (moreMenu) moreMenu.remove();
- // Note: tools menu uses same class as project menu, so it's already handled above
- }
-
- // Shared function for positioning menus with smart placement
- function positionMenu(menu, button) {
- const rect = button.getBoundingClientRect();
-
- // Append menu off-screen first to measure its height
- menu.style.position = 'fixed';
- menu.style.top = '-9999px';
- menu.style.right = '0';
- menu.style.opacity = '0';
- menu.style.transform = 'translateY(-8px) scale(0.95)';
- document.body.appendChild(menu);
-
- // Get actual menu height
- const menuHeight = menu.offsetHeight || 200; // Fallback estimate
-
- // Calculate position above button, ensuring it doesn't go off-screen
- const spaceAbove = rect.top;
- const spaceBelow = window.innerHeight - rect.bottom;
- const maxHeight = Math.min(menuHeight, spaceAbove - 10, window.innerHeight - 20);
-
- // Always use 4px spacing (ensures 4px from top of plugin drawer when docked at bottom)
- const spacing = 4;
-
- if (spaceAbove >= menuHeight + spacing || spaceAbove > spaceBelow) {
- // Position above the button with 4px spacing
- menu.style.top = `${rect.top - menuHeight - spacing}px`;
- menu.style.maxHeight = `${maxHeight}px`;
- menu.style.transformOrigin = 'bottom right';
- } else {
- // If not enough space above, position below but ensure it's scrollable
- menu.style.top = `${rect.bottom + spacing}px`;
- menu.style.maxHeight = `${Math.min(menuHeight, window.innerHeight - rect.bottom - 20)}px`;
- menu.style.transformOrigin = 'top right';
- }
-
- menu.style.right = `${window.innerWidth - rect.right}px`;
- menu.style.minWidth = `${rect.width}px`;
-
- // Trigger animation
- requestAnimationFrame(() => {
- menu.style.transition = 'opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)';
- menu.style.opacity = '1';
- menu.style.transform = 'translateY(0) scale(1)';
- });
- }
-
- // Show tools menu
- function showToolsMenu() {
- // Close all menus first to ensure only one is open at a time
- closeAllMenus();
-
- const menu = document.createElement('div');
- menu.className = 'float-project-menu'; // Reuse same styling
- menu.innerHTML = `
-
-
- `;
-
- // Position menu below button (or above if docked at bottom)
- const button = moat.querySelector('.float-moat-tools-dropdown');
- if (!button) {
- console.warn('Could not find tools dropdown button');
- return;
- }
-
- // Use shared positioning function
- positionMenu(menu, button);
-
- // Handle menu clicks
- menu.addEventListener('click', async (e) => {
- const item = e.target.closest('.float-project-menu-item');
- if (item) {
- const action = item.dataset.action;
- if (action === 'comment') {
- // Trigger comment mode via custom event (content script listens for this)
- window.dispatchEvent(new CustomEvent('moat:trigger-comment-mode'));
- } else if (action === 'rectangle') {
- // Trigger rectangle drawing mode via custom event
- window.dispatchEvent(new CustomEvent('moat:trigger-rectangle-mode'));
- }
- }
- menu.remove();
- });
-
- // Close menu on outside click
- setTimeout(() => {
- document.addEventListener('click', function closeMenu(e) {
- if (!menu.contains(e.target) && !button.contains(e.target)) {
- menu.remove();
- document.removeEventListener('click', closeMenu);
- }
- });
- }, 0);
- }
-
- // Show project menu
- function showProjectMenu() {
- // Close all menus first to ensure only one is open at a time
- closeAllMenus();
-
- const menu = document.createElement('div');
- menu.className = 'float-project-menu';
- menu.innerHTML = `
-
-
-
-
- `;
-
- // Position menu below button (or above if docked at bottom)
- const button = moat.querySelector('.float-moat-project-dropdown');
- if (!button) {
- console.warn('Could not find project dropdown button');
- return;
- }
-
- // Use shared positioning function
- positionMenu(menu, button);
-
- // Update badge count for clear screenshots option
- if (canUseNewTaskSystem() && window.taskStore) {
- const completedTasks = window.taskStore.getTasks().filter(t => t.status === 'done' && t.screenshotPath);
- const badge = menu.querySelector('#clearScreenshotsBadge');
- if (badge && completedTasks.length > 0) {
- badge.textContent = completedTasks.length;
- badge.style.display = 'inline-block';
- }
- }
-
- // Handle menu clicks
- menu.addEventListener('click', async (e) => {
- const item = e.target.closest('.float-project-menu-item');
- if (item) {
- const action = item.dataset.action;
- if (action === 'disconnect') {
- disconnectProject();
- } else if (action === 'export') {
- exportAnnotations();
- } else if (action === 'refresh') {
- refreshTasks(false); // Manual refresh should show notifications
- } else if (action === 'clear-screenshots') {
- await clearCompletedScreenshots();
- }
- }
- menu.remove();
- });
-
- // Close menu on outside click
- setTimeout(() => {
- document.addEventListener('click', function closeMenu(e) {
- if (!menu.contains(e.target) && !button.contains(e.target)) {
- menu.remove();
- document.removeEventListener('click', closeMenu);
- }
- });
- }, 0);
- }
-
- // Show more menu
- function showMoreMenu() {
- // Close all menus first to ensure only one is open at a time
- closeAllMenus();
-
- // Determine current position and mode states
- const currentPosition = moatPosition;
- const isDarkMode = getCurrentTheme() === 'dark';
-
- // Create position options based on current position
- let positionOptions = [];
-
- if (currentPosition === 'right') {
- positionOptions = [
- {
- text: 'Dock to bottom',
- action: 'set-position-bottom',
- icon: ``
- },
- {
- text: 'Dock to left',
- action: 'set-position-left',
- icon: ``
- }
- ];
- } else if (currentPosition === 'bottom') {
- positionOptions = [
- {
- text: 'Dock to right',
- action: 'set-position-right',
- icon: ``
- },
- {
- text: 'Dock to left',
- action: 'set-position-left',
- icon: ``
- }
- ];
- } else {
- positionOptions = [
- {
- text: 'Dock to right',
- action: 'set-position-right',
- icon: ``
- },
- {
- text: 'Dock to bottom',
- action: 'set-position-bottom',
- icon: ``
- }
- ];
- }
-
- const modeText = isDarkMode ? 'Light mode' : 'Dark mode';
-
- const modeIcon = isDarkMode ?
- `` :
- ``;
-
- // Build menu HTML with position options
- let menuHTML = '';
-
- // Add position options
- positionOptions.forEach(option => {
- menuHTML += `
-
- `;
- });
-
- // Add theme toggle
- menuHTML += `
-
- `;
-
- const menu = document.createElement('div');
- menu.className = 'float-more-menu';
- menu.innerHTML = menuHTML;
-
- // Position menu using shared positioning function
- const button = moat.querySelector('.float-moat-more-btn');
- if (!button) {
- console.warn('Could not find more button');
- return;
- }
-
- // Use shared positioning function
- positionMenu(menu, button);
-
- // Handle menu clicks
- menu.addEventListener('click', (e) => {
- const item = e.target.closest('.float-more-menu-item');
- if (item) {
- const action = item.dataset.action;
-
- // Remove menu immediately before performing action
- menu.remove();
-
- if (action === 'set-position-right') {
- setMoatPosition('right');
- localStorage.setItem('moat.position', 'right');
- showNotification('Moat moved to right');
- } else if (action === 'set-position-bottom') {
- setMoatPosition('bottom');
- localStorage.setItem('moat.position', 'bottom');
- showNotification('Moat moved to bottom');
- } else if (action === 'set-position-left') {
- setMoatPosition('left');
- localStorage.setItem('moat.position', 'left');
- showNotification('Moat moved to left');
- } else if (action === 'toggle-theme') {
- toggleTheme();
- }
- } else {
- // If clicking outside menu items but within menu, still close it
- menu.remove();
- }
- });
-
- // Close menu on outside click
- setTimeout(() => {
- document.addEventListener('click', function closeMenu(e) {
- if (!menu.contains(e.target) && !button.contains(e.target)) {
- menu.remove();
- document.removeEventListener('click', closeMenu);
- }
- });
- }, 0);
- }
-
- // Disconnect project
- function disconnectProject() {
- console.log('π§ Moat: Starting project disconnect process...');
-
- // Clear all project-related data
- localStorage.removeItem(`moat.project.${window.location.origin}`);
-
- // Clear current session task queue for clean slate
- localStorage.removeItem('moat.queue');
-
- // Clear persistence system (IndexedDB)
- if (window.moatPersistence) {
- const projectId = `project_${window.location.origin}`;
- window.moatPersistence.removeDirectoryHandle(projectId).then(() => {
- console.log('π§ Moat: Persistence system cleared');
- }).catch(error => {
- console.warn('β οΈ Moat: Failed to clear persistence system:', error);
- });
- }
-
- // Reset content script connection state flag
- window.dispatchEvent(new CustomEvent('moat:reset-connection-state'));
-
- // Clear notification deduplication history to allow reconnection notifications
- notificationDeduplicator.recentNotifications.clear();
- // Also clear header notification queue for clean disconnect
- headerNotificationQueue = [];
- const notification = document.querySelector('.float-header-notification');
- if (notification) notification.remove();
- console.log('π§ Moat: Notification history cleared for fresh reconnection');
-
- // Reset animation system when disconnecting
- resetFloatingAnimation();
-
- // Clear UI task display for clean disconnect experience
- if (moat) {
- const queueContainer = moat.querySelector('.float-moat-queue');
- if (queueContainer) {
- queueContainer.innerHTML = '';
- }
- }
-
- // Update connection manager state
- connectionManager.setDisconnected();
-
- // Show clean empty state when disconnected
- renderEmptySidebar();
-
- showNotification('Project disconnected', 'info', 'disconnect');
- console.log('π§ Moat: Project disconnect process completed');
- }
-
- // Clear screenshots from completed tasks
- async function clearCompletedScreenshots() {
- if (!canUseNewTaskSystem() || !window.taskStore) {
- showNotification('Screenshots can only be cleared in new task system', 'error');
- return;
- }
-
- try {
- // Get stats before clearing
- const stats = window.taskStore.getTaskStats();
- const completedCount = stats['done'] || 0;
-
- if (completedCount === 0) {
- showNotification('No completed tasks found', 'info');
- return;
- }
-
- // Count how many completed tasks have screenshots
- const completedTasks = window.taskStore.getTasks().filter(t => t.status === 'done' && t.screenshotPath);
-
- if (completedTasks.length === 0) {
- showNotification('No screenshots to clear', 'info');
- return;
- }
-
- // Show confirmation dialog
- const confirmed = await showClearScreenshotsConfirmation(completedTasks.length);
- if (!confirmed) return;
-
- // Show loading notification
- showNotification('Clearing screenshots...', 'info');
-
- // Delete screenshots
- const result = await window.taskStore.deleteCompletedScreenshots();
-
- if (result.success) {
- // Regenerate markdown to reflect cleared screenshot paths
- if (window.markdownGenerator) {
- const allTasks = window.taskStore.getAllTasksChronological();
- await window.markdownGenerator.rebuildMarkdownFile(allTasks);
- }
-
- // Show success message
- const message = `Cleared ${result.deletedCount} screenshot${result.deletedCount !== 1 ? 's' : ''}`;
- showNotification(message, 'success');
-
- console.log('β
Screenshots cleared:', result);
-
- // Refresh the sidebar to show updated tasks
- await refreshTasks(true);
- } else {
- showNotification('Failed to clear screenshots', 'error');
- }
-
- } catch (error) {
- console.error('Error clearing screenshots:', error);
- showNotification(`Error: ${error.message}`, 'error');
- }
- }
-
- // Show confirmation dialog for clearing screenshots
- function showClearScreenshotsConfirmation(count) {
- return new Promise((resolve) => {
- const modal = document.createElement('div');
- modal.className = 'float-modal-overlay';
- modal.innerHTML = `
- π Connect Moat to Your Project
-Moat will create a .moat directory in your project with markdown task logging and Cursor integration.
-
- β
Markdown task list (.moat/moat-tasks.md)
- β
Cursor integration (.moat/.moat-stream.jsonl)
- β
Git-ignored by default
- You'll select your project folder in the next step.
-
-
-
-
-
-
- `;
-
- document.body.appendChild(modal);
-
- modal.addEventListener('click', (e) => {
- const button = e.target.closest('[data-action]');
- if (button) {
- const action = button.dataset.action;
- modal.remove();
- resolve(action === 'confirm');
- } else if (e.target === modal) {
- modal.remove();
- resolve(false);
- }
- });
- });
- }
-
- // Clear current session annotations (debugging helper)
- function clearCurrentSession() {
- localStorage.removeItem('moat.queue');
- if (isVisible) {
- renderQueue();
- }
- showNotification('Current session cleared');
- console.log('Moat: Current session annotations cleared');
- }
-
- // Tab system functions
- function handleTabClick(status) {
- console.log('π Moat: Tab clicked:', status);
-
- // Update current filter
- currentTabFilter = status;
-
- // Update tab active states
- updateTabActiveStates(status);
-
- // Re-render tasks with new filter
- applyTabFilter();
- }
-
- function updateTabActiveStates(activeStatus) {
- if (!moat) return;
-
- // Update both sets of tabs (header and below-header)
- const tabButtons = moat.querySelectorAll('.float-tab-btn');
- tabButtons.forEach(button => {
- const buttonStatus = button.dataset.status;
- if (buttonStatus === activeStatus) {
- button.classList.add('float-tab-active');
- } else {
- button.classList.remove('float-tab-active');
- }
- });
- }
-
- async function applyTabFilter() {
- if (!moat) return;
-
- console.log('π Moat: Applying tab filter:', currentTabFilter);
-
- // Show appropriate tabs when filtering tasks
- const tabsHeaderContainer = moat.querySelector('.float-moat-tabs-header');
- const tabsBelowContainer = moat.querySelector('.float-moat-tabs-below-header');
-
- if (tabsHeaderContainer) {
- tabsHeaderContainer.classList.remove('hidden');
- }
- if (tabsBelowContainer) {
- tabsBelowContainer.classList.remove('hidden');
- }
-
- // Get all tasks
- let allTasks = [];
- try {
- if (canUseNewTaskSystem() && window.taskStore) {
- allTasks = window.taskStore.getAllTasksChronological();
- } else {
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- allTasks = queue.map(convertAnnotationToTask);
- }
- } catch (error) {
- console.error('π Moat: Error loading tasks for filtering:', error);
- allTasks = [];
- }
-
- // Filter tasks by current tab
- const filteredTasks = allTasks.filter(task => task.status === currentTabFilter);
-
- console.log(`π Moat: Filtered ${allTasks.length} tasks to ${filteredTasks.length} for status '${currentTabFilter}'`);
-
- // Render filtered tasks
- renderFilteredTasks(filteredTasks);
-
- // Update badge counts
- updateTabBadges(allTasks);
- }
-
- function renderFilteredTasks(tasks) {
- if (!moat) return;
-
- const queueContainer = moat.querySelector('.float-moat-queue');
- if (!queueContainer) return;
-
- if (tasks.length === 0) {
- // Show empty state for this specific filter
- queueContainer.innerHTML = `
- - Clear Screenshots? -
-
- This will delete ${count} screenshot${count !== 1 ? 's' : ''} from completed tasks. The task data will be preserved.
-
- This action cannot be undone.
-
-
-
-
-
-
- `;
- return;
- }
-
- // Sort tasks (chronological order, oldest first)
- tasks.sort((a, b) => (a.timestamp || a.createdAt || 0) - (b.timestamp || b.createdAt || 0));
-
- // Render task items
- queueContainer.innerHTML = tasks.map(task => renderSimpleTaskItem(task)).join('');
- addAllTasksListeners();
- }
-
- function updateTabBadges(allTasks) {
- if (!moat) return;
-
- // Count tasks by status
- const counts = {
- 'to do': 0,
- 'doing': 0,
- 'done': 0
- };
-
- allTasks.forEach(task => {
- if (counts.hasOwnProperty(task.status)) {
- counts[task.status]++;
- }
- });
-
- // Update badge displays for both sets of tabs
- Object.entries(counts).forEach(([status, count]) => {
- const statusId = status.replace(' ', '');
-
- // Update header badges
- const headerBadge = moat.querySelector(`#float-badge-${statusId}`);
- if (headerBadge) {
- if (count > 0) {
- headerBadge.textContent = count;
- headerBadge.style.display = 'inline-block';
- } else {
- headerBadge.style.display = 'none';
- }
- }
-
- // Update below-header badges
- const belowBadge = moat.querySelector(`#float-badge-${statusId}-below`);
- if (belowBadge) {
- if (count > 0) {
- belowBadge.textContent = count;
- belowBadge.style.display = 'inline-block';
- } else {
- belowBadge.style.display = 'none';
- }
- }
- });
-
- console.log('π Moat: Updated tab badges:', counts);
- }
-
- // Theme management functions
- function getCurrentTheme() {
- return localStorage.getItem('moat.theme') || 'light';
- }
-
- function setTheme(theme) {
- localStorage.setItem('moat.theme', theme);
- document.documentElement.setAttribute('data-moat-theme', theme);
- console.log('Moat: Theme set to', theme);
- }
-
- function toggleTheme() {
- const currentTheme = getCurrentTheme();
- const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
- setTheme(newTheme);
- updateLogo(); // Update logo when theme changes
- showNotification(`Switched to ${newTheme} mode`, 'info');
- }
-
- function initializeTheme() {
- const savedTheme = getCurrentTheme();
- document.documentElement.setAttribute('data-moat-theme', savedTheme);
- console.log('Moat: Theme initialized to', savedTheme);
- }
-
- // Logo management functions
- function updateLogo() {
- const logo = document.getElementById('moat-logo');
- if (!logo) return;
-
- const currentTheme = getCurrentTheme();
- const logoPath = currentTheme === 'dark'
- ? chrome.runtime.getURL('icons/drawbridge-icon-dark.svg')
- : chrome.runtime.getURL('icons/drawbridge-icon-light.svg');
-
- logo.src = logoPath;
- console.log('Moat: Logo updated for', currentTheme, 'theme');
- }
-
- function initializeLogo() {
- // Initialize logo after DOM is ready
- setTimeout(updateLogo, 0);
- }
-
- // Toggle Moat position (legacy function - now handled by direct position setting)
- function toggleMoatPosition() {
- // This function is kept for backward compatibility but the cycling behavior
- // has been replaced with direct position selection in the more menu
- console.log('Moat: toggleMoatPosition called (legacy function)');
- }
-
- // Set Moat position
- function setMoatPosition(position) {
- moatPosition = position;
-
- if (!moat) return;
-
- // Reset animations when changing position
- resetFloatingAnimation();
-
- // Remove existing position classes
- moat.classList.remove('float-moat-right', 'float-moat-bottom', 'float-moat-left');
-
- // Add new position class
- if (position === 'bottom') {
- moat.classList.add('float-moat-bottom');
- } else if (position === 'left') {
- moat.classList.add('float-moat-left');
- } else {
- moat.classList.add('float-moat-right');
- }
-
- // Note: Position button has been replaced with more button
- // Position-specific functionality is now handled through the more menu
-
- // Re-initialize tracking for new position
- if (isVisible) {
- initializeTaskTracking();
- }
- }
-
- // Initialize position from storage
- function initializePosition() {
- const savedPosition = localStorage.getItem('moat.position') || 'bottom';
- setMoatPosition(savedPosition);
- }
-
- // Restore visibility state from localStorage
- async function restoreVisibilityState() {
- const savedVisibility = localStorage.getItem('moat.visible');
- console.log('Moat: Restoring visibility state from localStorage:', savedVisibility);
-
- if (savedVisibility === 'true') {
- console.log('Moat: Auto-showing moat based on saved state');
- await showMoat();
- } else {
- console.log('Moat: Moat will remain hidden based on saved state');
- }
- }
-
- // Initialize content visibility after Moat creation
- function initializeContentVisibility() {
- const state = connectionManager.getState();
- console.log('Moat: Initializing content visibility, connection state:', state);
-
- // Always show the dynamic empty state which adapts to connection status
- // This shows "Connect to a local folder" when disconnected
- // or "No annotations yet" when connected but no tasks
- renderEmptySidebar();
- }
-
- // Initialize moat with persistence
- async function initializeMoat() {
- console.log('Moat: Starting moat initialization...');
-
- // Initialize theme before creating UI
- initializeTheme();
-
- // Create moat if it doesn't exist
- if (!moat) {
- createMoat();
- }
-
- // Update logo after UI is created and theme is initialized
- updateLogo();
-
- // Give content script time to restore persistence connection (500ms delay)
- console.log('π§ Moat: Waiting for content script to restore connection...');
- await new Promise(resolve => setTimeout(resolve, 500));
-
- // Ensure UI reflects current state before verification
- updateConnectionUI();
-
- // Initialize project connection status after delay - this will trigger UI updates through callbacks
- console.log('π§ Moat: Starting connection verification with proper timing...');
- await verifyInitialConnection();
-
- // Restore visibility state after connection is verified
- await restoreVisibilityState();
-
- // Start DOM monitoring to ensure moat persistence
- startDOMMonitoring();
-
- console.log('Moat: Moat initialization complete');
- }
-
- // Monitor DOM to ensure moat doesn't disappear
- function startDOMMonitoring() {
- // Check every 2 seconds if moat is still in DOM when it should be visible
- setInterval(() => {
- const savedVisibility = localStorage.getItem('moat.visible');
- if (savedVisibility === 'true') {
- // Check if moat element still exists in DOM
- const existingMoat = document.getElementById('moat-moat');
- if (!existingMoat && isVisible) {
- console.log('Moat: Moat disappeared from DOM, recreating...');
- createMoat();
- moat.classList.add('float-moat-visible');
- showNotification('Moat restored');
- } else if (existingMoat && !existingMoat.classList.contains('float-moat-visible') && isVisible) {
- console.log('Moat: Moat exists but not visible, restoring visibility...');
- existingMoat.classList.add('float-moat-visible');
- }
- }
- }, 2000);
-
- console.log('Moat: DOM monitoring started');
- }
-
- // Handle connect project cancel
- function handleConnectCancel() {
- renderEmptySidebar();
- }
-
- // Handle connect project confirm
- function handleConnectConfirm() {
- // Trigger the project setup flow
- window.dispatchEvent(new CustomEvent('moat:setup-project'));
- }
-
- // Show empty state (no tasks)
- function showEmptyState() {
- console.log('Moat: Showing empty state');
- const connectContent = document.getElementById('moat-connect-content');
- const emptyState = document.getElementById('moat-empty-state');
-
- if (connectContent) {
- connectContent.style.display = 'none';
- console.log('Moat: Connect content hidden');
- }
- if (emptyState) {
- emptyState.style.display = 'block';
- console.log('Moat: Empty state shown');
- }
- }
-
- // Show connect project content
- function showConnectProjectContent() {
- console.log('Moat: Showing connect project content');
- const connectContent = document.getElementById('moat-connect-content');
- const emptyState = document.getElementById('moat-empty-state');
-
- if (connectContent) {
- connectContent.style.display = 'block';
- console.log('Moat: Connect content shown');
- }
- if (emptyState) {
- emptyState.style.display = 'none';
- console.log('Moat: Empty state hidden');
- }
- }
-
- // Update project status UI
- function updateProjectStatus(status, path) {
- console.log('π§ Moat: updateProjectStatus called with:', { status, path });
-
- // Update connection manager state
- connectionManager.updateState({ status, path });
-
- // Update UI immediately
- updateConnectionUI();
- }
-
- // Update connection UI based on connection manager state
- function updateConnectionUI() {
- if (!moat) {
- console.log('π§ Moat: No moat element found, cannot update UI');
- return;
- }
-
- const state = connectionManager.getState();
- console.log('π§ Moat: Updating UI with connection state:', state);
-
- const indicator = moat.querySelector('.float-project-indicator');
- const label = moat.querySelector('.float-project-label');
- const chevron = moat.querySelector('.float-project-chevron');
- const divider = moat.querySelector('.float-project-divider');
- const button = moat.querySelector('.float-moat-project-dropdown');
-
- console.log('π§ Moat: Found DOM elements:', {
- indicator: !!indicator,
- label: !!label,
- chevron: !!chevron,
- divider: !!divider,
- button: !!button
- });
-
- // Update indicator class
- if (indicator) {
- indicator.className = `float-project-indicator ${state.status === 'connected' ? 'float-project-connected' : 'float-project-disconnected'}`;
- }
-
- // Update label text
- if (label) {
- label.textContent = connectionManager.getDisplayName();
- console.log('π§ Moat: Set label text to:', label.textContent);
- }
-
- // Update tooltip
- if (button) {
- button.title = connectionManager.getTooltipText();
- console.log('π§ Moat: Set tooltip to:', button.title);
- }
-
- // Show/hide chevron and divider based on connection state
- const showChevron = connectionManager.shouldShowChevron();
- if (chevron) chevron.style.display = showChevron ? 'block' : 'none';
- if (divider) divider.style.display = showChevron ? 'block' : 'none';
-
- console.log('π§ Moat: UI update complete');
- }
-
- // Verify initial connection on page load
- async function verifyInitialConnection() {
- console.log('π§ Moat: Verifying initial connection...');
-
- // Use connection manager to verify connection
- const state = await connectionManager.verifyConnection();
-
- console.log('π§ Moat: Connection verification complete:', state);
-
- if (state.status === 'connected') {
- console.log('β
Moat: Connection verified and UI updated');
-
- // Load tasks after verified connection
- setTimeout(async () => {
- console.log('π Moat: Loading tasks after verified connection...');
- await refreshTasks(true); // Silent refresh after verification
- }, 500);
- } else {
- console.log('β Moat: No valid connection found');
- // Clear any stale localStorage data
- localStorage.removeItem(`moat.project.${window.location.origin}`);
- }
- }
-
-
-
- // AUTO-REFRESH SYSTEM: Automatically sync status every 3 seconds
- let autoRefreshInterval = null;
-
- function startAutoRefresh() {
- if (autoRefreshInterval) return; // Already running
-
- console.log('π Moat: Starting auto-refresh every 3 seconds');
- autoRefreshInterval = setInterval(async () => {
- const state = connectionManager.getState();
- if (state.status === 'connected' && isVisible) {
- try {
- await refreshTasks(true); // Silent refresh
- } catch (error) {
- console.warn('π Moat: Auto-refresh failed:', error);
- }
- }
- }, 3000);
- }
-
- function stopAutoRefresh() {
- if (autoRefreshInterval) {
- clearInterval(autoRefreshInterval);
- autoRefreshInterval = null;
- console.log('π Moat: Auto-refresh stopped');
- }
- }
-
- // Comprehensive refresh function for Tasks 3.1-3.10
- async function refreshTasks(silent = true) { // Default to silent to reduce notification spam
- if (!silent) {
- console.log('π Moat: Manual refresh triggered');
- }
- const startTime = performance.now();
-
- // Task 3.6: Visual loading state (only for manual refresh)
- if (!silent) {
- setRefreshLoadingState(true);
- showNotification('Refreshing tasks...');
- }
-
- try {
- // Task 3.3: Check if new TaskStore system is available
- if (canUseNewTaskSystem()) {
- console.log('π Moat: Using new TaskStore system for refresh');
- await refreshFromFiles();
- } else {
- console.log('π Moat: Using legacy system for refresh');
- await syncMarkdownTasksToSidebar();
- }
-
- // Task 3.9: Performance optimization (<100ms requirement)
- const duration = performance.now() - startTime;
- if (!silent) {
- console.log(`π Moat: Refresh completed in ${duration.toFixed(1)}ms`);
- }
-
- if (duration > 100) {
- console.warn(`π Moat: Refresh took ${duration.toFixed(1)}ms (exceeds 100ms target)`);
- }
-
- // Only show success notification for manual refreshes
- if (!silent) {
- showNotification('Tasks refreshed successfully');
- }
-
- } catch (error) {
- // Task 3.7: Error handling with user feedback (always show errors)
- console.error('π Moat: Refresh failed:', error);
- showNotification(`Refresh failed: ${error.message}`, 'error');
-
- // Fallback to showing current session
- try {
- await renderSidebarWithCurrentSessionOnly();
- } catch (fallbackError) {
- console.error('π Moat: Fallback rendering failed:', fallbackError);
- await renderEmptySidebar();
- }
- } finally {
- // Task 3.6: Remove loading state
- if (!silent) {
- setRefreshLoadingState(false);
- }
- }
- }
-
- // Task 3.3: New refresh function that reads JSON and regenerates markdown
- async function refreshFromFiles() {
- console.log('π Moat: Starting refreshFromFiles with new TaskStore system');
-
- if (!window.taskStore || !window.markdownGenerator) {
- throw new Error('TaskStore utilities not available');
- }
-
- try {
- // Load tasks from file first (to get latest from disk)
- await window.taskStore.loadTasksFromFile();
-
- // Read all tasks from TaskStore in chronological order
- const allTasks = window.taskStore.getAllTasksChronological();
- console.log(`π Moat: Loaded ${allTasks.length} tasks from TaskStore`);
-
- // Regenerate markdown from current TaskStore data
- await window.markdownGenerator.rebuildMarkdownFile(allTasks);
- console.log('π Moat: Markdown file regenerated from TaskStore data');
-
- // Task 3.6: Update sidebar rendering to use new task format
- await renderTasksFromNewSystem(allTasks);
-
-
-
- // Dispatch synchronization event
- window.dispatchEvent(new CustomEvent('moat:tasks-synchronized', {
- detail: { taskCount: allTasks.length, source: 'taskStore' }
- }));
-
- } catch (error) {
- console.error('π Moat: refreshFromFiles failed:', error);
- throw error;
- }
- }
-
- // Task 3.6: Render tasks using new TaskStore format
- async function renderTasksFromNewSystem(tasks) {
- if (!moat) return;
-
- console.log(`π Moat: Rendering ${tasks.length} tasks from new system`);
-
- if (tasks.length === 0) {
- await renderEmptySidebar();
- return;
- }
-
- // Use tab filtering system instead of rendering all tasks
- updateTabBadges(tasks);
- applyTabFilter();
- }
-
- // Task 3.6: Render individual task item in new format
- function renderNewTaskItem(task) {
- const statusClass = `float-status-${task.status.replace(/\s+/g, '-')}`;
- const statusText = getStatusText(task.status);
- const timeAgo = formatTimeAgo(task.createdAt || task.timestamp);
-
- return `
-
-
-
- No ${currentTabFilter} tasks
-
-
- `;
- }
-
- // Task 3.6: Visual loading states during refresh operations
- function setRefreshLoadingState(loading) {
- const refreshBtn = document.getElementById('float-refresh-btn');
- const refreshIcon = refreshBtn?.querySelector('.float-refresh-icon');
- const refreshText = refreshBtn?.querySelector('.float-refresh-text');
-
- if (loading) {
- refreshBtn?.classList.add('float-refreshing');
- if (refreshIcon) refreshIcon.textContent = 'β³';
- if (refreshText) refreshText.textContent = 'Refreshing...';
- refreshBtn?.setAttribute('disabled', 'true');
- } else {
- refreshBtn?.classList.remove('float-refreshing');
- if (refreshIcon) refreshIcon.textContent = 'π';
- if (refreshText) refreshText.textContent = 'Refresh';
- refreshBtn?.removeAttribute('disabled');
- }
- }
-
- // Helper function to check if new TaskStore system is available
- function canUseNewTaskSystem() {
- const hasTaskStore = !!window.taskStore;
- const hasMarkdownGenerator = !!window.markdownGenerator;
- const state = connectionManager.getState();
- const hasDirectoryHandle = !!state.directoryHandle && state.status === 'connected';
- const result = hasTaskStore && hasMarkdownGenerator && hasDirectoryHandle;
-
- console.log('π§ Moat: canUseNewTaskSystem check:');
- console.log(' - taskStore:', hasTaskStore);
- console.log(' - markdownGenerator:', hasMarkdownGenerator);
- console.log(' - directoryHandle:', hasDirectoryHandle);
- console.log(' - connectionStatus:', state.status);
- console.log(' - Result:', result ? 'β
CAN use new system' : 'β CANNOT use new system');
-
- return result;
- }
-
- // Helper function to format time ago
- function formatTimeAgo(timestamp) {
- if (!timestamp) return 'Unknown time';
-
- const now = Date.now();
- const time = new Date(timestamp).getTime();
- const diffMs = now - time;
- const diffMins = Math.floor(diffMs / 60000);
- const diffHours = Math.floor(diffMs / 3600000);
- const diffDays = Math.floor(diffMs / 86400000);
-
- if (diffMins < 1) return 'Just now';
- if (diffMins < 60) return `${diffMins}m ago`;
- if (diffHours < 24) return `${diffHours}h ago`;
- if (diffDays < 7) return `${diffDays}d ago`;
- return new Date(time).toLocaleDateString();
- }
-
- // Comprehensive function to sync markdown tasks to sidebar
- async function syncMarkdownTasksToSidebar() {
- console.log('Moat: Starting markdown-to-sidebar sync...');
-
- try {
- // Check if we're connected to a project
- const state = connectionManager.getState();
- if (state.status !== 'connected' || !state.directoryHandle) {
- console.log('Moat: Not connected to project, showing empty state');
- await renderEmptySidebar();
- return { success: true, taskCount: 0, source: 'no-project' };
- }
-
- // Check if we can use the new task system
- if (canUseNewTaskSystem()) {
- console.log('Moat: Using new task system - reading all tasks from files');
- // When using new system, all tasks are in the files (no need to check localStorage)
- const allTasks = await readTasksFromMarkdown();
- console.log('Moat: Found', allTasks.length, 'tasks in new system');
-
- if (allTasks.length === 0) {
- console.log('Moat: No tasks found in new system, showing empty sidebar');
- await renderEmptySidebar();
- return { success: true, taskCount: 0, source: 'empty' };
- }
-
- // Render tasks from new system only
- await renderTasksFromNewSystem(allTasks);
- return {
- success: true,
- taskCount: allTasks.length,
- source: 'new-system'
- };
- } else {
- console.log('Moat: Using legacy system - combining markdown and localStorage');
- // Legacy system: combine markdown tasks and localStorage queue
- const markdownTasks = await readTasksFromMarkdown();
- console.log('Moat: Found', markdownTasks.length, 'tasks in markdown files');
-
- const currentQueue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- console.log('Moat: Found', currentQueue.length, 'current session tasks');
-
- const totalTasks = markdownTasks.length + currentQueue.length;
-
- if (totalTasks === 0) {
- console.log('Moat: No tasks found anywhere, showing empty sidebar');
- await renderEmptySidebar();
- return { success: true, taskCount: 0, source: 'empty' };
- }
-
- // Render combined tasks (legacy approach)
- await renderAllTasks();
- return {
- success: true,
- taskCount: totalTasks,
- markdownTasks: markdownTasks.length,
- sessionTasks: currentQueue.length,
- source: 'legacy-combined'
- };
- }
-
-
- } catch (error) {
- console.error('Moat: Error during markdown-to-sidebar sync:', error);
- showNotification('Error syncing tasks: ' + error.message);
-
- // Fallback to showing current session only
- await renderSidebarWithCurrentSessionOnly();
-
- return { success: false, error: error.message, source: 'error' };
- }
- }
-
- // Render sidebar with only current session tasks (no markdown)
- async function renderSidebarWithCurrentSessionOnly() {
- if (!moat) return;
-
- console.log('Moat: Rendering sidebar with current session tasks only');
- const queueContainer = moat.querySelector('.float-moat-queue');
- queueContainer.innerHTML = '
-
-
- ${statusText}
- ${timeAgo}
-
-
- ${task.comment}
-
- Loading current session...
';
-
- const currentQueue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- const currentTasks = currentQueue.map(convertAnnotationToTask);
-
- if (currentTasks.length === 0) {
- await renderEmptySidebar();
- return;
- }
-
- // Use tab filtering system instead of rendering all tasks
- updateTabBadges(currentTasks);
- applyTabFilter();
- }
-
- // Render empty sidebar
- async function renderEmptySidebar() {
- if (!moat) return;
-
- console.log('Moat: Rendering empty sidebar');
- const queueContainer = moat.querySelector('.float-moat-queue');
- const tabsHeaderContainer = moat.querySelector('.float-moat-tabs-header');
- const tabsBelowContainer = moat.querySelector('.float-moat-tabs-below-header');
- const connectionState = connectionManager.getState();
- const isConnected = connectionState.status === 'connected';
-
- // Hide both sets of tabs when showing empty state
- if (tabsHeaderContainer) {
- tabsHeaderContainer.classList.add('hidden');
- }
- if (tabsBelowContainer) {
- tabsBelowContainer.classList.add('hidden');
- }
-
- // Different content based on connection status
- const emptyContent = isConnected ? {
- icon: ``,
- text: "Press C to make a comment",
- showButton: false
- } : {
- icon: ``,
- text: "Connect to a local folder",
- showButton: true
- };
-
- queueContainer.innerHTML = `
-
-
- `;
-
- // Add event listener for empty state connect button
- const emptyConnectBtn = queueContainer.querySelector('.float-empty-connect-btn');
- if (emptyConnectBtn) {
- emptyConnectBtn.addEventListener('click', handleProjectButton);
- }
- }
-
- // Validate markdown task files exist and are readable
- async function validateMarkdownFiles() {
- if (projectStatus !== 'connected' || !window.directoryHandle) {
- return { valid: false, reason: 'Not connected to project' };
- }
-
- try {
- // Check if .moat directory exists
- let moatDir;
- try {
- moatDir = await window.directoryHandle.getDirectoryHandle('.moat');
- } catch {
- return { valid: false, reason: '.moat directory not found' };
- }
-
- // Check for summary file
- let summaryExists = false;
- let detailedExists = false;
-
- try {
- await moatDir.getFileHandle('moat-tasks-summary.md');
- summaryExists = true;
- } catch {
- console.log('Moat: Summary file not found');
- }
-
- try {
- await moatDir.getFileHandle('moat-tasks.md');
- detailedExists = true;
- } catch {
- console.log('Moat: Detailed file not found');
- }
-
- if (!summaryExists && !detailedExists) {
- return { valid: false, reason: 'No markdown task files found' };
- }
-
- return {
- valid: true,
- summaryExists,
- detailedExists,
- reason: 'Files validated successfully'
- };
-
- } catch (error) {
- return { valid: false, reason: 'Error accessing files: ' + error.message };
- }
- }
-
- // Force full sync (clears cache and re-reads everything)
- async function forceSyncMarkdownTasks() {
- console.log('Moat: Force syncing markdown tasks...');
- showNotification('Force syncing tasks...');
-
- // Clear any cached data if we had any
- // (Currently we don't cache, but this is future-proofing)
-
- const result = await syncMarkdownTasksToSidebar();
-
- if (result.success) {
- showNotification(`β Force sync complete: ${result.taskCount} tasks`);
- } else {
- showNotification(`β Force sync failed: ${result.error}`);
- }
-
- return result;
- }
-
- // Read tasks from markdown files (if connected to project)
- async function readTasksFromMarkdown() {
- const state = connectionManager.getState();
- if (state.status !== 'connected' || !state.directoryHandle) {
- return [];
- }
-
- try {
- // Use the new two-file system: read from moat-tasks.md (generated from JSON)
- const detailedTasks = await readTasksFromDetailedFile();
- return detailedTasks;
- } catch (error) {
- console.warn('Moat: Could not read markdown files:', error);
- return [];
- }
- }
-
-
-
- // Read tasks from the new two-file system (moat-tasks.md)
- async function readTasksFromDetailedFile() {
- try {
- // Read from moat-tasks.md (generated from moat-tasks-detail.json)
- const directoryHandle = connectionManager.getState().directoryHandle;
- if (!directoryHandle) {
- console.warn('Moat: No directory handle available for reading tasks');
- return [];
- }
-
- const fileHandle = await directoryHandle.getFileHandle('moat-tasks.md');
- const file = await fileHandle.getFile();
- const content = await file.text();
- return parseDetailedTasks(content);
- } catch (error) {
- console.warn('Moat: Could not read moat-tasks.md file');
- return [];
- }
- }
-
-
-
- // Parse tasks from detailed markdown content
- function parseDetailedTasks(content) {
- const tasks = [];
-
- // Match both legacy and enhanced task formats
- const legacyPattern = /## (π|π€|β³|β
|β)\s*(.+?)\n\n\*\*Task:\*\*\s*(.+?)\n/g;
- const enhancedPattern = /## ([π₯β‘π‘]?)\s*(π|π€|β³|β
|β)\s*Task\s+(\d+):\s*(.+?)\n\n\*\*Priority\*\*:\s*(.+?)\n\*\*Type\*\*:\s*(.+?)\n\*\*Estimated Time\*\*:\s*(.+?)\n/g;
-
- let match;
-
- // Parse enhanced format tasks
- while ((match = enhancedPattern.exec(content)) !== null) {
- const [, priorityEmoji, statusEmoji, taskNumber, title, priority, type, estimatedTime] = match;
-
- // Extract request from the content following the match
- const requestMatch = content.slice(match.index + match[0].length).match(/### Request\n"(.+?)"/);
- const request = requestMatch ? requestMatch[1] : 'No description';
-
- tasks.push({
- id: `task-${taskNumber}`,
- number: parseInt(taskNumber),
- title: title.trim(),
- content: request,
- status: getStatusFromEmoji(statusEmoji),
- priority: priority,
- type: type,
- estimatedTime: estimatedTime,
- priorityEmoji: priorityEmoji,
- format: 'enhanced'
- });
- }
-
- // Parse legacy format tasks (if no enhanced tasks found)
- if (tasks.length === 0) {
- while ((match = legacyPattern.exec(content)) !== null) {
- const [, statusEmoji, title, task] = match;
-
- tasks.push({
- id: `legacy-${Date.now()}-${Math.random()}`,
- title: title.trim(),
- content: task.trim(),
- status: getStatusFromEmoji(statusEmoji),
- priority: 'Medium',
- type: 'Styling',
- estimatedTime: '5 min',
- priorityEmoji: 'β‘',
- format: 'legacy'
- });
- }
- }
-
- return tasks;
- }
-
- // Convert emoji to status text
- function getStatusFromEmoji(emoji) {
- switch (emoji) {
- case 'π': return 'to do';
- case 'π€': return 'sent';
- case 'β³': return 'doing';
- case 'β
': return 'done';
- case 'β': return 'cancelled';
- default: return 'to do';
- }
- }
-
- // Show Moat
- async function showMoat() {
- console.log('Moat: showMoat called, moat exists:', !!moat);
- if (!moat) {
- console.log('Moat: Creating moat element...');
- createMoat();
- }
- console.log('Moat: Adding float-moat-visible class...');
- moat.classList.add('float-moat-visible');
- isVisible = true;
-
- // PERSIST VISIBILITY STATE
- localStorage.setItem('moat.visible', 'true');
- console.log('Moat: Visibility state saved to localStorage');
-
- // Initialize animation tracking when first shown
- initializeTaskTracking();
-
- // Start auto-refresh when sidebar is shown
- startAutoRefresh();
-
- console.log('Moat: Sidebar should now be visible, isVisible:', isVisible);
- console.log('Moat: Project status:', connectionManager.getState().status, 'Can use new system:', canUseNewTaskSystem());
- await refreshTasks(); // Use refreshTasks for comprehensive loading
- }
-
- // Hide Moat
- function hideMoat() {
- console.log('Moat: hideMoat called, moat exists:', !!moat);
- if (moat) {
- moat.classList.remove('float-moat-visible');
- isVisible = false;
-
- // Remove any active element highlight
- removeElementHighlight();
-
- // PERSIST VISIBILITY STATE
- localStorage.setItem('moat.visible', 'false');
- console.log('Moat: Visibility state saved to localStorage');
-
- // Stop auto-refresh when sidebar is hidden
- stopAutoRefresh();
-
- // Reset animations when hiding
- resetFloatingAnimation();
- }
- }
-
- // Toggle Moat
- async function toggleMoat() {
- console.log('Moat: toggleMoat called, current isVisible:', isVisible);
- if (isVisible) {
- console.log('Moat: Hiding sidebar...');
- hideMoat();
- } else {
- console.log('Moat: Showing sidebar...');
- await showMoat();
- }
- }
-
-
-
- // Render queue (always show all tasks) - now uses sync function
- async function renderQueue() {
- if (!moat) return;
- await syncMarkdownTasksToSidebar();
- }
-
-
-
- // Render all tasks (current + markdown)
- async function renderAllTasks() {
- if (!moat) return;
-
- let allTasks = [];
-
- // Get all tasks from various sources
- try {
- // Try new system first
- if (canUseNewTaskSystem() && window.taskStore) {
- console.log('π Moat: Using TaskStore for rendering all tasks');
- allTasks = window.taskStore.getAllTasksChronological();
- } else {
- console.log('π Moat: Using legacy localStorage for rendering');
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- allTasks = queue.map(convertAnnotationToTask);
- }
- } catch (error) {
- console.error('π Moat: Error loading tasks:', error);
- allTasks = [];
- }
-
- if (allTasks.length === 0) {
- await renderEmptySidebar();
- return;
- }
-
- // Detect new tasks for animation
- detectAndAnimateNewTasks(allTasks);
-
- // Use tab filtering system instead of rendering all tasks
- updateTabBadges(allTasks);
- applyTabFilter();
- }
-
- // Render simple task item without emojis
- function renderSimpleTaskItem(task) {
- const isCompleted = ['done', 'resolved'].includes(task.status);
- const statusClass = `float-status-${task.status.replace(/\s+/g, '-')}`;
- const statusText = getStatusText(task.status);
- const timeAgo = formatTimeAgo(task.timestamp || task.createdAt);
- const hasScreenshot = task.screenshotPath && window.directoryHandle;
-
- // Calculate thumbnail focus point based on click position in context viewport
- let thumbnailStyle = '';
- if (hasScreenshot && task.clickPosition && task.screenshotViewport) {
- // Calculate click position relative to the captured viewport
- const clickAbsoluteX = task.boundingRect.x + task.clickPosition.x;
- const clickAbsoluteY = task.boundingRect.y + task.clickPosition.y;
-
- const clickInViewportX = clickAbsoluteX - task.screenshotViewport.x;
- const clickInViewportY = clickAbsoluteY - task.screenshotViewport.y;
-
- const xPercent = (clickInViewportX / task.screenshotViewport.width) * 100;
- const yPercent = (clickInViewportY / task.screenshotViewport.height) * 100;
-
- thumbnailStyle = `style="object-position: ${xPercent}% ${yPercent}%;"`;
- }
-
- return `
-
-
-
- ${emptyContent.text}
- ${emptyContent.showButton ? '' : ''} -
-
- `;
- }
-
- // Get status text without emojis
- function getStatusText(status) {
- switch (status) {
- case 'to do':
- case 'pending':
- case 'in queue': return 'to do';
- case 'doing':
- case 'in-progress':
- case 'sent':
- case 'in progress': return 'doing';
- case 'done':
- case 'completed':
- case 'resolved': return 'done';
- default:
- console.warn('Unknown status in getStatusText:', status);
- return 'to do';
- }
- }
-
- // Convert annotation to task format
- function convertAnnotationToTask(annotation) {
- return {
- id: annotation.id,
- title: annotation.elementLabel || annotation.target || 'Unknown element',
- content: annotation.content,
- comment: annotation.content, // Add this line to fix "undefined" issue
- status: annotation.status,
- priority: 'Medium', // Default for current annotations
- type: 'Styling', // Default type
- estimatedTime: '5 min',
- priorityEmoji: 'β‘',
- timestamp: annotation.timestamp,
- format: 'current'
- };
- }
-
-
-
- // Add event listeners for all tasks view
- // Global hover overlay for element highlighting
- let taskHoverOverlay = null;
-
- // Show element highlight on task card hover
- function showElementHighlightOnHover(annotation) {
- try {
- const element = document.querySelector(annotation.target);
- if (!element) {
- console.warn('Moat: Element not found for hover highlight:', annotation.target);
- return;
- }
-
- // Remove any existing overlay
- removeElementHighlight();
-
- // Create DOM overlay
- const rect = element.getBoundingClientRect();
- taskHoverOverlay = document.createElement('div');
- taskHoverOverlay.className = 'float-task-hover-overlay';
- taskHoverOverlay.style.cssText = `
- position: absolute;
- left: ${rect.x + window.scrollX}px;
- top: ${rect.y + window.scrollY}px;
- width: ${rect.width}px;
- height: ${rect.height}px;
- border: 3px solid #3B82F6;
- border-radius: 4px;
- background-color: rgba(59, 130, 246, 0.1);
- pointer-events: none;
- z-index: 9998;
- box-sizing: border-box;
- transition: opacity 0.15s ease;
- `;
- document.body.appendChild(taskHoverOverlay);
-
- // Optional: Scroll element into view if it's off-screen
- const isInViewport = (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom <= window.innerHeight &&
- rect.right <= window.innerWidth
- );
-
- if (!isInViewport) {
- element.scrollIntoView({ behavior: 'smooth', block: 'center' });
- }
- } catch (e) {
- console.warn('Moat: Could not show hover highlight', e);
- }
- }
-
- // Remove element highlight
- function removeElementHighlight() {
- if (taskHoverOverlay) {
- taskHoverOverlay.remove();
- taskHoverOverlay = null;
- }
- }
-
- function addAllTasksListeners() {
- if (!moat) return;
-
- const queueContainer = moat.querySelector('.float-moat-queue');
-
- // Clean up overlay when scrolling the sidebar
- queueContainer.addEventListener('scroll', () => {
- removeElementHighlight();
- }, { passive: true });
-
- // Load thumbnails for all tasks
- queueContainer.querySelectorAll('.float-moat-item').forEach(async item => {
- const screenshotPath = item.dataset.screenshotPath;
- if (screenshotPath) {
- const thumbnailUrl = await loadThumbnailFromPath(screenshotPath);
- if (thumbnailUrl) {
- const thumbnailImg = item.querySelector('.float-moat-thumbnail');
- if (thumbnailImg) {
- thumbnailImg.src = thumbnailUrl;
- }
- }
- }
- });
-
- // Add event listeners
- queueContainer.querySelectorAll('.float-moat-item').forEach(item => {
- // Hover to preview element highlight (only for current session items)
- item.addEventListener('mouseenter', (e) => {
- const dataType = item.dataset.type;
-
- if (dataType === 'current') {
- const id = item.dataset.id;
-
- // Try to get annotation from new task system first, then fall back to legacy
- let annotation = null;
-
- if (canUseNewTaskSystem() && window.taskStore) {
- // Get from new task system
- const task = window.taskStore.getTaskById(id);
- if (task) {
- // Convert task format to annotation format for compatibility
- annotation = {
- target: task.selector,
- ...task
- };
- }
- } else {
- // Fallback to legacy localStorage queue
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- annotation = queue.find(a => a.id === id);
- }
-
- if (annotation && annotation.target) {
- showElementHighlightOnHover(annotation);
- }
- }
- });
-
- // Remove highlight on mouse leave
- item.addEventListener('mouseleave', () => {
- removeElementHighlight();
- });
-
- // Click to highlight element (only for current session items)
- item.addEventListener('click', (e) => {
- // Don't trigger if clicking remove button or thumbnail
- if (e.target.closest('.float-moat-remove')) return;
- if (e.target.closest('.float-moat-thumbnail-container')) return;
-
- const dataType = item.dataset.type;
- if (dataType === 'current') {
- const id = item.dataset.id;
-
- // Try to get annotation from new task system first, then fall back to legacy
- let annotation = null;
-
- if (canUseNewTaskSystem() && window.taskStore) {
- const task = window.taskStore.getTaskById(id);
- if (task) {
- annotation = {
- target: task.selector,
- ...task
- };
- }
- } else {
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- annotation = queue.find(a => a.id === id);
- }
-
- if (annotation) {
- highlightAnnotatedElement(annotation);
- }
- } else {
- // For markdown tasks, show a notification that they can't be highlighted directly
- showNotification('Markdown tasks cannot be highlighted directly');
- }
- });
- });
-
- // Remove buttons (only for current session items)
- queueContainer.querySelectorAll('.float-moat-remove').forEach(btn => {
- btn.addEventListener('click', async (e) => {
- e.stopPropagation();
- console.log('ποΈ Moat: Remove button clicked for task ID:', btn.dataset.id);
- await removeAnnotation(btn.dataset.id);
- });
- });
-
- // Thumbnail close button handlers
- queueContainer.querySelectorAll('.float-moat-thumbnail-overlay').forEach(btn => {
- btn.addEventListener('click', async (e) => {
- e.stopPropagation();
- const taskId = btn.dataset.taskId;
- console.log('ποΈ Moat: Thumbnail close clicked for task ID:', taskId);
- await removeAnnotation(taskId);
- });
- });
- }
-
- // Highlight annotated element
- function highlightAnnotatedElement(annotation) {
- try {
- const element = document.querySelector(annotation.target);
- if (element) {
- // Show the same DOM overlay we use for hover
- showElementHighlightOnHover(annotation);
-
- // Scroll into view
- element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
- // Remove highlight after 2 seconds
- setTimeout(() => {
- removeElementHighlight();
- }, 2000);
- } else {
- console.warn('Moat: Could not find element with selector:', annotation.target);
- showNotification('Element not found on page');
- }
- } catch (e) {
- console.warn('Moat: Could not highlight element', e);
- showNotification('Could not highlight element');
- }
- }
-
- // Legacy showNotification function removed - now using centralized notification system above
-
- // Remove annotation - supports both new TaskStore system and legacy localStorage
- async function removeAnnotation(id) {
- console.log('ποΈ Moat: Removing annotation/task with ID:', id);
-
- try {
- // Check if we should use the new TaskStore system
- if (canUseNewTaskSystem()) {
- console.log('ποΈ Moat: Using new TaskStore system for removal');
-
- // Remove from TaskStore and save to file
- const removed = await window.taskStore.removeTaskAndSave(id);
-
- if (removed) {
- console.log('β
Moat: Task removed from TaskStore and file saved');
-
- // Regenerate markdown from updated TaskStore
- const allTasks = window.taskStore.getAllTasksChronological();
- await window.markdownGenerator.rebuildMarkdownFile(allTasks);
- console.log('β
Moat: Markdown file regenerated after removal');
-
- showNotification('Task removed successfully');
- } else {
- console.warn('β οΈ Moat: Task not found in TaskStore:', id);
- showNotification('Task not found for removal');
- }
-
- } else {
- console.log('ποΈ Moat: Using legacy localStorage system for removal');
-
- // Legacy system: remove from localStorage
- let queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- const originalLength = queue.length;
- queue = queue.filter(a => a.id !== id);
-
- if (queue.length < originalLength) {
- localStorage.setItem('moat.queue', JSON.stringify(queue));
- console.log('β
Moat: Task removed from localStorage');
- showNotification('Task removed successfully');
- } else {
- console.warn('β οΈ Moat: Task not found in localStorage:', id);
- showNotification('Task not found for removal');
- }
- }
-
- // Refresh the sidebar to show updated task list
- await refreshTasks(true); // Silent refresh after task removal
-
- } catch (error) {
- console.error('β Moat: Error removing task:', error);
- showNotification(`Failed to remove task: ${error.message}`);
- }
- }
-
- // Export annotations
- function exportAnnotations() {
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
-
- if (queue.length === 0) {
- alert('No annotations to export');
- return;
- }
-
- const data = {
- sessionId: queue[0]?.sessionId || 'unknown',
- timestamp: Date.now(),
- url: window.location.href,
- annotations: queue
- };
-
- 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 = `moat-${new Date().toISOString().slice(0, 10)}.json`;
- a.click();
- URL.revokeObjectURL(url);
- }
-
- // Drag and drop handlers
- function handleDragStart(e) {
- draggedItem = e.target;
- e.target.classList.add('float-moat-dragging');
- }
-
- function handleDragOver(e) {
- e.preventDefault();
- const afterElement = getDragAfterElement(moat.querySelector('.float-moat-queue'), e.clientY);
- if (afterElement == null) {
- moat.querySelector('.float-moat-queue').appendChild(draggedItem);
- } else {
- moat.querySelector('.float-moat-queue').insertBefore(draggedItem, afterElement);
- }
- }
-
- function handleDrop(e) {
- e.preventDefault();
- updateQueueOrder();
- }
-
- function handleDragEnd(e) {
- e.target.classList.remove('float-moat-dragging');
- draggedItem = null;
- }
-
- function getDragAfterElement(container, y) {
- const draggableElements = [...container.querySelectorAll('.float-moat-item:not(.float-moat-dragging)')];
-
- return draggableElements.reduce((closest, child) => {
- const box = child.getBoundingClientRect();
- const offset = y - box.top - box.height / 2;
-
- if (offset < 0 && offset > closest.offset) {
- return { offset: offset, element: child };
- } else {
- return closest;
- }
- }, { offset: Number.NEGATIVE_INFINITY }).element;
- }
-
- function updateQueueOrder() {
- const items = moat.querySelectorAll('.float-moat-item');
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- const newQueue = [];
-
- items.forEach(item => {
- const id = item.dataset.id;
- const annotation = queue.find(a => a.id === id);
- if (annotation) {
- newQueue.push(annotation);
- }
- });
-
- localStorage.setItem('moat.queue', JSON.stringify(newQueue));
- }
-
- // Listen for events
- console.log('Moat: Setting up event listeners...');
-
- // Task 3.4: Listen for moat:tasks-updated events
- window.addEventListener('moat:tasks-updated', async (e) => {
- console.log('π Moat: Received moat:tasks-updated event', e.detail);
-
- // Task 3.5: Real-time task status updates in sidebar
- if (isVisible) {
- console.log('π Moat: Auto-refreshing sidebar due to task update');
- await refreshTasks(true); // Silent refresh for automatic updates
- }
- });
-
- // Task 3.8: Keyboard shortcut (Cmd+R) for manual refresh
- document.addEventListener('keydown', (e) => {
- // Cmd+R or Ctrl+R to refresh (when sidebar is visible)
- if ((e.metaKey || e.ctrlKey) && e.key === 'r' && isVisible) {
- e.preventDefault();
- console.log('π Moat: Keyboard refresh triggered (Cmd+R)');
- refreshTasks(false); // Manual refresh should show notifications
- }
- });
-
- window.addEventListener('moat:toggle-moat', async (e) => {
- console.log('Moat: Received moat:toggle-moat event');
- await toggleMoat();
- });
- window.addEventListener('moat:annotation-added', async (e) => {
- if (isVisible) {
- await renderQueue();
- }
- // Auto-show Moat when first annotation is added
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- if (queue.length === 1) {
- await showMoat();
- }
- });
-
- // Task 3.9 & 3.10: Enhanced storage changes listener for cross-tab sync
- window.addEventListener('storage', async (e) => {
- if (e.key === 'moat.queue' && isVisible) {
- console.log('π Moat: Detected cross-tab localStorage change, refreshing sidebar silently');
- // Use refreshTasks with silent=true to avoid notification spam
- setTimeout(() => refreshTasks(true), 100); // Small delay to avoid rapid refreshes
- }
- });
-
- // Initialize project connection monitoring (single event listener)
- window.addEventListener('moat:project-connected', async (e) => {
- console.log('π§ Moat: Received project-connected event:', e.detail);
-
- // Use connection manager to handle the event
- connectionManager.handleConnectionEvent(e.detail);
-
- const state = connectionManager.getState();
-
- if (state.status === 'connected') {
- // Switch to connected view
- initializeContentVisibility();
-
- // Show success notification using our centralized deduplication system
- // The deduplication system will handle preventing duplicates
- const notificationShown = showNotification('Moat connected to project', 'info', `connection-${e.detail.source || 'unknown'}`);
- if (notificationShown) {
- console.log('π§ Moat: Connection notification shown');
- } else {
- console.log('π§ Moat: Connection notification blocked by deduplication');
- }
-
- console.log('Moat: Project connected, refreshing tasks...');
- await refreshTasks(true); // Silent refresh to avoid notification spam
-
- } else if (state.status === 'not-connected') {
- console.log('π§ Moat: Processing disconnection event...');
- initializeContentVisibility();
- }
- });
-
- // Listen for project connection failure events
- window.addEventListener('moat:project-connection-failed', async (e) => {
- console.log('π§ Moat: Received project connection failure event:', e.detail);
-
- // Clear any stored connection data
- localStorage.removeItem(`moat.project.${window.location.origin}`);
-
- // Update connection manager to not connected
- connectionManager.setDisconnected();
-
- // Show error notification
- showNotification(e.detail.reason || 'Failed to restore project connection');
-
- // Clear any cached tasks
- if (isVisible) {
- await renderQueue();
- }
- });
-
- window.addEventListener('moat:project-disconnected', async () => {
- console.log('π§ Moat: Received project-disconnected event');
- console.trace('π§ Moat: project-disconnected event stack trace');
- // Clear file handles
- if (window.directoryHandle) {
- console.log('π§ Moat: Clearing directoryHandle due to disconnection event');
- window.directoryHandle = null;
- }
- connectionManager.setDisconnected();
- // Refresh the current view to clear cached tasks
- if (isVisible) {
- await renderQueue();
- }
- });
-
- // Listen for annotation status updates
- window.addEventListener('moat:annotation-status-updated', async (e) => {
- if (isVisible) {
- await renderQueue();
- }
- });
-
- // Listen for markdown file updates
- window.addEventListener('moat:markdown-updated', async (e) => {
- console.log('Moat: Markdown file updated, refreshing tasks...');
- if (isVisible) {
- // Refresh the task list to show the newly written markdown tasks
- await renderQueue();
- }
-
- // Show a brief success indicator in the UI
- if (moat) {
- const indicator = moat.querySelector('.float-project-indicator');
- if (indicator) {
- indicator.style.animation = 'pulse 0.5s ease-in-out';
- setTimeout(() => {
- indicator.style.animation = '';
- }, 500);
- }
- }
- });
-
- // Listen for page visibility changes to restore moat if needed
- document.addEventListener('visibilitychange', async () => {
- if (!document.hidden) {
- console.log('Moat: Page became visible, checking moat state...');
- const savedVisibility = localStorage.getItem('moat.visible');
- if (savedVisibility === 'true' && !isVisible) {
- console.log('Moat: Restoring moat visibility after page focus');
- await showMoat();
- }
- }
- });
-
- // Listen for window focus to ensure moat persistence
- window.addEventListener('focus', async () => {
- console.log('Moat: Window focused, checking moat state...');
- const savedVisibility = localStorage.getItem('moat.visible');
- if (savedVisibility === 'true' && !isVisible) {
- console.log('Moat: Restoring moat visibility after window focus');
- await showMoat();
- }
- });
-
-
-
- // Task 3.10: Cross-tab synchronization test
- function testCrossTabSync() {
- console.log('π§ͺ Moat: Testing cross-tab synchronization...');
-
- // Simulate a task update in another tab
- const testEvent = new StorageEvent('storage', {
- key: 'moat.queue',
- newValue: JSON.stringify([{
- id: 'test-cross-tab-' + Date.now(),
- content: 'Cross-tab sync test',
- timestamp: Date.now()
- }]),
- oldValue: '[]'
- });
-
- window.dispatchEvent(testEvent);
- console.log('π§ͺ Moat: Cross-tab sync test event dispatched');
- return true;
- }
-
- // Export to global scope for content script access
- window.Moat = {
- isSidebarVisible: () => isVisible,
- };
-
- // Export to global scope for debugging and manual sync
- window.MoatDebug = {
- exportAnnotations,
- clearQueue: async () => {
- localStorage.removeItem('moat.queue');
- if (isVisible) await renderQueue();
- },
- syncMarkdownTasks: syncMarkdownTasksToSidebar,
- forceSyncMarkdownTasks: forceSyncMarkdownTasks,
- validateMarkdownFiles: validateMarkdownFiles,
- // Task 3.10: Cross-tab sync testing
- testCrossTabSync: testCrossTabSync,
- refreshTasks: refreshTasks,
- // Moat persistence debugging
- showMoat: showMoat,
- hideMoat: hideMoat,
- toggleMoat: toggleMoat,
- forceRestoreMoat: async () => {
- console.log('π§ MoatDebug: Force restoring moat...');
- localStorage.setItem('moat.visible', 'true');
- if (!moat) {
- createMoat();
- }
- await showMoat();
- return { success: true, visible: isVisible };
- },
- checkVisibilityState: () => {
- const saved = localStorage.getItem('moat.visible');
- const domExists = !!document.getElementById('moat-moat');
- return {
- savedState: saved,
- currentVisible: isVisible,
- domExists: domExists,
- shouldBeVisible: saved === 'true'
- };
- },
- // Floating animation system debugging
- resetFloatingAnimation: resetFloatingAnimation,
- initializeTaskTracking: initializeTaskTracking,
- testFloatingAnimation: async (count = 1) => {
- console.log(`π Testing floating animation with ${count} mock tasks...`);
- for (let i = 0; i < count; i++) {
- const mockTaskId = `test-float-${Date.now()}-${i}`;
- lastKnownTaskIds.add(mockTaskId);
- animationQueue.push({
- taskId: mockTaskId,
- delay: i * 200,
- timestamp: Date.now()
- });
- }
- if (!isAnimating) {
- await startFloatingAnimation();
- }
- },
- // Task 3.9: Performance testing
- testRefreshPerformance: async () => {
- const iterations = 5;
- const times = [];
- console.log(`π§ͺ Moat: Testing refresh performance (${iterations} iterations)...`);
-
- for (let i = 0; i < iterations; i++) {
- const start = performance.now();
- await refreshTasks();
- const duration = performance.now() - start;
- times.push(duration);
- console.log(`π§ͺ Iteration ${i + 1}: ${duration.toFixed(1)}ms`);
- }
-
- const avgTime = times.reduce((a, b) => a + b, 0) / times.length;
- const maxTime = Math.max(...times);
- const minTime = Math.min(...times);
-
- console.log(`π§ͺ Performance Results:`);
- console.log(` Average: ${avgTime.toFixed(1)}ms`);
- console.log(` Min: ${minTime.toFixed(1)}ms`);
- console.log(` Max: ${maxTime.toFixed(1)}ms`);
- console.log(` Target: <100ms`);
- console.log(` Status: ${avgTime < 100 ? 'β
PASS' : 'β FAIL'}`);
-
- return { avgTime, maxTime, minTime, target: 100, pass: avgTime < 100 };
- },
- // Task 3.10: End-to-end refresh functionality test
- testRefreshEndToEnd: async () => {
- console.log('π§ͺ Moat: Starting end-to-end refresh functionality test...');
-
- const results = {
- refreshButton: false,
- keyboardShortcut: false,
- automaticRefresh: false,
- crossTabSync: false,
- loadingStates: false,
- errorHandling: false,
- performance: false
- };
-
- try {
- // Test 1: Refresh button functionality
- console.log('π§ͺ Test 1: Refresh button click');
- const refreshBtn = document.getElementById('float-refresh-btn');
- if (refreshBtn) {
- refreshBtn.click();
- await new Promise(resolve => setTimeout(resolve, 200));
- results.refreshButton = true;
- console.log('β
Refresh button test passed');
- }
-
- // Test 2: Loading states
- console.log('π§ͺ Test 2: Loading states');
- setRefreshLoadingState(true);
- const isLoading = refreshBtn?.classList.contains('float-refreshing');
- setRefreshLoadingState(false);
- results.loadingStates = isLoading;
- console.log(isLoading ? 'β
Loading states test passed' : 'β Loading states test failed');
-
- // Test 3: Performance test
- console.log('π§ͺ Test 3: Performance test');
- const start = performance.now();
- await refreshTasks();
- const duration = performance.now() - start;
- results.performance = duration < 100;
- console.log(`${results.performance ? 'β
' : 'β'} Performance test: ${duration.toFixed(1)}ms`);
-
- // Test 4: Cross-tab sync
- console.log('π§ͺ Test 4: Cross-tab sync');
- results.crossTabSync = testCrossTabSync();
- console.log(results.crossTabSync ? 'β
Cross-tab sync test passed' : 'β Cross-tab sync test failed');
-
- // Test 5: Automatic refresh (simulate task update)
- console.log('π§ͺ Test 5: Automatic refresh');
- const taskUpdateEvent = new CustomEvent('moat:tasks-updated', {
- detail: { taskCount: 1, source: 'test' }
- });
- window.dispatchEvent(taskUpdateEvent);
- results.automaticRefresh = true;
- console.log('β
Automatic refresh test passed');
-
- // Test 6: Error handling
- console.log('π§ͺ Test 6: Error handling');
- try {
- // Temporarily break the system
- const originalTaskStore = window.taskStore;
- window.taskStore = null;
- await refreshTasks();
- window.taskStore = originalTaskStore;
- results.errorHandling = true;
- console.log('β
Error handling test passed');
- } catch (error) {
- results.errorHandling = true;
- console.log('β
Error handling test passed (caught error as expected)');
- }
-
- // Test 7: Keyboard shortcut (simulate)
- console.log('π§ͺ Test 7: Keyboard shortcut simulation');
- const keyEvent = new KeyboardEvent('keydown', {
- key: 'r',
- metaKey: true,
- bubbles: true
- });
- document.dispatchEvent(keyEvent);
- results.keyboardShortcut = true;
- console.log('β
Keyboard shortcut test passed');
-
- } catch (error) {
- console.error('π§ͺ End-to-end test error:', error);
- }
-
- // Summary
- const passedTests = Object.values(results).filter(Boolean).length;
- const totalTests = Object.keys(results).length;
-
- console.log(`π§ͺ End-to-End Test Results: ${passedTests}/${totalTests} passed`);
- console.log('π§ͺ Detailed Results:', results);
-
- return {
- passed: passedTests,
- total: totalTests,
- success: passedTests === totalTests,
- details: results
- };
- },
- // Quick status check
- getStatus: async () => {
- const validation = await validateMarkdownFiles();
- const currentQueue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- const markdownTasks = await readTasksFromMarkdown();
-
- return {
- projectConnected: connectionManager.getState().status === 'connected',
- sidebarVisible: isVisible,
- markdownFiles: validation,
- currentSessionTasks: currentQueue.length,
- markdownTasks: markdownTasks.length,
- totalTasks: currentQueue.length + markdownTasks.length,
- newTaskSystemAvailable: canUseNewTaskSystem()
- };
- }
- };
-
- // Check initial project connection status on load
- console.log('Moat: Initializing, document.readyState:', document.readyState);
-
- if (document.readyState === 'loading') {
- console.log('Moat: Document still loading, waiting for DOMContentLoaded...');
- document.addEventListener('DOMContentLoaded', async () => {
- console.log('Moat: DOMContentLoaded fired, initializing moat with persistence...');
- // Initialize moat with full persistence support
- await initializeMoat();
- });
- } else {
- console.log('Moat: Document already loaded, initializing moat immediately...');
- // Initialize moat with full persistence support
- setTimeout(async () => {
- await initializeMoat();
- }, 100); // Small delay to ensure content script is ready
- }
-
- // Detect new tasks and trigger floating animation
- function detectAndAnimateNewTasks(currentTasks) {
- if (!moat || moatPosition !== 'bottom') return; // Only animate in bottom position
-
- const currentTaskIds = new Set(currentTasks.map(task => task.id));
- const newTaskIds = [...currentTaskIds].filter(id => !lastKnownTaskIds.has(id));
-
- if (newTaskIds.length > 0) {
- console.log(`π Moat: Detected ${newTaskIds.length} new tasks for floating animation:`, newTaskIds);
-
- // Add to animation queue
- newTaskIds.forEach((taskId, index) => {
- animationQueue.push({
- taskId,
- delay: index * 200, // Stagger by 200ms
- timestamp: Date.now()
- });
- });
-
- // Start animation sequence if not already running
- if (!isAnimating) {
- startFloatingAnimation();
- }
- }
-
- // Update our tracking set
- lastKnownTaskIds = currentTaskIds;
- }
-
- // Start the floating animation sequence
- async function startFloatingAnimation() {
- if (animationQueue.length === 0 || isAnimating) return;
-
- isAnimating = true;
- console.log(`π Moat: Starting floating animation sequence for ${animationQueue.length} items`);
-
- // Process animation queue
- while (animationQueue.length > 0) {
- const { taskId, delay } = animationQueue.shift();
-
- // Wait for stagger delay
- if (delay > 0) {
- await new Promise(resolve => setTimeout(resolve, delay));
- }
-
- await animateTaskFloating(taskId);
- }
-
- isAnimating = false;
- console.log('π Moat: Floating animation sequence completed');
- }
-
- // Animate a single task floating across the moat
- async function animateTaskFloating(taskId) {
- const taskElement = moat.querySelector(`[data-id="${taskId}"]`);
- if (!taskElement) {
- console.warn(`π Moat: Task element not found for ID: ${taskId}`);
- return;
- }
-
- console.log(`π Moat: Animating task: ${taskId}`);
-
- // Phase 1: Float across the moat (2.5s)
- taskElement.classList.add('float-floating');
-
- // Wait for floating animation to complete
- await new Promise(resolve => setTimeout(resolve, 2500));
-
- // Phase 2: Gentle settle (0.8s)
- taskElement.classList.remove('float-floating');
- taskElement.classList.add('float-settling');
-
- // Wait for settle animation
- await new Promise(resolve => setTimeout(resolve, 800));
-
- // Phase 3: Highlight as new (3s)
- taskElement.classList.remove('float-settling');
- taskElement.classList.add('float-new-highlight');
-
- // Remove highlight after 3 seconds
- setTimeout(() => {
- taskElement.classList.remove('float-new-highlight');
- }, 3000);
-
- console.log(`π Moat: Animation completed for task: ${taskId}`);
- }
-
- // Initialize task tracking when Moat is first shown
- function initializeTaskTracking() {
- // Get current tasks to establish baseline
- try {
- if (canUseNewTaskSystem() && window.taskStore) {
- const allTasks = window.taskStore.getAllTasksChronological();
- lastKnownTaskIds = new Set(allTasks.map(task => task.id));
- } else {
- const queue = JSON.parse(localStorage.getItem('moat.queue') || '[]');
- lastKnownTaskIds = new Set(queue.map(task => task.id));
- }
- console.log(`π Moat: Initialized task tracking with ${lastKnownTaskIds.size} existing tasks`);
- } catch (error) {
- console.warn('π Moat: Error initializing task tracking:', error);
- lastKnownTaskIds = new Set();
- }
- }
-
- // Reset animation system
- function resetFloatingAnimation() {
- animationQueue = [];
- isAnimating = false;
- lastKnownTaskIds = new Set();
-
- // Remove any animation classes from existing items
- if (moat) {
- moat.querySelectorAll('.float-moat-item').forEach(item => {
- item.classList.remove('float-floating', 'float-settling', 'float-new-highlight');
- });
- }
-
- console.log('π Moat: Animation system reset');
- }
-
-})();
\ No newline at end of file
diff --git a/chrome-extension/sidepanel/sidepanel.css b/chrome-extension/sidepanel/sidepanel.css
new file mode 100644
index 0000000..67d19ab
--- /dev/null
+++ b/chrome-extension/sidepanel/sidepanel.css
@@ -0,0 +1,628 @@
+/* Drawbridge Side Panel Styles */
+
+/* Theme Variables */
+:root,
+[data-theme="light"] {
+ --bg-primary: #ffffff;
+ --bg-secondary: #f9fafb;
+ --bg-tertiary: #f3f4f6;
+ --border: #e5e7eb;
+ --border-light: #f3f4f6;
+ --text-primary: #1f2937;
+ --text-secondary: #4b5563;
+ --text-tertiary: #6b7280;
+ --text-muted: #9ca3af;
+ --accent: #3b82f6;
+ --accent-light: rgba(59, 130, 246, 0.1);
+ --accent-border: rgba(59, 130, 246, 0.2);
+ --success: #059669;
+ --success-light: rgba(34, 197, 94, 0.1);
+ --error: #dc2626;
+ --error-light: rgba(239, 68, 68, 0.1);
+ --warning: #d97706;
+ --shadow: rgba(0, 0, 0, 0.1);
+ --shadow-lg: rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] {
+ --bg-primary: #111827;
+ --bg-secondary: #1f2937;
+ --bg-tertiary: #374151;
+ --border: #374151;
+ --border-light: #4b5563;
+ --text-primary: #f9fafb;
+ --text-secondary: #e5e7eb;
+ --text-tertiary: #d1d5db;
+ --text-muted: #9ca3af;
+ --accent: #60a5fa;
+ --accent-light: rgba(96, 165, 250, 0.1);
+ --accent-border: rgba(96, 165, 250, 0.2);
+ --success: #10b981;
+ --success-light: rgba(16, 185, 129, 0.1);
+ --error: #f87171;
+ --error-light: rgba(248, 113, 113, 0.1);
+ --warning: #fbbf24;
+ --shadow: rgba(0, 0, 0, 0.3);
+ --shadow-lg: rgba(0, 0, 0, 0.4);
+}
+
+/* Base */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: var(--bg-primary);
+ color: var(--text-primary);
+ font-size: 14px;
+ line-height: 1.5;
+ height: 100vh;
+ overflow: hidden;
+}
+
+#drawbridge-app {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+/* Header */
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ background: var(--bg-secondary);
+ border-bottom: 1px solid var(--border);
+ flex-shrink: 0;
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+}
+
+.header-right {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.header-btn {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-primary);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ color: var(--text-tertiary);
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.header-btn:hover {
+ background: var(--bg-secondary);
+ color: var(--text-secondary);
+ border-color: var(--border-light);
+}
+
+.header-btn.active {
+ background: var(--accent-light);
+ color: var(--accent);
+ border-color: var(--accent-border);
+}
+
+.header-btn:disabled,
+.connect-btn-primary:disabled,
+.project-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.header-btn svg {
+ width: 16px;
+ height: 16px;
+}
+
+/* Tabs */
+.tabs {
+ display: flex;
+ padding: 12px 16px 8px;
+ gap: 4px;
+ background: var(--bg-primary);
+ flex-shrink: 0;
+}
+
+.tab {
+ flex: 1;
+ padding: 8px 12px;
+ background: var(--bg-tertiary);
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ font-family: inherit;
+}
+
+.tab:hover {
+ background: var(--bg-secondary);
+ color: var(--text-primary);
+}
+
+.tab.active {
+ background: var(--bg-primary);
+ color: var(--text-primary);
+ box-shadow: 0 1px 3px var(--shadow);
+ font-weight: 600;
+}
+
+.badge {
+ background: var(--accent);
+ color: white;
+ border-radius: 8px;
+ padding: 1px 6px;
+ font-size: 10px;
+ font-weight: 600;
+ min-width: 16px;
+ text-align: center;
+ display: none;
+}
+
+.tab[data-status="to do"] .badge { background: #f59e0b; }
+.tab[data-status="doing"] .badge { background: #3b82f6; }
+.tab[data-status="done"] .badge { background: #10b981; }
+
+/* Connection Status (in header) */
+.connection-status {
+ display: flex;
+ align-items: center;
+}
+
+/* Disconnected state: show blue button only */
+.connect-btn-primary {
+ padding: 6px 12px;
+ background: var(--accent);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s;
+ font-family: inherit;
+}
+
+.connect-btn-primary:hover {
+ opacity: 0.9;
+}
+
+/* Connected state: project button */
+.project-btn {
+ display: none;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 10px;
+ background: var(--bg-tertiary);
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ cursor: pointer;
+ transition: all 0.2s;
+ font-family: inherit;
+}
+
+.project-btn:hover {
+ background: var(--bg-secondary);
+ border-color: var(--border-light);
+}
+
+.status-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ background: var(--success);
+ box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
+}
+
+.status-text {
+ font-size: 12px;
+ color: var(--text-primary);
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100px;
+}
+
+.project-btn .chevron {
+ width: 14px;
+ height: 14px;
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+
+/* State visibility */
+.connection-status.disconnected .connect-btn-primary {
+ display: block;
+}
+
+.connection-status.disconnected .project-btn {
+ display: none;
+}
+
+.connection-status.connected .connect-btn-primary {
+ display: none;
+}
+
+.connection-status.connected .project-btn {
+ display: flex;
+}
+
+/* Project menu positioning */
+.project-menu {
+ right: 56px;
+ left: auto;
+}
+
+.menu-divider {
+ height: 1px;
+ background: var(--border);
+ margin: 4px 0;
+}
+
+.disconnect-item:hover {
+ background: var(--error-light);
+ color: var(--error);
+}
+
+/* Task Container */
+.task-container {
+ flex: 1;
+ overflow-y: auto;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+/* Empty State */
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ text-align: center;
+ color: var(--text-muted);
+ padding: 40px 20px;
+}
+
+.empty-icon {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 16px;
+ opacity: 0.5;
+}
+
+.empty-state p {
+ margin: 0;
+}
+
+.empty-state .hint {
+ font-size: 12px;
+ margin-top: 8px;
+}
+
+/* Task Card */
+.task-card {
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 8px;
+ transition: all 0.2s;
+ min-height: 100px;
+}
+
+.task-card.status-to-do { border-left: 4px solid #f59e0b; }
+.task-card.status-doing { border-left: 4px solid #3b82f6; }
+.task-card.status-done { border-left: 4px solid #10b981; }
+.task-card.completed { opacity: 0.7; }
+
+/* Two-column layout */
+.task-layout {
+ display: flex;
+ gap: 12px;
+ align-items: stretch;
+ min-height: 84px;
+}
+
+.task-content-area {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.task-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 6px;
+}
+
+.task-time {
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text-tertiary);
+ flex: 1;
+}
+
+.delete-btn {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ color: var(--text-muted);
+ cursor: pointer;
+ opacity: 0;
+ transition: all 0.2s;
+ flex-shrink: 0;
+}
+
+.task-card:hover .delete-btn {
+ opacity: 1;
+}
+
+.delete-btn:hover {
+ background: var(--error-light);
+ color: var(--error);
+ border-color: var(--error);
+}
+
+.delete-btn svg {
+ width: 14px;
+ height: 14px;
+}
+
+.task-content {
+ font-size: 14px;
+ color: var(--text-secondary);
+ line-height: 1.4;
+ margin-bottom: 6px;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ flex-shrink: 0;
+}
+
+.task-selector {
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+ background: var(--bg-tertiary);
+ color: var(--text-tertiary);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 11px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-top: auto;
+ align-self: flex-start;
+ max-width: 140px;
+}
+
+/* Thumbnail */
+.thumbnail-container {
+ position: relative;
+ width: 100px;
+ flex-shrink: 0;
+ border-radius: 6px;
+ overflow: visible;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border);
+ align-self: stretch;
+}
+
+.thumbnail-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 6px;
+}
+
+.thumbnail-delete-btn {
+ position: absolute;
+ top: -6px;
+ right: -6px;
+ width: 22px;
+ height: 22px;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-primary);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ color: var(--text-muted);
+ cursor: pointer;
+ transition: all 0.2s;
+ box-shadow: 0 1px 3px var(--shadow);
+}
+
+.task-card:hover .thumbnail-delete-btn {
+ display: flex;
+}
+
+.thumbnail-delete-btn:hover {
+ background: var(--error-light);
+ color: var(--error);
+ border-color: var(--error);
+}
+
+.thumbnail-delete-btn svg {
+ width: 12px;
+ height: 12px;
+}
+
+/* Dropdown Menu */
+.dropdown-menu {
+ position: absolute;
+ top: 48px;
+ left: 16px;
+ background: var(--bg-primary);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ box-shadow: 0 4px 12px var(--shadow);
+ z-index: 100;
+ min-width: 180px;
+ overflow: hidden;
+}
+
+.dropdown-menu.hidden {
+ display: none;
+}
+
+.menu-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ padding: 12px 16px;
+ background: none;
+ border: none;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: background 0.2s;
+ text-align: left;
+ font-family: inherit;
+}
+
+.menu-item:hover {
+ background: var(--bg-secondary);
+}
+
+.menu-item.active {
+ background: var(--accent-light);
+ color: var(--accent);
+}
+
+.menu-item.active .shortcut {
+ background: var(--accent);
+ color: white;
+ border-color: var(--accent);
+}
+
+.menu-item svg {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+.shortcut {
+ margin-left: auto;
+ padding: 2px 6px;
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--text-tertiary);
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+}
+
+/* Notifications */
+.notification-container {
+ position: fixed;
+ bottom: 16px;
+ left: 16px;
+ right: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ z-index: 1000;
+ pointer-events: none;
+}
+
+.notification {
+ padding: 10px 16px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ font-size: 13px;
+ color: var(--text-primary);
+ box-shadow: 0 4px 12px var(--shadow);
+ animation: slideUp 0.3s ease;
+ pointer-events: auto;
+}
+
+.notification.success {
+ background: var(--success-light);
+ border-color: var(--success);
+ color: var(--success);
+}
+
+.notification.error {
+ background: var(--error-light);
+ border-color: var(--error);
+ color: var(--error);
+}
+
+.notification.removing {
+ animation: slideDown 0.3s ease forwards;
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideDown {
+ from {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+}
+
+/* Scrollbar */
+.task-container::-webkit-scrollbar {
+ width: 6px;
+}
+
+.task-container::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.task-container::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 3px;
+}
+
+.task-container::-webkit-scrollbar-thumb:hover {
+ background: var(--text-muted);
+}
diff --git a/chrome-extension/sidepanel/sidepanel.html b/chrome-extension/sidepanel/sidepanel.html
new file mode 100644
index 0000000..9d18c45
--- /dev/null
+++ b/chrome-extension/sidepanel/sidepanel.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+
-
-
-
- ${hasScreenshot ?
- `
-
-
- ${timeAgo}
-
- ${!hasScreenshot && (task.format === 'current' || !task.format) ?
- `` :
- ''
- }
- ${task.content || task.comment || 'No content available'}
- ${task.selector ? `${task.selector}` : ''}
-
- ![Task thumbnail]()
-
-
` :
- ''
- }
-
+
+
+
+
+
+
diff --git a/chrome-extension/sidepanel/sidepanel.js b/chrome-extension/sidepanel/sidepanel.js
new file mode 100644
index 0000000..f068ea6
--- /dev/null
+++ b/chrome-extension/sidepanel/sidepanel.js
@@ -0,0 +1,731 @@
+/**
+ * Drawbridge Side Panel
+ *
+ * Handles UI rendering and communication with content scripts.
+ * File operations remain in the content script context.
+ */
+
+// State
+let currentTab = 'to do';
+let tasks = [];
+let isConnected = false;
+let projectPath = '';
+let currentMode = null; // 'comment', 'drawing', or null
+
+// Thumbnail cache
+const thumbnailCache = new Map();
+
+// DOM Elements
+const taskContainer = document.getElementById('task-container');
+const connectionBanner = document.getElementById('connection-banner');
+const connectBtn = document.getElementById('connect-btn');
+const projectBtn = document.getElementById('project-btn');
+const projectMenu = document.getElementById('project-menu');
+const statusText = connectionBanner.querySelector('.status-text');
+const toolsBtn = document.getElementById('tools-btn');
+const toolsMenu = document.getElementById('tools-menu');
+const settingsBtn = document.getElementById('settings-btn');
+const notificationContainer = document.getElementById('notification-container');
+const tabs = document.querySelectorAll('.tab');
+const todoBadge = document.getElementById('todo-badge');
+const doingBadge = document.getElementById('doing-badge');
+const doneBadge = document.getElementById('done-badge');
+
+// Initialize
+document.addEventListener('DOMContentLoaded', init);
+
+async function init() {
+ setupEventListeners();
+ await loadTheme();
+
+ // Small initial delay to let content script load
+ await new Promise(r => setTimeout(r, 100));
+
+ // Try to connect to content script with retry (5 attempts)
+ const ready = await connectWithRetry(5);
+
+ if (ready) {
+ await checkConnectionStatus();
+ if (isConnected) {
+ requestTasks();
+ }
+ }
+
+ // Listen for tab activation changes
+ chrome.tabs.onActivated.addListener(handleTabChange);
+
+ // Listen for tab URL changes (navigation)
+ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+ if (changeInfo.status === 'complete') {
+ handleTabChange();
+ }
+ });
+}
+
+// Handle tab switching - re-check connection status
+async function handleTabChange() {
+ // Small delay to let content script initialize
+ setTimeout(async () => {
+ const ready = await connectWithRetry(2);
+ if (ready) {
+ await checkConnectionStatus();
+ if (isConnected) {
+ requestTasks();
+ } else {
+ tasks = [];
+ renderTasks();
+ updateBadges();
+ }
+ } else {
+ // Content script not ready
+ isConnected = false;
+ tasks = [];
+ updateConnectionBanner();
+ renderTasks();
+ updateBadges();
+ }
+ }, 150);
+}
+
+// Event Listeners
+function setupEventListeners() {
+ // Tab switching
+ tabs.forEach(tab => {
+ tab.addEventListener('click', () => {
+ const status = tab.dataset.status;
+ setActiveTab(status);
+ });
+ });
+
+ // Connect button
+ connectBtn.addEventListener('click', async () => {
+ // Try to reconnect if content script wasn't ready
+ if (!contentScriptReady) {
+ const ready = await connectWithRetry(3);
+ if (!ready) {
+ showNotification('Please refresh the page to connect', 'error');
+ return;
+ }
+ }
+
+ const result = await sendToContentScript({ type: 'SETUP_PROJECT' }, false);
+ if (!result) {
+ showNotification('Please refresh the page to connect', 'error');
+ }
+ // PROJECT_CONNECTED message will update the UI on success
+ });
+
+ // Project button (opens dropdown)
+ projectBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ toggleProjectMenu();
+ });
+
+ // Project menu items
+ projectMenu.querySelectorAll('.menu-item').forEach(item => {
+ item.addEventListener('click', async () => {
+ const action = item.dataset.action;
+ hideProjectMenu();
+
+ if (action === 'disconnect') {
+ // Get current tab's origin to set disconnect flag
+ const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+ if (tab?.url) {
+ try {
+ const origin = new URL(tab.url).origin;
+ // Set disconnect flag in chrome.storage.local - this works even if content script is unreachable
+ await chrome.storage.local.set({ [`drawbridge:disconnected:${origin}`]: true });
+ } catch (e) {
+ console.warn('Could not set disconnect flag:', e);
+ }
+ }
+
+ // Try to notify content script (best effort)
+ sendToContentScript({ type: 'DISCONNECT_PROJECT' }, false);
+
+ // Update UI immediately
+ isConnected = false;
+ projectPath = '';
+ tasks = [];
+ thumbnailCache.clear();
+ updateConnectionBanner();
+ renderTasks();
+ updateBadges();
+ showNotification('Project disconnected', 'success');
+ } else if (action === 'refresh') {
+ showNotification('Refreshing data...', 'info');
+ requestTasks();
+ } else if (action === 'clear-screenshots') {
+ // First get screenshot count
+ const countResult = await sendToContentScript({ type: 'GET_SCREENSHOT_COUNT' }, false);
+ const count = countResult?.count || 0;
+
+ if (count === 0) {
+ showNotification('No screenshots to clear', 'info');
+ return;
+ }
+
+ if (confirm(`Clear ${count} screenshot${count !== 1 ? 's' : ''}? This cannot be undone.`)) {
+ const result = await sendToContentScript({ type: 'CLEAR_SCREENSHOTS' }, false);
+ if (result?.success) {
+ showNotification(`${count} screenshot${count !== 1 ? 's' : ''} cleared`, 'success');
+ requestTasks();
+ } else {
+ showNotification('Failed to clear screenshots', 'error');
+ }
+ }
+ }
+ });
+ });
+
+ // Tools dropdown
+ toolsBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ toggleToolsMenu();
+ });
+
+ // Tool menu items
+ toolsMenu.querySelectorAll('.menu-item').forEach(item => {
+ item.addEventListener('click', async () => {
+ const action = item.dataset.action;
+ hideToolsMenu();
+
+ // Check if content script is ready
+ if (!contentScriptReady) {
+ const ready = await connectWithRetry(2);
+ if (!ready) {
+ showNotification('Please refresh the page first', 'error');
+ return;
+ }
+ }
+
+ // Toggle mode off if already active
+ if ((action === 'comment' && currentMode === 'comment') ||
+ (action === 'rectangle' && currentMode === 'drawing')) {
+ sendToContentScript({ type: 'EXIT_ANNOTATION_MODE' }, false);
+ } else if (action === 'comment') {
+ sendToContentScript({ type: 'ENTER_COMMENT_MODE' }, false);
+ } else if (action === 'rectangle') {
+ sendToContentScript({ type: 'ENTER_DRAWING_MODE' }, false);
+ }
+ });
+ });
+
+ // Settings button (theme toggle for now)
+ settingsBtn.addEventListener('click', toggleTheme);
+
+ // Close menus on outside click
+ document.addEventListener('click', () => {
+ hideToolsMenu();
+ hideProjectMenu();
+ });
+
+ // Listen for messages from content script via background
+ chrome.runtime.onMessage.addListener(handleMessage);
+}
+
+// Message Handling
+function handleMessage(message, sender, sendResponse) {
+ console.log('[SidePanel] Received message:', message.type);
+
+ switch (message.type) {
+ case 'TASKS_LOADED':
+ tasks = message.tasks || [];
+ renderTasks();
+ updateBadges();
+ break;
+
+ case 'PROJECT_CONNECTED':
+ isConnected = true;
+ projectPath = message.path || '';
+ updateConnectionBanner();
+ showNotification('Project connected', 'success');
+ requestTasks();
+ break;
+
+ case 'PROJECT_DISCONNECTED':
+ isConnected = false;
+ projectPath = '';
+ tasks = [];
+ updateConnectionBanner();
+ renderTasks();
+ updateBadges();
+ showNotification('Project disconnected', 'info');
+ break;
+
+ case 'ANNOTATION_CREATED':
+ showNotification('Annotation saved', 'success');
+ requestTasks();
+ break;
+
+ case 'MODE_CHANGED':
+ currentMode = message.mode;
+ updateToolsButtonState();
+ if (message.mode) {
+ showNotification(`${message.mode === 'comment' ? 'Comment' : 'Rectangle'} mode active - click on page`, 'info');
+ }
+ break;
+
+ case 'CONNECTION_STATUS':
+ isConnected = message.status === 'connected';
+ projectPath = message.path || '';
+ updateConnectionBanner();
+ if (isConnected) {
+ requestTasks();
+ }
+ break;
+
+ case 'TASK_UPDATED':
+ requestTasks();
+ break;
+
+ case 'TASK_DELETED':
+ requestTasks();
+ break;
+ }
+
+ return true;
+}
+
+// Communication with Content Script
+let lastErrorTime = 0;
+let contentScriptReady = false;
+
+async function sendToContentScript(message, showError = true) {
+ try {
+ const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+ if (!tab?.id) {
+ console.warn('[SidePanel] No active tab');
+ return null;
+ }
+
+ // Check for restricted pages
+ const restrictedSchemes = ['chrome://', 'chrome-extension://', 'edge://', 'about:', 'devtools://'];
+ if (tab.url && restrictedSchemes.some(scheme => tab.url.startsWith(scheme))) {
+ return null;
+ }
+
+ return new Promise((resolve) => {
+ chrome.tabs.sendMessage(tab.id, message, (response) => {
+ if (chrome.runtime.lastError) {
+ console.warn('[SidePanel] Send failed:', chrome.runtime.lastError.message);
+ contentScriptReady = false;
+ updatePageStatus();
+ // Debounce error notifications (only show once per 5 seconds)
+ const now = Date.now();
+ if (showError && now - lastErrorTime > 5000) {
+ lastErrorTime = now;
+ showNotification('Page needs refresh to connect', 'error');
+ }
+ resolve(null);
+ } else {
+ contentScriptReady = true;
+ updatePageStatus();
+ resolve(response);
+ }
+ });
+ });
+ } catch (error) {
+ console.error('[SidePanel] Error sending message:', error);
+ return null;
+ }
+}
+
+// Ping content script to check if it's ready
+async function pingContentScript() {
+ try {
+ const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+ if (!tab?.id) return false;
+
+ const restrictedSchemes = ['chrome://', 'chrome-extension://', 'edge://', 'about:', 'devtools://'];
+ if (tab.url && restrictedSchemes.some(scheme => tab.url.startsWith(scheme))) {
+ return false;
+ }
+
+ return new Promise((resolve) => {
+ chrome.tabs.sendMessage(tab.id, { action: 'ping' }, (response) => {
+ if (chrome.runtime.lastError) {
+ resolve(false);
+ } else {
+ resolve(response?.ready === true);
+ }
+ });
+ });
+ } catch {
+ return false;
+ }
+}
+
+// Retry connection with backoff
+async function connectWithRetry(maxRetries = 3) {
+ for (let i = 0; i < maxRetries; i++) {
+ const ready = await pingContentScript();
+ if (ready) {
+ contentScriptReady = true;
+ updatePageStatus();
+ return true;
+ }
+ // Wait before retry (200ms, 400ms, 800ms)
+ await new Promise(r => setTimeout(r, 200 * Math.pow(2, i)));
+ }
+ contentScriptReady = false;
+ updatePageStatus();
+ return false;
+}
+
+// Update UI based on page connection status
+function updatePageStatus() {
+ // Don't disable buttons - we'll handle connection issues when user clicks
+ // This provides a better UX than showing disabled buttons
+}
+
+async function checkConnectionStatus() {
+ try {
+ const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+ if (!tab?.id) {
+ // No active tab
+ isConnected = false;
+ projectPath = '';
+ updateConnectionBanner();
+ return;
+ }
+
+ // Check if this is a restricted page
+ const restrictedSchemes = ['chrome://', 'chrome-extension://', 'edge://', 'about:', 'devtools://'];
+ if (tab.url && restrictedSchemes.some(scheme => tab.url.startsWith(scheme))) {
+ isConnected = false;
+ projectPath = '';
+ updateConnectionBanner();
+ return;
+ }
+
+ // Don't show error for status check - content script might just need page refresh
+ const response = await sendToContentScript({ type: 'GET_CONNECTION_STATUS' }, false);
+ if (response) {
+ isConnected = response.connected;
+ projectPath = response.path || '';
+ updateConnectionBanner();
+ if (isConnected) {
+ requestTasks();
+ }
+ } else {
+ // Content script not ready
+ isConnected = false;
+ projectPath = '';
+ updateConnectionBanner();
+ }
+ } catch (error) {
+ console.error('[SidePanel] Error checking status:', error);
+ isConnected = false;
+ updateConnectionBanner();
+ }
+}
+
+async function requestTasks() {
+ const response = await sendToContentScript({ type: 'LOAD_TASKS' }, false);
+ // Tasks will be received via TASKS_LOADED message from content script
+}
+
+// UI Updates
+function updateConnectionBanner() {
+ if (isConnected) {
+ connectionBanner.classList.remove('disconnected');
+ connectionBanner.classList.add('connected');
+ statusText.textContent = projectPath || 'Connected';
+ } else {
+ connectionBanner.classList.remove('connected');
+ connectionBanner.classList.add('disconnected');
+ }
+}
+
+function setActiveTab(status) {
+ currentTab = status;
+ tabs.forEach(tab => {
+ tab.classList.toggle('active', tab.dataset.status === status);
+ });
+ renderTasks();
+}
+
+function updateBadges() {
+ const counts = {
+ 'to do': 0,
+ 'doing': 0,
+ 'done': 0
+ };
+
+ tasks.forEach(task => {
+ const status = (task.status || 'to do').toLowerCase();
+ if (counts.hasOwnProperty(status)) {
+ counts[status]++;
+ }
+ });
+
+ todoBadge.textContent = counts['to do'];
+ todoBadge.style.display = counts['to do'] > 0 ? 'inline' : 'none';
+
+ doingBadge.textContent = counts['doing'];
+ doingBadge.style.display = counts['doing'] > 0 ? 'inline' : 'none';
+
+ doneBadge.textContent = counts['done'];
+ doneBadge.style.display = counts['done'] > 0 ? 'inline' : 'none';
+}
+
+// Task Rendering
+function renderTasks() {
+ // Show connect prompt if not connected (whether or not content script is ready)
+ if (!isConnected) {
+ taskContainer.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No tasks yet
+Use the tools to annotate elements on the page
+
+
+
+ `;
+ return;
+ }
+
+ const filteredTasks = tasks.filter(task => {
+ const taskStatus = (task.status || 'to do').toLowerCase();
+ return taskStatus === currentTab;
+ });
+
+ if (filteredTasks.length === 0) {
+ taskContainer.innerHTML = `
+ Connect a project to get started
+Click "Connect Project" to select a folder
+
+
+
+ `;
+ return;
+ }
+
+ // Sort tasks chronologically (oldest first)
+ const sortedTasks = [...filteredTasks].sort((a, b) => {
+ return (a.timestamp || a.createdAt || 0) - (b.timestamp || b.createdAt || 0);
+ });
+
+ taskContainer.innerHTML = sortedTasks.map(task => renderTaskCard(task)).join('');
+
+ // Load thumbnails for tasks with screenshots
+ loadThumbnails();
+
+ // Add event listeners to task cards
+ addTaskEventListeners();
+}
+
+function addTaskEventListeners() {
+ taskContainer.querySelectorAll('.task-card').forEach(card => {
+ const taskId = card.dataset.taskId;
+
+ // Status dropdown
+ const statusSelect = card.querySelector('.status-select');
+ if (statusSelect) {
+ statusSelect.addEventListener('change', (e) => {
+ // Don't show error - TASK_UPDATED message will refresh the UI
+ sendToContentScript({
+ type: 'UPDATE_TASK_STATUS',
+ taskId,
+ status: e.target.value
+ }, false);
+ });
+ }
+
+ // Delete button (on card or thumbnail)
+ card.querySelectorAll('.delete-btn, .thumbnail-delete-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ if (confirm('Delete this task?')) {
+ // Don't show error - TASK_DELETED message will refresh the UI
+ sendToContentScript({ type: 'DELETE_TASK', taskId }, false);
+ }
+ });
+ });
+ });
+}
+
+// Load thumbnails for tasks with screenshots
+async function loadThumbnails() {
+ const thumbnailContainers = taskContainer.querySelectorAll('.thumbnail-container');
+
+ for (const container of thumbnailContainers) {
+ const screenshotPath = container.dataset.screenshotPath;
+ const taskId = container.dataset.taskId;
+
+ if (!screenshotPath) continue;
+
+ // Check cache first
+ if (thumbnailCache.has(screenshotPath)) {
+ setThumbnailSrc(container, thumbnailCache.get(screenshotPath));
+ continue;
+ }
+
+ // Request thumbnail from content script
+ try {
+ const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+ if (tab?.id) {
+ chrome.tabs.sendMessage(tab.id, {
+ type: 'GET_THUMBNAIL',
+ screenshotPath,
+ taskId
+ }, (response) => {
+ if (response?.success && response.dataUrl) {
+ thumbnailCache.set(screenshotPath, response.dataUrl);
+ setThumbnailSrc(container, response.dataUrl);
+ }
+ });
+ }
+ } catch (error) {
+ console.warn('Failed to load thumbnail:', error);
+ }
+ }
+}
+
+function setThumbnailSrc(container, src) {
+ const img = container.querySelector('.thumbnail-img');
+ if (img) {
+ img.src = src;
+ img.style.display = 'block';
+ }
+}
+
+function renderTaskCard(task) {
+ const statusClass = (task.status || 'to do').toLowerCase().replace(' ', '-');
+ const timestamp = task.timestamp || task.createdAt;
+ const timeAgo = timestamp ? formatTime(timestamp) : '';
+ const hasScreenshot = !!task.screenshotPath;
+ const isCompleted = task.status === 'done';
+
+ // Calculate thumbnail focus point if available
+ let thumbnailStyle = '';
+ if (hasScreenshot && task.clickPosition && task.screenshotViewport) {
+ const clickAbsoluteX = (task.boundingRect?.x || 0) + (task.clickPosition?.x || 0);
+ const clickAbsoluteY = (task.boundingRect?.y || 0) + (task.clickPosition?.y || 0);
+ const clickInViewportX = clickAbsoluteX - (task.screenshotViewport?.x || 0);
+ const clickInViewportY = clickAbsoluteY - (task.screenshotViewport?.y || 0);
+ const xPercent = (clickInViewportX / (task.screenshotViewport?.width || 1)) * 100;
+ const yPercent = (clickInViewportY / (task.screenshotViewport?.height || 1)) * 100;
+ thumbnailStyle = `object-position: ${xPercent}% ${yPercent}%;`;
+ }
+
+ return `
+ No ${currentTab} tasks
+Use the tools to annotate elements on the page
+
+
+ `;
+}
+
+function formatTime(timestamp) {
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diffMs = now - date;
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMs / 3600000);
+ const diffDays = Math.floor(diffMs / 86400000);
+
+ if (diffMins < 1) return 'Just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+ if (diffHours < 24) return `${diffHours}h ago`;
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return date.toLocaleDateString();
+}
+
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+// Tools Menu
+function toggleToolsMenu() {
+ toolsMenu.classList.toggle('hidden');
+}
+
+function hideToolsMenu() {
+ toolsMenu.classList.add('hidden');
+}
+
+// Project Menu
+function toggleProjectMenu() {
+ projectMenu.classList.toggle('hidden');
+ hideToolsMenu();
+}
+
+function hideProjectMenu() {
+ projectMenu.classList.add('hidden');
+}
+
+function updateToolsButtonState() {
+ if (currentMode) {
+ toolsBtn.classList.add('active');
+ toolsBtn.title = `${currentMode === 'comment' ? 'Comment' : 'Rectangle'} mode active`;
+ } else {
+ toolsBtn.classList.remove('active');
+ toolsBtn.title = 'Tools';
+ }
+
+ // Update menu items
+ toolsMenu.querySelectorAll('.menu-item').forEach(item => {
+ const action = item.dataset.action;
+ const isActive = (action === 'comment' && currentMode === 'comment') ||
+ (action === 'rectangle' && currentMode === 'drawing');
+ item.classList.toggle('active', isActive);
+ });
+}
+
+// Theme
+async function loadTheme() {
+ const result = await chrome.storage.local.get('theme');
+ const theme = result.theme || 'light';
+ document.documentElement.setAttribute('data-theme', theme);
+}
+
+async function toggleTheme() {
+ const current = document.documentElement.getAttribute('data-theme') || 'light';
+ const next = current === 'light' ? 'dark' : 'light';
+ document.documentElement.setAttribute('data-theme', next);
+ await chrome.storage.local.set({ theme: next });
+}
+
+// Notifications
+function showNotification(message, type = 'info') {
+ const notification = document.createElement('div');
+ notification.className = `notification ${type}`;
+ notification.textContent = message;
+
+ notificationContainer.appendChild(notification);
+
+ setTimeout(() => {
+ notification.classList.add('removing');
+ setTimeout(() => notification.remove(), 300);
+ }, 3000);
+}
diff --git a/chrome-extension/tests/v2/README.md b/chrome-extension/tests/v2/README.md
new file mode 100644
index 0000000..15c7d2e
--- /dev/null
+++ b/chrome-extension/tests/v2/README.md
@@ -0,0 +1,282 @@
+# Drawbridge V2 Test Framework
+
+## Overview
+
+This is a lightweight test framework for Drawbridge V2 that runs without npm dependencies. It provides comprehensive coverage of all Jobs-to-be-Done (JTBD) extracted from the V1 codebase.
+
+## Architecture
+
+### Test Runner (`test-runner.js`)
+- Minimal Jest/Mocha-style test framework
+- Supports `describe`, `it`, `beforeEach`, `afterEach`, `beforeAll`, `afterAll`
+- Built-in assertion library with `expect()` API
+- No external dependencies
+
+### Mocks (`chrome-mock.js`)
+- Chrome Extension API mocks (`chrome.runtime`, `chrome.tabs`, `chrome.storage`, etc.)
+- File System Access API mocks (`showDirectoryPicker`, directory handles, file handles)
+- IndexedDB mocks for persistence testing
+- DOM mocks for browser environment
+
+### Test Files
+
+1. **`connection.test.js`** - JTBD-01 to JTBD-13
+ - Connection & Project Setup
+ - Directory selection
+ - Template deployment
+ - Persistence & restoration
+
+2. **`tasks.test.js`** - JTBD-42 to JTBD-56
+ - Task Management (CRUD)
+ - Task creation
+ - Status updates
+ - Deduplication
+ - Statistics
+
+3. **`markdown.test.js`** - JTBD-57 to JTBD-66
+ - Markdown Generation
+ - Task formatting
+ - Checkbox conversion
+ - Comment truncation
+ - File writing
+
+4. **`run-all.js`**
+ - Entry point for running all tests
+ - Generates comprehensive report
+ - Updates JTBD status
+
+## Running Tests
+
+### Option 1: Browser Console (Recommended)
+
+1. Open your browser and navigate to a page
+2. Load the utility files first (in order):
+ ```javascript
+ // Load utilities
+ // These should be loaded via content_script.js normally
+ // For testing, load them manually or ensure they're available
+ ```
+
+3. Load test framework:
+ ```html
+
+
+ ```
+
+4. Load test files:
+ ```html
+
+
+
+ ```
+
+5. Run all tests:
+ ```html
+
+ ```
+
+### Option 2: Node.js Environment
+
+```bash
+# Install Node.js if not already installed
+# No npm packages needed!
+
+# Run tests
+node tests/v2/run-all.js
+```
+
+Note: You'll need to load the utility modules (taskStore.js, markdownGenerator.js, etc.) before running tests.
+
+### Option 3: Test HTML Page
+
+Create `tests/v2/test-runner.html`:
+
+```html
+
+
+
+
+
+
+
+
+ ${hasScreenshot ? `
+
+ ${timeAgo}
+ ${!hasScreenshot ? `
+
+ ` : ''}
+
+ ${escapeHtml(task.comment || task.content || 'No comment')}
+ ${task.selector ? `${escapeHtml(task.selector)}
` : ''}
+
+
+
+
+ ` : ''}
+ Drawbridge V2 Test Runner
+Open console to see test results...
+ + + + + + + + + + + + + + + + + + + + +``` + +Then open in browser: `file:///path/to/tests/v2/test-runner.html` + +## Test Structure + +Each test file follows this pattern: + +```javascript +const runner = new TestRunner(); +const { describe, it, beforeEach, afterEach, expect } = (() => { + return { + describe: runner.describe.bind(runner), + it: runner.it.bind(runner), + beforeEach: runner.beforeEach.bind(runner), + afterEach: runner.afterEach.bind(runner), + expect + }; +})(); + +describe('JTBD-XX: Job description', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should do something', () => { + // Test code + expect(actual).toBe(expected); + }); +}); +``` + +## Assertion API + +```javascript +expect(value).toBe(expected) // Strict equality (===) +expect(value).toEqual(expected) // Deep equality (JSON.stringify) +expect(value).toBeTruthy() // Truthy check +expect(value).toBeFalsy() // Falsy check +expect(value).toBeNull() // Null check +expect(value).toBeUndefined() // Undefined check +expect(array).toContain(item) // Array/string contains +expect(array).toHaveLength(length) // Length check +expect(obj).toHaveProperty(prop, value) // Property check +expect(fn).toThrow(error) // Exception check +expect(value).toBeInstanceOf(constructor) // Instance check + +// Negation +expect(value).not.toBe(expected) +``` + +## Adding New Tests + +1. **Identify the JTBD** from `JOBS-TO-BE-DONE.md` +2. **Create or add to test file** for the appropriate category +3. **Write test case**: + ```javascript + describe('JTBD-XX: Job description', () => { + it('should verify specific behavior', () => { + // Arrange + const input = setupTestData(); + + // Act + const result = functionUnderTest(input); + + // Assert + expect(result).toBe(expected); + }); + }); + ``` +4. **Update `run-all.js`** if needed to include new test file +5. **Run tests** and verify +6. **Update JTBD status** in `JOBS-TO-BE-DONE.md` + +## Debugging Tests + +### Enable Verbose Logging + +```javascript +// In chrome-mock.js +const mocks = setupMocks(); +mocks.chromeMock.enableDebug(); +``` + +### Check Available Modules + +```javascript +console.log('TaskStore:', !!window.MoatTaskStore); +console.log('MarkdownGenerator:', !!window.MoatMarkdownGenerator); +console.log('Persistence:', !!window.MoatPersistence); +``` + +### Inspect Test Results + +```javascript +const results = await runner.run(); +console.log(results.stats); +console.log(results.failedTests); +``` + +## Coverage Goals + +- **161 total JTBDs** identified from V1 codebase +- **~135 V2-applicable JTBDs** (excluding V1 sidebar-specific) +- **Target: 80%+ coverage** for V2 migration + +## Current Status + +Run tests to see current status. Results will show: +- β Passing tests +- β Failing tests +- β³ Not yet tested +- π« Not applicable to V2 + +## Continuous Testing + +For V2 development: +1. Write tests BEFORE implementing features (TDD) +2. Run tests AFTER each change +3. Update JTBD status as tests pass +4. Aim for 100% pass rate before V2 release + +## Troubleshooting + +### "Module not found" errors +- Ensure utility files are loaded before tests +- Check file paths in script tags +- Verify files exist in expected locations + +### Tests fail with "not available" messages +- Utility modules (TaskStore, MarkdownGenerator, etc.) are not loaded +- Load them before running tests + +### File System Access API errors +- Mocks should handle this automatically +- Verify `setupMocks()` is called in `beforeEach` + +### IndexedDB errors +- Mocks should handle this automatically +- Check that `indexedDB` is properly mocked + +## Contributing + +When adding tests: +1. Follow existing patterns +2. Reference JTBD ID in test name +3. Keep tests focused and isolated +4. Use mocks to avoid side effects +5. Document complex test logic + +## License + +Same as Drawbridge project. diff --git a/chrome-extension/tests/v2/chrome-mock.js b/chrome-extension/tests/v2/chrome-mock.js new file mode 100644 index 0000000..e57b458 --- /dev/null +++ b/chrome-extension/tests/v2/chrome-mock.js @@ -0,0 +1,475 @@ +/** + * Chrome API Mocks for Testing + * + * Provides mock implementations of Chrome extension APIs and File System Access API + * to enable testing without a browser extension environment. + */ + +class ChromeMock { + constructor() { + this.runtime = { + lastError: null, + onMessage: { + addListener: (callback) => { + this._messageListeners = this._messageListeners || []; + this._messageListeners.push(callback); + }, + removeListener: (callback) => { + if (this._messageListeners) { + const index = this._messageListeners.indexOf(callback); + if (index > -1) { + this._messageListeners.splice(index, 1); + } + } + } + }, + sendMessage: (message, callback) => { + // Simulate async response + setTimeout(() => { + if (message.type === 'CAPTURE_SCREENSHOT') { + callback({ + success: true, + dataUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==' + }); + } else { + callback({ success: false, error: 'Unknown message type' }); + } + }, 0); + }, + getURL: (path) => { + return `chrome-extension://mock-extension-id/${path}`; + } + }; + + this.tabs = { + captureVisibleTab: (windowId, options, callback) => { + // Return a mock base64 image + setTimeout(() => { + callback('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='); + }, 0); + }, + sendMessage: (tabId, message, callback) => { + setTimeout(() => { + callback({ success: true }); + }, 0); + } + }; + + this.action = { + _actionListeners: [], + onClicked: { + addListener: (callback) => { + this.action._actionListeners.push(callback); + } + } + }; + + this.sidePanel = { + open: async ({ tabId }) => { + console.log(`Mock: Side panel opened for tab ${tabId}`); + return Promise.resolve(); + }, + setOptions: async (options) => { + console.log('Mock: Side panel options set', options); + return Promise.resolve(); + }, + getOptions: async ({ tabId }) => { + return Promise.resolve({ enabled: true, path: 'sidepanel/sidepanel.html' }); + } + }; + + this.storage = { + local: { + data: {}, + get: (keys, callback) => { + const result = {}; + if (typeof keys === 'string') { + if (this.storage.local.data.hasOwnProperty(keys)) { + result[keys] = this.storage.local.data[keys]; + } + } else if (Array.isArray(keys)) { + keys.forEach(key => { + if (this.storage.local.data.hasOwnProperty(key)) { + result[key] = this.storage.local.data[key]; + } + }); + } + if (callback) { + setTimeout(() => callback(result), 0); + } + return Promise.resolve(result); + }, + set: (items, callback) => { + Object.assign(this.storage.local.data, items); + if (callback) setTimeout(callback, 0); + return Promise.resolve(); + }, + remove: (keys, callback) => { + if (Array.isArray(keys)) { + keys.forEach(key => delete this.storage.local.data[key]); + } else { + delete this.storage.local.data[keys]; + } + if (callback) setTimeout(callback, 0); + return Promise.resolve(); + } + } + }; + } + + reset() { + this.runtime.lastError = null; + this.storage.local.data = {}; + } +} + +/** + * Mock File System Access API + */ +class FileSystemMock { + constructor() { + this.fileSystem = new Map(); + } + + /** + * Mock file handle + */ + createFileHandle(name, content = '') { + return { + kind: 'file', + name, + _content: content, + + async getFile() { + return { + name, + size: this._content.length, + type: 'application/json', + text: async () => this._content, + arrayBuffer: async () => new TextEncoder().encode(this._content).buffer, + slice: () => new Blob([this._content]) + }; + }, + + async createWritable(options = {}) { + const fileHandle = this; + const writable = { + _buffer: options.keepExistingData ? fileHandle._content : '', + + async write(data) { + if (typeof data === 'string') { + this._buffer = data; + } else if (data instanceof Blob) { + this._buffer = await data.text(); + } + }, + + async close() { + fileHandle._content = this._buffer; + } + }; + + return writable; + } + }; + } + + /** + * Mock directory handle + */ + createDirectoryHandle(name, path = '/') { + const fullPath = `${path}${name}/`; + + const handle = { + kind: 'directory', + name, + _path: fullPath, + _files: new Map(), + _directories: new Map(), + + async getFileHandle(fileName, options = {}) { + if (this._files.has(fileName)) { + return this._files.get(fileName); + } + + if (options.create) { + const fileHandle = this.createFileHandle(fileName); + this._files.set(fileName, fileHandle); + return fileHandle; + } + + throw new Error(`File not found: ${fileName}`); + }, + + async getDirectoryHandle(dirName, options = {}) { + if (this._directories.has(dirName)) { + return this._directories.get(dirName); + } + + if (options.create) { + const dirHandle = this.createDirectoryHandle(dirName, fullPath); + this._directories.set(dirName, dirHandle); + return dirHandle; + } + + throw new Error(`Directory not found: ${dirName}`); + }, + + async queryPermission(options = {}) { + return 'granted'; + }, + + async requestPermission(options = {}) { + return 'granted'; + }, + + async removeEntry(name, options = {}) { + if (this._files.has(name)) { + this._files.delete(name); + return; + } + if (this._directories.has(name)) { + this._directories.delete(name); + return; + } + throw new Error(`Entry not found: ${name}`); + }, + + async *values() { + for (const file of this._files.values()) { + yield file; + } + for (const dir of this._directories.values()) { + yield dir; + } + }, + + [Symbol.asyncIterator]() { + return this.values(); + } + }; + + // Bind factory methods so nested handles work + const self = this; + handle.createFileHandle = (name, content) => self.createFileHandle(name, content); + handle.createDirectoryHandle = (name, path) => self.createDirectoryHandle(name, path || fullPath); + + return handle; + } + + /** + * Mock showDirectoryPicker + */ + async showDirectoryPicker(options = {}) { + // Simulate user selecting a directory + const dirHandle = this.createDirectoryHandle('test-project', '/'); + return dirHandle; + } + + reset() { + this.fileSystem.clear(); + } +} + +/** + * Mock IndexedDB for persistence testing + */ +class IndexedDBMock { + constructor() { + this.databases = new Map(); + } + + open(name, version) { + if (!this.databases.has(name)) { + this.databases.set(name, { stores: new Map() }); + } + const db = this.databases.get(name); + const self = this; + + const dbResult = { + name, + version, + objectStoreNames: { + contains: (storeName) => { + return db.stores.has(storeName); + } + }, + createObjectStore: (storeName, options) => { + const store = { + name: storeName, + data: new Map(), + indexes: new Map(), + createIndex: (indexName, keyPath, opts) => { + store.indexes.set(indexName, { keyPath, options: opts }); + } + }; + db.stores.set(storeName, store); + return store; + }, + transaction: (storeNames, mode) => { + return { + objectStore: (storeName) => { + const store = db.stores.get(storeName); + + const makeRequest = (result) => { + const req = { onsuccess: null, onerror: null, result }; + Promise.resolve().then(() => { + if (req.onsuccess) req.onsuccess({ target: req }); + }); + return req; + }; + + return { + get: (key) => makeRequest(store?.data.get(key) || undefined), + put: (value) => { + if (store) store.data.set(value.id, value); + return makeRequest(value.id); + }, + delete: (key) => { + if (store) store.data.delete(key); + return makeRequest(undefined); + }, + getAll: () => makeRequest(Array.from(store?.data.values() || [])) + }; + } + }; + } + }; + + const request = { + onsuccess: null, + onerror: null, + onupgradeneeded: null, + result: dbResult + }; + + // Fire callbacks asynchronously like real IndexedDB + Promise.resolve().then(() => { + // Fire onupgradeneeded first (for new databases) + if (request.onupgradeneeded) { + request.onupgradeneeded({ target: request, oldVersion: 0, newVersion: version }); + } + // Then fire onsuccess + if (request.onsuccess) { + request.onsuccess({ target: request }); + } + }); + + return request; + } + + deleteDatabase(name) { + this.databases.delete(name); + } + + reset() { + this.databases.clear(); + } +} + +/** + * Setup global mocks + */ +function setupMocks() { + const chromeMock = new ChromeMock(); + const fileSystemMock = new FileSystemMock(); + const indexedDBMock = new IndexedDBMock(); + + // Set up global objects + global.chrome = chromeMock; + global.showDirectoryPicker = fileSystemMock.showDirectoryPicker.bind(fileSystemMock); + global.indexedDB = indexedDBMock; + + // Mock window/document if not available + if (typeof window === 'undefined') { + global.window = { + location: { + href: 'http://localhost:3000/', + origin: 'http://localhost:3000' + }, + localStorage: { + data: {}, + getItem: (key) => global.window.localStorage.data[key] || null, + setItem: (key, value) => { global.window.localStorage.data[key] = value; }, + removeItem: (key) => { delete global.window.localStorage.data[key]; }, + clear: () => { global.window.localStorage.data = {}; } + }, + dispatchEvent: (event) => {}, + addEventListener: (event, handler) => {}, + removeEventListener: (event, handler) => {}, + innerWidth: 1920, + innerHeight: 1080, + devicePixelRatio: 1, + fetch: async (url) => { + // Mock fetch for template loading + return { + ok: true, + status: 200, + text: async () => '# Mock Template Content' + }; + } + }; + } + + if (typeof document === 'undefined') { + global.document = { + createElement: (tag) => ({ + tagName: tag.toUpperCase(), + style: {}, + classList: { + add: () => {}, + remove: () => {}, + contains: () => false + }, + setAttribute: () => {}, + getAttribute: () => null, + appendChild: () => {}, + removeChild: () => {}, + addEventListener: () => {}, + removeEventListener: () => {}, + querySelector: () => null, + querySelectorAll: () => [] + }), + body: { + appendChild: () => {}, + removeChild: () => {}, + classList: { + add: () => {}, + remove: () => {} + } + }, + head: { + appendChild: () => {} + } + }; + } + + return { + chromeMock, + fileSystemMock, + indexedDBMock, + reset: () => { + chromeMock.reset(); + fileSystemMock.reset(); + indexedDBMock.reset(); + if (global.window?.localStorage) { + global.window.localStorage.clear(); + } + } + }; +} + +// Export for Node.js and browser +if (typeof module !== 'undefined' && module.exports) { + module.exports = { + ChromeMock, + FileSystemMock, + IndexedDBMock, + setupMocks + }; +} else { + window.ChromeMock = ChromeMock; + window.FileSystemMock = FileSystemMock; + window.IndexedDBMock = IndexedDBMock; + window.setupMocks = setupMocks; +} diff --git a/chrome-extension/tests/v2/connection.test.js b/chrome-extension/tests/v2/connection.test.js new file mode 100644 index 0000000..dcccc7a --- /dev/null +++ b/chrome-extension/tests/v2/connection.test.js @@ -0,0 +1,394 @@ +/** + * Connection & Project Setup Tests + * Tests for JTBD-01 through JTBD-13 + */ + +const runner = new TestRunner(); +const describe = runner.describe.bind(runner); +const it = runner.it.bind(runner); +const beforeEach = runner.beforeEach.bind(runner); +const afterEach = runner.afterEach.bind(runner); + +// Persistence is created fresh per-test in beforeEach to avoid stale DB references + +describe('JTBD-01: User can connect to a project directory', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should allow user to select a directory', async () => { + const dirHandle = await window.showDirectoryPicker(); + + expect(dirHandle).toBeTruthy(); + expect(dirHandle.kind).toBe('directory'); + expect(dirHandle.name).toBe('test-project'); + }); + + it('should store directory handle reference', async () => { + const dirHandle = await window.showDirectoryPicker(); + window.directoryHandle = dirHandle; + + expect(window.directoryHandle).toBeTruthy(); + expect(window.directoryHandle.name).toBe('test-project'); + }); + + it('should handle user canceling directory picker', async () => { + // Mock user canceling + const originalPicker = window.showDirectoryPicker; + window.showDirectoryPicker = async () => { + throw new DOMException('User cancelled', 'AbortError'); + }; + + try { + await window.showDirectoryPicker(); + throw new Error('Should have thrown'); + } catch (error) { + expect(error.name).toBe('AbortError'); + } finally { + window.showDirectoryPicker = originalPicker; + } + }); +}); + +describe('JTBD-02: System creates .moat/ subdirectory in selected project', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should create .moat directory if it does not exist', async () => { + const projectRoot = await window.showDirectoryPicker(); + const moatDir = await projectRoot.getDirectoryHandle('.moat', { create: true }); + + expect(moatDir).toBeTruthy(); + expect(moatDir.kind).toBe('directory'); + expect(moatDir.name).toBe('.moat'); + }); + + it('should not fail if .moat directory already exists', async () => { + const projectRoot = await window.showDirectoryPicker(); + const moatDir1 = await projectRoot.getDirectoryHandle('.moat', { create: true }); + const moatDir2 = await projectRoot.getDirectoryHandle('.moat', { create: true }); + + expect(moatDir1).toBeTruthy(); + expect(moatDir2).toBeTruthy(); + }); +}); + +describe('JTBD-03: System creates screenshots/ subdirectory proactively', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should create screenshots directory inside .moat', async () => { + const projectRoot = await window.showDirectoryPicker(); + const moatDir = await projectRoot.getDirectoryHandle('.moat', { create: true }); + const screenshotsDir = await moatDir.getDirectoryHandle('screenshots', { create: true }); + + expect(screenshotsDir).toBeTruthy(); + expect(screenshotsDir.kind).toBe('directory'); + expect(screenshotsDir.name).toBe('screenshots'); + }); + + it('should handle existing screenshots directory', async () => { + const projectRoot = await window.showDirectoryPicker(); + const moatDir = await projectRoot.getDirectoryHandle('.moat', { create: true }); + + // Create once + const screenshotsDir1 = await moatDir.getDirectoryHandle('screenshots', { create: true }); + // Create again (should not throw) + const screenshotsDir2 = await moatDir.getDirectoryHandle('screenshots', { create: true }); + + expect(screenshotsDir1).toBeTruthy(); + expect(screenshotsDir2).toBeTruthy(); + }); +}); + +describe('JTBD-04: System deploys workflow templates to project', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should deploy drawbridge-workflow.md template', async () => { + const projectRoot = await window.showDirectoryPicker(); + const moatDir = await projectRoot.getDirectoryHandle('.moat', { create: true }); + + // Simulate template deployment + const templateContent = '# Drawbridge Workflow'; + const fileHandle = await moatDir.getFileHandle('drawbridge-workflow.md', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(templateContent); + await writable.close(); + + // Verify file was written + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toBe(templateContent); + }); + + it('should deploy README.md template', async () => { + const projectRoot = await window.showDirectoryPicker(); + const moatDir = await projectRoot.getDirectoryHandle('.moat', { create: true }); + + const templateContent = '# Moat - Connected Project'; + const fileHandle = await moatDir.getFileHandle('README.md', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(templateContent); + await writable.close(); + + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toBe(templateContent); + }); + + it('should deploy bridge.md to .claude/commands/', async () => { + const projectRoot = await window.showDirectoryPicker(); + const claudeDir = await projectRoot.getDirectoryHandle('.claude', { create: true }); + const commandsDir = await claudeDir.getDirectoryHandle('commands', { create: true }); + + const templateContent = '# Bridge Command'; + const fileHandle = await commandsDir.getFileHandle('bridge.md', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(templateContent); + await writable.close(); + + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toBe(templateContent); + }); +}); + +describe('JTBD-05: System persists connection to IndexedDB', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should store directory handle in IndexedDB', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const projectPath = 'test-project'; + + const success = await persistence.persistProjectConnection(dirHandle, projectPath); + + expect(success).toBe(true); + }); + + it('should include metadata with stored handle', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const projectPath = 'test-project'; + + await persistence.persistProjectConnection(dirHandle, projectPath); + + // Retrieve and verify + const projectId = `project_${window.location.origin}`; + const stored = await persistence.getDirectoryHandle(projectId); + + expect(stored).toBeTruthy(); + expect(stored.path).toBe(projectPath); + expect(stored.origin).toBe(window.location.origin); + }); +}); + +describe('JTBD-06: System restores connection from IndexedDB on page load', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should retrieve stored connection', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + // Store first + const dirHandle = await window.showDirectoryPicker(); + await persistence.persistProjectConnection(dirHandle, 'test-project'); + + // Restore + const restored = await persistence.restoreProjectConnection(); + + expect(restored.success).toBe(true); + expect(restored.path).toBe('test-project'); + expect(restored.moatDirectory).toBeTruthy(); + }); + + it('should return failure when no connection stored', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const restored = await persistence.restoreProjectConnection(); + + expect(restored.success).toBe(false); + expect(restored.reason).toBeTruthy(); + }); +}); + +describe('JTBD-07: System verifies directory handle permissions', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should verify readwrite permission', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const hasPermission = await persistence.verifyPermission(dirHandle, 'readwrite'); + + expect(hasPermission).toBe(true); + }); + + it('should request permission if not granted', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const permission = await persistence.requestPermission(dirHandle, 'readwrite'); + + expect(permission).toBe(true); + }); +}); + +describe('JTBD-13: System loads existing tasks on connection', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should load tasks from moat-tasks-detail.json', async () => { + if (!window.MoatTaskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + // Create sample tasks JSON + const sampleTasks = [ + { + id: 'task-1', + title: 'Test Task', + comment: 'This is a test task', + selector: '.test-button', + status: 'to do', + timestamp: Date.now() + } + ]; + + const fileHandle = await moatDir.getFileHandle('moat-tasks-detail.json', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(JSON.stringify(sampleTasks)); + await writable.close(); + + // Load tasks + const taskStore = new window.MoatTaskStore.TaskStore(); + taskStore.initialize(moatDir); + await taskStore.loadTasksFromFile(); + + const loadedTasks = taskStore.getAllTasks(); + + expect(loadedTasks).toHaveLength(1); + expect(loadedTasks[0].id).toBe('task-1'); + expect(loadedTasks[0].title).toBe('Test Task'); + }); + + it('should handle empty tasks file', async () => { + if (!window.MoatTaskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + // Create empty file + const fileHandle = await moatDir.getFileHandle('moat-tasks-detail.json', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(''); + await writable.close(); + + const taskStore = new window.MoatTaskStore.TaskStore(); + taskStore.initialize(moatDir); + await taskStore.loadTasksFromFile(); + + const loadedTasks = taskStore.getAllTasks(); + + expect(loadedTasks).toHaveLength(0); + }); +}); + +// Export runner for test execution +if (typeof module !== 'undefined' && module.exports) { + module.exports = runner; +} else { + window.connectionTestRunner = runner; +} diff --git a/chrome-extension/tests/v2/filesystem.test.js b/chrome-extension/tests/v2/filesystem.test.js new file mode 100644 index 0000000..7b1343b --- /dev/null +++ b/chrome-extension/tests/v2/filesystem.test.js @@ -0,0 +1,317 @@ +/** + * File System & Persistence Tests + * Tests for JTBD-101 through JTBD-111 + */ + +const runner = new TestRunner(); +const describe = runner.describe.bind(runner); +const it = runner.it.bind(runner); +const beforeEach = runner.beforeEach.bind(runner); +const afterEach = runner.afterEach.bind(runner); + +describe('JTBD-101: System reads JSON file from directory', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should read JSON file content', async () => { + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + // Write test data + const testData = { test: 'data' }; + const fileHandle = await moatDir.getFileHandle('test.json', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(JSON.stringify(testData)); + await writable.close(); + + // Read it back + const file = await fileHandle.getFile(); + const content = await file.text(); + const parsed = JSON.parse(content); + + expect(parsed.test).toBe('data'); + }); + + it('should handle empty JSON file', async () => { + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + const fileHandle = await moatDir.getFileHandle('empty.json', { create: true }); + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toBe(''); + }); +}); + +describe('JTBD-102: System writes JSON file to directory', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should write JSON data to file', async () => { + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + const data = { foo: 'bar', count: 42 }; + const fileHandle = await moatDir.getFileHandle('output.json', { create: true }); + const writable = await fileHandle.createWritable(); + await writable.write(JSON.stringify(data)); + await writable.close(); + + // Verify + const file = await fileHandle.getFile(); + const content = await file.text(); + const parsed = JSON.parse(content); + + expect(parsed.foo).toBe('bar'); + expect(parsed.count).toBe(42); + }); +}); + +describe('JTBD-103: System creates file if it does not exist', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should create file with create:true option', async () => { + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + // File does not exist yet + const fileHandle = await moatDir.getFileHandle('new-file.json', { create: true }); + + expect(fileHandle).toBeTruthy(); + expect(fileHandle.kind).toBe('file'); + expect(fileHandle.name).toBe('new-file.json'); + }); + + it('should throw error if file doesn\'t exist and create:false', async () => { + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + try { + await moatDir.getFileHandle('non-existent.json', { create: false }); + throw new Error('Should have thrown'); + } catch (error) { + expect(error.message).toContain('not found'); + } + }); +}); + +describe('JTBD-104: System truncates file before writing', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should overwrite existing content with keepExistingData:false', async () => { + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + + const fileHandle = await moatDir.getFileHandle('overwrite.json', { create: true }); + + // Write initial content + let writable = await fileHandle.createWritable(); + await writable.write('old content that should be overwritten'); + await writable.close(); + + // Overwrite with truncation + writable = await fileHandle.createWritable({ keepExistingData: false }); + await writable.write('new content'); + await writable.close(); + + // Verify + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toBe('new content'); + expect(content).not.toContain('old content'); + }); +}); + +describe('JTBD-106: System stores directory handle in IndexedDB', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should store directory handle with metadata', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const projectId = 'test-project-123'; + const metadata = { + path: 'test-project', + origin: 'http://localhost:3000', + connectedAt: new Date().toISOString() + }; + + const success = await persistence.storeDirectoryHandle(projectId, dirHandle, metadata); + + expect(success).toBe(true); + }); +}); + +describe('JTBD-107: System retrieves directory handle from IndexedDB', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should retrieve stored directory handle', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const projectId = 'test-project-123'; + + // Store first + await persistence.storeDirectoryHandle(projectId, dirHandle, { path: 'test' }); + + // Retrieve + const retrieved = await persistence.getDirectoryHandle(projectId); + + expect(retrieved).toBeTruthy(); + expect(retrieved.handle).toBeTruthy(); + expect(retrieved.path).toBe('test'); + }); + + it('should return null for non-existent handle', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const retrieved = await persistence.getDirectoryHandle('non-existent-id'); + + expect(retrieved).toBeNull(); + }); +}); + +describe('JTBD-108: System verifies stored handle is still valid', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should test directory access', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const isValid = await persistence.testDirectoryAccess(dirHandle); + + expect(isValid).toBe(true); + }); + + it('should return false for invalid handle', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const isValid = await persistence.testDirectoryAccess(null); + + expect(isValid).toBe(false); + }); +}); + +describe('JTBD-110: System removes invalid handles from storage', () => { + let mocks; + let persistence; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatPersistence) { + persistence = new window.MoatPersistence(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should remove directory handle from storage', async () => { + if (!persistence) { + throw new Error('Persistence module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const projectId = 'test-project-to-remove'; + + // Store first + await persistence.storeDirectoryHandle(projectId, dirHandle, {}); + + // Verify it's there + let retrieved = await persistence.getDirectoryHandle(projectId); + expect(retrieved).toBeTruthy(); + + // Remove it + await persistence.removeDirectoryHandle(projectId); + + // Verify it's gone + retrieved = await persistence.getDirectoryHandle(projectId); + expect(retrieved).toBeNull(); + }); +}); + +// Export runner for test execution +if (typeof module !== 'undefined' && module.exports) { + module.exports = runner; +} else { + window.filesystemTestRunner = runner; +} diff --git a/chrome-extension/tests/v2/manual-test.js b/chrome-extension/tests/v2/manual-test.js new file mode 100644 index 0000000..76fd0c7 --- /dev/null +++ b/chrome-extension/tests/v2/manual-test.js @@ -0,0 +1,652 @@ +/** + * Drawbridge V2 Manual Test via Puppeteer + * + * Tests the extension loaded in Chromium with the demo site. + * Some features (Side Panel, File System Access) can't be fully automated + * but we can verify extension loading, content script injection, and UI behavior. + */ + +const puppeteer = require('puppeteer-core'); +const path = require('path'); +const http = require('http'); +const fs = require('fs'); + +const EXTENSION_PATH = path.resolve(__dirname, '../../'); +const DEMO_PATH = path.resolve(__dirname, '../../../demo'); +const RESULTS = []; + +function log(status, test, detail = '') { + const icon = status === 'PASS' ? 'β ' : status === 'FAIL' ? 'β' : 'β οΈ'; + console.log(`${icon} ${test}${detail ? ` β ${detail}` : ''}`); + RESULTS.push({ status, test, detail }); +} + +// Simple static file server for demo site +function startDemoServer() { + return new Promise((resolve) => { + const server = http.createServer((req, res) => { + let filePath = path.join(DEMO_PATH, req.url === '/' ? 'index.html' : req.url); + const ext = path.extname(filePath); + const mimeTypes = { + '.html': 'text/html', + '.css': 'text/css', + '.js': 'application/javascript', + '.png': 'image/png', + '.svg': 'image/svg+xml' + }; + + fs.readFile(filePath, (err, data) => { + if (err) { + res.writeHead(404); + res.end('Not found'); + return; + } + res.writeHead(200, { 'Content-Type': mimeTypes[ext] || 'text/plain' }); + res.end(data); + }); + }); + + server.listen(3456, () => { + console.log('π Demo server running on http://localhost:3456\n'); + resolve(server); + }); + }); +} + +async function run() { + console.log('π Drawbridge V2 Manual Test Suite'); + console.log('='.repeat(60)); + console.log(`Extension: ${EXTENSION_PATH}`); + console.log(`Demo site: ${DEMO_PATH}\n`); + + const server = await startDemoServer(); + + let browser; + try { + // Launch Chromium with extension loaded + browser = await puppeteer.launch({ + executablePath: '/usr/bin/chromium', + headless: false, // Extensions require non-headless... but we're in a sandbox + args: [ + '--headless=new', // "new" headless mode supports extensions + `--disable-extensions-except=${EXTENSION_PATH}`, + `--load-extension=${EXTENSION_PATH}`, + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-gpu', + '--disable-dev-shm-usage', + '--window-size=1280,800' + ] + }); + + // === TEST 1: Extension loads successfully === + try { + const pages = await browser.pages(); + log('PASS', 'T01: Browser launched with extension'); + } catch (e) { + log('FAIL', 'T01: Browser launched with extension', e.message); + return; + } + + // === TEST 2: Get extension ID === + let extensionId; + try { + // Navigate to a real page first to trigger extension activation + const setupPage = await browser.newPage(); + await setupPage.goto('http://localhost:3456', { waitUntil: 'networkidle2', timeout: 10000 }); + + // Wait for service worker to spin up (can be slow in headless) + for (let attempt = 0; attempt < 10; attempt++) { + await new Promise(r => setTimeout(r, 500)); + const targets = browser.targets(); + const extTarget = targets.find(t => + t.type() === 'service_worker' && t.url().includes('chrome-extension://') + ); + if (extTarget) { + extensionId = extTarget.url().split('/')[2]; + break; + } + // Also check other target types + const bgTarget = targets.find(t => + t.url().includes('chrome-extension://') && t.url().includes('background') + ); + if (bgTarget) { + extensionId = bgTarget.url().split('/')[2]; + break; + } + } + + if (extensionId) { + log('PASS', 'T02: Extension ID found', extensionId); + } else { + // Last resort: check manifest for known extension ID patterns + const targets = browser.targets(); + const anyExt = targets.find(t => t.url().includes('chrome-extension://')); + if (anyExt) { + extensionId = anyExt.url().split('/')[2]; + log('PASS', 'T02: Extension ID found (fallback)', extensionId); + } else { + log('WARN', 'T02: Extension ID not found', `Targets: ${targets.map(t => t.type()).join(', ')}`); + } + } + await setupPage.close(); + } catch (e) { + log('FAIL', 'T02: Extension ID found', e.message); + } + + // === TEST 3: Content script responds to ping via background relay === + // In V2, content scripts run in Chrome's isolated world and don't inject + // visible DOM markers (Google Fonts injection was V1). The correct way to + // verify is to ping the content script through the background service worker, + // which is how the side panel communicates in production. + const page = await browser.newPage(); + try { + await page.goto('http://localhost:3456', { waitUntil: 'networkidle2', timeout: 15000 }); + + // Give content script time to initialize + await new Promise(r => setTimeout(r, 2000)); + + // Use the background script to relay a ping to the content script + // We access the service worker and ask it to sendMessage to the tab + const swTarget = browser.targets().find(t => + t.type() === 'service_worker' && t.url().includes('background.js') + ); + + if (swTarget) { + const swWorker = await swTarget.worker(); + const tabId = await page.evaluate(() => { + // This won't work from main world, so we'll use another approach + return null; + }); + + // Alternative: use chrome.tabs.sendMessage from side panel context + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + await new Promise(r => setTimeout(r, 1000)); + + // The side panel's connectWithRetry pings the content script + const contentScriptReady = await spPage.evaluate(async () => { + // Use the side panel's own ping logic + try { + const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); + if (!tab?.id) return { ready: false, reason: 'no active tab' }; + + return new Promise((resolve) => { + chrome.tabs.sendMessage(tab.id, { action: 'ping' }, (response) => { + if (chrome.runtime.lastError) { + resolve({ ready: false, reason: chrome.runtime.lastError.message }); + } else { + resolve({ ready: response?.ready === true, response }); + } + }); + }); + } catch (e) { + return { ready: false, reason: e.message }; + } + }); + + if (contentScriptReady.ready) { + log('PASS', 'T03: Content script responds to ping', JSON.stringify(contentScriptReady)); + } else { + log('WARN', 'T03: Content script ping failed', JSON.stringify(contentScriptReady)); + } + await spPage.close(); + } else { + log('WARN', 'T03: Skipped β extension ID not available'); + } + } else { + log('WARN', 'T03: Skipped β service worker not found'); + } + } catch (e) { + log('FAIL', 'T03: Content script ping', e.message); + } + + // === TEST 4: Content script handles GET_CONNECTION_STATUS === + // Verify the content script handles V2 message types correctly + try { + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + await new Promise(r => setTimeout(r, 1000)); + + const statusResult = await spPage.evaluate(async () => { + try { + const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); + if (!tab?.id) return { success: false, reason: 'no active tab' }; + + return new Promise((resolve) => { + chrome.tabs.sendMessage(tab.id, { type: 'GET_CONNECTION_STATUS' }, (response) => { + if (chrome.runtime.lastError) { + resolve({ success: false, reason: chrome.runtime.lastError.message }); + } else { + resolve({ success: true, response }); + } + }); + }); + } catch (e) { + return { success: false, reason: e.message }; + } + }); + + if (statusResult.success && statusResult.response) { + log('PASS', 'T04: Content script handles GET_CONNECTION_STATUS', + `connected: ${statusResult.response.connected}, path: "${statusResult.response.path}"`); + } else { + log('WARN', 'T04: GET_CONNECTION_STATUS failed', JSON.stringify(statusResult)); + } + await spPage.close(); + } else { + log('WARN', 'T04: Skipped β extension ID not available'); + } + } catch (e) { + log('FAIL', 'T04: GET_CONNECTION_STATUS', e.message); + } + + // === TEST 5: Content CSS injected (not moat.css) === + // NOTE: Extension-injected CSS (via manifest content_scripts.css) creates + // anonymous stylesheets with no href. Check for known CSS rules instead. + try { + const cssCheck = await page.evaluate(() => { + const sheets = Array.from(document.styleSheets); + const hasMoatCss = sheets.some(s => s.href && s.href.includes('moat.css')); + + // content.css defines rules for .float-comment-mode, .float-highlight, etc. + // Extension-injected CSS has no href, so scan rules in anonymous sheets. + let hasContentCssRules = false; + for (const sheet of sheets) { + try { + if (sheet.href) continue; // Skip linked sheets β we want injected ones + const rules = Array.from(sheet.cssRules || []); + const hasFloatRule = rules.some(r => + r.selectorText && ( + r.selectorText.includes('.float-comment-mode') || + r.selectorText.includes('.float-highlight') || + r.selectorText.includes('.float-drawing-canvas') + ) + ); + if (hasFloatRule) { + hasContentCssRules = true; + break; + } + } catch (e) { + // Cross-origin stylesheet β skip + } + } + + return { hasContentCssRules, hasMoatCss, sheetCount: sheets.length }; + }); + + if (cssCheck.hasContentCssRules && !cssCheck.hasMoatCss) { + log('PASS', 'T05: V2 content.css rules injected, moat.css removed'); + } else if (!cssCheck.hasMoatCss && !cssCheck.hasContentCssRules) { + log('WARN', 'T05: No moat.css (V1 removed) but content.css rules not detected', JSON.stringify(cssCheck)); + } else if (cssCheck.hasMoatCss) { + log('FAIL', 'T05: V1 moat.css still present', JSON.stringify(cssCheck)); + } else { + log('PASS', 'T05: V2 content.css rules injected', JSON.stringify(cssCheck)); + } + } catch (e) { + log('FAIL', 'T05: CSS injection check', e.message); + } + + // === TEST 6: No moat.js sidebar injected (V1 removed) === + try { + const noMoat = await page.evaluate(() => { + const moatSidebar = document.getElementById('moat-sidebar') || + document.querySelector('.moat-sidebar') || + document.querySelector('[data-moat]'); + return !moatSidebar; + }); + + if (noMoat) { + log('PASS', 'T06: No V1 moat sidebar injected into page'); + } else { + log('FAIL', 'T06: V1 moat sidebar still present in page'); + } + } catch (e) { + log('FAIL', 'T06: No V1 moat sidebar check', e.message); + } + + // === TEST 7: Manifest has correct V2 configuration === + try { + const manifestPath = path.join(EXTENSION_PATH, 'manifest.json'); + const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8')); + + const checks = { + version: manifest.version === '2.0.0', + sidePanel: manifest.permissions?.includes('sidePanel'), + hasSidePanelConfig: !!manifest.side_panel?.default_path, + noMoatJs: !manifest.content_scripts?.[0]?.js?.includes('moat.js'), + noMoatCss: !manifest.content_scripts?.[0]?.css?.includes('moat.css'), + hasContentCss: manifest.content_scripts?.[0]?.css?.includes('content.css') + }; + + const allPass = Object.values(checks).every(v => v); + if (allPass) { + log('PASS', 'T07: Manifest V2 configuration correct', JSON.stringify(checks)); + } else { + log('FAIL', 'T07: Manifest V2 configuration', JSON.stringify(checks)); + } + } catch (e) { + log('FAIL', 'T07: Manifest V2 configuration', e.message); + } + + // === TEST 8: Side Panel HTML exists and is well-formed === + try { + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + + const spCheck = await spPage.evaluate(() => { + return { + title: document.title, + hasApp: !!document.getElementById('drawbridge-app'), + hasTaskContainer: !!document.getElementById('task-container'), + hasTabs: document.querySelectorAll('.tab').length, + hasConnectBtn: !!document.getElementById('connect-btn'), + hasToolsBtn: !!document.getElementById('tools-btn'), + hasSettingsBtn: !!document.getElementById('settings-btn'), + hasToolsMenu: !!document.getElementById('tools-menu'), + hasProjectMenu: !!document.getElementById('project-menu') + }; + }); + + const allPresent = spCheck.hasApp && spCheck.hasTaskContainer && + spCheck.hasTabs === 3 && spCheck.hasConnectBtn && + spCheck.hasToolsBtn && spCheck.hasSettingsBtn; + + if (allPresent) { + log('PASS', 'T08: Side Panel HTML structure correct', JSON.stringify(spCheck)); + } else { + log('FAIL', 'T08: Side Panel HTML structure', JSON.stringify(spCheck)); + } + await spPage.close(); + } else { + log('WARN', 'T08: Skipped β extension ID not available'); + } + } catch (e) { + log('FAIL', 'T08: Side Panel HTML', e.message); + } + + // === TEST 9: Side Panel JS initializes === + try { + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + + // Wait for JS to initialize + await new Promise(r => setTimeout(r, 1000)); + + const jsCheck = await spPage.evaluate(() => { + return { + // Check if event listeners are set up by looking for UI state + connectionBanner: document.getElementById('connection-banner')?.className || '', + tabsExist: document.querySelectorAll('.tab').length, + activeTab: document.querySelector('.tab.active')?.dataset?.status || '', + emptyState: !!document.querySelector('.empty-state'), + badgesExist: !!document.getElementById('todo-badge') + }; + }); + + const initialized = jsCheck.tabsExist === 3 && + jsCheck.activeTab === 'to do' && + jsCheck.emptyState; + + if (initialized) { + log('PASS', 'T09: Side Panel JS initialized', `Active tab: "${jsCheck.activeTab}", disconnected state shown`); + } else { + log('FAIL', 'T09: Side Panel JS initialization', JSON.stringify(jsCheck)); + } + await spPage.close(); + } else { + log('WARN', 'T09: Skipped β extension ID not available'); + } + } catch (e) { + log('FAIL', 'T09: Side Panel JS initialization', e.message); + } + + // === TEST 10: Side Panel theme toggle === + try { + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + await new Promise(r => setTimeout(r, 500)); + + const themeBefore = await spPage.evaluate(() => { + return document.documentElement.getAttribute('data-theme'); + }); + + await spPage.click('#settings-btn'); + await new Promise(r => setTimeout(r, 300)); + + const themeAfter = await spPage.evaluate(() => { + return document.documentElement.getAttribute('data-theme'); + }); + + if (themeBefore !== themeAfter) { + log('PASS', 'T10: Theme toggle works', `${themeBefore} β ${themeAfter}`); + } else { + log('FAIL', 'T10: Theme toggle', `Theme didn't change: ${themeBefore}`); + } + await spPage.close(); + } else { + log('WARN', 'T10: Skipped β extension ID not available'); + } + } catch (e) { + log('FAIL', 'T10: Theme toggle', e.message); + } + + // === TEST 11: Side Panel tab switching === + try { + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + await new Promise(r => setTimeout(r, 500)); + + // Click "Doing" tab + await spPage.click('.tab[data-status="doing"]'); + await new Promise(r => setTimeout(r, 200)); + + const doingActive = await spPage.evaluate(() => { + return document.querySelector('.tab.active')?.dataset?.status; + }); + + // Click "Done" tab + await spPage.click('.tab[data-status="done"]'); + await new Promise(r => setTimeout(r, 200)); + + const doneActive = await spPage.evaluate(() => { + return document.querySelector('.tab.active')?.dataset?.status; + }); + + if (doingActive === 'doing' && doneActive === 'done') { + log('PASS', 'T11: Tab switching works', 'to do β doing β done'); + } else { + log('FAIL', 'T11: Tab switching', `doing=${doingActive}, done=${doneActive}`); + } + await spPage.close(); + } else { + log('WARN', 'T11: Skipped β extension ID not available'); + } + } catch (e) { + log('FAIL', 'T11: Tab switching', e.message); + } + + // === TEST 12: Side Panel tools menu === + try { + if (extensionId) { + const spPage = await browser.newPage(); + await spPage.goto(`chrome-extension://${extensionId}/sidepanel/sidepanel.html`, { + waitUntil: 'networkidle2', timeout: 10000 + }); + await new Promise(r => setTimeout(r, 500)); + + // Tools menu should be hidden initially + const hiddenBefore = await spPage.evaluate(() => { + return document.getElementById('tools-menu')?.classList.contains('hidden'); + }); + + // Click tools button + await spPage.click('#tools-btn'); + await new Promise(r => setTimeout(r, 200)); + + const hiddenAfter = await spPage.evaluate(() => { + return document.getElementById('tools-menu')?.classList.contains('hidden'); + }); + + // Check menu items + const menuItems = await spPage.evaluate(() => { + return Array.from(document.querySelectorAll('#tools-menu .menu-item')) + .map(item => item.dataset.action); + }); + + if (hiddenBefore && !hiddenAfter && menuItems.includes('comment') && menuItems.includes('rectangle')) { + log('PASS', 'T12: Tools menu opens with Comment + Rectangle', menuItems.join(', ')); + } else { + log('FAIL', 'T12: Tools menu', `hidden: ${hiddenBefore}β${hiddenAfter}, items: ${menuItems}`); + } + await spPage.close(); + } else { + log('WARN', 'T12: Skipped β extension ID not available'); + } + } catch (e) { + log('FAIL', 'T12: Tools menu', e.message); + } + + // === TEST 13: Demo site renders correctly === + try { + const demoCheck = await page.evaluate(() => { + return { + title: document.title, + hasHero: !!document.querySelector('h1'), + hasNav: !!document.querySelector('nav'), + bodyText: document.body?.innerText?.length || 0 + }; + }); + + if (demoCheck.bodyText > 100) { + log('PASS', 'T13: Demo site renders correctly', `Title: ${demoCheck.title}, Body: ${demoCheck.bodyText} chars`); + } else { + log('FAIL', 'T13: Demo site rendering', JSON.stringify(demoCheck)); + } + } catch (e) { + log('FAIL', 'T13: Demo site rendering', e.message); + } + + // === TEST 14: Background service worker active === + try { + const targets = browser.targets(); + const swTarget = targets.find(t => + t.type() === 'service_worker' && t.url().includes('background.js') + ); + + if (swTarget) { + log('PASS', 'T14: Background service worker active', swTarget.url()); + } else { + // Check all targets + const allTargets = targets.map(t => `${t.type()}: ${t.url()}`); + log('WARN', 'T14: Background service worker', `Not found. Targets: ${allTargets.join(', ')}`); + } + } catch (e) { + log('FAIL', 'T14: Background service worker', e.message); + } + + // === TEST 15: No console errors on demo page === + try { + const newPage = await browser.newPage(); + const consoleErrors = []; + newPage.on('console', msg => { + if (msg.type() === 'error') { + consoleErrors.push(msg.text()); + } + }); + + await newPage.goto('http://localhost:3456', { waitUntil: 'networkidle2', timeout: 10000 }); + await new Promise(r => setTimeout(r, 2000)); // Wait for content script + + // Filter out expected/benign errors + const realErrors = consoleErrors.filter(e => + !e.includes('favicon') && + !e.includes('net::ERR') && + !e.includes('Failed to load resource') + ); + + if (realErrors.length === 0) { + log('PASS', 'T15: No console errors on demo page'); + } else { + log('FAIL', 'T15: Console errors detected', realErrors.join(' | ')); + } + await newPage.close(); + } catch (e) { + log('FAIL', 'T15: Console error check', e.message); + } + + } catch (e) { + console.error('π₯ Fatal error:', e.message); + console.error(e.stack); + } finally { + if (browser) await browser.close(); + server.close(); + + // Print summary + console.log('\n' + '='.repeat(60)); + console.log('π MANUAL TEST RESULTS'); + console.log('='.repeat(60)); + + const passed = RESULTS.filter(r => r.status === 'PASS').length; + const failed = RESULTS.filter(r => r.status === 'FAIL').length; + const warned = RESULTS.filter(r => r.status === 'WARN').length; + + console.log(`β Passed: ${passed}`); + console.log(`β Failed: ${failed}`); + console.log(`β οΈ Warned: ${warned}`); + console.log(`π Pass Rate: ${RESULTS.length > 0 ? ((passed / RESULTS.length) * 100).toFixed(1) : 0}%`); + + if (failed > 0) { + console.log('\nβ Failures:'); + RESULTS.filter(r => r.status === 'FAIL').forEach(r => { + console.log(` β’ ${r.test}: ${r.detail}`); + }); + } + + console.log('='.repeat(60)); + + // Save results to file + const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19); + const commit = require('child_process').execSync('git rev-parse --short HEAD', { cwd: path.resolve(__dirname, '../../../') }).toString().trim(); + const resultsDir = path.resolve(__dirname, 'results'); + const resultsFile = path.join(resultsDir, `manual-${timestamp}-${commit}.md`); + + let md = `# Manual Test Results\n\n`; + md += `- **Date:** ${new Date().toISOString()}\n`; + md += `- **Commit:** ${commit}\n`; + md += `- **Branch:** v2\n`; + md += `- **Passed:** ${passed} | **Failed:** ${failed} | **Warned:** ${warned}\n`; + md += `- **Pass Rate:** ${RESULTS.length > 0 ? ((passed / RESULTS.length) * 100).toFixed(1) : 0}%\n\n`; + md += `## Results\n\n`; + md += `| Status | Test | Detail |\n`; + md += `|--------|------|--------|\n`; + RESULTS.forEach(r => { + const icon = r.status === 'PASS' ? 'β ' : r.status === 'FAIL' ? 'β' : 'β οΈ'; + md += `| ${icon} ${r.status} | ${r.test} | ${r.detail || 'β'} |\n`; + }); + + fs.writeFileSync(resultsFile, md); + console.log(`\nπ Results saved: ${resultsFile}`); + } +} + +run(); diff --git a/chrome-extension/tests/v2/markdown.test.js b/chrome-extension/tests/v2/markdown.test.js new file mode 100644 index 0000000..04255dd --- /dev/null +++ b/chrome-extension/tests/v2/markdown.test.js @@ -0,0 +1,317 @@ +/** + * Markdown File Generation Tests + * Tests for JTBD-57 through JTBD-66 + */ + +const runner = new TestRunner(); +const describe = runner.describe.bind(runner); +const it = runner.it.bind(runner); +const beforeEach = runner.beforeEach.bind(runner); +const afterEach = runner.afterEach.bind(runner); + +describe('JTBD-57: System generates markdown from task array', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should generate valid markdown structure', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const tasks = [ + { + id: 'task-1', + title: 'Test Task', + comment: 'This is a test task comment', + selector: '.test-button', + status: 'to do', + timestamp: Date.now() + } + ]; + + const markdown = window.MoatMarkdownGenerator.generateMarkdownFromTasks(tasks); + + expect(markdown).toContain('# Moat Tasks'); + expect(markdown).toContain('**Total**: 1'); + expect(markdown).toContain('Test Task'); + }); + + it('should handle empty task array', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const markdown = window.MoatMarkdownGenerator.generateMarkdownFromTasks([]); + + expect(markdown).toContain('# Moat Tasks'); + expect(markdown).toContain('**Total**: 0'); + expect(markdown).toContain('press "F" to begin making annotations'); + }); +}); + +describe('JTBD-60: System displays task summary statistics', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should calculate and display task statistics', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const tasks = [ + { id: '1', title: 'Task 1', comment: 'Test 1', selector: '.test1', status: 'to do', timestamp: 1 }, + { id: '2', title: 'Task 2', comment: 'Test 2', selector: '.test2', status: 'doing', timestamp: 2 }, + { id: '3', title: 'Task 3', comment: 'Test 3', selector: '.test3', status: 'done', timestamp: 3 } + ]; + + const markdown = window.MoatMarkdownGenerator.generateMarkdownFromTasks(tasks); + + expect(markdown).toContain('**Total**: 3'); + expect(markdown).toContain('**To Do**: 1'); + expect(markdown).toContain('**Doing**: 1'); + expect(markdown).toContain('**Done**: 1'); + }); +}); + +describe('JTBD-61: System converts status to checkbox format', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should convert statuses to correct checkbox format', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + expect(window.MoatMarkdownGenerator.statusToCheckbox('to do')).toBe('[ ]'); + expect(window.MoatMarkdownGenerator.statusToCheckbox('doing')).toBe('[~]'); + expect(window.MoatMarkdownGenerator.statusToCheckbox('done')).toBe('[x]'); + }); +}); + +describe('JTBD-62: System truncates long comments in markdown', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should truncate comments longer than 60 characters', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const longComment = 'This is a very long comment that should definitely be truncated because it exceeds the maximum length'; + const truncated = window.MoatMarkdownGenerator.truncateComment(longComment, 60); + + expect(truncated.length).toBeLessThanOrEqual(60); + expect(truncated).toContain('...'); + }); + + it('should not truncate short comments', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const shortComment = 'Short comment'; + const result = window.MoatMarkdownGenerator.truncateComment(shortComment, 60); + + expect(result).toBe('Short comment'); + expect(result).not.toContain('...'); + }); +}); + +describe('JTBD-63: System numbers tasks sequentially', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should number tasks starting from 1', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const tasks = [ + { id: '1', title: 'Task 1', comment: 'Test 1', selector: '.test1', status: 'to do', timestamp: 1 }, + { id: '2', title: 'Task 2', comment: 'Test 2', selector: '.test2', status: 'to do', timestamp: 2 }, + { id: '3', title: 'Task 3', comment: 'Test 3', selector: '.test3', status: 'to do', timestamp: 3 } + ]; + + const markdown = window.MoatMarkdownGenerator.generateMarkdownFromTasks(tasks); + + expect(markdown).toContain('1. [ ] Task 1'); + expect(markdown).toContain('2. [ ] Task 2'); + expect(markdown).toContain('3. [ ] Task 3'); + }); +}); + +describe('JTBD-64: System includes timestamp in markdown footer', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should include generation timestamp', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const tasks = []; + const markdown = window.MoatMarkdownGenerator.generateMarkdownFromTasks(tasks); + + expect(markdown).toContain('_Generated:'); + expect(markdown).toContain('_Source: moat-tasks-detail.json_'); + }); +}); + +describe('JTBD-66: System sorts tasks chronologically in markdown', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should sort tasks by timestamp (oldest first)', () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const tasks = [ + { id: '3', title: 'Task 3', comment: 'Third', selector: '.test3', status: 'to do', timestamp: 3000 }, + { id: '1', title: 'Task 1', comment: 'First', selector: '.test1', status: 'to do', timestamp: 1000 }, + { id: '2', title: 'Task 2', comment: 'Second', selector: '.test2', status: 'to do', timestamp: 2000 } + ]; + + const markdown = window.MoatMarkdownGenerator.generateMarkdownFromTasks(tasks); + + // Verify order in markdown + const task1Index = markdown.indexOf('Task 1'); + const task2Index = markdown.indexOf('Task 2'); + const task3Index = markdown.indexOf('Task 3'); + + expect(task1Index).toBeLessThan(task2Index); + expect(task2Index).toBeLessThan(task3Index); + }); +}); + +describe('JTBD-58: System writes markdown to file', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should write markdown content to file', async () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + window.directoryHandle = moatDir; + + const markdownContent = '# Test Markdown\n\nTest content'; + await window.MoatMarkdownGenerator.writeMarkdownToFile(markdownContent); + + // Verify file was written + const fileHandle = await moatDir.getFileHandle('moat-tasks.md'); + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toBe(markdownContent); + }); +}); + +describe('JTBD-59: System rebuilds markdown file completely', () => { + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should rebuild markdown file from task array', async () => { + if (!window.MoatMarkdownGenerator) { + throw new Error('MarkdownGenerator module not loaded β check run-all.js module setup'); + } + + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + window.directoryHandle = moatDir; + + const tasks = [ + { + id: 'task-1', + title: 'Test Task', + comment: 'Test comment', + selector: '.test', + status: 'to do', + timestamp: Date.now() + } + ]; + + await window.MoatMarkdownGenerator.rebuildMarkdownFile(tasks); + + // Verify file content + const fileHandle = await moatDir.getFileHandle('moat-tasks.md'); + const file = await fileHandle.getFile(); + const content = await file.text(); + + expect(content).toContain('# Moat Tasks'); + expect(content).toContain('Test Task'); + expect(content).toContain('**Total**: 1'); + }); +}); + +// Export runner for test execution +if (typeof module !== 'undefined' && module.exports) { + module.exports = runner; +} else { + window.markdownTestRunner = runner; +} diff --git a/chrome-extension/tests/v2/results/manual-2026-02-12T20-47-10-fd7dbe5.md b/chrome-extension/tests/v2/results/manual-2026-02-12T20-47-10-fd7dbe5.md new file mode 100644 index 0000000..26e883f --- /dev/null +++ b/chrome-extension/tests/v2/results/manual-2026-02-12T20-47-10-fd7dbe5.md @@ -0,0 +1,27 @@ +# Manual Test Results + +- **Date:** 2026-02-12T20:47:10.881Z +- **Commit:** fd7dbe5 +- **Branch:** v2 +- **Passed:** 13 | **Failed:** 1 | **Warned:** 1 +- **Pass Rate:** 86.7% + +## Results + +| Status | Test | Detail | +|--------|------|--------| +| β PASS | T01: Browser launched with extension | β | +| β PASS | T02: Extension ID found | memplnhgfnplgadhfoljnchlnpjdeoip | +| β οΈ WARN | T03: Content script partially loaded | {"safeStorage":false,"taskStore":false,"markdownGen":false,"persistence":false} | +| β FAIL | T04: Chrome runtime available in content script | β | +| β PASS | T05: moat.css not injected (V1 removed) | {"hasContentCss":false,"hasMoatCss":false,"sheetCount":2} | +| β PASS | T06: No V1 moat sidebar injected into page | β | +| β PASS | T07: Manifest V2 configuration correct | {"version":true,"sidePanel":true,"hasSidePanelConfig":true,"noMoatJs":true,"noMoatCss":true,"hasContentCss":true} | +| β PASS | T08: Side Panel HTML structure correct | {"title":"Drawbridge","hasApp":true,"hasTaskContainer":true,"hasTabs":3,"hasConnectBtn":true,"hasToolsBtn":true,"hasSettingsBtn":true,"hasToolsMenu":true,"hasProjectMenu":true} | +| β PASS | T09: Side Panel JS initialized | Active tab: "to do", disconnected state shown | +| β PASS | T10: Theme toggle works | light β dark | +| β PASS | T11: Tab switching works | to do β doing β done | +| β PASS | T12: Tools menu opens with Comment + Rectangle | comment, rectangle | +| β PASS | T13: Demo site renders correctly | Title: Moss&Mint Studio β Design & Web Agency, Body: 1421 chars | +| β PASS | T14: Background service worker active | chrome-extension://memplnhgfnplgadhfoljnchlnpjdeoip/background.js | +| β PASS | T15: No console errors on demo page | β | diff --git a/chrome-extension/tests/v2/results/manual-2026-02-12T22-23-33-ae923f0.md b/chrome-extension/tests/v2/results/manual-2026-02-12T22-23-33-ae923f0.md new file mode 100644 index 0000000..f7db9e7 --- /dev/null +++ b/chrome-extension/tests/v2/results/manual-2026-02-12T22-23-33-ae923f0.md @@ -0,0 +1,27 @@ +# Manual Test Results + +- **Date:** 2026-02-12T22:23:33.286Z +- **Commit:** ae923f0 +- **Branch:** v2 +- **Passed:** 12 | **Failed:** 2 | **Warned:** 1 +- **Pass Rate:** 80.0% + +## Results + +| Status | Test | Detail | +|--------|------|--------| +| β PASS | T01: Browser launched with extension | β | +| β PASS | T02: Extension ID found | memplnhgfnplgadhfoljnchlnpjdeoip | +| β FAIL | T03: Content script not detected | {"googleFonts":false,"preconnect1":false,"preconnect2":false} | +| β FAIL | T04: Content script DOM modifications not detected | {"googleFonts":false,"injectedStylesheets":0} | +| β οΈ WARN | T05: No moat.css (V1 removed) but content.css rules not detected | {"hasContentCssRules":false,"hasMoatCss":false,"sheetCount":2} | +| β PASS | T06: No V1 moat sidebar injected into page | β | +| β PASS | T07: Manifest V2 configuration correct | {"version":true,"sidePanel":true,"hasSidePanelConfig":true,"noMoatJs":true,"noMoatCss":true,"hasContentCss":true} | +| β PASS | T08: Side Panel HTML structure correct | {"title":"Drawbridge","hasApp":true,"hasTaskContainer":true,"hasTabs":3,"hasConnectBtn":true,"hasToolsBtn":true,"hasSettingsBtn":true,"hasToolsMenu":true,"hasProjectMenu":true} | +| β PASS | T09: Side Panel JS initialized | Active tab: "to do", disconnected state shown | +| β PASS | T10: Theme toggle works | light β dark | +| β PASS | T11: Tab switching works | to do β doing β done | +| β PASS | T12: Tools menu opens with Comment + Rectangle | comment, rectangle | +| β PASS | T13: Demo site renders correctly | Title: Moss&Mint Studio β Design & Web Agency, Body: 1421 chars | +| β PASS | T14: Background service worker active | chrome-extension://memplnhgfnplgadhfoljnchlnpjdeoip/background.js | +| β PASS | T15: No console errors on demo page | β | diff --git a/chrome-extension/tests/v2/results/manual-2026-02-12T22-24-53-ae923f0.md b/chrome-extension/tests/v2/results/manual-2026-02-12T22-24-53-ae923f0.md new file mode 100644 index 0000000..bd15843 --- /dev/null +++ b/chrome-extension/tests/v2/results/manual-2026-02-12T22-24-53-ae923f0.md @@ -0,0 +1,27 @@ +# Manual Test Results + +- **Date:** 2026-02-12T22:24:53.139Z +- **Commit:** ae923f0 +- **Branch:** v2 +- **Passed:** 12 | **Failed:** 0 | **Warned:** 3 +- **Pass Rate:** 80.0% + +## Results + +| Status | Test | Detail | +|--------|------|--------| +| β PASS | T01: Browser launched with extension | β | +| β PASS | T02: Extension ID found | memplnhgfnplgadhfoljnchlnpjdeoip | +| β οΈ WARN | T03: Content script ping failed | {"ready":false,"reason":"Could not establish connection. Receiving end does not exist."} | +| β οΈ WARN | T04: GET_CONNECTION_STATUS failed | {"success":false,"reason":"Could not establish connection. Receiving end does not exist."} | +| β οΈ WARN | T05: No moat.css (V1 removed) but content.css rules not detected | {"hasContentCssRules":false,"hasMoatCss":false,"sheetCount":2} | +| β PASS | T06: No V1 moat sidebar injected into page | β | +| β PASS | T07: Manifest V2 configuration correct | {"version":true,"sidePanel":true,"hasSidePanelConfig":true,"noMoatJs":true,"noMoatCss":true,"hasContentCss":true} | +| β PASS | T08: Side Panel HTML structure correct | {"title":"Drawbridge","hasApp":true,"hasTaskContainer":true,"hasTabs":3,"hasConnectBtn":true,"hasToolsBtn":true,"hasSettingsBtn":true,"hasToolsMenu":true,"hasProjectMenu":true} | +| β PASS | T09: Side Panel JS initialized | Active tab: "to do", disconnected state shown | +| β PASS | T10: Theme toggle works | light β dark | +| β PASS | T11: Tab switching works | to do β doing β done | +| β PASS | T12: Tools menu opens with Comment + Rectangle | comment, rectangle | +| β PASS | T13: Demo site renders correctly | Title: Moss&Mint Studio β Design & Web Agency, Body: 1421 chars | +| β PASS | T14: Background service worker active | chrome-extension://memplnhgfnplgadhfoljnchlnpjdeoip/background.js | +| β PASS | T15: No console errors on demo page | β | diff --git a/chrome-extension/tests/v2/results/unit-2026-02-12T20-46-12-fd7dbe5.md b/chrome-extension/tests/v2/results/unit-2026-02-12T20-46-12-fd7dbe5.md new file mode 100644 index 0000000..73bd61d --- /dev/null +++ b/chrome-extension/tests/v2/results/unit-2026-02-12T20-46-12-fd7dbe5.md @@ -0,0 +1,9 @@ +# Unit Test Results + +- **Date:** 2026-02-12T20:46:12.479Z +- **Commit:** fd7dbe5 +- **Branch:** v2 +- **Total:** 79 | **Passed:** 79 | **Failed:** 0 | **Skipped:** 0 +- **Pass Rate:** 100.0% + +## β All tests passed! diff --git a/chrome-extension/tests/v2/results/unit-2026-02-12T22-21-31-f2a490c.md b/chrome-extension/tests/v2/results/unit-2026-02-12T22-21-31-f2a490c.md new file mode 100644 index 0000000..59e21ff --- /dev/null +++ b/chrome-extension/tests/v2/results/unit-2026-02-12T22-21-31-f2a490c.md @@ -0,0 +1,9 @@ +# Unit Test Results + +- **Date:** 2026-02-12T22:21:31.635Z +- **Commit:** f2a490c +- **Branch:** v2 +- **Total:** 79 | **Passed:** 79 | **Failed:** 0 | **Skipped:** 0 +- **Pass Rate:** 100.0% + +## β All tests passed! diff --git a/chrome-extension/tests/v2/results/unit-2026-02-12T22-23-07-ae923f0.md b/chrome-extension/tests/v2/results/unit-2026-02-12T22-23-07-ae923f0.md new file mode 100644 index 0000000..393b214 --- /dev/null +++ b/chrome-extension/tests/v2/results/unit-2026-02-12T22-23-07-ae923f0.md @@ -0,0 +1,9 @@ +# Unit Test Results + +- **Date:** 2026-02-12T22:23:07.311Z +- **Commit:** ae923f0 +- **Branch:** v2 +- **Total:** 79 | **Passed:** 79 | **Failed:** 0 | **Skipped:** 0 +- **Pass Rate:** 100.0% + +## β All tests passed! diff --git a/chrome-extension/tests/v2/results/unit-2026-02-12T23-20-07-2be8f0e.md b/chrome-extension/tests/v2/results/unit-2026-02-12T23-20-07-2be8f0e.md new file mode 100644 index 0000000..f9f9d7b --- /dev/null +++ b/chrome-extension/tests/v2/results/unit-2026-02-12T23-20-07-2be8f0e.md @@ -0,0 +1,9 @@ +# Unit Test Results + +- **Date:** 2026-02-12T23:20:07.501Z +- **Commit:** 2be8f0e +- **Branch:** v2 +- **Total:** 79 | **Passed:** 79 | **Failed:** 0 | **Skipped:** 0 +- **Pass Rate:** 100.0% + +## β All tests passed! diff --git a/chrome-extension/tests/v2/run-all.js b/chrome-extension/tests/v2/run-all.js new file mode 100644 index 0000000..9e0d3a8 --- /dev/null +++ b/chrome-extension/tests/v2/run-all.js @@ -0,0 +1,182 @@ +/** + * Run All V2 Tests (Node.js) + * + * Sets up globals to match browser environment, then loads and runs each test file. + */ + +// 1. Load test framework + mocks +const { TestRunner, expect } = require('./test-runner.js'); +const { setupMocks } = require('./chrome-mock.js'); + +// 2. Make them global (test files expect browser-style globals) +global.TestRunner = TestRunner; +global.expect = expect; +global.setupMocks = setupMocks; + +// 3. Setup initial mocks so chrome/window/document exist +const mocks = setupMocks(); + +// 4. Ensure showDirectoryPicker is on window +global.window.showDirectoryPicker = global.showDirectoryPicker; + +// 5. Load utility modules and wire them to window.* globals +// The modules use `module.exports` in Node.js, so require() returns +// the exports but never sets window.*. We bridge that here. +try { + const taskStoreModule = require('../../utils/taskStore.js'); + global.window.MoatTaskStore = taskStoreModule; + console.log('β Loaded: MoatTaskStore'); +} catch (e) { + console.warn('β οΈ Could not load taskStore.js:', e.message); + global.window.MoatTaskStore = null; +} + +try { + const markdownModule = require('../../utils/markdownGenerator.js'); + global.window.MoatMarkdownGenerator = markdownModule; + console.log('β Loaded: MoatMarkdownGenerator'); +} catch (e) { + console.warn('β οΈ Could not load markdownGenerator.js:', e.message); + global.window.MoatMarkdownGenerator = null; +} + +try { + const persistenceModule = require('../../utils/persistence.js'); + global.window.MoatPersistence = persistenceModule.MoatPersistence; + console.log('β Loaded: MoatPersistence'); +} catch (e) { + console.warn('β οΈ Could not load persistence.js:', e.message); + global.window.MoatPersistence = null; +} + +try { + const safeStorageModule = require('../../utils/safeStorage.js'); + global.window.MoatSafeStorage = safeStorageModule.MoatSafeStorage; + console.log('β Loaded: MoatSafeStorage'); +} catch (e) { + console.warn('β οΈ Could not load safeStorage.js:', e.message); + global.window.MoatSafeStorage = null; +} + +// 6. Collect runners from each test file +const testFiles = [ + './connection.test.js', + './tasks.test.js', + './markdown.test.js', + './filesystem.test.js', + './v2-architecture.test.js' +]; + +(async function main() { + console.log('\nπ Drawbridge V2 Test Suite'); + console.log('='.repeat(60)); + console.log(`Running ${testFiles.length} test files...\n`); + + let totalTests = 0; + let totalPassed = 0; + let totalFailed = 0; + let totalSkipped = 0; + const allFailures = []; + + for (const file of testFiles) { + console.log(`\n${'β'.repeat(60)}`); + console.log(`π ${file}`); + console.log('β'.repeat(60)); + + try { + // Clear require cache so each file gets fresh state + delete require.cache[require.resolve(file)]; + + // Intercept TestRunner constructor to capture the runner instance + let capturedRunner = null; + const OrigRunner = TestRunner; + + global.TestRunner = class extends OrigRunner { + constructor() { + super(); + capturedRunner = this; + } + }; + + require(file); + + global.TestRunner = OrigRunner; + + if (capturedRunner) { + await capturedRunner.run(); + const results = capturedRunner.getResults(); + totalTests += results.stats.total; + totalPassed += results.stats.passed; + totalFailed += results.stats.failed; + totalSkipped += results.stats.skipped; + allFailures.push(...results.failedTests.map(f => ({ ...f, file }))); + } else { + console.log(' β οΈ No test runner found in file'); + } + } catch (error) { + console.error(` β Failed to load: ${error.message}`); + console.error(` ${error.stack?.split('\n').slice(1, 3).join('\n ')}`); + } + } + + // Summary + console.log('\n\n' + '='.repeat(60)); + console.log('π OVERALL RESULTS'); + console.log('='.repeat(60)); + console.log(`Total: ${totalTests}`); + console.log(`β Passed: ${totalPassed}`); + console.log(`β Failed: ${totalFailed}`); + console.log(`βοΈ Skipped: ${totalSkipped}`); + + const passRate = totalTests > 0 ? ((totalPassed / totalTests) * 100).toFixed(1) : 0; + console.log(`\nπ Pass Rate: ${passRate}%`); + + if (allFailures.length > 0) { + console.log('\nβ Failures:'); + allFailures.forEach(({ suite, test, error, file }) => { + console.log(` β’ [${file}] ${suite} β ${test}`); + console.log(` ${error.message}`); + }); + } + + if (totalFailed === 0) { + console.log('\nπ All tests passed!'); + } + + console.log('='.repeat(60)); + + // Save results to file + const fs = require('fs'); + const pathMod = require('path'); + const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19); + let commit = 'unknown'; + try { + commit = require('child_process').execSync('git rev-parse --short HEAD', { cwd: pathMod.resolve(__dirname, '../../../') }).toString().trim(); + } catch(e) {} + const resultsDir = pathMod.resolve(__dirname, 'results'); + if (!fs.existsSync(resultsDir)) fs.mkdirSync(resultsDir, { recursive: true }); + const resultsFile = pathMod.join(resultsDir, `unit-${timestamp}-${commit}.md`); + + let md = `# Unit Test Results\n\n`; + md += `- **Date:** ${new Date().toISOString()}\n`; + md += `- **Commit:** ${commit}\n`; + md += `- **Branch:** v2\n`; + md += `- **Total:** ${totalTests} | **Passed:** ${totalPassed} | **Failed:** ${totalFailed} | **Skipped:** ${totalSkipped}\n`; + md += `- **Pass Rate:** ${passRate}%\n\n`; + + if (allFailures.length > 0) { + md += `## Failures\n\n`; + md += `| File | Suite | Test | Error |\n`; + md += `|------|-------|------|-------|\n`; + allFailures.forEach(({ file, suite, test, error }) => { + md += `| ${file} | ${suite} | ${test} | ${error.message.replace(/\|/g, '\\|')} |\n`; + }); + } else { + md += `## β All tests passed!\n`; + } + + fs.writeFileSync(resultsFile, md); + console.log(`\nπ Results saved: ${resultsFile}`); + + process.exit(totalFailed > 0 ? 1 : 0); +})(); diff --git a/chrome-extension/tests/v2/tasks.test.js b/chrome-extension/tests/v2/tasks.test.js new file mode 100644 index 0000000..8c48618 --- /dev/null +++ b/chrome-extension/tests/v2/tasks.test.js @@ -0,0 +1,571 @@ +/** + * Task Management (CRUD) Tests + * Tests for JTBD-42 through JTBD-56 + */ + +const runner = new TestRunner(); +const describe = runner.describe.bind(runner); +const it = runner.it.bind(runner); +const beforeEach = runner.beforeEach.bind(runner); +const afterEach = runner.afterEach.bind(runner); + +describe('JTBD-42: System adds task to TaskStore', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should add a new task', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const taskData = { + title: 'Test Task', + comment: 'This is a test comment', + selector: '.test-element', + boundingRect: { x: 0, y: 0, w: 100, h: 50 } + }; + + const task = taskStore.addTask(taskData); + + expect(task).toBeTruthy(); + expect(task.id).toBeTruthy(); + expect(task.title).toBe('Test Task'); + expect(task.comment).toBe('This is a test comment'); + expect(task.status).toBe('to do'); + }); + + it('should generate UUID for task ID', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + + // UUID v4 format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx + const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i; + expect(task.id.match(uuidPattern)).toBeTruthy(); + }); + + it('should add timestamp to task', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const beforeTime = Date.now(); + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + const afterTime = Date.now(); + + expect(task.timestamp).toBeGreaterThanOrEqual(beforeTime); + expect(task.timestamp).toBeLessThanOrEqual(afterTime); + }); +}); + +describe('JTBD-43: System validates task object structure', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should require title and comment', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + expect(() => { + taskStore.addTask({ title: 'Test' }); // Missing comment + }).toThrow(); + + expect(() => { + taskStore.addTask({ comment: 'Test comment' }); // Missing title + }).toThrow(); + }); + + it('should validate task status values', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + + // Valid status change + const updated = taskStore.updateTaskStatus(task.id, 'doing'); + expect(updated.status).toBe('doing'); + + // Invalid status change + expect(() => { + taskStore.updateTaskStatus(task.id, 'invalid-status'); + }).toThrow(); + }); + + it('should allow null selector for freeform rectangles', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Freeform Task', + comment: 'Rectangle annotation', + selector: null, + boundingRect: { x: 10, y: 10, w: 100, h: 100 } + }); + + expect(task.selector).toBeNull(); + expect(task.boundingRect).toBeTruthy(); + }); +}); + +describe('JTBD-44: System deduplicates identical tasks', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should detect duplicate tasks with same selector and comment', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const taskData = { + title: 'Duplicate Test', + comment: 'Same comment', + selector: '.same-selector' + }; + + const task1 = taskStore.addTask(taskData); + const task2 = taskStore.addTask(taskData); + + // Should return same task (deduplicated) + expect(task2.id).toBe(task1.id); + expect(taskStore.getAllTasks()).toHaveLength(1); + }); + + it('should not deduplicate completed tasks', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const taskData = { + title: 'Test', + comment: 'Same comment', + selector: '.same-selector' + }; + + const task1 = taskStore.addTask(taskData); + taskStore.updateTaskStatus(task1.id, 'done'); + + const task2 = taskStore.addTask(taskData); + + // Should create new task since first is done + expect(task2.id).not.toBe(task1.id); + expect(taskStore.getAllTasks()).toHaveLength(2); + }); + + it('should detect duplicate freeform rectangles', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const taskData = { + title: 'Rectangle', + comment: 'Same comment', + selector: null, + boundingRect: { x: 10, y: 10, w: 100, h: 100 } + }; + + const task1 = taskStore.addTask(taskData); + const task2 = taskStore.addTask(taskData); + + // Should detect as duplicate (within 10px threshold) + expect(task2.id).toBe(task1.id); + expect(taskStore.getAllTasks()).toHaveLength(1); + }); +}); + +describe('JTBD-48: System updates task status', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should update task status', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + + expect(task.status).toBe('to do'); + + taskStore.updateTaskStatus(task.id, 'doing'); + expect(task.status).toBe('doing'); + + taskStore.updateTaskStatus(task.id, 'done'); + expect(task.status).toBe('done'); + }); + + it('should add lastModified timestamp on status update', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + + const beforeUpdate = Date.now(); + taskStore.updateTaskStatus(task.id, 'doing'); + const afterUpdate = Date.now(); + + expect(task.lastModified).toBeTruthy(); + expect(task.lastModified).toBeGreaterThanOrEqual(beforeUpdate); + expect(task.lastModified).toBeLessThanOrEqual(afterUpdate); + }); + + it('should return null when updating non-existent task', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const result = taskStore.updateTaskStatus('non-existent-id', 'doing'); + expect(result).toBeNull(); + }); +}); + +describe('JTBD-51: System gets task by ID', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should retrieve task by ID', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + + const retrieved = taskStore.getTaskById(task.id); + + expect(retrieved).toBeTruthy(); + expect(retrieved.id).toBe(task.id); + expect(retrieved.title).toBe('Test'); + }); + + it('should return null for non-existent ID', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const retrieved = taskStore.getTaskById('non-existent-id'); + expect(retrieved).toBeNull(); + }); +}); + +describe('JTBD-52: System gets all tasks sorted by timestamp', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should return tasks sorted newest first', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task1 = taskStore.addTask({ + title: 'Task 1', + comment: 'First task', + selector: '.test1' + }); + // Ensure task1 has an earlier timestamp + task1.timestamp = Date.now() - 1000; + + const task2 = taskStore.addTask({ + title: 'Task 2', + comment: 'Second task', + selector: '.test2' + }); + + const tasks = taskStore.getAllTasks(); + + expect(tasks).toHaveLength(2); + // Newest first (reverse chronological) + expect(tasks[0].id).toBe(task2.id); + expect(tasks[1].id).toBe(task1.id); + }); +}); + +describe('JTBD-53: System gets tasks in chronological order', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should return tasks sorted oldest first', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task1 = taskStore.addTask({ + title: 'Task 1', + comment: 'First task', + selector: '.test1' + }); + + const task2 = taskStore.addTask({ + title: 'Task 2', + comment: 'Second task', + selector: '.test2' + }); + + const tasks = taskStore.getAllTasksChronological(); + + expect(tasks).toHaveLength(2); + // Oldest first (chronological) + expect(tasks[0].id).toBe(task1.id); + expect(tasks[1].id).toBe(task2.id); + }); +}); + +describe('JTBD-54: System calculates task statistics', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should count tasks by status', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task1 = taskStore.addTask({ + title: 'Task 1', + comment: 'Test 1', + selector: '.test1' + }); + + const task2 = taskStore.addTask({ + title: 'Task 2', + comment: 'Test 2', + selector: '.test2' + }); + + const task3 = taskStore.addTask({ + title: 'Task 3', + comment: 'Test 3', + selector: '.test3' + }); + + taskStore.updateTaskStatus(task2.id, 'doing'); + taskStore.updateTaskStatus(task3.id, 'done'); + + const stats = taskStore.getTaskStats(); + + expect(stats.total).toBe(3); + expect(stats['to do']).toBe(1); + expect(stats['doing']).toBe(1); + expect(stats['done']).toBe(1); + }); + + it('should handle empty task list', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const stats = taskStore.getTaskStats(); + + expect(stats.total).toBe(0); + expect(stats['to do']).toBe(0); + expect(stats['doing']).toBe(0); + expect(stats['done']).toBe(0); + }); +}); + +describe('JTBD-46: System saves tasks to JSON file', () => { + let taskStore; + let mocks; + + beforeEach(async () => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + const dirHandle = await window.showDirectoryPicker(); + const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true }); + taskStore.initialize(moatDir); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should save tasks to moat-tasks-detail.json', async () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + taskStore.addTask({ + title: 'Test Task', + comment: 'Test comment', + selector: '.test' + }); + + await taskStore.saveTasksToFile(); + + // Verify file was written + const fileHandle = await taskStore.directoryHandle.getFileHandle('moat-tasks-detail.json'); + const file = await fileHandle.getFile(); + const content = await file.text(); + const tasks = JSON.parse(content); + + expect(tasks).toHaveLength(1); + expect(tasks[0].title).toBe('Test Task'); + }); +}); + +describe('JTBD-50: System removes task by ID', () => { + let taskStore; + let mocks; + + beforeEach(() => { + mocks = setupMocks(); + if (window.MoatTaskStore) { + taskStore = new window.MoatTaskStore.TaskStore(); + } + }); + + afterEach(() => { + mocks.reset(); + }); + + it('should remove task from store', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const task = taskStore.addTask({ + title: 'Test', + comment: 'Test comment', + selector: '.test' + }); + + expect(taskStore.getAllTasks()).toHaveLength(1); + + const removed = taskStore.removeTask(task.id); + + expect(removed).toBe(true); + expect(taskStore.getAllTasks()).toHaveLength(0); + }); + + it('should return false for non-existent task', () => { + if (!taskStore) { + throw new Error('TaskStore module not loaded β check run-all.js module setup'); + } + + const removed = taskStore.removeTask('non-existent-id'); + expect(removed).toBe(false); + }); +}); + +// Export runner for test execution +if (typeof module !== 'undefined' && module.exports) { + module.exports = runner; +} else { + window.tasksTestRunner = runner; +} diff --git a/chrome-extension/tests/v2/test-runner.html b/chrome-extension/tests/v2/test-runner.html new file mode 100644 index 0000000..643da46 --- /dev/null +++ b/chrome-extension/tests/v2/test-runner.html @@ -0,0 +1,288 @@ + + + + + +π§ͺ Drawbridge V2 Test Runner
+ +
+
+
+
+
+ π¦ Module Status
+-
+
- Loading... +
+
+
+ π Test Results
+
+
+ Click "Run All Tests" to start testing...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chrome-extension/tests/v2/test-runner.js b/chrome-extension/tests/v2/test-runner.js
new file mode 100644
index 0000000..a7207e9
--- /dev/null
+++ b/chrome-extension/tests/v2/test-runner.js
@@ -0,0 +1,443 @@
+/**
+ * Simple Test Runner for Drawbridge V2
+ *
+ * Provides a minimal test framework without npm dependencies.
+ * Inspired by Jest/Mocha but simplified for browser environment.
+ */
+
+class TestRunner {
+ constructor() {
+ this.suites = [];
+ this.currentSuite = null;
+ this.stats = {
+ total: 0,
+ passed: 0,
+ failed: 0,
+ skipped: 0
+ };
+ this.failedTests = [];
+ }
+
+ /**
+ * Define a test suite
+ * @param {string} name - Suite name
+ * @param {Function} fn - Suite function containing tests
+ */
+ describe(name, fn) {
+ const suite = {
+ name,
+ tests: [],
+ beforeEachFn: null,
+ afterEachFn: null,
+ beforeAllFn: null,
+ afterAllFn: null
+ };
+
+ this.suites.push(suite);
+ this.currentSuite = suite;
+
+ // Execute suite definition to collect tests
+ fn();
+
+ this.currentSuite = null;
+ }
+
+ /**
+ * Define a test case
+ * @param {string} name - Test name
+ * @param {Function} fn - Test function
+ */
+ it(name, fn) {
+ if (!this.currentSuite) {
+ throw new Error('it() must be called inside describe()');
+ }
+
+ this.currentSuite.tests.push({
+ name,
+ fn,
+ skip: false
+ });
+ }
+
+ /**
+ * Define a skipped test
+ * @param {string} name - Test name
+ * @param {Function} fn - Test function
+ */
+ xit(name, fn) {
+ if (!this.currentSuite) {
+ throw new Error('xit() must be called inside describe()');
+ }
+
+ this.currentSuite.tests.push({
+ name,
+ fn,
+ skip: true
+ });
+ }
+
+ /**
+ * Run before each test in current suite
+ */
+ beforeEach(fn) {
+ if (!this.currentSuite) {
+ throw new Error('beforeEach() must be called inside describe()');
+ }
+ this.currentSuite.beforeEachFn = fn;
+ }
+
+ /**
+ * Run after each test in current suite
+ */
+ afterEach(fn) {
+ if (!this.currentSuite) {
+ throw new Error('afterEach() must be called inside describe()');
+ }
+ this.currentSuite.afterEachFn = fn;
+ }
+
+ /**
+ * Run before all tests in current suite
+ */
+ beforeAll(fn) {
+ if (!this.currentSuite) {
+ throw new Error('beforeAll() must be called inside describe()');
+ }
+ this.currentSuite.beforeAllFn = fn;
+ }
+
+ /**
+ * Run after all tests in current suite
+ */
+ afterAll(fn) {
+ if (!this.currentSuite) {
+ throw new Error('afterAll() must be called inside describe()');
+ }
+ this.currentSuite.afterAllFn = fn;
+ }
+
+ /**
+ * Run all test suites
+ */
+ async run() {
+ console.log('π§ͺ Starting Test Runner...\n');
+
+ for (const suite of this.suites) {
+ console.log(`\nπ¦ ${suite.name}`);
+
+ // Run beforeAll
+ if (suite.beforeAllFn) {
+ try {
+ await suite.beforeAllFn();
+ } catch (error) {
+ console.error(`β beforeAll failed: ${error.message}`);
+ continue;
+ }
+ }
+
+ // Run tests
+ for (const test of suite.tests) {
+ if (test.skip) {
+ console.log(` βοΈ ${test.name} (skipped)`);
+ this.stats.skipped++;
+ continue;
+ }
+
+ this.stats.total++;
+
+ // Run beforeEach
+ if (suite.beforeEachFn) {
+ try {
+ await suite.beforeEachFn();
+ } catch (error) {
+ console.error(` β ${test.name}`);
+ console.error(` beforeEach failed: ${error.message}`);
+ this.stats.failed++;
+ this.failedTests.push({ suite: suite.name, test: test.name, error });
+ continue;
+ }
+ }
+
+ // Run test
+ try {
+ await test.fn();
+ console.log(` β
${test.name}`);
+ this.stats.passed++;
+ } catch (error) {
+ console.error(` β ${test.name}`);
+ console.error(` ${error.message}`);
+ if (error.stack) {
+ console.error(` ${error.stack.split('\n').slice(1, 3).join('\n ')}`);
+ }
+ this.stats.failed++;
+ this.failedTests.push({ suite: suite.name, test: test.name, error });
+ }
+
+ // Run afterEach
+ if (suite.afterEachFn) {
+ try {
+ await suite.afterEachFn();
+ } catch (error) {
+ console.error(` β οΈ afterEach failed: ${error.message}`);
+ }
+ }
+ }
+
+ // Run afterAll
+ if (suite.afterAllFn) {
+ try {
+ await suite.afterAllFn();
+ } catch (error) {
+ console.error(`β afterAll failed: ${error.message}`);
+ }
+ }
+ }
+
+ this.printSummary();
+ }
+
+ /**
+ * Print test summary
+ */
+ printSummary() {
+ console.log('\n' + '='.repeat(50));
+ console.log('π Test Summary');
+ console.log('='.repeat(50));
+ console.log(`Total: ${this.stats.total}`);
+ console.log(`β
Passed: ${this.stats.passed}`);
+ console.log(`β Failed: ${this.stats.failed}`);
+ console.log(`βοΈ Skipped: ${this.stats.skipped}`);
+ console.log('='.repeat(50));
+
+ if (this.failedTests.length > 0) {
+ console.log('\nβ Failed Tests:');
+ this.failedTests.forEach(({ suite, test, error }) => {
+ console.log(` β’ ${suite} β ${test}`);
+ console.log(` ${error.message}`);
+ });
+ }
+
+ const passRate = this.stats.total > 0
+ ? ((this.stats.passed / this.stats.total) * 100).toFixed(1)
+ : 0;
+
+ console.log(`\nπ Pass Rate: ${passRate}%`);
+
+ if (this.stats.failed === 0) {
+ console.log('\nπ All tests passed!');
+ }
+ }
+
+ /**
+ * Get test results
+ */
+ getResults() {
+ return {
+ stats: this.stats,
+ failedTests: this.failedTests,
+ passed: this.stats.failed === 0
+ };
+ }
+}
+
+// Assertion helpers
+class Expect {
+ constructor(actual) {
+ this.actual = actual;
+ this.isNot = false;
+ }
+
+ get not() {
+ this.isNot = true;
+ return this;
+ }
+
+ toBe(expected) {
+ const pass = this.actual === expected;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to be ${JSON.stringify(expected)}`
+ );
+ }
+ }
+
+ toEqual(expected) {
+ const pass = JSON.stringify(this.actual) === JSON.stringify(expected);
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to equal ${JSON.stringify(expected)}`
+ );
+ }
+ }
+
+ toBeTruthy() {
+ const pass = !!this.actual;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to be truthy`
+ );
+ }
+ }
+
+ toBeFalsy() {
+ const pass = !this.actual;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to be falsy`
+ );
+ }
+ }
+
+ toBeNull() {
+ const pass = this.actual === null;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to be null`
+ );
+ }
+ }
+
+ toBeUndefined() {
+ const pass = this.actual === undefined;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to be undefined`
+ );
+ }
+ }
+
+ toContain(item) {
+ const pass = Array.isArray(this.actual)
+ ? this.actual.includes(item)
+ : this.actual.indexOf(item) !== -1;
+
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${JSON.stringify(this.actual)} ${this.isNot ? 'not ' : ''}to contain ${JSON.stringify(item)}`
+ );
+ }
+ }
+
+ toHaveLength(length) {
+ const pass = this.actual.length === length;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected length ${this.actual.length} ${this.isNot ? 'not ' : ''}to be ${length}`
+ );
+ }
+ }
+
+ toHaveProperty(property, value) {
+ const hasProperty = this.actual.hasOwnProperty(property);
+
+ if (!hasProperty) {
+ throw new Error(
+ `Expected object to have property "${property}"`
+ );
+ }
+
+ if (value !== undefined) {
+ const pass = this.actual[property] === value;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected property "${property}" ${this.isNot ? 'not ' : ''}to be ${JSON.stringify(value)}, got ${JSON.stringify(this.actual[property])}`
+ );
+ }
+ }
+ }
+
+ toThrow(expectedError) {
+ if (typeof this.actual !== 'function') {
+ throw new Error('toThrow() requires a function');
+ }
+
+ let didThrow = false;
+ let thrownError = null;
+
+ try {
+ this.actual();
+ } catch (error) {
+ didThrow = true;
+ thrownError = error;
+ }
+
+ if ((didThrow && this.isNot) || (!didThrow && !this.isNot)) {
+ throw new Error(
+ `Expected function ${this.isNot ? 'not ' : ''}to throw`
+ );
+ }
+
+ if (expectedError && didThrow) {
+ if (typeof expectedError === 'string') {
+ if (!thrownError.message.includes(expectedError)) {
+ throw new Error(
+ `Expected error message to include "${expectedError}", got "${thrownError.message}"`
+ );
+ }
+ } else if (expectedError instanceof RegExp) {
+ if (!expectedError.test(thrownError.message)) {
+ throw new Error(
+ `Expected error message to match ${expectedError}, got "${thrownError.message}"`
+ );
+ }
+ }
+ }
+ }
+
+ toBeGreaterThan(expected) {
+ const pass = this.actual > expected;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${this.actual} ${this.isNot ? 'not ' : ''}to be greater than ${expected}`
+ );
+ }
+ }
+
+ toBeGreaterThanOrEqual(expected) {
+ const pass = this.actual >= expected;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${this.actual} ${this.isNot ? 'not ' : ''}to be greater than or equal to ${expected}`
+ );
+ }
+ }
+
+ toBeLessThan(expected) {
+ const pass = this.actual < expected;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${this.actual} ${this.isNot ? 'not ' : ''}to be less than ${expected}`
+ );
+ }
+ }
+
+ toBeLessThanOrEqual(expected) {
+ const pass = this.actual <= expected;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${this.actual} ${this.isNot ? 'not ' : ''}to be less than or equal to ${expected}`
+ );
+ }
+ }
+
+ toBeInstanceOf(constructor) {
+ const pass = this.actual instanceof constructor;
+ if ((pass && this.isNot) || (!pass && !this.isNot)) {
+ throw new Error(
+ `Expected ${this.actual} ${this.isNot ? 'not ' : ''}to be instance of ${constructor.name}`
+ );
+ }
+ }
+}
+
+function expect(actual) {
+ return new Expect(actual);
+}
+
+// Export for Node.js and browser
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = { TestRunner, expect };
+} else {
+ window.TestRunner = TestRunner;
+ window.expect = expect;
+}
diff --git a/chrome-extension/tests/v2/v2-architecture.test.js b/chrome-extension/tests/v2/v2-architecture.test.js
new file mode 100644
index 0000000..fffd033
--- /dev/null
+++ b/chrome-extension/tests/v2/v2-architecture.test.js
@@ -0,0 +1,493 @@
+/**
+ * V2 Architecture Tests
+ * Tests for V2-specific message passing and Side Panel integration
+ *
+ * V2 Architecture:
+ * - Side Panel (sidepanel.js) - UI layer, message passing only
+ * - Background Script (background.js) - message relay between side panel and content script
+ * - Content Script (content_script.js) - File System Access API operations
+ */
+
+const runner = new TestRunner();
+const describe = runner.describe.bind(runner);
+const it = runner.it.bind(runner);
+const beforeEach = runner.beforeEach.bind(runner);
+const afterEach = runner.afterEach.bind(runner);
+
+describe('V2-01: Background script opens side panel on icon click', () => {
+ let mocks;
+
+ beforeEach(() => {
+ mocks = setupMocks();
+ });
+
+ afterEach(() => {
+ mocks.reset();
+ });
+
+ it('should open side panel when extension icon is clicked', async () => {
+ const tab = { id: 1, url: 'https://example.com' };
+ let sidePanelOpened = false;
+
+ // Mock sidePanel API
+ chrome.sidePanel = {
+ open: async ({ tabId }) => {
+ if (tabId === tab.id) {
+ sidePanelOpened = true;
+ }
+ }
+ };
+
+ // Register the handler as background.js would
+ chrome.action.onClicked.addListener(async (tab) => {
+ const restrictedSchemes = ['chrome://', 'chrome-extension://', 'edge://', 'about:', 'devtools://'];
+ const isRestricted = restrictedSchemes.some(scheme => tab.url?.startsWith(scheme));
+ if (isRestricted || !tab.id || !tab.url) return;
+ await chrome.sidePanel.open({ tabId: tab.id });
+ });
+
+ // Simulate icon click
+ const listeners = chrome.action._actionListeners || [];
+ for (const listener of listeners) {
+ await listener(tab);
+ }
+
+ expect(sidePanelOpened).toBe(true);
+ });
+
+ it('should not open side panel on restricted URLs', async () => {
+ const restrictedTab = { id: 1, url: 'chrome://extensions/' };
+ let sidePanelOpened = false;
+
+ chrome.sidePanel = {
+ open: async () => {
+ sidePanelOpened = true;
+ }
+ };
+
+ const listeners = chrome.action._actionListeners || [];
+ for (const listener of listeners) {
+ await listener(restrictedTab);
+ }
+
+ expect(sidePanelOpened).toBe(false);
+ });
+});
+
+describe('V2-02: Background script relays messages between side panel and content script', () => {
+ let mocks;
+
+ // Simulates the message handler from background.js
+ function createBackgroundHandler() {
+ const contentScriptMessages = [
+ 'ENTER_COMMENT_MODE', 'ENTER_DRAWING_MODE', 'EXIT_ANNOTATION_MODE',
+ 'SETUP_PROJECT', 'DISCONNECT_PROJECT', 'LOAD_TASKS',
+ 'UPDATE_TASK_STATUS', 'DELETE_TASK', 'GET_CONNECTION_STATUS'
+ ];
+
+ return (message, sender, sendResponse) => {
+ if (message.type === 'CAPTURE_SCREENSHOT') {
+ chrome.tabs.captureVisibleTab(
+ sender.tab.windowId,
+ { format: 'png' },
+ (dataUrl) => {
+ sendResponse({ success: true, dataUrl });
+ }
+ );
+ return true;
+ }
+
+ if (message.type === 'RELAY_TO_SIDEPANEL') {
+ chrome.runtime.sendMessage(message.payload).catch(() => {});
+ return false;
+ }
+
+ if (contentScriptMessages.includes(message.type)) {
+ chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+ if (tabs[0]?.id) {
+ chrome.tabs.sendMessage(tabs[0].id, message, (response) => {
+ sendResponse(response || { success: true });
+ });
+ }
+ });
+ return true;
+ }
+ };
+ }
+
+ beforeEach(() => {
+ mocks = setupMocks();
+ });
+
+ afterEach(() => {
+ mocks.reset();
+ });
+
+ it('should relay RELAY_TO_SIDEPANEL messages', () => {
+ const handler = createBackgroundHandler();
+
+ const testMessage = {
+ type: 'RELAY_TO_SIDEPANEL',
+ payload: {
+ type: 'TASKS_UPDATED',
+ tasks: [{ id: '1', title: 'Test' }]
+ }
+ };
+
+ let relayedMessage = null;
+ chrome.runtime.sendMessage = (message) => {
+ relayedMessage = message;
+ return Promise.resolve();
+ };
+
+ const sender = { tab: { id: 1, windowId: 1 } };
+ handler(testMessage, sender, () => {});
+
+ expect(relayedMessage).toEqual(testMessage.payload);
+ });
+
+ it('should relay content script commands to active tab', () => {
+ const handler = createBackgroundHandler();
+
+ let sentToTab = null;
+ let capturedResponse = null;
+ chrome.tabs.query = (query, callback) => {
+ callback([{ id: 1 }]);
+ };
+ chrome.tabs.sendMessage = (tabId, message, callback) => {
+ sentToTab = { tabId, message };
+ callback({ success: true });
+ };
+
+ const sender = {};
+ const sendResponse = (response) => {
+ capturedResponse = response;
+ };
+
+ const keepAlive = handler({ type: 'ENTER_COMMENT_MODE' }, sender, sendResponse);
+
+ expect(keepAlive).toBe(true);
+ expect(sentToTab).toBeTruthy();
+ expect(sentToTab.tabId).toBe(1);
+ expect(sentToTab.message.type).toBe('ENTER_COMMENT_MODE');
+ expect(capturedResponse.success).toBe(true);
+ });
+
+ it('should handle screenshot capture requests', () => {
+ const handler = createBackgroundHandler();
+
+ let capturedResponse = null;
+ // Mock captureVisibleTab to call callback synchronously
+ chrome.tabs.captureVisibleTab = (windowId, options, callback) => {
+ callback('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg==');
+ };
+
+ const sender = { tab: { id: 1, windowId: 1 } };
+ const keepAlive = handler(
+ { type: 'CAPTURE_SCREENSHOT' },
+ sender,
+ (response) => { capturedResponse = response; }
+ );
+
+ expect(keepAlive).toBe(true);
+ expect(capturedResponse).toBeTruthy();
+ expect(capturedResponse.success).toBe(true);
+ expect(capturedResponse.dataUrl).toContain('data:image/png;base64');
+ });
+});
+
+describe('V2-03: Side panel communicates with content script via background relay', () => {
+ let mocks;
+
+ beforeEach(() => {
+ mocks = setupMocks();
+ });
+
+ afterEach(() => {
+ mocks.reset();
+ });
+
+ it('should send SETUP_PROJECT message to content script', async () => {
+ let messageSent = null;
+
+ chrome.runtime.sendMessage = (message, callback) => {
+ messageSent = message;
+ if (callback) callback({ success: true });
+ return Promise.resolve({ success: true });
+ };
+
+ const response = await chrome.runtime.sendMessage({ type: 'SETUP_PROJECT' });
+
+ expect(messageSent.type).toBe('SETUP_PROJECT');
+ expect(response.success).toBe(true);
+ });
+
+ it('should request tasks from content script', async () => {
+ let messageSent = null;
+
+ chrome.runtime.sendMessage = (message, callback) => {
+ messageSent = message;
+ const response = {
+ success: true,
+ tasks: [
+ { id: '1', title: 'Test Task', status: 'to do' }
+ ]
+ };
+ if (callback) callback(response);
+ return Promise.resolve(response);
+ };
+
+ const response = await chrome.runtime.sendMessage({ type: 'LOAD_TASKS' });
+
+ expect(messageSent.type).toBe('LOAD_TASKS');
+ expect(response.tasks).toHaveLength(1);
+ expect(response.tasks[0].title).toBe('Test Task');
+ });
+
+ it('should update task status via message', async () => {
+ const updateMessage = {
+ type: 'UPDATE_TASK_STATUS',
+ taskId: 'task-123',
+ status: 'done'
+ };
+
+ chrome.runtime.sendMessage = (message, callback) => {
+ const response = { success: true, task: { id: 'task-123', status: 'done' } };
+ if (callback) callback(response);
+ return Promise.resolve(response);
+ };
+
+ const response = await chrome.runtime.sendMessage(updateMessage);
+
+ expect(response.success).toBe(true);
+ expect(response.task.status).toBe('done');
+ });
+});
+
+describe('V2-04: Content script retains File System Access API operations', () => {
+ let mocks;
+
+ beforeEach(() => {
+ mocks = setupMocks();
+ });
+
+ afterEach(() => {
+ mocks.reset();
+ });
+
+ it('should handle SETUP_PROJECT in content script context', async () => {
+ // Content script has access to window.showDirectoryPicker
+ expect(window.showDirectoryPicker).toBeTruthy();
+
+ const dirHandle = await window.showDirectoryPicker();
+ expect(dirHandle).toBeTruthy();
+ expect(dirHandle.kind).toBe('directory');
+ });
+
+ it('should handle file operations in content script context', async () => {
+ const dirHandle = await window.showDirectoryPicker();
+ const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true });
+
+ // Content script can write files
+ const fileHandle = await moatDir.getFileHandle('test.json', { create: true });
+ const writable = await fileHandle.createWritable();
+ await writable.write(JSON.stringify({ test: true }));
+ await writable.close();
+
+ // Verify
+ const file = await fileHandle.getFile();
+ const content = await file.text();
+ const data = JSON.parse(content);
+
+ expect(data.test).toBe(true);
+ });
+
+ it('should send thumbnails as data URLs to side panel', async () => {
+ // Content script loads screenshot and converts to data URL
+ const dirHandle = await window.showDirectoryPicker();
+ const moatDir = await dirHandle.getDirectoryHandle('.moat', { create: true });
+ const screenshotsDir = await moatDir.getDirectoryHandle('screenshots', { create: true });
+
+ // Create mock screenshot
+ const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
+ const binaryString = atob(base64Data);
+ const bytes = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ bytes[i] = binaryString.charCodeAt(i);
+ }
+ const blob = new Blob([bytes], { type: 'image/png' });
+
+ const fileHandle = await screenshotsDir.getFileHandle('test.png', { create: true });
+ const writable = await fileHandle.createWritable();
+ await writable.write(blob);
+ await writable.close();
+
+ // Read back as data URL (simulating what content script does)
+ const file = await fileHandle.getFile();
+ const arrayBuffer = await file.arrayBuffer();
+ const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+ const dataUrl = `data:image/png;base64,${base64}`;
+
+ expect(dataUrl).toContain('data:image/png;base64');
+ });
+});
+
+describe('V2-05: Side panel receives task updates via message events', () => {
+ let mocks;
+
+ // Simulates a side panel message handler (like handleMessage in sidepanel.js)
+ function createSidePanelHandler() {
+ const received = [];
+ return {
+ handler(message, sender, sendResponse) {
+ received.push(message);
+ return true;
+ },
+ received
+ };
+ }
+
+ beforeEach(() => {
+ mocks = setupMocks();
+ });
+
+ afterEach(() => {
+ mocks.reset();
+ });
+
+ it('should receive TASKS_UPDATED message', () => {
+ const { handler, received } = createSidePanelHandler();
+
+ const updateMessage = {
+ type: 'TASKS_UPDATED',
+ tasks: [
+ { id: '1', title: 'Task 1', status: 'to do' },
+ { id: '2', title: 'Task 2', status: 'doing' }
+ ]
+ };
+
+ handler(updateMessage, {}, () => {});
+
+ expect(received).toHaveLength(1);
+ expect(received[0].type).toBe('TASKS_UPDATED');
+ expect(received[0].tasks).toHaveLength(2);
+ });
+
+ it('should receive PROJECT_CONNECTED message', () => {
+ const { handler, received } = createSidePanelHandler();
+
+ const connectMessage = {
+ type: 'PROJECT_CONNECTED',
+ path: 'test-project',
+ status: 'connected'
+ };
+
+ handler(connectMessage, {}, () => {});
+
+ expect(received).toHaveLength(1);
+ expect(received[0].type).toBe('PROJECT_CONNECTED');
+ expect(received[0].path).toBe('test-project');
+ });
+
+ it('should receive ANNOTATION_CREATED message with thumbnail', () => {
+ const { handler, received } = createSidePanelHandler();
+
+ const annotationMessage = {
+ type: 'ANNOTATION_CREATED',
+ task: {
+ id: 'task-123',
+ title: 'New Task',
+ thumbnailDataUrl: 'data:image/png;base64,iVBORw0KGg=='
+ }
+ };
+
+ handler(annotationMessage, {}, () => {});
+
+ expect(received).toHaveLength(1);
+ expect(received[0].task.thumbnailDataUrl).toContain('data:image/png;base64');
+ });
+});
+
+describe('V2-06: Side panel manifest configuration', () => {
+ it('should have sidePanel permission in manifest', () => {
+ // This would be checked by loading manifest.json
+ const expectedPermissions = ['activeTab', 'storage', 'scripting', 'sidePanel'];
+
+ // In real test, load actual manifest
+ const manifest = {
+ permissions: ['activeTab', 'storage', 'scripting', 'sidePanel'],
+ side_panel: {
+ default_path: 'sidepanel/sidepanel.html'
+ }
+ };
+
+ expect(manifest.permissions).toContain('sidePanel');
+ expect(manifest.side_panel).toBeTruthy();
+ expect(manifest.side_panel.default_path).toBe('sidepanel/sidepanel.html');
+ });
+
+ it('should exclude moat.js from content scripts', () => {
+ const manifest = {
+ content_scripts: [{
+ js: [
+ 'html2canvas.min.js',
+ 'utils/safeStorage.js',
+ 'utils/persistence.js',
+ 'utils/taskStore.js',
+ 'utils/markdownGenerator.js',
+ 'utils/migrateLegacyFiles.js',
+ 'content_script.js'
+ // NO moat.js - it's been replaced by sidepanel/
+ ]
+ }]
+ };
+
+ const hasModuleJsInContentScripts = manifest.content_scripts[0].js.includes('moat.js');
+ expect(hasModuleJsInContentScripts).toBe(false);
+ });
+});
+
+describe('V2-07: Message type constants', () => {
+ it('should define all V2 message types', () => {
+ const messageTypes = {
+ // Content script to background
+ CAPTURE_SCREENSHOT: 'CAPTURE_SCREENSHOT',
+ RELAY_TO_SIDEPANEL: 'RELAY_TO_SIDEPANEL',
+
+ // Side panel to content script (via background)
+ ENTER_COMMENT_MODE: 'ENTER_COMMENT_MODE',
+ ENTER_DRAWING_MODE: 'ENTER_DRAWING_MODE',
+ EXIT_ANNOTATION_MODE: 'EXIT_ANNOTATION_MODE',
+ SETUP_PROJECT: 'SETUP_PROJECT',
+ DISCONNECT_PROJECT: 'DISCONNECT_PROJECT',
+ LOAD_TASKS: 'LOAD_TASKS',
+ UPDATE_TASK_STATUS: 'UPDATE_TASK_STATUS',
+ DELETE_TASK: 'DELETE_TASK',
+ GET_CONNECTION_STATUS: 'GET_CONNECTION_STATUS',
+
+ // Content script to side panel (via background)
+ TASKS_UPDATED: 'TASKS_UPDATED',
+ PROJECT_CONNECTED: 'PROJECT_CONNECTED',
+ PROJECT_DISCONNECTED: 'PROJECT_DISCONNECTED',
+ ANNOTATION_CREATED: 'ANNOTATION_CREATED',
+ CONNECTION_STATUS: 'CONNECTION_STATUS'
+ };
+
+ // All message types should be strings
+ Object.values(messageTypes).forEach(type => {
+ expect(typeof type).toBe('string');
+ expect(type.length).toBeGreaterThan(0);
+ });
+
+ // No duplicates
+ const uniqueTypes = new Set(Object.values(messageTypes));
+ expect(uniqueTypes.size).toBe(Object.values(messageTypes).length);
+ });
+});
+
+// Export runner for test execution
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = runner;
+} else {
+ window.v2ArchitectureTestRunner = runner;
+}
diff --git a/demo/index.html b/demo/index.html
index 0f80f84..3d69974 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -14,7 +14,7 @@
π» Console Output
+ +
- Moss&Mint
+ Moss & Mint
- Conact us
+ Contact us
-
@@ -75,22 +75,22 @@ We design & ship delightful products
+Select this to write a proper headline
A boutique studio crafting brand systems, websites, and frontβend builds. Seamless (mostly), fast, and a bit obsessed with details.
Type Styles
-
Awesomeness
-Strategy β design β build. Less backβandβfourth, more flow.
+Our Expertise
+End-to-end digital solutions that drive results. From strategy to launch, we make it seamless.
π¨
+
Web Design
Marketing sites and product UI with components that actually componet.
π§βπ»
+
Frontend Devlopment
Accessible, performant, and maintainble builds your team can own.
Frontend Devlopment
-
Layout review
+Layout review
Toggle the card state or nudge the layout. Notice the odd paddings and the slightly off alignment (on purpose).
@@ -134,15 +134,39 @@
- Case Study: River Co.
Packages
Transparent starting points. Every engagement is bespoke-ish.
-
diff --git a/demo/script.js b/demo/script.js
index 8135c05..26276f9 100644
--- a/demo/script.js
+++ b/demo/script.js
@@ -3,33 +3,6 @@
function qs(sel) { return document.querySelector(sel); }
function qsa(sel) { return Array.from(document.querySelectorAll(sel)); }
- // Typewriter effect for Awesomeness title
- function initTypewriter() {
- const titleEl = qs('#awesomeness-title');
- if (!titleEl) return;
-
- const text = 'Awesomeness';
- titleEl.textContent = '';
- titleEl.classList.remove('typing-complete');
-
- let index = 0;
- function typeChar() {
- if (index < text.length) {
- titleEl.textContent += text[index];
- index++;
- setTimeout(typeChar, 100); // 100ms delay between characters
- } else {
- // Typing complete, add glow effect
- titleEl.classList.add('typing-complete');
- }
- }
-
- // Start typing after a short delay
- setTimeout(typeChar, 300);
- }
-
- // Initialize typewriter on page load
- window.addEventListener('load', initTypewriter);
// Button demo: toggle color + wiggle card slightly
const bugButton = qs('#bug-button');
diff --git a/demo/styles.css b/demo/styles.css
index 2a65d70..36ae031 100644
--- a/demo/styles.css
+++ b/demo/styles.css
@@ -113,27 +113,11 @@ img { display: block; max-width: 100%; }
display: none;
}
.section-head h2.typewriter-text.typing-complete {
- animation: glow 2s ease-in-out infinite;
- text-shadow: 0 0 10px rgba(22, 163, 74, 0.5),
- 0 0 20px rgba(22, 163, 74, 0.3),
- 0 0 30px rgba(22, 163, 74, 0.2);
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
-@keyframes glow {
- 0%, 100% {
- text-shadow: 0 0 10px rgba(22, 163, 74, 0.5),
- 0 0 20px rgba(22, 163, 74, 0.3),
- 0 0 30px rgba(22, 163, 74, 0.2);
- }
- 50% {
- text-shadow: 0 0 20px rgba(22, 163, 74, 0.8),
- 0 0 30px rgba(22, 163, 74, 0.6),
- 0 0 40px rgba(22, 163, 74, 0.4);
- }
-}
.section-head p { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.feature-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: #fff; box-shadow: 0 6px 18px var(--shadow); }
@@ -146,9 +130,19 @@ img { display: block; max-width: 100%; }
display: inline-block;
font-size: 0;
}
+.feature-card .icon {
+ margin-bottom: 8px;
+ text-align: left;
+ line-height: 1;
+}
+.feature-card .icon svg {
+ width: 32px;
+ height: 32px;
+ fill: var(--brand);
+}
.feature-card h3 { margin: 10px 0 6px; font-size: 18px; letter-spacing: 0.01em; }
.feature-card.bumped { margin-top: 0; /* aligned to top */ }
-.feature-card.alt-accent { border-color: var(--brand-alt); }
+.feature-card.alt-accent { border: none; }
/* Example */
.example { padding: 46px 0; background: #fafafa; border-top: 1px solid var(--border); }
@@ -179,7 +173,9 @@ img { display: block; max-width: 100%; }
/* Pricing */
.pricing { padding: 44px 0 60px; }
-.pricing-card { max-width: 420px; margin: 0 auto; border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: #fff; box-shadow: 0 10px 26px var(--shadow); text-align: center; }
+.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
+.pricing-card { border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: #fff; box-shadow: 0 10px 26px var(--shadow); text-align: center; }
+.pricing-card.featured { border-color: var(--brand); box-shadow: 0 15px 35px rgba(22, 163, 74, 0.2); }
.price { font-size: 34px; margin: 8px 0 6px; }
.price span { color: var(--muted); font-size: 16px; }
.list { list-style: none; padding: 0; margin: 12px 0 16px; text-align: left; }
diff --git a/package-lock.json b/package-lock.json
index 005bb76..37ee9ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "moat",
- "version": "1.0.3",
+ "version": "1.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "moat",
- "version": "1.0.3",
+ "version": "1.1.0",
"license": "MIT",
"devDependencies": {
"@types/node": "^20.0.0",
@@ -58,7 +58,6 @@
"integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@@ -1662,7 +1661,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"caniuse-lite": "^1.0.30001718",
"electron-to-chromium": "^1.5.160",
Starter Website
-$8,000+ / proj
--
-
- 3β5 pages -
- Basic CMS intergration -
- 2 rounds of reviw -
+
+
+ Starter Website
+$8,000+ / proj
+-
+
- 3β5 pages +
- Basic CMS integration +
- 2 rounds of review +
+
+ Professional Website
+$15,000+ / proj
+-
+
- 5β10 pages +
- Advanced CMS integration +
- Custom animations +
- 3 rounds of review +
+
E-commerce Platform
+$25,000+ / proj
+-
+
- Full e-commerce setup +
- Payment integration +
- Inventory management +
- Admin dashboard +