From 17a86a694bba25f315874b59b51365d099379ea1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 27 Aug 2026 18:07:10 +0000
Subject: [PATCH] fix(webapp): polish AI agent setup panel on tasks blank state

Refine the "Set it up with your AI agent" onboarding panel: top-align the
badge icon and switch it to the custom Ask AI sparkle icon, stop the copy
button from resizing when it swaps to "Copied prompt" (bright check icon
now sits beside the label), drop the sparkle from the button's idle state,
remove the spinner next to "Start the dev server", and widen the gap
between the panel text and the copy button.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../app/components/BlankStatePanels.tsx       |  9 ++++---
 apps/webapp/app/components/SetupCommands.tsx  | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index d2d1a4e88b0..686c01e36e8 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -5,11 +5,11 @@ import {
   ChatBubbleLeftRightIcon,
   PlusIcon,
   QuestionMarkCircleIcon,
-  SparklesIcon,
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
 import { AIChatIcon } from "~/assets/icons/AIChatIcon";
 import { AIPenIcon } from "~/assets/icons/AIPenIcon";
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 import openBulkActionsPanel from "~/assets/images/open-bulk-actions-panel.png";
@@ -132,8 +132,8 @@ export function HasNoTasksDev({ initializedAt }: { initializedAt: Date | string
         {!initialized && (
           <>
             <div className="flex flex-col gap-4 rounded-md border border-indigo-400/20 bg-indigo-800/10 p-4 sm:flex-row sm:items-center">
-              <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-indigo-500/15 text-indigo-400">
-                <SparklesIcon className="size-5" />
+              <span className="flex size-9 shrink-0 items-center justify-center self-start rounded-md bg-indigo-500/15 text-indigo-400">
+                <AISparkleIcon className="size-5" />
               </span>
               <div className="min-w-0 flex-1">
                 <Paragraph className="text-text-bright">Set it up with your AI agent</Paragraph>
@@ -142,7 +142,7 @@ export function HasNoTasksDev({ initializedAt }: { initializedAt: Date | string
                   includes your project reference.
                 </Paragraph>
               </div>
-              <div className="shrink-0">
+              <div className="shrink-0 sm:ml-4">
                 <InitAgentPromptV3 />
               </div>
             </div>
@@ -181,7 +181,6 @@ export function HasNoTasksDev({ initializedAt }: { initializedAt: Date | string
           stepNumber="2"
           title={devConnected ? "Dev server connected" : "Start the dev server"}
           complete={devConnected}
-          displaySpinner={!devConnected}
         />
         <StepContentContainer>
           {devConnected ? (
diff --git a/apps/webapp/app/components/SetupCommands.tsx b/apps/webapp/app/components/SetupCommands.tsx
index 1e9cda1255e..12c25b49925 100644
--- a/apps/webapp/app/components/SetupCommands.tsx
+++ b/apps/webapp/app/components/SetupCommands.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon, SparklesIcon } from "@heroicons/react/20/solid";
+import { CheckIcon } from "@heroicons/react/20/solid";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
@@ -180,19 +180,25 @@ export function InitAgentPromptV3() {
     void navigator.clipboard.writeText(prompt).catch(() => {});
   };
 
+  // The idle label is the longest, so reserve its width to stop the button from
+  // resizing when it briefly swaps to the shorter "Copied prompt".
+  const idleLabel = "Copy AI agent prompt";
+
   return (
     <SimpleTooltip
       asChild
       tabbable
       button={
-        <Button
-          type="button"
-          variant="primary/medium"
-          LeadingIcon={copied ? CheckIcon : SparklesIcon}
-          leadingIconClassName={copied ? "text-success" : undefined}
-          onClick={onCopy}
-        >
-          {copied ? "Copied prompt" : "Copy AI agent prompt"}
+        <Button type="button" variant="primary/medium" onClick={onCopy}>
+          <span className="grid justify-items-center">
+            <span className="col-start-1 row-start-1 flex items-center gap-x-1.5">
+              {copied && <CheckIcon className="size-4 shrink-0 text-text-bright" />}
+              <span>{copied ? "Copied prompt" : idleLabel}</span>
+            </span>
+            <span aria-hidden className="invisible col-start-1 row-start-1">
+              {idleLabel}
+            </span>
+          </span>
         </Button>
       }
       content="Copies a setup prompt to paste into Claude Code, Cursor, or any coding agent"