diff --git a/graph/client/src/app/console-project-details/project-details.app.tsx b/graph/client/src/app/console-project-details/project-details.app.tsx
index 08eceb1a9e..c5c6f24a12 100644
--- a/graph/client/src/app/console-project-details/project-details.app.tsx
+++ b/graph/client/src/app/console-project-details/project-details.app.tsx
@@ -3,7 +3,7 @@ import {
   ErrorToastUI,
   ExpandedTargetsProvider,
   getExternalApiService,
-} from '@nx/graph/shared';
+} from '@nx/graph/legacy/shared';
 import { useSelector } from '@xstate/react';
 import { useCallback } from 'react';
 import { Interpreter } from 'xstate';
diff --git a/graph/client/src/app/external-api-impl.ts b/graph/client/src/app/external-api-impl.ts
index ba2b6d08cf..9fec5d79b1 100644
--- a/graph/client/src/app/external-api-impl.ts
+++ b/graph/client/src/app/external-api-impl.ts
@@ -1,4 +1,4 @@
-import { ExternalApi, getExternalApiService } from '@nx/graph/shared';
+import { ExternalApi, getExternalApiService } from '@nx/graph/legacy/shared';
 import { getRouter } from './get-router';
 import { getProjectGraphService } from './machines/get-services';
 import { getGraphService } from './machines/graph.service';
