feat(nx-dev): add Explain with AI to Enterprise and Pro Plans

nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx

@@ -1,5 +1,6 @@
 import { CheckIcon } from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
+import Link from 'next/link';
 
 const features = [
   'White glove onboarding',
@@ -64,6 +65,24 @@ export function EnterprisePlan({
             {feature}
           </li>
         ))}
+        <li className="flex gap-x-3">
+          <CheckIcon
+            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
+            aria-hidden="true"
+          />
+          <p>
+            <Link
+              href="/ci/troubleshooting/explain-with-ai"
+              title="Learn more about Explain with AI"
+              prefetch={false}
+              className="font-medium text-slate-700 underline dark:text-slate-300"
+            >
+              Explain with AI
+            </Link>
+            : provide detailed explanations and insights for failed task
+            outputs.
+          </p>
+        </li>
       </ul>
     </article>
   );

nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx

@@ -67,7 +67,7 @@ export function HobbyPlan({
           />
           <p>
             <Link
-              href="/products/replay#content"
+              href="/ci/features/remote-cache"
               title="Learn more about Nx Replay"
               prefetch={false}
               className="font-medium text-slate-700 underline dark:text-slate-300"
@@ -84,7 +84,7 @@ export function HobbyPlan({
           />
           <p>
             <Link
-              href="/products/agents#content"
+              href="/ci/features/agents"
               title="Learn more about Nx Agents"
               prefetch={false}
               className="font-medium text-slate-700 underline dark:text-slate-300"
@@ -94,24 +94,6 @@ export function HobbyPlan({
             : native task distribution solution for CI{' '}
           </p>
         </li>
-        <li className="flex gap-x-3">
-          <CheckIcon
-            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-            aria-hidden="true"
-          />
-          <p>
-            <Link
-              href="https://nx.app/products/workflows#content?utm_source=nx.dev"
-              title="Learn more about Nx Workflows"
-              prefetch={false}
-              className="font-medium text-slate-700 underline dark:text-slate-300"
-            >
-              Nx Workflows
-            </Link>
-            : full CI replacement{' '}
-            <span className="text-xs italic">(Coming Soon)</span>
-          </p>
-        </li>
         {features.map((feature) => (
           <li key={feature} className="flex gap-x-3">
             <CheckIcon

nx-dev/ui-pricing/src/lib/plans/plan-table.tsx

@@ -495,16 +495,15 @@ export function PlanTable(): JSX.Element {
               <span className="sr-only">yes</span>
             </td>
           </tr>
-          <tr className="bg-slate-50/40 text-sm transition hover:bg-slate-50/60 dark:bg-slate-800/40 dark:hover:bg-slate-800/60">
+          <tr className="text-sm transition hover:bg-slate-50/60 dark:hover:bg-slate-800/60">
             <th
               className="min-w-[124px] border-l border-t border-slate-200 px-2 py-1.5 text-left font-normal leading-tight md:min-w-[180px] md:p-2 md:px-3 lg:w-[325px] lg:px-4 lg:py-2.5 lg:pl-8 dark:border-slate-800"
               scope="row"
             >
               <span className="font-medium text-slate-700 dark:text-slate-300">
-                Nx Workflows
+                Nx Replay
               </span>
-              : full CI replacement{' '}
-              <span className="text-xs italic">(Coming Soon)</span>
+              : remote caching
             </th>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
               <CheckIcon
@@ -534,16 +533,14 @@ export function PlanTable(): JSX.Element {
               scope="row"
             >
               <span className="font-medium text-slate-700 dark:text-slate-300">
-                Nx Replay
+                Explain with AI
               </span>
-              : Remote Caching
+              : provide detailed explanations and insights for failed task
+              outputs.
             </th>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
-              <CheckIcon
-                className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-                aria-hidden="true"
-              />
-              <span className="sr-only">yes</span>
+              <XMarkIcon className="h-6 w-5 flex-none" aria-hidden="true" />
+              <span className="sr-only">no</span>
             </td>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
               <CheckIcon

nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx

@@ -3,6 +3,7 @@ import { Popover, Transition } from '@headlessui/react';
 import { CheckIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
 import { Fragment } from 'react';
+import Link from 'next/link';
 
 const features = [
   '300k credits included',
@@ -93,6 +94,24 @@ export function ProPlan({
             {feature}
           </li>
         ))}
+        <li className="flex gap-x-3">
+          <CheckIcon
+            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
+            aria-hidden="true"
+          />
+          <p>
+            <Link
+              href="/ci/troubleshooting/explain-with-ai"
+              title="Learn more about Explain with AI"
+              prefetch={false}
+              className="font-medium text-slate-700 underline dark:text-slate-300"
+            >
+              Explain with AI
+            </Link>
+            : provide detailed explanations and insights for failed task
+            outputs.
+          </p>
+        </li>
       </ul>
     </article>
   );