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

This commit integrates the "Explain with AI" feature into the Enterprise and Pro plans for providing detailed explanations and insights for failed task outputs. It also remove the Nx Workflows mention of the pricing page. It also updates various links within the Hobby plan and modifies plan table descriptions to reflect the accurate feature names.

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>
   );