Function TasksTab

client/src/components/TasksTab.tsx:36–227

({
  tasks,
  listTasks,
  clearTasks,
  cancelTask,
  selectedTask,
  setSelectedTask,
  error,
  nextCursor,
}: {
  tasks: Task[];
  listTasks: () => void;
  clearTasks: () => void;
  cancelTask: (taskId: string) => Promise<void>;
  selectedTask: Task | null;
  setSelectedTask: (task: Task | null) => void;
  error: string | null;
  nextCursor?: string;
})

};

const TasksTab = ({
  tasks,
  listTasks,
  clearTasks,
  cancelTask,
  selectedTask,
  setSelectedTask,
  error,
  nextCursor,
}: {
  tasks: Task[];
  listTasks: () => void;
  clearTasks: () => void;
  cancelTask: (taskId: string) => Promise<void>;
  selectedTask: Task | null;
  setSelectedTask: (task: Task | null) => void;
  error: string | null;
  nextCursor?: string;
}) => {
  const [isCancelling, setIsCancelling] = useState<string | null>(null);

  const displayedTask = selectedTask
    ? tasks.find((t) => t.taskId === selectedTask.taskId) || selectedTask
    : null;

  const handleCancel = async (taskId: string) => {
    setIsCancelling(taskId);
    try {
      await cancelTask(taskId);
    } finally {
      setIsCancelling(null);
    }
  };

  return (
    <TabsContent value="tasks" className="flex-1 overflow-hidden p-0 m-0">
      <div className="flex h-full overflow-hidden p-4 gap-4">
        <div className="w-1/3">
          <ListPane
            title="Tasks"
            items={tasks}
            setSelectedItem={setSelectedTask}
            listItems={listTasks}
            clearItems={clearTasks}
            buttonText={nextCursor ? "List More Tasks" : "List Tasks"}
            isButtonDisabled={!nextCursor && tasks.length > 0}
            renderItem={(task) => (
              <div className="flex items-center gap-2 overflow-hidden w-full">
                <TaskStatusIcon status={task.status} />
                <div className="flex flex-col overflow-hidden">
                  <span className="truncate font-medium">{task.taskId}</span>
                  <span className="truncate text-xs text-muted-foreground">
                    {task.status} -{" "}
                    {new Date(task.lastUpdatedAt).toLocaleString()}
                  </span>
                </div>
              </div>
            )}