@agile-vibe-coding/avc 0.1.1 → 0.3.1

package/kanban/client/src/hooks/useWebSocket.js

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useCallback, useState } from 'react';
+
+// Module-level constant — window.location.host never changes during a session
+const WS_URL = import.meta.env.VITE_WS_URL || `ws://${window.location.host}/ws`;
+
+const MAX_RECONNECT_ATTEMPTS = 5;
+const RECONNECT_DELAY = 2000;
+
+/**
+ * WebSocket hook for real-time updates.
+ *
+ * Returns wsStatus: 'connecting' | 'connected' | 'disconnected'
+ * Callbacks are stored in refs so connect() is stable and the effect
+ * only runs once (no infinite reconnect loop from inline callbacks).
+ */
+export function useWebSocket(options = {}) {
+  const { onMessage, onConnected, onDisconnected, onError } = options;
+
+  const [wsStatus, setWsStatus] = useState('connecting');
+
+  const wsRef = useRef(null);
+  const reconnectTimeoutRef = useRef(null);
+  const reconnectAttempts = useRef(0);
+
+  // Stable refs — updated every render without triggering reconnects
+  const onMessageRef = useRef(onMessage);
+  const onConnectedRef = useRef(onConnected);
+  const onDisconnectedRef = useRef(onDisconnected);
+  const onErrorRef = useRef(onError);
+  onMessageRef.current = onMessage;
+  onConnectedRef.current = onConnected;
+  onDisconnectedRef.current = onDisconnected;
+  onErrorRef.current = onError;
+
+  const connect = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return; // Already connected
+    }
+
+    try {
+      const ws = new WebSocket(WS_URL);
+
+      ws.onopen = () => {
+        console.log('WebSocket connected');
+        reconnectAttempts.current = 0;
+        setWsStatus('connected');
+        onConnectedRef.current?.();
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          onMessageRef.current?.(data);
+        } catch (error) {
+          console.error('WebSocket message parse error:', error);
+        }
+      };
+
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        onErrorRef.current?.(error);
+      };
+
+      ws.onclose = () => {
+        console.log('WebSocket disconnected');
+        wsRef.current = null;
+        onDisconnectedRef.current?.();
+
+        if (reconnectAttempts.current < MAX_RECONNECT_ATTEMPTS) {
+          reconnectAttempts.current++;
+          console.log(`Reconnecting... (attempt ${reconnectAttempts.current})`);
+          setWsStatus('connecting');
+          reconnectTimeoutRef.current = setTimeout(connect, RECONNECT_DELAY);
+        } else {
+          console.error('Max reconnection attempts reached');
+          setWsStatus('disconnected');
+        }
+      };
+
+      wsRef.current = ws;
+    } catch (error) {
+      console.error('WebSocket connection error:', error);
+      onErrorRef.current?.(error);
+    }
+  }, []); // No callback deps — refs keep them current without recreating connect
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+  }, []);
+
+  const send = useCallback((data) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(data));
+    } else {
+      console.warn('WebSocket not connected, cannot send message');
+    }
+  }, []);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      disconnect();
+    };
+  }, [connect, disconnect]); // both stable — effect runs exactly once
+
+  return {
+    wsStatus,
+    send,
+    disconnect,
+    reconnect: connect,
+  };
+}

package/kanban/client/src/lib/__tests__/api.test.js

@@ -0,0 +1,196 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import {
+  getHealth,
+  getStats,
+  getWorkItems,
+  getWorkItemsGrouped,
+  getWorkItem,
+  getWorkItemDoc,
+} from '../api';
+
+// Mock fetch globally
+global.fetch = vi.fn();
+
+describe('api', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('getHealth', () => {
+    it('should fetch health status successfully', async () => {
+      const mockResponse = { status: 'ok', uptime: 12345 };
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockResponse,
+      });
+
+      const result = await getHealth();
+
+      expect(fetch).toHaveBeenCalledWith('/api/health', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should throw error when fetch fails', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: false,
+        status: 500,
+        statusText: 'Internal Server Error',
+        json: async () => ({ error: 'Server error' }),
+      });
+
+      await expect(getHealth()).rejects.toThrow();
+    });
+  });
+
+  describe('getStats', () => {
+    it('should fetch statistics successfully', async () => {
+      const mockStats = {
+        totalItems: 42,
+        byStatus: { planned: 10, implementing: 15 },
+        byType: { epic: 5, story: 20 },
+      };
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockStats,
+      });
+
+      const result = await getStats();
+
+      expect(fetch).toHaveBeenCalledWith('/api/stats', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockStats);
+    });
+  });
+
+  describe('getWorkItems', () => {
+    it('should fetch work items without filters', async () => {
+      const mockItems = [
+        { id: 'EPIC-001', type: 'epic', status: 'implementing' },
+        { id: 'STORY-001', type: 'story', status: 'ready' },
+      ];
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockItems,
+      });
+
+      const result = await getWorkItems();
+
+      expect(fetch).toHaveBeenCalledWith('/api/work-items', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockItems);
+    });
+
+    it('should fetch work items with type filter', async () => {
+      const mockItems = [{ id: 'EPIC-001', type: 'epic', status: 'implementing' }];
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockItems,
+      });
+
+      const result = await getWorkItems({ type: 'epic' });
+
+      expect(fetch).toHaveBeenCalledWith('/api/work-items?type=epic', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockItems);
+    });
+
+    it('should fetch work items with multiple filters', async () => {
+      const mockItems = [{ id: 'STORY-001', type: 'story', status: 'ready' }];
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockItems,
+      });
+
+      const result = await getWorkItems({ type: 'story', status: 'ready' });
+
+      expect(fetch).toHaveBeenCalledWith('/api/work-items?type=story&status=ready', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockItems);
+    });
+  });
+
+  describe('getWorkItemsGrouped', () => {
+    it('should fetch grouped work items', async () => {
+      const mockGrouped = {
+        Backlog: [{ id: 'STORY-001', status: 'planned' }],
+        Ready: [{ id: 'STORY-002', status: 'ready' }],
+      };
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockGrouped,
+      });
+
+      const result = await getWorkItemsGrouped();
+
+      expect(fetch).toHaveBeenCalledWith('/api/work-items/grouped', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockGrouped);
+    });
+  });
+
+  describe('getWorkItem', () => {
+    it('should fetch single work item successfully', async () => {
+      const mockItem = {
+        id: 'EPIC-001',
+        type: 'epic',
+        name: 'Test Epic',
+        status: 'implementing',
+      };
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockItem,
+      });
+
+      const result = await getWorkItem('EPIC-001');
+
+      expect(fetch).toHaveBeenCalledWith('/api/work-items/EPIC-001', {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      expect(result).toEqual(mockItem);
+    });
+
+    it('should throw error for non-existent work item', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: false,
+        status: 404,
+        statusText: 'Not Found',
+        json: async () => ({ error: 'Not found' }),
+      });
+
+      await expect(getWorkItem('NONEXISTENT')).rejects.toThrow();
+    });
+  });
+
+  describe('getWorkItemDoc', () => {
+    it('should fetch work item documentation', async () => {
+      const mockDoc = '# Epic Documentation\n\nDetails here...';
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        text: async () => mockDoc,
+      });
+
+      const result = await getWorkItemDoc('EPIC-001');
+
+      expect(result).toBe(mockDoc);
+    });
+
+    it('should return empty string when doc not found', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: false,
+        status: 404,
+      });
+
+      const result = await getWorkItemDoc('EPIC-001');
+
+      expect(result).toBe('');
+    });
+  });
+
+});

