@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/new-ui/src/pages/tasks/page.tsx

@@ -0,0 +1,592 @@
+import type { ColDef, RowClickedEvent } from "ag-grid-community";
+import { ChevronLeft, ChevronRight, Clock, GitBranch, Plus, Search, X } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAgents } from "@/api/hooks/use-agents";
+import { useScheduledTasks } from "@/api/hooks/use-schedules";
+import { useCreateTask, useTasks } from "@/api/hooks/use-tasks";
+import type { AgentTask, AgentTaskStatus } from "@/api/types";
+import { DataGrid } from "@/components/shared/data-grid";
+import { StatusBadge } from "@/components/shared/status-badge";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { formatElapsed, formatSmartTime } from "@/lib/utils";
+
+interface TaskFormData {
+  task: string;
+  agentId: string;
+  taskType: string;
+  tags: string;
+  priority: number;
+  dependsOn: string[];
+}
+
+const emptyTaskForm: TaskFormData = {
+  task: "",
+  agentId: "",
+  taskType: "",
+  tags: "",
+  priority: 50,
+  dependsOn: [],
+};
+
+function CreateTaskDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: TaskFormData) => void;
+}) {
+  const { data: agents } = useAgents();
+  const { data: tasksData } = useTasks({ status: "pending", limit: 200 });
+  const { data: runningTasksData } = useTasks({ status: "in_progress", limit: 200 });
+  const [form, setForm] = useState<TaskFormData>(emptyTaskForm);
+  const [depSearch, setDepSearch] = useState("");
+
+  const leadAgent = agents?.find((a) => a.isLead) ?? agents?.[0];
+
+  // Merge pending + running tasks for dependency picker
+  const availableDeps = useMemo(() => {
+    const all = [...(tasksData?.tasks ?? []), ...(runningTasksData?.tasks ?? [])];
+    const seen = new Set<string>();
+    return all.filter((t) => {
+      if (seen.has(t.id)) return false;
+      seen.add(t.id);
+      return true;
+    });
+  }, [tasksData, runningTasksData]);
+
+  const filteredDeps = useMemo(() => {
+    if (!depSearch) return availableDeps;
+    const q = depSearch.toLowerCase();
+    return availableDeps.filter(
+      (t) =>
+        t.task.toLowerCase().includes(q) ||
+        t.id.toLowerCase().includes(q) ||
+        t.status.toLowerCase().includes(q),
+    );
+  }, [availableDeps, depSearch]);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!form.task.trim()) return;
+    // Ensure agentId is set — default to lead if empty
+    const agentId = form.agentId || leadAgent?.id || "";
+    if (!agentId) return;
+    onSubmit({ ...form, agentId });
+    setForm(emptyTaskForm);
+    setDepSearch("");
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto overflow-x-hidden">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Create Task</DialogTitle>
+            <DialogDescription>Send a new task to an agent for execution.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>Description *</Label>
+              <Textarea
+                placeholder="Describe the task..."
+                value={form.task}
+                onChange={(e) => setForm({ ...form, task: e.target.value })}
+                required
+                rows={3}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Agent *</Label>
+              <Select
+                value={form.agentId || leadAgent?.id || ""}
+                onValueChange={(v) => setForm({ ...form, agentId: v })}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select agent" />
+                </SelectTrigger>
+                <SelectContent>
+                  {agents?.map((a) => (
+                    <SelectItem key={a.id} value={a.id}>
+                      {a.name}
+                      {a.isLead ? " (Lead)" : ""}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Task Type</Label>
+                <Input
+                  placeholder="e.g. code, research"
+                  value={form.taskType}
+                  onChange={(e) => setForm({ ...form, taskType: e.target.value })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Priority (0–100)</Label>
+                <Input
+                  type="number"
+                  min={0}
+                  max={100}
+                  value={form.priority}
+                  onChange={(e) => setForm({ ...form, priority: Number(e.target.value) })}
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>Tags (comma-separated)</Label>
+              <Input
+                placeholder="feature, urgent"
+                value={form.tags}
+                onChange={(e) => setForm({ ...form, tags: e.target.value })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Dependencies</Label>
+              {form.dependsOn.length > 0 && (
+                <div className="flex flex-wrap gap-1 mb-1">
+                  {form.dependsOn.map((depId) => {
+                    const depTask = availableDeps.find((t) => t.id === depId);
+                    return (
+                      <Badge
+                        key={depId}
+                        variant="outline"
+                        className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center gap-1 cursor-pointer hover:bg-red-500/10 hover:border-red-500/30"
+                        onClick={() =>
+                          setForm({ ...form, dependsOn: form.dependsOn.filter((d) => d !== depId) })
+                        }
+                      >
+                        #{depId.slice(0, 8)} {depTask ? `— ${depTask.task.slice(0, 20)}` : ""}
+                        <X className="h-2.5 w-2.5" />
+                      </Badge>
+                    );
+                  })}
+                </div>
+              )}
+              <div className="space-y-1">
+                <Input
+                  placeholder="Search pending/running tasks..."
+                  value={depSearch}
+                  onChange={(e) => setDepSearch(e.target.value)}
+                />
+                {depSearch && filteredDeps.length > 0 && (
+                  <div className="max-h-32 overflow-y-auto rounded-md border border-border bg-popover">
+                    {filteredDeps.slice(0, 10).map((t) => (
+                      <button
+                        key={t.id}
+                        type="button"
+                        disabled={form.dependsOn.includes(t.id)}
+                        onClick={() => {
+                          setForm({ ...form, dependsOn: [...form.dependsOn, t.id] });
+                          setDepSearch("");
+                        }}
+                        className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed"
+                      >
+                        <StatusBadge status={t.status} />
+                        <span className="truncate flex-1">{t.task}</span>
+                        <span className="text-[10px] font-mono text-muted-foreground shrink-0">
+                          #{t.id.slice(0, 8)}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              className="bg-primary hover:bg-primary/90"
+              disabled={!form.task.trim() || !(form.agentId || leadAgent?.id)}
+            >
+              Create
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const PAGE_SIZE = 100;
+
+export default function TasksPage() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Read all filter state from URL params
+  const statusFilter = searchParams.get("status") ?? "all";
+  const agentFilter = searchParams.get("agent") ?? "all";
+  const scheduleFilter = searchParams.get("schedule") ?? "all";
+  const searchParam = searchParams.get("search") ?? "";
+  const includeHeartbeat = searchParams.get("heartbeat") === "true";
+  const page = searchParams.has("page") ? Number(searchParams.get("page")) : 0;
+
+  // Single setter that updates one key while preserving others
+  const setParam = useCallback(
+    (key: string, value: string, resetPage = true) => {
+      setSearchParams((prev) => {
+        const next = new URLSearchParams(prev);
+        // Set or delete the key
+        const defaultValues: Record<string, string> = {
+          status: "all",
+          agent: "all",
+          schedule: "all",
+          search: "",
+          page: "0",
+        };
+        if (value === (defaultValues[key] ?? "")) {
+          next.delete(key);
+        } else {
+          next.set(key, value);
+        }
+        // Reset page when changing filters
+        if (resetPage && key !== "page") next.delete("page");
+        return next;
+      });
+    },
+    [setSearchParams],
+  );
+
+  const { data: agents } = useAgents();
+  const { data: schedules } = useScheduledTasks();
+  const agentMap = useMemo(() => {
+    const m = new Map<string, string>();
+    agents?.forEach((a) => {
+      m.set(a.id, a.name);
+    });
+    return m;
+  }, [agents]);
+
+  const filters = useMemo(() => {
+    const f: {
+      status?: string;
+      agentId?: string;
+      scheduleId?: string;
+      search?: string;
+      includeHeartbeat?: boolean;
+      limit: number;
+      offset: number;
+    } = {
+      limit: PAGE_SIZE,
+      offset: page * PAGE_SIZE,
+    };
+    if (statusFilter !== "all") f.status = statusFilter;
+    if (agentFilter !== "all") f.agentId = agentFilter;
+    if (scheduleFilter !== "all") f.scheduleId = scheduleFilter;
+    if (searchParam) f.search = searchParam;
+    if (includeHeartbeat) f.includeHeartbeat = true;
+    return f;
+  }, [statusFilter, agentFilter, scheduleFilter, searchParam, includeHeartbeat, page]);
+
+  const { data: tasksData, isLoading } = useTasks(filters);
+  const createTask = useCreateTask();
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  function handleCreateSubmit(data: TaskFormData) {
+    const tags = data.tags
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+    createTask.mutate({
+      task: data.task,
+      agentId: data.agentId,
+      ...(data.taskType && { taskType: data.taskType }),
+      ...(tags.length > 0 && { tags }),
+      ...(data.priority !== 50 && { priority: data.priority }),
+      ...(data.dependsOn.length > 0 && { dependsOn: data.dependsOn }),
+    });
+  }
+
+  const total = tasksData?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const hasActiveFilters =
+    statusFilter !== "all" ||
+    agentFilter !== "all" ||
+    scheduleFilter !== "all" ||
+    searchParam !== "" ||
+    includeHeartbeat ||
+    page !== 0;
+
+  const clearFilters = useCallback(() => {
+    setSearchParams(new URLSearchParams());
+  }, [setSearchParams]);
+
+  const columnDefs = useMemo<ColDef<AgentTask>[]>(
+    () => [
+      {
+        field: "task",
+        headerName: "Description",
+        flex: 1,
+        minWidth: 250,
+        cellRenderer: (params: { value: string }) => (
+          <span className="truncate">{params.value}</span>
+        ),
+      },
+      {
+        field: "status",
+        headerName: "Status",
+        width: 130,
+        cellRenderer: (params: { value: AgentTaskStatus }) => <StatusBadge status={params.value} />,
+      },
+      {
+        field: "taskType",
+        headerName: "Type",
+        width: 110,
+        cellRenderer: (params: { value: string | undefined }) =>
+          params.value ? (
+            <Badge
+              variant="outline"
+              className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase"
+            >
+              {params.value}
+            </Badge>
+          ) : null,
+      },
+      {
+        field: "agentId",
+        headerName: "Agent",
+        width: 150,
+        valueFormatter: (params) =>
+          params.value
+            ? (agentMap.get(params.value) ?? `${params.value.slice(0, 8)}...`)
+            : "Unassigned",
+      },
+      {
+        headerName: "Elapsed",
+        width: 100,
+        valueGetter: (params) => {
+          const task = params.data;
+          if (!task) return "";
+          const start = task.acceptedAt ?? task.createdAt;
+          const end = task.finishedAt;
+          const isActive =
+            !end &&
+            (task.status === "in_progress" ||
+              task.status === "pending" ||
+              task.status === "offered");
+          return isActive ? formatElapsed(start) : end ? formatElapsed(start, end) : "—";
+        },
+      },
+      {
+        field: "dependsOn",
+        headerName: "Deps",
+        width: 90,
+        cellRenderer: (params: { value: string[] | undefined; data: AgentTask | undefined }) => {
+          const deps = params.value;
+          if (!deps || deps.length === 0) return null;
+          return (
+            <div className="flex items-center gap-1 text-muted-foreground">
+              <GitBranch className="h-3 w-3 shrink-0" />
+              <span className="text-[10px] font-mono">{deps.length}</span>
+            </div>
+          );
+        },
+        sortable: false,
+      },
+      {
+        field: "tags",
+        headerName: "Tags",
+        width: 200,
+        cellRenderer: (params: { value: string[] }) => (
+          <div className="flex gap-1 items-center">
+            {params.value?.slice(0, 2).map((tag) => (
+              <Badge
+                key={tag}
+                variant="outline"
+                className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase shrink-0"
+              >
+                {tag}
+              </Badge>
+            ))}
+            {(params.value?.length ?? 0) > 2 && (
+              <span className="text-[9px] text-muted-foreground font-medium shrink-0">
+                +{(params.value?.length ?? 0) - 2}
+              </span>
+            )}
+          </div>
+        ),
+        sortable: false,
+      },
+      {
+        field: "createdAt",
+        headerName: "Created",
+        width: 150,
+        valueFormatter: (params) => (params.value ? formatSmartTime(params.value) : ""),
+      },
+    ],
+    [agentMap],
+  );
+
+  const onRowClicked = useCallback(
+    (event: RowClickedEvent<AgentTask>) => {
+      if (event.data) navigate(`/tasks/${event.data.id}`);
+    },
+    [navigate],
+  );
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0 gap-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold">Tasks</h1>
+        <Button
+          onClick={() => setDialogOpen(true)}
+          size="sm"
+          className="gap-1 bg-primary hover:bg-primary/90"
+        >
+          <Plus className="h-3.5 w-3.5" /> Create Task
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search tasks..."
+            value={searchParam}
+            onChange={(e) => setParam("search", e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <Select value={statusFilter} onValueChange={(v) => setParam("status", v)}>
+          <SelectTrigger className="w-[160px]">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Statuses</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+            <SelectItem value="in_progress">In Progress</SelectItem>
+            <SelectItem value="completed">Completed</SelectItem>
+            <SelectItem value="failed">Failed</SelectItem>
+            <SelectItem value="cancelled">Cancelled</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={agentFilter} onValueChange={(v) => setParam("agent", v)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Agent" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Agents</SelectItem>
+            {agents?.map((a) => (
+              <SelectItem key={a.id} value={a.id}>
+                {a.name}
+                {a.isLead ? " (Lead)" : ""}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={scheduleFilter} onValueChange={(v) => setParam("schedule", v)}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Schedule" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Schedules</SelectItem>
+            {schedules?.map((s) => (
+              <SelectItem key={s.id} value={s.id}>
+                <div className="flex items-center gap-1.5">
+                  <Clock className="h-3 w-3 text-muted-foreground shrink-0" />
+                  <span className="truncate">{s.name}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
+          <Switch
+            size="sm"
+            checked={includeHeartbeat}
+            onCheckedChange={(checked) => setParam("heartbeat", checked ? "true" : "")}
+          />
+          Heartbeat
+        </label>
+        {hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ml-auto text-xs text-muted-foreground"
+            onClick={clearFilters}
+          >
+            <X className="h-3 w-3 mr-1" />
+            Clear filters
+          </Button>
+        )}
+      </div>
+
+      <DataGrid
+        rowData={tasksData?.tasks ?? []}
+        columnDefs={columnDefs}
+        onRowClicked={onRowClicked}
+        loading={isLoading}
+        emptyMessage="No tasks found"
+        pagination={false}
+      />
+
+      {/* Server-side pagination controls */}
+      <div className="flex items-center justify-between shrink-0 text-sm text-muted-foreground">
+        <span>
+          {total > 0
+            ? `${page * PAGE_SIZE + 1}–${Math.min((page + 1) * PAGE_SIZE, total)} of ${total}`
+            : "0 tasks"}
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            disabled={page === 0}
+            onClick={() => setParam("page", String(page - 1), false)}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <span className="px-2 text-xs">
+            Page {page + 1} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            disabled={page >= totalPages - 1}
+            onClick={() => setParam("page", String(page + 1), false)}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <CreateTaskDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onSubmit={handleCreateSubmit}
+      />
+    </div>
+  );
+}