@agile-vibe-coding/avc 0.1.1 → 0.3.1

package/kanban/client/src/components/kanban/EpicSection.jsx

@@ -0,0 +1,146 @@
+import { motion } from 'framer-motion';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import { KanbanColumn } from './KanbanColumn';
+import { COLUMN_ORDER, STATUS_COLUMN_MAPPING } from '../../lib/status-grouping';
+import { getStatusMetadata } from '../../lib/status-grouping';
+import { cn } from '../../lib/utils';
+
+/**
+ * Epic Section Component
+ * Displays an epic with its work items grouped by status columns
+ */
+export function EpicSection({ group, columnVisibility, onCardClick }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const { name, epic, items, columns } = group;
+  const isUngrouped = group.type === 'ungrouped';
+
+  // Calculate epic progress
+  const totalItems = items.length;
+  const completedItems = items.filter((item) => item.status === 'completed').length;
+  const progressPercentage = totalItems > 0 ? (completedItems / totalItems) * 100 : 0;
+
+  // Get epic status if available
+  const epicStatus = epic?.status;
+  const epicStatusMeta = epicStatus ? getStatusMetadata(epicStatus) : null;
+
+  return (
+    <div className="mb-8">
+      {/* Epic Header */}
+      <div
+        className={cn(
+          'mb-4 pb-4 border-b-2',
+          isUngrouped ? 'border-slate-300' : 'border-indigo-300'
+        )}
+      >
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-3 flex-1 min-w-0">
+            {/* Expand/Collapse Toggle */}
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-slate-600 hover:text-slate-900 transition-colors mt-3 flex-shrink-0"
+            >
+              {isExpanded ? (
+                <ChevronDown className="w-5 h-5" />
+              ) : (
+                <ChevronRight className="w-5 h-5" />
+              )}
+            </button>
+
+            {/* Epic Title */}
+            {epic && !isUngrouped ? (
+              <button
+                onClick={() => onCardClick?.(epic)}
+                className="flex-1 min-w-0 text-left p-3 border border-indigo-200 rounded-lg hover:border-indigo-400 hover:bg-indigo-50 transition-colors"
+                title="View epic details"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap mb-1">
+                      <span className="text-lg font-bold text-indigo-900">🏛️ {name}</span>
+                      {epicStatusMeta && (
+                        <span
+                          className={cn(
+                            'px-2 py-0.5 rounded-full text-xs font-medium',
+                            epicStatusMeta.color === 'green' && 'bg-green-100 text-green-700',
+                            epicStatusMeta.color === 'blue' && 'bg-blue-100 text-blue-700',
+                            epicStatusMeta.color === 'yellow' && 'bg-yellow-100 text-yellow-700'
+                          )}
+                        >
+                          {epicStatusMeta.icon} {epicStatusMeta.label}
+                        </span>
+                      )}
+                    </div>
+                    {epic?.description && (
+                      <p className="text-sm text-slate-500 line-clamp-2">{epic.description}</p>
+                    )}
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-indigo-400 mt-1 flex-shrink-0" />
+                </div>
+              </button>
+            ) : (
+              <div className="flex-1 py-2">
+                <h2
+                  className={cn(
+                    'text-xl font-bold',
+                    isUngrouped ? 'text-slate-600' : 'text-indigo-900'
+                  )}
+                >
+                  {isUngrouped ? '📂' : '🏛️'} {name}
+                </h2>
+              </div>
+            )}
+          </div>
+
+          {/* Progress Stats */}
+          <div className="text-right flex-shrink-0">
+            <div className="text-sm text-slate-600 mb-1">
+              {completedItems} / {totalItems} completed
+            </div>
+            {/* Progress Bar */}
+            <div className="w-48 h-2 bg-slate-200 rounded-full overflow-hidden">
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${progressPercentage}%` }}
+                transition={{ duration: 0.5, ease: 'easeOut' }}
+                className={cn(
+                  'h-full',
+                  isUngrouped ? 'bg-slate-500' : 'bg-indigo-600'
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Columns */}
+      {isExpanded && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{ duration: 0.3 }}
+          className="flex gap-4 overflow-x-auto pb-4"
+        >
+          {COLUMN_ORDER.filter((column) => columnVisibility[column]).map(
+            (columnName) => {
+              const statuses = STATUS_COLUMN_MAPPING[columnName];
+              const columnItems = columns[columnName] || [];
+
+              return (
+                <KanbanColumn
+                  key={`${group.id}-${columnName}`}
+                  columnName={columnName}
+                  statuses={statuses}
+                  workItems={columnItems}
+                  onCardClick={onCardClick}
+                />
+              );
+            }
+          )}
+        </motion.div>
+      )}
+    </div>
+  );
+}

package/kanban/client/src/components/kanban/FilterToolbar.jsx

@@ -0,0 +1,222 @@
+import { useState } from 'react';
+import { Search, RefreshCw, X, Filter, Eye, EyeOff } from 'lucide-react';
+import { useFilterStore } from '../../store/filterStore';
+import { useKanbanStore } from '../../store/kanbanStore';
+import { GroupingSelector } from './GroupingSelector';
+import { cn } from '../../lib/utils';
+
+/**
+ * Filter Toolbar Component
+ * Provides filtering controls for work items in a single compact row
+ */
+export function FilterToolbar() {
+  const [searchInput, setSearchInput] = useState('');
+
+  // Zustand stores
+  const {
+    typeFilters,
+    columnVisibility,
+    searchQuery,
+    toggleTypeFilter,
+    setAllTypeFilters,
+    toggleColumnVisibility,
+    applyPreset,
+    setSearchQuery,
+    clearSearch,
+    resetFilters,
+  } = useFilterStore();
+
+  const { refresh, loading } = useKanbanStore();
+
+  // Type filter buttons
+  const typeOptions = [
+    { key: 'epic', label: 'Epics', icon: '🏛️' },
+    { key: 'story', label: 'Stories', icon: '📖' },
+    { key: 'task', label: 'Tasks', icon: '⚙️' },
+    { key: 'subtask', label: 'Subtasks', icon: '📝' },
+  ];
+
+  // Column visibility options
+  const columnOptions = [
+    { key: 'Backlog', label: 'Backlog' },
+    { key: 'Ready', label: 'Ready' },
+    { key: 'In Progress', label: 'In Progress' },
+    { key: 'Review', label: 'Review' },
+    { key: 'Done', label: 'Done' },
+  ];
+
+  // Handle search input change (debounced)
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchInput(value);
+
+    // Simple debounce
+    clearTimeout(window.searchDebounce);
+    window.searchDebounce = setTimeout(() => {
+      setSearchQuery(value);
+    }, 300);
+  };
+
+  // Handle search clear
+  const handleClearSearch = () => {
+    setSearchInput('');
+    clearSearch();
+  };
+
+  // Check if all type filters are active
+  const allTypesActive = Object.values(typeFilters).every((v) => v);
+  const anyTypesActive = Object.values(typeFilters).some((v) => v);
+
+  return (
+    <div className="bg-white border-b border-slate-200 shadow-sm">
+      <div className="max-w-full px-4 py-2">
+        <div className="flex items-center justify-between gap-3">
+
+          {/* Left: Type Filters + Group By (single row) */}
+          <div className="flex items-center gap-2 min-w-0">
+
+            {/* Filter icon doubles as toggle-all button */}
+            <button
+              onClick={() => setAllTypeFilters(!allTypesActive)}
+              className={cn(
+                '-ml-1.5 p-1.5 rounded-md transition-colors flex-shrink-0',
+                allTypesActive
+                  ? 'text-blue-600 hover:bg-blue-50'
+                  : anyTypesActive
+                  ? 'text-slate-500 hover:bg-slate-100'
+                  : 'text-slate-400 hover:bg-slate-100'
+              )}
+              title={allTypesActive ? 'Deselect all types' : 'Select all types'}
+            >
+              <Filter className="w-4 h-4" />
+            </button>
+
+            {/* Type filter buttons */}
+            <div className="flex items-center gap-1">
+              {typeOptions.map(({ key, label, icon }) => (
+                <button
+                  key={key}
+                  onClick={() => toggleTypeFilter(key)}
+                  className={cn(
+                    'px-2.5 py-1 rounded-md text-xs font-medium transition-colors',
+                    'flex items-center gap-1',
+                    typeFilters[key]
+                      ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+                      : 'bg-slate-100 text-slate-400 hover:bg-slate-200'
+                  )}
+                >
+                  <span className="text-sm leading-none">{icon}</span>
+                  <span>{label}</span>
+                </button>
+              ))}
+            </div>
+
+            {/* Divider */}
+            <div className="w-px h-5 bg-slate-200 flex-shrink-0" />
+
+            {/* Group By inline */}
+            <GroupingSelector />
+          </div>
+
+          {/* Right: Search + Actions */}
+          <div className="flex items-center gap-2 flex-shrink-0">
+
+            {/* Column visibility dropdown */}
+            <div className="relative group">
+              <button className="px-2.5 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700 hover:bg-slate-200 transition-colors flex items-center gap-1.5">
+                <Eye className="w-3.5 h-3.5" />
+                Columns
+              </button>
+
+              {/* Dropdown menu */}
+              <div className="absolute right-0 top-full mt-2 bg-white border border-slate-200 rounded-lg shadow-lg py-2 min-w-[180px] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
+                <div className="px-3 py-2 text-xs font-semibold text-slate-500 border-b border-slate-100">
+                  COLUMN VISIBILITY
+                </div>
+                {columnOptions.map(({ key, label }) => (
+                  <button
+                    key={key}
+                    onClick={() => toggleColumnVisibility(key)}
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-slate-50 flex items-center justify-between"
+                  >
+                    <span>{label}</span>
+                    {columnVisibility[key] ? (
+                      <Eye className="w-4 h-4 text-blue-600" />
+                    ) : (
+                      <EyeOff className="w-4 h-4 text-slate-400" />
+                    )}
+                  </button>
+                ))}
+                <div className="border-t border-slate-100 mt-2 pt-2 px-3">
+                  <button
+                    onClick={() => applyPreset('all')}
+                    className="text-xs text-blue-600 hover:text-blue-700 font-medium"
+                  >
+                    Show All
+                  </button>
+                  <span className="text-slate-300 mx-2">•</span>
+                  <button
+                    onClick={() => applyPreset('active')}
+                    className="text-xs text-blue-600 hover:text-blue-700 font-medium"
+                  >
+                    Active Work
+                  </button>
+                  <span className="text-slate-300 mx-2">•</span>
+                  <button
+                    onClick={() => applyPreset('hide-completed')}
+                    className="text-xs text-blue-600 hover:text-blue-700 font-medium"
+                  >
+                    Hide Done
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Search input */}
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
+              <input
+                type="text"
+                placeholder="Search..."
+                value={searchInput}
+                onChange={handleSearchChange}
+                className="pl-8 pr-7 py-1 w-44 border border-slate-200 rounded-md text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+              {searchInput && (
+                <button
+                  onClick={handleClearSearch}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+
+            {/* Refresh button */}
+            <button
+              onClick={refresh}
+              disabled={loading}
+              className={cn(
+                'p-1.5 rounded-md transition-colors',
+                loading
+                  ? 'bg-slate-100 text-slate-400 cursor-not-allowed'
+                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+              )}
+              title="Refresh"
+            >
+              <RefreshCw className={cn('w-3.5 h-3.5', loading && 'animate-spin')} />
+            </button>
+
+            {/* Reset filters button */}
+            <button
+              onClick={resetFilters}
+              className="px-2.5 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700 hover:bg-slate-200 transition-colors"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/kanban/GroupingSelector.jsx

@@ -0,0 +1,63 @@
+import { LayoutGrid, Package, Box, ListOrdered } from 'lucide-react';
+import { useFilterStore } from '../../store/filterStore';
+import { cn } from '../../lib/utils';
+
+/**
+ * Grouping Selector Component
+ * Allows users to change how work items are grouped
+ */
+export function GroupingSelector() {
+  const { groupBy, setGroupBy } = useFilterStore();
+
+  const groupingOptions = [
+    {
+      value: 'status',
+      label: 'Status',
+      icon: LayoutGrid,
+      description: 'Traditional kanban columns',
+    },
+    {
+      value: 'epic',
+      label: 'Epic',
+      icon: Package,
+      description: 'Hierarchical epic sections',
+    },
+    {
+      value: 'type',
+      label: 'Type',
+      icon: Box,
+      description: 'Separate boards by type',
+    },
+    {
+      value: 'phase',
+      label: 'Phase',
+      icon: ListOrdered,
+      description: 'Implementation order by dependencies',
+    },
+  ];
+
+  return (
+    <div className="flex items-center gap-0.5 bg-slate-100 rounded-md p-0.5">
+      {groupingOptions.map(({ value, label, icon: Icon, description }) => {
+        const isActive = groupBy === value;
+
+        return (
+          <button
+            key={value}
+            onClick={() => setGroupBy(value)}
+            title={description}
+            className={cn(
+              'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all',
+              isActive
+                ? 'bg-white text-slate-900 shadow-sm'
+                : 'text-slate-600 hover:bg-slate-200'
+            )}
+          >
+            <Icon className="w-3.5 h-3.5" />
+            <span>{label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/kanban/client/src/components/kanban/KanbanBoard.jsx

@@ -0,0 +1,211 @@
+import { useState, useEffect, useMemo } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { KanbanColumn } from './KanbanColumn';
+import { EpicSection } from './EpicSection';
+import { useKanbanStore } from '../../store/kanbanStore';
+import { useFilterStore } from '../../store/filterStore';
+import { useGrouping } from '../../hooks/useGrouping';
+import {
+  groupItemsByColumn,
+  COLUMN_ORDER,
+  STATUS_COLUMN_MAPPING,
+} from '../../lib/status-grouping';
+
+/**
+ * Kanban Board Component
+ * Main board container with columns and filtering
+ */
+export function KanbanBoard({ onCardClick, onStartProject, projectFilesReady, onEditProjectDoc, onStartSprintPlanning, onOpenSprintPlanningSelection, sponsorCallRunning }) {
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  // Zustand stores
+  const { workItems, loading } = useKanbanStore();
+  const { typeFilters, columnVisibility, searchQuery, groupBy } = useFilterStore();
+
+  // Filter work items
+  const filteredItems = useMemo(() => {
+    // Apply type filters
+    let filtered = workItems.filter((item) => typeFilters[item.type]);
+
+    // Apply search filter
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (item) =>
+          item.name.toLowerCase().includes(query) ||
+          item.id.toLowerCase().includes(query) ||
+          (item.description && item.description.toLowerCase().includes(query)) ||
+          (item.epicName && item.epicName.toLowerCase().includes(query))
+      );
+    }
+
+    return filtered;
+  }, [workItems, typeFilters, searchQuery]);
+
+  // Group work items based on grouping mode
+  const groupedData = useGrouping(filteredItems, groupBy);
+
+  // Handle card click
+  const handleCardClick = (item) => {
+    setSelectedItem(item);
+    onCardClick?.(item);
+  };
+
+  if (loading && workItems.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-slate-600">Loading work items...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (filteredItems.length === 0 && workItems.length > 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center">
+          <div className="text-6xl mb-4">🔍</div>
+          <h3 className="text-xl font-semibold text-slate-900 mb-2">
+            No items match your filters
+          </h3>
+          <p className="text-slate-600">
+            Try adjusting your filters or search query
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (workItems.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center">
+          {onStartProject ? (
+            // Case A: project files missing, ceremony not running
+            <>
+              <div className="text-6xl mb-4">📋</div>
+              <h3 className="text-xl font-semibold text-slate-900 mb-2">No Work Items</h3>
+              <p className="text-sm text-slate-500 mb-4">Run the Sponsor Call ceremony to set up your project.</p>
+              <button
+                onClick={onStartProject}
+                className="px-5 py-2.5 text-sm font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
+              >
+                🚀 Start Project
+              </button>
+            </>
+          ) : projectFilesReady ? (
+            // Case B: files exist, ready for sprint planning (or sprint planning is running)
+            <>
+              <div className="text-5xl mb-4">🏃</div>
+              <h3 className="text-lg font-semibold text-slate-900 mb-3">Ready for Sprint Planning</h3>
+              <p className="text-sm text-slate-500 mb-2 max-w-sm">
+                Your project is set up and ready for sprint planning.
+              </p>
+              <p className="text-sm text-slate-700 font-medium mb-5 max-w-sm">
+                Review <code className="bg-slate-100 px-1 rounded text-xs">doc.md</code> before starting — this file is the foundation of every Epic and Story that will be planned.
+              </p>
+              <div className="flex items-center justify-center gap-3 mb-6">
+                <button
+                  onClick={onEditProjectDoc}
+                  className="flex items-center gap-2 px-4 py-2 text-sm font-medium border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors text-slate-700"
+                >
+                  📄 Documentation
+                </button>
+              </div>
+              {onStartSprintPlanning ? (
+                <button
+                  onClick={onStartSprintPlanning}
+                  className="px-5 py-2.5 text-sm font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
+                >
+                  🚀 Start Sprint Planning
+                </button>
+              ) : onOpenSprintPlanningSelection ? (
+                <button
+                  onClick={onOpenSprintPlanningSelection}
+                  className="flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors animate-pulse"
+                >
+                  <span>⚠</span>
+                  Sprint planning needs your input
+                </button>
+              ) : (
+                <p className="text-xs text-slate-400">Sprint planning is running…</p>
+              )}
+            </>
+          ) : sponsorCallRunning ? (
+            // Case C: no project files yet, sponsor call ceremony is running
+            <>
+              <div className="text-5xl mb-4">📋</div>
+              <h3 className="text-lg font-semibold text-slate-900 mb-3">Sponsor Call is running…</h3>
+              <p className="text-sm text-slate-500 max-w-sm">
+                The Sponsor Call ceremony is generating your project definition. Work items will appear here once it completes.
+              </p>
+            </>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  // Render based on grouping mode
+  if (groupedData.mode === 'sections') {
+    // Epic or Type grouping - render sections
+    return (
+      <motion.div
+        key={groupBy}
+        initial={{ opacity: 0, x: -20 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: 20 }}
+        transition={{ duration: 0.3 }}
+      >
+        {groupedData.groups.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-slate-600">No groups to display</p>
+          </div>
+        ) : (
+          groupedData.groups.map((group, index) => (
+            <motion.div
+              key={group.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: index * 0.1 }}
+            >
+              <EpicSection
+                group={group}
+                columnVisibility={columnVisibility}
+                onCardClick={handleCardClick}
+              />
+            </motion.div>
+          ))
+        )}
+      </motion.div>
+    );
+  }
+
+  // Default: Status grouping - render columns
+  return (
+    <motion.div
+      key={groupBy}
+      initial={{ opacity: 0, x: -20 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: 20 }}
+      transition={{ duration: 0.3 }}
+      className="flex gap-4 overflow-x-auto pb-4"
+    >
+      <AnimatePresence mode="sync">
+        {groupedData.groups
+          .filter((group) => columnVisibility[group.name])
+          .map((group) => (
+            <KanbanColumn
+              key={group.id}
+              columnName={group.name}
+              statuses={STATUS_COLUMN_MAPPING[group.name]}
+              workItems={group.items}
+              onCardClick={handleCardClick}
+            />
+          ))}
+      </AnimatePresence>
+    </motion.div>
+  );
+}