728 lines
25 KiB
TypeScript
728 lines
25 KiB
TypeScript
|
import { useState, useEffect } from "react";
|
||
|
|
import { useParams, useNavigate } from "react-router-dom";
|
||
|
|
import { Card, CardContent } from "@/components/ui/card";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Textarea } from "@/components/ui/textarea";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select";
|
||
|
|
import { Separator } from "@/components/ui/separator";
|
||
|
|
import { ArrowLeft } from "lucide-react";
|
||
|
|
import { makeAuthenticatedRequest } from "@/lib/auth";
|
||
|
|
import type {
|
||
|
|
TaskStatus,
|
||
|
|
TaskAttempt,
|
||
|
|
TaskAttemptActivity,
|
||
|
|
} from "shared/types";
|
||
|
|
|
||
|
|
interface Task {
|
||
|
|
id: string;
|
||
|
|
project_id: string;
|
||
|
|
title: string;
|
||
|
|
description: string | null;
|
||
|
|
status: TaskStatus;
|
||
|
|
created_at: string;
|
||
|
|
updated_at: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ApiResponse<T> {
|
||
|
|
success: boolean;
|
||
|
|
data: T | null;
|
||
|
|
message: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const statusLabels: Record<TaskStatus, string> = {
|
||
|
|
todo: "To Do",
|
||
|
|
inprogress: "In Progress",
|
||
|
|
inreview: "In Review",
|
||
|
|
done: "Done",
|
||
|
|
cancelled: "Cancelled",
|
||
|
|
};
|
||
|
|
|
||
|
|
export function TaskDetailsPage() {
|
||
|
|
const { projectId, taskId } = useParams<{
|
||
|
|
projectId: string;
|
||
|
|
taskId: string;
|
||
|
|
}>();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
const [task, setTask] = useState<Task | null>(null);
|
||
|
|
const [taskLoading, setTaskLoading] = useState(true);
|
||
|
|
const [taskAttempts, setTaskAttempts] = useState<TaskAttempt[]>([]);
|
||
|
|
const [taskAttemptsLoading, setTaskAttemptsLoading] = useState(false);
|
||
|
|
const [selectedAttempt, setSelectedAttempt] = useState<TaskAttempt | null>(
|
||
|
|
null
|
||
|
|
);
|
||
|
|
const [attemptActivities, setAttemptActivities] = useState<
|
||
|
|
TaskAttemptActivity[]
|
||
|
|
>([]);
|
||
|
|
const [activitiesLoading, setActivitiesLoading] = useState(false);
|
||
|
|
const [selectedExecutor, setSelectedExecutor] = useState<string>("echo");
|
||
|
|
const [creatingAttempt, setCreatingAttempt] = useState(false);
|
||
|
|
const [stoppingAttempt, setStoppingAttempt] = useState(false);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
// Edit mode state
|
||
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
||
|
|
const [editedTitle, setEditedTitle] = useState("");
|
||
|
|
const [editedDescription, setEditedDescription] = useState("");
|
||
|
|
const [editedStatus, setEditedStatus] = useState<TaskStatus>("todo");
|
||
|
|
const [savingTask, setSavingTask] = useState(false);
|
||
|
|
|
||
|
|
// Check if the selected attempt is currently running (latest activity is "inprogress")
|
||
|
|
const isAttemptRunning = selectedAttempt && attemptActivities.length > 0 &&
|
||
|
|
attemptActivities[0].status === "inprogress";
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (projectId && taskId) {
|
||
|
|
fetchTask();
|
||
|
|
}
|
||
|
|
}, [projectId, taskId]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (task) {
|
||
|
|
fetchTaskAttempts(task.id);
|
||
|
|
// Initialize edit state with current task values
|
||
|
|
setEditedTitle(task.title);
|
||
|
|
setEditedDescription(task.description || "");
|
||
|
|
setEditedStatus(task.status);
|
||
|
|
setIsEditMode(false);
|
||
|
|
}
|
||
|
|
}, [task]);
|
||
|
|
|
||
|
|
const fetchTask = async () => {
|
||
|
|
if (!projectId || !taskId) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setTaskLoading(true);
|
||
|
|
const response = await makeAuthenticatedRequest(
|
||
|
|
`/api/projects/${projectId}/tasks/${taskId}`
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
const result: ApiResponse<Task> = await response.json();
|
||
|
|
if (result.success && result.data) {
|
||
|
|
setTask(result.data);
|
||
|
|
} else {
|
||
|
|
setError("Failed to load task");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setError("Failed to load task");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError("Failed to load task");
|
||
|
|
} finally {
|
||
|
|
setTaskLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const fetchTaskAttempts = async (taskId: string) => {
|
||
|
|
if (!projectId) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setTaskAttemptsLoading(true);
|
||
|
|
const response = await makeAuthenticatedRequest(
|
||
|
|
`/api/projects/${projectId}/tasks/${taskId}/attempts`
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
const result: ApiResponse<TaskAttempt[]> = await response.json();
|
||
|
|
if (result.success && result.data) {
|
||
|
|
setTaskAttempts(result.data);
|
||
|
|
// Automatically select the latest attempt if available
|
||
|
|
if (result.data.length > 0) {
|
||
|
|
const latestAttempt = result.data.reduce((latest, current) =>
|
||
|
|
new Date(current.created_at) > new Date(latest.created_at)
|
||
|
|
? current
|
||
|
|
: latest
|
||
|
|
);
|
||
|
|
setSelectedAttempt(latestAttempt);
|
||
|
|
fetchAttemptActivities(latestAttempt.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setError("Failed to load task attempts");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError("Failed to load task attempts");
|
||
|
|
} finally {
|
||
|
|
setTaskAttemptsLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const fetchAttemptActivities = async (attemptId: string) => {
|
||
|
|
if (!task || !projectId) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setActivitiesLoading(true);
|
||
|
|
const response = await makeAuthenticatedRequest(
|
||
|
|
`/api/projects/${projectId}/tasks/${task.id}/attempts/${attemptId}/activities`
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
const result: ApiResponse<TaskAttemptActivity[]> =
|
||
|
|
await response.json();
|
||
|
|
if (result.success && result.data) {
|
||
|
|
setAttemptActivities(result.data);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setError("Failed to load attempt activities");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError("Failed to load attempt activities");
|
||
|
|
} finally {
|
||
|
|
setActivitiesLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleAttemptClick = (attempt: TaskAttempt) => {
|
||
|
|
setSelectedAttempt(attempt);
|
||
|
|
fetchAttemptActivities(attempt.id);
|
||
|
|
};
|
||
|
|
|
||
|
|
const saveTaskChanges = async () => {
|
||
|
|
if (!task || !projectId) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setSavingTask(true);
|
||
|
|
const response = await makeAuthenticatedRequest(
|
||
|
|
`/api/projects/${projectId}/tasks/${task.id}`,
|
||
|
|
{
|
||
|
|
method: "PUT",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
title: editedTitle,
|
||
|
|
description: editedDescription || null,
|
||
|
|
status: editedStatus,
|
||
|
|
}),
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
setIsEditMode(false);
|
||
|
|
// Update the local task state
|
||
|
|
setTask({
|
||
|
|
...task,
|
||
|
|
title: editedTitle,
|
||
|
|
description: editedDescription || null,
|
||
|
|
status: editedStatus,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
setError("Failed to save task changes");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError("Failed to save task changes");
|
||
|
|
} finally {
|
||
|
|
setSavingTask(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const cancelEdit = () => {
|
||
|
|
if (task) {
|
||
|
|
setEditedTitle(task.title);
|
||
|
|
setEditedDescription(task.description || "");
|
||
|
|
setEditedStatus(task.status);
|
||
|
|
}
|
||
|
|
setIsEditMode(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
const createNewAttempt = async () => {
|
||
|
|
if (!task || !projectId) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setCreatingAttempt(true);
|
||
|
|
const worktreePath = `/tmp/task-${task.id}-attempt-${Date.now()}`;
|
||
|
|
|
||
|
|
const response = await makeAuthenticatedRequest(
|
||
|
|
`/api/projects/${projectId}/tasks/${task.id}/attempts`,
|
||
|
|
{
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
task_id: task.id,
|
||
|
|
worktree_path: worktreePath,
|
||
|
|
base_commit: null,
|
||
|
|
merge_commit: null,
|
||
|
|
executor: selectedExecutor,
|
||
|
|
}),
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
// Refresh the attempts list
|
||
|
|
await fetchTaskAttempts(task.id);
|
||
|
|
} else {
|
||
|
|
setError("Failed to create task attempt");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError("Failed to create task attempt");
|
||
|
|
} finally {
|
||
|
|
setCreatingAttempt(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const stopTaskAttempt = async () => {
|
||
|
|
if (!task || !selectedAttempt || !projectId) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setStoppingAttempt(true);
|
||
|
|
const response = await makeAuthenticatedRequest(
|
||
|
|
`/api/projects/${projectId}/tasks/${task.id}/attempts/${selectedAttempt.id}/stop`,
|
||
|
|
{
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
// Refresh the activities list to show the stopped status
|
||
|
|
fetchAttemptActivities(selectedAttempt.id);
|
||
|
|
} else {
|
||
|
|
setError("Failed to stop task attempt");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError("Failed to stop task attempt");
|
||
|
|
} finally {
|
||
|
|
setStoppingAttempt(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleBackClick = () => {
|
||
|
|
navigate(`/projects/${projectId}/tasks`);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (taskLoading) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-background flex items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
|
||
|
|
<p className="text-muted-foreground">Loading task...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-background flex items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<p className="text-red-600 mb-4">{error}</p>
|
||
|
|
<Button onClick={handleBackClick} variant="outline">
|
||
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
|
|
Back to Tasks
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!task) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-background flex items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<p className="text-muted-foreground mb-4">Task not found</p>
|
||
|
|
<Button onClick={handleBackClick} variant="outline">
|
||
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
|
|
Back to Tasks
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto py-6">
|
||
|
|
<div className="flex items-center justify-between mb-6">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<Button onClick={handleBackClick} variant="outline" size="sm">
|
||
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
|
|
Back to Tasks
|
||
|
|
</Button>
|
||
|
|
<h1 className="text-2xl font-bold">
|
||
|
|
{isEditMode ? "Edit Task" : "Task Details"}
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{isEditMode ? (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
onClick={saveTaskChanges}
|
||
|
|
disabled={savingTask}
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
{savingTask ? "Saving..." : "Save"}
|
||
|
|
</Button>
|
||
|
|
<Button onClick={cancelEdit} variant="outline" size="sm">
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<Button
|
||
|
|
onClick={() => setIsEditMode(true)}
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
>
|
||
|
|
Edit
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-3 gap-6">
|
||
|
|
{/* Main Content */}
|
||
|
|
<div className="col-span-2 space-y-6">
|
||
|
|
{/* Task Details */}
|
||
|
|
<Card>
|
||
|
|
<CardContent className="p-6">
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label className="text-sm font-medium">Title</Label>
|
||
|
|
{isEditMode ? (
|
||
|
|
<Input
|
||
|
|
value={editedTitle}
|
||
|
|
onChange={(e) => setEditedTitle(e.target.value)}
|
||
|
|
className="mt-1"
|
||
|
|
placeholder="Enter task title..."
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<h2 className="text-lg font-semibold mt-1">
|
||
|
|
{task.title}
|
||
|
|
</h2>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-sm font-medium">Description</Label>
|
||
|
|
{isEditMode ? (
|
||
|
|
<Textarea
|
||
|
|
value={editedDescription}
|
||
|
|
onChange={(e) => setEditedDescription(e.target.value)}
|
||
|
|
className="mt-1 min-h-[100px]"
|
||
|
|
placeholder="Enter task description..."
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
|
||
|
|
{task.description ? (
|
||
|
|
<p className="text-sm text-gray-700 whitespace-pre-wrap">
|
||
|
|
{task.description}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<p className="text-sm text-gray-500 italic">
|
||
|
|
No description provided
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Task Attempt Output */}
|
||
|
|
{selectedAttempt &&
|
||
|
|
(selectedAttempt.stdout || selectedAttempt.stderr) && (
|
||
|
|
<Card className="bg-black">
|
||
|
|
<CardContent className="p-6">
|
||
|
|
<h3 className="text-lg font-semibold mb-4 text-green-400">
|
||
|
|
Execution Output
|
||
|
|
</h3>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{selectedAttempt.stdout && (
|
||
|
|
<div>
|
||
|
|
<Label className="text-sm font-medium mb-2 block text-green-400">
|
||
|
|
STDOUT
|
||
|
|
</Label>
|
||
|
|
<div
|
||
|
|
className="bg-black border border-green-400 rounded-md p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
|
||
|
|
style={{
|
||
|
|
fontFamily:
|
||
|
|
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{selectedAttempt.stdout}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{selectedAttempt.stderr && (
|
||
|
|
<div>
|
||
|
|
<Label className="text-sm font-medium mb-2 block text-red-400">
|
||
|
|
STDERR
|
||
|
|
</Label>
|
||
|
|
<div
|
||
|
|
className="bg-black border border-red-400 rounded-md p-4 font-mono text-sm text-red-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
|
||
|
|
style={{
|
||
|
|
textShadow: "0 0 2px #ff0000",
|
||
|
|
fontFamily:
|
||
|
|
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{selectedAttempt.stderr}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Sidebar */}
|
||
|
|
<div className="space-y-4">
|
||
|
|
<Card>
|
||
|
|
<CardContent className="p-4">
|
||
|
|
<h4 className="font-semibold mb-3">Details</h4>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-muted-foreground">
|
||
|
|
Status
|
||
|
|
</Label>
|
||
|
|
{isEditMode ? (
|
||
|
|
<Select
|
||
|
|
value={editedStatus}
|
||
|
|
onValueChange={(value) =>
|
||
|
|
setEditedStatus(value as TaskStatus)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="mt-1">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="todo">To Do</SelectItem>
|
||
|
|
<SelectItem value="inprogress">
|
||
|
|
In Progress
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="inreview">In Review</SelectItem>
|
||
|
|
<SelectItem value="done">Done</SelectItem>
|
||
|
|
<SelectItem value="cancelled">Cancelled</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
) : (
|
||
|
|
<div
|
||
|
|
className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
|
||
|
|
task.status === "todo"
|
||
|
|
? "bg-gray-100 text-gray-800"
|
||
|
|
: task.status === "inprogress"
|
||
|
|
? "bg-blue-100 text-blue-800"
|
||
|
|
: task.status === "inreview"
|
||
|
|
? "bg-yellow-100 text-yellow-800"
|
||
|
|
: task.status === "done"
|
||
|
|
? "bg-green-100 text-green-800"
|
||
|
|
: "bg-red-100 text-red-800"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{statusLabels[task.status]}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Separator />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-muted-foreground">
|
||
|
|
Created
|
||
|
|
</Label>
|
||
|
|
<p className="text-sm mt-1">
|
||
|
|
{new Date(task.created_at).toLocaleDateString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-muted-foreground">
|
||
|
|
Updated
|
||
|
|
</Label>
|
||
|
|
<p className="text-sm mt-1">
|
||
|
|
{new Date(task.updated_at).toLocaleDateString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-muted-foreground">
|
||
|
|
Project ID
|
||
|
|
</Label>
|
||
|
|
<p className="text-xs text-muted-foreground mt-1 font-mono">
|
||
|
|
{projectId}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Task Attempts */}
|
||
|
|
<Card>
|
||
|
|
<CardContent className="p-4">
|
||
|
|
<h4 className="font-semibold mb-3">Task Attempts</h4>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-muted-foreground mb-2 block">
|
||
|
|
Select Attempt
|
||
|
|
</Label>
|
||
|
|
{taskAttemptsLoading ? (
|
||
|
|
<div className="text-center py-2 text-sm text-muted-foreground">
|
||
|
|
Loading...
|
||
|
|
</div>
|
||
|
|
) : taskAttempts.length === 0 ? (
|
||
|
|
<div className="text-center py-2 text-sm text-muted-foreground">
|
||
|
|
No attempts found
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<Select
|
||
|
|
value={selectedAttempt?.id || ""}
|
||
|
|
onValueChange={(value) => {
|
||
|
|
const attempt = taskAttempts.find(
|
||
|
|
(a) => a.id === value
|
||
|
|
);
|
||
|
|
if (attempt) {
|
||
|
|
handleAttemptClick(attempt);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Select an attempt..." />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{taskAttempts.map((attempt) => (
|
||
|
|
<SelectItem key={attempt.id} value={attempt.id}>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">
|
||
|
|
{new Date(
|
||
|
|
attempt.created_at
|
||
|
|
).toLocaleDateString()}{" "}
|
||
|
|
{new Date(
|
||
|
|
attempt.created_at
|
||
|
|
).toLocaleTimeString()}
|
||
|
|
</span>
|
||
|
|
<span className="text-xs text-muted-foreground text-left">
|
||
|
|
{attempt.executor || "executor"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Separator />
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs text-muted-foreground">
|
||
|
|
Actions
|
||
|
|
</Label>
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
{isAttemptRunning && (
|
||
|
|
<Button
|
||
|
|
onClick={stopTaskAttempt}
|
||
|
|
disabled={stoppingAttempt}
|
||
|
|
size="sm"
|
||
|
|
variant="destructive"
|
||
|
|
className="w-full"
|
||
|
|
>
|
||
|
|
{stoppingAttempt ? "Stopping..." : "Stop Execution"}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs text-muted-foreground">
|
||
|
|
New Attempt
|
||
|
|
</Label>
|
||
|
|
<Select
|
||
|
|
value={selectedExecutor}
|
||
|
|
onValueChange={(value) =>
|
||
|
|
setSelectedExecutor(value as "echo" | "claude")
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="echo">Echo</SelectItem>
|
||
|
|
<SelectItem value="claude">Claude</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Button
|
||
|
|
onClick={createNewAttempt}
|
||
|
|
disabled={creatingAttempt}
|
||
|
|
size="sm"
|
||
|
|
className="w-full"
|
||
|
|
>
|
||
|
|
{creatingAttempt ? "Creating..." : "Create Attempt"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Activity History */}
|
||
|
|
{selectedAttempt && (
|
||
|
|
<Card>
|
||
|
|
<CardContent className="p-4">
|
||
|
|
<h4 className="font-semibold mb-3">Activity History</h4>
|
||
|
|
<p className="text-xs text-muted-foreground mb-3">
|
||
|
|
{selectedAttempt.worktree_path}
|
||
|
|
</p>
|
||
|
|
{activitiesLoading ? (
|
||
|
|
<div className="text-center py-4">
|
||
|
|
Loading activities...
|
||
|
|
</div>
|
||
|
|
) : attemptActivities.length === 0 ? (
|
||
|
|
<div className="text-center py-4 text-muted-foreground">
|
||
|
|
No activities found
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-2">
|
||
|
|
{attemptActivities.map((activity) => (
|
||
|
|
<div
|
||
|
|
key={activity.id}
|
||
|
|
className="border-l-2 border-gray-200 pl-3 pb-2"
|
||
|
|
>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span
|
||
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||
|
|
activity.status === "init"
|
||
|
|
? "bg-gray-100 text-gray-800"
|
||
|
|
: activity.status === "inprogress"
|
||
|
|
? "bg-blue-100 text-blue-800"
|
||
|
|
: "bg-yellow-100 text-yellow-800"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{activity.status === "init"
|
||
|
|
? "Init"
|
||
|
|
: activity.status === "inprogress"
|
||
|
|
? "In Progress"
|
||
|
|
: "Paused"}
|
||
|
|
</span>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
{new Date(activity.created_at).toLocaleString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{activity.note && (
|
||
|
|
<p className="text-sm text-muted-foreground mt-1">
|
||
|
|
{activity.note}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|