mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-02 08:33:36 +00:00
919e08689a
- Introduced a helper function, handleStartImplementation, to manage concurrency checks and feature status updates when moving features from backlog to in_progress. - Simplified the onImplement callback in KanbanCard to utilize the new helper function, enhancing code readability and maintainability. - Removed redundant concurrency checks from multiple locations, centralizing the logic for better consistency and reducing code duplication.
1276 lines
46 KiB
TypeScript
1276 lines
46 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useMemo, memo } from "react";
|
|
import { useSortable } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { HotkeyButton } from "@/components/ui/hotkey-button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Feature, useAppStore, ThinkingLevel } from "@/store/app-store";
|
|
import {
|
|
GripVertical,
|
|
Edit,
|
|
CheckCircle2,
|
|
Circle,
|
|
Loader2,
|
|
Trash2,
|
|
Eye,
|
|
PlayCircle,
|
|
RotateCcw,
|
|
StopCircle,
|
|
Hand,
|
|
MessageSquare,
|
|
GitCommit,
|
|
Cpu,
|
|
Wrench,
|
|
ListTodo,
|
|
Sparkles,
|
|
Expand,
|
|
FileText,
|
|
MoreVertical,
|
|
AlertCircle,
|
|
GitBranch,
|
|
Undo2,
|
|
GitMerge,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Brain,
|
|
Flag,
|
|
Wand2,
|
|
Archive,
|
|
} from "lucide-react";
|
|
import { CountUpTimer } from "@/components/ui/count-up-timer";
|
|
import { getElectronAPI } from "@/lib/electron";
|
|
import {
|
|
parseAgentContext,
|
|
AgentTaskInfo,
|
|
formatModelName,
|
|
DEFAULT_MODEL,
|
|
} from "@/lib/agent-context-parser";
|
|
import { Markdown } from "@/components/ui/markdown";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
|
|
/**
|
|
* Formats thinking level for compact display
|
|
*/
|
|
function formatThinkingLevel(level: ThinkingLevel | undefined): string {
|
|
if (!level || level === "none") return "";
|
|
const labels: Record<ThinkingLevel, string> = {
|
|
none: "",
|
|
low: "Low",
|
|
medium: "Med",
|
|
high: "High",
|
|
ultrathink: "Ultra",
|
|
};
|
|
return labels[level];
|
|
}
|
|
|
|
/**
|
|
* Formats priority for display
|
|
*/
|
|
function formatPriority(priority: number | undefined): string | null {
|
|
if (!priority) return null;
|
|
const labels: Record<number, string> = {
|
|
1: "High",
|
|
2: "Medium",
|
|
3: "Low",
|
|
};
|
|
return labels[priority] || null;
|
|
}
|
|
|
|
/**
|
|
* Gets priority badge color classes
|
|
*/
|
|
function getPriorityBadgeClasses(priority: number | undefined): string {
|
|
if (priority === 1) {
|
|
return "bg-red-500/20 border border-red-500/50 text-red-400";
|
|
} else if (priority === 2) {
|
|
return "bg-yellow-500/20 border border-yellow-500/50 text-yellow-400";
|
|
} else if (priority === 3) {
|
|
return "bg-blue-500/20 border border-blue-500/50 text-blue-400";
|
|
}
|
|
return "";
|
|
}
|
|
|
|
interface KanbanCardProps {
|
|
feature: Feature;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
onViewOutput?: () => void;
|
|
onVerify?: () => void;
|
|
onResume?: () => void;
|
|
onForceStop?: () => void;
|
|
onManualVerify?: () => void;
|
|
onMoveBackToInProgress?: () => void;
|
|
onFollowUp?: () => void;
|
|
onCommit?: () => void;
|
|
onRevert?: () => void;
|
|
onMerge?: () => void;
|
|
onImplement?: () => void;
|
|
onComplete?: () => void;
|
|
hasContext?: boolean;
|
|
isCurrentAutoTask?: boolean;
|
|
shortcutKey?: string;
|
|
/** Context content for extracting progress info */
|
|
contextContent?: string;
|
|
/** Feature summary from agent completion */
|
|
summary?: string;
|
|
/** Opacity percentage (0-100) */
|
|
opacity?: number;
|
|
/** Whether to use glassmorphism (backdrop-blur) effect */
|
|
glassmorphism?: boolean;
|
|
/** Whether to show card borders */
|
|
cardBorderEnabled?: boolean;
|
|
/** Card border opacity percentage (0-100) */
|
|
cardBorderOpacity?: number;
|
|
}
|
|
|
|
export const KanbanCard = memo(function KanbanCard({
|
|
feature,
|
|
onEdit,
|
|
onDelete,
|
|
onViewOutput,
|
|
onVerify,
|
|
onResume,
|
|
onForceStop,
|
|
onManualVerify,
|
|
onMoveBackToInProgress,
|
|
onFollowUp,
|
|
onCommit,
|
|
onRevert,
|
|
onMerge,
|
|
onImplement,
|
|
onComplete,
|
|
hasContext,
|
|
isCurrentAutoTask,
|
|
shortcutKey,
|
|
contextContent,
|
|
summary,
|
|
opacity = 100,
|
|
glassmorphism = true,
|
|
cardBorderEnabled = true,
|
|
cardBorderOpacity = 100,
|
|
}: KanbanCardProps) {
|
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
|
const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
|
|
const [isRevertDialogOpen, setIsRevertDialogOpen] = useState(false);
|
|
const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
|
|
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
|
|
const [currentTime, setCurrentTime] = useState(() => Date.now());
|
|
const { kanbanCardDetailLevel } = useAppStore();
|
|
|
|
// Check if feature has worktree
|
|
const hasWorktree = !!feature.branchName;
|
|
|
|
// Helper functions to check what should be shown based on detail level
|
|
const showSteps =
|
|
kanbanCardDetailLevel === "standard" ||
|
|
kanbanCardDetailLevel === "detailed";
|
|
const showAgentInfo = kanbanCardDetailLevel === "detailed";
|
|
|
|
// Helper to check if "just finished" badge should be shown (within 2 minutes)
|
|
const isJustFinished = useMemo(() => {
|
|
if (
|
|
!feature.justFinishedAt ||
|
|
feature.status !== "waiting_approval" ||
|
|
feature.error
|
|
) {
|
|
return false;
|
|
}
|
|
const finishedTime = new Date(feature.justFinishedAt).getTime();
|
|
const twoMinutes = 2 * 60 * 1000; // 2 minutes in milliseconds
|
|
return currentTime - finishedTime < twoMinutes;
|
|
}, [feature.justFinishedAt, feature.status, feature.error, currentTime]);
|
|
|
|
// Update current time periodically to check if badge should be hidden
|
|
useEffect(() => {
|
|
if (!feature.justFinishedAt || feature.status !== "waiting_approval") {
|
|
return;
|
|
}
|
|
|
|
const finishedTime = new Date(feature.justFinishedAt).getTime();
|
|
const twoMinutes = 2 * 60 * 1000; // 2 minutes in milliseconds
|
|
const timeRemaining = twoMinutes - (currentTime - finishedTime);
|
|
|
|
if (timeRemaining <= 0) {
|
|
// Already past 2 minutes
|
|
return;
|
|
}
|
|
|
|
// Update time every second to check if 2 minutes have passed
|
|
const interval = setInterval(() => {
|
|
setCurrentTime(Date.now());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [feature.justFinishedAt, feature.status, currentTime]);
|
|
|
|
// Calculate priority badge position
|
|
const priorityLabel = formatPriority(feature.priority);
|
|
const hasPriority = !!priorityLabel;
|
|
|
|
// Calculate top position for badges (stacking vertically)
|
|
const getBadgeTopPosition = (badgeIndex: number) => {
|
|
return badgeIndex === 0
|
|
? "top-2"
|
|
: badgeIndex === 1
|
|
? "top-8"
|
|
: badgeIndex === 2
|
|
? "top-14"
|
|
: "top-20";
|
|
};
|
|
|
|
// Determine badge positions (must be after isJustFinished is defined)
|
|
let badgeIndex = 0;
|
|
const priorityBadgeIndex = hasPriority ? badgeIndex++ : -1;
|
|
const skipTestsBadgeIndex =
|
|
feature.skipTests && !feature.error ? badgeIndex++ : -1;
|
|
const errorBadgeIndex = feature.error ? badgeIndex++ : -1;
|
|
const justFinishedBadgeIndex = isJustFinished ? badgeIndex++ : -1;
|
|
const branchBadgeIndex =
|
|
hasWorktree && !isCurrentAutoTask ? badgeIndex++ : -1;
|
|
|
|
// Total number of badges displayed
|
|
const totalBadgeCount = badgeIndex;
|
|
|
|
// Load context file for in_progress, waiting_approval, and verified features
|
|
useEffect(() => {
|
|
const loadContext = async () => {
|
|
// Use provided context or load from file
|
|
if (contextContent) {
|
|
const info = parseAgentContext(contextContent);
|
|
setAgentInfo(info);
|
|
return;
|
|
}
|
|
|
|
// Only load for non-backlog features
|
|
if (feature.status === "backlog") {
|
|
setAgentInfo(null);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const api = getElectronAPI();
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const currentProject = (window as any).__currentProject;
|
|
if (!currentProject?.path) return;
|
|
|
|
// Use features API to get agent output
|
|
if (api.features) {
|
|
const result = await api.features.getAgentOutput(
|
|
currentProject.path,
|
|
feature.id
|
|
);
|
|
|
|
if (result.success && result.content) {
|
|
const info = parseAgentContext(result.content);
|
|
setAgentInfo(info);
|
|
}
|
|
} else {
|
|
// Fallback to direct file read for backward compatibility
|
|
const contextPath = `${currentProject.path}/.automaker/features/${feature.id}/agent-output.md`;
|
|
const result = await api.readFile(contextPath);
|
|
|
|
if (result.success && result.content) {
|
|
const info = parseAgentContext(result.content);
|
|
setAgentInfo(info);
|
|
}
|
|
}
|
|
} catch {
|
|
// Context file might not exist
|
|
console.debug("[KanbanCard] No context file for feature:", feature.id);
|
|
}
|
|
};
|
|
|
|
loadContext();
|
|
|
|
// Reload context periodically while feature is running
|
|
if (isCurrentAutoTask) {
|
|
const interval = setInterval(loadContext, 3000);
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [feature.id, feature.status, contextContent, isCurrentAutoTask]);
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
setIsDeleteDialogOpen(true);
|
|
};
|
|
|
|
const handleConfirmDelete = () => {
|
|
onDelete();
|
|
};
|
|
|
|
// Dragging logic:
|
|
// - Backlog items can always be dragged
|
|
// - skipTests items can be dragged even when in_progress or verified (unless currently running)
|
|
// - waiting_approval items can always be dragged (to allow manual verification via drag)
|
|
// - verified items can always be dragged (to allow moving back to waiting_approval or backlog)
|
|
// - Non-skipTests (TDD) items in progress cannot be dragged (they are running)
|
|
const isDraggable =
|
|
feature.status === "backlog" ||
|
|
feature.status === "waiting_approval" ||
|
|
feature.status === "verified" ||
|
|
(feature.skipTests && !isCurrentAutoTask);
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id: feature.id,
|
|
disabled: !isDraggable,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : undefined,
|
|
};
|
|
|
|
// Calculate border style based on enabled state and opacity
|
|
const borderStyle: React.CSSProperties = { ...style };
|
|
if (!cardBorderEnabled) {
|
|
(borderStyle as Record<string, string>).borderWidth = "0px";
|
|
(borderStyle as Record<string, string>).borderColor = "transparent";
|
|
} else if (cardBorderOpacity !== 100) {
|
|
// Apply border opacity using color-mix to blend the border color with transparent
|
|
// The --border variable uses oklch format, so we use color-mix in oklch space
|
|
// Ensure border width is set (1px is the default Tailwind border width)
|
|
(borderStyle as Record<string, string>).borderWidth = "1px";
|
|
(
|
|
borderStyle as Record<string, string>
|
|
).borderColor = `color-mix(in oklch, var(--border) ${cardBorderOpacity}%, transparent)`;
|
|
}
|
|
|
|
const cardElement = (
|
|
<Card
|
|
ref={setNodeRef}
|
|
style={isCurrentAutoTask ? style : borderStyle}
|
|
className={cn(
|
|
"cursor-grab active:cursor-grabbing transition-all relative kanban-card-content select-none",
|
|
// Apply border class when border is enabled and opacity is 100%
|
|
// When opacity is not 100%, we use inline styles for border color
|
|
// Skip border classes when animated border is active (isCurrentAutoTask)
|
|
!isCurrentAutoTask &&
|
|
cardBorderEnabled &&
|
|
cardBorderOpacity === 100 &&
|
|
"border-border",
|
|
// When border is enabled but opacity is not 100%, we still need border width
|
|
!isCurrentAutoTask &&
|
|
cardBorderEnabled &&
|
|
cardBorderOpacity !== 100 &&
|
|
"border",
|
|
// Remove default background when using opacity overlay
|
|
!isDragging && "bg-transparent",
|
|
// Remove default backdrop-blur-sm from Card component when glassmorphism is disabled
|
|
!glassmorphism && "backdrop-blur-[0px]!",
|
|
isDragging && "scale-105 shadow-lg",
|
|
// Error state border (only when not in progress)
|
|
feature.error &&
|
|
!isCurrentAutoTask &&
|
|
"border-red-500 border-2 shadow-red-500/30 shadow-lg",
|
|
!isDraggable && "cursor-default"
|
|
)}
|
|
data-testid={`kanban-card-${feature.id}`}
|
|
onDoubleClick={onEdit}
|
|
{...attributes}
|
|
{...(isDraggable ? listeners : {})}
|
|
>
|
|
{/* Background overlay with opacity - only affects background, not content */}
|
|
{!isDragging && (
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 rounded-xl bg-card -z-10",
|
|
glassmorphism && "backdrop-blur-sm"
|
|
)}
|
|
style={{ opacity: opacity / 100 }}
|
|
/>
|
|
)}
|
|
{/* Priority badge */}
|
|
{hasPriority && (
|
|
<div
|
|
className={cn(
|
|
"absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
|
|
getBadgeTopPosition(priorityBadgeIndex),
|
|
"left-2",
|
|
getPriorityBadgeClasses(feature.priority)
|
|
)}
|
|
data-testid={`priority-badge-${feature.id}`}
|
|
title={`Priority: ${priorityLabel}`}
|
|
>
|
|
<Flag className="w-3 h-3" />
|
|
<span>{priorityLabel}</span>
|
|
</div>
|
|
)}
|
|
{/* Skip Tests indicator badge */}
|
|
{feature.skipTests && !feature.error && (
|
|
<div
|
|
className={cn(
|
|
"absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
|
|
getBadgeTopPosition(skipTestsBadgeIndex),
|
|
"left-2",
|
|
"bg-orange-500/20 border border-orange-500/50 text-orange-400"
|
|
)}
|
|
data-testid={`skip-tests-badge-${feature.id}`}
|
|
title="Manual verification required"
|
|
>
|
|
<Hand className="w-3 h-3" />
|
|
<span>Manual</span>
|
|
</div>
|
|
)}
|
|
{/* Error indicator badge */}
|
|
{feature.error && (
|
|
<div
|
|
className={cn(
|
|
"absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
|
|
getBadgeTopPosition(errorBadgeIndex),
|
|
"left-2",
|
|
"bg-red-500/20 border border-red-500/50 text-red-400"
|
|
)}
|
|
data-testid={`error-badge-${feature.id}`}
|
|
title={feature.error}
|
|
>
|
|
<AlertCircle className="w-3 h-3" />
|
|
<span>Errored</span>
|
|
</div>
|
|
)}
|
|
{/* Just Finished indicator badge - shows when agent just completed work (for 2 minutes) */}
|
|
{isJustFinished && (
|
|
<div
|
|
className={cn(
|
|
"absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
|
|
getBadgeTopPosition(justFinishedBadgeIndex),
|
|
"left-2",
|
|
"bg-green-500/20 border border-green-500/50 text-green-400 animate-pulse"
|
|
)}
|
|
data-testid={`just-finished-badge-${feature.id}`}
|
|
title="Agent just finished working on this feature"
|
|
>
|
|
<Sparkles className="w-3 h-3" />
|
|
<span>Fresh Baked</span>
|
|
</div>
|
|
)}
|
|
{/* Branch badge - show when feature has a worktree */}
|
|
{hasWorktree && !isCurrentAutoTask && (
|
|
<TooltipProvider delayDuration={300}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className={cn(
|
|
"absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10 cursor-default",
|
|
"bg-purple-500/20 border border-purple-500/50 text-purple-400",
|
|
getBadgeTopPosition(branchBadgeIndex),
|
|
"left-2"
|
|
)}
|
|
data-testid={`branch-badge-${feature.id}`}
|
|
>
|
|
<GitBranch className="w-3 h-3 shrink-0" />
|
|
<span className="truncate max-w-[80px]">
|
|
{feature.branchName?.replace("feature/", "")}
|
|
</span>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="max-w-[300px]">
|
|
<p className="font-mono text-xs break-all">
|
|
{feature.branchName}
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)}
|
|
<CardHeader
|
|
className={cn(
|
|
"p-3 pb-2 block", // Reset grid layout to block for custom kanban card layout
|
|
// Add extra top padding when badges are present to prevent text overlap
|
|
// Calculate padding based on number of badges
|
|
totalBadgeCount === 1 && "pt-10",
|
|
totalBadgeCount === 2 && "pt-14",
|
|
totalBadgeCount === 3 && "pt-20",
|
|
totalBadgeCount >= 4 && "pt-24"
|
|
)}
|
|
>
|
|
{isCurrentAutoTask && (
|
|
<div className="absolute top-2 right-2 flex items-center justify-center gap-2 bg-running-indicator/20 border border-running-indicator rounded px-2 py-0.5">
|
|
<Loader2 className="w-4 h-4 text-running-indicator animate-spin" />
|
|
<span className="text-xs text-running-indicator font-medium">
|
|
{formatModelName(feature.model ?? DEFAULT_MODEL)}
|
|
</span>
|
|
{feature.startedAt && (
|
|
<CountUpTimer
|
|
startedAt={feature.startedAt}
|
|
className="text-running-indicator"
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
{!isCurrentAutoTask && feature.status === "backlog" && (
|
|
<div className="absolute top-2 right-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteClick(e);
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`delete-backlog-${feature.id}`}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{!isCurrentAutoTask &&
|
|
(feature.status === "waiting_approval" ||
|
|
feature.status === "verified") && (
|
|
<div className="absolute top-2 right-2 flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEdit();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`edit-${
|
|
feature.status === "waiting_approval" ? "waiting" : "verified"
|
|
}-${feature.id}`}
|
|
title="Edit"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
{onViewOutput && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onViewOutput();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`logs-${
|
|
feature.status === "waiting_approval"
|
|
? "waiting"
|
|
: "verified"
|
|
}-${feature.id}`}
|
|
title="Logs"
|
|
>
|
|
<FileText className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteClick(e);
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`delete-${
|
|
feature.status === "waiting_approval" ? "waiting" : "verified"
|
|
}-${feature.id}`}
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{!isCurrentAutoTask && feature.status === "in_progress" && (
|
|
<div className="absolute top-2 right-2">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0 hover:bg-white/10"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`menu-${feature.id}`}
|
|
>
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEdit();
|
|
}}
|
|
data-testid={`edit-feature-${feature.id}`}
|
|
>
|
|
<Edit className="w-3 h-3 mr-2" />
|
|
Edit
|
|
</DropdownMenuItem>
|
|
{onViewOutput && (
|
|
<DropdownMenuItem
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onViewOutput();
|
|
}}
|
|
data-testid={`view-logs-${feature.id}`}
|
|
>
|
|
<FileText className="w-3 h-3 mr-2" />
|
|
Logs
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem
|
|
className="text-destructive focus:text-destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteClick(e as unknown as React.MouseEvent);
|
|
}}
|
|
data-testid={`delete-feature-${feature.id}`}
|
|
>
|
|
<Trash2 className="w-3 h-3 mr-2" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)}
|
|
<div className="flex items-start gap-2">
|
|
{isDraggable && (
|
|
<div
|
|
className="-ml-2 -mt-1 p-2 touch-none"
|
|
data-testid={`drag-handle-${feature.id}`}
|
|
>
|
|
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0 overflow-hidden">
|
|
<CardTitle
|
|
className={cn(
|
|
"text-sm leading-tight break-words hyphens-auto overflow-hidden",
|
|
!isDescriptionExpanded && "line-clamp-3"
|
|
)}
|
|
>
|
|
{feature.description || feature.summary || feature.id}
|
|
</CardTitle>
|
|
{/* Show More/Less toggle - only show when description is likely truncated */}
|
|
{(feature.description || feature.summary || "").length > 100 && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsDescriptionExpanded(!isDescriptionExpanded);
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
className="flex items-center gap-0.5 text-[10px] text-muted-foreground hover:text-foreground mt-1 transition-colors"
|
|
data-testid={`toggle-description-${feature.id}`}
|
|
>
|
|
{isDescriptionExpanded ? (
|
|
<>
|
|
<ChevronUp className="w-3 h-3" />
|
|
<span>Show Less</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ChevronDown className="w-3 h-3" />
|
|
<span>Show More</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
<CardDescription className="text-xs mt-1 truncate">
|
|
{feature.category}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-3 pt-0">
|
|
{/* Steps Preview - Show in Standard and Detailed modes */}
|
|
{showSteps && feature.steps && feature.steps.length > 0 && (
|
|
<div className="mb-3 space-y-1">
|
|
{feature.steps.slice(0, 3).map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-start gap-2 text-xs text-muted-foreground"
|
|
>
|
|
{feature.status === "verified" ? (
|
|
<CheckCircle2 className="w-3 h-3 mt-0.5 text-green-500 shrink-0" />
|
|
) : (
|
|
<Circle className="w-3 h-3 mt-0.5 shrink-0" />
|
|
)}
|
|
<span className="break-words hyphens-auto line-clamp-2 leading-relaxed">
|
|
{step}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{feature.steps.length > 3 && (
|
|
<p className="text-xs text-muted-foreground pl-5">
|
|
+{feature.steps.length - 3} more steps
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Model/Preset Info for Backlog Cards - Show in Detailed mode */}
|
|
{showAgentInfo && feature.status === "backlog" && (
|
|
<div className="mb-3 space-y-2 overflow-hidden">
|
|
<div className="flex items-center gap-2 text-xs flex-wrap">
|
|
<div className="flex items-center gap-1 text-cyan-400">
|
|
<Cpu className="w-3 h-3" />
|
|
<span className="font-medium">
|
|
{formatModelName(feature.model ?? DEFAULT_MODEL)}
|
|
</span>
|
|
</div>
|
|
{feature.thinkingLevel && feature.thinkingLevel !== "none" && (
|
|
<div className="flex items-center gap-1 text-purple-400">
|
|
<Brain className="w-3 h-3" />
|
|
<span className="font-medium">
|
|
{formatThinkingLevel(feature.thinkingLevel)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
|
|
{/* Detailed mode: Show all agent info */}
|
|
{showAgentInfo && feature.status !== "backlog" && agentInfo && (
|
|
<div className="mb-3 space-y-2 overflow-hidden">
|
|
{/* Model & Phase */}
|
|
<div className="flex items-center gap-2 text-xs flex-wrap">
|
|
<div className="flex items-center gap-1 text-cyan-400">
|
|
<Cpu className="w-3 h-3" />
|
|
<span className="font-medium">
|
|
{formatModelName(feature.model ?? DEFAULT_MODEL)}
|
|
</span>
|
|
</div>
|
|
{agentInfo.currentPhase && (
|
|
<div
|
|
className={cn(
|
|
"px-1.5 py-0.5 rounded text-[10px] font-medium",
|
|
agentInfo.currentPhase === "planning" &&
|
|
"bg-blue-500/20 text-blue-400",
|
|
agentInfo.currentPhase === "action" &&
|
|
"bg-amber-500/20 text-amber-400",
|
|
agentInfo.currentPhase === "verification" &&
|
|
"bg-green-500/20 text-green-400"
|
|
)}
|
|
>
|
|
{agentInfo.currentPhase}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Task List Progress (if todos found) */}
|
|
{agentInfo.todos.length > 0 && (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-1 text-[10px] text-muted-foreground">
|
|
<ListTodo className="w-3 h-3" />
|
|
<span>
|
|
{
|
|
agentInfo.todos.filter((t) => t.status === "completed")
|
|
.length
|
|
}
|
|
/{agentInfo.todos.length} tasks
|
|
</span>
|
|
</div>
|
|
<div className="space-y-0.5 max-h-16 overflow-y-auto">
|
|
{agentInfo.todos.slice(0, 3).map((todo, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center gap-1.5 text-[10px]"
|
|
>
|
|
{todo.status === "completed" ? (
|
|
<CheckCircle2 className="w-2.5 h-2.5 text-green-500 shrink-0" />
|
|
) : todo.status === "in_progress" ? (
|
|
<Loader2 className="w-2.5 h-2.5 text-amber-400 animate-spin shrink-0" />
|
|
) : (
|
|
<Circle className="w-2.5 h-2.5 text-muted-foreground shrink-0" />
|
|
)}
|
|
<span
|
|
className={cn(
|
|
"break-words hyphens-auto line-clamp-2 leading-relaxed",
|
|
todo.status === "completed" &&
|
|
"text-muted-foreground line-through",
|
|
todo.status === "in_progress" && "text-amber-400",
|
|
todo.status === "pending" &&
|
|
"text-foreground-secondary"
|
|
)}
|
|
>
|
|
{todo.content}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{agentInfo.todos.length > 3 && (
|
|
<p className="text-[10px] text-muted-foreground pl-4">
|
|
+{agentInfo.todos.length - 3} more
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary for waiting_approval and verified - prioritize feature.summary from UpdateFeatureStatus */}
|
|
{(feature.status === "waiting_approval" ||
|
|
feature.status === "verified") && (
|
|
<>
|
|
{(feature.summary || summary || agentInfo.summary) && (
|
|
<div className="space-y-1 pt-1 border-t border-border-glass overflow-hidden">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex items-center gap-1 text-[10px] text-green-400 min-w-0">
|
|
<Sparkles className="w-3 h-3 shrink-0" />
|
|
<span className="truncate">Summary</span>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsSummaryDialogOpen(true);
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
className="p-0.5 rounded hover:bg-accent transition-colors text-muted-foreground hover:text-foreground shrink-0"
|
|
title="View full summary"
|
|
data-testid={`expand-summary-${feature.id}`}
|
|
>
|
|
<Expand className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
<p className="text-[10px] text-foreground-secondary line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
|
|
{feature.summary || summary || agentInfo.summary}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{/* Show tool count even without summary */}
|
|
{!feature.summary &&
|
|
!summary &&
|
|
!agentInfo.summary &&
|
|
agentInfo.toolCallCount > 0 && (
|
|
<div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-border-glass">
|
|
<span className="flex items-center gap-1">
|
|
<Wrench className="w-2.5 h-2.5" />
|
|
{agentInfo.toolCallCount} tool calls
|
|
</span>
|
|
{agentInfo.todos.length > 0 && (
|
|
<span className="flex items-center gap-1">
|
|
<CheckCircle2 className="w-2.5 h-2.5 text-green-500" />
|
|
{
|
|
agentInfo.todos.filter(
|
|
(t) => t.status === "completed"
|
|
).length
|
|
}{" "}
|
|
tasks done
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2">
|
|
{isCurrentAutoTask && (
|
|
<>
|
|
{onViewOutput && (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs bg-action-view hover:bg-action-view-hover"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onViewOutput();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`view-output-${feature.id}`}
|
|
>
|
|
<FileText className="w-3 h-3 mr-1" />
|
|
Logs
|
|
{shortcutKey && (
|
|
<span
|
|
className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-primary-foreground/10 border border-primary-foreground/20"
|
|
data-testid={`shortcut-key-${feature.id}`}
|
|
>
|
|
{shortcutKey}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
)}
|
|
{onForceStop && (
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onForceStop();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`force-stop-${feature.id}`}
|
|
>
|
|
<StopCircle className="w-3 h-3 mr-1" />
|
|
Stop
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
{!isCurrentAutoTask && feature.status === "in_progress" && (
|
|
<>
|
|
{/* skipTests features show manual verify button */}
|
|
{feature.skipTests && onManualVerify ? (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs bg-primary hover:bg-primary/90"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onManualVerify();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`manual-verify-${feature.id}`}
|
|
>
|
|
<CheckCircle2 className="w-3 h-3 mr-1" />
|
|
Verify
|
|
</Button>
|
|
) : hasContext && onResume ? (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onResume();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`resume-feature-${feature.id}`}
|
|
>
|
|
<RotateCcw className="w-3 h-3 mr-1" />
|
|
Resume
|
|
</Button>
|
|
) : onVerify ? (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onVerify();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`verify-feature-${feature.id}`}
|
|
>
|
|
<PlayCircle className="w-3 h-3 mr-1" />
|
|
Resume
|
|
</Button>
|
|
) : null}
|
|
{onViewOutput && !feature.skipTests && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 text-xs"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onViewOutput();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`view-output-inprogress-${feature.id}`}
|
|
>
|
|
<FileText className="w-3 h-3 mr-1" />
|
|
Logs
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
{!isCurrentAutoTask && feature.status === "verified" && (
|
|
<>
|
|
{/* Logs button - styled like Refine */}
|
|
{onViewOutput && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs min-w-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onViewOutput();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`view-output-verified-${feature.id}`}
|
|
>
|
|
<FileText className="w-3 h-3 mr-1 shrink-0" />
|
|
<span className="truncate">Logs</span>
|
|
</Button>
|
|
)}
|
|
{/* Complete button */}
|
|
{onComplete && (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs min-w-0 bg-brand-500 hover:bg-brand-600"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onComplete();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`complete-${feature.id}`}
|
|
>
|
|
<Archive className="w-3 h-3 mr-1 shrink-0" />
|
|
<span className="truncate">Complete</span>
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
{!isCurrentAutoTask && feature.status === "waiting_approval" && (
|
|
<>
|
|
{/* Revert button - only show when worktree exists (icon only to save space) */}
|
|
{hasWorktree && onRevert && (
|
|
<TooltipProvider delayDuration={300}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 w-7 p-0 text-red-400 hover:text-red-300 hover:bg-red-500/20 shrink-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsRevertDialogOpen(true);
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`revert-${feature.id}`}
|
|
>
|
|
<Undo2 className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<p>Revert changes</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)}
|
|
{/* Refine prompt button */}
|
|
{onFollowUp && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs min-w-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onFollowUp();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`follow-up-${feature.id}`}
|
|
>
|
|
<Wand2 className="w-3 h-3 mr-1 shrink-0" />
|
|
<span className="truncate">Refine</span>
|
|
</Button>
|
|
)}
|
|
{/* Merge button - only show when worktree exists */}
|
|
{hasWorktree && onMerge && (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs bg-purple-600 hover:bg-purple-700 min-w-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onMerge();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`merge-${feature.id}`}
|
|
title="Merge changes into main branch"
|
|
>
|
|
<GitMerge className="w-3 h-3 mr-1 shrink-0" />
|
|
<span className="truncate">Merge</span>
|
|
</Button>
|
|
)}
|
|
{/* Commit and verify button - show when no worktree */}
|
|
{!hasWorktree && onCommit && (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCommit();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`commit-${feature.id}`}
|
|
>
|
|
<GitCommit className="w-3 h-3 mr-1" />
|
|
Commit
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
{!isCurrentAutoTask && feature.status === "backlog" && (
|
|
<>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEdit();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`edit-backlog-${feature.id}`}
|
|
>
|
|
<Edit className="w-3 h-3 mr-1" />
|
|
Edit
|
|
</Button>
|
|
{onImplement && (
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
className="flex-1 h-7 text-xs"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onImplement();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
data-testid={`make-${feature.id}`}
|
|
>
|
|
<PlayCircle className="w-3 h-3 mr-1" />
|
|
Make
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Delete Confirmation Dialog */}
|
|
<DeleteConfirmDialog
|
|
open={isDeleteDialogOpen}
|
|
onOpenChange={setIsDeleteDialogOpen}
|
|
onConfirm={handleConfirmDelete}
|
|
title="Delete Feature"
|
|
description="Are you sure you want to delete this feature? This action cannot be undone."
|
|
testId="delete-confirmation-dialog"
|
|
confirmTestId="confirm-delete-button"
|
|
/>
|
|
|
|
{/* Summary Modal */}
|
|
<Dialog open={isSummaryDialogOpen} onOpenChange={setIsSummaryDialogOpen}>
|
|
<DialogContent
|
|
className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col"
|
|
data-testid={`summary-dialog-${feature.id}`}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5 text-green-400" />
|
|
Implementation Summary
|
|
</DialogTitle>
|
|
<DialogDescription
|
|
className="text-sm"
|
|
title={feature.description || feature.summary || ""}
|
|
>
|
|
{(() => {
|
|
const displayText =
|
|
feature.description || feature.summary || "No description";
|
|
return displayText.length > 100
|
|
? `${displayText.slice(0, 100)}...`
|
|
: displayText;
|
|
})()}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex-1 overflow-y-auto p-4 bg-card rounded-lg border border-border">
|
|
<Markdown>
|
|
{feature.summary ||
|
|
summary ||
|
|
agentInfo?.summary ||
|
|
"No summary available"}
|
|
</Markdown>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setIsSummaryDialogOpen(false)}
|
|
data-testid="close-summary-button"
|
|
>
|
|
Close
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Revert Confirmation Dialog */}
|
|
<Dialog open={isRevertDialogOpen} onOpenChange={setIsRevertDialogOpen}>
|
|
<DialogContent data-testid="revert-confirmation-dialog">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-red-400">
|
|
<Undo2 className="w-5 h-5" />
|
|
Revert Changes
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
This will discard all changes made by the agent and move the
|
|
feature back to the backlog.
|
|
{feature.branchName && (
|
|
<span className="block mt-2 font-medium">
|
|
Branch{" "}
|
|
<code className="bg-muted px-1 py-0.5 rounded">
|
|
{feature.branchName}
|
|
</code>{" "}
|
|
will be deleted.
|
|
</span>
|
|
)}
|
|
<span className="block mt-2 text-red-400 font-medium">
|
|
This action cannot be undone.
|
|
</span>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setIsRevertDialogOpen(false)}
|
|
data-testid="cancel-revert-button"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => {
|
|
setIsRevertDialogOpen(false);
|
|
onRevert?.();
|
|
}}
|
|
data-testid="confirm-revert-button"
|
|
>
|
|
<Undo2 className="w-4 h-4 mr-2" />
|
|
Revert Changes
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Card>
|
|
);
|
|
|
|
// Wrap with animated border when in progress
|
|
if (isCurrentAutoTask) {
|
|
return <div className="animated-border-wrapper">{cardElement}</div>;
|
|
}
|
|
|
|
return cardElement;
|
|
});
|