Spaces:
Sleeping
Sleeping
File size: 4,587 Bytes
7540aea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | /**
* TaskManagerPanel — displays and manages background tasks.
* Uses real JSON API endpoint /api/tasks/:sessionId
*/
import { useState, useEffect, useCallback } from "react";
import { Play, Square, RefreshCw, Clock, CheckCircle, XCircle, AlertCircle, Loader2 } from "lucide-react";
interface Task {
id: string;
description: string;
command?: string;
status: "running" | "completed" | "stopped" | "failed";
createdAt: number;
output: string;
}
interface TaskManagerPanelProps {
sessionId: number;
onSlashCommand: (command: string, args?: string) => Promise<string>;
}
export function TaskManagerPanel({ sessionId }: TaskManagerPanelProps) {
const [tasks, setTasks] = useState<Task[]>([]);
const [loading, setLoading] = useState(false);
const [expandedTask, setExpandedTask] = useState<string | null>(null);
const refreshTasks = useCallback(async () => {
setLoading(true);
try {
const res = await fetch(`/api/tasks/${sessionId}`);
if (res.ok) {
const data = await res.json();
if (Array.isArray(data)) setTasks(data);
}
} catch {
// ignore fetch errors
} finally {
setLoading(false);
}
}, [sessionId]);
useEffect(() => {
refreshTasks();
// Auto-refresh every 3 seconds while panel is open
const interval = setInterval(refreshTasks, 3000);
return () => clearInterval(interval);
}, [refreshTasks]);
const statusIcon = (status: string) => {
switch (status) {
case "running": return <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />;
case "completed": return <CheckCircle className="w-4 h-4 text-green-400" />;
case "stopped": return <Square className="w-4 h-4 text-yellow-400" />;
case "failed": return <XCircle className="w-4 h-4 text-red-400" />;
default: return <AlertCircle className="w-4 h-4 text-muted-foreground" />;
}
};
return (
<div className="flex flex-col h-full">
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
<h3 className="text-sm font-semibold flex items-center gap-2">
<Play className="w-4 h-4" />
Background Tasks ({tasks.length})
</h3>
<button
onClick={refreshTasks}
disabled={loading}
className="p-1.5 rounded hover:bg-accent transition-colors"
>
<RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
</button>
</div>
<div className="flex-1 overflow-y-auto">
{tasks.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-2 p-4">
<Clock className="w-8 h-8 opacity-40" />
<p>No background tasks</p>
<p className="text-xs opacity-60">Tasks created via TaskCreate tool will appear here</p>
</div>
) : (
<div className="divide-y divide-border">
{tasks.map((task) => (
<div key={task.id} className="p-3">
<button
onClick={() => setExpandedTask(expandedTask === task.id ? null : task.id)}
className="w-full flex items-start gap-2 text-left"
>
{statusIcon(task.status)}
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{task.description}</p>
<p className="text-xs text-muted-foreground">
{task.id} · {new Date(task.createdAt).toLocaleTimeString()}
{task.command && ` · ${task.command.substring(0, 40)}${task.command.length > 40 ? "..." : ""}`}
</p>
</div>
<span className={`text-xs px-1.5 py-0.5 rounded ${
task.status === "running" ? "bg-blue-500/20 text-blue-400" :
task.status === "completed" ? "bg-green-500/20 text-green-400" :
task.status === "failed" ? "bg-red-500/20 text-red-400" :
"bg-yellow-500/20 text-yellow-400"
}`}>
{task.status}
</span>
</button>
{expandedTask === task.id && (
<pre className="mt-2 p-2 rounded bg-muted text-xs font-mono whitespace-pre-wrap max-h-40 overflow-y-auto">
{task.output || "(no output yet)"}
</pre>
)}
</div>
))}
</div>
)}
</div>
</div>
);
}
|