forked from cardosofelipe/fast-next-template
feat(frontend): implement Project Creation Wizard (#50)
Implement multi-step project creation wizard with script mode shortcut. - Add 6-step wizard (4 steps for scripts that skip config) - Step 1: Basic Info (name, description, repository URL) - Step 2: Complexity (Script/Simple/Medium/Complex with timelines) - Step 3: Client Mode (Technical/Auto) - skipped for scripts - Step 4: Autonomy Level with approval matrix - skipped for scripts - Step 5: Agent Chat preview placeholder (Phase 4) - Step 6: Review and confirmation - Use TanStack Query for API integration - Include comprehensive unit tests (73 passing) - Add E2E test suite for wizard flow - WCAG AA compliant with proper ARIA attributes Closes #50 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
338
frontend/e2e/project-wizard.spec.ts
Normal file
338
frontend/e2e/project-wizard.spec.ts
Normal file
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* E2E Tests for Project Creation Wizard
|
||||
*
|
||||
* Tests the multi-step project creation flow including:
|
||||
* - Step navigation and validation
|
||||
* - Script mode skip behavior
|
||||
* - Form state persistence across steps
|
||||
* - API integration (mocked)
|
||||
*/
|
||||
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
import { setupAuthenticatedMocks } from './helpers/auth';
|
||||
|
||||
/**
|
||||
* Setup project creation mock
|
||||
*/
|
||||
async function setupProjectMocks(page: Page) {
|
||||
await page.route('**/api/v1/projects', async (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
const body = route.request().postDataJSON();
|
||||
await route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
id: '550e8400-e29b-41d4-a716-446655440000',
|
||||
name: body.name,
|
||||
slug: body.slug,
|
||||
description: body.description,
|
||||
autonomy_level: body.autonomy_level,
|
||||
status: 'active',
|
||||
settings: body.settings,
|
||||
owner_id: '123e4567-e89b-12d3-a456-426614174000',
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
agent_count: 0,
|
||||
issue_count: 0,
|
||||
active_sprint_name: null,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
await route.continue();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
test.describe('Project Creation Wizard', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Set up authentication mocks
|
||||
await setupAuthenticatedMocks(page);
|
||||
|
||||
// Set up project API mock
|
||||
await setupProjectMocks(page);
|
||||
|
||||
// Navigate to wizard
|
||||
await page.goto('/en/projects/new');
|
||||
|
||||
// Wait for wizard to load
|
||||
await expect(page.locator('h2')).toContainText('Create New Project');
|
||||
});
|
||||
|
||||
test.describe('Step 1: Basic Information', () => {
|
||||
test('should show step indicator at 1 of 6', async ({ page }) => {
|
||||
await expect(page.getByText('Step 1 of 6')).toBeVisible();
|
||||
await expect(page.getByText('Basic Info')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should disable Next button without project name', async ({ page }) => {
|
||||
const nextButton = page.getByRole('button', { name: /next/i });
|
||||
await expect(nextButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should enable Next button with valid project name', async ({ page }) => {
|
||||
const projectNameInput = page.getByLabel(/project name/i);
|
||||
await projectNameInput.fill('My Test Project');
|
||||
|
||||
const nextButton = page.getByRole('button', { name: /next/i });
|
||||
await expect(nextButton).toBeEnabled();
|
||||
});
|
||||
|
||||
test('should show validation error for short project name', async ({ page }) => {
|
||||
const projectNameInput = page.getByLabel(/project name/i);
|
||||
await projectNameInput.fill('AB');
|
||||
await projectNameInput.blur();
|
||||
|
||||
await expect(page.getByText(/at least 3 characters/i)).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show Back button as invisible on first step', async ({ page }) => {
|
||||
const backButton = page.getByRole('button', { name: /back/i });
|
||||
await expect(backButton).toHaveClass(/invisible/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Step 2: Complexity Selection', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Fill step 1 and navigate to step 2
|
||||
await page.getByLabel(/project name/i).fill('My Test Project');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
});
|
||||
|
||||
test('should show step indicator at 2 of 6', async ({ page }) => {
|
||||
await expect(page.getByText('Step 2 of 6')).toBeVisible();
|
||||
await expect(page.getByText('Complexity')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display all complexity options', async ({ page }) => {
|
||||
await expect(page.getByRole('button', { name: /script/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /simple/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /medium/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /complex/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show correct timelines for each option', async ({ page }) => {
|
||||
await expect(page.getByText(/minutes to 1-2 hours/i)).toBeVisible();
|
||||
await expect(page.getByText(/2-3 days/i)).toBeVisible();
|
||||
await expect(page.getByText(/2-3 weeks/i)).toBeVisible();
|
||||
await expect(page.getByText(/2-3 months/i)).toBeVisible();
|
||||
});
|
||||
|
||||
test('should disable Next until complexity is selected', async ({ page }) => {
|
||||
const nextButton = page.getByRole('button', { name: /next/i });
|
||||
await expect(nextButton).toBeDisabled();
|
||||
|
||||
await page.getByRole('button', { name: /medium/i }).click();
|
||||
await expect(nextButton).toBeEnabled();
|
||||
});
|
||||
|
||||
test('should allow going back to step 1', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /back/i }).click();
|
||||
await expect(page.getByText('Step 1 of 6')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Standard Flow (non-script)', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Fill steps 1-2
|
||||
await page.getByLabel(/project name/i).fill('My Test Project');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /medium/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
});
|
||||
|
||||
test('should show step 3: Client Mode', async ({ page }) => {
|
||||
await expect(page.getByText('Step 3 of 6')).toBeVisible();
|
||||
await expect(page.getByText('Client Mode')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display client mode options', async ({ page }) => {
|
||||
await expect(page.getByRole('button', { name: /technical mode/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /auto mode/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('should navigate to step 4: Autonomy Level', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /auto mode/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
await expect(page.getByText('Step 4 of 6')).toBeVisible();
|
||||
await expect(page.getByText('Autonomy')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display autonomy options with approval matrix', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /auto mode/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
await expect(page.getByRole('button', { name: /full control/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /milestone/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /autonomous/i })).toBeVisible();
|
||||
|
||||
// Check approval matrix is visible
|
||||
await expect(page.getByText('Approval Matrix')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Script Mode (skip steps 3-4)', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Fill step 1
|
||||
await page.getByLabel(/project name/i).fill('My Test Script');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
});
|
||||
|
||||
test('should show 4 steps in step indicator for scripts', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /script/i }).click();
|
||||
|
||||
// Script mode shows simplified flow message
|
||||
await expect(page.getByText(/simplified flow/i)).toBeVisible();
|
||||
|
||||
// After selecting script, Next should be enabled
|
||||
await expect(page.getByRole('button', { name: /next/i })).toBeEnabled();
|
||||
});
|
||||
|
||||
test('should skip to Agent Chat (step 3 display) after selecting script', async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.getByRole('button', { name: /script/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
// Should now be at Agent Chat step (displays as step 3 of 4)
|
||||
await expect(page.getByText('Step 3 of 4')).toBeVisible();
|
||||
await expect(page.getByText('Agent Chat')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should go back from Agent Chat to Complexity for scripts', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /script/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
// At Agent Chat, go back
|
||||
await page.getByRole('button', { name: /back/i }).click();
|
||||
|
||||
// Should be back at Complexity
|
||||
await expect(page.getByText('Step 2 of 4')).toBeVisible();
|
||||
await expect(page.getByText('Complexity')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Step 5: Agent Chat Preview', () => {
|
||||
test('should show preview placeholder', async ({ page }) => {
|
||||
// Navigate to agent chat step
|
||||
await page.getByLabel(/project name/i).fill('My Test Project');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /medium/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /auto mode/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /milestone/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
await expect(page.getByText('Step 5 of 6')).toBeVisible();
|
||||
await expect(page.getByText('Requirements Discovery')).toBeVisible();
|
||||
await expect(page.getByText('Coming in Phase 4')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show mock chat messages', async ({ page }) => {
|
||||
// Navigate to agent chat step
|
||||
await page.getByLabel(/project name/i).fill('My Test Project');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /medium/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /auto mode/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /milestone/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
await expect(page.getByText("I'm your Product Owner agent")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Step 6: Review & Create', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Navigate through all steps
|
||||
await page.getByLabel(/project name/i).fill('My Amazing Project');
|
||||
await page.getByLabel(/description/i).fill('A test project description');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /medium/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /technical mode/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
await page.getByRole('button', { name: /milestone/i }).click();
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
// Skip agent chat preview
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
});
|
||||
|
||||
test('should show step indicator at 6 of 6', async ({ page }) => {
|
||||
await expect(page.getByText('Step 6 of 6')).toBeVisible();
|
||||
await expect(page.getByText('Review')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display review summary with all selections', async ({ page }) => {
|
||||
await expect(page.getByText('My Amazing Project')).toBeVisible();
|
||||
await expect(page.getByText('A test project description')).toBeVisible();
|
||||
await expect(page.getByText('Medium')).toBeVisible();
|
||||
await expect(page.getByText('Technical Mode')).toBeVisible();
|
||||
await expect(page.getByText('Milestone')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show Create Project button', async ({ page }) => {
|
||||
const createButton = page.getByRole('button', { name: /create project/i });
|
||||
await expect(createButton).toBeVisible();
|
||||
await expect(createButton).toBeEnabled();
|
||||
});
|
||||
|
||||
test('should create project and show success', async ({ page }) => {
|
||||
const createButton = page.getByRole('button', { name: /create project/i });
|
||||
await createButton.click();
|
||||
|
||||
// Wait for success state
|
||||
await expect(page.getByText('Project Created Successfully')).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByText('My Amazing Project')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show navigation options after creation', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /create project/i }).click();
|
||||
|
||||
await expect(page.getByText('Project Created Successfully')).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
await expect(page.getByRole('button', { name: /go to project dashboard/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /create another project/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('should reset wizard when clicking Create Another', async ({ page }) => {
|
||||
await page.getByRole('button', { name: /create project/i }).click();
|
||||
|
||||
await expect(page.getByText('Project Created Successfully')).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
await page.getByRole('button', { name: /create another project/i }).click();
|
||||
|
||||
// Should be back at step 1
|
||||
await expect(page.getByText('Step 1 of 6')).toBeVisible();
|
||||
await expect(page.getByLabel(/project name/i)).toHaveValue('');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Accessibility', () => {
|
||||
test('should have proper ARIA labels on selectable cards', async ({ page }) => {
|
||||
await page.getByLabel(/project name/i).fill('My Test Project');
|
||||
await page.getByRole('button', { name: /next/i }).click();
|
||||
|
||||
// Check that complexity cards have aria-pressed
|
||||
const scriptButton = page.getByRole('button', { name: /script/i });
|
||||
await expect(scriptButton).toHaveAttribute('aria-pressed', 'false');
|
||||
|
||||
await scriptButton.click();
|
||||
await expect(scriptButton).toHaveAttribute('aria-pressed', 'true');
|
||||
});
|
||||
|
||||
test('should have progress bar with aria attributes', async ({ page }) => {
|
||||
const progressbar = page.getByRole('progressbar');
|
||||
await expect(progressbar).toHaveAttribute('aria-valuenow', '1');
|
||||
await expect(progressbar).toHaveAttribute('aria-valuemax', '6');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* New Project Page
|
||||
*
|
||||
* Route: /[locale]/projects/new
|
||||
* Renders the multi-step project creation wizard.
|
||||
*/
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
import { ProjectWizard } from '@/components/projects/wizard';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create New Project | Syndarix',
|
||||
description: 'Create a new project with the Syndarix project wizard',
|
||||
};
|
||||
|
||||
interface NewProjectPageProps {
|
||||
params: Promise<{
|
||||
locale: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default async function NewProjectPage({ params }: NewProjectPageProps) {
|
||||
const { locale } = await params;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold">Create New Project</h1>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Set up your project and configure how Syndarix agents will work with you.
|
||||
</p>
|
||||
</div>
|
||||
<ProjectWizard locale={locale} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
242
frontend/src/components/projects/AgentPanel.tsx
Normal file
242
frontend/src/components/projects/AgentPanel.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* Agent Panel Component
|
||||
*
|
||||
* Displays a list of active agents on the project with their status and current task.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Bot, MoreVertical } from 'lucide-react';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { AgentStatusIndicator } from './AgentStatusIndicator';
|
||||
import type { AgentInstance } from './types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface AgentPanelProps {
|
||||
/** List of agent instances */
|
||||
agents: AgentInstance[];
|
||||
/** Whether data is loading */
|
||||
isLoading?: boolean;
|
||||
/** Callback when "Manage Agents" is clicked */
|
||||
onManageAgents?: () => void;
|
||||
/** Callback when an agent action is triggered */
|
||||
onAgentAction?: (agentId: string, action: 'view' | 'pause' | 'restart' | 'terminate') => void;
|
||||
/** Additional CSS classes */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
function getAgentAvatarText(agent: AgentInstance): string {
|
||||
if (agent.avatar) return agent.avatar;
|
||||
// Generate initials from role
|
||||
const words = agent.role.split(/[\s_-]+/);
|
||||
if (words.length >= 2) {
|
||||
return (words[0][0] + words[1][0]).toUpperCase();
|
||||
}
|
||||
return agent.role.substring(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
function formatLastActivity(lastActivity?: string): string {
|
||||
if (!lastActivity) return 'No activity';
|
||||
try {
|
||||
return formatDistanceToNow(new Date(lastActivity), { addSuffix: true });
|
||||
} catch {
|
||||
return 'Unknown';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Subcomponents
|
||||
// ============================================================================
|
||||
|
||||
function AgentListItem({
|
||||
agent,
|
||||
onAction,
|
||||
}: {
|
||||
agent: AgentInstance;
|
||||
onAction?: (agentId: string, action: 'view' | 'pause' | 'restart' | 'terminate') => void;
|
||||
}) {
|
||||
const avatarText = getAgentAvatarText(agent);
|
||||
const lastActivity = formatLastActivity(agent.last_activity_at);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
|
||||
data-testid={`agent-item-${agent.id}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Avatar */}
|
||||
<div
|
||||
className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{avatarText}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{agent.name}</span>
|
||||
<AgentStatusIndicator status={agent.status} />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground line-clamp-1">
|
||||
{agent.current_task || 'No active task'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{lastActivity}</span>
|
||||
|
||||
{onAction && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
aria-label={`Actions for ${agent.name}`}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onAction(agent.id, 'view')}>
|
||||
View Details
|
||||
</DropdownMenuItem>
|
||||
{agent.status === 'active' || agent.status === 'working' ? (
|
||||
<DropdownMenuItem onClick={() => onAction(agent.id, 'pause')}>
|
||||
Pause Agent
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem onClick={() => onAction(agent.id, 'restart')}>
|
||||
Restart Agent
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => onAction(agent.id, 'terminate')}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
Terminate Agent
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentPanelSkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-28" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3 rounded-lg border p-3">
|
||||
<Skeleton className="h-10 w-10 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3 w-48" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export function AgentPanel({
|
||||
agents,
|
||||
isLoading = false,
|
||||
onManageAgents,
|
||||
onAgentAction,
|
||||
className,
|
||||
}: AgentPanelProps) {
|
||||
if (isLoading) {
|
||||
return <AgentPanelSkeleton />;
|
||||
}
|
||||
|
||||
const activeAgentCount = agents.filter(
|
||||
(a) => a.status === 'active' || a.status === 'working'
|
||||
).length;
|
||||
|
||||
return (
|
||||
<Card className={className} data-testid="agent-panel">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bot className="h-5 w-5" aria-hidden="true" />
|
||||
Active Agents
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{activeAgentCount} of {agents.length} agents working
|
||||
</CardDescription>
|
||||
</div>
|
||||
{onManageAgents && (
|
||||
<Button variant="outline" size="sm" onClick={onManageAgents}>
|
||||
Manage Agents
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{agents.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
|
||||
<Bot className="mb-2 h-8 w-8" aria-hidden="true" />
|
||||
<p className="text-sm">No agents assigned to this project</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{agents.map((agent) => (
|
||||
<AgentListItem
|
||||
key={agent.id}
|
||||
agent={agent}
|
||||
onAction={onAgentAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
84
frontend/src/components/projects/AgentStatusIndicator.tsx
Normal file
84
frontend/src/components/projects/AgentStatusIndicator.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Agent Status Indicator
|
||||
*
|
||||
* Visual indicator for agent status (idle, working, error, etc.)
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { AgentStatus } from './types';
|
||||
|
||||
const statusConfig: Record<AgentStatus, { color: string; label: string }> = {
|
||||
idle: {
|
||||
color: 'bg-yellow-500',
|
||||
label: 'Idle',
|
||||
},
|
||||
active: {
|
||||
color: 'bg-green-500',
|
||||
label: 'Active',
|
||||
},
|
||||
working: {
|
||||
color: 'bg-green-500 animate-pulse',
|
||||
label: 'Working',
|
||||
},
|
||||
pending: {
|
||||
color: 'bg-gray-400',
|
||||
label: 'Pending',
|
||||
},
|
||||
error: {
|
||||
color: 'bg-red-500',
|
||||
label: 'Error',
|
||||
},
|
||||
terminated: {
|
||||
color: 'bg-gray-600',
|
||||
label: 'Terminated',
|
||||
},
|
||||
};
|
||||
|
||||
interface AgentStatusIndicatorProps {
|
||||
status: AgentStatus;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
showLabel?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function AgentStatusIndicator({
|
||||
status,
|
||||
size = 'sm',
|
||||
showLabel = false,
|
||||
className,
|
||||
}: AgentStatusIndicatorProps) {
|
||||
const config = statusConfig[status] || statusConfig.pending;
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-4 w-4',
|
||||
lg: 'h-5 w-5',
|
||||
};
|
||||
|
||||
const statusTitle = status === 'error'
|
||||
? 'Agent has error'
|
||||
: `Agent is ${status}`;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn('inline-flex items-center gap-1.5', className, sizeClasses[size])}
|
||||
role="status"
|
||||
aria-label={`Status: ${config.label}`}
|
||||
title={statusTitle}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-block rounded-full',
|
||||
sizeClasses[size],
|
||||
config.color
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{showLabel && (
|
||||
<span className="text-xs text-muted-foreground">{config.label}</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
146
frontend/src/components/projects/BurndownChart.tsx
Normal file
146
frontend/src/components/projects/BurndownChart.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Burndown Chart Component
|
||||
*
|
||||
* Simple SVG-based burndown chart showing actual vs ideal progress.
|
||||
* This is a placeholder that will be enhanced when a charting library is integrated.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { BurndownDataPoint } from './types';
|
||||
|
||||
interface BurndownChartProps {
|
||||
/** Burndown data points */
|
||||
data: BurndownDataPoint[];
|
||||
/** Chart height */
|
||||
height?: number;
|
||||
/** Additional CSS classes */
|
||||
className?: string;
|
||||
/** Show legend */
|
||||
showLegend?: boolean;
|
||||
}
|
||||
|
||||
export function BurndownChart({
|
||||
data,
|
||||
height = 120,
|
||||
className,
|
||||
showLegend = true,
|
||||
}: BurndownChartProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center rounded-md border border-dashed p-4 text-sm text-muted-foreground',
|
||||
className
|
||||
)}
|
||||
style={{ height }}
|
||||
>
|
||||
No burndown data available
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const chartWidth = 100;
|
||||
const chartHeight = height;
|
||||
const padding = { top: 10, right: 10, bottom: 20, left: 10 };
|
||||
const innerWidth = chartWidth - padding.left - padding.right;
|
||||
const innerHeight = chartHeight - padding.top - padding.bottom;
|
||||
|
||||
const maxPoints = Math.max(...data.map((d) => Math.max(d.remaining, d.ideal)));
|
||||
|
||||
// Generate points for polylines
|
||||
const getPoints = (key: 'remaining' | 'ideal') => {
|
||||
return data
|
||||
.map((d, i) => {
|
||||
const x = padding.left + (i / (data.length - 1)) * innerWidth;
|
||||
const y = padding.top + innerHeight - (d[key] / maxPoints) * innerHeight;
|
||||
return `${x},${y}`;
|
||||
})
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('w-full', className)}>
|
||||
<div className="relative" style={{ height }}>
|
||||
<svg
|
||||
viewBox={`0 0 ${chartWidth} ${chartHeight}`}
|
||||
className="h-full w-full"
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label="Sprint burndown chart showing actual progress versus ideal progress"
|
||||
>
|
||||
{/* Grid lines */}
|
||||
<g className="text-muted stroke-current opacity-20">
|
||||
{[0, 0.25, 0.5, 0.75, 1].map((ratio) => (
|
||||
<line
|
||||
key={ratio}
|
||||
x1={padding.left}
|
||||
y1={padding.top + innerHeight * ratio}
|
||||
x2={padding.left + innerWidth}
|
||||
y2={padding.top + innerHeight * ratio}
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Ideal line (dashed) */}
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeOpacity="0.3"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="4,2"
|
||||
points={getPoints('ideal')}
|
||||
/>
|
||||
|
||||
{/* Actual line */}
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
className="text-primary"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
points={getPoints('remaining')}
|
||||
/>
|
||||
|
||||
{/* Data points on actual line */}
|
||||
{data.map((d, i) => {
|
||||
const x = padding.left + (i / (data.length - 1)) * innerWidth;
|
||||
const y = padding.top + innerHeight - (d.remaining / maxPoints) * innerHeight;
|
||||
return (
|
||||
<circle
|
||||
key={i}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="2"
|
||||
className="fill-primary"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
|
||||
{/* X-axis labels */}
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-between text-xs text-muted-foreground">
|
||||
<span>Day 1</span>
|
||||
<span>Day {data.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
{showLegend && (
|
||||
<div className="mt-2 flex items-center justify-center gap-6 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="h-0.5 w-4 bg-primary" />
|
||||
Actual
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="h-0.5 w-4 border-t border-dashed border-muted-foreground" />
|
||||
Ideal
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
173
frontend/src/components/projects/IssueSummary.tsx
Normal file
173
frontend/src/components/projects/IssueSummary.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* Issue Summary Component
|
||||
*
|
||||
* Sidebar component showing issue counts by status.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import {
|
||||
GitBranch,
|
||||
CircleDot,
|
||||
PlayCircle,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import type { IssueSummary as IssueSummaryType } from './types';
|
||||
|
||||
interface IssueSummaryProps {
|
||||
summary: IssueSummaryType | null;
|
||||
isLoading?: boolean;
|
||||
onViewAllIssues?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface StatusRowProps {
|
||||
icon: React.ElementType;
|
||||
iconColor: string;
|
||||
label: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
function StatusRow({ icon: Icon, iconColor, label, count }: StatusRowProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={cn('h-4 w-4', iconColor)} aria-hidden="true" />
|
||||
<span className="text-sm">{label}</span>
|
||||
</div>
|
||||
<span className="font-medium">{count}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueSummarySkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-4 w-4" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-8" />
|
||||
</div>
|
||||
))}
|
||||
<Skeleton className="h-px w-full" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-4 w-4" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-8" />
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Skeleton className="h-9 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function IssueSummary({
|
||||
summary,
|
||||
isLoading = false,
|
||||
onViewAllIssues,
|
||||
className,
|
||||
}: IssueSummaryProps) {
|
||||
if (isLoading) {
|
||||
return <IssueSummarySkeleton />;
|
||||
}
|
||||
|
||||
if (!summary) {
|
||||
return (
|
||||
<Card className={className} data-testid="issue-summary">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<GitBranch className="h-5 w-5" aria-hidden="true" />
|
||||
Issue Summary
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-4 text-center text-muted-foreground">
|
||||
<CircleDot className="mb-2 h-6 w-6" aria-hidden="true" />
|
||||
<p className="text-sm">No issues found</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={className} data-testid="issue-summary">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<GitBranch className="h-5 w-5" aria-hidden="true" />
|
||||
Issue Summary
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3" role="list" aria-label="Issue counts by status">
|
||||
<StatusRow
|
||||
icon={CircleDot}
|
||||
iconColor="text-blue-500"
|
||||
label="Open"
|
||||
count={summary.open}
|
||||
/>
|
||||
<StatusRow
|
||||
icon={PlayCircle}
|
||||
iconColor="text-yellow-500"
|
||||
label="In Progress"
|
||||
count={summary.in_progress}
|
||||
/>
|
||||
<StatusRow
|
||||
icon={Clock}
|
||||
iconColor="text-purple-500"
|
||||
label="In Review"
|
||||
count={summary.in_review}
|
||||
/>
|
||||
<StatusRow
|
||||
icon={AlertCircle}
|
||||
iconColor="text-red-500"
|
||||
label="Blocked"
|
||||
count={summary.blocked}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<StatusRow
|
||||
icon={CheckCircle2}
|
||||
iconColor="text-green-500"
|
||||
label="Completed"
|
||||
count={summary.done}
|
||||
/>
|
||||
|
||||
{onViewAllIssues && (
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
size="sm"
|
||||
onClick={onViewAllIssues}
|
||||
>
|
||||
View All Issues ({summary.total})
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
75
frontend/src/components/projects/ProgressBar.tsx
Normal file
75
frontend/src/components/projects/ProgressBar.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* Progress Bar Component
|
||||
*
|
||||
* Simple progress bar with customizable appearance.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ProgressBarProps {
|
||||
/** Progress value (0-100) */
|
||||
value: number;
|
||||
/** Color variant */
|
||||
variant?: 'default' | 'success' | 'warning' | 'error';
|
||||
/** Height size */
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
/** Show percentage label */
|
||||
showLabel?: boolean;
|
||||
/** Additional CSS classes for the container */
|
||||
className?: string;
|
||||
/** Aria label for accessibility */
|
||||
'aria-label'?: string;
|
||||
}
|
||||
|
||||
const variantClasses = {
|
||||
default: 'bg-primary',
|
||||
success: 'bg-green-500',
|
||||
warning: 'bg-yellow-500',
|
||||
error: 'bg-red-500',
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'h-1',
|
||||
md: 'h-2',
|
||||
lg: 'h-3',
|
||||
};
|
||||
|
||||
export function ProgressBar({
|
||||
value,
|
||||
variant = 'default',
|
||||
size = 'md',
|
||||
showLabel = false,
|
||||
className,
|
||||
'aria-label': ariaLabel,
|
||||
}: ProgressBarProps) {
|
||||
const clampedValue = Math.min(100, Math.max(0, value));
|
||||
|
||||
return (
|
||||
<div className={cn('w-full', className)}>
|
||||
{showLabel && (
|
||||
<div className="mb-1 flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Progress</span>
|
||||
<span className="font-medium">{Math.round(clampedValue)}%</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn('w-full rounded-full bg-muted', sizeClasses[size])}
|
||||
role="progressbar"
|
||||
aria-valuenow={clampedValue}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={ariaLabel || `Progress: ${Math.round(clampedValue)}%`}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'h-full rounded-full transition-all duration-300 ease-in-out',
|
||||
variantClasses[variant]
|
||||
)}
|
||||
style={{ width: `${clampedValue}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
309
frontend/src/components/projects/ProjectDashboard.tsx
Normal file
309
frontend/src/components/projects/ProjectDashboard.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
/**
|
||||
* Project Dashboard Component
|
||||
*
|
||||
* Main dashboard view for a single project, showing agents, sprints, issues, and activity.
|
||||
* Integrates with SSE for real-time updates.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { useProjectEvents } from '@/lib/hooks/useProjectEvents';
|
||||
import { ProjectHeader } from './ProjectHeader';
|
||||
import { AgentPanel } from './AgentPanel';
|
||||
import { SprintProgress } from './SprintProgress';
|
||||
import { IssueSummary } from './IssueSummary';
|
||||
import { RecentActivity } from './RecentActivity';
|
||||
import type {
|
||||
Project,
|
||||
AgentInstance,
|
||||
Sprint,
|
||||
IssueSummary as IssueSummaryType,
|
||||
ActivityItem,
|
||||
BurndownDataPoint,
|
||||
} from './types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface ProjectDashboardProps {
|
||||
/** Project ID to display */
|
||||
projectId: string;
|
||||
/** Additional CSS classes */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Mock Data (for development - will be replaced with API calls)
|
||||
// ============================================================================
|
||||
|
||||
const mockProject: Project = {
|
||||
id: '1',
|
||||
name: 'E-Commerce Platform',
|
||||
description: 'Building a modern e-commerce platform with AI-powered recommendations and inventory management.',
|
||||
status: 'in_progress',
|
||||
autonomy_level: 'milestone',
|
||||
owner_id: 'user-1',
|
||||
created_at: '2024-01-15T10:00:00Z',
|
||||
updated_at: '2024-01-20T15:30:00Z',
|
||||
};
|
||||
|
||||
const mockAgents: AgentInstance[] = [
|
||||
{
|
||||
id: 'agent-1',
|
||||
agent_type_id: 'type-po',
|
||||
project_id: '1',
|
||||
name: 'ProductOwner',
|
||||
role: 'Product Owner',
|
||||
status: 'working',
|
||||
current_task: 'Refining user stories for checkout flow',
|
||||
last_activity_at: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'agent-2',
|
||||
agent_type_id: 'type-fe',
|
||||
project_id: '1',
|
||||
name: 'FrontendEngineer',
|
||||
role: 'Frontend Developer',
|
||||
status: 'active',
|
||||
current_task: 'Implementing cart component',
|
||||
last_activity_at: new Date(Date.now() - 15 * 60 * 1000).toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'agent-3',
|
||||
agent_type_id: 'type-be',
|
||||
project_id: '1',
|
||||
name: 'BackendEngineer',
|
||||
role: 'Backend Developer',
|
||||
status: 'idle',
|
||||
current_task: undefined,
|
||||
last_activity_at: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'agent-4',
|
||||
agent_type_id: 'type-qa',
|
||||
project_id: '1',
|
||||
name: 'QAEngineer',
|
||||
role: 'QA Engineer',
|
||||
status: 'error',
|
||||
current_task: 'Test run failed - awaiting review',
|
||||
last_activity_at: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
const mockSprint: Sprint = {
|
||||
id: 'sprint-1',
|
||||
project_id: '1',
|
||||
name: 'Sprint 3',
|
||||
status: 'active',
|
||||
start_date: '2024-01-15',
|
||||
end_date: '2024-01-29',
|
||||
total_issues: 12,
|
||||
completed_issues: 5,
|
||||
in_progress_issues: 3,
|
||||
blocked_issues: 1,
|
||||
todo_issues: 3,
|
||||
};
|
||||
|
||||
const mockBurndownData: BurndownDataPoint[] = [
|
||||
{ day: 1, date: '2024-01-15', remaining: 12, ideal: 12 },
|
||||
{ day: 3, date: '2024-01-17', remaining: 11, ideal: 10 },
|
||||
{ day: 5, date: '2024-01-19', remaining: 9, ideal: 8 },
|
||||
{ day: 7, date: '2024-01-21', remaining: 8, ideal: 6 },
|
||||
{ day: 9, date: '2024-01-23', remaining: 7, ideal: 4 },
|
||||
{ day: 11, date: '2024-01-25', remaining: 5, ideal: 2 },
|
||||
];
|
||||
|
||||
const mockIssueSummary: IssueSummaryType = {
|
||||
total: 24,
|
||||
open: 8,
|
||||
in_progress: 5,
|
||||
in_review: 3,
|
||||
blocked: 2,
|
||||
done: 6,
|
||||
};
|
||||
|
||||
const mockActivities: ActivityItem[] = [
|
||||
{
|
||||
id: 'act-1',
|
||||
type: 'agent_message',
|
||||
message: 'FrontendEngineer completed implementation of ProductCard component',
|
||||
agent: 'FrontendEngineer',
|
||||
timestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-2',
|
||||
type: 'issue_update',
|
||||
message: 'ProductOwner moved issue #42 to In Review',
|
||||
agent: 'ProductOwner',
|
||||
timestamp: new Date(Date.now() - 25 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-3',
|
||||
type: 'agent_message',
|
||||
message: 'ProductOwner added clarification to checkout user story',
|
||||
agent: 'ProductOwner',
|
||||
timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-4',
|
||||
type: 'sprint_event',
|
||||
message: 'Sprint 3 started',
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-5',
|
||||
type: 'agent_message',
|
||||
message: 'QAEngineer created 5 new test cases for cart functionality',
|
||||
agent: 'QAEngineer',
|
||||
timestamp: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
const mockAvailableSprints = [
|
||||
{ id: 'sprint-1', name: 'Sprint 1' },
|
||||
{ id: 'sprint-2', name: 'Sprint 2' },
|
||||
{ id: 'sprint-3', name: 'Sprint 3' },
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export function ProjectDashboard({
|
||||
projectId,
|
||||
className,
|
||||
}: ProjectDashboardProps) {
|
||||
const router = useRouter();
|
||||
|
||||
// SSE connection for real-time updates
|
||||
const { connectionState } = useProjectEvents(projectId);
|
||||
|
||||
// Local state
|
||||
const [isRunning, setIsRunning] = useState(true);
|
||||
const [selectedSprintId, setSelectedSprintId] = useState('sprint-3');
|
||||
|
||||
// TODO: Replace with TanStack Query hooks when API is ready
|
||||
// const { data: project, isLoading: projectLoading } = useProject(projectId);
|
||||
// const { data: agents, isLoading: agentsLoading } = useProjectAgents(projectId);
|
||||
// const { data: sprint, isLoading: sprintLoading } = useActiveSprint(projectId);
|
||||
// const { data: issueSummary, isLoading: issuesLoading } = useIssueSummary(projectId);
|
||||
// const { data: activities, isLoading: activitiesLoading } = useProjectActivity(projectId);
|
||||
|
||||
const isLoading = false; // Will be derived from query states
|
||||
|
||||
// Event handlers
|
||||
const handleToggleAgents = useCallback(() => {
|
||||
setIsRunning((prev) => !prev);
|
||||
// TODO: Call API to start/pause agents
|
||||
}, []);
|
||||
|
||||
const handleCreateSprint = useCallback(() => {
|
||||
// TODO: Navigate to sprint creation or open modal
|
||||
router.push(`/projects/${projectId}/sprints/new`);
|
||||
}, [router, projectId]);
|
||||
|
||||
const handleSettings = useCallback(() => {
|
||||
router.push(`/projects/${projectId}/settings`);
|
||||
}, [router, projectId]);
|
||||
|
||||
const handleManageAgents = useCallback(() => {
|
||||
router.push(`/projects/${projectId}/agents`);
|
||||
}, [router, projectId]);
|
||||
|
||||
const handleAgentAction = useCallback(
|
||||
(agentId: string, action: 'view' | 'pause' | 'restart' | 'terminate') => {
|
||||
// TODO: Implement agent actions
|
||||
console.info(`Agent action: ${action} on ${agentId}`);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSprintChange = useCallback((sprintId: string) => {
|
||||
setSelectedSprintId(sprintId);
|
||||
// TODO: Fetch sprint data for selected sprint
|
||||
}, []);
|
||||
|
||||
const handleViewAllIssues = useCallback(() => {
|
||||
router.push(`/projects/${projectId}/issues`);
|
||||
}, [router, projectId]);
|
||||
|
||||
const handleViewAllActivity = useCallback(() => {
|
||||
router.push(`/projects/${projectId}/activity`);
|
||||
}, [router, projectId]);
|
||||
|
||||
return (
|
||||
<div className={className} data-testid="project-dashboard">
|
||||
{/* Connection Status Alert */}
|
||||
{connectionState === 'error' && (
|
||||
<Alert variant="destructive" className="mb-6">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Connection Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Unable to receive real-time updates. Some information may be outdated.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Project Header */}
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
isRunning={isRunning}
|
||||
onToggleAgents={handleToggleAgents}
|
||||
onCreateSprint={handleCreateSprint}
|
||||
onSettings={handleSettings}
|
||||
className="mb-8"
|
||||
/>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="space-y-6 lg:col-span-2">
|
||||
{/* Sprint Progress */}
|
||||
<SprintProgress
|
||||
sprint={mockSprint}
|
||||
burndownData={mockBurndownData}
|
||||
availableSprints={mockAvailableSprints}
|
||||
selectedSprintId={selectedSprintId}
|
||||
onSprintChange={handleSprintChange}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
{/* Agent Panel */}
|
||||
<AgentPanel
|
||||
agents={mockAgents}
|
||||
isLoading={isLoading}
|
||||
onManageAgents={handleManageAgents}
|
||||
onAgentAction={handleAgentAction}
|
||||
/>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<RecentActivity
|
||||
activities={mockActivities}
|
||||
isLoading={isLoading}
|
||||
maxItems={5}
|
||||
onViewAll={handleViewAllActivity}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Issue Summary */}
|
||||
<IssueSummary
|
||||
summary={mockIssueSummary}
|
||||
isLoading={isLoading}
|
||||
onViewAllIssues={handleViewAllIssues}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
frontend/src/components/projects/ProjectHeader.tsx
Normal file
108
frontend/src/components/projects/ProjectHeader.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* Project Header Component
|
||||
*
|
||||
* Displays project title, status badges, and quick action buttons.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Settings, Play, Pause, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ProjectStatusBadge, AutonomyBadge } from './StatusBadge';
|
||||
import type { Project } from './types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface ProjectHeaderProps {
|
||||
/** Project data */
|
||||
project: Project;
|
||||
/** Whether agents are currently running */
|
||||
isRunning?: boolean;
|
||||
/** Callback when start/pause button is clicked */
|
||||
onToggleAgents?: () => void;
|
||||
/** Callback when create sprint button is clicked */
|
||||
onCreateSprint?: () => void;
|
||||
/** Callback when settings button is clicked */
|
||||
onSettings?: () => void;
|
||||
/** Additional CSS classes */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export function ProjectHeader({
|
||||
project,
|
||||
isRunning = false,
|
||||
onToggleAgents,
|
||||
onCreateSprint,
|
||||
onSettings,
|
||||
className,
|
||||
}: ProjectHeaderProps) {
|
||||
return (
|
||||
<header className={className} data-testid="project-header">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
{/* Title and Badges */}
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
|
||||
{project.name}
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<ProjectStatusBadge status={project.status} />
|
||||
<AutonomyBadge level={project.autonomy_level} />
|
||||
</div>
|
||||
{project.description && (
|
||||
<p className="text-sm text-muted-foreground max-w-2xl line-clamp-2">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
{onToggleAgents && (
|
||||
<Button
|
||||
variant={isRunning ? 'outline' : 'default'}
|
||||
size="sm"
|
||||
onClick={onToggleAgents}
|
||||
aria-label={isRunning ? 'Pause all agents' : 'Start all agents'}
|
||||
>
|
||||
{isRunning ? (
|
||||
<>
|
||||
<Pause className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Pause Agents
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Start Agents
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{onCreateSprint && (
|
||||
<Button variant="outline" size="sm" onClick={onCreateSprint}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New Sprint
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{onSettings && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onSettings}
|
||||
aria-label="Project settings"
|
||||
>
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
212
frontend/src/components/projects/RecentActivity.tsx
Normal file
212
frontend/src/components/projects/RecentActivity.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
/**
|
||||
* Recent Activity Component
|
||||
*
|
||||
* Displays a feed of recent activity events for a project.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Activity, Bot, GitBranch, MessageSquare, CheckCircle, AlertTriangle, Bell } from 'lucide-react';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import type { ActivityItem } from './types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface RecentActivityProps {
|
||||
/** List of activity items */
|
||||
activities: ActivityItem[];
|
||||
/** Whether data is loading */
|
||||
isLoading?: boolean;
|
||||
/** Maximum number of items to display */
|
||||
maxItems?: number;
|
||||
/** Callback when "View All" is clicked */
|
||||
onViewAll?: () => void;
|
||||
/** Additional CSS classes */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
function getActivityIcon(type: ActivityItem['type']) {
|
||||
switch (type) {
|
||||
case 'agent_message':
|
||||
return Bot;
|
||||
case 'issue_update':
|
||||
return GitBranch;
|
||||
case 'agent_status':
|
||||
return CheckCircle;
|
||||
case 'approval_request':
|
||||
return AlertTriangle;
|
||||
case 'sprint_event':
|
||||
return MessageSquare;
|
||||
case 'system':
|
||||
return Bell;
|
||||
default:
|
||||
return Activity;
|
||||
}
|
||||
}
|
||||
|
||||
function getActivityIconColor(type: ActivityItem['type']): string {
|
||||
switch (type) {
|
||||
case 'agent_message':
|
||||
return 'text-purple-500';
|
||||
case 'issue_update':
|
||||
return 'text-blue-500';
|
||||
case 'agent_status':
|
||||
return 'text-green-500';
|
||||
case 'approval_request':
|
||||
return 'text-yellow-500';
|
||||
case 'sprint_event':
|
||||
return 'text-indigo-500';
|
||||
case 'system':
|
||||
return 'text-gray-500';
|
||||
default:
|
||||
return 'text-muted-foreground';
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimestamp(timestamp: string): string {
|
||||
try {
|
||||
return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
|
||||
} catch {
|
||||
return 'Unknown time';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Subcomponents
|
||||
// ============================================================================
|
||||
|
||||
function ActivityListItem({ activity }: { activity: ActivityItem }) {
|
||||
const Icon = getActivityIcon(activity.type);
|
||||
const iconColor = getActivityIconColor(activity.type);
|
||||
const timestamp = formatTimestamp(activity.timestamp);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex gap-3 py-3 first:pt-0 last:pb-0"
|
||||
data-testid={`activity-item-${activity.id}`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0 pt-0.5">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
|
||||
<Icon className={`h-4 w-4 ${iconColor}`} aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm">
|
||||
{activity.agent && (
|
||||
<span className="font-medium">{activity.agent}</span>
|
||||
)}{' '}
|
||||
{activity.message}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">{timestamp}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RecentActivitySkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
<Skeleton className="h-4 w-48" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-20" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="divide-y">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex gap-3 py-3">
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export function RecentActivity({
|
||||
activities,
|
||||
isLoading = false,
|
||||
maxItems = 5,
|
||||
onViewAll,
|
||||
className,
|
||||
}: RecentActivityProps) {
|
||||
if (isLoading) {
|
||||
return <RecentActivitySkeleton />;
|
||||
}
|
||||
|
||||
const displayedActivities = activities.slice(0, maxItems);
|
||||
const hasMore = activities.length > maxItems;
|
||||
|
||||
return (
|
||||
<Card className={className} data-testid="recent-activity">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5" aria-hidden="true" />
|
||||
Recent Activity
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{activities.length} events
|
||||
</CardDescription>
|
||||
</div>
|
||||
{onViewAll && hasMore && (
|
||||
<Button variant="ghost" size="sm" onClick={onViewAll}>
|
||||
View All
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{displayedActivities.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
|
||||
<Activity className="mb-2 h-8 w-8" aria-hidden="true" />
|
||||
<p className="text-sm">No activity yet</p>
|
||||
<p className="mt-1 text-xs">Activity will appear here as agents work</p>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="divide-y"
|
||||
role="feed"
|
||||
aria-label="Recent project activity"
|
||||
>
|
||||
{displayedActivities.map((activity) => (
|
||||
<ActivityListItem key={activity.id} activity={activity} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
224
frontend/src/components/projects/SprintProgress.tsx
Normal file
224
frontend/src/components/projects/SprintProgress.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* Sprint Progress Component
|
||||
*
|
||||
* Displays sprint overview with progress bar, issue stats, and burndown chart.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { TrendingUp, Calendar } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ProgressBar } from './ProgressBar';
|
||||
import { BurndownChart } from './BurndownChart';
|
||||
import type { Sprint, BurndownDataPoint } from './types';
|
||||
|
||||
interface SprintProgressProps {
|
||||
sprint: Sprint | null;
|
||||
burndownData?: BurndownDataPoint[];
|
||||
availableSprints?: { id: string; name: string }[];
|
||||
selectedSprintId?: string;
|
||||
onSprintChange?: (sprintId: string) => void;
|
||||
isLoading?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function formatSprintDates(startDate?: string, endDate?: string): string {
|
||||
if (!startDate || !endDate) return 'Dates not set';
|
||||
try {
|
||||
const start = format(new Date(startDate), 'MMM d');
|
||||
const end = format(new Date(endDate), 'MMM d, yyyy');
|
||||
return `${start} - ${end}`;
|
||||
} catch {
|
||||
return 'Invalid dates';
|
||||
}
|
||||
}
|
||||
|
||||
function calculateProgress(sprint: Sprint): number {
|
||||
if (sprint.total_issues === 0) return 0;
|
||||
return Math.round((sprint.completed_issues / sprint.total_issues) * 100);
|
||||
}
|
||||
|
||||
interface StatCardProps {
|
||||
value: number;
|
||||
label: string;
|
||||
colorClass: string;
|
||||
}
|
||||
|
||||
function StatCard({ value, label, colorClass }: StatCardProps) {
|
||||
return (
|
||||
<div className="rounded-lg border p-3 text-center">
|
||||
<div className={cn('text-2xl font-bold', colorClass)}>{value}</div>
|
||||
<div className="text-xs text-muted-foreground">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SprintProgressSkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<Skeleton className="h-4 w-56" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-32" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-12" />
|
||||
</div>
|
||||
<Skeleton className="h-2 w-full rounded-full" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="rounded-lg border p-3 text-center">
|
||||
<Skeleton className="mx-auto h-8 w-8" />
|
||||
<Skeleton className="mx-auto mt-1 h-3 w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function SprintProgress({
|
||||
sprint,
|
||||
burndownData = [],
|
||||
availableSprints = [],
|
||||
selectedSprintId,
|
||||
onSprintChange,
|
||||
isLoading = false,
|
||||
className,
|
||||
}: SprintProgressProps) {
|
||||
if (isLoading) {
|
||||
return <SprintProgressSkeleton />;
|
||||
}
|
||||
|
||||
if (!sprint) {
|
||||
return (
|
||||
<Card className={className} data-testid="sprint-progress">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5" aria-hidden="true" />
|
||||
Sprint Overview
|
||||
</CardTitle>
|
||||
<CardDescription>No active sprint</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
|
||||
<Calendar className="mb-2 h-8 w-8" aria-hidden="true" />
|
||||
<p className="text-sm">No sprint is currently active</p>
|
||||
<p className="mt-1 text-xs">Create a sprint to track progress</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const progress = calculateProgress(sprint);
|
||||
const dateRange = formatSprintDates(sprint.start_date, sprint.end_date);
|
||||
|
||||
return (
|
||||
<Card className={className} data-testid="sprint-progress">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5" aria-hidden="true" />
|
||||
Sprint Overview
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{sprint.name} ({dateRange})
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{availableSprints.length > 1 && onSprintChange && (
|
||||
<Select
|
||||
value={selectedSprintId || sprint.id}
|
||||
onValueChange={onSprintChange}
|
||||
>
|
||||
<SelectTrigger className="w-32" aria-label="Select sprint">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableSprints.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<ProgressBar
|
||||
value={progress}
|
||||
showLabel
|
||||
aria-label={`Sprint progress: ${progress}% complete`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-4"
|
||||
role="list"
|
||||
aria-label="Sprint issue statistics"
|
||||
>
|
||||
<StatCard
|
||||
value={sprint.completed_issues}
|
||||
label="Completed"
|
||||
colorClass="text-green-600"
|
||||
/>
|
||||
<StatCard
|
||||
value={sprint.in_progress_issues}
|
||||
label="In Progress"
|
||||
colorClass="text-blue-600"
|
||||
/>
|
||||
<StatCard
|
||||
value={sprint.blocked_issues}
|
||||
label="Blocked"
|
||||
colorClass="text-red-600"
|
||||
/>
|
||||
<StatCard
|
||||
value={sprint.todo_issues}
|
||||
label="To Do"
|
||||
colorClass="text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium">Burndown Chart</h4>
|
||||
<BurndownChart data={burndownData} height={120} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
97
frontend/src/components/projects/StatusBadge.tsx
Normal file
97
frontend/src/components/projects/StatusBadge.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* Status Badge Components
|
||||
*
|
||||
* Reusable badge components for displaying project and autonomy status.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { CircleDot } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ProjectStatus, AutonomyLevel } from './types';
|
||||
|
||||
// ============================================================================
|
||||
// Project Status Badge
|
||||
// ============================================================================
|
||||
|
||||
const projectStatusConfig: Record<ProjectStatus, { label: string; className: string }> = {
|
||||
draft: {
|
||||
label: 'Draft',
|
||||
className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
|
||||
},
|
||||
in_progress: {
|
||||
label: 'In Progress',
|
||||
className: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
||||
},
|
||||
paused: {
|
||||
label: 'Paused',
|
||||
className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
||||
},
|
||||
completed: {
|
||||
label: 'Completed',
|
||||
className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
||||
},
|
||||
blocked: {
|
||||
label: 'Blocked',
|
||||
className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
||||
},
|
||||
archived: {
|
||||
label: 'Archived',
|
||||
className: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
|
||||
},
|
||||
};
|
||||
|
||||
interface ProjectStatusBadgeProps {
|
||||
status: ProjectStatus;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ProjectStatusBadge({ status, className }: ProjectStatusBadgeProps) {
|
||||
const config = projectStatusConfig[status] || projectStatusConfig.draft;
|
||||
|
||||
return (
|
||||
<Badge variant="outline" className={cn(config.className, className)}>
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Autonomy Level Badge
|
||||
// ============================================================================
|
||||
|
||||
const autonomyLevelConfig: Record<AutonomyLevel, { label: string; description: string }> = {
|
||||
full_control: {
|
||||
label: 'Full Control',
|
||||
description: 'Approve every action',
|
||||
},
|
||||
milestone: {
|
||||
label: 'Milestone',
|
||||
description: 'Approve at sprint boundaries',
|
||||
},
|
||||
autonomous: {
|
||||
label: 'Autonomous',
|
||||
description: 'Only major decisions',
|
||||
},
|
||||
};
|
||||
|
||||
interface AutonomyBadgeProps {
|
||||
level: AutonomyLevel;
|
||||
showDescription?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function AutonomyBadge({ level, showDescription = false, className }: AutonomyBadgeProps) {
|
||||
const config = autonomyLevelConfig[level] || autonomyLevelConfig.milestone;
|
||||
|
||||
return (
|
||||
<Badge variant="secondary" className={cn('gap-1', className)} title={config.description}>
|
||||
<CircleDot className="h-3 w-3" aria-hidden="true" />
|
||||
{config.label}
|
||||
{showDescription && (
|
||||
<span className="text-muted-foreground"> - {config.description}</span>
|
||||
)}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
50
frontend/src/components/projects/index.ts
Normal file
50
frontend/src/components/projects/index.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Projects Components
|
||||
*
|
||||
* Public exports for project-related components.
|
||||
*/
|
||||
|
||||
// Types
|
||||
export type {
|
||||
Project,
|
||||
ProjectStatus,
|
||||
AutonomyLevel,
|
||||
AgentInstance,
|
||||
AgentStatus,
|
||||
Sprint,
|
||||
SprintStatus,
|
||||
Issue,
|
||||
IssueStatus,
|
||||
IssuePriority,
|
||||
IssueSummary as IssueSummaryType,
|
||||
ActivityItem,
|
||||
BurndownDataPoint,
|
||||
} from './types';
|
||||
|
||||
// Status Components
|
||||
export { ProjectStatusBadge, AutonomyBadge } from './StatusBadge';
|
||||
export { AgentStatusIndicator } from './AgentStatusIndicator';
|
||||
|
||||
// Chart Components
|
||||
export { ProgressBar } from './ProgressBar';
|
||||
export { BurndownChart } from './BurndownChart';
|
||||
|
||||
// Panel Components
|
||||
export { AgentPanel } from './AgentPanel';
|
||||
export { SprintProgress } from './SprintProgress';
|
||||
export { IssueSummary } from './IssueSummary';
|
||||
export { RecentActivity } from './RecentActivity';
|
||||
|
||||
// Layout Components
|
||||
export { ProjectHeader } from './ProjectHeader';
|
||||
export { ProjectDashboard } from './ProjectDashboard';
|
||||
|
||||
// Wizard Components
|
||||
export { ProjectWizard } from './wizard';
|
||||
export type {
|
||||
WizardStep,
|
||||
WizardState,
|
||||
ProjectComplexity,
|
||||
ClientMode,
|
||||
AutonomyLevel as WizardAutonomyLevel,
|
||||
} from './wizard';
|
||||
120
frontend/src/components/projects/types.ts
Normal file
120
frontend/src/components/projects/types.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* Project Dashboard Types
|
||||
*
|
||||
* Type definitions for project-related components.
|
||||
* These types will be updated when the API endpoints are implemented.
|
||||
*
|
||||
* @module components/projects/types
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// Project Types
|
||||
// ============================================================================
|
||||
|
||||
export type ProjectStatus = 'draft' | 'in_progress' | 'paused' | 'completed' | 'blocked' | 'archived';
|
||||
|
||||
export type AutonomyLevel = 'full_control' | 'milestone' | 'autonomous';
|
||||
|
||||
export interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
status: ProjectStatus;
|
||||
autonomy_level: AutonomyLevel;
|
||||
current_sprint_id?: string;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
owner_id: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Agent Types
|
||||
// ============================================================================
|
||||
|
||||
export type AgentStatus = 'idle' | 'active' | 'working' | 'pending' | 'error' | 'terminated';
|
||||
|
||||
export interface AgentInstance {
|
||||
id: string;
|
||||
agent_type_id: string;
|
||||
project_id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
status: AgentStatus;
|
||||
current_task?: string;
|
||||
last_activity_at?: string;
|
||||
spawned_at: string;
|
||||
avatar?: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Sprint Types
|
||||
// ============================================================================
|
||||
|
||||
export type SprintStatus = 'planning' | 'active' | 'review' | 'completed';
|
||||
|
||||
export interface Sprint {
|
||||
id: string;
|
||||
project_id: string;
|
||||
name: string;
|
||||
goal?: string;
|
||||
status: SprintStatus;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
total_issues: number;
|
||||
completed_issues: number;
|
||||
in_progress_issues: number;
|
||||
blocked_issues: number;
|
||||
todo_issues: number;
|
||||
}
|
||||
|
||||
export interface BurndownDataPoint {
|
||||
day: number;
|
||||
date?: string;
|
||||
remaining: number;
|
||||
ideal: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Issue Types
|
||||
// ============================================================================
|
||||
|
||||
export type IssueStatus = 'open' | 'in_progress' | 'in_review' | 'blocked' | 'done' | 'closed';
|
||||
|
||||
export type IssuePriority = 'low' | 'medium' | 'high' | 'critical';
|
||||
|
||||
export interface Issue {
|
||||
id: string;
|
||||
project_id: string;
|
||||
sprint_id?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: IssueStatus;
|
||||
priority: IssuePriority;
|
||||
assignee_id?: string;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
labels?: string[];
|
||||
}
|
||||
|
||||
export interface IssueSummary {
|
||||
open: number;
|
||||
in_progress: number;
|
||||
in_review: number;
|
||||
blocked: number;
|
||||
done: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Activity Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ActivityItem {
|
||||
id: string;
|
||||
type: 'agent_message' | 'issue_update' | 'agent_status' | 'approval_request' | 'sprint_event' | 'system';
|
||||
agent?: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
requires_action?: boolean;
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
227
frontend/src/components/projects/wizard/ProjectWizard.tsx
Normal file
227
frontend/src/components/projects/wizard/ProjectWizard.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Project Creation Wizard
|
||||
*
|
||||
* Multi-step wizard for creating new Syndarix projects.
|
||||
* Adapts based on project complexity - scripts use a simplified 4-step flow.
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, ArrowRight, Check, CheckCircle2, Loader2 } from 'lucide-react';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { apiClient } from '@/lib/api/client';
|
||||
|
||||
import { StepIndicator } from './StepIndicator';
|
||||
import { useWizardState, type ProjectCreateData } from './useWizardState';
|
||||
import { WIZARD_STEPS } from './constants';
|
||||
import {
|
||||
BasicInfoStep,
|
||||
ComplexityStep,
|
||||
ClientModeStep,
|
||||
AutonomyStep,
|
||||
AgentChatStep,
|
||||
ReviewStep,
|
||||
} from './steps';
|
||||
|
||||
/**
|
||||
* Project response from API
|
||||
*/
|
||||
interface ProjectResponse {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string | null;
|
||||
autonomy_level: string;
|
||||
status: string;
|
||||
settings: Record<string, unknown>;
|
||||
owner_id: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
agent_count: number;
|
||||
issue_count: number;
|
||||
active_sprint_name: string | null;
|
||||
}
|
||||
|
||||
interface ProjectWizardProps {
|
||||
locale: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ProjectWizard({ locale, className }: ProjectWizardProps) {
|
||||
const router = useRouter();
|
||||
const [isCreated, setIsCreated] = useState(false);
|
||||
|
||||
const {
|
||||
state,
|
||||
updateState,
|
||||
resetState,
|
||||
isScriptMode,
|
||||
canProceed,
|
||||
goNext,
|
||||
goBack,
|
||||
getProjectData,
|
||||
} = useWizardState();
|
||||
|
||||
// Project creation mutation using the configured API client
|
||||
const createProjectMutation = useMutation({
|
||||
mutationFn: async (projectData: ProjectCreateData): Promise<ProjectResponse> => {
|
||||
// Call the projects API endpoint
|
||||
// Note: The API client already handles authentication via interceptors
|
||||
const response = await apiClient.instance.post<ProjectResponse>(
|
||||
'/api/v1/projects',
|
||||
{
|
||||
name: projectData.name,
|
||||
slug: projectData.slug,
|
||||
description: projectData.description,
|
||||
autonomy_level: projectData.autonomy_level,
|
||||
settings: projectData.settings,
|
||||
}
|
||||
);
|
||||
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
setIsCreated(true);
|
||||
},
|
||||
onError: (error) => {
|
||||
// Error handling - in production, show toast notification
|
||||
console.error('Failed to create project:', error);
|
||||
},
|
||||
});
|
||||
|
||||
const handleCreate = () => {
|
||||
const projectData = getProjectData();
|
||||
createProjectMutation.mutate(projectData);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
resetState();
|
||||
setIsCreated(false);
|
||||
createProjectMutation.reset();
|
||||
};
|
||||
|
||||
const handleGoToProject = () => {
|
||||
// Navigate to project dashboard - using slug from successful creation
|
||||
if (createProjectMutation.data) {
|
||||
router.push(`/${locale}/projects/${createProjectMutation.data.slug}`);
|
||||
} else {
|
||||
router.push(`/${locale}/projects`);
|
||||
}
|
||||
};
|
||||
|
||||
// Success screen
|
||||
if (isCreated && createProjectMutation.data) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<Card className="text-center">
|
||||
<CardContent className="space-y-6 p-8">
|
||||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600 dark:text-green-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Project Created Successfully!</h2>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
"{createProjectMutation.data.name}" has been created. The Product Owner
|
||||
agent will begin the requirements discovery process shortly.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<Button onClick={handleGoToProject}>Go to Project Dashboard</Button>
|
||||
<Button variant="outline" onClick={handleReset}>
|
||||
Create Another Project
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="mx-auto max-w-3xl">
|
||||
{/* Step Indicator */}
|
||||
<div className="mb-8">
|
||||
<StepIndicator currentStep={state.step} isScriptMode={isScriptMode} />
|
||||
</div>
|
||||
|
||||
{/* Step Content */}
|
||||
<Card>
|
||||
<CardContent className="p-6 md:p-8">
|
||||
{state.step === WIZARD_STEPS.BASIC_INFO && (
|
||||
<BasicInfoStep state={state} updateState={updateState} />
|
||||
)}
|
||||
{state.step === WIZARD_STEPS.COMPLEXITY && (
|
||||
<ComplexityStep state={state} updateState={updateState} />
|
||||
)}
|
||||
{state.step === WIZARD_STEPS.CLIENT_MODE && !isScriptMode && (
|
||||
<ClientModeStep state={state} updateState={updateState} />
|
||||
)}
|
||||
{state.step === WIZARD_STEPS.AUTONOMY && !isScriptMode && (
|
||||
<AutonomyStep state={state} updateState={updateState} />
|
||||
)}
|
||||
{state.step === WIZARD_STEPS.AGENT_CHAT && <AgentChatStep />}
|
||||
{state.step === WIZARD_STEPS.REVIEW && <ReviewStep state={state} />}
|
||||
</CardContent>
|
||||
|
||||
{/* Navigation Footer */}
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={goBack}
|
||||
disabled={state.step === WIZARD_STEPS.BASIC_INFO}
|
||||
className={state.step === WIZARD_STEPS.BASIC_INFO ? 'invisible' : ''}
|
||||
>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{state.step < WIZARD_STEPS.REVIEW ? (
|
||||
<Button onClick={goNext} disabled={!canProceed}>
|
||||
Next
|
||||
<ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
disabled={createProjectMutation.isPending}
|
||||
>
|
||||
{createProjectMutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Check className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Create Project
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error display */}
|
||||
{createProjectMutation.isError && (
|
||||
<div className="border-t bg-destructive/10 p-4">
|
||||
<p className="text-sm text-destructive">
|
||||
Failed to create project. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
frontend/src/components/projects/wizard/SelectableCard.tsx
Normal file
44
frontend/src/components/projects/wizard/SelectableCard.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Selectable Card Component
|
||||
*
|
||||
* A button-based card that can be selected/deselected.
|
||||
* Used for complexity, client mode, and autonomy selection.
|
||||
*/
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface SelectableCardProps {
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
'aria-label'?: string;
|
||||
}
|
||||
|
||||
export function SelectableCard({
|
||||
selected,
|
||||
onClick,
|
||||
children,
|
||||
className,
|
||||
'aria-label': ariaLabel,
|
||||
}: SelectableCardProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
aria-pressed={selected}
|
||||
aria-label={ariaLabel}
|
||||
className={cn(
|
||||
'w-full rounded-lg border-2 p-4 text-left transition-all',
|
||||
'hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||
selected ? 'border-primary bg-primary/5' : 'border-border',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
50
frontend/src/components/projects/wizard/StepIndicator.tsx
Normal file
50
frontend/src/components/projects/wizard/StepIndicator.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step Indicator Component
|
||||
*
|
||||
* Shows progress through the wizard steps with visual feedback.
|
||||
* Dynamically adjusts based on whether script mode is active.
|
||||
*/
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { getStepLabels, getDisplayStep, getTotalSteps } from './constants';
|
||||
|
||||
interface StepIndicatorProps {
|
||||
currentStep: number;
|
||||
isScriptMode: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StepIndicator({ currentStep, isScriptMode, className }: StepIndicatorProps) {
|
||||
const steps = getStepLabels(isScriptMode);
|
||||
const totalSteps = getTotalSteps(isScriptMode);
|
||||
const displayStep = getDisplayStep(currentStep, isScriptMode);
|
||||
|
||||
return (
|
||||
<div className={cn('w-full', className)}>
|
||||
<div className="mb-2 flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>
|
||||
Step {displayStep} of {totalSteps}
|
||||
</span>
|
||||
<span>{steps[displayStep - 1]}</span>
|
||||
</div>
|
||||
<div className="flex gap-1" role="progressbar" aria-valuenow={displayStep} aria-valuemax={totalSteps}>
|
||||
{Array.from({ length: totalSteps }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'h-2 flex-1 rounded-full transition-colors',
|
||||
i + 1 < displayStep
|
||||
? 'bg-primary'
|
||||
: i + 1 === displayStep
|
||||
? 'bg-primary/70'
|
||||
: 'bg-muted'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
188
frontend/src/components/projects/wizard/constants.ts
Normal file
188
frontend/src/components/projects/wizard/constants.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* Constants for the Project Creation Wizard
|
||||
*/
|
||||
|
||||
import {
|
||||
FileCode,
|
||||
Folder,
|
||||
Layers,
|
||||
Building2,
|
||||
Zap,
|
||||
HelpCircle,
|
||||
Shield,
|
||||
Milestone,
|
||||
Bot,
|
||||
} from 'lucide-react';
|
||||
|
||||
import type { ComplexityOption, ClientModeOption, AutonomyOption } from './types';
|
||||
|
||||
/**
|
||||
* Complexity options with descriptions
|
||||
* Note: Timelines match the exact requirements from Issue #50
|
||||
*/
|
||||
export const complexityOptions: ComplexityOption[] = [
|
||||
{
|
||||
id: 'script',
|
||||
label: 'Script',
|
||||
icon: FileCode,
|
||||
description: 'Single-file utilities, automation scripts, CLI tools',
|
||||
scope: 'Minutes to 1-2 hours, single file or small module',
|
||||
examples: 'Data migration script, API integration helper, Build tool plugin',
|
||||
skipConfig: true,
|
||||
},
|
||||
{
|
||||
id: 'simple',
|
||||
label: 'Simple',
|
||||
icon: Folder,
|
||||
description: 'Small applications with clear requirements',
|
||||
scope: '2-3 days, handful of files/components',
|
||||
examples: 'Landing page, REST API endpoint, Browser extension',
|
||||
skipConfig: false,
|
||||
},
|
||||
{
|
||||
id: 'medium',
|
||||
label: 'Medium',
|
||||
icon: Layers,
|
||||
description: 'Full applications with multiple features',
|
||||
scope: '2-3 weeks, multiple modules/services',
|
||||
examples: 'Admin dashboard, E-commerce store, Mobile app',
|
||||
skipConfig: false,
|
||||
},
|
||||
{
|
||||
id: 'complex',
|
||||
label: 'Complex',
|
||||
icon: Building2,
|
||||
description: 'Enterprise systems with many moving parts',
|
||||
scope: '2-3 months, distributed architecture',
|
||||
examples: 'SaaS platform, Microservices ecosystem, Data pipeline',
|
||||
skipConfig: false,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Client mode options
|
||||
*/
|
||||
export const clientModeOptions: ClientModeOption[] = [
|
||||
{
|
||||
id: 'technical',
|
||||
label: 'Technical Mode',
|
||||
icon: Zap,
|
||||
description: "I'll provide detailed technical specifications",
|
||||
details: [
|
||||
'Upload existing specs or PRDs',
|
||||
'Define API contracts and schemas',
|
||||
'Specify architecture patterns',
|
||||
'Direct sprint planning input',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'auto',
|
||||
label: 'Auto Mode',
|
||||
icon: HelpCircle,
|
||||
description: 'Help me figure out what I need',
|
||||
details: [
|
||||
'Guided requirements discovery',
|
||||
'AI suggests best practices',
|
||||
'Interactive brainstorming sessions',
|
||||
'Progressive refinement of scope',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Autonomy level options with approval matrix
|
||||
*/
|
||||
export const autonomyOptions: AutonomyOption[] = [
|
||||
{
|
||||
id: 'full_control',
|
||||
label: 'Full Control',
|
||||
icon: Shield,
|
||||
description: 'Review every action before it happens',
|
||||
approvals: {
|
||||
codeChanges: true,
|
||||
issueUpdates: true,
|
||||
architectureDecisions: true,
|
||||
sprintPlanning: true,
|
||||
deployments: true,
|
||||
},
|
||||
recommended: 'New users or critical projects',
|
||||
},
|
||||
{
|
||||
id: 'milestone',
|
||||
label: 'Milestone',
|
||||
icon: Milestone,
|
||||
description: 'Review at sprint boundaries',
|
||||
approvals: {
|
||||
codeChanges: false,
|
||||
issueUpdates: false,
|
||||
architectureDecisions: true,
|
||||
sprintPlanning: true,
|
||||
deployments: true,
|
||||
},
|
||||
recommended: 'Balanced control (recommended)',
|
||||
},
|
||||
{
|
||||
id: 'autonomous',
|
||||
label: 'Autonomous',
|
||||
icon: Bot,
|
||||
description: 'Only major decisions require approval',
|
||||
approvals: {
|
||||
codeChanges: false,
|
||||
issueUpdates: false,
|
||||
architectureDecisions: true,
|
||||
sprintPlanning: false,
|
||||
deployments: true,
|
||||
},
|
||||
recommended: 'Experienced users or low-risk projects',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Step configuration for wizard navigation
|
||||
*/
|
||||
export const WIZARD_STEPS = {
|
||||
BASIC_INFO: 1,
|
||||
COMPLEXITY: 2,
|
||||
CLIENT_MODE: 3,
|
||||
AUTONOMY: 4,
|
||||
AGENT_CHAT: 5,
|
||||
REVIEW: 6,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Total steps based on complexity mode
|
||||
*/
|
||||
export const getTotalSteps = (isScriptMode: boolean): number => {
|
||||
return isScriptMode ? 4 : 6;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get step labels based on complexity mode
|
||||
*/
|
||||
export const getStepLabels = (isScriptMode: boolean): string[] => {
|
||||
if (isScriptMode) {
|
||||
return ['Basic Info', 'Complexity', 'Agent Chat', 'Review'];
|
||||
}
|
||||
return ['Basic Info', 'Complexity', 'Client Mode', 'Autonomy', 'Agent Chat', 'Review'];
|
||||
};
|
||||
|
||||
/**
|
||||
* Map actual step to display step for scripts
|
||||
*/
|
||||
export const getDisplayStep = (actualStep: number, isScriptMode: boolean): number => {
|
||||
if (!isScriptMode) return actualStep;
|
||||
|
||||
// For scripts: 1->1, 2->2, 5->3, 6->4
|
||||
switch (actualStep) {
|
||||
case 1:
|
||||
return 1;
|
||||
case 2:
|
||||
return 2;
|
||||
case 5:
|
||||
return 3;
|
||||
case 6:
|
||||
return 4;
|
||||
default:
|
||||
return actualStep;
|
||||
}
|
||||
};
|
||||
47
frontend/src/components/projects/wizard/index.ts
Normal file
47
frontend/src/components/projects/wizard/index.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Project Creation Wizard
|
||||
*
|
||||
* Public exports for the multi-step project creation wizard.
|
||||
*/
|
||||
|
||||
// Main Component
|
||||
export { ProjectWizard } from './ProjectWizard';
|
||||
|
||||
// Hook
|
||||
export { useWizardState } from './useWizardState';
|
||||
export type { ProjectCreateData } from './useWizardState';
|
||||
|
||||
// Types
|
||||
export type {
|
||||
WizardStep,
|
||||
WizardState,
|
||||
ProjectComplexity,
|
||||
ClientMode,
|
||||
AutonomyLevel,
|
||||
ApprovalMatrix,
|
||||
} from './types';
|
||||
|
||||
// Constants
|
||||
export {
|
||||
WIZARD_STEPS,
|
||||
getStepLabels,
|
||||
getTotalSteps,
|
||||
getDisplayStep,
|
||||
complexityOptions,
|
||||
clientModeOptions,
|
||||
autonomyOptions,
|
||||
} from './constants';
|
||||
|
||||
// UI Components
|
||||
export { StepIndicator } from './StepIndicator';
|
||||
export { SelectableCard } from './SelectableCard';
|
||||
|
||||
// Step Components
|
||||
export {
|
||||
BasicInfoStep,
|
||||
ComplexityStep,
|
||||
ClientModeStep,
|
||||
AutonomyStep,
|
||||
AgentChatStep,
|
||||
ReviewStep,
|
||||
} from './steps';
|
||||
171
frontend/src/components/projects/wizard/steps/AgentChatStep.tsx
Normal file
171
frontend/src/components/projects/wizard/steps/AgentChatStep.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 5: Agent Chat Placeholder
|
||||
*
|
||||
* Preview of the requirements discovery chat interface.
|
||||
* This will be fully implemented in Phase 4.
|
||||
*/
|
||||
|
||||
import { Bot, User, MessageSquare, Sparkles } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface MockMessage {
|
||||
id: number;
|
||||
role: 'agent' | 'user';
|
||||
name: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
const mockMessages: MockMessage[] = [
|
||||
{
|
||||
id: 1,
|
||||
role: 'agent',
|
||||
name: 'Product Owner Agent',
|
||||
message:
|
||||
"Hello! I'm your Product Owner agent. I'll help you define what we're building. Can you tell me more about your project goals?",
|
||||
timestamp: '10:00 AM',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
role: 'user',
|
||||
name: 'You',
|
||||
message:
|
||||
'I want to build an e-commerce platform for selling handmade crafts. It should have user accounts, a product catalog, and checkout.',
|
||||
timestamp: '10:02 AM',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
role: 'agent',
|
||||
name: 'Product Owner Agent',
|
||||
message:
|
||||
"Great! Let me break this down into user stories. For the MVP, I'd suggest focusing on: user registration/login, product browsing with categories, and a simple cart checkout. Should we also include seller accounts or just a single store?",
|
||||
timestamp: '10:03 AM',
|
||||
},
|
||||
];
|
||||
|
||||
export function AgentChatStep() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-2xl font-bold">Requirements Discovery</h2>
|
||||
<Badge variant="secondary">Coming in Phase 4</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
In the full version, you'll chat with our Product Owner agent here to define
|
||||
requirements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="border-b pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||||
<Bot className="h-5 w-5 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">Product Owner Agent</CardTitle>
|
||||
<CardDescription>Requirements discovery and sprint planning</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
Preview Only
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{/* Chat Messages Area */}
|
||||
<div
|
||||
className="max-h-80 space-y-4 overflow-y-auto p-4"
|
||||
role="log"
|
||||
aria-label="Chat preview messages"
|
||||
>
|
||||
{mockMessages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className={cn('flex gap-3', msg.role === 'user' ? 'flex-row-reverse' : '')}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
|
||||
msg.role === 'agent' ? 'bg-primary/10' : 'bg-muted'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{msg.role === 'agent' ? (
|
||||
<Bot className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'max-w-[80%] rounded-lg px-4 py-2',
|
||||
msg.role === 'agent' ? 'bg-muted' : 'bg-primary text-primary-foreground'
|
||||
)}
|
||||
>
|
||||
<p className="text-sm">{msg.message}</p>
|
||||
<p
|
||||
className={cn(
|
||||
'mt-1 text-xs',
|
||||
msg.role === 'agent' ? 'text-muted-foreground' : 'text-primary-foreground/70'
|
||||
)}
|
||||
>
|
||||
{msg.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chat Input Area (disabled preview) */}
|
||||
<div className="border-t p-4">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Type your message... (disabled in preview)"
|
||||
disabled
|
||||
className="flex-1"
|
||||
aria-label="Chat input (disabled in preview)"
|
||||
/>
|
||||
<Button disabled aria-label="Send message (disabled in preview)">
|
||||
<MessageSquare className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-2 text-center text-xs text-muted-foreground">
|
||||
This chat interface is a preview. Full agent interaction will be available in Phase 4.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-dashed bg-muted/30">
|
||||
<CardContent className="flex items-center gap-4 p-6">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||||
<Sparkles className="h-6 w-6 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">What to Expect in the Full Version</h4>
|
||||
<ul className="mt-2 space-y-1 text-sm text-muted-foreground">
|
||||
<li>- Interactive requirements gathering with AI Product Owner</li>
|
||||
<li>- Architecture spike with BA and Architect agents</li>
|
||||
<li>- Collaborative backlog creation and prioritization</li>
|
||||
<li>- Real-time refinement of user stories</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
153
frontend/src/components/projects/wizard/steps/AutonomyStep.tsx
Normal file
153
frontend/src/components/projects/wizard/steps/AutonomyStep.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 4: Autonomy Level Selection
|
||||
*
|
||||
* Allows users to choose how much control they want over agent actions.
|
||||
* Includes a detailed approval matrix comparison.
|
||||
* Skipped for script complexity projects.
|
||||
*/
|
||||
|
||||
import { Check, AlertCircle } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SelectableCard } from '../SelectableCard';
|
||||
import { autonomyOptions } from '../constants';
|
||||
import type { WizardState, AutonomyLevel, ApprovalMatrix } from '../types';
|
||||
import { approvalLabels } from '../types';
|
||||
|
||||
interface AutonomyStepProps {
|
||||
state: WizardState;
|
||||
updateState: (updates: Partial<WizardState>) => void;
|
||||
}
|
||||
|
||||
export function AutonomyStep({ state, updateState }: AutonomyStepProps) {
|
||||
const handleSelect = (autonomyLevel: AutonomyLevel) => {
|
||||
updateState({ autonomyLevel });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Autonomy Level</h2>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
How much control do you want over the AI agents' actions?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4" role="radiogroup" aria-label="Autonomy level options">
|
||||
{autonomyOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
const isSelected = state.autonomyLevel === option.id;
|
||||
|
||||
return (
|
||||
<SelectableCard
|
||||
key={option.id}
|
||||
selected={isSelected}
|
||||
onClick={() => handleSelect(option.id)}
|
||||
aria-label={`${option.label}: ${option.description}`}
|
||||
>
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
|
||||
isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold">{option.label}</h3>
|
||||
{isSelected && (
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
|
||||
<Check className="h-3 w-3" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{option.description}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
<span className="font-medium">Best for:</span> {option.recommended}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 md:justify-end">
|
||||
{Object.entries(option.approvals).map(([key, requiresApproval]) => (
|
||||
<Badge
|
||||
key={key}
|
||||
variant={requiresApproval ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{requiresApproval ? 'Approve' : 'Auto'}:{' '}
|
||||
{approvalLabels[key as keyof ApprovalMatrix]}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</SelectableCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Card className="bg-muted/50">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<AlertCircle className="h-4 w-4" aria-hidden="true" />
|
||||
Approval Matrix
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm" aria-label="Approval requirements by autonomy level">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th scope="col" className="pb-2 text-left font-medium">
|
||||
Action Type
|
||||
</th>
|
||||
<th scope="col" className="pb-2 text-center font-medium">
|
||||
Full Control
|
||||
</th>
|
||||
<th scope="col" className="pb-2 text-center font-medium">
|
||||
Milestone
|
||||
</th>
|
||||
<th scope="col" className="pb-2 text-center font-medium">
|
||||
Autonomous
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{Object.keys(autonomyOptions[0].approvals).map((key) => (
|
||||
<tr key={key}>
|
||||
<td className="py-2 text-muted-foreground">
|
||||
{approvalLabels[key as keyof ApprovalMatrix]}
|
||||
</td>
|
||||
{autonomyOptions.map((option) => (
|
||||
<td key={option.id} className="py-2 text-center">
|
||||
{option.approvals[key as keyof ApprovalMatrix] ? (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Required
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">Automatic</span>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
142
frontend/src/components/projects/wizard/steps/BasicInfoStep.tsx
Normal file
142
frontend/src/components/projects/wizard/steps/BasicInfoStep.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 1: Basic Information
|
||||
*
|
||||
* Collects project name, description, and optional repository URL.
|
||||
*/
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { GitBranch } from 'lucide-react';
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import type { WizardState } from '../types';
|
||||
|
||||
const basicInfoSchema = z.object({
|
||||
projectName: z
|
||||
.string()
|
||||
.min(3, 'Project name must be at least 3 characters')
|
||||
.max(255, 'Project name must be less than 255 characters'),
|
||||
description: z.string().max(2000, 'Description must be less than 2000 characters').optional(),
|
||||
repoUrl: z.string().url('Please enter a valid URL').or(z.literal('')).optional(),
|
||||
});
|
||||
|
||||
type BasicInfoFormData = z.infer<typeof basicInfoSchema>;
|
||||
|
||||
interface BasicInfoStepProps {
|
||||
state: WizardState;
|
||||
updateState: (updates: Partial<WizardState>) => void;
|
||||
}
|
||||
|
||||
export function BasicInfoStep({ state, updateState }: BasicInfoStepProps) {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
trigger,
|
||||
} = useForm<BasicInfoFormData>({
|
||||
resolver: zodResolver(basicInfoSchema),
|
||||
defaultValues: {
|
||||
projectName: state.projectName,
|
||||
description: state.description,
|
||||
repoUrl: state.repoUrl,
|
||||
},
|
||||
mode: 'onBlur',
|
||||
});
|
||||
|
||||
const handleChange = (field: keyof BasicInfoFormData, value: string) => {
|
||||
updateState({ [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Create New Project</h2>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Let's start with the basics. Give your project a name and description.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project-name">
|
||||
Project Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="project-name"
|
||||
placeholder="e.g., E-Commerce Platform Redesign"
|
||||
{...register('projectName')}
|
||||
value={state.projectName}
|
||||
onChange={(e) => {
|
||||
handleChange('projectName', e.target.value);
|
||||
if (errors.projectName) {
|
||||
trigger('projectName');
|
||||
}
|
||||
}}
|
||||
onBlur={() => trigger('projectName')}
|
||||
aria-invalid={!!errors.projectName}
|
||||
aria-describedby={errors.projectName ? 'project-name-error' : undefined}
|
||||
/>
|
||||
{errors.projectName && (
|
||||
<p id="project-name-error" className="text-sm text-destructive">
|
||||
{errors.projectName.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description (Optional)</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Briefly describe what this project is about..."
|
||||
{...register('description')}
|
||||
value={state.description}
|
||||
onChange={(e) => handleChange('description', e.target.value)}
|
||||
rows={3}
|
||||
aria-describedby="description-hint"
|
||||
/>
|
||||
<p id="description-hint" className="text-xs text-muted-foreground">
|
||||
A clear description helps the AI agents understand your project better.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="repo-url">Repository URL (Optional)</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md border bg-muted">
|
||||
<GitBranch className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
|
||||
</div>
|
||||
<Input
|
||||
id="repo-url"
|
||||
placeholder="https://github.com/your-org/your-repo"
|
||||
{...register('repoUrl')}
|
||||
value={state.repoUrl}
|
||||
onChange={(e) => {
|
||||
handleChange('repoUrl', e.target.value);
|
||||
if (errors.repoUrl) {
|
||||
trigger('repoUrl');
|
||||
}
|
||||
}}
|
||||
onBlur={() => trigger('repoUrl')}
|
||||
className="flex-1"
|
||||
aria-invalid={!!errors.repoUrl}
|
||||
aria-describedby={errors.repoUrl ? 'repo-url-error' : 'repo-url-hint'}
|
||||
/>
|
||||
</div>
|
||||
{errors.repoUrl ? (
|
||||
<p id="repo-url-error" className="text-sm text-destructive">
|
||||
{errors.repoUrl.message}
|
||||
</p>
|
||||
) : (
|
||||
<p id="repo-url-hint" className="text-xs text-muted-foreground">
|
||||
Connect an existing repository or leave blank to create a new one.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 3: Client Mode Selection
|
||||
*
|
||||
* Allows users to choose how they want to interact with Syndarix agents.
|
||||
* Skipped for script complexity projects.
|
||||
*/
|
||||
|
||||
import { Check, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SelectableCard } from '../SelectableCard';
|
||||
import { clientModeOptions } from '../constants';
|
||||
import type { WizardState, ClientMode } from '../types';
|
||||
|
||||
interface ClientModeStepProps {
|
||||
state: WizardState;
|
||||
updateState: (updates: Partial<WizardState>) => void;
|
||||
}
|
||||
|
||||
export function ClientModeStep({ state, updateState }: ClientModeStepProps) {
|
||||
const handleSelect = (clientMode: ClientMode) => {
|
||||
updateState({ clientMode });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">How Would You Like to Work?</h2>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Choose how you want to interact with Syndarix agents.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2" role="radiogroup" aria-label="Client interaction mode options">
|
||||
{clientModeOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
const isSelected = state.clientMode === option.id;
|
||||
|
||||
return (
|
||||
<SelectableCard
|
||||
key={option.id}
|
||||
selected={isSelected}
|
||||
onClick={() => handleSelect(option.id)}
|
||||
className="h-full"
|
||||
aria-label={`${option.label}: ${option.description}`}
|
||||
>
|
||||
<div className="flex h-full flex-col space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-12 w-12 items-center justify-center rounded-lg',
|
||||
isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
||||
)}
|
||||
>
|
||||
<Icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
|
||||
<Check className="h-4 w-4" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">{option.label}</h3>
|
||||
<p className="mt-1 text-muted-foreground">{option.description}</p>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<ul className="flex-1 space-y-2">
|
||||
{option.details.map((detail) => (
|
||||
<li key={detail} className="flex items-start gap-2 text-sm">
|
||||
<CheckCircle2
|
||||
className={cn(
|
||||
'mt-0.5 h-4 w-4 shrink-0',
|
||||
isSelected ? 'text-primary' : 'text-muted-foreground'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="text-muted-foreground">{detail}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</SelectableCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 2: Complexity Assessment
|
||||
*
|
||||
* Allows users to select the project complexity level.
|
||||
* Script complexity triggers simplified flow (skips steps 3-4).
|
||||
*/
|
||||
|
||||
import { Check } from 'lucide-react';
|
||||
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SelectableCard } from '../SelectableCard';
|
||||
import { complexityOptions } from '../constants';
|
||||
import type { WizardState, ProjectComplexity } from '../types';
|
||||
|
||||
interface ComplexityStepProps {
|
||||
state: WizardState;
|
||||
updateState: (updates: Partial<WizardState>) => void;
|
||||
}
|
||||
|
||||
export function ComplexityStep({ state, updateState }: ComplexityStepProps) {
|
||||
const handleSelect = (complexity: ProjectComplexity) => {
|
||||
updateState({ complexity });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Project Complexity</h2>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
How complex is your project? This helps us assign the right resources.
|
||||
</p>
|
||||
{state.complexity === 'script' && (
|
||||
<p className="mt-2 text-sm text-primary">
|
||||
Scripts use a simplified flow - you'll skip to agent chat directly.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2" role="radiogroup" aria-label="Project complexity options">
|
||||
{complexityOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
const isSelected = state.complexity === option.id;
|
||||
|
||||
return (
|
||||
<SelectableCard
|
||||
key={option.id}
|
||||
selected={isSelected}
|
||||
onClick={() => handleSelect(option.id)}
|
||||
aria-label={`${option.label}: ${option.description}`}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-10 w-10 items-center justify-center rounded-lg',
|
||||
isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" aria-hidden="true" />
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
|
||||
<Check className="h-4 w-4" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold">{option.label}</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground">{option.description}</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="space-y-1 text-sm">
|
||||
<p className="text-muted-foreground">
|
||||
<span className="font-medium text-foreground">Scope:</span> {option.scope}
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
<span className="font-medium text-foreground">Examples:</span> {option.examples}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectableCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
frontend/src/components/projects/wizard/steps/ReviewStep.tsx
Normal file
158
frontend/src/components/projects/wizard/steps/ReviewStep.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 6: Review & Confirmation
|
||||
*
|
||||
* Shows a summary of all selections before creating the project.
|
||||
*/
|
||||
|
||||
import { CheckCircle2 } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { complexityOptions, clientModeOptions, autonomyOptions } from '../constants';
|
||||
import type { WizardState } from '../types';
|
||||
|
||||
interface ReviewStepProps {
|
||||
state: WizardState;
|
||||
}
|
||||
|
||||
export function ReviewStep({ state }: ReviewStepProps) {
|
||||
const complexity = complexityOptions.find((o) => o.id === state.complexity);
|
||||
const clientMode = clientModeOptions.find((o) => o.id === state.clientMode);
|
||||
const autonomy = autonomyOptions.find((o) => o.id === state.autonomyLevel);
|
||||
|
||||
const isScriptMode = state.complexity === 'script';
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Review Your Project</h2>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Please review your selections before creating the project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Basic Info Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Basic Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Project Name</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{state.projectName || 'Not specified'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Description</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{state.description || 'No description provided'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Repository</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{state.repoUrl || 'New repository will be created'}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Complexity Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Project Complexity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{complexity ? (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<complexity.icon className="h-5 w-5 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{complexity.label}</p>
|
||||
<p className="text-sm text-muted-foreground">{complexity.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Not selected</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Client Mode Card - show for non-scripts or show auto-selected for scripts */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Interaction Mode</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isScriptMode ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Auto Mode (automatically set for script projects)
|
||||
</p>
|
||||
) : clientMode ? (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<clientMode.icon className="h-5 w-5 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{clientMode.label}</p>
|
||||
<p className="text-sm text-muted-foreground">{clientMode.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Not selected</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Autonomy Card - show for non-scripts or show auto-selected for scripts */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Autonomy Level</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isScriptMode ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Autonomous (automatically set for script projects)
|
||||
</p>
|
||||
) : autonomy ? (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<autonomy.icon className="h-5 w-5 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{autonomy.label}</p>
|
||||
<p className="text-sm text-muted-foreground">{autonomy.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Not selected</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Summary Alert */}
|
||||
<Card className="border-primary/50 bg-primary/5">
|
||||
<CardContent className="flex items-start gap-4 p-6">
|
||||
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" aria-hidden="true" />
|
||||
<div>
|
||||
<h4 className="font-medium">Ready to Create</h4>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Once you create this project, Syndarix will set up your environment and begin the
|
||||
requirements discovery phase with the Product Owner agent.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
frontend/src/components/projects/wizard/steps/index.ts
Normal file
10
frontend/src/components/projects/wizard/steps/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Export all wizard step components
|
||||
*/
|
||||
|
||||
export { BasicInfoStep } from './BasicInfoStep';
|
||||
export { ComplexityStep } from './ComplexityStep';
|
||||
export { ClientModeStep } from './ClientModeStep';
|
||||
export { AutonomyStep } from './AutonomyStep';
|
||||
export { AgentChatStep } from './AgentChatStep';
|
||||
export { ReviewStep } from './ReviewStep';
|
||||
109
frontend/src/components/projects/wizard/types.ts
Normal file
109
frontend/src/components/projects/wizard/types.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* Types and constants for the Project Creation Wizard
|
||||
*/
|
||||
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Project complexity levels matching backend enum
|
||||
*/
|
||||
export type ProjectComplexity = 'script' | 'simple' | 'medium' | 'complex';
|
||||
|
||||
/**
|
||||
* Client interaction mode matching backend enum
|
||||
*/
|
||||
export type ClientMode = 'technical' | 'auto';
|
||||
|
||||
/**
|
||||
* Autonomy level matching backend enum
|
||||
*/
|
||||
export type AutonomyLevel = 'full_control' | 'milestone' | 'autonomous';
|
||||
|
||||
/**
|
||||
* Wizard step numbers
|
||||
*/
|
||||
export type WizardStep = 1 | 2 | 3 | 4 | 5 | 6;
|
||||
|
||||
/**
|
||||
* Full wizard state
|
||||
*/
|
||||
export interface WizardState {
|
||||
step: WizardStep;
|
||||
projectName: string;
|
||||
description: string;
|
||||
repoUrl: string;
|
||||
complexity: ProjectComplexity | null;
|
||||
clientMode: ClientMode | null;
|
||||
autonomyLevel: AutonomyLevel | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Complexity option configuration
|
||||
*/
|
||||
export interface ComplexityOption {
|
||||
id: ProjectComplexity;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
scope: string;
|
||||
examples: string;
|
||||
skipConfig: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Client mode option configuration
|
||||
*/
|
||||
export interface ClientModeOption {
|
||||
id: ClientMode;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
details: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Approval types for autonomy matrix
|
||||
*/
|
||||
export interface ApprovalMatrix {
|
||||
codeChanges: boolean;
|
||||
issueUpdates: boolean;
|
||||
architectureDecisions: boolean;
|
||||
sprintPlanning: boolean;
|
||||
deployments: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Autonomy option configuration
|
||||
*/
|
||||
export interface AutonomyOption {
|
||||
id: AutonomyLevel;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
approvals: ApprovalMatrix;
|
||||
recommended: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initial wizard state
|
||||
*/
|
||||
export const initialWizardState: WizardState = {
|
||||
step: 1,
|
||||
projectName: '',
|
||||
description: '',
|
||||
repoUrl: '',
|
||||
complexity: null,
|
||||
clientMode: null,
|
||||
autonomyLevel: null,
|
||||
};
|
||||
|
||||
/**
|
||||
* Human-readable labels for approval matrix keys
|
||||
*/
|
||||
export const approvalLabels: Record<keyof ApprovalMatrix, string> = {
|
||||
codeChanges: 'Code Changes',
|
||||
issueUpdates: 'Issue Updates',
|
||||
architectureDecisions: 'Architecture Decisions',
|
||||
sprintPlanning: 'Sprint Planning',
|
||||
deployments: 'Deployments',
|
||||
};
|
||||
164
frontend/src/components/projects/wizard/useWizardState.ts
Normal file
164
frontend/src/components/projects/wizard/useWizardState.ts
Normal file
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* Custom hook for managing wizard state
|
||||
*
|
||||
* Handles step navigation logic including script mode shortcuts.
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
import type { WizardState, WizardStep } from './types';
|
||||
import { initialWizardState } from './types';
|
||||
import { WIZARD_STEPS } from './constants';
|
||||
|
||||
interface UseWizardStateReturn {
|
||||
state: WizardState;
|
||||
updateState: (updates: Partial<WizardState>) => void;
|
||||
resetState: () => void;
|
||||
isScriptMode: boolean;
|
||||
canProceed: boolean;
|
||||
goNext: () => void;
|
||||
goBack: () => void;
|
||||
getProjectData: () => ProjectCreateData;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data structure for project creation API call
|
||||
*/
|
||||
export interface ProjectCreateData {
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string | undefined;
|
||||
autonomy_level: 'full_control' | 'milestone' | 'autonomous';
|
||||
settings: {
|
||||
complexity: string;
|
||||
client_mode: string;
|
||||
repo_url?: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a URL-safe slug from a project name
|
||||
*/
|
||||
function generateSlug(name: string): string {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^\w\s-]/g, '') // Remove special characters
|
||||
.replace(/\s+/g, '-') // Replace spaces with hyphens
|
||||
.replace(/-+/g, '-') // Replace multiple hyphens with single
|
||||
.replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
|
||||
}
|
||||
|
||||
export function useWizardState(): UseWizardStateReturn {
|
||||
const [state, setState] = useState<WizardState>(initialWizardState);
|
||||
|
||||
const isScriptMode = state.complexity === 'script';
|
||||
|
||||
const updateState = useCallback((updates: Partial<WizardState>) => {
|
||||
setState((prev) => ({ ...prev, ...updates }));
|
||||
}, []);
|
||||
|
||||
const resetState = useCallback(() => {
|
||||
setState(initialWizardState);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Check if user can proceed to next step
|
||||
*/
|
||||
const canProceed = (() => {
|
||||
switch (state.step) {
|
||||
case WIZARD_STEPS.BASIC_INFO:
|
||||
return state.projectName.trim().length >= 3;
|
||||
case WIZARD_STEPS.COMPLEXITY:
|
||||
return state.complexity !== null;
|
||||
case WIZARD_STEPS.CLIENT_MODE:
|
||||
return isScriptMode || state.clientMode !== null;
|
||||
case WIZARD_STEPS.AUTONOMY:
|
||||
return isScriptMode || state.autonomyLevel !== null;
|
||||
case WIZARD_STEPS.AGENT_CHAT:
|
||||
return true; // Agent chat is preview only
|
||||
case WIZARD_STEPS.REVIEW:
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* Navigate to next step, handling script mode skip logic
|
||||
*/
|
||||
const goNext = useCallback(() => {
|
||||
if (!canProceed) return;
|
||||
|
||||
setState((prev) => {
|
||||
let nextStep = (prev.step + 1) as WizardStep;
|
||||
const currentIsScriptMode = prev.complexity === 'script';
|
||||
|
||||
// For scripts, skip from step 2 directly to step 5 (agent chat)
|
||||
if (currentIsScriptMode && prev.step === WIZARD_STEPS.COMPLEXITY) {
|
||||
return {
|
||||
...prev,
|
||||
step: WIZARD_STEPS.AGENT_CHAT as WizardStep,
|
||||
clientMode: 'auto',
|
||||
autonomyLevel: 'autonomous',
|
||||
};
|
||||
}
|
||||
|
||||
// Don't go past review step
|
||||
if (nextStep > WIZARD_STEPS.REVIEW) {
|
||||
nextStep = WIZARD_STEPS.REVIEW as WizardStep;
|
||||
}
|
||||
|
||||
return { ...prev, step: nextStep };
|
||||
});
|
||||
}, [canProceed]);
|
||||
|
||||
/**
|
||||
* Navigate to previous step, handling script mode skip logic
|
||||
*/
|
||||
const goBack = useCallback(() => {
|
||||
setState((prev) => {
|
||||
if (prev.step <= 1) return prev;
|
||||
|
||||
let prevStep = (prev.step - 1) as WizardStep;
|
||||
const currentIsScriptMode = prev.complexity === 'script';
|
||||
|
||||
// For scripts, go from step 5 back to step 2
|
||||
if (currentIsScriptMode && prev.step === WIZARD_STEPS.AGENT_CHAT) {
|
||||
prevStep = WIZARD_STEPS.COMPLEXITY as WizardStep;
|
||||
}
|
||||
|
||||
return { ...prev, step: prevStep };
|
||||
});
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Get data formatted for the project creation API
|
||||
*/
|
||||
const getProjectData = useCallback((): ProjectCreateData => {
|
||||
const slug = generateSlug(state.projectName);
|
||||
|
||||
return {
|
||||
name: state.projectName.trim(),
|
||||
slug,
|
||||
description: state.description.trim() || undefined,
|
||||
autonomy_level: state.autonomyLevel || 'milestone',
|
||||
settings: {
|
||||
complexity: state.complexity || 'medium',
|
||||
client_mode: state.clientMode || 'auto',
|
||||
...(state.repoUrl && { repo_url: state.repoUrl }),
|
||||
},
|
||||
};
|
||||
}, [state]);
|
||||
|
||||
return {
|
||||
state,
|
||||
updateState,
|
||||
resetState,
|
||||
isScriptMode,
|
||||
canProceed,
|
||||
goNext,
|
||||
goBack,
|
||||
getProjectData,
|
||||
};
|
||||
}
|
||||
115
frontend/tests/components/projects/AgentPanel.test.tsx
Normal file
115
frontend/tests/components/projects/AgentPanel.test.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* AgentPanel Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { AgentPanel } from '@/components/projects/AgentPanel';
|
||||
import type { AgentInstance } from '@/components/projects/types';
|
||||
|
||||
const mockAgents: AgentInstance[] = [
|
||||
{
|
||||
id: 'agent-1',
|
||||
agent_type_id: 'type-po',
|
||||
project_id: '1',
|
||||
name: 'ProductOwner',
|
||||
role: 'Product Owner',
|
||||
status: 'working',
|
||||
current_task: 'Refining user stories',
|
||||
last_activity_at: new Date().toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'agent-2',
|
||||
agent_type_id: 'type-fe',
|
||||
project_id: '1',
|
||||
name: 'Developer',
|
||||
role: 'Frontend Developer',
|
||||
status: 'idle',
|
||||
current_task: undefined,
|
||||
last_activity_at: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'agent-3',
|
||||
agent_type_id: 'type-qa',
|
||||
project_id: '1',
|
||||
name: 'QAEngineer',
|
||||
role: 'QA',
|
||||
status: 'error',
|
||||
current_task: 'Test run failed',
|
||||
last_activity_at: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
|
||||
spawned_at: '2024-01-15T10:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
describe('AgentPanel', () => {
|
||||
it('renders agent list', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
|
||||
expect(screen.getByTestId('agent-panel')).toBeInTheDocument();
|
||||
expect(screen.getByText('ProductOwner')).toBeInTheDocument();
|
||||
expect(screen.getByText('Developer')).toBeInTheDocument();
|
||||
expect(screen.getByText('QAEngineer')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows active agent count in description', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
|
||||
// Only 1 agent is "working" (ProductOwner)
|
||||
expect(screen.getByText('1 of 3 agents working')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty state when no agents', () => {
|
||||
render(<AgentPanel agents={[]} />);
|
||||
|
||||
expect(screen.getByText('No agents assigned to this project')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
render(<AgentPanel agents={[]} isLoading />);
|
||||
|
||||
// Should not show empty state
|
||||
expect(screen.queryByText('No agents assigned to this project')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows current task for agents', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
|
||||
expect(screen.getByText('Refining user stories')).toBeInTheDocument();
|
||||
expect(screen.getByText('No active task')).toBeInTheDocument();
|
||||
expect(screen.getByText('Test run failed')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onManageAgents when button is clicked', () => {
|
||||
const onManageAgents = jest.fn();
|
||||
render(<AgentPanel agents={mockAgents} onManageAgents={onManageAgents} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /manage agents/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(onManageAgents).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<AgentPanel agents={mockAgents} className="custom-class" />);
|
||||
|
||||
expect(screen.getByTestId('agent-panel')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('renders agent item test ids', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
|
||||
expect(screen.getByTestId('agent-item-agent-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('agent-item-agent-2')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('agent-item-agent-3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows avatar initials from role', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
|
||||
// Product Owner -> PO, Frontend Developer -> FD, QA -> QA
|
||||
expect(screen.getByText('PO')).toBeInTheDocument();
|
||||
expect(screen.getByText('FD')).toBeInTheDocument();
|
||||
expect(screen.getByText('QA')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* AgentStatusIndicator Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { AgentStatusIndicator } from '@/components/projects/AgentStatusIndicator';
|
||||
|
||||
describe('AgentStatusIndicator', () => {
|
||||
it('renders idle status', () => {
|
||||
render(<AgentStatusIndicator status="idle" />);
|
||||
const indicator = screen.getByTitle('Agent is idle');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders active status', () => {
|
||||
render(<AgentStatusIndicator status="active" />);
|
||||
const indicator = screen.getByTitle('Agent is active');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders working status with animation', () => {
|
||||
render(<AgentStatusIndicator status="working" />);
|
||||
const indicator = screen.getByTitle('Agent is working');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
// Working status should have the pulse animation class
|
||||
expect(indicator.querySelector('.animate-pulse')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders pending status', () => {
|
||||
render(<AgentStatusIndicator status="pending" />);
|
||||
const indicator = screen.getByTitle('Agent is pending');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders error status', () => {
|
||||
render(<AgentStatusIndicator status="error" />);
|
||||
const indicator = screen.getByTitle('Agent has error');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders terminated status', () => {
|
||||
render(<AgentStatusIndicator status="terminated" />);
|
||||
const indicator = screen.getByTitle('Agent is terminated');
|
||||
expect(indicator).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders with small size by default', () => {
|
||||
render(<AgentStatusIndicator status="active" />);
|
||||
const indicator = screen.getByTitle('Agent is active');
|
||||
expect(indicator).toHaveClass('h-4', 'w-4');
|
||||
});
|
||||
|
||||
it('renders with large size when specified', () => {
|
||||
render(<AgentStatusIndicator status="active" size="lg" />);
|
||||
const indicator = screen.getByTitle('Agent is active');
|
||||
expect(indicator).toHaveClass('h-5', 'w-5');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<AgentStatusIndicator status="active" className="custom-class" />);
|
||||
const indicator = screen.getByTitle('Agent is active');
|
||||
expect(indicator).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('renders with showLabel prop', () => {
|
||||
render(<AgentStatusIndicator status="active" showLabel />);
|
||||
expect(screen.getByText('Active')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
93
frontend/tests/components/projects/IssueSummary.test.tsx
Normal file
93
frontend/tests/components/projects/IssueSummary.test.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* IssueSummary Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { IssueSummary } from '@/components/projects/IssueSummary';
|
||||
import type { IssueSummary as IssueSummaryType } from '@/components/projects/types';
|
||||
|
||||
const mockSummary: IssueSummaryType = {
|
||||
total: 24,
|
||||
open: 8,
|
||||
in_progress: 5,
|
||||
in_review: 3,
|
||||
blocked: 2,
|
||||
done: 6,
|
||||
};
|
||||
|
||||
describe('IssueSummary', () => {
|
||||
it('renders issue counts', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
|
||||
expect(screen.getByTestId('issue-summary')).toBeInTheDocument();
|
||||
expect(screen.getByText('Issue Summary')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays all status counts', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
|
||||
expect(screen.getByText('Open')).toBeInTheDocument();
|
||||
expect(screen.getByText('8')).toBeInTheDocument(); // open
|
||||
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('5')).toBeInTheDocument(); // in progress
|
||||
|
||||
expect(screen.getByText('In Review')).toBeInTheDocument();
|
||||
expect(screen.getByText('3')).toBeInTheDocument(); // in review
|
||||
|
||||
expect(screen.getByText('Blocked')).toBeInTheDocument();
|
||||
expect(screen.getByText('2')).toBeInTheDocument(); // blocked
|
||||
|
||||
expect(screen.getByText('Completed')).toBeInTheDocument();
|
||||
expect(screen.getByText('6')).toBeInTheDocument(); // done
|
||||
});
|
||||
|
||||
it('shows empty state when no summary', () => {
|
||||
render(<IssueSummary summary={null} />);
|
||||
|
||||
expect(screen.getByText('No issues found')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
render(<IssueSummary summary={null} isLoading />);
|
||||
|
||||
// Should not show empty state
|
||||
expect(screen.queryByText('No issues found')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows View All Issues button with total count', () => {
|
||||
const onViewAllIssues = jest.fn();
|
||||
render(<IssueSummary summary={mockSummary} onViewAllIssues={onViewAllIssues} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /view all issues \(24\)/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onViewAllIssues when button is clicked', () => {
|
||||
const onViewAllIssues = jest.fn();
|
||||
render(<IssueSummary summary={mockSummary} onViewAllIssues={onViewAllIssues} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /view all issues/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(onViewAllIssues).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('hides button when onViewAllIssues is not provided', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /view all issues/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<IssueSummary summary={mockSummary} className="custom-class" />);
|
||||
|
||||
expect(screen.getByTestId('issue-summary')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has accessible list role', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
|
||||
expect(screen.getByRole('list', { name: /issue counts by status/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
74
frontend/tests/components/projects/ProgressBar.test.tsx
Normal file
74
frontend/tests/components/projects/ProgressBar.test.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* ProgressBar Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ProgressBar } from '@/components/projects/ProgressBar';
|
||||
|
||||
describe('ProgressBar', () => {
|
||||
it('renders with default values', () => {
|
||||
render(<ProgressBar value={50} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toBeInTheDocument();
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '50');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemin', '0');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemax', '100');
|
||||
});
|
||||
|
||||
it('clamps value to 0-100 range', () => {
|
||||
const { rerender } = render(<ProgressBar value={-10} />);
|
||||
expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0');
|
||||
|
||||
rerender(<ProgressBar value={150} />);
|
||||
expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100');
|
||||
});
|
||||
|
||||
it('shows label when showLabel is true', () => {
|
||||
render(<ProgressBar value={75} showLabel />);
|
||||
expect(screen.getByText('75%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show label by default', () => {
|
||||
render(<ProgressBar value={75} />);
|
||||
expect(screen.queryByText('75%')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders with different variants', () => {
|
||||
const { rerender } = render(<ProgressBar value={50} variant="success" />);
|
||||
let progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar.querySelector('.bg-green-500')).toBeInTheDocument();
|
||||
|
||||
rerender(<ProgressBar value={50} variant="warning" />);
|
||||
progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar.querySelector('.bg-yellow-500')).toBeInTheDocument();
|
||||
|
||||
rerender(<ProgressBar value={50} variant="error" />);
|
||||
progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar.querySelector('.bg-red-500')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders with different sizes', () => {
|
||||
const { rerender } = render(<ProgressBar value={50} size="sm" />);
|
||||
let progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveClass('h-1');
|
||||
|
||||
rerender(<ProgressBar value={50} size="md" />);
|
||||
progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveClass('h-2');
|
||||
|
||||
rerender(<ProgressBar value={50} size="lg" />);
|
||||
progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveClass('h-3');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<ProgressBar value={50} className="custom-class" />);
|
||||
const container = screen.getByRole('progressbar').parentElement;
|
||||
expect(container).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('passes aria-label to progressbar', () => {
|
||||
render(<ProgressBar value={50} aria-label="Loading progress" />);
|
||||
expect(screen.getByLabelText('Loading progress')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
111
frontend/tests/components/projects/ProjectHeader.test.tsx
Normal file
111
frontend/tests/components/projects/ProjectHeader.test.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* ProjectHeader Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { ProjectHeader } from '@/components/projects/ProjectHeader';
|
||||
import type { Project } from '@/components/projects/types';
|
||||
|
||||
const mockProject: Project = {
|
||||
id: '1',
|
||||
name: 'E-Commerce Platform',
|
||||
description: 'Building a modern e-commerce platform',
|
||||
status: 'in_progress',
|
||||
autonomy_level: 'milestone',
|
||||
owner_id: 'user-1',
|
||||
created_at: '2024-01-15T10:00:00Z',
|
||||
updated_at: '2024-01-20T15:30:00Z',
|
||||
};
|
||||
|
||||
describe('ProjectHeader', () => {
|
||||
it('renders project name and description', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
|
||||
expect(screen.getByTestId('project-header')).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: 'E-Commerce Platform' })).toBeInTheDocument();
|
||||
expect(screen.getByText('Building a modern e-commerce platform')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays status and autonomy badges', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('Milestone')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows Start Agents button when not running', () => {
|
||||
const onToggleAgents = jest.fn();
|
||||
render(
|
||||
<ProjectHeader project={mockProject} isRunning={false} onToggleAgents={onToggleAgents} />
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /start all agents/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows Pause Agents button when running', () => {
|
||||
const onToggleAgents = jest.fn();
|
||||
render(
|
||||
<ProjectHeader project={mockProject} isRunning={true} onToggleAgents={onToggleAgents} />
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /pause all agents/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onToggleAgents when button is clicked', () => {
|
||||
const onToggleAgents = jest.fn();
|
||||
render(<ProjectHeader project={mockProject} onToggleAgents={onToggleAgents} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /start all agents/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(onToggleAgents).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows New Sprint button when onCreateSprint is provided', () => {
|
||||
const onCreateSprint = jest.fn();
|
||||
render(<ProjectHeader project={mockProject} onCreateSprint={onCreateSprint} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /new sprint/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onCreateSprint when button is clicked', () => {
|
||||
const onCreateSprint = jest.fn();
|
||||
render(<ProjectHeader project={mockProject} onCreateSprint={onCreateSprint} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /new sprint/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(onCreateSprint).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows settings button when onSettings is provided', () => {
|
||||
const onSettings = jest.fn();
|
||||
render(<ProjectHeader project={mockProject} onSettings={onSettings} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /project settings/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onSettings when button is clicked', () => {
|
||||
const onSettings = jest.fn();
|
||||
render(<ProjectHeader project={mockProject} onSettings={onSettings} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /project settings/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(onSettings).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<ProjectHeader project={mockProject} className="custom-class" />);
|
||||
|
||||
expect(screen.getByTestId('project-header')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('hides action buttons when callbacks are not provided', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /start all agents/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /new sprint/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: /project settings/i })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
122
frontend/tests/components/projects/RecentActivity.test.tsx
Normal file
122
frontend/tests/components/projects/RecentActivity.test.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* RecentActivity Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { RecentActivity } from '@/components/projects/RecentActivity';
|
||||
import type { ActivityItem } from '@/components/projects/types';
|
||||
|
||||
const mockActivities: ActivityItem[] = [
|
||||
{
|
||||
id: 'act-1',
|
||||
type: 'agent_message',
|
||||
message: 'completed implementation of ProductCard component',
|
||||
agent: 'FrontendEngineer',
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-2',
|
||||
type: 'issue_update',
|
||||
message: 'moved issue #42 to In Review',
|
||||
agent: 'ProductOwner',
|
||||
timestamp: new Date(Date.now() - 25 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-3',
|
||||
type: 'agent_message',
|
||||
message: 'added clarification to checkout user story',
|
||||
agent: 'ProductOwner',
|
||||
timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-4',
|
||||
type: 'sprint_event',
|
||||
message: 'Sprint 3 started',
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
describe('RecentActivity', () => {
|
||||
it('renders activity list', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByTestId('recent-activity')).toBeInTheDocument();
|
||||
expect(screen.getByText('Recent Activity')).toBeInTheDocument();
|
||||
expect(screen.getByText('4 events')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays activity messages', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByText(/completed implementation of ProductCard component/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/moved issue #42 to In Review/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Sprint 3 started/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows agent names', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByText('FrontendEngineer')).toBeInTheDocument();
|
||||
// ProductOwner appears twice
|
||||
expect(screen.getAllByText('ProductOwner')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('renders empty state when no activities', () => {
|
||||
render(<RecentActivity activities={[]} />);
|
||||
|
||||
expect(screen.getByText('No activity yet')).toBeInTheDocument();
|
||||
expect(screen.getByText('Activity will appear here as agents work')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('limits displayed items based on maxItems prop', () => {
|
||||
render(<RecentActivity activities={mockActivities} maxItems={2} />);
|
||||
|
||||
// Should only show 2 items
|
||||
expect(screen.getByTestId('activity-item-act-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('activity-item-act-2')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('activity-item-act-3')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows View All button when there are more items than maxItems', () => {
|
||||
const onViewAll = jest.fn();
|
||||
render(<RecentActivity activities={mockActivities} maxItems={2} onViewAll={onViewAll} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /view all/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides View All button when all items are displayed', () => {
|
||||
const onViewAll = jest.fn();
|
||||
render(<RecentActivity activities={mockActivities} maxItems={10} onViewAll={onViewAll} />);
|
||||
|
||||
expect(screen.queryByRole('button', { name: /view all/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onViewAll when button is clicked', () => {
|
||||
const onViewAll = jest.fn();
|
||||
render(<RecentActivity activities={mockActivities} maxItems={2} onViewAll={onViewAll} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /view all/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(onViewAll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
render(<RecentActivity activities={[]} isLoading />);
|
||||
|
||||
// Should not show empty state
|
||||
expect(screen.queryByText('No activity yet')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<RecentActivity activities={mockActivities} className="custom-class" />);
|
||||
|
||||
expect(screen.getByTestId('recent-activity')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has accessible feed role', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByRole('feed', { name: /recent project activity/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
114
frontend/tests/components/projects/SprintProgress.test.tsx
Normal file
114
frontend/tests/components/projects/SprintProgress.test.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* SprintProgress Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { SprintProgress } from '@/components/projects/SprintProgress';
|
||||
import type { Sprint, BurndownDataPoint } from '@/components/projects/types';
|
||||
|
||||
const mockSprint: Sprint = {
|
||||
id: 'sprint-1',
|
||||
project_id: '1',
|
||||
name: 'Sprint 3',
|
||||
status: 'active',
|
||||
start_date: '2024-01-15',
|
||||
end_date: '2024-01-29',
|
||||
total_issues: 10,
|
||||
completed_issues: 4,
|
||||
in_progress_issues: 3,
|
||||
blocked_issues: 1,
|
||||
todo_issues: 2,
|
||||
};
|
||||
|
||||
const mockBurndownData: BurndownDataPoint[] = [
|
||||
{ day: 1, date: '2024-01-15', remaining: 10, ideal: 10 },
|
||||
{ day: 3, date: '2024-01-17', remaining: 8, ideal: 8 },
|
||||
{ day: 5, date: '2024-01-19', remaining: 6, ideal: 6 },
|
||||
];
|
||||
|
||||
describe('SprintProgress', () => {
|
||||
it('renders sprint information', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
|
||||
expect(screen.getByTestId('sprint-progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('Sprint Overview')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Sprint 3/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty state when no sprint', () => {
|
||||
render(<SprintProgress sprint={null} />);
|
||||
|
||||
expect(screen.getByText('No active sprint')).toBeInTheDocument();
|
||||
expect(screen.getByText('No sprint is currently active')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays issue statistics', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
|
||||
expect(screen.getByText('4')).toBeInTheDocument(); // completed
|
||||
expect(screen.getByText('3')).toBeInTheDocument(); // in progress
|
||||
expect(screen.getByText('1')).toBeInTheDocument(); // blocked
|
||||
expect(screen.getByText('2')).toBeInTheDocument(); // todo
|
||||
});
|
||||
|
||||
it('calculates progress percentage correctly', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
|
||||
// 4 completed / 10 total = 40%
|
||||
expect(screen.getByText('40%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders burndown chart', () => {
|
||||
render(<SprintProgress sprint={mockSprint} burndownData={mockBurndownData} />);
|
||||
|
||||
expect(screen.getByText('Burndown Chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
render(<SprintProgress sprint={null} isLoading />);
|
||||
|
||||
// Should not show empty state
|
||||
expect(screen.queryByText('No active sprint')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('formats sprint dates correctly', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
|
||||
// Should show formatted date range
|
||||
expect(screen.getByText(/Jan 15 - Jan 29, 2024/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<SprintProgress sprint={mockSprint} className="custom-class" />);
|
||||
|
||||
expect(screen.getByTestId('sprint-progress')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('handles zero total issues', () => {
|
||||
const emptySprint = { ...mockSprint, total_issues: 0, completed_issues: 0 };
|
||||
render(<SprintProgress sprint={emptySprint} />);
|
||||
|
||||
// Should show 0% without errors
|
||||
expect(screen.getByText('0%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Note: Sprint selector test skipped due to Radix Select + jsdom incompatibility
|
||||
// This should be tested in E2E tests instead
|
||||
it.skip('shows sprint selector when multiple sprints available', () => {
|
||||
const availableSprints = [
|
||||
{ id: 'sprint-1', name: 'Sprint 1' },
|
||||
{ id: 'sprint-2', name: 'Sprint 2' },
|
||||
];
|
||||
const onSprintChange = jest.fn();
|
||||
|
||||
render(
|
||||
<SprintProgress
|
||||
sprint={mockSprint}
|
||||
availableSprints={availableSprints}
|
||||
onSprintChange={onSprintChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// This would need proper Radix testing setup
|
||||
});
|
||||
});
|
||||
73
frontend/tests/components/projects/StatusBadge.test.tsx
Normal file
73
frontend/tests/components/projects/StatusBadge.test.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* StatusBadge Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ProjectStatusBadge, AutonomyBadge } from '@/components/projects/StatusBadge';
|
||||
|
||||
describe('ProjectStatusBadge', () => {
|
||||
it('renders draft status', () => {
|
||||
render(<ProjectStatusBadge status="draft" />);
|
||||
expect(screen.getByText('Draft')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders in_progress status', () => {
|
||||
render(<ProjectStatusBadge status="in_progress" />);
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders paused status', () => {
|
||||
render(<ProjectStatusBadge status="paused" />);
|
||||
expect(screen.getByText('Paused')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders completed status', () => {
|
||||
render(<ProjectStatusBadge status="completed" />);
|
||||
expect(screen.getByText('Completed')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders blocked status', () => {
|
||||
render(<ProjectStatusBadge status="blocked" />);
|
||||
expect(screen.getByText('Blocked')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders archived status', () => {
|
||||
render(<ProjectStatusBadge status="archived" />);
|
||||
expect(screen.getByText('Archived')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<ProjectStatusBadge status="in_progress" className="custom-class" />);
|
||||
const badge = screen.getByText('In Progress');
|
||||
expect(badge).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
|
||||
describe('AutonomyBadge', () => {
|
||||
it('renders full_control level with correct text and tooltip', () => {
|
||||
render(<AutonomyBadge level="full_control" />);
|
||||
const badge = screen.getByText('Full Control');
|
||||
expect(badge).toBeInTheDocument();
|
||||
expect(badge.closest('[title]')).toHaveAttribute('title', 'Approve every action');
|
||||
});
|
||||
|
||||
it('renders milestone level with correct text and tooltip', () => {
|
||||
render(<AutonomyBadge level="milestone" />);
|
||||
const badge = screen.getByText('Milestone');
|
||||
expect(badge).toBeInTheDocument();
|
||||
expect(badge.closest('[title]')).toHaveAttribute('title', 'Approve at sprint boundaries');
|
||||
});
|
||||
|
||||
it('renders autonomous level with correct text and tooltip', () => {
|
||||
render(<AutonomyBadge level="autonomous" />);
|
||||
const badge = screen.getByText('Autonomous');
|
||||
expect(badge).toBeInTheDocument();
|
||||
expect(badge.closest('[title]')).toHaveAttribute('title', 'Only major decisions');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<AutonomyBadge level="autonomous" className="custom-class" />);
|
||||
const badge = screen.getByText('Autonomous');
|
||||
expect(badge).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Tests for SelectableCard component
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
|
||||
import { SelectableCard } from '@/components/projects/wizard/SelectableCard';
|
||||
|
||||
describe('SelectableCard', () => {
|
||||
it('should render children', () => {
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={() => {}}>
|
||||
<span>Card content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Card content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call onClick when clicked', () => {
|
||||
const handleClick = jest.fn();
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={handleClick}>
|
||||
<span>Click me</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('button'));
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should have aria-pressed false when not selected', () => {
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={() => {}}>
|
||||
<span>Content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
it('should have aria-pressed true when selected', () => {
|
||||
render(
|
||||
<SelectableCard selected={true} onClick={() => {}}>
|
||||
<span>Content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
|
||||
});
|
||||
|
||||
it('should apply border-primary style when selected', () => {
|
||||
render(
|
||||
<SelectableCard selected={true} onClick={() => {}}>
|
||||
<span>Content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveClass('border-primary');
|
||||
expect(button).toHaveClass('bg-primary/5');
|
||||
});
|
||||
|
||||
it('should apply border-border style when not selected', () => {
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={() => {}}>
|
||||
<span>Content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveClass('border-border');
|
||||
});
|
||||
|
||||
it('should apply custom className', () => {
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={() => {}} className="custom-class">
|
||||
<span>Content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('should forward aria-label prop', () => {
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={() => {}} aria-label="Select option">
|
||||
<span>Content</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Select option');
|
||||
});
|
||||
|
||||
it('should be keyboard accessible', () => {
|
||||
const handleClick = jest.fn();
|
||||
render(
|
||||
<SelectableCard selected={false} onClick={handleClick}>
|
||||
<span>Press Enter</span>
|
||||
</SelectableCard>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
button.focus();
|
||||
fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
|
||||
fireEvent.keyUp(button, { key: 'Enter', code: 'Enter' });
|
||||
|
||||
// Button elements handle Enter key natively
|
||||
expect(button).toHaveFocus();
|
||||
});
|
||||
});
|
||||
116
frontend/tests/components/projects/wizard/StepIndicator.test.tsx
Normal file
116
frontend/tests/components/projects/wizard/StepIndicator.test.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* Tests for StepIndicator component
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
|
||||
import { StepIndicator } from '@/components/projects/wizard/StepIndicator';
|
||||
|
||||
describe('StepIndicator', () => {
|
||||
describe('standard mode (6 steps)', () => {
|
||||
it('should show step 1 of 6', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={false} />);
|
||||
expect(screen.getByText('Step 1 of 6')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show correct label for step 1', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={false} />);
|
||||
expect(screen.getByText('Basic Info')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show step 3 of 6 for client mode', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
expect(screen.getByText('Step 3 of 6')).toBeInTheDocument();
|
||||
expect(screen.getByText('Client Mode')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show step 6 of 6 for review', () => {
|
||||
render(<StepIndicator currentStep={6} isScriptMode={false} />);
|
||||
expect(screen.getByText('Step 6 of 6')).toBeInTheDocument();
|
||||
expect(screen.getByText('Review')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have a progress bar', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct aria-valuenow', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '3');
|
||||
});
|
||||
|
||||
it('should have aria-valuemax of 6 in standard mode', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemax', '6');
|
||||
});
|
||||
});
|
||||
|
||||
describe('script mode (4 steps)', () => {
|
||||
it('should show step 1 of 4', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 1 of 4')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show step 2 of 4 for complexity', () => {
|
||||
render(<StepIndicator currentStep={2} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 2 of 4')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should map internal step 5 to display step 3 for agent chat', () => {
|
||||
render(<StepIndicator currentStep={5} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 3 of 4')).toBeInTheDocument();
|
||||
expect(screen.getByText('Agent Chat')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should map internal step 6 to display step 4 for review', () => {
|
||||
render(<StepIndicator currentStep={6} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 4 of 4')).toBeInTheDocument();
|
||||
expect(screen.getByText('Review')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have aria-valuemax of 4 in script mode', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={true} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemax', '4');
|
||||
});
|
||||
});
|
||||
|
||||
describe('progress segments', () => {
|
||||
it('should have 6 segments in standard mode', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
const segments = progressbar.querySelectorAll('div');
|
||||
expect(segments).toHaveLength(6);
|
||||
});
|
||||
|
||||
it('should have 4 segments in script mode', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={true} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
const segments = progressbar.querySelectorAll('div');
|
||||
expect(segments).toHaveLength(4);
|
||||
});
|
||||
|
||||
it('should highlight current and completed segments at step 3', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
const segments = progressbar.querySelectorAll('div');
|
||||
// Steps 1, 2 should be completed, step 3 should be current
|
||||
expect(segments[0]).toHaveClass('bg-primary');
|
||||
expect(segments[1]).toHaveClass('bg-primary');
|
||||
expect(segments[2]).toHaveClass('bg-primary/70');
|
||||
});
|
||||
|
||||
it('should show remaining steps as muted', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
const segments = progressbar.querySelectorAll('div');
|
||||
expect(segments[3]).toHaveClass('bg-muted');
|
||||
expect(segments[4]).toHaveClass('bg-muted');
|
||||
expect(segments[5]).toHaveClass('bg-muted');
|
||||
});
|
||||
});
|
||||
});
|
||||
169
frontend/tests/components/projects/wizard/constants.test.ts
Normal file
169
frontend/tests/components/projects/wizard/constants.test.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Tests for wizard constants
|
||||
*/
|
||||
|
||||
import {
|
||||
WIZARD_STEPS,
|
||||
getStepLabels,
|
||||
complexityOptions,
|
||||
clientModeOptions,
|
||||
autonomyOptions,
|
||||
} from '@/components/projects/wizard/constants';
|
||||
|
||||
describe('WIZARD_STEPS', () => {
|
||||
it('should have correct step values', () => {
|
||||
expect(WIZARD_STEPS.BASIC_INFO).toBe(1);
|
||||
expect(WIZARD_STEPS.COMPLEXITY).toBe(2);
|
||||
expect(WIZARD_STEPS.CLIENT_MODE).toBe(3);
|
||||
expect(WIZARD_STEPS.AUTONOMY).toBe(4);
|
||||
expect(WIZARD_STEPS.AGENT_CHAT).toBe(5);
|
||||
expect(WIZARD_STEPS.REVIEW).toBe(6);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getStepLabels', () => {
|
||||
it('should return 6 labels for standard mode', () => {
|
||||
const labels = getStepLabels(false);
|
||||
expect(labels).toHaveLength(6);
|
||||
expect(labels[0]).toBe('Basic Info');
|
||||
expect(labels[1]).toBe('Complexity');
|
||||
expect(labels[2]).toBe('Client Mode');
|
||||
expect(labels[3]).toBe('Autonomy');
|
||||
expect(labels[4]).toBe('Agent Chat');
|
||||
expect(labels[5]).toBe('Review');
|
||||
});
|
||||
|
||||
it('should return 4 labels for script mode', () => {
|
||||
const labels = getStepLabels(true);
|
||||
expect(labels).toHaveLength(4);
|
||||
expect(labels[0]).toBe('Basic Info');
|
||||
expect(labels[1]).toBe('Complexity');
|
||||
expect(labels[2]).toBe('Agent Chat');
|
||||
expect(labels[3]).toBe('Review');
|
||||
});
|
||||
});
|
||||
|
||||
describe('complexityOptions', () => {
|
||||
it('should have 4 complexity options', () => {
|
||||
expect(complexityOptions).toHaveLength(4);
|
||||
});
|
||||
|
||||
it('should have correct IDs', () => {
|
||||
const ids = complexityOptions.map((o) => o.id);
|
||||
expect(ids).toEqual(['script', 'simple', 'medium', 'complex']);
|
||||
});
|
||||
|
||||
it('should mark script as skipConfig', () => {
|
||||
const script = complexityOptions.find((o) => o.id === 'script');
|
||||
expect(script?.skipConfig).toBe(true);
|
||||
});
|
||||
|
||||
it('should not mark other complexities as skipConfig', () => {
|
||||
const nonScripts = complexityOptions.filter((o) => o.id !== 'script');
|
||||
nonScripts.forEach((option) => {
|
||||
expect(option.skipConfig).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('exact timelines from requirements', () => {
|
||||
it('script should be "Minutes to 1-2 hours"', () => {
|
||||
const script = complexityOptions.find((o) => o.id === 'script');
|
||||
expect(script?.scope).toContain('Minutes to 1-2 hours');
|
||||
});
|
||||
|
||||
it('simple should be "2-3 days"', () => {
|
||||
const simple = complexityOptions.find((o) => o.id === 'simple');
|
||||
expect(simple?.scope).toContain('2-3 days');
|
||||
});
|
||||
|
||||
it('medium should be "2-3 weeks"', () => {
|
||||
const medium = complexityOptions.find((o) => o.id === 'medium');
|
||||
expect(medium?.scope).toContain('2-3 weeks');
|
||||
});
|
||||
|
||||
it('complex should be "2-3 months"', () => {
|
||||
const complex = complexityOptions.find((o) => o.id === 'complex');
|
||||
expect(complex?.scope).toContain('2-3 months');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have icons for all options', () => {
|
||||
complexityOptions.forEach((option) => {
|
||||
expect(option.icon).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('clientModeOptions', () => {
|
||||
it('should have 2 client mode options', () => {
|
||||
expect(clientModeOptions).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should have technical and auto modes', () => {
|
||||
const ids = clientModeOptions.map((o) => o.id);
|
||||
expect(ids).toEqual(['technical', 'auto']);
|
||||
});
|
||||
|
||||
it('should have descriptive labels', () => {
|
||||
const technical = clientModeOptions.find((o) => o.id === 'technical');
|
||||
const auto = clientModeOptions.find((o) => o.id === 'auto');
|
||||
|
||||
expect(technical?.label).toBe('Technical Mode');
|
||||
expect(auto?.label).toBe('Auto Mode');
|
||||
});
|
||||
|
||||
it('should have icons for all options', () => {
|
||||
clientModeOptions.forEach((option) => {
|
||||
expect(option.icon).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('autonomyOptions', () => {
|
||||
it('should have 3 autonomy options', () => {
|
||||
expect(autonomyOptions).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should have correct IDs', () => {
|
||||
const ids = autonomyOptions.map((o) => o.id);
|
||||
expect(ids).toEqual(['full_control', 'milestone', 'autonomous']);
|
||||
});
|
||||
|
||||
it('should have approval matrices', () => {
|
||||
autonomyOptions.forEach((option) => {
|
||||
expect(option.approvals).toBeDefined();
|
||||
expect(option.approvals).toHaveProperty('codeChanges');
|
||||
expect(option.approvals).toHaveProperty('issueUpdates');
|
||||
expect(option.approvals).toHaveProperty('sprintPlanning');
|
||||
expect(option.approvals).toHaveProperty('architectureDecisions');
|
||||
expect(option.approvals).toHaveProperty('deployments');
|
||||
});
|
||||
});
|
||||
|
||||
it('full_control should require approval for most actions', () => {
|
||||
const fullControl = autonomyOptions.find((o) => o.id === 'full_control');
|
||||
expect(fullControl?.approvals.codeChanges).toBe(true);
|
||||
expect(fullControl?.approvals.issueUpdates).toBe(true);
|
||||
expect(fullControl?.approvals.sprintPlanning).toBe(true);
|
||||
});
|
||||
|
||||
it('autonomous should auto-approve most actions', () => {
|
||||
const autonomous = autonomyOptions.find((o) => o.id === 'autonomous');
|
||||
expect(autonomous?.approvals.codeChanges).toBe(false);
|
||||
expect(autonomous?.approvals.issueUpdates).toBe(false);
|
||||
expect(autonomous?.approvals.sprintPlanning).toBe(false);
|
||||
});
|
||||
|
||||
it('should have icons for all options', () => {
|
||||
autonomyOptions.forEach((option) => {
|
||||
expect(option.icon).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have recommended use cases', () => {
|
||||
autonomyOptions.forEach((option) => {
|
||||
expect(option.recommended).toBeDefined();
|
||||
expect(option.recommended.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
402
frontend/tests/components/projects/wizard/useWizardState.test.ts
Normal file
402
frontend/tests/components/projects/wizard/useWizardState.test.ts
Normal file
@@ -0,0 +1,402 @@
|
||||
/**
|
||||
* Tests for useWizardState hook
|
||||
*/
|
||||
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
|
||||
import { useWizardState } from '@/components/projects/wizard/useWizardState';
|
||||
import { WIZARD_STEPS } from '@/components/projects/wizard/constants';
|
||||
|
||||
describe('useWizardState', () => {
|
||||
describe('initial state', () => {
|
||||
it('should start at step 1', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
|
||||
it('should have empty project name', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.state.projectName).toBe('');
|
||||
});
|
||||
|
||||
it('should have no complexity selected', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.state.complexity).toBeNull();
|
||||
});
|
||||
|
||||
it('should not be in script mode initially', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.isScriptMode).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateState', () => {
|
||||
it('should update project name', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Project' });
|
||||
});
|
||||
|
||||
expect(result.current.state.projectName).toBe('Test Project');
|
||||
});
|
||||
|
||||
it('should update multiple fields at once', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'My Project',
|
||||
description: 'A test description',
|
||||
});
|
||||
});
|
||||
|
||||
expect(result.current.state.projectName).toBe('My Project');
|
||||
expect(result.current.state.description).toBe('A test description');
|
||||
});
|
||||
|
||||
it('should set isScriptMode when complexity is script', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'script' });
|
||||
});
|
||||
|
||||
expect(result.current.isScriptMode).toBe(true);
|
||||
});
|
||||
|
||||
it('should not be script mode for other complexities', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'medium' });
|
||||
});
|
||||
|
||||
expect(result.current.isScriptMode).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('canProceed', () => {
|
||||
it('should not proceed from step 1 without project name', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
});
|
||||
|
||||
it('should proceed from step 1 with valid project name', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test' });
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
|
||||
it('should not proceed from step 1 with name under 3 characters', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'AB' });
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
});
|
||||
|
||||
it('should not proceed from step 2 without complexity selection', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(2);
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
});
|
||||
|
||||
it('should proceed from step 2 with complexity selected', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'medium' });
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('goNext - standard flow', () => {
|
||||
it('should advance from step 1 to step 2', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(WIZARD_STEPS.COMPLEXITY);
|
||||
});
|
||||
|
||||
it('should advance through all 6 steps for non-script projects', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Step 1 -> 2
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
expect(result.current.state.step).toBe(2);
|
||||
|
||||
// Step 2 -> 3
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'medium' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
expect(result.current.state.step).toBe(3);
|
||||
|
||||
// Step 3 -> 4
|
||||
act(() => {
|
||||
result.current.updateState({ clientMode: 'auto' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
expect(result.current.state.step).toBe(4);
|
||||
|
||||
// Step 4 -> 5
|
||||
act(() => {
|
||||
result.current.updateState({ autonomyLevel: 'milestone' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
expect(result.current.state.step).toBe(5);
|
||||
|
||||
// Step 5 -> 6
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
expect(result.current.state.step).toBe(6);
|
||||
});
|
||||
});
|
||||
|
||||
describe('goNext - script mode flow', () => {
|
||||
it('should skip from step 2 to step 5 for script projects', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Step 1
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
// Step 2 - select script
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
// Should now be at step 5 (Agent Chat)
|
||||
expect(result.current.state.step).toBe(WIZARD_STEPS.AGENT_CHAT);
|
||||
});
|
||||
|
||||
it('should auto-set clientMode to auto for scripts', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.clientMode).toBe('auto');
|
||||
});
|
||||
|
||||
it('should auto-set autonomyLevel to autonomous for scripts', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.autonomyLevel).toBe('autonomous');
|
||||
});
|
||||
});
|
||||
|
||||
describe('goBack', () => {
|
||||
it('should not go back from step 1', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.goBack();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
|
||||
it('should go back from step 2 to step 1', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
act(() => {
|
||||
result.current.goBack();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
|
||||
it('should go back from step 5 to step 2 for script mode', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Navigate to step 5 via script mode
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'script' });
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(5);
|
||||
|
||||
// Go back should return to step 2
|
||||
act(() => {
|
||||
result.current.goBack();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(WIZARD_STEPS.COMPLEXITY);
|
||||
});
|
||||
});
|
||||
|
||||
describe('resetState', () => {
|
||||
it('should reset all state to initial values', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Make changes
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test',
|
||||
description: 'Description',
|
||||
complexity: 'medium',
|
||||
clientMode: 'auto',
|
||||
autonomyLevel: 'milestone',
|
||||
});
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
// Reset
|
||||
act(() => {
|
||||
result.current.resetState();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(1);
|
||||
expect(result.current.state.projectName).toBe('');
|
||||
expect(result.current.state.description).toBe('');
|
||||
expect(result.current.state.complexity).toBeNull();
|
||||
expect(result.current.state.clientMode).toBeNull();
|
||||
expect(result.current.state.autonomyLevel).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getProjectData', () => {
|
||||
it('should return properly formatted project data', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'My Project',
|
||||
description: 'A test project',
|
||||
repoUrl: 'https://github.com/test/repo',
|
||||
complexity: 'medium',
|
||||
clientMode: 'technical',
|
||||
autonomyLevel: 'milestone',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
|
||||
expect(data.name).toBe('My Project');
|
||||
expect(data.slug).toBe('my-project');
|
||||
expect(data.description).toBe('A test project');
|
||||
expect(data.autonomy_level).toBe('milestone');
|
||||
expect(data.settings.complexity).toBe('medium');
|
||||
expect(data.settings.client_mode).toBe('technical');
|
||||
expect(data.settings.repo_url).toBe('https://github.com/test/repo');
|
||||
});
|
||||
|
||||
it('should generate slug from project name', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'My Amazing Project 123',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
expect(data.slug).toBe('my-amazing-project-123');
|
||||
});
|
||||
|
||||
it('should handle special characters in slug generation', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Project & Things (v2.0)',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
expect(data.slug).toMatch(/^[a-z0-9-]+$/);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user