From 189f3c13999391ce8fc423a807d588cc572150c5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 2 Aug 2025 22:24:39 +0100
Subject: [PATCH 1/2] Adds a step by step deploy blank state to Tasks page

---
 .../app/components/BlankStatePanels.tsx       | 68 ++++++++++++-------
 apps/webapp/app/components/SetupCommands.tsx  | 61 +++++++++++++++++
 .../route.tsx                                 |  3 +-
 3 files changed, 107 insertions(+), 25 deletions(-)

diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index 03ebae66ee1..b86296af6d7 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -12,7 +12,6 @@ import {
 } from "@heroicons/react/20/solid";
 import { useLocation } from "react-use";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 import openBulkActionsPanel from "~/assets/images/open-bulk-actions-panel.png";
 import selectRunsIndividually from "~/assets/images/select-runs-individually.png";
@@ -33,7 +32,7 @@ import {
   v3NewSchedulePath,
 } from "~/utils/pathBuilder";
 import { InlineCode } from "./code/InlineCode";
-import { environmentFullTitle } from "./environments/EnvironmentLabel";
+import { environmentFullTitle, EnvironmentIcon } from "./environments/EnvironmentLabel";
 import { Feedback } from "./Feedback";
 import { EnvironmentSelector } from "./navigation/EnvironmentSelector";
 import { Button, LinkButton } from "./primitives/Buttons";
@@ -42,7 +41,12 @@ import { InfoPanel } from "./primitives/InfoPanel";
 import { Paragraph } from "./primitives/Paragraph";
 import { StepNumber } from "./primitives/StepNumber";
 import { TextLink } from "./primitives/TextLink";
-import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
+import {
+  InitCommandV3,
+  PackageManagerProvider,
+  TriggerDeployStep,
+  TriggerDevStepV3,
+} from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
 import { V4Badge } from "./V4Badge";
 
@@ -87,26 +91,44 @@ export function HasNoTasksDev() {
 
 export function HasNoTasksDeployed({ environment }: { environment: MinimumEnvironment }) {
   return (
-    <InfoPanel
-      title={`You don't have any deployed tasks in ${environmentFullTitle(environment)}`}
-      icon={TaskIcon}
-      iconClassName="text-tasks"
-      panelClassName="max-w-full"
-      accessory={
-        <LinkButton
-          to={docsPath("deployment/overview")}
-          variant="docs/small"
-          LeadingIcon={BookOpenIcon}
-        >
-          How to deploy tasks
-        </LinkButton>
-      }
-    >
-      <Paragraph spacing variant="small">
-        Run the <TextLink to={docsPath("deployment/overview")}>CLI deploy command</TextLink> to
-        deploy your tasks to the {environmentFullTitle(environment)} environment.
-      </Paragraph>
-    </InfoPanel>
+    <PackageManagerProvider>
+      <div>
+        <div className="mb-6 flex items-center justify-between border-b">
+          <div className="mb-2 flex items-center gap-2">
+            <EnvironmentIcon environment={environment} className="-ml-1 size-8" />
+            <Header1>Deploy your tasks to {environmentFullTitle(environment)}</Header1>
+          </div>
+          <div className="flex items-center gap-2">
+            <LinkButton
+              variant="minimal/small"
+              LeadingIcon={BookOpenIcon}
+              to={docsPath("/troubleshooting#deployment")}
+            >
+              Troubleshooting
+            </LinkButton>
+          </div>
+        </div>
+        <StepNumber stepNumber="1a" title="Run the CLI 'deploy' command" />
+        <StepContentContainer>
+          <Paragraph spacing>
+            This will deploy your tasks to the {environmentFullTitle(environment)} environment. Read
+            the <TextLink to={docsPath("deployment/overview")}>full guide</TextLink>.
+          </Paragraph>
+          <TriggerDeployStep environment={environment} />
+        </StepContentContainer>
+        <StepNumber stepNumber="1b" title="Or deploy using GitHub Actions" />
+        <StepContentContainer>
+          <Paragraph spacing>
+            Read the <TextLink to={docsPath("github-actions")}>GitHub Actions guide</TextLink> to
+            get started.
+          </Paragraph>
+        </StepContentContainer>
+        <StepNumber stepNumber="2" title="Waiting for tasks to deploy" displaySpinner />
+        <StepContentContainer>
+          <Paragraph>This page will automatically refresh when your tasks are deployed.</Paragraph>
+        </StepContentContainer>
+      </div>
+    </PackageManagerProvider>
   );
 }
 
diff --git a/apps/webapp/app/components/SetupCommands.tsx b/apps/webapp/app/components/SetupCommands.tsx
index e68273a0dbf..accb2f65a8f 100644
--- a/apps/webapp/app/components/SetupCommands.tsx
+++ b/apps/webapp/app/components/SetupCommands.tsx
@@ -208,3 +208,64 @@ export function TriggerLoginStepV3({ title }: TabsProps) {
     </ClientTabs>
   );
 }