package/kanban/client/src/lib/__tests__/status-grouping.test.js

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest';
+import {
+  STATUS_COLUMN_MAPPING,
+  STATUS_METADATA,
+  COLUMN_ORDER,
+  getColumnForStatus,
+  getStatusMetadata,
+  groupItemsByColumn,
+  getColumnStats,
+} from '../status-grouping';
+
+describe('status-grouping', () => {
+  describe('getColumnForStatus', () => {
+    it('should return correct column for each status', () => {
+      expect(getColumnForStatus('planned')).toBe('Backlog');
+      expect(getColumnForStatus('pending')).toBe('Backlog');
+      expect(getColumnForStatus('ready')).toBe('Ready');
+      expect(getColumnForStatus('implementing')).toBe('In Progress');
+      expect(getColumnForStatus('feedback')).toBe('In Progress');
+      expect(getColumnForStatus('implemented')).toBe('Review');
+      expect(getColumnForStatus('testing')).toBe('Review');
+      expect(getColumnForStatus('completed')).toBe('Done');
+    });
+
+    it('should return null for unknown status', () => {
+      expect(getColumnForStatus('unknown')).toBeNull();
+    });
+  });
+
+  describe('getStatusMetadata', () => {
+    it('should return metadata for valid status', () => {
+      const metadata = getStatusMetadata('ready');
+      expect(metadata).toHaveProperty('color');
+      expect(metadata).toHaveProperty('icon');
+      expect(metadata).toHaveProperty('label');
+      expect(metadata.color).toBe('blue');
+      expect(metadata.label).toBe('Ready');
+    });
+
+    it('should return null for unknown status', () => {
+      expect(getStatusMetadata('unknown')).toBeNull();
+    });
+  });
+
+  describe('groupItemsByColumn', () => {
+    it('should group items by column correctly', () => {
+      const workItems = [
+        { id: '1', status: 'planned' },
+        { id: '2', status: 'ready' },
+        { id: '3', status: 'implementing' },
+        { id: '4', status: 'completed' },
+        { id: '5', status: 'pending' },
+      ];
+
+      const grouped = groupItemsByColumn(workItems);
+
+      expect(grouped.Backlog).toHaveLength(2);
+      expect(grouped.Ready).toHaveLength(1);
+      expect(grouped['In Progress']).toHaveLength(1);
+      expect(grouped.Review).toHaveLength(0);
+      expect(grouped.Done).toHaveLength(1);
+    });
+
+    it('should initialize all columns as empty arrays', () => {
+      const grouped = groupItemsByColumn([]);
+
+      COLUMN_ORDER.forEach((column) => {
+        expect(grouped[column]).toEqual([]);
+      });
+    });
+  });
+
+  describe('getColumnStats', () => {
+    it('should calculate correct statistics', () => {
+      const workItems = [
+        { status: 'planned' },
+        { status: 'planned' },
+        { status: 'pending' },
+      ];
+
+      const stats = getColumnStats(workItems);
+
+      expect(stats.total).toBe(3);
+      expect(stats.byStatus.planned).toBe(2);
+      expect(stats.byStatus.pending).toBe(1);
+    });
+
+    it('should handle empty array', () => {
+      const stats = getColumnStats([]);
+      expect(stats.total).toBe(0);
+      expect(stats.byStatus).toEqual({});
+    });
+  });
+});