remove useProject, useProjectPermissions, useProjectActions, useProjectData in favour useProjectPermissionsQuery and useProjectQuery (#2753)

* remove enrichNodes

* remove enrichNodes

* remove enrichNodes

* fix

* rm

* rm

* upd

* upd

* upd

* upd

* upd

* upd

* keys

* upd

* format

* format

* rm

* upd

* upd

* rm

* rm

* Apply suggestions from code review

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

* Add changeset for project context removal

Co-authored-by: Dimitri POSTOLOV <dimaMachina@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Dimitri POSTOLOV <dimaMachina@users.noreply.github.com>

Author: dimaMachina

.changeset/remove-project-context.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+Remove `useProject`, `useProjectPermissions`, `useProjectActions`, `useProjectData` in favor of `useProjectPermissionsQuery` and `useProjectQuery` React Query hooks

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/page.client.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
 import {
   Background,
   ConnectionMode,
@@ -40,7 +41,6 @@ import { useAgentShortcuts } from '@/components/agent/use-agent-shortcuts';
 import { useAnimateGraph } from '@/components/agent/use-animate-graph';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { useCopilotContext } from '@/contexts/copilot';
-import { useProjectPermissions } from '@/contexts/project';
 import { commandManager } from '@/features/agent/commands/command-manager';
 import { AddNodeCommand, AddPreparedEdgeCommand } from '@/features/agent/commands/commands';
 import {
@@ -52,13 +52,14 @@ import {
   validateSerializedData,
 } from '@/features/agent/domain';
 import { useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
-import { useProjectActions } from '@/features/project/state/use-project-store';
 import { useAgentErrors } from '@/hooks/use-agent-errors';
 import { useIsMounted } from '@/hooks/use-is-mounted';
 import { useSidePane } from '@/hooks/use-side-pane';
 import { EdgeArrow, SelectedEdgeArrow } from '@/icons';
 import { getFullProjectAction } from '@/lib/actions/project-full';
+import { projectQueryKeys } from '@/lib/query/keys/projects';
 import { useMcpToolsQuery } from '@/lib/query/mcp-tools';
+import { useProjectPermissionsQuery } from '@/lib/query/projects';
 import { saveAgent } from '@/lib/services/save-agent';
 import { getErrorSummaryMessage, parseAgentValidationErrors } from '@/lib/utils/agent-error-parser';
 import { generateId } from '@/lib/utils/id-utils';
@@ -108,7 +109,10 @@ export const Agent: FC<AgentProps> = ({ agent }) => {
     isCopilotConfigured,
     isStreaming: isCopilotStreaming,
   } = useCopilotContext();
-  const { canEdit } = useProjectPermissions();
+  const {
+    data: { canEdit },
+  } = useProjectPermissionsQuery();
+  const queryClient = useQueryClient();
   const router = useRouter();
   const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
   const { refetch: refetchMcpTools } = useMcpToolsQuery({ skipDiscovery: true });
@@ -140,7 +144,6 @@ export const Agent: FC<AgentProps> = ({ agent }) => {
     markUnsaved,
     reset,
   } = useAgentActions();
-  const { setProject: setProjectStore, reset: resetProjectStore } = useProjectActions();
   const { errors, showErrors, setErrors, clearErrors, setShowErrors } = useAgentErrors();
 
   const onAddInitialNode = () => {
@@ -206,8 +209,6 @@ export const Agent: FC<AgentProps> = ({ agent }) => {
     return () => {
       // we need to reset the agent store when the component unmounts otherwise the agent store will persist the changes from the previous agent
       reset();
-      // Also reset the project store to prevent stale data
-      resetProjectStore();
     };
   }, []);
 
@@ -282,10 +283,9 @@ export const Agent: FC<AgentProps> = ({ agent }) => {
       // Update the store with all refreshed data
       setInitial(nodesWithSelection, edgesWithSelection, metadata);
 
-      // Update project data in store so components using useProjectData get fresh data
+      // Update project data in React Query cache so components using useProjectQuery get fresh data
       const convertedProject = convertFullProjectToProject(fullProject, tenantId);
-
-      setProjectStore(convertedProject);
+      queryClient.setQueryData(projectQueryKeys.detail(tenantId, projectId), convertedProject);
     }
 
     try {

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/new/bearer/page.tsx

@@ -7,12 +7,12 @@ import { toast } from 'sonner';
 import { CredentialForm } from '@/components/credentials/views/credential-form';
 import { CredentialFormInkeepCloud } from '@/components/credentials/views/credential-form-inkeep-cloud';
 import type { CredentialFormOutput } from '@/components/credentials/views/credential-form-validation';
-import { useProjectPermissions } from '@/contexts/project';
 import { useRuntimeConfig } from '@/contexts/runtime-config';
 import { useAuthSession } from '@/hooks/use-auth';
 import { createCredentialInStore } from '@/lib/api/credentialStores';
 import { updateExternalAgent } from '@/lib/api/external-agents';
 import { updateMCPTool } from '@/lib/api/tools';
+import { useProjectPermissionsQuery } from '@/lib/query/projects';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { generateId } from '@/lib/utils/id-utils';
 
@@ -23,7 +23,9 @@ export default function NewCredentialForm({
   const { PUBLIC_IS_INKEEP_CLOUD_DEPLOYMENT } = useRuntimeConfig();
   const { tenantId, projectId } = use(params);
   const { user } = useAuthSession();
-  const { canEdit } = useProjectPermissions();
+  const {
+    data: { canEdit },
+  } = useProjectPermissionsQuery();
 
   // Redirect if user doesn't have edit permission
   useEffect(() => {

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/new/providers/[providerId]/page.tsx

@@ -29,7 +29,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useAuthClient } from '@/contexts/auth-client';
-import { useProjectPermissions } from '@/contexts/project';
 import { useAuthSession } from '@/hooks/use-auth';
 import { useNangoConnect } from '@/hooks/use-nango-connect';
 import { useNangoProviders } from '@/hooks/use-nango-providers';
@@ -42,6 +41,7 @@ import {
   updateNangoIntegrationCredentials,
 } from '@/lib/mcp-tools/nango';
 import { NangoError } from '@/lib/mcp-tools/nango-types';
+import { useProjectPermissionsQuery } from '@/lib/query/projects';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { generateId } from '@/lib/utils/id-utils';
 
@@ -51,7 +51,9 @@ function ProviderSetupPage({
   params,
 }: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/providers/[providerId]'>) {
   const router = useRouter();
-  const { canEdit } = useProjectPermissions();
+  const {
+    data: { canEdit },
+  } = useProjectPermissionsQuery();
   const { providers, loading: providersLoading } = useNangoProviders();
   const [loading, setLoading] = useState(false);
   const [hasAttempted, setHasAttempted] = useState(false);

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/layout.tsx

@@ -1,6 +1,7 @@
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 import FullPageError from '@/components/errors/full-page-error';
-import { ProjectProvider } from '@/contexts/project';
-import { fetchProject, fetchProjectPermissions } from '@/lib/api/projects';
+import { fetchProjectPermissions } from '@/lib/api/projects';
+import { projectQueryKeys } from '@/lib/query/keys/projects';
 import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
@@ -12,14 +13,13 @@ export default async function ProjectLayout({
   const { tenantId, projectId } = await params;
 
   try {
-    const [project, permissions] = await Promise.all([
-      fetchProject(tenantId, projectId),
-      fetchProjectPermissions(tenantId, projectId),
-    ]);
+    const queryClient = new QueryClient();
+    const permissions = await fetchProjectPermissions(tenantId, projectId);
+    queryClient.setQueryData(projectQueryKeys.permissions(tenantId, projectId), permissions);
 
-    return (
-      <ProjectProvider value={{ project: project.data, permissions }}>{children}</ProjectProvider>
-    );
+    // Hydrates React Query before any child client component renders.
+    // That makes useProjectPermissionsQuery() in projects.ts start with real data
+    return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>;
   } catch (error) {
     return (
       <FullPageError

agents-manage-ui/src/components/agent/nodes/__tests__/nodes.browser.test.tsx

@@ -1,4 +1,4 @@
-import { act, render } from '@testing-library/react';
+import { act } from '@testing-library/react';
 import { type NodeProps, ReactFlowProvider } from '@xyflow/react';
 import { NodeType } from '@/components/agent/configuration/node-types';
 import { ExternalAgentNode } from '@/components/agent/nodes/external-agent-node';
@@ -7,13 +7,23 @@ import { MCPNode } from '@/components/agent/nodes/mcp-node';
 import { PlaceholderNode } from '@/components/agent/nodes/placeholder-node';
 import { SubAgentNode } from '@/components/agent/nodes/sub-agent-node';
 import { TeamAgentNode } from '@/components/agent/nodes/team-agent-node';
-import { ProjectProvider } from '@/contexts/project';
+import { createTestQueryClient, renderWithClient } from '@/lib/query/__tests__/test-utils';
+import { mcpToolQueryKeys } from '@/lib/query/keys/mcp-tools';
+import { projectQueryKeys } from '@/lib/query/keys/projects';
 import '@/lib/utils/test-utils/styles.css';
 
+const TENANT_ID = 'tenant-1';
+const PROJECT_ID = 'project-1';
+const TOOL_ID = 'tool-1';
+const DATA = {
+  name: 'name '.repeat(10),
+  description: 'description '.repeat(10),
+};
+
 vi.mock('next/navigation', () => {
   return {
     useParams() {
-      return {};
+      return { tenantId: TENANT_ID, projectId: PROJECT_ID };
     },
   };
 });
@@ -24,14 +34,13 @@ vi.mock('@/contexts/runtime-config', () => {
     },
   };
 });
-vi.mock('@/lib/query/mcp-tools', () => {
+vi.mock('@/lib/query/mcp-tools', async () => {
+  const actual = await vi.importActual('@/lib/query/mcp-tools');
   return {
+    ...actual,
     useMcpToolsQuery() {
       return { data: [] };
     },
-    useMcpToolStatusQuery() {
-      return {};
-    },
   };
 });
 vi.mock('@/lib/query/data-components', () => {
@@ -51,10 +60,6 @@ vi.mock('@/lib/query/artifact-components', () => {
 
 function Nodes() {
   const divider = <hr style={{ borderColor: 'green' }} />;
-  const data = {
-    name: 'name '.repeat(10),
-    description: 'description '.repeat(10),
-  };
 
   const baseProps: NodeProps = {
     type: 'foo',
@@ -73,38 +78,34 @@ function Nodes() {
 
   return (
     <ReactFlowProvider>
-      <ExternalAgentNode {...baseProps} data={{ ...data, id: 'foo', baseUrl: 'foo' }} />
+      <ExternalAgentNode {...baseProps} data={{ ...DATA, id: 'foo', baseUrl: 'foo' }} />
       {divider}
-      <FunctionToolNode {...baseProps} data={{ ...data, functionToolId: 'foo' }} />
+      <FunctionToolNode {...baseProps} data={{ ...DATA, functionToolId: 'foo' }} />
       {divider}
-      <MCPNode
-        {...baseProps}
-        data={{ ...data, imageUrl: 'https://pilot.inkeep.com/icon.svg', toolId: 'foo' }}
-      />
+      <MCPNode {...baseProps} data={{ ...DATA, toolId: TOOL_ID }} />
       {divider}
-      <PlaceholderNode {...baseProps} data={{ ...data, type: NodeType.MCPPlaceholder }} />
+      <PlaceholderNode {...baseProps} data={{ ...DATA, type: NodeType.MCPPlaceholder }} />
       {divider}
-      <ProjectProvider
-        value={{
-          // @ts-expect-error
-          project: {
-            models: {
-              base: { model: `openai/${data.name}` },
-            },
-          },
-        }}
-      >
-        <SubAgentNode {...baseProps} data={{ ...data, id: 'foo', isDefault: true, skills: [] }} />
-      </ProjectProvider>
+      <SubAgentNode {...baseProps} data={{ ...DATA, id: 'foo', isDefault: true, skills: [] }} />
       {divider}
-      <TeamAgentNode {...baseProps} data={{ ...data, id: 'foo' }} />
+      <TeamAgentNode {...baseProps} data={{ ...DATA, id: 'foo' }} />
     </ReactFlowProvider>
   );
 }
 
 describe('Nodes', () => {
   test('should handle long names with character limit', async () => {
-    const { container } = render(<Nodes />);
+    const queryClient = createTestQueryClient();
+    queryClient.setQueryData(projectQueryKeys.detail(TENANT_ID, PROJECT_ID), {
+      models: {
+        base: { model: `openai/${DATA.name}` },
+      },
+    });
+    queryClient.setQueryData(mcpToolQueryKeys.status(TENANT_ID, PROJECT_ID, TOOL_ID), {
+      name: DATA.name,
+    });
+
+    const { container } = renderWithClient(<Nodes />, queryClient);
     await act(async () => {
       await expect(container).toMatchScreenshot();
     });

agents-manage-ui/src/components/agent/nodes/sub-agent-node.tsx

@@ -6,12 +6,12 @@ import { GoogleIcon } from '@/components/icons/google';
 import { OpenAIIcon } from '@/components/icons/openai';
 import { Badge } from '@/components/ui/badge';
 import { STATIC_LABELS } from '@/constants/theme';
-import { useProject } from '@/contexts/project';
 import { NODE_WIDTH } from '@/features/agent/domain/deserialize';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useAgentErrors } from '@/hooks/use-agent-errors';
 import { useArtifactComponentsQuery } from '@/lib/query/artifact-components';
 import { useDataComponentsQuery } from '@/lib/query/data-components';
+import { useProjectQuery } from '@/lib/query/projects';
 import { cn, createLookup } from '@/lib/utils';
 import type { AgentNodeData } from '../configuration/node-types';
 import { agentNodeSourceHandleId, agentNodeTargetHandleId } from '../configuration/node-types';
@@ -50,9 +50,8 @@ export function SubAgentNode({ data, selected, id }: NodeProps & { data: AgentNo
   const { data: artifactComponents } = useArtifactComponentsQuery();
 
   const agentModel = useAgentStore((state) => state.metadata.models);
-  const { project } = useProject();
-  const projectModel = project.models;
-  const modelName = (data.models ?? agentModel ?? projectModel).base?.model ?? '';
+  const { data: project } = useProjectQuery();
+  const modelName = (data.models ?? agentModel ?? project?.models)?.base?.model ?? '';
 
   const { data: dataComponents } = useDataComponentsQuery();
   const dataComponentsById = createLookup(dataComponents);

agents-manage-ui/src/components/agent/sidepane/edges/edge-editor.tsx

@@ -9,8 +9,8 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Separator } from '@/components/ui/separator';
-import { useProjectPermissions } from '@/contexts/project';
 import { useAgentActions } from '@/features/agent/state/use-agent-store';
+import { useProjectPermissionsQuery } from '@/lib/query/projects';
 import { getCycleErrorMessage, wouldCreateCycle } from '@/lib/utils/cycle-detection';
 import type { A2AEdgeData } from '../../configuration/edge-types';
 
@@ -125,7 +125,9 @@ interface EdgeEditorProps {
 function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
   const { updateEdgeData, setEdges, deleteElements, getEdges } = useReactFlow();
 
-  const { canEdit } = useProjectPermissions();
+  const {
+    data: { canEdit },
+  } = useProjectPermissionsQuery();
 
   const deleteEdge = useCallback(() => {
     deleteElements({ edges: [{ id: selectedEdge.id }] });

agents-manage-ui/src/components/agent/sidepane/metadata/metadata-editor.tsx

@@ -19,11 +19,10 @@ import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useProjectPermissions } from '@/contexts/project';
 import { useRuntimeConfig } from '@/contexts/runtime-config';
 import { agentStore, useAgentActions, useAgentStore } from '@/features/agent/state/use-agent-store';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
-import { useProjectData } from '@/hooks/use-project-data';
+import { useProjectPermissionsQuery, useProjectQuery } from '@/lib/query/projects';
 import {
   azureModelProviderOptionsTemplate,
   azureModelSummarizerProviderOptionsTemplate,
@@ -69,10 +68,12 @@ export function MetadataEditor() {
     metadata;
   const { PUBLIC_INKEEP_AGENTS_API_URL } = useRuntimeConfig();
   const baseUrl = PUBLIC_INKEEP_AGENTS_API_URL;
-  const { canUse } = useProjectPermissions();
+  const {
+    data: { canUse },
+  } = useProjectPermissionsQuery();
 
   // Fetch project data for inheritance indicators
-  const { project } = useProjectData();
+  const { data: project } = useProjectQuery();
 
   const { markUnsaved, setMetadata } = useAgentActions();
 

agents-manage-ui/src/components/agent/sidepane/nodes/external-agent-node-editor.tsx

@@ -6,11 +6,11 @@ import { StandaloneJsonEditor } from '@/components/editors/standalone-json-edito
 import { Button } from '@/components/ui/button';
 import { ExternalLink } from '@/components/ui/external-link';
 import { Separator } from '@/components/ui/separator';
-import { useProjectPermissions } from '@/contexts/project';
 import { useAgentActions } from '@/features/agent/state/use-agent-store';
 import type { ErrorHelpers } from '@/hooks/use-agent-errors';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import { useNodeEditor } from '@/hooks/use-node-editor';
+import { useProjectPermissionsQuery } from '@/lib/query/projects';
 import { externalAgentHeadersTemplate } from '@/lib/templates';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
 import { InputField } from '../form-components/input';
@@ -28,7 +28,9 @@ export function ExternalAgentNodeEditor({
 }: ExternalAgentNodeEditorProps) {
   const { updateNodeData } = useReactFlow();
   const { markUnsaved } = useAgentActions();
-  const { canEdit } = useProjectPermissions();
+  const {
+    data: { canEdit },
+  } = useProjectPermissionsQuery();
   const { handleInputChange, getFieldError, setFieldRef, updateField, deleteNode } = useNodeEditor({
     selectedNodeId: selectedNode.id,
     errorHelpers,