@agile-vibe-coding/avc 0.1.1 → 0.3.1

package/kanban/client/src/components/ui/dialog.jsx

@@ -0,0 +1,121 @@
+import { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+/**
+ * Dialog Component (shadcn/ui style)
+ * Modal dialog with backdrop and animations
+ */
+export function Dialog({ open, onOpenChange, children }) {
+  // Close on Escape key
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape' && open) {
+        onOpenChange(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [open, onOpenChange]);
+
+  // Prevent body scroll when dialog is open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [open]);
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => onOpenChange(false)}
+            className="fixed inset-0 bg-black/50 z-50"
+          />
+
+          {/* Dialog Container */}
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            {children}
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/**
+ * Dialog Content
+ */
+export function DialogContent({ className, children, onClose }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95, y: 20 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95, y: 20 }}
+      transition={{ duration: 0.2 }}
+      onClick={(e) => e.stopPropagation()}
+      className={cn(
+        'relative bg-white rounded-lg shadow-xl max-w-4xl w-full h-[90vh] overflow-hidden',
+        'flex flex-col',
+        className
+      )}
+    >
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 transition-opacity z-10"
+      >
+        <X className="h-5 w-5" />
+        <span className="sr-only">Close</span>
+      </button>
+
+      {children}
+    </motion.div>
+  );
+}
+
+/**
+ * Dialog Header
+ */
+export function DialogHeader({ className, children }) {
+  return (
+    <div className={cn('flex flex-col space-y-1.5 px-6 pt-6 pb-4', className)}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Dialog Title
+ */
+export function DialogTitle({ className, children }) {
+  return (
+    <h2 className={cn('text-2xl font-semibold leading-none tracking-tight', className)}>
+      {children}
+    </h2>
+  );
+}
+
+/**
+ * Dialog Description
+ */
+export function DialogDescription({ className, children }) {
+  return (
+    <p className={cn('text-sm text-slate-600', className)}>
+      {children}
+    </p>
+  );
+}

package/kanban/client/src/components/ui/tabs.jsx

@@ -0,0 +1,85 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { cn } from '../../lib/utils';
+
+/**
+ * Tabs Component (shadcn/ui style)
+ * Tabbed interface with keyboard navigation
+ */
+
+const TabsContext = createContext();
+
+export function Tabs({ defaultValue, value, onValueChange, children, className }) {
+  const [selectedTab, setSelectedTab] = useState(value || defaultValue);
+
+  // Sync internal state when controlled value prop changes
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedTab(value);
+    }
+  }, [value]);
+
+  const handleTabChange = (newValue) => {
+    setSelectedTab(newValue);
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabsContext.Provider value={{ selectedTab, setSelectedTab: handleTabChange }}>
+      <div className={cn('w-full', className)}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ className, children }) {
+  return (
+    <div
+      className={cn(
+        'inline-flex h-10 items-center justify-start rounded-md bg-slate-100 p-1 text-slate-600',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({ value, children, className }) {
+  const { selectedTab, setSelectedTab } = useContext(TabsContext);
+  const isSelected = selectedTab === value;
+
+  return (
+    <button
+      onClick={() => setSelectedTab(value)}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5',
+        'text-sm font-medium ring-offset-white transition-all',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        isSelected
+          ? 'bg-white text-slate-900 shadow-sm'
+          : 'text-slate-600 hover:bg-slate-200',
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ value, children, className }) {
+  const { selectedTab } = useContext(TabsContext);
+
+  if (selectedTab !== value) return null;
+
+  return (
+    <div
+      className={cn(
+        'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2',
+        'focus-visible:ring-slate-950 focus-visible:ring-offset-2',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/kanban/client/src/hooks/__tests__/useGrouping.test.js

@@ -0,0 +1,232 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useGrouping } from '../useGrouping';
+
+describe('useGrouping', () => {
+  const mockWorkItems = [
+    {
+      id: 'EPIC-001',
+      type: 'epic',
+      name: 'Epic 1',
+      status: 'implementing',
+      epicId: 'EPIC-001',
+      epicName: 'Epic 1',
+    },
+    {
+      id: 'STORY-001',
+      type: 'story',
+      name: 'Story 1',
+      status: 'ready',
+      epicId: 'EPIC-001',
+      epicName: 'Epic 1',
+    },
+    {
+      id: 'EPIC-002',
+      type: 'epic',
+      name: 'Epic 2',
+      status: 'planned',
+      epicId: 'EPIC-002',
+      epicName: 'Epic 2',
+    },
+    {
+      id: 'STORY-002',
+      type: 'story',
+      name: 'Story 2',
+      status: 'planned',
+      epicId: 'EPIC-002',
+      epicName: 'Epic 2',
+    },
+    {
+      id: 'TASK-001',
+      type: 'task',
+      name: 'Task 1',
+      status: 'completed',
+      epicId: null,
+      epicName: null,
+    },
+  ];
+
+  describe('groupBy: status', () => {
+    it('should group by status columns', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'status'));
+
+      expect(result.current.mode).toBe('columns');
+      expect(result.current.groups).toHaveLength(5); // 5 columns
+
+      const columnNames = result.current.groups.map((g) => g.name);
+      expect(columnNames).toEqual(['Backlog', 'Ready', 'In Progress', 'Review', 'Done']);
+    });
+
+    it('should distribute items to correct columns', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'status'));
+
+      const backlog = result.current.groups.find((g) => g.name === 'Backlog');
+      const ready = result.current.groups.find((g) => g.name === 'Ready');
+      const inProgress = result.current.groups.find((g) => g.name === 'In Progress');
+      const done = result.current.groups.find((g) => g.name === 'Done');
+
+      expect(backlog.items).toHaveLength(2); // EPIC-002, STORY-002 (planned)
+      expect(ready.items).toHaveLength(1); // STORY-001 (ready)
+      expect(inProgress.items).toHaveLength(1); // EPIC-001 (implementing)
+      expect(done.items).toHaveLength(1); // TASK-001 (completed)
+    });
+
+    it('should have column structure with id and name', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'status'));
+
+      result.current.groups.forEach((group) => {
+        expect(group).toHaveProperty('id');
+        expect(group).toHaveProperty('name');
+        expect(group).toHaveProperty('items');
+        expect(Array.isArray(group.items)).toBe(true);
+      });
+    });
+  });
+
+  describe('groupBy: epic', () => {
+    it('should group by epic with sections mode', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'epic'));
+
+      expect(result.current.mode).toBe('sections');
+      expect(result.current.groups.length).toBeGreaterThan(0);
+    });
+
+    it('should create section for each epic', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'epic'));
+
+      const epicNames = result.current.groups.map((g) => g.name);
+      expect(epicNames).toContain('Epic 1');
+      expect(epicNames).toContain('Epic 2');
+    });
+
+    it('should group items without epic into "No Epic" section', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'epic'));
+
+      const noEpicGroup = result.current.groups.find((g) => g.type === 'ungrouped');
+      expect(noEpicGroup).toBeDefined();
+      expect(noEpicGroup.items).toHaveLength(1); // TASK-001
+    });
+
+    it('should include epic object in group', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'epic'));
+
+      const epic1Group = result.current.groups.find((g) => g.name === 'Epic 1');
+      expect(epic1Group.epic).toBeDefined();
+      expect(epic1Group.epic.id).toBe('EPIC-001');
+    });
+
+    it('should distribute items into columns within each epic', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'epic'));
+
+      const epic1Group = result.current.groups.find((g) => g.name === 'Epic 1');
+      expect(epic1Group.columns).toBeDefined();
+      expect(epic1Group.columns.Ready).toHaveLength(1); // STORY-001
+      expect(epic1Group.columns['In Progress']).toHaveLength(1); // EPIC-001
+    });
+  });
+
+  describe('groupBy: type', () => {
+    it('should group by type with sections mode', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'type'));
+
+      expect(result.current.mode).toBe('sections');
+    });
+
+    it('should create section for each type', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'type'));
+
+      const typeNames = result.current.groups.map((g) => g.name);
+      expect(typeNames).toContain('Epics');
+      expect(typeNames).toContain('Stories');
+      expect(typeNames).toContain('Tasks');
+    });
+
+    it('should distribute items into correct type sections', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'type'));
+
+      const epicsGroup = result.current.groups.find((g) => g.name === 'Epics');
+      const storiesGroup = result.current.groups.find((g) => g.name === 'Stories');
+      const tasksGroup = result.current.groups.find((g) => g.name === 'Tasks');
+
+      expect(epicsGroup.items).toHaveLength(2); // EPIC-001, EPIC-002
+      expect(storiesGroup.items).toHaveLength(2); // STORY-001, STORY-002
+      expect(tasksGroup.items).toHaveLength(1); // TASK-001
+    });
+
+    it('should distribute items into columns within each type', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'type'));
+
+      const epicsGroup = result.current.groups.find((g) => g.name === 'Epics');
+      expect(epicsGroup.columns).toBeDefined();
+      expect(epicsGroup.columns.Backlog).toHaveLength(1); // EPIC-002 (planned)
+      expect(epicsGroup.columns['In Progress']).toHaveLength(1); // EPIC-001 (implementing)
+
+      const storiesGroup = result.current.groups.find((g) => g.name === 'Stories');
+      expect(storiesGroup.columns).toBeDefined();
+      expect(storiesGroup.columns.Backlog).toHaveLength(1); // STORY-002 (planned)
+      expect(storiesGroup.columns.Ready).toHaveLength(1); // STORY-001 (ready)
+    });
+  });
+
+  describe('memoization', () => {
+    it('should return same reference when inputs unchanged', () => {
+      const { result, rerender } = renderHook(
+        ({ items, groupBy }) => useGrouping(items, groupBy),
+        { initialProps: { items: mockWorkItems, groupBy: 'status' } }
+      );
+
+      const firstResult = result.current;
+      rerender({ items: mockWorkItems, groupBy: 'status' });
+      const secondResult = result.current;
+
+      expect(firstResult).toBe(secondResult);
+    });
+
+    it('should recalculate when groupBy changes', () => {
+      const { result, rerender } = renderHook(
+        ({ items, groupBy }) => useGrouping(items, groupBy),
+        { initialProps: { items: mockWorkItems, groupBy: 'status' } }
+      );
+
+      const statusResult = result.current;
+      rerender({ items: mockWorkItems, groupBy: 'epic' });
+      const epicResult = result.current;
+
+      expect(statusResult).not.toBe(epicResult);
+      expect(statusResult.mode).toBe('columns');
+      expect(epicResult.mode).toBe('sections');
+    });
+
+    it('should recalculate when items change', () => {
+      const { result, rerender } = renderHook(
+        ({ items, groupBy }) => useGrouping(items, groupBy),
+        { initialProps: { items: mockWorkItems, groupBy: 'status' } }
+      );
+
+      const firstResult = result.current;
+      const newItems = [...mockWorkItems, { id: 'NEW-001', status: 'ready' }];
+      rerender({ items: newItems, groupBy: 'status' });
+      const secondResult = result.current;
+
+      expect(firstResult).not.toBe(secondResult);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty work items array', () => {
+      const { result } = renderHook(() => useGrouping([], 'status'));
+
+      expect(result.current.groups).toHaveLength(5);
+      result.current.groups.forEach((group) => {
+        expect(group.items).toEqual([]);
+      });
+    });
+
+    it('should handle unknown groupBy value by defaulting to status', () => {
+      const { result } = renderHook(() => useGrouping(mockWorkItems, 'unknown'));
+
+      expect(result.current.mode).toBe('columns');
+      expect(result.current.groups).toHaveLength(5);
+    });
+  });
+});

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

