@agile-vibe-coding/avc 0.1.1 → 0.2.3

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({});
+    });
+  });
+});

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

@@ -0,0 +1,401 @@
+/**
+ * API Client for AVC Kanban Board
+ * Communicates with the backend Express server
+ */
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
+
+/**
+ * Fetch wrapper with error handling
+ * @param {string} endpoint - API endpoint (relative to /api)
+ * @param {object} options - Fetch options
+ * @returns {Promise<any>} Response data
+ */
+async function apiFetch(endpoint, options = {}) {
+  const url = `${API_BASE_URL}${endpoint}`;
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || `HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error(`API Error [${endpoint}]:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Get health check status
+ * @returns {Promise<object>} Health status
+ */
+export async function getHealth() {
+  return apiFetch('/health');
+}
+
+/**
+ * Get statistics (counts by status/type)
+ * @returns {Promise<object>} Statistics
+ */
+export async function getStats() {
+  return apiFetch('/stats');
+}
+
+/**
+ * Get all work items
+ * @param {object} filters - Filter options
+ * @param {string} filters.type - Filter by type (comma-separated: epic,story,task,subtask)
+ * @param {string} filters.status - Filter by status (comma-separated)
+ * @param {string} filters.search - Search query
+ * @returns {Promise<object>} Work items data
+ */
+export async function getWorkItems(filters = {}) {
+  const params = new URLSearchParams();
+
+  if (filters.type) {
+    params.append('type', filters.type);
+  }
+  if (filters.status) {
+    params.append('status', filters.status);
+  }
+  if (filters.search) {
+    params.append('search', filters.search);
+  }
+
+  const query = params.toString();
+  const endpoint = query ? `/work-items?${query}` : '/work-items';
+
+  return apiFetch(endpoint);
+}
+
+/**
+ * Get work items grouped by column
+ * @returns {Promise<object>} Grouped work items
+ */
+export async function getWorkItemsGrouped() {
+  return apiFetch('/work-items/grouped');
+}
+
+/**
+ * Get single work item with full details
+ * @param {string} id - Work item ID
+ * @returns {Promise<object>} Work item details
+ */
+export async function getWorkItem(id) {
+  return apiFetch(`/work-items/${id}`);
+}
+
+/**
+ * Get rendered documentation (doc.md) as HTML
+ * @param {string} id - Work item ID
+ * @returns {Promise<string>} HTML content or empty string if not found
+ */
+export async function getWorkItemDoc(id) {
+  const url = `${API_BASE_URL}/work-items/${id}/doc`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    return ''; // Return empty string on error (404, etc.)
+  }
+
+  return await response.text();
+}
+
+/**
+ * Get raw markdown source of doc.md
+ * @param {string} id - Work item ID
+ * @returns {Promise<string>} Raw markdown or empty string if not found
+ */
+export async function getWorkItemDocRaw(id) {
+  const url = `${API_BASE_URL}/work-items/${id}/doc/raw`;
+  const response = await fetch(url);
+  if (!response.ok) return '';
+  return await response.text();
+}
+
+/**
+ * Save updated markdown to doc.md
+ * @param {string} id - Work item ID
+ * @param {string} content - Markdown content
+ */
+export async function updateWorkItemDoc(id, content) {
+  return apiFetch(`/work-items/${id}/doc`, {
+    method: 'PUT',
+    body: JSON.stringify({ content }),
+  });
+}
+
+// ── Board settings ───────────────────────────────────────────────────────────
+
+/**
+ * Get board title from avc.json (falls back to 'AVC Kanban Board')
+ */
+export async function getBoardTitle() {
+  const data = await apiFetch('/settings/title');
+  return data.title || 'AVC Kanban Board';
+}
+
+export async function getDocsUrl() {
+  const data = await apiFetch('/settings/docs-url');
+  return data.url || 'http://localhost:4173';
+}
+
+/**
+ * Save board title to avc.json
+ */
+export async function updateBoardTitle(title) {
+  return apiFetch('/settings/title', {
+    method: 'PUT',
+    body: JSON.stringify({ title }),
+  });
+}
+
+// ── Project-level (root) files ──────────────────────────────────────────────
+
+export async function getProjectDoc() {
+  const url = `${API_BASE_URL}/project/doc`;
+  const response = await fetch(url);
+  if (!response.ok) return '';
+  return response.text();
+}
+
+export async function getProjectDocRaw() {
+  const url = `${API_BASE_URL}/project/doc/raw`;
+  const response = await fetch(url);
+  if (!response.ok) return '';
+  return response.text();
+}
+
+export async function updateProjectDoc(content) {
+  return apiFetch('/project/doc', { method: 'PUT', body: JSON.stringify({ content }) });
+}
+
+export async function getProjectStatus() {
+  return apiFetch('/project/status');
+}
+
+// ── Settings API ─────────────────────────────────────────────────────────────
+
+export async function getSettings() {
+  return apiFetch('/settings');
+}
+
+export async function saveApiKeys(keys) {
+  return apiFetch('/settings/api-keys', { method: 'PUT', body: JSON.stringify(keys) });
+}
+
+export async function saveCeremonies(ceremonies, missionGenerator) {
+  return apiFetch('/settings/ceremonies', { method: 'PUT', body: JSON.stringify({ ceremonies, missionGenerator }) });
+}
+
+export async function saveGeneralSettings(data) {
+  return apiFetch('/settings/general', { method: 'PUT', body: JSON.stringify(data) });
+}
+
+export async function saveModelPricing(models) {
+  return apiFetch('/settings/models', { method: 'PUT', body: JSON.stringify({ models }) });
+}
+
+export async function saveCostThresholds(thresholds) {
+  return apiFetch('/settings/cost-thresholds', { method: 'PUT', body: JSON.stringify({ thresholds }) });
+}
+
+// ── Ceremony API ─────────────────────────────────────────────────────────────
+
+export async function getCeremonyStatus() {
+  return apiFetch('/ceremony/status');
+}
+
+export async function analyzeDatabase(mission, scope, strategy) {
+  return apiFetch('/ceremony/analyze/database', {
+    method: 'POST',
+    body: JSON.stringify({ mission, scope, strategy }),
+  });
+}
+
+export async function analyzeArchitecture(mission, scope, dbContext, strategy) {
+  return apiFetch('/ceremony/analyze/architecture', {
+    method: 'POST',
+    body: JSON.stringify({ mission, scope, dbContext, strategy }),
+  });
+}
+
+export async function prefillAnswers(mission, scope, arch, dbContext, strategy) {
+  return apiFetch('/ceremony/analyze/prefill', {
+    method: 'POST',
+    body: JSON.stringify({ mission, scope, arch, dbContext, strategy }),
+  });
+}
+
+export async function runCeremony(requirements) {
+  return apiFetch('/ceremony/run', {
+    method: 'POST',
+    body: JSON.stringify({ requirements }),
+  });
+}
+
+export async function runSprintPlanning() {
+  return apiFetch('/ceremony/sprint-planning/run', { method: 'POST' });
+}
+
+export const confirmSprintPlanningSelection = (selectedEpicIds, selectedStoryIds) =>
+  apiFetch('/ceremony/sprint-planning/confirm-selection', {
+    method: 'POST',
+    body: JSON.stringify({ selectedEpicIds, selectedStoryIds }),
+  });
+
+export const pauseCeremony           = () => apiFetch('/ceremony/pause',              { method: 'POST' });
+export const resumeCeremony          = () => apiFetch('/ceremony/resume',             { method: 'POST' });
+export const cancelCeremony          = () => apiFetch('/ceremony/cancel',             { method: 'POST' });
+export const resetCeremony           = () => apiFetch('/ceremony/reset',              { method: 'POST' });
+export const continuePastCostLimit   = () => apiFetch('/ceremony/cost-limit-continue', { method: 'POST' });
+
+export async function getModels() {
+  return apiFetch('/ceremony/models');
+}
+
+export async function generateMission(description, modelId, provider, validatorModelId, validatorProvider) {
+  return apiFetch('/ceremony/generate-mission', {
+    method: 'POST',
+    body: JSON.stringify({ description, modelId, provider, validatorModelId, validatorProvider }),
+  });
+}
+
+export async function refineMission(missionStatement, initialScope, refinementRequest, modelId, provider, validatorModelId, validatorProvider) {
+  return apiFetch('/ceremony/refine-mission', {
+    method: 'POST',
+    body: JSON.stringify({ missionStatement, initialScope, refinementRequest, modelId, provider, validatorModelId, validatorProvider }),
+  });
+}
+
+export async function generateArchitecture(description, modelId, provider) {
+  return apiFetch('/ceremony/generate-architecture', {
+    method: 'POST',
+    body: JSON.stringify({ description, modelId, provider }),
+  });
+}
+
+export async function refineArchitecture(currentArch, refinementRequest, modelId, provider) {
+  return apiFetch('/ceremony/refine-architecture', {
+    method: 'POST',
+    body: JSON.stringify({ currentArch, refinementRequest, modelId, provider }),
+  });
+}
+
+// ── Sponsor-call draft (resume support) ──────────────────────────────────────
+
+export async function getSponsorCallDraft() {
+  try {
+    return await apiFetch('/ceremony/sponsor-call/draft');
+  } catch (_) {
+    return null;
+  }
+}
+
+export async function saveSponsorCallDraft(data) {
+  return apiFetch('/ceremony/sponsor-call/draft', {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function deleteSponsorCallDraft() {
+  try {
+    return await apiFetch('/ceremony/sponsor-call/draft', { method: 'DELETE' });
+  } catch (_) {}
+}
+
+// ── Agents API ───────────────────────────────────────────────────────────────
+
+export async function getAgentList() {
+  return apiFetch('/settings/agents');
+}
+
+export async function getAgentContent(name) {
+  return apiFetch(`/settings/agents/${encodeURIComponent(name)}`);
+}
+
+export async function saveAgentContent(name, content) {
+  return apiFetch(`/settings/agents/${encodeURIComponent(name)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ content }),
+  });
+}
+
+export async function resetAgent(name) {
+  return apiFetch(`/settings/agents/${encodeURIComponent(name)}`, { method: 'DELETE' });
+}
+
+// ── Processes API ─────────────────────────────────────────────────────────────
+
+export async function getProcesses() {
+  return apiFetch('/processes');
+}
+
+export async function killProcess(id) {
+  return apiFetch(`/processes/${encodeURIComponent(id)}`, { method: 'DELETE' });
+}
+
+export async function clearCompletedProcesses() {
+  return apiFetch('/processes', { method: 'DELETE' });
+}
+
+// ── Work Item Refine API ──────────────────────────────────────────────────────
+
+/**
+ * Start an async refinement job for an epic or story.
+ * @param {string} id - Work item ID
+ * @param {object} options - { refinementRequest, selectedIssues, modelId, provider, validatorModelId, validatorProvider }
+ * @returns {Promise<{ jobId: string }>}
+ */
+export async function refineWorkItem(id, options) {
+  return apiFetch(`/work-items/${id}/refine`, {
+    method: 'POST',
+    body: JSON.stringify(options),
+  });
+}
+
+/**
+ * Apply accepted refinement changes to work.json on disk.
+ * @param {string} id - Work item ID
+ * @param {object} proposedItem - The proposed (refined) item
+ * @param {Array} storyChanges - [{ type: 'update'|'new', storyId?, proposedStory }]
+ */
+export async function applyWorkItemChanges(id, proposedItem, storyChanges = []) {
+  return apiFetch(`/work-items/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify({ proposedItem, storyChanges }),
+  });
+}
+
+// ── Costs API ─────────────────────────────────────────────────────────────────
+
+/**
+ * Get current month cost summary for the header chip
+ * @returns {Promise<{ totalCost: number, totalTokens: number, apiCalls: number }>}
+ */
+export async function getCostSummary() {
+  return apiFetch('/costs/summary');
+}
+
+/**
+ * Get cost history for chart and ceremony breakdown
+ * @param {number|{ from: string, to: string }} range - Days count or custom date range
+ * @returns {Promise<{ daily: Array, ceremonies: Array }>}
+ */
+export async function getCostHistory(range = 30) {
+  if (typeof range === 'number') {
+    return apiFetch(`/costs/history?days=${range}`);
+  }
+  return apiFetch(`/costs/history?from=${range.from}&to=${range.to}`);
+}

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

@@ -0,0 +1,144 @@
+/**
+ * Status Column Grouping Logic (Frontend)
+ * Mirrors backend logic for consistency
+ */
+
+/**
+ * Maps status values to their display column
+ */
+export const STATUS_COLUMN_MAPPING = {
+  Backlog: ['planned', 'pending'],
+  Ready: ['ready'],
+  'In Progress': ['implementing', 'feedback'],
+  Review: ['implemented', 'testing'],
+  Done: ['completed'],
+};
+
+/**
+ * Metadata for each status value
+ */
+export const STATUS_METADATA = {
+  planned: { color: 'gray', icon: '📋', label: 'Planned' },
+  pending: { color: 'slate', icon: '⏸️', label: 'Pending' },
+  ready: { color: 'blue', icon: '🚀', label: 'Ready' },
+  implementing: { color: 'yellow', icon: '⚙️', label: 'Implementing' },
+  feedback: { color: 'amber', icon: '💬', label: 'Feedback' },
+  implemented: { color: 'purple', icon: '✅', label: 'Implemented' },
+  testing: { color: 'violet', icon: '🧪', label: 'Testing' },
+  completed: { color: 'green', icon: '🎉', label: 'Completed' },
+  blocked: { color: 'red', icon: '🚫', label: 'Blocked' },
+};
+
+/**
+ * Canonical order for columns on the board
+ */
+export const COLUMN_ORDER = ['Backlog', 'Ready', 'In Progress', 'Review', 'Done'];
+
+/**
+ * Column metadata
+ */
+export const COLUMN_METADATA = {
+  Backlog: {
+    color: 'slate',
+    bgColor: 'bg-slate-100',
+    borderColor: 'border-slate-300',
+  },
+  Ready: {
+    color: 'blue',
+    bgColor: 'bg-blue-100',
+    borderColor: 'border-blue-300',
+  },
+  'In Progress': {
+    color: 'yellow',
+    bgColor: 'bg-yellow-100',
+    borderColor: 'border-yellow-300',
+  },
+  Review: {
+    color: 'purple',
+    bgColor: 'bg-purple-100',
+    borderColor: 'border-purple-300',
+  },
+  Done: {
+    color: 'green',
+    bgColor: 'bg-green-100',
+    borderColor: 'border-green-300',
+  },
+};
+
+/**
+ * Get the column name for a given status
+ * @param {string} status - Work item status
+ * @returns {string|null} Column name or null if not found
+ */
+export function getColumnForStatus(status) {
+  for (const [column, statuses] of Object.entries(STATUS_COLUMN_MAPPING)) {
+    if (statuses.includes(status)) {
+      return column;
+    }
+  }
+  return null;
+}
+
+/**
+ * Get metadata for a status
+ * @param {string} status - Work item status
+ * @returns {object|null} Status metadata or null if not found
+ */
+export function getStatusMetadata(status) {
+  return STATUS_METADATA[status] || null;
+}
+
+/**
+ * Get metadata for a column
+ * @param {string} column - Column name
+ * @returns {object|null} Column metadata or null if not found
+ */
+export function getColumnMetadata(column) {
+  return COLUMN_METADATA[column] || null;
+}
+
+/**
+ * Group work items by column
+ * @param {Array} workItems - Array of work items
+ * @returns {object} Object with column names as keys, arrays of work items as values
+ */
+export function groupItemsByColumn(workItems) {
+  const grouped = {};
+
+  // Initialize all columns as empty arrays
+  COLUMN_ORDER.forEach((column) => {
+    grouped[column] = [];
+  });
+
+  // Group items by their column
+  workItems.forEach((item) => {
+    const column = getColumnForStatus(item.status);
+    if (column && grouped[column]) {
+      grouped[column].push(item);
+    }
+  });
+
+  return grouped;
+}
+
+/**
+ * Get statistics for a column
+ * @param {Array} workItems - Work items in the column
+ * @returns {object} Statistics object with total count and breakdown by status
+ */
+export function getColumnStats(workItems) {
+  const stats = {
+    total: workItems.length,
+    byStatus: {},
+  };
+
+  workItems.forEach((item) => {
+    const status = item.status;
+    if (!stats.byStatus[status]) {
+      stats.byStatus[status] = 0;
+    }
+    stats.byStatus[status]++;
+  });
+
+  return stats;
+}

package/kanban/client/src/lib/utils.js

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * @param {...any} inputs - Class names to merge
+ * @returns {string} Merged class names
+ */
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/kanban/client/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);