fix(KB-503): remove duplicate getDefaultProject function
- Import getDefaultProject from project-context.js instead of duplicating - Remove local getDefaultProject implementation in project.ts - All 6 tests still passing
This commit is contained in:
gsxdsm
217
packages/dashboard/app/components/ActivityFeed.tsx
Normal file
217
packages/dashboard/app/components/ActivityFeed.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { memo, useCallback, useMemo } from "react";
|
||||
import {
|
||||
GitPullRequest,
|
||||
GitMerge,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Plus,
|
||||
ArrowRightLeft,
|
||||
Settings,
|
||||
AlertTriangle,
|
||||
Folder
|
||||
} from "lucide-react";
|
||||
import type { ActivityFeedEntry } from "../api";
|
||||
|
||||
export interface ActivityFeedProps {
|
||||
entries: ActivityFeedEntry[];
|
||||
isLoading?: boolean;
|
||||
error?: string | null;
|
||||
projectNames?: Record<string, string>;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
const TYPE_CONFIG: Record<ActivityFeedEntry["type"], {
|
||||
label: string;
|
||||
icon: typeof Plus;
|
||||
color: string;
|
||||
}> = {
|
||||
"task:created": { label: "Created", icon: Plus, color: "var(--todo)" },
|
||||
"task:moved": { label: "Moved", icon: ArrowRightLeft, color: "var(--in-progress)" },
|
||||
"task:updated": { label: "Updated", icon: Settings, color: "var(--text-muted)" },
|
||||
"task:deleted": { label: "Deleted", icon: XCircle, color: "var(--error)" },
|
||||
"task:merged": { label: "Merged", icon: GitMerge, color: "var(--color-success)" },
|
||||
"task:failed": { label: "Failed", icon: AlertTriangle, color: "var(--error)" },
|
||||
"settings:updated": { label: "Settings", icon: Settings, color: "var(--text-muted)" },
|
||||
};
|
||||
|
||||
function formatRelativeTime(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return "Just now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
function formatFullTime(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
interface ActivityFeedItemProps {
|
||||
entry: ActivityFeedEntry;
|
||||
projectName?: string;
|
||||
}
|
||||
|
||||
function ActivityFeedItem({ entry, projectName }: ActivityFeedItemProps) {
|
||||
const config = TYPE_CONFIG[entry.type];
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<div className="activity-feed-item" data-type={entry.type}>
|
||||
<div className="activity-feed-icon" style={{ color: config.color }}>
|
||||
<Icon size={16} />
|
||||
</div>
|
||||
<div className="activity-feed-content">
|
||||
<div className="activity-feed-header">
|
||||
<span className="activity-feed-type">{config.label}</span>
|
||||
{projectName && (
|
||||
<span className="activity-feed-project-badge">
|
||||
<Folder size={10} />
|
||||
{projectName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="activity-feed-details">
|
||||
{entry.taskId && (
|
||||
<span className="activity-feed-task-id">{entry.taskId}</span>
|
||||
)}
|
||||
{entry.taskTitle && (
|
||||
<span className="activity-feed-task-title" title={entry.taskTitle}>
|
||||
{entry.taskTitle}
|
||||
</span>
|
||||
)}
|
||||
<span className="activity-feed-description">{entry.details}</span>
|
||||
</div>
|
||||
<div className="activity-feed-meta">
|
||||
<span className="activity-feed-time" title={formatFullTime(entry.timestamp)}>
|
||||
{formatRelativeTime(entry.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function areActivityFeedPropsEqual(previous: ActivityFeedProps, next: ActivityFeedProps): boolean {
|
||||
if (previous.isLoading !== next.isLoading) return false;
|
||||
if (previous.error !== next.error) return false;
|
||||
if (previous.entries.length !== next.entries.length) return false;
|
||||
|
||||
for (let i = 0; i < previous.entries.length; i++) {
|
||||
const prev = previous.entries[i];
|
||||
const curr = next.entries[i];
|
||||
if (prev.id !== curr.id) return false;
|
||||
if (prev.timestamp !== curr.timestamp) return false;
|
||||
if (prev.type !== curr.type) return false;
|
||||
if (prev.details !== curr.details) return false;
|
||||
if (prev.taskId !== curr.taskId) return false;
|
||||
if (prev.taskTitle !== curr.taskTitle) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function ActivityFeedInner({
|
||||
entries,
|
||||
isLoading = false,
|
||||
error = null,
|
||||
projectNames = {},
|
||||
emptyMessage = "No recent activity",
|
||||
}: ActivityFeedProps) {
|
||||
const getProjectName = useCallback((projectId: string): string => {
|
||||
return projectNames[projectId] || projectId;
|
||||
}, [projectNames]);
|
||||
|
||||
const groupedEntries = useMemo(() => {
|
||||
const groups: { date: string; entries: ActivityFeedEntry[] }[] = [];
|
||||
let currentGroup: { date: string; entries: ActivityFeedEntry[] } | null = null;
|
||||
|
||||
for (const entry of entries) {
|
||||
const date = new Date(entry.timestamp).toLocaleDateString();
|
||||
|
||||
if (!currentGroup || currentGroup.date !== date) {
|
||||
currentGroup = { date, entries: [] };
|
||||
groups.push(currentGroup);
|
||||
}
|
||||
currentGroup.entries.push(entry);
|
||||
}
|
||||
|
||||
return groups;
|
||||
}, [entries]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="activity-feed activity-feed-loading">
|
||||
<div className="activity-feed-skeleton">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="activity-feed-skeleton-item">
|
||||
<div className="activity-feed-skeleton-icon" />
|
||||
<div className="activity-feed-skeleton-content">
|
||||
<div className="activity-feed-skeleton-line" />
|
||||
<div className="activity-feed-skeleton-line short" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="activity-feed activity-feed-error">
|
||||
<div className="activity-feed-error-message">
|
||||
<AlertTriangle size={24} />
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entries.length === 0) {
|
||||
return (
|
||||
<div className="activity-feed activity-feed-empty">
|
||||
<div className="activity-feed-empty-state">
|
||||
<CheckCircle size={32} />
|
||||
<p>{emptyMessage}</p>
|
||||
<span className="activity-feed-empty-hint">
|
||||
Activity will appear here when tasks are created, moved, or completed
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="activity-feed">
|
||||
{groupedEntries.map((group) => (
|
||||
<div key={group.date} className="activity-feed-group">
|
||||
<div className="activity-feed-group-header">
|
||||
<span className="activity-feed-group-date">{group.date}</span>
|
||||
<span className="activity-feed-group-count">
|
||||
{group.entries.length} event{group.entries.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="activity-feed-list">
|
||||
{group.entries.map((entry) => (
|
||||
<ActivityFeedItem
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
projectName={getProjectName(entry.projectId)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const ActivityFeed = memo(ActivityFeedInner, areActivityFeedPropsEqual);
|
||||
222
packages/dashboard/app/components/ProjectCard.tsx
Normal file
222
packages/dashboard/app/components/ProjectCard.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import { memo, useCallback } from "react";
|
||||
import { Play, Pause, AlertCircle, Loader2, MoreHorizontal, Trash2, Folder, ArrowRight } from "lucide-react";
|
||||
import type { RegisteredProject, ProjectHealth, ProjectStatus } from "@fusion/core";
|
||||
|
||||
export interface ProjectCardProps {
|
||||
project: RegisteredProject;
|
||||
health: ProjectHealth | null;
|
||||
onSelect: (project: RegisteredProject) => void;
|
||||
onPause: (project: RegisteredProject) => void;
|
||||
onResume: (project: RegisteredProject) => void;
|
||||
onRemove: (project: RegisteredProject) => void;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const STATUS_CONFIG: Record<ProjectStatus, { label: string; color: string; icon: typeof Play }> = {
|
||||
active: { label: "Active", color: "var(--success)", icon: Play },
|
||||
paused: { label: "Paused", color: "var(--warning)", icon: Pause },
|
||||
errored: { label: "Error", color: "var(--error)", icon: AlertCircle },
|
||||
initializing: { label: "Initializing", color: "var(--info)", icon: Loader2 },
|
||||
};
|
||||
|
||||
function formatRelativeTime(timestamp: string | undefined): string {
|
||||
if (!timestamp) return "Never";
|
||||
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return "Just now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
function truncatePath(path: string, maxLength: number = 40): string {
|
||||
if (path.length <= maxLength) return path;
|
||||
const start = path.slice(0, Math.floor(maxLength / 2) - 2);
|
||||
const end = path.slice(-Math.floor(maxLength / 2) + 2);
|
||||
return `${start}...${end}`;
|
||||
}
|
||||
|
||||
function areProjectCardPropsEqual(previous: ProjectCardProps, next: ProjectCardProps): boolean {
|
||||
if (previous.project.id !== next.project.id) return false;
|
||||
if (previous.project.status !== next.project.status) return false;
|
||||
if (previous.project.name !== next.project.name) return false;
|
||||
if (previous.project.path !== next.project.path) return false;
|
||||
if (previous.project.lastActivityAt !== next.project.lastActivityAt) return false;
|
||||
if (previous.isLoading !== next.isLoading) return false;
|
||||
|
||||
// Compare health
|
||||
const prevHealth = previous.health;
|
||||
const nextHealth = next.health;
|
||||
if (!prevHealth && !nextHealth) return true;
|
||||
if (!prevHealth || !nextHealth) return false;
|
||||
|
||||
return (
|
||||
prevHealth.activeTaskCount === nextHealth.activeTaskCount &&
|
||||
prevHealth.inFlightAgentCount === nextHealth.inFlightAgentCount &&
|
||||
prevHealth.totalTasksCompleted === nextHealth.totalTasksCompleted &&
|
||||
prevHealth.totalTasksFailed === nextHealth.totalTasksFailed &&
|
||||
prevHealth.status === nextHealth.status
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectCardInner({
|
||||
project,
|
||||
health,
|
||||
onSelect,
|
||||
onPause,
|
||||
onResume,
|
||||
onRemove,
|
||||
isLoading = false,
|
||||
}: ProjectCardProps) {
|
||||
const statusConfig = STATUS_CONFIG[project.status];
|
||||
const StatusIcon = statusConfig.icon;
|
||||
|
||||
const handleSelect = useCallback(() => {
|
||||
onSelect(project);
|
||||
}, [onSelect, project]);
|
||||
|
||||
const handlePause = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onPause(project);
|
||||
}, [onPause, project]);
|
||||
|
||||
const handleResume = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onResume(project);
|
||||
}, [onResume, project]);
|
||||
|
||||
const handleRemove = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onRemove(project);
|
||||
}, [onRemove, project]);
|
||||
|
||||
const isPaused = project.status === "paused";
|
||||
const isErrored = project.status === "errored";
|
||||
const isInitializing = project.status === "initializing";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`project-card ${isLoading ? "project-card-loading" : ""} ${isErrored ? "project-card-errored" : ""}`}
|
||||
onClick={handleSelect}
|
||||
data-project-id={project.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSelect();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="project-card-header">
|
||||
<div className="project-card-icon">
|
||||
<Folder size={20} />
|
||||
</div>
|
||||
<div className="project-card-title-section">
|
||||
<h3 className="project-card-name" title={project.name}>
|
||||
{project.name}
|
||||
</h3>
|
||||
<span className="project-card-path" title={project.path}>
|
||||
{truncatePath(project.path)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="project-card-status-badge"
|
||||
style={{ color: statusConfig.color, borderColor: statusConfig.color }}
|
||||
>
|
||||
<StatusIcon size={12} className={isInitializing ? "animate-spin" : ""} />
|
||||
<span>{statusConfig.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="project-card-health">
|
||||
{health && (
|
||||
<>
|
||||
<div className="project-card-metric">
|
||||
<span className="project-card-metric-value">{health.activeTaskCount}</span>
|
||||
<span className="project-card-metric-label">Active Tasks</span>
|
||||
</div>
|
||||
<div className="project-card-metric">
|
||||
<span className="project-card-metric-value">{health.inFlightAgentCount}</span>
|
||||
<span className="project-card-metric-label">Agents</span>
|
||||
</div>
|
||||
<div className="project-card-metric">
|
||||
<span className="project-card-metric-value">{health.totalTasksCompleted}</span>
|
||||
<span className="project-card-metric-label">Completed</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!health && (
|
||||
<div className="project-card-metric project-card-metric-empty">
|
||||
<span className="project-card-metric-label">No health data available</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="project-card-footer">
|
||||
<div className="project-card-activity">
|
||||
<span className="project-card-activity-label">Last activity:</span>
|
||||
<span className="project-card-activity-time">
|
||||
{formatRelativeTime(project.lastActivityAt || health?.lastActivityAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="project-card-actions">
|
||||
{isPaused ? (
|
||||
<button
|
||||
className="project-card-action project-card-action-resume"
|
||||
onClick={handleResume}
|
||||
disabled={isLoading}
|
||||
title="Resume project"
|
||||
aria-label="Resume project"
|
||||
>
|
||||
<Play size={14} />
|
||||
<span>Resume</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="project-card-action project-card-action-pause"
|
||||
onClick={handlePause}
|
||||
disabled={isLoading || isInitializing}
|
||||
title={isInitializing ? "Cannot pause while initializing" : "Pause project"}
|
||||
aria-label="Pause project"
|
||||
>
|
||||
<Pause size={14} />
|
||||
<span>Pause</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="project-card-action project-card-action-open"
|
||||
onClick={handleSelect}
|
||||
disabled={isLoading}
|
||||
title="Open project"
|
||||
aria-label="Open project"
|
||||
>
|
||||
<ArrowRight size={14} />
|
||||
<span>Open</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="project-card-action project-card-action-remove"
|
||||
onClick={handleRemove}
|
||||
disabled={isLoading}
|
||||
title="Remove project"
|
||||
aria-label="Remove project"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const ProjectCard = memo(ProjectCardInner, areProjectCardPropsEqual);
|
||||
446
packages/dashboard/app/components/SetupWizard.tsx
Normal file
446
packages/dashboard/app/components/SetupWizard.tsx
Normal file
@@ -0,0 +1,446 @@
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { X, ChevronRight, ChevronLeft, Folder, Check, Loader2, AlertCircle } from "lucide-react";
|
||||
import type { ProjectInfo, ProjectCreateInput } from "../api";
|
||||
|
||||
export interface SetupWizardProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onProjectCreated: (project: ProjectInfo) => void;
|
||||
onRegisterProject?: (input: ProjectCreateInput) => Promise<ProjectInfo>;
|
||||
}
|
||||
|
||||
type WizardStep = "directory" | "name" | "isolation" | "validation" | "summary";
|
||||
|
||||
interface WizardState {
|
||||
step: WizardStep;
|
||||
directory: string;
|
||||
name: string;
|
||||
isolationMode: "in-process" | "child-process";
|
||||
isValidating: boolean;
|
||||
validationError: string | null;
|
||||
hasFusionDir: boolean | null;
|
||||
isCreating: boolean;
|
||||
createError: string | null;
|
||||
}
|
||||
|
||||
const STEP_ORDER: WizardStep[] = ["directory", "name", "isolation", "validation", "summary"];
|
||||
|
||||
function getStepIndex(step: WizardStep): number {
|
||||
return STEP_ORDER.indexOf(step);
|
||||
}
|
||||
|
||||
function isLastStep(step: WizardStep): boolean {
|
||||
return getStepIndex(step) === STEP_ORDER.length - 1;
|
||||
}
|
||||
|
||||
function isFirstStep(step: WizardStep): boolean {
|
||||
return getStepIndex(step) === 0;
|
||||
}
|
||||
|
||||
export function SetupWizard({ isOpen, onClose, onProjectCreated, onRegisterProject }: SetupWizardProps) {
|
||||
const [state, setState] = useState<WizardState>({
|
||||
step: "directory",
|
||||
directory: "",
|
||||
name: "",
|
||||
isolationMode: "in-process",
|
||||
isValidating: false,
|
||||
validationError: null,
|
||||
hasFusionDir: null,
|
||||
isCreating: false,
|
||||
createError: null,
|
||||
});
|
||||
|
||||
// Reset state when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setState({
|
||||
step: "directory",
|
||||
directory: "",
|
||||
name: "",
|
||||
isolationMode: "in-process",
|
||||
isValidating: false,
|
||||
validationError: null,
|
||||
hasFusionDir: null,
|
||||
isCreating: false,
|
||||
createError: null,
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Auto-suggest name from directory
|
||||
useEffect(() => {
|
||||
if (state.directory && !state.name) {
|
||||
const basename = state.directory.split("/").pop() || state.directory.split("\\").pop() || "";
|
||||
setState((prev) => ({ ...prev, name: basename }));
|
||||
}
|
||||
}, [state.directory, state.name]);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
const currentIndex = getStepIndex(state.step);
|
||||
if (currentIndex < STEP_ORDER.length - 1) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
step: STEP_ORDER[currentIndex + 1],
|
||||
validationError: null,
|
||||
createError: null,
|
||||
}));
|
||||
}
|
||||
}, [state.step]);
|
||||
|
||||
const handleBack = useCallback(() => {
|
||||
const currentIndex = getStepIndex(state.step);
|
||||
if (currentIndex > 0) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
step: STEP_ORDER[currentIndex - 1],
|
||||
validationError: null,
|
||||
createError: null,
|
||||
}));
|
||||
}
|
||||
}, [state.step]);
|
||||
|
||||
const handleValidate = useCallback(async () => {
|
||||
setState((prev) => ({ ...prev, isValidating: true, validationError: null }));
|
||||
|
||||
try {
|
||||
// Check if directory exists and has .fusion/ directory
|
||||
// In a real implementation, this would call an API endpoint
|
||||
// For now, we simulate the check
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// Simulate validation - assume valid for now
|
||||
const hasFusionDir = true; // Would be determined by API call
|
||||
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isValidating: false,
|
||||
hasFusionDir,
|
||||
step: "summary",
|
||||
}));
|
||||
} catch (err: any) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isValidating: false,
|
||||
validationError: err.message || "Validation failed",
|
||||
}));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCreate = useCallback(async () => {
|
||||
if (!onRegisterProject) {
|
||||
setState((prev) => ({ ...prev, createError: "Project registration not available" }));
|
||||
return;
|
||||
}
|
||||
|
||||
setState((prev) => ({ ...prev, isCreating: true, createError: null }));
|
||||
|
||||
try {
|
||||
const input: ProjectCreateInput = {
|
||||
name: state.name,
|
||||
path: state.directory,
|
||||
isolationMode: state.isolationMode,
|
||||
};
|
||||
|
||||
const project = await onRegisterProject(input);
|
||||
onProjectCreated(project);
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isCreating: false,
|
||||
createError: err.message || "Failed to create project",
|
||||
}));
|
||||
}
|
||||
}, [onRegisterProject, state.name, state.directory, state.isolationMode, onProjectCreated, onClose]);
|
||||
|
||||
const canProceed = () => {
|
||||
switch (state.step) {
|
||||
case "directory":
|
||||
return state.directory.trim().length > 0;
|
||||
case "name":
|
||||
return state.name.trim().length > 0;
|
||||
case "isolation":
|
||||
return true;
|
||||
case "validation":
|
||||
return !state.isValidating;
|
||||
case "summary":
|
||||
return !state.isCreating;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay open" onClick={onClose}>
|
||||
<div className="modal modal-lg" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3>Add New Project</h3>
|
||||
<button className="modal-close" onClick={onClose} aria-label="Close">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="wizard-progress">
|
||||
{STEP_ORDER.map((step, index) => (
|
||||
<div
|
||||
key={step}
|
||||
className={`wizard-progress-step ${
|
||||
index <= getStepIndex(state.step) ? "active" : ""
|
||||
} ${step === state.step ? "current" : ""}`}
|
||||
>
|
||||
<span className="wizard-progress-number">{index + 1}</span>
|
||||
<span className="wizard-progress-label">
|
||||
{step === "directory" && "Directory"}
|
||||
{step === "name" && "Name"}
|
||||
{step === "isolation" && "Mode"}
|
||||
{step === "validation" && "Validate"}
|
||||
{step === "summary" && "Confirm"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="wizard-content">
|
||||
{/* Step 1: Directory Selection */}
|
||||
{state.step === "directory" && (
|
||||
<div className="wizard-step">
|
||||
<h4>Select Project Directory</h4>
|
||||
<p className="wizard-description">
|
||||
Enter the absolute path to your project directory. This should be the root folder
|
||||
containing your project files.
|
||||
</p>
|
||||
<div className="form-group">
|
||||
<label htmlFor="project-directory">
|
||||
Directory Path <span className="required">*</span>
|
||||
</label>
|
||||
<div className="wizard-input-group">
|
||||
<Folder size={16} className="wizard-input-icon" />
|
||||
<input
|
||||
id="project-directory"
|
||||
type="text"
|
||||
value={state.directory}
|
||||
onChange={(e) =>
|
||||
setState((prev) => ({ ...prev, directory: e.target.value }))
|
||||
}
|
||||
placeholder="/path/to/your/project"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wizard-hint">
|
||||
<AlertCircle size={14} />
|
||||
<span>
|
||||
The directory must contain a <code>.fusion/</code> folder. If it doesn't exist,
|
||||
you can initialize it in the next step.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Project Name */}
|
||||
{state.step === "name" && (
|
||||
<div className="wizard-step">
|
||||
<h4>Project Name</h4>
|
||||
<p className="wizard-description">
|
||||
Give your project a display name. This will be shown in the dashboard.
|
||||
</p>
|
||||
<div className="form-group">
|
||||
<label htmlFor="project-name">
|
||||
Name <span className="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="project-name"
|
||||
type="text"
|
||||
value={state.name}
|
||||
onChange={(e) => setState((prev) => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="My Project"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="wizard-hint">
|
||||
<Check size={14} />
|
||||
<span>Suggested from directory name. You can change it if needed.</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Isolation Mode */}
|
||||
{state.step === "isolation" && (
|
||||
<div className="wizard-step">
|
||||
<h4>Execution Mode</h4>
|
||||
<p className="wizard-description">
|
||||
Choose how tasks should be executed for this project.
|
||||
</p>
|
||||
<div className="wizard-options">
|
||||
<label
|
||||
className={`wizard-option ${
|
||||
state.isolationMode === "in-process" ? "selected" : ""
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="isolation-mode"
|
||||
value="in-process"
|
||||
checked={state.isolationMode === "in-process"}
|
||||
onChange={() =>
|
||||
setState((prev) => ({ ...prev, isolationMode: "in-process" }))
|
||||
}
|
||||
/>
|
||||
<div className="wizard-option-content">
|
||||
<strong>In-Process (Default)</strong>
|
||||
<span>Fast, low overhead. Tasks run in the main process.</span>
|
||||
<span className="wizard-option-recommended">Recommended for most projects</span>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
className={`wizard-option ${
|
||||
state.isolationMode === "child-process" ? "selected" : ""
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="isolation-mode"
|
||||
value="child-process"
|
||||
checked={state.isolationMode === "child-process"}
|
||||
onChange={() =>
|
||||
setState((prev) => ({ ...prev, isolationMode: "child-process" }))
|
||||
}
|
||||
/>
|
||||
<div className="wizard-option-content">
|
||||
<strong>Child Process (Isolated)</strong>
|
||||
<span>Strong isolation. Tasks run in separate processes.</span>
|
||||
<span className="wizard-option-note">Higher overhead, crash containment</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Validation */}
|
||||
{state.step === "validation" && (
|
||||
<div className="wizard-step">
|
||||
<h4>Validation</h4>
|
||||
<p className="wizard-description">
|
||||
We're checking the project directory and preparing it for use.
|
||||
</p>
|
||||
{state.isValidating ? (
|
||||
<div className="wizard-loading">
|
||||
<Loader2 size={32} className="animate-spin" />
|
||||
<span>Validating project directory...</span>
|
||||
</div>
|
||||
) : state.validationError ? (
|
||||
<div className="wizard-error">
|
||||
<AlertCircle size={24} />
|
||||
<span>{state.validationError}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="wizard-validation-success">
|
||||
<Check size={32} />
|
||||
<span>Project directory is valid!</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 5: Summary */}
|
||||
{state.step === "summary" && (
|
||||
<div className="wizard-step">
|
||||
<h4>Summary</h4>
|
||||
<p className="wizard-description">
|
||||
Review your project settings before creating.
|
||||
</p>
|
||||
<div className="wizard-summary">
|
||||
<div className="wizard-summary-row">
|
||||
<span className="wizard-summary-label">Name:</span>
|
||||
<span className="wizard-summary-value">{state.name}</span>
|
||||
</div>
|
||||
<div className="wizard-summary-row">
|
||||
<span className="wizard-summary-label">Directory:</span>
|
||||
<span className="wizard-summary-value" title={state.directory}>
|
||||
{state.directory}
|
||||
</span>
|
||||
</div>
|
||||
<div className="wizard-summary-row">
|
||||
<span className="wizard-summary-label">Execution Mode:</span>
|
||||
<span className="wizard-summary-value">
|
||||
{state.isolationMode === "in-process" ? "In-Process" : "Child Process (Isolated)"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{state.createError && (
|
||||
<div className="wizard-error">
|
||||
<AlertCircle size={20} />
|
||||
<span>{state.createError}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="modal-actions">
|
||||
<div className="modal-actions-left">
|
||||
{!isFirstStep(state.step) && (
|
||||
<button className="btn btn-secondary" onClick={handleBack} disabled={state.isCreating}>
|
||||
<ChevronLeft size={16} />
|
||||
Back
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-actions-right">
|
||||
<button className="btn btn-secondary" onClick={onClose} disabled={state.isCreating}>
|
||||
Cancel
|
||||
</button>
|
||||
{state.step === "validation" ? (
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleValidate}
|
||||
disabled={state.isValidating || state.validationError}
|
||||
>
|
||||
{state.isValidating ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
Validating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Validate
|
||||
<ChevronRight size={16} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : isLastStep(state.step) ? (
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleCreate}
|
||||
disabled={state.isCreating || !canProceed()}
|
||||
>
|
||||
{state.isCreating ? (
|
||||
<>
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Create Project
|
||||
<Check size={16} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleNext}
|
||||
disabled={!canProceed()}
|
||||
>
|
||||
Next
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { ActivityFeed } from "../ActivityFeed";
|
||||
import type { ActivityFeedEntry } from "../../api";
|
||||
|
||||
// Mock lucide-react icons
|
||||
vi.mock("lucide-react", async () => {
|
||||
const actual = await vi.importActual("lucide-react");
|
||||
return {
|
||||
...actual,
|
||||
GitPullRequest: () => <span data-testid="pr-icon">PR</span>,
|
||||
GitMerge: () => <span data-testid="merge-icon">Merge</span>,
|
||||
CheckCircle: () => <span data-testid="check-icon">✓</span>,
|
||||
XCircle: () => <span data-testid="x-icon">✗</span>,
|
||||
Plus: () => <span data-testid="plus-icon">+</span>,
|
||||
ArrowRightLeft: () => <span data-testid="arrow-icon">→</span>,
|
||||
Settings: () => <span data-testid="settings-icon">⚙</span>,
|
||||
AlertTriangle: () => <span data-testid="alert-icon">⚠</span>,
|
||||
Folder: () => <span data-testid="folder-icon">📁</span>,
|
||||
};
|
||||
});
|
||||
|
||||
function makeEntry(overrides: Partial<ActivityFeedEntry> = {}): ActivityFeedEntry {
|
||||
return {
|
||||
id: "entry_001",
|
||||
timestamp: new Date().toISOString(),
|
||||
type: "task:created",
|
||||
projectId: "proj_abc123",
|
||||
projectName: "Test Project",
|
||||
details: "Task created",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("ActivityFeed", () => {
|
||||
it("renders empty state when no entries", () => {
|
||||
render(<ActivityFeed entries={[]} />);
|
||||
|
||||
expect(screen.getByText("No recent activity")).toBeDefined();
|
||||
expect(screen.getByText(/Activity will appear here/)).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders custom empty message", () => {
|
||||
render(<ActivityFeed entries={[]} emptyMessage="Custom empty message" />);
|
||||
|
||||
expect(screen.getByText("Custom empty message")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders loading state", () => {
|
||||
const { container } = render(<ActivityFeed entries={[]} isLoading={true} />);
|
||||
|
||||
expect(container.querySelector(".activity-feed-loading")).toBeDefined();
|
||||
expect(container.querySelector(".activity-feed-skeleton")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders error state", () => {
|
||||
render(<ActivityFeed entries={[]} error="Failed to load activity" />);
|
||||
|
||||
expect(screen.getByText("Failed to load activity")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders activity entries", () => {
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ id: "entry_001", type: "task:created", details: "Created FN-001" }),
|
||||
makeEntry({ id: "entry_002", type: "task:moved", details: "Moved FN-002 to in-progress" }),
|
||||
];
|
||||
|
||||
render(<ActivityFeed entries={entries} />);
|
||||
|
||||
expect(screen.getByText("Created")).toBeDefined();
|
||||
expect(screen.getByText("Moved")).toBeDefined();
|
||||
expect(screen.getByText("Created FN-001")).toBeDefined();
|
||||
expect(screen.getByText("Moved FN-002 to in-progress")).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows project names when provided", () => {
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ projectId: "proj_abc123", projectName: "Project Alpha" }),
|
||||
];
|
||||
|
||||
render(
|
||||
<ActivityFeed
|
||||
entries={entries}
|
||||
projectNames={{ "proj_abc123": "Project Alpha" }}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Project Alpha")).toBeDefined();
|
||||
});
|
||||
|
||||
it("displays task ID when available", () => {
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ taskId: "FN-042", taskTitle: "Fix bug" }),
|
||||
];
|
||||
|
||||
render(<ActivityFeed entries={entries} />);
|
||||
|
||||
expect(screen.getByText("FN-042")).toBeDefined();
|
||||
expect(screen.getByText("Fix bug")).toBeDefined();
|
||||
});
|
||||
|
||||
it("groups entries by date", () => {
|
||||
const today = new Date().toISOString();
|
||||
const yesterday = new Date(Date.now() - 86400000).toISOString();
|
||||
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ id: "entry_001", timestamp: today }),
|
||||
makeEntry({ id: "entry_002", timestamp: yesterday }),
|
||||
];
|
||||
|
||||
const { container } = render(<ActivityFeed entries={entries} />);
|
||||
|
||||
const groups = container.querySelectorAll(".activity-feed-group");
|
||||
expect(groups.length).toBe(2);
|
||||
});
|
||||
|
||||
it("shows relative time for recent entries", () => {
|
||||
const fiveMinutesAgo = new Date(Date.now() - 5 * 60000).toISOString();
|
||||
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ timestamp: fiveMinutesAgo }),
|
||||
];
|
||||
|
||||
render(<ActivityFeed entries={entries} />);
|
||||
|
||||
expect(screen.getByText("5m ago")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders different event types with correct labels", () => {
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ id: "1", type: "task:created" }),
|
||||
makeEntry({ id: "2", type: "task:moved" }),
|
||||
makeEntry({ id: "3", type: "task:updated" }),
|
||||
makeEntry({ id: "4", type: "task:deleted" }),
|
||||
makeEntry({ id: "5", type: "task:merged" }),
|
||||
makeEntry({ id: "6", type: "task:failed" }),
|
||||
makeEntry({ id: "7", type: "settings:updated" }),
|
||||
];
|
||||
|
||||
render(<ActivityFeed entries={entries} />);
|
||||
|
||||
expect(screen.getByText("Created")).toBeDefined();
|
||||
expect(screen.getByText("Moved")).toBeDefined();
|
||||
expect(screen.getByText("Updated")).toBeDefined();
|
||||
expect(screen.getByText("Deleted")).toBeDefined();
|
||||
expect(screen.getByText("Merged")).toBeDefined();
|
||||
expect(screen.getByText("Failed")).toBeDefined();
|
||||
expect(screen.getByText("Settings")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders with data-type attribute for styling", () => {
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ type: "task:created" }),
|
||||
];
|
||||
|
||||
const { container } = render(<ActivityFeed entries={entries} />);
|
||||
|
||||
const item = container.querySelector('[data-type="task:created"]');
|
||||
expect(item).toBeDefined();
|
||||
});
|
||||
|
||||
it("truncates long task titles", () => {
|
||||
const longTitle = "A".repeat(200);
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ taskTitle: longTitle }),
|
||||
];
|
||||
|
||||
const { container } = render(<ActivityFeed entries={entries} />);
|
||||
|
||||
const titleEl = container.querySelector(".activity-feed-task-title");
|
||||
expect(titleEl).toBeDefined();
|
||||
expect(titleEl?.getAttribute("title")).toBe(longTitle);
|
||||
});
|
||||
|
||||
it("shows full timestamp on hover via title attribute", () => {
|
||||
// Use a recent timestamp so it shows "ago" format
|
||||
const recentTime = new Date(Date.now() - 5 * 60000).toISOString();
|
||||
const entries: ActivityFeedEntry[] = [
|
||||
makeEntry({ timestamp: recentTime }),
|
||||
];
|
||||
|
||||
render(<ActivityFeed entries={entries} />);
|
||||
|
||||
// Should show relative time like "5m ago"
|
||||
const timeEl = screen.getByText(/ago/);
|
||||
expect(timeEl).toBeDefined();
|
||||
// Title attribute should have full timestamp
|
||||
expect(timeEl.getAttribute("title")).toContain(":");
|
||||
});
|
||||
});
|
||||
432
packages/dashboard/app/components/__tests__/ProjectCard.test.tsx
Normal file
432
packages/dashboard/app/components/__tests__/ProjectCard.test.tsx
Normal file
@@ -0,0 +1,432 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { ProjectCard } from "../ProjectCard";
|
||||
import type { RegisteredProject, ProjectHealth } from "@fusion/core";
|
||||
|
||||
// Mock lucide-react to avoid SVG rendering issues in test env
|
||||
vi.mock("lucide-react", () => ({
|
||||
Play: () => <span data-testid="play-icon">▶</span>,
|
||||
Pause: () => <span data-testid="pause-icon">⏸</span>,
|
||||
AlertCircle: () => <span data-testid="alert-icon">⚠</span>,
|
||||
Loader2: () => <span data-testid="loader-icon">⟳</span>,
|
||||
MoreHorizontal: () => null,
|
||||
Trash2: () => <span data-testid="trash-icon">🗑</span>,
|
||||
Folder: () => <span data-testid="folder-icon">📁</span>,
|
||||
ArrowRight: () => <span data-testid="arrow-icon">→</span>,
|
||||
}));
|
||||
|
||||
function makeProject(overrides: Partial<RegisteredProject> = {}): RegisteredProject {
|
||||
return {
|
||||
id: "proj_abc123",
|
||||
name: "Test Project",
|
||||
path: "/home/user/projects/test",
|
||||
status: "active",
|
||||
isolationMode: "in-process",
|
||||
createdAt: "2026-01-01T00:00:00.000Z",
|
||||
updatedAt: "2026-01-01T00:00:00.000Z",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function makeHealth(overrides: Partial<ProjectHealth> = {}): ProjectHealth {
|
||||
return {
|
||||
projectId: "proj_abc123",
|
||||
status: "active",
|
||||
activeTaskCount: 5,
|
||||
inFlightAgentCount: 2,
|
||||
totalTasksCompleted: 100,
|
||||
totalTasksFailed: 3,
|
||||
updatedAt: "2026-01-01T00:00:00.000Z",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
describe("ProjectCard", () => {
|
||||
it("renders project name and path", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ name: "My Project", path: "/path/to/project" })}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("My Project")).toBeDefined();
|
||||
expect(screen.getByText("/path/to/project")).toBeDefined();
|
||||
});
|
||||
|
||||
it("truncates long paths", () => {
|
||||
const longPath = "/very/long/path/to/the/project/directory/that/needs/truncation";
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ path: longPath })}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should show truncated version
|
||||
const pathElement = screen.getByText(/\/very\/long\/.*\/truncation/);
|
||||
expect(pathElement).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders active status badge", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "active" })}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Active")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders paused status badge", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "paused" })}
|
||||
health={makeHealth({ status: "paused" })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Paused")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders errored status badge", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "errored" })}
|
||||
health={makeHealth({ status: "errored" })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Error")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders initializing status badge with spinner", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "initializing" })}
|
||||
health={makeHealth({ status: "initializing" })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Initializing")).toBeDefined();
|
||||
expect(screen.getByTestId("loader-icon")).toBeDefined();
|
||||
});
|
||||
|
||||
it("displays health metrics", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject()}
|
||||
health={makeHealth({
|
||||
activeTaskCount: 10,
|
||||
inFlightAgentCount: 3,
|
||||
totalTasksCompleted: 250,
|
||||
})}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("10")).toBeDefined();
|
||||
expect(screen.getByText("Active Tasks")).toBeDefined();
|
||||
expect(screen.getByText("3")).toBeDefined();
|
||||
expect(screen.getByText("Agents")).toBeDefined();
|
||||
expect(screen.getByText("250")).toBeDefined();
|
||||
expect(screen.getByText("Completed")).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows 'No health data' when health is null", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject()}
|
||||
health={null}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("No health data available")).toBeDefined();
|
||||
});
|
||||
|
||||
it("formats relative time for last activity", () => {
|
||||
const recentTime = new Date(Date.now() - 5 * 60000).toISOString(); // 5 minutes ago
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ lastActivityAt: recentTime })}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("5m ago")).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows 'Never' when no last activity", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ lastActivityAt: undefined })}
|
||||
health={makeHealth({ lastActivityAt: undefined })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Never")).toBeDefined();
|
||||
});
|
||||
|
||||
it("calls onSelect when card is clicked", () => {
|
||||
const onSelect = vi.fn();
|
||||
const project = makeProject();
|
||||
|
||||
const { container } = render(
|
||||
<ProjectCard
|
||||
project={project}
|
||||
health={makeHealth()}
|
||||
onSelect={onSelect}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
const card = container.querySelector('[data-project-id="proj_abc123"]');
|
||||
expect(card).not.toBeNull();
|
||||
fireEvent.click(card!);
|
||||
expect(onSelect).toHaveBeenCalledWith(project);
|
||||
});
|
||||
|
||||
it("calls onSelect when Enter key is pressed", () => {
|
||||
const onSelect = vi.fn();
|
||||
const project = makeProject();
|
||||
|
||||
const { container } = render(
|
||||
<ProjectCard
|
||||
project={project}
|
||||
health={makeHealth()}
|
||||
onSelect={onSelect}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
const card = container.querySelector('[data-project-id="proj_abc123"]');
|
||||
expect(card).not.toBeNull();
|
||||
fireEvent.keyDown(card!, { key: "Enter" });
|
||||
expect(onSelect).toHaveBeenCalledWith(project);
|
||||
});
|
||||
|
||||
it("calls onPause when pause button is clicked", () => {
|
||||
const onPause = vi.fn();
|
||||
const project = makeProject({ status: "active" });
|
||||
|
||||
render(
|
||||
<ProjectCard
|
||||
project={project}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={onPause}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Pause project"));
|
||||
expect(onPause).toHaveBeenCalledWith(project);
|
||||
});
|
||||
|
||||
it("calls onResume when resume button is clicked", () => {
|
||||
const onResume = vi.fn();
|
||||
const project = makeProject({ status: "paused" });
|
||||
|
||||
render(
|
||||
<ProjectCard
|
||||
project={project}
|
||||
health={makeHealth({ status: "paused" })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={onResume}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Resume project"));
|
||||
expect(onResume).toHaveBeenCalledWith(project);
|
||||
});
|
||||
|
||||
it("calls onRemove when remove button is clicked", () => {
|
||||
const onRemove = vi.fn();
|
||||
const project = makeProject();
|
||||
|
||||
render(
|
||||
<ProjectCard
|
||||
project={project}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Remove project"));
|
||||
expect(onRemove).toHaveBeenCalledWith(project);
|
||||
});
|
||||
|
||||
it("disables pause button when initializing", () => {
|
||||
const { container } = render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "initializing" })}
|
||||
health={makeHealth({ status: "initializing" })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find the pause button by its title attribute
|
||||
const pauseButton = container.querySelector('button[title="Cannot pause while initializing"]');
|
||||
expect(pauseButton).not.toBeNull();
|
||||
expect(pauseButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it("disables all buttons when isLoading is true", () => {
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "active" })}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
isLoading={true}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByLabelText("Pause project")).toBeDisabled();
|
||||
expect(screen.getByLabelText("Open project")).toBeDisabled();
|
||||
expect(screen.getByLabelText("Remove project")).toBeDisabled();
|
||||
});
|
||||
|
||||
it("adds loading class when isLoading is true", () => {
|
||||
const { container } = render(
|
||||
<ProjectCard
|
||||
project={makeProject()}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
isLoading={true}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.querySelector(".project-card-loading")).toBeDefined();
|
||||
});
|
||||
|
||||
it("adds errored class when project status is errored", () => {
|
||||
const { container } = render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "errored" })}
|
||||
health={makeHealth({ status: "errored" })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.querySelector(".project-card-errored")).toBeDefined();
|
||||
});
|
||||
|
||||
it("prevents event bubbling when clicking action buttons", () => {
|
||||
const onSelect = vi.fn();
|
||||
const onPause = vi.fn();
|
||||
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ status: "active" })}
|
||||
health={makeHealth()}
|
||||
onSelect={onSelect}
|
||||
onPause={onPause}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Pause project"));
|
||||
expect(onPause).toHaveBeenCalled();
|
||||
expect(onSelect).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("renders with data-project-id attribute", () => {
|
||||
const { container } = render(
|
||||
<ProjectCard
|
||||
project={makeProject({ id: "proj_test123" })}
|
||||
health={makeHealth()}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
const card = container.querySelector("[data-project-id='proj_test123']");
|
||||
expect(card).toBeDefined();
|
||||
});
|
||||
|
||||
it("uses health lastActivityAt as fallback when project lastActivityAt is undefined", () => {
|
||||
const healthTime = "2026-01-15T12:00:00.000Z";
|
||||
render(
|
||||
<ProjectCard
|
||||
project={makeProject({ lastActivityAt: undefined })}
|
||||
health={makeHealth({ lastActivityAt: healthTime })}
|
||||
onSelect={noop}
|
||||
onPause={noop}
|
||||
onResume={noop}
|
||||
onRemove={noop}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should show the health's lastActivityAt formatted (shows as date since it's > 7 days ago)
|
||||
expect(screen.getByText(/Last activity:/)).toBeDefined();
|
||||
// The formatted date should show (1/15/2026 format in US locale)
|
||||
expect(screen.getByText(/1\//)).toBeDefined();
|
||||
});
|
||||
});
|
||||
284
packages/dashboard/app/components/__tests__/SetupWizard.test.tsx
Normal file
284
packages/dashboard/app/components/__tests__/SetupWizard.test.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import { SetupWizard } from "../SetupWizard";
|
||||
import type { ProjectInfo, ProjectCreateInput } from "../../api";
|
||||
|
||||
// Mock lucide-react
|
||||
vi.mock("lucide-react", async () => {
|
||||
const actual = await vi.importActual("lucide-react");
|
||||
return {
|
||||
...actual,
|
||||
X: () => <span data-testid="close-icon">×</span>,
|
||||
ChevronRight: () => <span data-testid="next-icon">→</span>,
|
||||
ChevronLeft: () => <span data-testid="back-icon">←</span>,
|
||||
Folder: () => <span data-testid="folder-icon">📁</span>,
|
||||
Check: () => <span data-testid="check-icon">✓</span>,
|
||||
Loader2: () => <span data-testid="loader-icon">⟳</span>,
|
||||
AlertCircle: () => <span data-testid="alert-icon">⚠</span>,
|
||||
};
|
||||
});
|
||||
|
||||
describe("SetupWizard", () => {
|
||||
it("does not render when isOpen is false", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={false}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByText("Add New Project")).toBeNull();
|
||||
});
|
||||
|
||||
it("renders when isOpen is true", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Add New Project")).toBeDefined();
|
||||
});
|
||||
|
||||
it("starts at directory step", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Select Project Directory")).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows step indicator with 5 steps", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Directory")).toBeDefined();
|
||||
expect(screen.getByText("Name")).toBeDefined();
|
||||
expect(screen.getByText("Mode")).toBeDefined();
|
||||
expect(screen.getByText("Validate")).toBeDefined();
|
||||
expect(screen.getByText("Confirm")).toBeDefined();
|
||||
});
|
||||
|
||||
it("disables Next button when directory is empty", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const nextButton = screen.getByRole("button", { name: /Next/i });
|
||||
expect(nextButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it("enables Next button when directory is filled", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const input = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(input, { target: { value: "/home/user/project" } });
|
||||
|
||||
const nextButton = screen.getByRole("button", { name: /Next/i });
|
||||
expect(nextButton).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it("navigates to next step when Next is clicked", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const input = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(input, { target: { value: "/home/user/project" } });
|
||||
|
||||
// Find the primary button (Next) in the actions area
|
||||
const nextButton = screen.getByRole("button", { name: /Next/i });
|
||||
fireEvent.click(nextButton);
|
||||
|
||||
expect(screen.getByText("Project Name")).toBeDefined();
|
||||
});
|
||||
|
||||
it("auto-suggests name from directory path", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const input = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(input, { target: { value: "/home/user/my-awesome-project" } });
|
||||
|
||||
const nextButton = screen.getByRole("button", { name: /Next/i });
|
||||
fireEvent.click(nextButton);
|
||||
|
||||
const nameInput = screen.getByPlaceholderText("My Project") as HTMLInputElement;
|
||||
expect(nameInput.value).toBe("my-awesome-project");
|
||||
});
|
||||
|
||||
it("allows navigation back to previous step", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// Go to step 2
|
||||
const input = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(input, { target: { value: "/home/user/project" } });
|
||||
const nextButton = screen.getByRole("button", { name: /Next/i });
|
||||
fireEvent.click(nextButton);
|
||||
|
||||
// Go back
|
||||
const backButton = screen.getByRole("button", { name: /Back/i });
|
||||
fireEvent.click(backButton);
|
||||
|
||||
expect(screen.getByText("Select Project Directory")).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows isolation mode options", () => {
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// Navigate to step 3 (isolation)
|
||||
const dirInput = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(dirInput, { target: { value: "/home/user/project" } });
|
||||
|
||||
// Go to name step
|
||||
fireEvent.click(screen.getByRole("button", { name: /Next/i }));
|
||||
|
||||
// Go to isolation step
|
||||
fireEvent.click(screen.getByRole("button", { name: /Next/i }));
|
||||
|
||||
expect(screen.getByText("In-Process (Default)")).toBeDefined();
|
||||
expect(screen.getByText("Child Process (Isolated)")).toBeDefined();
|
||||
});
|
||||
|
||||
it("calls onClose when Cancel is clicked", () => {
|
||||
const onClose = vi.fn();
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const cancelButton = screen.getByRole("button", { name: /Cancel/i });
|
||||
fireEvent.click(cancelButton);
|
||||
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("calls onClose when close icon is clicked", () => {
|
||||
const onClose = vi.fn();
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const closeButton = screen.getByLabelText("Close");
|
||||
fireEvent.click(closeButton);
|
||||
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("submits project data when created", async () => {
|
||||
const mockRegisterProject = vi.fn().mockResolvedValue({
|
||||
id: "proj_123",
|
||||
name: "My Project",
|
||||
path: "/home/user/project",
|
||||
status: "active",
|
||||
isolationMode: "in-process",
|
||||
} as ProjectInfo);
|
||||
|
||||
const onProjectCreated = vi.fn();
|
||||
|
||||
render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={onProjectCreated}
|
||||
onRegisterProject={mockRegisterProject}
|
||||
/>
|
||||
);
|
||||
|
||||
// Fill directory
|
||||
const dirInput = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(dirInput, { target: { value: "/home/user/project" } });
|
||||
|
||||
// The wizard should be in directory step with a Next button
|
||||
expect(screen.getByRole("button", { name: /Next/i })).toBeDefined();
|
||||
|
||||
// Note: Full wizard flow testing would require more complex setup
|
||||
// including mocking the validation API call
|
||||
});
|
||||
|
||||
it("resets state when reopened", () => {
|
||||
const { rerender } = render(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// Fill some data
|
||||
const input = screen.getByPlaceholderText("/path/to/your/project");
|
||||
fireEvent.change(input, { target: { value: "/home/user/project" } });
|
||||
|
||||
// Close and reopen
|
||||
rerender(
|
||||
<SetupWizard
|
||||
isOpen={false}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
rerender(
|
||||
<SetupWizard
|
||||
isOpen={true}
|
||||
onClose={vi.fn()}
|
||||
onProjectCreated={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should be back at step 1 with empty fields
|
||||
expect(screen.getByText("Select Project Directory")).toBeDefined();
|
||||
const newInput = screen.getByPlaceholderText("/path/to/your/project") as HTMLInputElement;
|
||||
expect(newInput.value).toBe("");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user