fusion/packages/dashboard/app/components/settings/sections/ProjectMcpSection.tsx

import type { Dispatch, SetStateAction } from "react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import type { GlobalSettings, PluginMcpServerContribution, Settings } from "@fusion/core";
import type { ToastType } from "../../../hooks/useToast";
import { McpServersCard } from "./McpServersCard";

export interface ProjectMcpSectionProps {
  form: Settings;
  setForm: Dispatch<SetStateAction<Settings>>;
  globalSettings?: Pick<GlobalSettings, "mcpServers"> | null;
  projectId?: string;
  /** Project-scoped plugin entries; global MCP settings never receive these. */
  pluginServers?: Array<{ pluginId: string; server: PluginMcpServerContribution }>;
  addToast: (message: string, type?: ToastType) => void;
}

export function ProjectMcpSection({ form, setForm, globalSettings, projectId, pluginServers, addToast }: ProjectMcpSectionProps) {
  const { t } = useTranslation("app");
  const [loadedPluginServers, setLoadedPluginServers] = useState<Array<{ pluginId: string; server: PluginMcpServerContribution }>>([]);
  const [builtInAvailable, setBuiltInAvailable] = useState(false);

  useEffect(() => {
    const controller = new AbortController();
    const query = projectId ? `?projectId=${encodeURIComponent(projectId)}` : "";
    /*
     * FNXC:PluginMcpServers 2026-07-22-12:00:
     * FN-8491 obtains settings-card contributions only from the active-project
     * endpoint, which owns project_plugin_states filtering. Rendering never
     * writes declarations and global MCP settings never request this endpoint.
     */
    void fetch(`/api/mcp/plugin-servers${query}`, { signal: controller.signal })
      .then(async (response) => {
        if (!response.ok) throw new Error("Failed to load project plugin MCP servers");
        return response.json() as Promise<{ servers?: Array<{ pluginId: string; server: PluginMcpServerContribution }>; fusionMemoryMcpAvailable?: boolean }>;
      })
      .then((payload) => {
        if (!controller.signal.aborted) {
          if (!pluginServers) setLoadedPluginServers(Array.isArray(payload.servers) ? payload.servers : []);
          setBuiltInAvailable(payload.fusionMemoryMcpAvailable === true);
        }
      })
      .catch(() => { if (!controller.signal.aborted) { if (!pluginServers) setLoadedPluginServers([]); setBuiltInAvailable(false); } });
    return () => controller.abort();
  }, [pluginServers, projectId]);

  return (
    <>
      <h4 className="settings-section-heading">{t("settings.nav.mcp", "MCP Servers")}</h4>
      <McpServersCard scope="project" form={form} setForm={setForm} globalSettings={globalSettings} projectId={projectId} pluginServers={pluginServers ?? loadedPluginServers} builtInAvailable={builtInAvailable} addToast={addToast} />
    </>
  );
}

export default ProjectMcpSection;