Panel refactor
This commit is contained in:
Louis Knight-Webb
@@ -20,7 +20,7 @@ function AppContent() {
|
||||
try {
|
||||
const response = await fetch("/api/config");
|
||||
const data: ApiResponse<Config> = await response.json();
|
||||
|
||||
|
||||
if (data.success && data.data) {
|
||||
setConfig(data.data);
|
||||
setShowDisclaimer(!data.data.disclaimer_acknowledged);
|
||||
@@ -37,9 +37,9 @@ function AppContent() {
|
||||
|
||||
const handleDisclaimerAccept = async () => {
|
||||
if (!config) return;
|
||||
|
||||
|
||||
const updatedConfig = { ...config, disclaimer_acknowledged: true };
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/config", {
|
||||
method: "POST",
|
||||
@@ -48,9 +48,9 @@ function AppContent() {
|
||||
},
|
||||
body: JSON.stringify(updatedConfig),
|
||||
});
|
||||
|
||||
|
||||
const data: ApiResponse<Config> = await response.json();
|
||||
|
||||
|
||||
if (data.success) {
|
||||
setConfig(updatedConfig);
|
||||
setShowDisclaimer(false);
|
||||
@@ -72,13 +72,13 @@ function AppContent() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="h-screen flex flex-col bg-background">
|
||||
<DisclaimerDialog
|
||||
open={showDisclaimer}
|
||||
onAccept={handleDisclaimerAccept}
|
||||
/>
|
||||
{showNavbar && <Navbar />}
|
||||
<div className={showNavbar ? "max-w-7xl mx-auto p-6 sm:p-8" : ""}>
|
||||
<div className="flex-1 overflow-y-scroll">
|
||||
<Routes>
|
||||
<Route path="/" element={<Projects />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
|
||||
@@ -9,7 +9,7 @@ export function Navbar() {
|
||||
|
||||
return (
|
||||
<div className="border-b">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center space-x-6">
|
||||
<Logo />
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { X, History, Send, Clock, FileText, Code } from "lucide-react";
|
||||
import {
|
||||
X,
|
||||
History,
|
||||
Send,
|
||||
Clock,
|
||||
FileText,
|
||||
Code,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -30,51 +39,99 @@ interface TaskDetailsPanelProps {
|
||||
projectId: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
viewMode: "overlay" | "sideBySide";
|
||||
onViewModeChange: (mode: "overlay" | "sideBySide") => void;
|
||||
}
|
||||
|
||||
const statusLabels: Record<TaskStatus, string> = {
|
||||
todo: "To Do",
|
||||
inprogress: "In Progress",
|
||||
inprogress: "In Progress",
|
||||
inreview: "In Review",
|
||||
done: "Done",
|
||||
cancelled: "Cancelled",
|
||||
};
|
||||
|
||||
const getAttemptStatusDisplay = (status: TaskAttemptStatus): { label: string; className: string } => {
|
||||
const getAttemptStatusDisplay = (
|
||||
status: TaskAttemptStatus
|
||||
): { label: string; className: string } => {
|
||||
switch (status) {
|
||||
case "init":
|
||||
return { label: "Init", className: "bg-status-init text-status-init-foreground" };
|
||||
return {
|
||||
label: "Init",
|
||||
className: "bg-status-init text-status-init-foreground",
|
||||
};
|
||||
case "setuprunning":
|
||||
return { label: "Setup Running", className: "bg-status-running text-status-running-foreground" };
|
||||
return {
|
||||
label: "Setup Running",
|
||||
className: "bg-status-running text-status-running-foreground",
|
||||
};
|
||||
case "setupcomplete":
|
||||
return { label: "Setup Complete", className: "bg-status-complete text-status-complete-foreground" };
|
||||
return {
|
||||
label: "Setup Complete",
|
||||
className: "bg-status-complete text-status-complete-foreground",
|
||||
};
|
||||
case "setupfailed":
|
||||
return { label: "Setup Failed", className: "bg-status-failed text-status-failed-foreground" };
|
||||
return {
|
||||
label: "Setup Failed",
|
||||
className: "bg-status-failed text-status-failed-foreground",
|
||||
};
|
||||
case "executorrunning":
|
||||
return { label: "Executor Running", className: "bg-status-running text-status-running-foreground" };
|
||||
return {
|
||||
label: "Executor Running",
|
||||
className: "bg-status-running text-status-running-foreground",
|
||||
};
|
||||
case "executorcomplete":
|
||||
return { label: "Executor Complete", className: "bg-status-complete text-status-complete-foreground" };
|
||||
return {
|
||||
label: "Executor Complete",
|
||||
className: "bg-status-complete text-status-complete-foreground",
|
||||
};
|
||||
case "executorfailed":
|
||||
return { label: "Executor Failed", className: "bg-status-failed text-status-failed-foreground" };
|
||||
return {
|
||||
label: "Executor Failed",
|
||||
className: "bg-status-failed text-status-failed-foreground",
|
||||
};
|
||||
case "paused":
|
||||
return { label: "Paused", className: "bg-status-paused text-status-paused-foreground" };
|
||||
return {
|
||||
label: "Paused",
|
||||
className: "bg-status-paused text-status-paused-foreground",
|
||||
};
|
||||
default:
|
||||
return { label: "Unknown", className: "bg-status-init text-status-init-foreground" };
|
||||
return {
|
||||
label: "Unknown",
|
||||
className: "bg-status-init text-status-init-foreground",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getProcessStatusDisplay = (status: ExecutionProcessStatus): { label: string; className: string } => {
|
||||
const getProcessStatusDisplay = (
|
||||
status: ExecutionProcessStatus
|
||||
): { label: string; className: string } => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return { label: "Running", className: "bg-status-running text-status-running-foreground" };
|
||||
return {
|
||||
label: "Running",
|
||||
className: "bg-status-running text-status-running-foreground",
|
||||
};
|
||||
case "completed":
|
||||
return { label: "Completed", className: "bg-status-complete text-status-complete-foreground" };
|
||||
return {
|
||||
label: "Completed",
|
||||
className: "bg-status-complete text-status-complete-foreground",
|
||||
};
|
||||
case "failed":
|
||||
return { label: "Failed", className: "bg-status-failed text-status-failed-foreground" };
|
||||
return {
|
||||
label: "Failed",
|
||||
className: "bg-status-failed text-status-failed-foreground",
|
||||
};
|
||||
case "killed":
|
||||
return { label: "Killed", className: "bg-status-failed text-status-failed-foreground" };
|
||||
return {
|
||||
label: "Killed",
|
||||
className: "bg-status-failed text-status-failed-foreground",
|
||||
};
|
||||
default:
|
||||
return { label: "Unknown", className: "bg-status-init text-status-init-foreground" };
|
||||
return {
|
||||
label: "Unknown",
|
||||
className: "bg-status-init text-status-init-foreground",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@@ -91,11 +148,24 @@ const getProcessTypeDisplay = (type: ExecutionProcessType): string => {
|
||||
}
|
||||
};
|
||||
|
||||
export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetailsPanelProps) {
|
||||
export function TaskDetailsPanel({
|
||||
task,
|
||||
projectId,
|
||||
isOpen,
|
||||
onClose,
|
||||
viewMode,
|
||||
onViewModeChange,
|
||||
}: TaskDetailsPanelProps) {
|
||||
const [taskAttempts, setTaskAttempts] = useState<TaskAttempt[]>([]);
|
||||
const [selectedAttempt, setSelectedAttempt] = useState<TaskAttempt | null>(null);
|
||||
const [attemptActivities, setAttemptActivities] = useState<TaskAttemptActivity[]>([]);
|
||||
const [executionProcesses, setExecutionProcesses] = useState<ExecutionProcess[]>([]);
|
||||
const [selectedAttempt, setSelectedAttempt] = useState<TaskAttempt | null>(
|
||||
null
|
||||
);
|
||||
const [attemptActivities, setAttemptActivities] = useState<
|
||||
TaskAttemptActivity[]
|
||||
>([]);
|
||||
const [executionProcesses, setExecutionProcesses] = useState<
|
||||
ExecutionProcess[]
|
||||
>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [followUpMessage, setFollowUpMessage] = useState("");
|
||||
const [showAttemptHistory, setShowAttemptHistory] = useState(false);
|
||||
@@ -142,7 +212,7 @@ export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetai
|
||||
const result: ApiResponse<TaskAttempt[]> = await response.json();
|
||||
if (result.success && result.data) {
|
||||
setTaskAttempts(result.data);
|
||||
|
||||
|
||||
// Auto-select latest attempt
|
||||
if (result.data.length > 0) {
|
||||
const latestAttempt = result.data.reduce((latest, current) =>
|
||||
@@ -163,7 +233,10 @@ export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetai
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAttemptActivities = async (attemptId: string, _isBackgroundUpdate = false) => {
|
||||
const fetchAttemptActivities = async (
|
||||
attemptId: string,
|
||||
_isBackgroundUpdate = false
|
||||
) => {
|
||||
if (!task) return;
|
||||
|
||||
try {
|
||||
@@ -172,7 +245,8 @@ export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetai
|
||||
);
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -182,7 +256,10 @@ export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetai
|
||||
}
|
||||
};
|
||||
|
||||
const fetchExecutionProcesses = async (attemptId: string, _isBackgroundUpdate = false) => {
|
||||
const fetchExecutionProcesses = async (
|
||||
attemptId: string,
|
||||
_isBackgroundUpdate = false
|
||||
) => {
|
||||
if (!task) return;
|
||||
|
||||
try {
|
||||
@@ -202,7 +279,7 @@ export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetai
|
||||
};
|
||||
|
||||
const handleAttemptChange = (attemptId: string) => {
|
||||
const attempt = taskAttempts.find(a => a.id === attemptId);
|
||||
const attempt = taskAttempts.find((a) => a.id === attemptId);
|
||||
if (attempt) {
|
||||
setSelectedAttempt(attempt);
|
||||
fetchAttemptActivities(attempt.id);
|
||||
@@ -265,280 +342,366 @@ export function TaskDetailsPanel({ task, projectId, isOpen, onClose }: TaskDetai
|
||||
<>
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Backdrop - only in overlay mode */}
|
||||
{viewMode === "overlay" && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Panel */}
|
||||
<div className="fixed inset-y-0 right-0 z-50 w-full sm:w-[800px] bg-background border-l shadow-lg overflow-hidden">
|
||||
<div
|
||||
className={`
|
||||
${
|
||||
viewMode === "overlay"
|
||||
? "fixed inset-y-0 right-0 z-50 w-full sm:w-[800px]"
|
||||
: "w-full sm:w-[800px] h-full relative"
|
||||
}
|
||||
bg-background border-l shadow-lg overflow-hidden
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-xl font-bold mb-2 line-clamp-2">
|
||||
{task.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
task.status === "todo"
|
||||
? "bg-neutral text-neutral-foreground"
|
||||
: task.status === "inprogress"
|
||||
? "bg-info text-info-foreground"
|
||||
: task.status === "inreview"
|
||||
? "bg-warning text-warning-foreground"
|
||||
: task.status === "done"
|
||||
? "bg-success text-success-foreground"
|
||||
: "bg-destructive text-destructive-foreground"
|
||||
}`}
|
||||
>
|
||||
{statusLabels[task.status]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Attempt Selection */}
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedAttempt && !showAttemptHistory ? (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="text-sm text-muted-foreground">Current attempt:</span>
|
||||
<span className="text-sm font-medium">
|
||||
{new Date(selectedAttempt.created_at).toLocaleDateString()} {new Date(selectedAttempt.created_at).toLocaleTimeString()}
|
||||
</span>
|
||||
{taskAttempts.length > 1 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowAttemptHistory(true)}
|
||||
>
|
||||
<History className="h-4 w-4 mr-1" />
|
||||
History
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<Select value={selectedAttempt?.id || ""} onValueChange={handleAttemptChange}>
|
||||
<SelectTrigger className="flex-1">
|
||||
<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>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowAttemptHistory(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedAttempt && (
|
||||
<div className="flex gap-1">
|
||||
<Button variant="outline" size="sm" onClick={openInEditor}>
|
||||
<Code className="h-4 w-4 mr-1" />
|
||||
Editor
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => window.open(`/projects/${projectId}/tasks/${task.id}/attempts/${selectedAttempt.id}/compare`, '_blank')}>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
Changes
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Description */}
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block">Description</Label>
|
||||
<div className="p-3 bg-muted rounded-md min-h-[60px]">
|
||||
{task.description ? (
|
||||
<p className="text-sm whitespace-pre-wrap">{task.description}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No description provided
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Execution Processes */}
|
||||
{selectedAttempt && executionProcesses.length > 0 && (
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-3 block">Execution Processes</Label>
|
||||
<div className="space-y-3">
|
||||
{executionProcesses.map((process) => (
|
||||
<Card key={process.id} className="border">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
getProcessStatusDisplay(process.status).className
|
||||
}`}
|
||||
>
|
||||
{getProcessStatusDisplay(process.status).label}
|
||||
</span>
|
||||
<span className="font-medium text-sm">
|
||||
{getProcessTypeDisplay(process.process_type)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(process.started_at).toLocaleTimeString()}
|
||||
</span>
|
||||
{process.status === "running" && (
|
||||
<Button
|
||||
onClick={() => stopExecutionProcess(process.id)}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(process.stdout || process.stderr) && (
|
||||
<div className="space-y-2">
|
||||
{process.stdout && (
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground mb-1 block">
|
||||
STDOUT
|
||||
</Label>
|
||||
<div
|
||||
className="bg-black text-green-400 border border-green-400 rounded-md p-2 font-mono text-xs max-h-32 overflow-y-auto whitespace-pre-wrap"
|
||||
style={{
|
||||
fontFamily:
|
||||
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
}}
|
||||
>
|
||||
{process.stdout}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{process.stderr && (
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground mb-1 block">
|
||||
STDERR
|
||||
</Label>
|
||||
<div
|
||||
className="bg-black text-red-400 border border-red-400 rounded-md p-2 font-mono text-xs max-h-32 overflow-y-auto whitespace-pre-wrap"
|
||||
style={{
|
||||
fontFamily:
|
||||
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
}}
|
||||
>
|
||||
{process.stderr}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-xl font-bold mb-2 line-clamp-2">
|
||||
{task.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
task.status === "todo"
|
||||
? "bg-neutral text-neutral-foreground"
|
||||
: task.status === "inprogress"
|
||||
? "bg-info text-info-foreground"
|
||||
: task.status === "inreview"
|
||||
? "bg-warning text-warning-foreground"
|
||||
: task.status === "done"
|
||||
? "bg-success text-success-foreground"
|
||||
: "bg-destructive text-destructive-foreground"
|
||||
}`}
|
||||
>
|
||||
{statusLabels[task.status]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
onViewModeChange(
|
||||
viewMode === "overlay" ? "sideBySide" : "overlay"
|
||||
)
|
||||
}
|
||||
title={
|
||||
viewMode === "overlay"
|
||||
? "Switch to side-by-side view"
|
||||
: "Switch to overlay view"
|
||||
}
|
||||
>
|
||||
{viewMode === "overlay" ? (
|
||||
<Maximize2 className="h-4 w-4" />
|
||||
) : (
|
||||
<Minimize2 className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity History */}
|
||||
{selectedAttempt && (
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-3 block">Activity History</Label>
|
||||
{attemptActivities.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">
|
||||
No activities found
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{attemptActivities.map((activity) => (
|
||||
<Card key={activity.id} className="border">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
getAttemptStatusDisplay(activity.status).className
|
||||
}`}
|
||||
>
|
||||
{getAttemptStatusDisplay(activity.status).label}
|
||||
{/* Attempt Selection */}
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedAttempt && !showAttemptHistory ? (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Current attempt:
|
||||
</span>
|
||||
<span className="text-sm font-medium">
|
||||
{new Date(
|
||||
selectedAttempt.created_at
|
||||
).toLocaleDateString()}{" "}
|
||||
{new Date(
|
||||
selectedAttempt.created_at
|
||||
).toLocaleTimeString()}
|
||||
</span>
|
||||
{taskAttempts.length > 1 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowAttemptHistory(true)}
|
||||
>
|
||||
<History className="h-4 w-4 mr-1" />
|
||||
History
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<Select
|
||||
value={selectedAttempt?.id || ""}
|
||||
onValueChange={handleAttemptChange}
|
||||
>
|
||||
<SelectTrigger className="flex-1">
|
||||
<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 className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(activity.created_at).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
{activity.note && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{activity.note}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowAttemptHistory(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedAttempt && (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={openInEditor}
|
||||
>
|
||||
<Code className="h-4 w-4 mr-1" />
|
||||
Editor
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
`/projects/${projectId}/tasks/${task.id}/attempts/${selectedAttempt.id}/compare`,
|
||||
"_blank"
|
||||
)
|
||||
}
|
||||
>
|
||||
<FileText className="h-4 w-4 mr-1" />
|
||||
Changes
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Description */}
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-2 block">
|
||||
Description
|
||||
</Label>
|
||||
<div className="p-3 bg-muted rounded-md min-h-[60px]">
|
||||
{task.description ? (
|
||||
<p className="text-sm whitespace-pre-wrap">
|
||||
{task.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No description provided
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Execution Processes */}
|
||||
{selectedAttempt && executionProcesses.length > 0 && (
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-3 block">
|
||||
Execution Processes
|
||||
</Label>
|
||||
<div className="space-y-3">
|
||||
{executionProcesses.map((process) => (
|
||||
<Card key={process.id} className="border">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
getProcessStatusDisplay(process.status)
|
||||
.className
|
||||
}`}
|
||||
>
|
||||
{
|
||||
getProcessStatusDisplay(process.status)
|
||||
.label
|
||||
}
|
||||
</span>
|
||||
<span className="font-medium text-sm">
|
||||
{getProcessTypeDisplay(
|
||||
process.process_type
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(
|
||||
process.started_at
|
||||
).toLocaleTimeString()}
|
||||
</span>
|
||||
{process.status === "running" && (
|
||||
<Button
|
||||
onClick={() =>
|
||||
stopExecutionProcess(process.id)
|
||||
}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(process.stdout || process.stderr) && (
|
||||
<div className="space-y-2">
|
||||
{process.stdout && (
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground mb-1 block">
|
||||
STDOUT
|
||||
</Label>
|
||||
<div
|
||||
className="bg-black text-green-400 border border-green-400 rounded-md p-2 font-mono text-xs max-h-32 overflow-y-auto whitespace-pre-wrap"
|
||||
style={{
|
||||
fontFamily:
|
||||
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
}}
|
||||
>
|
||||
{process.stdout}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{process.stderr && (
|
||||
<div>
|
||||
<Label className="text-xs text-muted-foreground mb-1 block">
|
||||
STDERR
|
||||
</Label>
|
||||
<div
|
||||
className="bg-black text-red-400 border border-red-400 rounded-md p-2 font-mono text-xs max-h-32 overflow-y-auto whitespace-pre-wrap"
|
||||
style={{
|
||||
fontFamily:
|
||||
'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
}}
|
||||
>
|
||||
{process.stderr}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t p-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Follow-up question</Label>
|
||||
<div className="flex gap-2">
|
||||
<Textarea
|
||||
placeholder="Ask a follow-up question about this task..."
|
||||
value={followUpMessage}
|
||||
onChange={(e) => setFollowUpMessage(e.target.value)}
|
||||
className="flex-1 min-h-[60px] resize-none"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSendFollowUp}
|
||||
disabled={!followUpMessage.trim()}
|
||||
className="self-end"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* Activity History */}
|
||||
{selectedAttempt && (
|
||||
<div>
|
||||
<Label className="text-sm font-medium mb-3 block">
|
||||
Activity History
|
||||
</Label>
|
||||
{attemptActivities.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">
|
||||
No activities found
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{attemptActivities.map((activity) => (
|
||||
<Card key={activity.id} className="border">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
getAttemptStatusDisplay(activity.status)
|
||||
.className
|
||||
}`}
|
||||
>
|
||||
{
|
||||
getAttemptStatusDisplay(activity.status)
|
||||
.label
|
||||
}
|
||||
</span>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(
|
||||
activity.created_at
|
||||
).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
{activity.note && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{activity.note}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t p-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">
|
||||
Follow-up question
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Textarea
|
||||
placeholder="Ask a follow-up question about this task..."
|
||||
value={followUpMessage}
|
||||
onChange={(e) => setFollowUpMessage(e.target.value)}
|
||||
className="flex-1 min-h-[60px] resize-none"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSendFollowUp}
|
||||
disabled={!followUpMessage.trim()}
|
||||
className="self-end"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Follow-up functionality coming soon
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Follow-up functionality coming soon
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
KanbanProvider,
|
||||
KanbanBoard,
|
||||
@@ -7,17 +6,16 @@ import {
|
||||
type DragEndEvent
|
||||
} from '@/components/ui/shadcn-io/kanban'
|
||||
import { TaskCard } from './TaskCard'
|
||||
import { TaskDetailsPanel } from './TaskDetailsPanel'
|
||||
import type { TaskStatus, TaskWithAttemptStatus } from 'shared/types'
|
||||
|
||||
type Task = TaskWithAttemptStatus
|
||||
|
||||
interface TaskKanbanBoardProps {
|
||||
tasks: Task[]
|
||||
projectId: string
|
||||
onDragEnd: (event: DragEndEvent) => void
|
||||
onEditTask: (task: Task) => void
|
||||
onDeleteTask: (taskId: string) => void
|
||||
onViewTaskDetails: (task: Task) => void
|
||||
}
|
||||
|
||||
const allTaskStatuses: TaskStatus[] = ['todo', 'inprogress', 'inreview', 'done', 'cancelled']
|
||||
@@ -38,19 +36,7 @@ const statusBoardColors: Record<TaskStatus, string> = {
|
||||
cancelled: 'hsl(var(--destructive))'
|
||||
}
|
||||
|
||||
export function TaskKanbanBoard({ tasks, projectId, onDragEnd, onEditTask, onDeleteTask }: TaskKanbanBoardProps) {
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null)
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false)
|
||||
|
||||
const handleViewTaskDetails = (task: Task) => {
|
||||
setSelectedTask(task)
|
||||
setIsPanelOpen(true)
|
||||
}
|
||||
|
||||
const handleClosePanel = () => {
|
||||
setIsPanelOpen(false)
|
||||
setSelectedTask(null)
|
||||
}
|
||||
export function TaskKanbanBoard({ tasks, onDragEnd, onEditTask, onDeleteTask, onViewTaskDetails }: TaskKanbanBoardProps) {
|
||||
const groupTasksByStatus = () => {
|
||||
const groups: Record<TaskStatus, Task[]> = {} as Record<TaskStatus, Task[]>
|
||||
|
||||
@@ -74,39 +60,28 @@ export function TaskKanbanBoard({ tasks, projectId, onDragEnd, onEditTask, onDel
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className={`transition-all duration-300 ${isPanelOpen ? 'opacity-50 pointer-events-none' : ''}`}>
|
||||
<KanbanProvider onDragEnd={onDragEnd}>
|
||||
{Object.entries(groupTasksByStatus()).map(([status, statusTasks]) => (
|
||||
<KanbanBoard key={status} id={status as TaskStatus}>
|
||||
<KanbanHeader
|
||||
name={statusLabels[status as TaskStatus]}
|
||||
color={statusBoardColors[status as TaskStatus]}
|
||||
<KanbanProvider onDragEnd={onDragEnd}>
|
||||
{Object.entries(groupTasksByStatus()).map(([status, statusTasks]) => (
|
||||
<KanbanBoard key={status} id={status as TaskStatus}>
|
||||
<KanbanHeader
|
||||
name={statusLabels[status as TaskStatus]}
|
||||
color={statusBoardColors[status as TaskStatus]}
|
||||
/>
|
||||
<KanbanCards>
|
||||
{statusTasks.map((task, index) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
index={index}
|
||||
status={status}
|
||||
onEdit={onEditTask}
|
||||
onDelete={onDeleteTask}
|
||||
onViewDetails={onViewTaskDetails}
|
||||
/>
|
||||
<KanbanCards>
|
||||
{statusTasks.map((task, index) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
index={index}
|
||||
status={status}
|
||||
onEdit={onEditTask}
|
||||
onDelete={onDeleteTask}
|
||||
onViewDetails={handleViewTaskDetails}
|
||||
/>
|
||||
))}
|
||||
</KanbanCards>
|
||||
</KanbanBoard>
|
||||
))}
|
||||
</KanbanProvider>
|
||||
</div>
|
||||
|
||||
<TaskDetailsPanel
|
||||
task={selectedTask}
|
||||
projectId={projectId}
|
||||
isOpen={isPanelOpen}
|
||||
onClose={handleClosePanel}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</KanbanCards>
|
||||
</KanbanBoard>
|
||||
))}
|
||||
</KanbanProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { TaskFormDialog } from "@/components/tasks/TaskFormDialog";
|
||||
import { useKeyboardShortcuts } from "@/lib/keyboard-shortcuts";
|
||||
|
||||
import { TaskKanbanBoard } from "@/components/tasks/TaskKanbanBoard";
|
||||
import { TaskDetailsPanel } from "@/components/tasks/TaskDetailsPanel";
|
||||
import type { TaskStatus, TaskWithAttemptStatus } from "shared/types";
|
||||
import type { DragEndEvent } from "@/components/ui/shadcn-io/kanban";
|
||||
|
||||
@@ -37,6 +38,11 @@ export function ProjectTasks() {
|
||||
const [isTaskDialogOpen, setIsTaskDialogOpen] = useState(false);
|
||||
const [editingTask, setEditingTask] = useState<Task | null>(null);
|
||||
|
||||
// Panel state
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<"overlay" | "sideBySide">("overlay");
|
||||
|
||||
// Define task creation handler
|
||||
const handleCreateNewTask = () => {
|
||||
setEditingTask(null);
|
||||
@@ -49,7 +55,7 @@ export function ProjectTasks() {
|
||||
currentPath: `/projects/${projectId}/tasks`,
|
||||
hasOpenDialog: isTaskDialogOpen,
|
||||
closeDialog: () => setIsTaskDialogOpen(false),
|
||||
openCreateTask: handleCreateNewTask
|
||||
openCreateTask: handleCreateNewTask,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -96,7 +102,7 @@ export function ProjectTasks() {
|
||||
const result: ApiResponse<Task[]> = await response.json();
|
||||
if (result.success && result.data) {
|
||||
// Only update if data has actually changed
|
||||
setTasks(prevTasks => {
|
||||
setTasks((prevTasks) => {
|
||||
const newTasks = result.data!;
|
||||
if (JSON.stringify(prevTasks) === JSON.stringify(newTasks)) {
|
||||
return prevTasks; // Return same reference to prevent re-render
|
||||
@@ -137,16 +143,22 @@ export function ProjectTasks() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateAndStartTask = async (title: string, description: string) => {
|
||||
const handleCreateAndStartTask = async (
|
||||
title: string,
|
||||
description: string
|
||||
) => {
|
||||
try {
|
||||
const response = await makeRequest(`/api/projects/${projectId}/tasks/create-and-start`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
project_id: projectId,
|
||||
title,
|
||||
description: description || null,
|
||||
}),
|
||||
});
|
||||
const response = await makeRequest(
|
||||
`/api/projects/${projectId}/tasks/create-and-start`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
project_id: projectId,
|
||||
title,
|
||||
description: description || null,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
await fetchTasks();
|
||||
@@ -215,7 +227,19 @@ export function ProjectTasks() {
|
||||
setIsTaskDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleViewTaskDetails = (task: Task) => {
|
||||
setSelectedTask(task);
|
||||
setIsPanelOpen(true);
|
||||
};
|
||||
|
||||
const handleClosePanel = () => {
|
||||
setIsPanelOpen(false);
|
||||
setSelectedTask(null);
|
||||
};
|
||||
|
||||
const handleViewModeChange = (mode: "overlay" | "sideBySide") => {
|
||||
setViewMode(mode);
|
||||
};
|
||||
|
||||
const handleDragEnd = async (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
@@ -276,72 +300,106 @@ export function ProjectTasks() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/projects")}
|
||||
className="flex items-center"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Projects
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
{project?.name || "Project"} Tasks
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage tasks for this project
|
||||
</p>
|
||||
<div
|
||||
className={`w-full ${
|
||||
viewMode === "sideBySide" && isPanelOpen ? "flex h-full" : ""
|
||||
}`}
|
||||
>
|
||||
{/* Left Column - Kanban Section */}
|
||||
<div
|
||||
className={`
|
||||
${
|
||||
viewMode === "sideBySide" && isPanelOpen
|
||||
? "flex-1 min-w-0 h-full overflow-y-auto"
|
||||
: "w-full"
|
||||
}
|
||||
${
|
||||
viewMode === "overlay" && isPanelOpen
|
||||
? "opacity-50 pointer-events-none"
|
||||
: ""
|
||||
}
|
||||
transition-all duration-300
|
||||
`}
|
||||
>
|
||||
<div className="space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/projects")}
|
||||
className="flex items-center"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Projects
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
{project?.name || "Project"} Tasks
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage tasks for this project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleCreateNewTask}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Task
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<TaskFormDialog
|
||||
isOpen={isTaskDialogOpen}
|
||||
onOpenChange={setIsTaskDialogOpen}
|
||||
task={editingTask}
|
||||
projectId={projectId}
|
||||
onCreateTask={handleCreateTask}
|
||||
onCreateAndStartTask={handleCreateAndStartTask}
|
||||
onUpdateTask={handleUpdateTask}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleCreateNewTask}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Task
|
||||
</Button>
|
||||
{/* Tasks View */}
|
||||
{tasks.length === 0 ? (
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<Card>
|
||||
<CardContent className="text-center py-8">
|
||||
<p className="text-muted-foreground">
|
||||
No tasks found for this project.
|
||||
</p>
|
||||
<Button className="mt-4" onClick={handleCreateNewTask}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create First Task
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 scroll">
|
||||
<TaskKanbanBoard
|
||||
tasks={tasks}
|
||||
onDragEnd={handleDragEnd}
|
||||
onEditTask={handleEditTask}
|
||||
onDeleteTask={handleDeleteTask}
|
||||
onViewTaskDetails={handleViewTaskDetails}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<TaskFormDialog
|
||||
isOpen={isTaskDialogOpen}
|
||||
onOpenChange={setIsTaskDialogOpen}
|
||||
task={editingTask}
|
||||
projectId={projectId}
|
||||
onCreateTask={handleCreateTask}
|
||||
onCreateAndStartTask={handleCreateAndStartTask}
|
||||
onUpdateTask={handleUpdateTask}
|
||||
/>
|
||||
|
||||
{/* Tasks View */}
|
||||
{tasks.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="text-center py-8">
|
||||
<p className="text-muted-foreground">
|
||||
No tasks found for this project.
|
||||
</p>
|
||||
<Button
|
||||
className="mt-4"
|
||||
onClick={handleCreateNewTask}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create First Task
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<TaskKanbanBoard
|
||||
tasks={tasks}
|
||||
{/* Right Column - Task Details Panel */}
|
||||
{isPanelOpen && (
|
||||
<TaskDetailsPanel
|
||||
task={selectedTask}
|
||||
projectId={projectId!}
|
||||
onDragEnd={handleDragEnd}
|
||||
onEditTask={handleEditTask}
|
||||
onDeleteTask={handleDeleteTask}
|
||||
isOpen={isPanelOpen}
|
||||
onClose={handleClosePanel}
|
||||
viewMode={viewMode}
|
||||
onViewModeChange={handleViewModeChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user