inspector/core/react/useManagedRequestorTasks.ts

import { useState, useEffect, useCallback } from "react";
import type { InspectorClientProtocol } from "../mcp/inspectorClientProtocol.js";
import type {
  ManagedRequestorTasksState,
  ManagedRequestorTasksStateEventMap,
} from "../mcp/state/managedRequestorTasksState.js";
import type { Task } from "@modelcontextprotocol/client";
import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";

export interface UseManagedRequestorTasksResult {
  tasks: Task[];
  refresh: () => Promise<Task[]>;
  clearCompleted: () => void;
}

/**
 * React hook that subscribes to ManagedRequestorTasksState and returns
 * requestor tasks + refresh.
 */
export function useManagedRequestorTasks(
  client: InspectorClientProtocol | null,
  managedRequestorTasksState: ManagedRequestorTasksState | null,
): UseManagedRequestorTasksResult {
  const [tasks, setTasks] = useState<Task[]>(
    managedRequestorTasksState?.getTasks() ?? [],
  );

  useEffect(() => {
    if (!managedRequestorTasksState) {
      setTasks([]);
      return;
    }
    setTasks(managedRequestorTasksState.getTasks());
    const onTasksChange = (
      event: TypedEventGeneric<
        ManagedRequestorTasksStateEventMap,
        "tasksChange"
      >,
    ) => {
      setTasks(event.detail);
    };
    managedRequestorTasksState.addEventListener("tasksChange", onTasksChange);
    return () => {
      managedRequestorTasksState.removeEventListener(
        "tasksChange",
        onTasksChange,
      );
    };
  }, [managedRequestorTasksState]);

  const refresh = useCallback(async (): Promise<Task[]> => {
    if (!managedRequestorTasksState || !client) return [];
    const next = await managedRequestorTasksState.refresh();
    setTasks(next);
    return next;
  }, [client, managedRequestorTasksState]);

  const clearCompleted = useCallback((): void => {
    managedRequestorTasksState?.clearCompleted();
  }, [managedRequestorTasksState]);

  return { tasks, refresh, clearCompleted };
}