+
+export function TriggerDeployStep({ title, environment }: TabsProps & { environment: { type: string } }) {
+  const triggerCliTag = useTriggerCliTag();
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
+  // Generate the environment flag based on environment type
+  const getEnvironmentFlag = () => {
+    switch (environment.type) {
+      case "STAGING":
+        return " --env staging";
+      case "PREVIEW":
+        return " --env preview";
+      case "PRODUCTION":
+      default:
+        return "";
+    }
+  };
+
+  const environmentFlag = getEnvironmentFlag();
+
+  return (
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
+      <div className="flex items-center gap-4">
+        {title && <Header3>{title}</Header3>}
+        <ClientTabsList className={title ? "ml-auto" : ""}>
+          <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
+          <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
+          <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
+        </ClientTabsList>
+      </div>
+      <ClientTabsContent value={"npm"}>
+        <ClipboardField
+          variant="secondary/medium"
+          iconButton
+          className="mb-4"
+          value={`npx trigger.dev@${triggerCliTag} deploy${environmentFlag}`}
+        />
+      </ClientTabsContent>
+      <ClientTabsContent value={"pnpm"}>
+        <ClipboardField
+          variant="secondary/medium"
+          iconButton
+          className="mb-4"
+          value={`pnpm dlx trigger.dev@${triggerCliTag} deploy${environmentFlag}`}
+        />
+      </ClientTabsContent>
+      <ClientTabsContent value={"yarn"}>
+        <ClipboardField
+          variant="secondary/medium"
+          iconButton
+          className="mb-4"
+          value={`yarn dlx trigger.dev@${triggerCliTag} deploy${environmentFlag}`}
+        />
+      </ClientTabsContent>
+    </ClientTabs>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
index 29efff3dc03..5c702acb78f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
@@ -77,7 +77,6 @@ import {
   type TaskActivity,
   type TaskListItem,
   taskListPresenter,
-  TaskListPresenter,
 } from "~/presenters/v3/TaskListPresenter.server";
 import {
   getUsefulLinksPreference,
@@ -411,7 +410,7 @@ export default function Page() {
                   <HasNoTasksDev />
                 </MainCenteredContainer>
               ) : (
-                <MainCenteredContainer className="max-w-md">
+                <MainCenteredContainer className="max-w-prose">
                   <HasNoTasksDeployed environment={environment} />
                 </MainCenteredContainer>
               )}

From 7dd2c1542554911f5588f003f69ef5d624f8b824 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 2 Aug 2025 22:42:30 +0100
Subject: [PATCH 2/2] Adds links to Ask AI, docs and troubleshooting

---
 .../app/components/BlankStatePanels.tsx       | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index b86296af6d7..713b057ca7c 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -5,6 +5,7 @@ import {
   ChatBubbleLeftRightIcon,
   ClockIcon,
   PlusIcon,
+  QuestionMarkCircleIcon,
   RectangleGroupIcon,
   RectangleStackIcon,
   ServerStackIcon,
@@ -31,6 +32,7 @@ import {
   v3NewProjectAlertPath,
   v3NewSchedulePath,
 } from "~/utils/pathBuilder";
+import { AskAI } from "./AskAI";
 import { InlineCode } from "./code/InlineCode";
 import { environmentFullTitle, EnvironmentIcon } from "./environments/EnvironmentLabel";
 import { Feedback } from "./Feedback";
@@ -41,6 +43,7 @@ import { InfoPanel } from "./primitives/InfoPanel";
 import { Paragraph } from "./primitives/Paragraph";
 import { StepNumber } from "./primitives/StepNumber";
 import { TextLink } from "./primitives/TextLink";
+import { SimpleTooltip } from "./primitives/Tooltip";
 import {
   InitCommandV3,
   PackageManagerProvider,
@@ -98,14 +101,30 @@ export function HasNoTasksDeployed({ environment }: { environment: MinimumEnviro
             <EnvironmentIcon environment={environment} className="-ml-1 size-8" />
             <Header1>Deploy your tasks to {environmentFullTitle(environment)}</Header1>
           </div>
-          <div className="flex items-center gap-2">
-            <LinkButton
-              variant="minimal/small"
-              LeadingIcon={BookOpenIcon}
-              to={docsPath("/troubleshooting#deployment")}
-            >
-              Troubleshooting
-            </LinkButton>
+          <div className="flex items-center">
+            <SimpleTooltip
+              button={
+                <LinkButton
+                  variant="small-menu-item"
+                  LeadingIcon={BookOpenIcon}
+                  leadingIconClassName="text-blue-500"
+                  to={docsPath("deployment/overview")}
+                />
+              }
+              content="Deploy docs"
+            />
+            <SimpleTooltip
+              button={
+                <LinkButton
+                  variant="small-menu-item"
+                  LeadingIcon={QuestionMarkCircleIcon}
+                  leadingIconClassName="text-blue-500"
+                  to={docsPath("troubleshooting#deployment")}
+                />
+              }
+              content="Troubleshooting docs"
+            />
+            <AskAI />
           </div>
         </div>
         <StepNumber stepNumber="1a" title="Run the CLI 'deploy' command" />