diff --git a/graph/client/src/app/feature-projects/machines/composite-graph.state.ts b/graph/client/src/app/feature-projects/machines/composite-graph.state.ts
index e73bfab9a6..2267d9c568 100644
--- a/graph/client/src/app/feature-projects/machines/composite-graph.state.ts
+++ b/graph/client/src/app/feature-projects/machines/composite-graph.state.ts
@@ -16,6 +16,7 @@ export const compositeGraphStateConfig: ProjectGraphStateNodeConfig = {
         dependencies: ctx.dependencies,
         fileMap: ctx.fileMap,
         affectedProjects: ctx.affectedProjects,
+        touchedProjects: [],
         workspaceLayout: ctx.workspaceLayout,
         groupByFolder: ctx.groupByFolder,
         selectedProjects: ctx.selectedProjects,
@@ -36,6 +37,7 @@ export const compositeGraphStateConfig: ProjectGraphStateNodeConfig = {
         dependencies: ctx.dependencies,
         fileMap: ctx.fileMap,
         affectedProjects: ctx.affectedProjects,
+        touchedProjects: [],
         workspaceLayout: ctx.workspaceLayout,
         groupByFolder: ctx.groupByFolder,
         selectedProjects: ctx.selectedProjects,
diff --git a/graph/client/src/app/feature-projects/machines/project-graph.machine.ts b/graph/client/src/app/feature-projects/machines/project-graph.machine.ts
index c66d9e1458..6a4c45e960 100644
--- a/graph/client/src/app/feature-projects/machines/project-graph.machine.ts
+++ b/graph/client/src/app/feature-projects/machines/project-graph.machine.ts
@@ -73,6 +73,7 @@ export const projectGraphMachine = createMachine<
               dependencies: ctx.dependencies,
               fileMap: ctx.fileMap,
               affectedProjects: ctx.affectedProjects,
+              touchedProjects: [],
               workspaceLayout: ctx.workspaceLayout,
               groupByFolder: ctx.groupByFolder,
               collapseEdges: ctx.collapseEdges,
@@ -150,6 +151,7 @@ export const projectGraphMachine = createMachine<
               projects: ctx.projects,
               dependencies: ctx.dependencies,
               affectedProjects: ctx.affectedProjects,
+              touchedProjects: [],
               fileMap: ctx.fileMap,
               workspaceLayout: ctx.workspaceLayout,
               groupByFolder: ctx.groupByFolder,
@@ -172,6 +174,7 @@ export const projectGraphMachine = createMachine<
               projects: ctx.projects,
               dependencies: ctx.dependencies,
               affectedProjects: ctx.affectedProjects,
+              touchedProjects: [],
               fileMap: ctx.fileMap,
               workspaceLayout: ctx.workspaceLayout,
               groupByFolder: ctx.groupByFolder,
diff --git a/graph/client/src/app/feature-projects/panels/text-filter-panel.tsx b/graph/client/src/app/feature-projects/panels/text-filter-panel.tsx
index 489af42c61..8b141c40af 100644
--- a/graph/client/src/app/feature-projects/panels/text-filter-panel.tsx
+++ b/graph/client/src/app/feature-projects/panels/text-filter-panel.tsx
@@ -1,4 +1,4 @@
-import { DebouncedTextInput } from '@nx/graph/ui-components';
+import { DebouncedTextInput } from '@nx/graph/legacy/components';
 
 export interface TextFilterPanelProps {
   textFilter: string;
diff --git a/graph/client/src/app/feature-projects/project-list.tsx b/graph/client/src/app/feature-projects/project-list.tsx
index 2ba6ef72d8..887379726d 100644
--- a/graph/client/src/app/feature-projects/project-list.tsx
+++ b/graph/client/src/app/feature-projects/project-list.tsx
@@ -25,7 +25,7 @@ import { ExperimentalFeature } from '../ui-components/experimental-feature';
 import { TracingAlgorithmType } from './machines/interfaces';
 import { getProjectGraphService } from '../machines/get-services';
 import { Link, useNavigate, useNavigation } from 'react-router-dom';
-import { useRouteConstructor } from '@nx/graph/shared';
+import { useRouteConstructor } from '@nx/graph/legacy/shared';
 import { CompositeNode } from '../interfaces';
 import { useMemo } from 'react';
 
diff --git a/graph/client/src/app/feature-projects/projects-sidebar.tsx b/graph/client/src/app/feature-projects/projects-sidebar.tsx
index 95380ecefd..9707e64dbd 100644
--- a/graph/client/src/app/feature-projects/projects-sidebar.tsx
+++ b/graph/client/src/app/feature-projects/projects-sidebar.tsx
@@ -33,7 +33,7 @@ import {
   useEnvironmentConfig,
   usePoll,
   useRouteConstructor,
-} from '@nx/graph/shared';
+} from '@nx/graph/legacy/shared';
 import {
   useNavigate,
   useParams,
diff --git a/graph/client/src/app/feature-tasks/task-list.tsx b/graph/client/src/app/feature-tasks/task-list.tsx
index 1bd8935765..28a750e8c1 100644
--- a/graph/client/src/app/feature-tasks/task-list.tsx
+++ b/graph/client/src/app/feature-tasks/task-list.tsx
@@ -10,7 +10,7 @@ import {
 import { WorkspaceLayout } from '../interfaces';
 import { ExclamationCircleIcon, EyeIcon } from '@heroicons/react/24/outline';
 import { ReactNode } from 'react';
-import { Tooltip } from '@nx/graph/ui-tooltips';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { TaskGraphErrorTooltip } from './task-graph-error-tooltip';
 
 interface SidebarProject {
diff --git a/graph/client/src/app/feature-tasks/tasks-sidebar.tsx b/graph/client/src/app/feature-tasks/tasks-sidebar.tsx
index ef490a1b91..a845bf2ba2 100644
--- a/graph/client/src/app/feature-tasks/tasks-sidebar.tsx
+++ b/graph/client/src/app/feature-tasks/tasks-sidebar.tsx
@@ -15,9 +15,8 @@ import type {
 import { useEffect, useMemo } from 'react';
 import { getGraphService } from '../machines/graph.service';
 import { CheckboxPanel } from '../ui-components/checkbox-panel';
-
-import { useRouteConstructor } from '@nx/graph/shared';
-import { Dropdown } from '@nx/graph/ui-components';
+import { Dropdown } from '@nx/graph/legacy/components';
+import { useRouteConstructor } from '@nx/graph/legacy/shared';
 import { useCurrentPath } from '../hooks/use-current-path';
 import { ShowHideAll } from '../ui-components/show-hide-all';
 import { createTaskName } from '../util';
diff --git a/graph/client/src/app/get-router.ts b/graph/client/src/app/get-router.ts
index 974af4bc02..36cb6c6a0f 100644
--- a/graph/client/src/app/get-router.ts
+++ b/graph/client/src/app/get-router.ts
@@ -1,6 +1,6 @@
 import { createBrowserRouter, createHashRouter } from 'react-router-dom';
 import { getRoutesForEnvironment } from './routes';
-import { getEnvironmentConfig } from '@nx/graph/shared';
+import { getEnvironmentConfig } from '@nx/graph/legacy/shared';
 
 let router;
 
diff --git a/graph/client/src/app/hooks/use-current-path.ts b/graph/client/src/app/hooks/use-current-path.ts
index f8bb35810c..f19a96643b 100644
--- a/graph/client/src/app/hooks/use-current-path.ts
+++ b/graph/client/src/app/hooks/use-current-path.ts
@@ -1,7 +1,7 @@
 import { matchRoutes, useLocation } from 'react-router-dom';
 import { getRoutesForEnvironment } from '../routes';
 import { useState } from 'react';
-import { getEnvironmentConfig } from '@nx/graph/shared';
+import { getEnvironmentConfig } from '@nx/graph/legacy/shared';
 
 export const useCurrentPath = () => {
   const [lastLocation, setLastLocation] = useState<string>();
diff --git a/graph/client/src/app/machines/get-services.ts b/graph/client/src/app/machines/get-services.ts
index f608a5dabd..cb5ed763fc 100644
--- a/graph/client/src/app/machines/get-services.ts
+++ b/graph/client/src/app/machines/get-services.ts
@@ -1,7 +1,7 @@
 import { interpret, InterpreterStatus } from 'xstate';
 import { projectGraphMachine } from '../feature-projects/machines/project-graph.machine';
 import { getGraphService } from './graph.service';
-import { GraphTooltipService } from '@nx/graph/ui-graph';
+import { GraphTooltipService } from '@nx/graph/legacy/graph';
 
 let projectGraphService = interpret(projectGraphMachine, {
   devTools: !!window.useXstateInspect,
diff --git a/graph/client/src/app/machines/graph.service.ts b/graph/client/src/app/machines/graph.service.ts
index 4353627478..11521c879e 100644
--- a/graph/client/src/app/machines/graph.service.ts
+++ b/graph/client/src/app/machines/graph.service.ts
@@ -1,8 +1,8 @@
-import { GraphService } from '@nx/graph/ui-graph';
 import {
   getEnvironmentConfig,
   getProjectGraphDataService,
-} from '@nx/graph/shared';
+} from '@nx/graph/legacy/shared';
+import { GraphService } from '@nx/graph/legacy/graph';
 import { selectValueByThemeStatic } from '@nx/graph-internal/ui-theme';
 
 let graphService: GraphService;
diff --git a/graph/client/src/app/routes.tsx b/graph/client/src/app/routes.tsx
index d742650104..04a2231fa3 100644
--- a/graph/client/src/app/routes.tsx
+++ b/graph/client/src/app/routes.tsx
@@ -14,7 +14,7 @@ import type { ProjectGraphProjectNode } from 'nx/src/config/project-graph';
 import {
   getEnvironmentConfig,
   getProjectGraphDataService,
-} from '@nx/graph/shared';
+} from '@nx/graph/legacy/shared';
 import { TasksSidebarErrorBoundary } from './feature-tasks/tasks-sidebar-error-boundary';
 import { ProjectDetailsPage } from '@nx/graph-internal/project-details';
 import { ErrorBoundary } from './ui-components/error-boundary';
diff --git a/graph/client/src/app/shell.tsx b/graph/client/src/app/shell.tsx
index 3bb86c48df..5c81e7bdd3 100644
--- a/graph/client/src/app/shell.tsx
+++ b/graph/client/src/app/shell.tsx
@@ -18,10 +18,11 @@ import {
   getProjectGraphDataService,
   useEnvironmentConfig,
   usePoll,
-} from '@nx/graph/shared';
-import { Dropdown, Spinner } from '@nx/graph/ui-components';
+} from '@nx/graph/legacy/shared';
+import { Dropdown, Spinner } from '@nx/graph/legacy/components';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
+
 import { getSystemTheme, Theme, ThemePanel } from '@nx/graph-internal/ui-theme';
-import { Tooltip } from '@nx/graph/ui-tooltips';
 import classNames from 'classnames';
 import { useEffect, useLayoutEffect, useState } from 'react';
 import {
diff --git a/graph/client/src/app/ui-components/debugger-panel.tsx b/graph/client/src/app/ui-components/debugger-panel.tsx
index 40ff6d76f0..e6b082e8c3 100644
--- a/graph/client/src/app/ui-components/debugger-panel.tsx
+++ b/graph/client/src/app/ui-components/debugger-panel.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { GraphPerfReport } from '../interfaces';
-import { Dropdown } from '@nx/graph/ui-components';
-import type { WorkspaceData } from '@nx/graph/shared';
+import { Dropdown } from '@nx/graph/legacy/components';
+import type { WorkspaceData } from '@nx/graph/legacy/shared';
 
 export interface DebuggerPanelProps {
   projects: WorkspaceData[];
diff --git a/graph/client/src/app/ui-components/error-boundary.tsx b/graph/client/src/app/ui-components/error-boundary.tsx
index 1c9522cc31..42101d8ba3 100644
--- a/graph/client/src/app/ui-components/error-boundary.tsx
+++ b/graph/client/src/app/ui-components/error-boundary.tsx
@@ -4,7 +4,7 @@ import {
   getProjectGraphDataService,
   useEnvironmentConfig,
   usePoll,
-} from '@nx/graph/shared';
+} from '@nx/graph/legacy/shared';
 import {
   isRouteErrorResponse,
   useParams,
diff --git a/graph/client/src/app/ui-components/error-page.tsx b/graph/client/src/app/ui-components/error-page.tsx
index 841733d5e5..d58f416151 100644
--- a/graph/client/src/app/ui-components/error-page.tsx
+++ b/graph/client/src/app/ui-components/error-page.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
-import { ErrorRenderer } from '@nx/graph/ui-components';
+import { ErrorRenderer } from '@nx/graph/legacy/components';
 import { GraphError } from 'nx/src/command-line/graph/graph';
 /* eslint-enable @nx/enforce-module-boundaries */
 import type { JSX } from 'react';
diff --git a/graph/client/src/app/ui-components/experimental-feature.tsx b/graph/client/src/app/ui-components/experimental-feature.tsx
index a1c262e3db..b2abd467ec 100644
--- a/graph/client/src/app/ui-components/experimental-feature.tsx
+++ b/graph/client/src/app/ui-components/experimental-feature.tsx
@@ -1,4 +1,4 @@
-import { useEnvironmentConfig } from '@nx/graph/shared';
+import { useEnvironmentConfig } from '@nx/graph/legacy/shared';
 import { Children, cloneElement } from 'react';
 
 export function ExperimentalFeature(props) {
diff --git a/graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx b/graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx
index bcc70677e4..3f79cff6a2 100644
--- a/graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx
+++ b/graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx
@@ -12,9 +12,12 @@ import {
   ProjectNodeTooltipActions,
   TaskNodeTooltip,
   Tooltip,
-} from '@nx/graph/ui-tooltips';
+} from '@nx/graph/legacy/tooltips';
 import { TaskNodeActions } from './task-node-actions';
-import { getExternalApiService, useRouteConstructor } from '@nx/graph/shared';
+import {
+  getExternalApiService,
+  useRouteConstructor,
+} from '@nx/graph/legacy/shared';
 import { useNavigate } from 'react-router-dom';
 import { useCallback } from 'react';
 
diff --git a/graph/client/src/app/ui-tooltips/task-node-actions.tsx b/graph/client/src/app/ui-tooltips/task-node-actions.tsx
index 6320ba5735..595adb104c 100644
--- a/graph/client/src/app/ui-tooltips/task-node-actions.tsx
+++ b/graph/client/src/app/ui-tooltips/task-node-actions.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import { TaskNodeTooltipProps } from '@nx/graph/ui-tooltips';
+import { TaskNodeTooltipProps } from '@nx/graph/legacy/tooltips';
 import { useEffect, useState } from 'react';
 
 export function TaskNodeActions(props: TaskNodeTooltipProps) {
@@ -9,7 +9,7 @@ export function TaskNodeActions(props: TaskNodeTooltipProps) {
   }, [props.id]);
   const project = props.id.split(':')[0];
   return (
-    <div className="w-full w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
+    <div className="w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
       <div
         className="flex w-full items-center justify-between bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
         onClick={() => setIsOpen(!isOpen)}
diff --git a/graph/project-details/src/lib/project-details-header.tsx b/graph/project-details/src/lib/project-details-header.tsx
index 37a0c5ab1c..91953b9257 100644
--- a/graph/project-details/src/lib/project-details-header.tsx
+++ b/graph/project-details/src/lib/project-details-header.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useRouteConstructor } from '@nx/graph/shared';
+import { useRouteConstructor } from '@nx/graph/legacy/shared';
 import { ThemePanel } from '@nx/graph-internal/ui-theme';
 
 export function ProjectDetailsHeader() {
diff --git a/graph/project-details/src/lib/project-details-page.tsx b/graph/project-details/src/lib/project-details-page.tsx
index b2f2bb7366..07b41b548c 100644
--- a/graph/project-details/src/lib/project-details-page.tsx
+++ b/graph/project-details/src/lib/project-details-page.tsx
@@ -17,7 +17,7 @@ import {
   getProjectGraphDataService,
   useEnvironmentConfig,
   usePoll,
-} from '@nx/graph/shared';
+} from '@nx/graph/legacy/shared';
 import { ProjectDetailsHeader } from './project-details-header';
 
 export function ProjectDetailsPage() {
diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx
index 03a253724b..42a39c30a4 100644
--- a/graph/project-details/src/lib/project-details-wrapper.tsx
+++ b/graph/project-details/src/lib/project-details-wrapper.tsx
@@ -11,8 +11,8 @@ import {
   getExternalApiService,
   useEnvironmentConfig,
   useRouteConstructor,
-} from '@nx/graph/shared';
-import { Spinner } from '@nx/graph/ui-components';
+} from '@nx/graph/legacy/shared';
+import { Spinner } from '@nx/graph/legacy/components';
 
 import { ProjectDetails } from '@nx/graph-internal/ui-project-details';
 import { useCallback, useContext, useEffect } from 'react';
diff --git a/graph/ui-code-block/src/lib/json-code-block.tsx b/graph/ui-code-block/src/lib/json-code-block.tsx
index 4f7c7c5077..7eef100b6d 100644
--- a/graph/ui-code-block/src/lib/json-code-block.tsx
+++ b/graph/ui-code-block/src/lib/json-code-block.tsx
@@ -2,7 +2,7 @@
 import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
 import { JSX, ReactNode, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
+import { CopyToClipboardButton } from '@nx/graph/legacy/components';
 
 export function JsonCodeBlockPreTag({
   children,
diff --git a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
index 257db9b315..8c3cba6a1f 100644
--- a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
+++ b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react';
 import { ProjectDetails } from './project-details';
-import { ExpandedTargetsProvider } from '@nx/graph/shared';
+import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared';
 
 const meta: Meta<typeof ProjectDetails> = {
   component: ProjectDetails,
diff --git a/graph/ui-project-details/src/lib/project-details/project-details.tsx b/graph/ui-project-details/src/lib/project-details/project-details.tsx
index 31fe2165ad..36e86dc88e 100644
--- a/graph/ui-project-details/src/lib/project-details/project-details.tsx
+++ b/graph/ui-project-details/src/lib/project-details/project-details.tsx
@@ -5,13 +5,14 @@ import type { ProjectGraphProjectNode } from '@nx/devkit';
 import { GraphError } from 'nx/src/command-line/graph/graph';
 /* eslint-enable @nx/enforce-module-boundaries */
 import { EyeIcon } from '@heroicons/react/24/outline';
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { twMerge } from 'tailwind-merge';
 import { TagList } from '../tag-list/tag-list';
 import { OwnersList } from '../owners-list/owners-list';
 import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 import { TargetTechnologies } from '../target-technologies/target-technologies';
+import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
 
 export interface ProjectDetailsProps {
   project: ProjectGraphProjectNode;
diff --git a/graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx b/graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx
index 83e85c458f..71a3c49732 100644
--- a/graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx
+++ b/graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx
@@ -1,12 +1,15 @@
 import { Fragment, ReactNode, useMemo, useState } from 'react';
 import { PlayIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Transition } from '@headlessui/react';
-import { getExternalApiService, useEnvironmentConfig } from '@nx/graph/shared';
+import {
+  getExternalApiService,
+  useEnvironmentConfig,
+} from '@nx/graph/legacy/shared';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import type { TargetConfiguration } from '@nx/devkit';
 import { TerminalOutput } from '@nx/nx-dev/ui-fence';
-import { Tooltip } from '@nx/graph/ui-tooltips';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 
 interface ShowOptionsHelpProps {
diff --git a/graph/ui-project-details/src/lib/source-info/source-info.tsx b/graph/ui-project-details/src/lib/source-info/source-info.tsx
index 92291247cb..2c8f6f348d 100644
--- a/graph/ui-project-details/src/lib/source-info/source-info.tsx
+++ b/graph/ui-project-details/src/lib/source-info/source-info.tsx
@@ -1,6 +1,6 @@
-import { SourcemapInfoToolTip, Tooltip } from '@nx/graph/ui-tooltips';
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { twMerge } from 'tailwind-merge';
+import { SourcemapInfoToolTip } from '../tooltips/sourcemap-info-tooltip';
 
 export function SourceInfo(props: {
   data: Array<string>;
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
index 38b64e5d15..0402b514a8 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
@@ -3,7 +3,7 @@ import {
   TargetConfigurationGroupList,
   TargetConfigurationGroupListProps,
 } from './target-configuration-details-group-list';
-import { ExpandedTargetsProvider } from '@nx/graph/shared';
+import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared';
 
 const meta: Meta<typeof TargetConfigurationGroupList> = {
   component: TargetConfigurationGroupList,
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
index cb74c76381..efbcbee951 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
@@ -1,25 +1,22 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import type { TargetConfiguration } from '@nx/devkit';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
 import {
   ChevronDownIcon,
   ChevronUpIcon,
   EyeIcon,
   PlayIcon,
 } from '@heroicons/react/24/outline';
-
-import {
-  AtomizerTooltip,
-  PropertyInfoTooltip,
-  Tooltip,
-} from '@nx/graph/ui-tooltips';
+import { CopyToClipboardButton } from '@nx/graph/legacy/components';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { twMerge } from 'tailwind-merge';
 import { Pill } from '../pill';
 import { TargetTechnologies } from '../target-technologies/target-technologies';
 import { SourceInfo } from '../source-info/source-info';
 import { getDisplayHeaderFromTargetConfiguration } from '../utils/get-display-header-from-target-configuration';
 import { TargetExecutor } from '../target-executor/target-executor';
+import { AtomizerTooltip } from '../tooltips/atomizer-tooltip';
+import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
 
 export interface TargetConfigurationDetailsHeaderProps {
   isCollasped: boolean;
@@ -150,6 +147,17 @@ export const TargetConfigurationDetailsHeader = ({
                 </span>
               </Tooltip>
             )}
+            {(targetConfiguration as any).continuous && (
+              <Tooltip
+                openAction="hover"
+                strategy="fixed"
+                content={(<PropertyInfoTooltip type="continuous" />) as any}
+              >
+                <span className="inline-flex">
+                  <Pill text="Continuous" color="grey" />
+                </span>
+              </Tooltip>
+            )}
           </div>
         </div>
         <div className="flex items-center gap-2">
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
index bf363c27cc..4724a67db3 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
@@ -2,9 +2,9 @@
 // nx-ignore-next-line
 import type { TargetConfiguration } from '@nx/devkit';
 import { JsonCodeBlock } from '@nx/graph-internal/ui-code-block';
-import { ExpandedTargetsContext } from '@nx/graph/shared';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
+import { ExpandedTargetsContext } from '@nx/graph/legacy/shared';
+import { CopyToClipboardButton } from '@nx/graph/legacy/components';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { Pill } from '../pill';
 import { ShowOptionsHelp } from '../show-all-options/show-options-help';
@@ -18,7 +18,7 @@ import { getTaskSyncGenerators } from '../utils/sync-generators';
 import { FadingCollapsible } from './fading-collapsible';
 import { TargetConfigurationProperty } from './target-configuration-property';
 import { TooltipTriggerText } from './tooltip-trigger-text';
-
+import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
 interface TargetConfigurationDetailsProps {
   projectName: string;
   targetName: string;
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx
index 68e30295ae..6779cc3b85 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@nx/graph/ui-tooltips';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { JSX, ReactNode } from 'react';
 import { TooltipTriggerText } from './tooltip-trigger-text';
 import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
diff --git a/graph/ui-project-details/src/lib/target-executor/target-executor-title.tsx b/graph/ui-project-details/src/lib/target-executor/target-executor-title.tsx
index 332b15eedc..6121606371 100644
--- a/graph/ui-project-details/src/lib/target-executor/target-executor-title.tsx
+++ b/graph/ui-project-details/src/lib/target-executor/target-executor-title.tsx
@@ -1,6 +1,7 @@
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
+import { CopyToClipboardButton } from '@nx/graph/legacy/components';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
+import { PropertyInfoTooltip } from '../tooltips/property-info-tooltip';
 
 export function TargetExecutorTitle({
   commands,
diff --git a/graph/ui-project-details/src/lib/target-executor/target-executor.tsx b/graph/ui-project-details/src/lib/target-executor/target-executor.tsx
index 2c9879bf11..dbb29446a6 100644
--- a/graph/ui-project-details/src/lib/target-executor/target-executor.tsx
+++ b/graph/ui-project-details/src/lib/target-executor/target-executor.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink } from '@nx/graph/ui-tooltips';
+import { ExternalLink } from '../tooltips/external-link';
 
 export interface TargetExecutorProps {
   command?: string;
diff --git a/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx b/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx
index 22860c120e..4487c4b1a1 100644
--- a/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx
+++ b/graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx
@@ -1,4 +1,4 @@
-import { TechnologyIcon } from '@nx/graph/ui-icons';
+import { TechnologyIcon } from '@nx/graph/legacy/icons';
 import { HTMLProps } from 'react';
 
 export interface TargetTechnologiesProps extends HTMLProps<HTMLDivElement> {
diff --git a/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx b/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx
new file mode 100644
index 0000000000..090a38a9b7
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AtomizerTooltip, AtomizerTooltipProps } from './atomizer-tooltip';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
+
+const meta: Meta<typeof AtomizerTooltip> = {
+  component: AtomizerTooltip,
+  title: 'Tooltips/AtomizerTooltip',
+};
+
+export default meta;
+type Story = StoryObj<typeof AtomizerTooltip>;
+
+export const Cloud: Story = {
+  args: {
+    connectedToCloud: true,
+    nonAtomizedTarget: 'e2e',
+  } as AtomizerTooltipProps,
+  render: (args) => {
+    return (
+      <div className="flex w-full justify-center">
+        <Tooltip
+          open={true}
+          openAction="manual"
+          content={(<AtomizerTooltip {...args} />) as any}
+        >
+          <p>Internal Reference</p>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const NoCloud: Story = {
+  args: {
+    connectedToCloud: false,
+    nonAtomizedTarget: 'e2e',
+  } as AtomizerTooltipProps,
+  render: (args) => {
+    return (
+      <div className="flex w-full justify-center">
+        <Tooltip
+          open={true}
+          openAction="manual"
+          content={(<AtomizerTooltip {...args} />) as any}
+        >
+          <p>Internal Reference</p>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const NoCloudConsole: Story = {
+  args: {
+    connectedToCloud: false,
+    nonAtomizedTarget: 'e2e',
+    nxConnectCallback: () => console.log('nxConnectCallback'),
+  } as AtomizerTooltipProps,
+  render: (args) => {
+    return (
+      <div className="flex w-full justify-center">
+        <Tooltip
+          open={true}
+          openAction="manual"
+          content={(<AtomizerTooltip {...args} />) as any}
+        >
+          <p>Internal Reference</p>
+        </Tooltip>
+      </div>
+    );
+  },
+};
diff --git a/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.tsx b/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.tsx
new file mode 100644
index 0000000000..f3568636fd
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/atomizer-tooltip.tsx
@@ -0,0 +1,107 @@
+import { twMerge } from 'tailwind-merge';
+import { NxCloudIcon } from '@nx/graph/legacy/icons';
+
+export interface AtomizerTooltipProps {
+  connectedToCloud: boolean;
+  nonAtomizedTarget: string;
+  onNxConnect?: () => void;
+}
+export function AtomizerTooltip(props: AtomizerTooltipProps) {
+  return (
+    <div className="z-20 max-w-lg text-sm text-slate-700 dark:text-slate-400">
+      <h4 className="flex items-center justify-between border-b border-slate-200 text-base dark:border-slate-700/60">
+        <span className="font-mono">Atomizer</span>
+      </h4>
+      <div
+        className={twMerge(
+          'flex flex-col py-2 font-mono',
+          !props.connectedToCloud
+            ? 'border-b border-slate-200 dark:border-slate-700/60'
+            : ''
+        )}
+      >
+        <p className="whitespace-pre-wrap normal-case">
+          {'Nx '}
+          <Link
+            href="https://nx.dev/ci/features/split-e2e-tasks"
+            text="automatically split"
+          />
+          {' the potentially slow'}
+          <code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+            {props.nonAtomizedTarget}
+          </code>
+          {'task into separate tasks for each file. Enable '}
+          {!props.connectedToCloud ? (
+            <Link href="https://nx.app/" text="Nx Cloud" />
+          ) : (
+            <Link
+              href="https://nx.dev/ci/features/distribute-task-execution"
+              text="Nx Agents"
+            />
+          )}
+          {' to benefit from '}
+          <Link
+            href="https://nx.dev/ci/features/distribute-task-execution"
+            text="task distribution"
+          />
+          {!props.connectedToCloud && (
+            <>
+              {', '}
+              <Link
+                href="https://nx.dev/ci/features/remote-cache"
+                text="remote caching"
+              />
+            </>
+          )}
+          {' and '}
+          <Link
+            href="https://nx.dev/ci/features/flaky-tasks"
+            text="flaky task re-runs"
+          />
+          . Use
+          <code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+            {props.nonAtomizedTarget}
+          </code>
+          when running without{' '}
+          {!props.connectedToCloud ? 'Nx Cloud' : 'Nx Agents'}.
+        </p>
+      </div>
+      {!props.connectedToCloud && (
+        <div className="flex py-2">
+          <p className="pr-4 normal-case">
+            {props.onNxConnect ? (
+              <button
+                className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
+                onClick={() => props.onNxConnect!()}
+              >
+                <NxCloudIcon className="h-5 w-5"></NxCloudIcon>
+                <span>Connect to Nx Cloud</span>
+              </button>
+            ) : (
+              <span className="font-mono">
+                {'Run'}
+                <code className="mx-2 rounded bg-gray-100 px-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                  nx connect
+                </code>
+                {'to connect to Nx Cloud'}
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Link({ href, text }: { href: string; text: string }) {
+  return (
+    <a
+      href={href}
+      className="inline text-slate-500 underline decoration-slate-700/50 decoration-dotted decoration-2 dark:text-slate-400 dark:decoration-slate-400/50"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {text}
+    </a>
+  );
+}
diff --git a/graph/ui-project-details/src/lib/tooltips/external-link.tsx b/graph/ui-project-details/src/lib/tooltips/external-link.tsx
new file mode 100644
index 0000000000..80a4e32f63
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/external-link.tsx
@@ -0,0 +1,29 @@
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { twMerge } from 'tailwind-merge';
+
+export function ExternalLink({
+  children,
+  href,
+  title,
+  className,
+}: {
+  children?: React.ReactNode;
+  href: string;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <a
+      href={href}
+      title={title}
+      className={twMerge(
+        'gap-2 text-slate-500 hover:underline dark:text-slate-400',
+        className
+      )}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {children} <ArrowTopRightOnSquareIcon className="inline h-4 w-4" />
+    </a>
+  );
+}
diff --git a/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx b/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx
new file mode 100644
index 0000000000..788261ff79
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  PropertyInfoTooltip,
+  PropertyInfoTooltipProps,
+} from './property-info-tooltip';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
+
+const meta: Meta<typeof PropertyInfoTooltip> = {
+  component: PropertyInfoTooltip,
+  title: 'Tooltips/PropertyInfoToolTip',
+};
+
+export default meta;
+type Story = StoryObj<typeof PropertyInfoTooltip>;
+
+export const Primary: Story = {
+  render: (args) => (
+    <div className="flex w-full justify-center">
+      <Tooltip open={true} content={(<PropertyInfoTooltip {...args} />) as any}>
+        <p>Internal Reference</p>
+      </Tooltip>
+    </div>
+  ),
+  args: {
+    type: 'inputs',
+  } as PropertyInfoTooltipProps,
+};
diff --git a/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.tsx b/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.tsx
new file mode 100644
index 0000000000..1324a50e03
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/property-info-tooltip.tsx
@@ -0,0 +1,140 @@
+import { twMerge } from 'tailwind-merge';
+import { ExternalLink } from './external-link';
+
+type PropertyInfoTooltipType =
+  | 'targets'
+  | 'executors'
+  | 'cacheable'
+  | 'inputs'
+  | 'outputs'
+  | 'dependsOn'
+  | 'options'
+  | 'configurations'
+  | 'release'
+  | 'parallelism'
+  | 'syncGenerators'
+  | 'continuous';
+
+type PropertyInfoTooltipTypeOptions = {
+  docsUrl?: string;
+  docsLinkText?: string;
+  heading: string;
+  description: string;
+};
+export interface PropertyInfoTooltipProps {
+  type: PropertyInfoTooltipType;
+}
+
+const PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS: Record<
+  PropertyInfoTooltipType,
+  PropertyInfoTooltipTypeOptions
+> = {
+  targets: {
+    docsUrl: 'https://nx.dev/features/run-tasks',
+    docsLinkText: 'Learn more about running tasks',
+    heading: 'Target',
+    description:
+      'A Target is the definition of a task for a project. These can be run in many different ways.',
+  },
+  executors: {
+    docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
+    heading: 'Executors',
+    description:
+      'Executors define what happens when a task is run.\nCheck the documentation of the executor below to learn more about what it does.',
+  },
+  cacheable: {
+    docsUrl: 'https://nx.dev/concepts/how-caching-works',
+    docsLinkText: 'Learn more about Caching',
+    heading: 'Caching',
+    description:
+      'This task will be cached by Nx. When the Inputs have not changed the Outputs will be restored from the cache.',
+  },
+  inputs: {
+    docsUrl: 'https://nx.dev/recipes/running-tasks/configure-inputs',
+    heading: 'Inputs',
+    description: `Inputs are used by the task to produce Outputs. Inputs are used to determine when the Outputs of a task can be restored from the cache.`,
+  },
+  outputs: {
+    docsUrl: 'https://nx.dev/recipes/running-tasks/configure-outputs',
+    heading: 'Outputs',
+    description:
+      'Outputs are the results of a task. Outputs are restored from the cache when the Inputs are the same as a previous run.',
+  },
+  dependsOn: {
+    docsUrl: 'https://nx.dev/concepts/task-pipeline-configuration',
+    docsLinkText: 'Learn more about creating dependencies between tasks',
+    heading: 'Depends On',
+    description:
+      'This is a list of other tasks which must be completed before running this task.',
+  },
+  options: {
+    docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
+    heading: 'Options',
+    description: 'Options modify the behaviour of the task.',
+  },
+  configurations: {
+    docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
+    heading: 'Configurations',
+    description:
+      'Configurations are sets of Options to allow a Target to be used in different scenarios.',
+  },
+  release: {
+    heading: 'nx release',
+    description:
+      "The nx-release-publish target is used to publish your project with nxrelease. Don't invoke this directly - use nx release publish instead.",
+    docsUrl: 'https://nx.dev/nx-api/nx/documents/release',
+  },
+  parallelism: {
+    heading: 'Parallelism',
+    description:
+      'By default, tasks are run in parallel with other tasks. Setting `"parallelism": false` ensures that the target will not run in parallel with other tasks on the same machine.',
+    docsUrl: 'https://nx.dev/reference/project-configuration#parallelism',
+  },
+  syncGenerators: {
+    heading: 'Sync Generators',
+    description:
+      'This is a list of generators to run before the task runs to ensure the workspace is up to date.',
+    docsUrl: 'https://nx.dev/concepts/sync-generators',
+  },
+  continuous: {
+    heading: 'Continuous',
+    docsLinkText: 'Learn more about continuous tasks',
+    description:
+      'This is marked as continuous. Nx will not wait for this task to finish before running other tasks.',
+    docsUrl: 'TODO ADD LINK',
+  },
+};
+
+export function PropertyInfoTooltip({ type }: PropertyInfoTooltipProps) {
+  const propertyInfo = PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS[type];
+
+  return (
+    <div className="max-w-lg text-sm text-slate-700 dark:text-slate-400">
+      <h4 className="flex items-center justify-between border-b border-slate-200 text-base dark:border-slate-700/60">
+        <span className="font-mono">{propertyInfo.heading}</span>
+      </h4>
+      <div
+        className={twMerge(
+          `flex flex-col py-2 font-mono`,
+          propertyInfo.docsUrl
+            ? 'border-b border-slate-200 dark:border-slate-700/60'
+            : ''
+        )}
+      >
+        <p className="flex grow items-center gap-2 whitespace-pre-wrap normal-case">
+          {propertyInfo.description}
+        </p>
+      </div>
+      {propertyInfo.docsUrl ? (
+        <div className="flex py-2">
+          <p className="flex items-center pr-4">
+            <ExternalLink href={propertyInfo.docsUrl}>
+              {propertyInfo.docsLinkText ??
+                `Learn more about ${propertyInfo.heading}`}
+            </ExternalLink>
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx b/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx
new file mode 100644
index 0000000000..9554033365
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  SourcemapInfoToolTip,
+  SourcemapInfoToolTipProps,
+} from './sourcemap-info-tooltip';
+import { Tooltip } from '@nx/graph/legacy/tooltips';
+
+const meta: Meta<typeof SourcemapInfoToolTip> = {
+  component: SourcemapInfoToolTip,
+  title: 'Tooltips/SourcemapInfoToolTip',
+};
+
+export default meta;
+type Story = StoryObj<typeof SourcemapInfoToolTip>;
+
+export const Primary: Story = {
+  render: (args) => (
+    <div className="flex w-full justify-center">
+      <Tooltip
+        open={true}
+        content={(<SourcemapInfoToolTip {...args} />) as any}
+      >
+        <p>Internal Reference</p>
+      </Tooltip>
+    </div>
+  ),
+  args: {
+    propertyKey: 'targets.build.command',
+    plugin: 'nx-core-build-project-json-nodes',
+    file: 'tools/eslint-rules/project.json',
+  } as SourcemapInfoToolTipProps,
+};
diff --git a/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.tsx b/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.tsx
new file mode 100644
index 0000000000..b817898d6a
--- /dev/null
+++ b/graph/ui-project-details/src/lib/tooltips/sourcemap-info-tooltip.tsx
@@ -0,0 +1,68 @@
+import { type ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ExternalLink } from './external-link';
+
+export interface SourcemapInfoToolTipProps {
+  propertyKey: string;
+  plugin: string;
+  file: string;
+  children?: ReactNode | ReactNode[];
+  showLink?: boolean;
+}
+
+export function SourcemapInfoToolTip({
+  propertyKey,
+  plugin,
+  file,
+  showLink,
+}: SourcemapInfoToolTipProps) {
+  // Target property key is in the form `target.${targetName}`
+  // Every other property within in the target has the form `target.${targetName}.${propertyName}
+  const isTarget = propertyKey.split('.').length === 2;
+
+  const docsUrlSlug: string | undefined = plugin?.startsWith('@nx/')
+    ? plugin.replace('@nx/', '').split('/')[0]
+    : undefined;
+
+  const tooltipContent = (
+    <>
+      <p className="flex grow items-center gap-2">
+        <span className="font-bold">{isTarget ? 'Created' : 'Set'} by:</span>
+        <span className="inline-flex grow items-center justify-between">
+          {docsUrlSlug ? (
+            <ExternalLink href={`https://nx.dev/nx-api/${docsUrlSlug}`}>
+              {plugin}
+            </ExternalLink>
+          ) : (
+            `${plugin}`
+          )}
+        </span>
+      </p>
+      <p>
+        <span className="font-bold">From:</span> {file}
+      </p>
+    </>
+  );
+
+  return (
+    <div className="max-w-md text-sm text-slate-700 sm:max-w-full dark:text-slate-400">
+      <div
+        className={twMerge(
+          `flex flex-col py-2 font-mono`,
+          showLink ? 'border-b border-slate-200 dark:border-slate-700/60' : ''
+        )}
+      >
+        {tooltipContent}
+      </div>
+      {showLink && (
+        <div className="flex py-2">
+          <p className={`flex flex-col gap-1`}>
+            <ExternalLink href="https://nx.dev/concepts/inferred-tasks">
+              Learn more about how projects are configured
+            </ExternalLink>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/graph/ui-theme/src/lib/theme-resolver.tsx b/graph/ui-theme/src/lib/theme-resolver.tsx
index 61c1c768dc..3ca2f2f822 100644
--- a/graph/ui-theme/src/lib/theme-resolver.tsx
+++ b/graph/ui-theme/src/lib/theme-resolver.tsx
@@ -1,4 +1,4 @@
-import { getEnvironmentConfig } from '@nx/graph/shared';
+import { getEnvironmentConfig } from '@nx/graph/legacy/shared';
 
 const htmlEl = document.documentElement;
 export const localStorageThemeKey = 'nx-dep-graph-theme';
diff --git a/nx-dev/feature-ai/src/lib/feed/feed-answer.spec.tsx b/nx-dev/feature-ai/src/lib/feed/feed-answer.spec.tsx
index 9db41fa96d..73f165b96c 100644
--- a/nx-dev/feature-ai/src/lib/feed/feed-answer.spec.tsx
+++ b/nx-dev/feature-ai/src/lib/feed/feed-answer.spec.tsx
@@ -1,26 +1,29 @@
 import { normalizeContent } from './feed-answer';
 
-jest.mock('@nx/graph/ui-icons', () => {
+jest.mock('@nx/graph/legacy/tooltips', () => {
+  return {
+    Tooltip: jest.fn(() => null),
+  };
+});
+
+jest.mock('@nx/graph/legacy/icons', () => {
   return {
     Icon: jest.fn(() => null),
   };
 });
-jest.mock('@nx/graph/ui-tooltips', () => {
-  return {
-    Tooltip: jest.fn(() => null),
-    PropertyInfoTooltip: jest.fn(() => null),
-  };
-});
-jest.mock('@nx/graph/ui-components', () => {
+
+jest.mock('@nx/graph/legacy/components', () => {
   return {
     CopyToClipboardButton: jest.fn(() => null),
   };
 });
-jest.mock('@nx/graph/shared', () => {
+
+jest.mock('@nx/graph/legacy/shared', () => {
   return {
     ExpandedTargetsContext: jest.fn(() => null),
   };
 });
+
 jest.mock('@nx/nx-dev/ui-primitives', () => {
   return {
     cx: jest.fn(() => null),
diff --git a/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
index 2d149810b7..6a6578dfba 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx
@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import { Framework, frameworkIcons } from '@nx/graph/ui-icons';
+import { Framework, frameworkIcons } from '@nx/graph/legacy/icons';
 
 export function CallToAction({
   url,
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index 3cc4c6c5a9..11911fed14 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -4,7 +4,7 @@ import {
   DocumentIcon,
   PlayCircleIcon,
 } from '@heroicons/react/24/outline';
-import { Framework, frameworkIcons } from '@nx/graph/ui-icons';
+import { Framework, frameworkIcons } from '@nx/graph/legacy/icons';
 import * as nxDevIcons from '@nx/nx-dev/ui-icons';
 import * as heroIcons from '@heroicons/react/24/outline';
 
diff --git a/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
index 622b68ec65..7a7f3a7a75 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
@@ -21,14 +21,16 @@ export function Loading() {
  * in the top level of the module for preloading to work, similar to React.lazy.
  */
 const NxProjectGraphViz = dynamic(
-  () => import('@nx/graph/ui-graph').then((module) => module.NxProjectGraphViz),
+  () =>
+    import('@nx/graph/legacy/graph').then((module) => module.NxProjectGraphViz),
   {
     ssr: false,
     loading: () => <Loading />,
   }
 );
 const NxTaskGraphViz = dynamic(
-  () => import('@nx/graph/ui-graph').then((module) => module.NxTaskGraphViz),
+  () =>
+    import('@nx/graph/legacy/graph').then((module) => module.NxTaskGraphViz),
   {
     ssr: false,
     loading: () => <Loading />,
diff --git a/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
index e50106dde1..6a94ae92c3 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react';
 import { ProjectDetails as ProjectDetailsUi } from '@nx/graph-internal/ui-project-details';
-import { ExpandedTargetsProvider } from '@nx/graph/shared';
+import { ExpandedTargetsProvider } from '@nx/graph/legacy/shared';
 import { twMerge } from 'tailwind-merge';
 
 export function Loading() {
diff --git a/package.json b/package.json
index ec3600d5f2..c8c6103072 100644
--- a/package.json
+++ b/package.json
@@ -333,7 +333,7 @@
     "@markdoc/markdoc": "0.2.2",
     "@monaco-editor/react": "^4.4.6",
     "@napi-rs/canvas": "^0.1.52",
-    "@nx/graph": "0.1.0",
+    "@nx/graph": "0.4.1",
     "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.108.3",
     "@react-three/fiber": "^8.16.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37d1aa1988..03dbebe47e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,8 +31,8 @@ importers:
         specifier: ^0.1.52
         version: 0.1.55
       '@nx/graph':
-        specifier: 0.1.0
-        version: 0.1.0(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        specifier: 0.4.1
+        version: 0.4.1(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@react-spring/three':
         specifier: ^9.7.3
         version: 9.7.4(@react-three/fiber@8.17.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.166.1))(react@18.3.1)(three@0.166.1)
@@ -3695,13 +3695,6 @@ packages:
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
-  '@headlessui/react@1.7.19':
-    resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-
   '@headlessui/react@2.2.0':
     resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
     engines: {node: '>=10'}
@@ -5148,14 +5141,14 @@ packages:
       '@zkochan/js-yaml':
         optional: true
 
-  '@nx/graph@0.1.0':
-    resolution: {integrity: sha512-PYO6FqY46yriza3ZuDpdFTym+Nn8Z807gzNz+rxSvR4QVBTdoi6wDuX2GrM/O83oSF4A7ke4Z1kGQ3Dw8l1w8w==}
+  '@nx/graph@0.4.1':
+    resolution: {integrity: sha512-BLHbZKEFUIkWYzXCk4/F+E2FNpeKe04tgyozARz3GnnvmBnOcuozvssnJsfpG1zmbiQ8Otb+HzJAVePZwaq4WA==}
     peerDependencies:
       '@nx/devkit': '>= 19 < 21'
       nx: '>= 19 < 21'
-      react: '>= 18 < 19'
-      react-dom: '>= 18 < 19'
-      react-router-dom: '>= 6 < 7'
+      react: '>= 18 < 20'
+      react-dom: '>= 18 < 20'
+      react-router-dom: '>= 6.0.0'
 
   '@nx/jest@20.5.0-beta.2':
     resolution: {integrity: sha512-hgv8Mo5szqVXo55CRDqoqqHIl9GXI+X9TPmnplKB/YQmuBlz36bchhkfhg3B6V2XjzuRdT1iRlqBrBA+fvJQSg==}
@@ -20571,13 +20564,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.8': {}
 
-  '@headlessui/react@1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/react-virtual': 3.10.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      client-only: 0.0.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   '@headlessui/react@2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react': 0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -22485,22 +22471,13 @@ snapshots:
       - supports-color
       - verdaccio
 
-  '@nx/graph@0.1.0(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@nx/graph@0.4.1(@nx/devkit@20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/react': 0.26.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@heroicons/react': 2.1.5(react@18.3.1)
       '@nx/devkit': 20.5.0-beta.2(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))
-      classnames: 2.5.1
-      cytoscape: 3.30.2
-      cytoscape-dagre: 2.5.0(cytoscape@3.30.2)
-      cytoscape-popper: 2.0.0(cytoscape@3.30.2)
       nx: 20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))
       react: 18.3.1
-      react-copy-to-clipboard: 5.1.0(react@18.3.1)
       react-dom: 18.3.1(react@18.3.1)
       react-router-dom: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      tailwind-merge: 2.5.2
 
   '@nx/jest@20.5.0-beta.2(@babel/traverse@7.25.9)(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@20.16.10)(babel-plugin-macros@3.1.0)(nx@20.5.0-beta.2(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.12)(typescript@5.7.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(ts-node@10.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@20.16.10)(typescript@5.7.3))(typescript@5.7.3)(verdaccio@5.32.2(encoding@0.1.13)(typanion@3.14.0))':
     dependencies: