Show stdio
This commit is contained in:
Louis Knight-Webb
@@ -1,124 +1,210 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { useState, useEffect } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { makeAuthenticatedRequest } from '@/lib/auth'
|
||||
import type { TaskStatus, TaskAttempt, TaskAttemptActivity, ExecutorConfig } from 'shared/types'
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
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 { makeAuthenticatedRequest } from "@/lib/auth";
|
||||
import type {
|
||||
TaskStatus,
|
||||
TaskAttempt,
|
||||
TaskAttemptActivity,
|
||||
ExecutorConfig,
|
||||
} from "shared/types";
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
project_id: string
|
||||
title: string
|
||||
description: string | null
|
||||
status: TaskStatus
|
||||
created_at: string
|
||||
updated_at: string
|
||||
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
|
||||
success: boolean;
|
||||
data: T | null;
|
||||
message: string | null;
|
||||
}
|
||||
|
||||
interface TaskDetailsDialogProps {
|
||||
isOpen: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
task: Task | null
|
||||
projectId: string
|
||||
onError: (error: string) => void
|
||||
isOpen: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
task: Task | null;
|
||||
projectId: string;
|
||||
onError: (error: string) => void;
|
||||
}
|
||||
|
||||
const statusLabels: Record<TaskStatus, string> = {
|
||||
todo: 'To Do',
|
||||
inprogress: 'In Progress',
|
||||
inreview: 'In Review',
|
||||
done: 'Done',
|
||||
cancelled: 'Cancelled'
|
||||
}
|
||||
todo: "To Do",
|
||||
inprogress: "In Progress",
|
||||
inreview: "In Review",
|
||||
done: "Done",
|
||||
cancelled: "Cancelled",
|
||||
};
|
||||
|
||||
export function TaskDetailsDialog({ isOpen, onOpenChange, task, projectId, onError }: TaskDetailsDialogProps) {
|
||||
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<ExecutorConfig>({ type: "echo" })
|
||||
const [creatingAttempt, setCreatingAttempt] = useState(false)
|
||||
export function TaskDetailsDialog({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
task,
|
||||
projectId,
|
||||
onError,
|
||||
}: TaskDetailsDialogProps) {
|
||||
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<ExecutorConfig>({
|
||||
type: "echo",
|
||||
});
|
||||
const [creatingAttempt, setCreatingAttempt] = useState(false);
|
||||
|
||||
// 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);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && task) {
|
||||
fetchTaskAttempts(task.id)
|
||||
fetchTaskAttempts(task.id);
|
||||
// Initialize edit state with current task values
|
||||
setEditedTitle(task.title);
|
||||
setEditedDescription(task.description || "");
|
||||
setEditedStatus(task.status);
|
||||
setIsEditMode(false);
|
||||
}
|
||||
}, [isOpen, task])
|
||||
}, [isOpen, task]);
|
||||
|
||||
const fetchTaskAttempts = async (taskId: string) => {
|
||||
try {
|
||||
setTaskAttemptsLoading(true)
|
||||
const response = await makeAuthenticatedRequest(`/api/projects/${projectId}/tasks/${taskId}/attempts`)
|
||||
setTaskAttemptsLoading(true);
|
||||
const response = await makeAuthenticatedRequest(
|
||||
`/api/projects/${projectId}/tasks/${taskId}/attempts`
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const result: ApiResponse<TaskAttempt[]> = await response.json()
|
||||
const result: ApiResponse<TaskAttempt[]> = await response.json();
|
||||
if (result.success && result.data) {
|
||||
setTaskAttempts(result.data)
|
||||
setTaskAttempts(result.data);
|
||||
}
|
||||
} else {
|
||||
onError('Failed to load task attempts')
|
||||
onError("Failed to load task attempts");
|
||||
}
|
||||
} catch (err) {
|
||||
onError('Failed to load task attempts')
|
||||
onError("Failed to load task attempts");
|
||||
} finally {
|
||||
setTaskAttemptsLoading(false)
|
||||
}
|
||||
setTaskAttemptsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAttemptActivities = async (attemptId: string) => {
|
||||
if (!task) return
|
||||
if (!task) return;
|
||||
|
||||
try {
|
||||
setActivitiesLoading(true)
|
||||
const response = await makeAuthenticatedRequest(`/api/projects/${projectId}/tasks/${task.id}/attempts/${attemptId}/activities`)
|
||||
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()
|
||||
const result: ApiResponse<TaskAttemptActivity[]> =
|
||||
await response.json();
|
||||
if (result.success && result.data) {
|
||||
setAttemptActivities(result.data)
|
||||
setAttemptActivities(result.data);
|
||||
}
|
||||
} else {
|
||||
onError('Failed to load attempt activities')
|
||||
onError("Failed to load attempt activities");
|
||||
}
|
||||
} catch (err) {
|
||||
onError('Failed to load attempt activities')
|
||||
onError("Failed to load attempt activities");
|
||||
} finally {
|
||||
setActivitiesLoading(false)
|
||||
}
|
||||
setActivitiesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAttemptClick = (attempt: TaskAttempt) => {
|
||||
setSelectedAttempt(attempt)
|
||||
fetchAttemptActivities(attempt.id)
|
||||
}
|
||||
setSelectedAttempt(attempt);
|
||||
fetchAttemptActivities(attempt.id);
|
||||
};
|
||||
|
||||
const createNewAttempt = async () => {
|
||||
if (!task) return
|
||||
const saveTaskChanges = async () => {
|
||||
if (!task) return;
|
||||
|
||||
try {
|
||||
setCreatingAttempt(true)
|
||||
const worktreePath = `/tmp/task-${task.id}-attempt-${Date.now()}`
|
||||
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 would require parent component to refresh
|
||||
// For now, just exit edit mode
|
||||
} else {
|
||||
onError("Failed to save task changes");
|
||||
}
|
||||
} catch (err) {
|
||||
onError("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) 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',
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
task_id: task.id,
|
||||
@@ -128,63 +214,310 @@ export function TaskDetailsDialog({ isOpen, onOpenChange, task, projectId, onErr
|
||||
executor_config: selectedExecutor,
|
||||
}),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
// Refresh the attempts list
|
||||
await fetchTaskAttempts(task.id)
|
||||
await fetchTaskAttempts(task.id);
|
||||
} else {
|
||||
onError('Failed to create task attempt')
|
||||
onError("Failed to create task attempt");
|
||||
}
|
||||
} catch (err) {
|
||||
onError('Failed to create task attempt')
|
||||
onError("Failed to create task attempt");
|
||||
} finally {
|
||||
setCreatingAttempt(false)
|
||||
}
|
||||
setCreatingAttempt(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange} className="max-w-7xl">
|
||||
<DialogContent className="max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Task Details: {task?.title}</DialogTitle>
|
||||
<div className="flex justify-between items-start">
|
||||
<DialogTitle className="text-xl">
|
||||
{isEditMode ? "Edit Task" : "Task Details"}
|
||||
</DialogTitle>
|
||||
<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>
|
||||
</DialogHeader>
|
||||
<div className="space-y-6">
|
||||
{/* Task Info */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold">Task Information</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
|
||||
<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>Title</Label>
|
||||
<p className="text-sm text-muted-foreground">{task?.title}</p>
|
||||
<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>Status</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{task ? statusLabels[task.status] : ''}
|
||||
<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>
|
||||
{task?.description && (
|
||||
</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>Description</Label>
|
||||
<p className="text-sm text-muted-foreground">{task.description}</p>
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
{task ? statusLabels[task.status] : ""}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground">
|
||||
Created
|
||||
</Label>
|
||||
<p className="text-sm mt-1">
|
||||
{task
|
||||
? new Date(task.created_at).toLocaleDateString()
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground">
|
||||
Updated
|
||||
</Label>
|
||||
<p className="text-sm mt-1">
|
||||
{task
|
||||
? 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 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-semibold">Task Attempts</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm">Executor:</Label>
|
||||
<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">
|
||||
Executor
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs text-muted-foreground">
|
||||
New Attempt
|
||||
</Label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Select
|
||||
value={selectedExecutor.type}
|
||||
onValueChange={(value) => setSelectedExecutor({ type: value as "echo" | "claude" })}
|
||||
onValueChange={(value) =>
|
||||
setSelectedExecutor({
|
||||
type: value as "echo" | "claude",
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -192,111 +525,78 @@ export function TaskDetailsDialog({ isOpen, onOpenChange, task, projectId, onErr
|
||||
<SelectItem value="claude">Claude</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button
|
||||
onClick={createNewAttempt}
|
||||
disabled={creatingAttempt}
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
{creatingAttempt ? 'Creating...' : 'Create New Attempt'}
|
||||
{creatingAttempt ? "Creating..." : "Create Attempt"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{taskAttemptsLoading ? (
|
||||
<div className="text-center py-4">Loading attempts...</div>
|
||||
) : taskAttempts.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">
|
||||
No attempts found for this task
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{taskAttempts.map((attempt) => (
|
||||
<Card
|
||||
key={attempt.id}
|
||||
className={`cursor-pointer transition-colors ${
|
||||
selectedAttempt?.id === attempt.id ? 'bg-blue-50 border-blue-200' : 'hover:bg-gray-50'
|
||||
}`}
|
||||
onClick={() => handleAttemptClick(attempt)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<p className="font-medium">Worktree: {attempt.worktree_path}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Created: {new Date(attempt.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<Label className="text-xs">Base Commit</Label>
|
||||
<p className="text-muted-foreground">
|
||||
{attempt.base_commit || 'None'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">Merge Commit</Label>
|
||||
<p className="text-muted-foreground">
|
||||
{attempt.merge_commit || 'None'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Activity History */}
|
||||
{selectedAttempt && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Activity History for Attempt: {selectedAttempt.worktree_path}
|
||||
</h3>
|
||||
<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>
|
||||
<div className="text-center py-4">
|
||||
Loading activities...
|
||||
</div>
|
||||
) : attemptActivities.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">
|
||||
No activities found for this attempt
|
||||
No activities found
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{attemptActivities.map((activity) => (
|
||||
<Card key={activity.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<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'}
|
||||
<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>
|
||||
</div>
|
||||
{activity.note && (
|
||||
<p className="text-sm text-muted-foreground">{activity.note}</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date(activity.created_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{activity.note && (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{activity.note}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user