@@ -0,0 +1,177 @@
+import { useMemo } from 'react';
+import { groupItemsByColumn, COLUMN_ORDER } from '../lib/status-grouping';
+
+/**
+ * Grouping Hook
+ * Handles different grouping strategies for work items
+ */
+export function useGrouping(workItems, groupBy) {
+  return useMemo(() => {
+    switch (groupBy) {
+      case 'status':
+        return groupByStatus(workItems);
+      case 'epic':
+        return groupByEpic(workItems);
+      case 'type':
+        return groupByType(workItems);
+      case 'phase':
+        return groupByPhase(workItems);
+      default:
+        return groupByStatus(workItems);
+    }
+  }, [workItems, groupBy]);
+}
+
+/**
+ * Group by status (default kanban columns)
+ */
+function groupByStatus(workItems) {
+  const grouped = groupItemsByColumn(workItems);
+
+  return {
+    mode: 'columns',
+    groups: COLUMN_ORDER.map((columnName) => ({
+      id: columnName,
+      name: columnName,
+      items: grouped[columnName] || [],
+      type: 'column',
+    })),
+  };
+}
+
+/**
+ * Group by epic (hierarchical sections)
+ */
+function groupByEpic(workItems) {
+  // Get all epics
+  const epics = workItems.filter((item) => item.type === 'epic');
+
+  // Group items by epic
+  const groups = epics.map((epic) => {
+    // Get all descendants of this epic
+    const epicItems = workItems.filter(
+      (item) => item.epicId === epic.id
+    );
+
+    // Group epic's items by column
+    const columns = groupItemsByColumn(epicItems);
+
+    return {
+      id: epic.id,
+      name: epic.name,
+      epic: epic,
+      items: epicItems,
+      columns: columns,
+      type: 'epic',
+    };
+  });
+
+  // Add ungrouped items (items without an epic)
+  const ungroupedItems = workItems.filter(
+    (item) => !item.epicId && item.type !== 'epic'
+  );
+
+  if (ungroupedItems.length > 0) {
+    const columns = groupItemsByColumn(ungroupedItems);
+    groups.push({
+      id: 'ungrouped',
+      name: 'No Epic',
+      items: ungroupedItems,
+      columns: columns,
+      type: 'ungrouped',
+    });
+  }
+
+  return {
+    mode: 'sections',
+    groups,
+  };
+}
+
+/**
+ * Group by type (separate boards for each type)
+ */
+function groupByType(workItems) {
+  const types = [
+    { id: 'epic', name: 'Epics' },
+    { id: 'story', name: 'Stories' },
+    { id: 'task', name: 'Tasks' },
+    { id: 'subtask', name: 'Subtasks' },
+  ];
+
+  const groups = types.map((type) => {
+    const typeItems = workItems.filter((item) => item.type === type.id);
+    const columns = groupItemsByColumn(typeItems);
+
+    return {
+      id: type.id,
+      name: type.name,
+      items: typeItems,
+      columns: columns,
+      type: 'type',
+    };
+  });
+
+  // Filter out empty groups
+  return {
+    mode: 'sections',
+    groups: groups.filter((group) => group.items.length > 0),
+  };
+}
+
+/**
+ * Group by implementation phase (coding order)
+ */
+function groupByPhase(workItems) {
+  // Collect all phases from metadata
+  const phaseMap = new Map(); // phase number → items
+  const unphased = [];
+
+  for (const item of workItems) {
+    const phase = item.metadata?.codingPhase;
+    if (phase != null) {
+      if (!phaseMap.has(phase)) phaseMap.set(phase, []);
+      phaseMap.get(phase).push(item);
+    } else {
+      unphased.push(item);
+    }
+  }
+
+  // Sort phases numerically
+  const sortedPhases = [...phaseMap.entries()].sort((a, b) => a[0] - b[0]);
+
+  const groups = sortedPhases.map(([phase, items]) => {
+    // Sort items within phase by codingOrder
+    items.sort((a, b) => (a.metadata?.codingOrder ?? 0) - (b.metadata?.codingOrder ?? 0));
+    const columns = groupItemsByColumn(items);
+
+    // Find epic names in this phase for the label
+    const epicNames = [...new Set(items.filter(i => i.type === 'epic').map(i => i.name))];
+    const label = epicNames.length > 0
+      ? `Phase ${phase}: ${epicNames.join(', ')}`
+      : `Phase ${phase}`;
+
+    return {
+      id: `phase-${phase}`,
+      name: label,
+      items,
+      columns,
+      type: 'phase',
+    };
+  });
+
+  if (unphased.length > 0) {
+    groups.push({
+      id: 'unphased',
+      name: 'No Phase',
+      items: unphased,
+      columns: groupItemsByColumn(unphased),
+      type: 'ungrouped',
+    });
+  }
+
+  return {
+    mode: 'sections',
+    groups,
+  };
+}