ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-03 21:03:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

FINAL

Browse Source
This commit is contained in:
SuperComboGamer
2025-12-17 22:34:19 -05:00
parent 760f254f78
commit f3dbc996d4
4 changed files with 136 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
apps/app/src/components/ui/task-progress-panel.tsx
View File

@@ -2,9 +2,10 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { CheckCircle2, Circle, Loader2, ChevronDown, ChevronRight } from "lucide-react"; import { Check, Loader2, Circle, ChevronDown, ChevronRight, FileCode } from "lucide-react";
import { getElectronAPI } from "@/lib/electron"; import { getElectronAPI } from "@/lib/electron";
import type { AutoModeEvent } from "@/types/electron"; import type { AutoModeEvent } from "@/types/electron";
import { Badge } from "@/components/ui/badge";
interface TaskInfo { interface TaskInfo {
id: string; id: string;
@@ -23,8 +24,8 @@ interface TaskProgressPanelProps {
export function TaskProgressPanel({ featureId, projectPath, className }: TaskProgressPanelProps) { export function TaskProgressPanel({ featureId, projectPath, className }: TaskProgressPanelProps) {
const [tasks, setTasks] = useState<TaskInfo[]>([]); const [tasks, setTasks] = useState<TaskInfo[]>([]);
const [isExpanded, setIsExpanded] = useState(true); const [isExpanded, setIsExpanded] = useState(true);
const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
// Load initial tasks from feature's planSpec // Load initial tasks from feature's planSpec
const loadInitialTasks = useCallback(async () => { const loadInitialTasks = useCallback(async () => {
@@ -91,14 +92,24 @@ export function TaskProgressPanel({ featureId, projectPath, className }: TaskPro
setTasks((prev) => { setTasks((prev) => {
// Check if task already exists // Check if task already exists
const existing = prev.find((t) => t.id === taskEvent.taskId); const existingIndex = prev.findIndex((t) => t.id === taskEvent.taskId);
if (existing) {
// Update status to in_progress if (existingIndex !== -1) {
return prev.map((t) => // Update status to in_progress and mark previous as completed
t.id === taskEvent.taskId ? { ...t, status: "in_progress" as const } : t return prev.map((t, idx) => {
); if (t.id === taskEvent.taskId) {
return { ...t, status: "in_progress" as const };
}
// If we are moving to a task that is further down the list, assume previous ones are completed
// This is a heuristic, but usually correct for sequential execution
if (idx < existingIndex && t.status !== "completed") {
return { ...t, status: "completed" as const };
}
return t;
});
} }
// Add new task
// Add new task if it doesn't exist (fallback)
return [ return [
...prev, ...prev,
{ {
@@ -128,106 +139,136 @@ export function TaskProgressPanel({ featureId, projectPath, className }: TaskPro
return unsubscribe; return unsubscribe;
}, [featureId]); }, [featureId]);
// Calculate progress
const completedCount = tasks.filter((t) => t.status === "completed").length; const completedCount = tasks.filter((t) => t.status === "completed").length;
const totalCount = tasks.length; const totalCount = tasks.length;
const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0; const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
// Don't render if loading or no tasks if (isLoading || tasks.length === 0) {
if (isLoading) {
return null;
}
if (tasks.length === 0) {
return null; return null;
} }
return ( return (
<div className={cn("border rounded-lg bg-muted/30", className)}> <div className={cn("group rounded-xl border bg-card/50 shadow-sm overflow-hidden transition-all duration-200", className)}>
{/* Header with progress */}
<button <button
onClick={() => setIsExpanded(!isExpanded)} onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors" className="w-full flex items-center justify-between p-4 bg-muted/10 hover:bg-muted/20 transition-colors"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-3">
{isExpanded ? ( <div className={cn(
<ChevronDown className="h-4 w-4 text-muted-foreground" /> "flex h-8 w-8 items-center justify-center rounded-lg border shadow-sm transition-colors",
) : ( isExpanded ? "bg-background border-border" : "bg-muted border-transparent"
<ChevronRight className="h-4 w-4 text-muted-foreground" /> )}>
)} {isExpanded ? (
<span className="font-medium text-sm">Task Progress</span> <ChevronDown className="h-4 w-4 text-foreground/70" />
<span className="text-xs text-muted-foreground"> ) : (
({completedCount}/{totalCount}) <ChevronRight className="h-4 w-4 text-muted-foreground" />
</span> )}
</div>
<div className="flex flex-col items-start gap-0.5">
<h3 className="font-semibold text-sm tracking-tight">Execution Plan</h3>
<span className="text-[10px] text-muted-foreground uppercase tracking-wider font-medium">
{completedCount} of {totalCount} tasks completed
</span>
</div>
</div> </div>
{/* Progress bar */} <div className="flex items-center gap-3">
<div className="flex items-center gap-2"> {/* Circular Progress (Mini) */}
<div className="w-24 h-2 bg-muted rounded-full overflow-hidden"> <div className="relative h-8 w-8 flex items-center justify-center">
<div <svg className="h-full w-full -rotate-90 text-muted/20" viewBox="0 0 24 24">
className="h-full bg-primary transition-all duration-300 ease-out" <circle className="text-muted/20" cx="12" cy="12" r="10" strokeWidth="3" fill="none" stroke="currentColor" />
style={{ width: `${progressPercent}%` }} <circle
/> className="text-primary transition-all duration-500 ease-in-out"
cx="12" cy="12" r="10" strokeWidth="3" fill="none" stroke="currentColor"
strokeDasharray={63}
strokeDashoffset={63 - (63 * progressPercent) / 100}
strokeLinecap="round"
/>
</svg>
<span className="absolute text-[9px] font-bold">{progressPercent}%</span>
</div> </div>
<span className="text-xs text-muted-foreground w-8">{progressPercent}%</span>
</div> </div>
</button> </button>
{/* Task list */} <div className={cn(
{isExpanded && ( "grid transition-all duration-300 ease-in-out",
<div className="border-t px-3 py-2 space-y-1 max-h-48 overflow-y-auto"> isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
{tasks.map((task) => ( )}>
<div <div className="overflow-hidden">
key={task.id} <div className="p-5 pt-2 relative max-h-[300px] overflow-y-auto scrollbar-visible">
className={cn( {/* Vertical Connector Line */}
"flex items-start gap-2 py-1.5 px-2 rounded text-sm", <div className="absolute left-[2.35rem] top-4 bottom-8 w-px bg-gradient-to-b from-border/80 via-border/40 to-transparent" />
task.status === "in_progress" && "bg-primary/10 border border-primary/20",
task.status === "completed" && "text-muted-foreground" <div className="space-y-5">
)} {tasks.map((task, index) => {
> const isActive = task.status === "in_progress";
{/* Status icon */} const isCompleted = task.status === "completed";
{task.status === "completed" ? ( const isPending = task.status === "pending";
<CheckCircle2 className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
) : task.status === "in_progress" ? (
<Loader2 className="h-4 w-4 text-primary animate-spin mt-0.5 flex-shrink-0" />
) : (
<Circle className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
)}
{/* Task info */} return (
<div className="flex-1 min-w-0"> <div
<div className="flex items-center gap-1.5"> key={task.id}
<span
className={cn( className={cn(
"font-mono text-xs px-1 py-0.5 rounded", "relative flex gap-4 group/item transition-all duration-300",
task.status === "in_progress" isPending && "opacity-60 hover:opacity-100"
? "bg-primary/20 text-primary"
: task.status === "completed"
? "bg-green-500/20 text-green-600 dark:text-green-400"
: "bg-muted text-muted-foreground"
)} )}
> >
{task.id} {/* Icon Status */}
</span> <div className={cn(
<span "relative z-10 flex h-7 w-7 items-center justify-center rounded-full border shadow-sm transition-all duration-300",
className={cn( isCompleted && "bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400",
"truncate", isActive && "bg-primary border-primary text-primary-foreground ring-4 ring-primary/10 scale-110",
task.status === "in_progress" && "font-medium" isPending && "bg-muted border-border text-muted-foreground"
)} )}>
> {isCompleted && <Check className="h-3.5 w-3.5" />}
{task.description} {isActive && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
</span> {isPending && <Circle className="h-2 w-2 fill-current opacity-50" />}
</div> </div>
{task.filePath && (
<span className="text-xs text-muted-foreground font-mono truncate block"> {/* Task Content */}
{task.filePath} <div className={cn(
</span> "flex-1 pt-1 min-w-0 transition-all",
)} isActive && "translate-x-1"
</div> )}>
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between gap-4">
<p className={cn(
"text-sm font-medium leading-none truncate pr-4",
isCompleted && "text-muted-foreground line-through decoration-border/60",
isActive && "text-primary font-semibold"
)}>
{task.description}
</p>
{isActive && (
<Badge variant="outline" className="h-5 px-1.5 text-[10px] bg-primary/5 text-primary border-primary/20 animate-pulse">
Active
</Badge>
)}
</div>
{(task.filePath || isActive) && (
<div className="flex items-center gap-2 text-xs text-muted-foreground font-mono">
{task.filePath ? (
<>
<FileCode className="h-3 w-3 opacity-70" />
<span className="truncate opacity-80 hover:opacity-100 transition-opacity">
{task.filePath}
</span>
</>
) : (
<span className="h-3 block" /> /* Spacer */
)}
</div>
)}
</div>
</div>
</div>
);
})}
</div> </div>
))} </div>
</div> </div>
)} </div>
</div> </div>
); );
} }

8
apps/app/src/hooks/use-auto-mode.ts
View File

@@ -155,10 +155,10 @@ export function useAutoMode() {
case "auto_mode_error": case "auto_mode_error":
if (event.featureId && event.error) { if (event.featureId && event.error) {
// Check if this is a user-initiated cancellation (not a real error) // Check if this is a user-initiated cancellation or abort (not a real error)
if (event.errorType === "cancellation") { if (event.errorType === "cancellation" || event.errorType === "abort") {
// User cancelled the feature - just log as info, not an error // User cancelled/aborted the feature - just log as info, not an error
console.log("[AutoMode] Feature cancelled:", event.error); console.log("[AutoMode] Feature cancelled/aborted:", event.error);
// Remove from running tasks // Remove from running tasks
if (eventProjectId) { if (eventProjectId) {
removeRunningTask(eventProjectId, event.featureId); removeRunningTask(eventProjectId, event.featureId);

2
apps/app/src/types/electron.d.ts vendored
View File

@@ -193,7 +193,7 @@ export type AutoModeEvent =
| { | {
type: "auto_mode_error"; type: "auto_mode_error";
error: string; error: string;
errorType?: "authentication" | "cancellation" | "execution"; errorType?: "authentication" | "cancellation" | "abort" | "execution";
featureId?: string; featureId?: string;
projectId?: string; projectId?: string;
projectPath?: string; projectPath?: string;

4
apps/server/src/lib/error-handler.ts
View File

@@ -84,7 +84,9 @@ export function classifyError(error: unknown): ErrorInfo {
let type: ErrorType; let type: ErrorType;
if (isAuth) { if (isAuth) {
type = "authentication"; type = "authentication";
} else if (isCancellation || isAbort) { } else if (isAbort) {
type = "abort";
} else if (isCancellation) {
type = "cancellation"; type = "cancellation";
} else if (error instanceof Error) { } else if (error instanceof Error) {
type = "execution"; type = "execution";