feat(frontend): create-agent flow — picking a template IS creating the agent

web/oss/src/components/AgentChatSlice/AgentConversation.tsx

@@ -21,10 +21,7 @@ import {
     filesDrawerOpenAtomFamily,
     filesDrawerStagedAtomFamily,
 } from "@/oss/components/Drives/SessionFilesDrawer"
-import {TEMPLATE_STRIP_MODE} from "@/oss/components/pages/agent-home/assets/constants"
 import {openTraceDrawerAtom} from "@/oss/components/SharedDrawers/TraceDrawer/store/traceDrawerStore"
-import {STRIP_COPY} from "@/oss/components/TemplateStrip/assets/constants"
-import CopiedToast from "@/oss/components/TemplateStrip/components/CopiedToast"
 
 import {describeAccepted} from "./assets/attachments"
 import {CONTENT_VISIBILITY_ENABLED} from "./assets/conversationLayout"
@@ -727,14 +724,6 @@ const AgentConversation = ({
                         />
                     </div>
                 </RightPanelSplit>
-
-                {TEMPLATE_STRIP_MODE ? (
-                    <CopiedToast
-                        open={onboardingChat.copiedToastOpen}
-                        text={STRIP_COPY.copiedToast}
-                        onDone={() => onboardingChat.setCopiedToastOpen(false)}
-                    />
-                ) : null}
             </div>
         </DriveSessionProvider>
     )

web/oss/src/components/AgentChatSlice/components/AgentComposerDock.tsx

@@ -125,7 +125,6 @@ const AgentComposerDock = ({
         streamIdeBubble,
         ideHandoffActive,
         handleStartOver,
-        handleCodingAgentCopy,
         showBareOnboardingHero,
     } = onboardingChat
     const {
@@ -377,7 +376,6 @@ const AgentComposerDock = ({
                                         // (shared component), with the one-click copy + toast handoff.
                                         <AgentIntentActions
                                             onCreate={handleCreateAgent}
-                                            onCodingAgentCopy={handleCodingAgentCopy}
                                             loading={!!onboarding?.committing}
                                         />
                                     ) : (

web/oss/src/components/AgentChatSlice/hooks/useOnboardingChat.ts

@@ -4,7 +4,6 @@ import {workflowMolecule} from "@agenta/entities/workflow"
 import {generateId} from "@agenta/shared/utils"
 import {type RichChatInputHandle} from "@agenta/ui/rich-chat-input"
 import {type UIMessage} from "ai"
-import {App} from "antd"
 import {useAtomValue} from "jotai"
 
 import {
@@ -18,7 +17,6 @@ import {
 } from "@/oss/components/pages/agent-home/assets/onboardingAnalytics"
 import {type AgentTemplate} from "@/oss/components/pages/agent-home/assets/templates"
 import {useOptionalOnboardingContext} from "@/oss/components/pages/agent-home/PlaygroundOnboarding/OnboardingContext"
-import {buildCodingAgentClipboard} from "@/oss/components/TemplateStrip/assets/codingAgentClipboard"
 import {useTemplateProvenance} from "@/oss/components/TemplateStrip/hooks/useTemplateProvenance"
 import {usePostHogAg} from "@/oss/lib/helpers/analytics/hooks/usePostHogAg"
 
@@ -52,7 +50,6 @@ export const useOnboardingChat = ({
     // eases in a beat later (see `chromeRevealed`) so it doesn't move the composer during the send.
     const chromeHidden = !!onboarding && !onboarding.chromeRevealed
     const onboardingPosthog = usePostHogAg()
-    const {message: appMessage} = App.useApp()
 
     // ── Template strip (TEMPLATE_STRIP_MODE) ─────────────────────────────────
     // One provenance instance per panel, shared by the onboarding hero strip (S5) and the
@@ -76,7 +73,6 @@ export const useOnboardingChat = ({
     const revisionVersion = revisionQuery.data?.version
     const isFreshAgentRevision =
         !revisionQuery.isPending && typeof revisionVersion === "number" && revisionVersion <= 1
-    const [copiedToastOpen, setCopiedToastOpen] = useState(false)
     const handleStripPick = useCallback(
         (template: AgentTemplate) => {
             stripProvenance.pick(template)
@@ -94,20 +90,6 @@ export const useOnboardingChat = ({
         },
         [stripProvenance.pick, onboardingPosthog, onboardingActive],
     )
-    const handleCodingAgentCopy = useCallback(async () => {
-        const text = richInputRef.current?.getMarkdown().trim() ?? ""
-        try {
-            await navigator.clipboard.writeText(buildCodingAgentClipboard(text))
-            setCopiedToastOpen(true)
-        } catch {
-            appMessage.error("Couldn't copy — copy it manually")
-            return
-        }
-        captureFirstAgentIntent(onboardingPosthog, {
-            source: "composer",
-            properties: {action: "coding_agent_copy", message: truncateForCapture(text)},
-        })
-    }, [appMessage, onboardingPosthog])
 
     // Optimistic first turn: the description the user submitted with "Create agent", shown as a sent
     // user message + assistant loading placeholder DURING commit + until the real conversation takes
@@ -264,9 +246,6 @@ export const useOnboardingChat = ({
         selectedTemplateKey: stripProvenance.selectedTemplateKey,
         handleStripPick,
         isFreshAgentRevision,
-        copiedToastOpen,
-        setCopiedToastOpen,
-        handleCodingAgentCopy,
         pendingFirstTurn,
         pendingFirstMessage,
         handleCreateAgent,

web/oss/src/components/TemplateStrip/assets/constants.ts

@@ -6,19 +6,12 @@ export const STRIP_COPY = {
     showAgain: "show again",
     hideMenuItem: "Don't show again",
     fromTemplate: "From template:",
-    useCodingAgent: "Use my coding agent",
     createAgent: "Create agent",
     creatingAgent: "Creating agent",
-    copiedToast: "Copied — paste into Claude Code, Cursor, Codex, or any coding agent",
     // Single source for every "describe an agent" composer (home hero + playground onboarding).
     describeAgentPlaceholder:
         "e.g. Watch our #support channel, triage each thread by urgency, and route it to the right owner — ask me before closing anything.",
 } as const
 
-/** Owner-specified install command (differs from the flag-off IDE_INSTALL_COMMAND on purpose). */
-export const CODING_AGENT_INSTALL = "npx skills add Agenta-AI/agenta-skills"
-
 /** Owner-specified key (matches the design prototype; intentionally not "agenta:"-prefixed). */
 export const STRIP_HIDDEN_STORAGE_KEY = "agenta-tpl-strip-hidden"
-
-export const TOAST_DISMISS_MS = 2600

web/oss/src/components/TemplateStrip/components/AgentIntentActions.tsx

@@ -1,13 +1,11 @@
-import {ArrowRight, Terminal} from "@phosphor-icons/react"
+import {ArrowRight} from "@phosphor-icons/react"
 import {Button} from "antd"
 
 import {STRIP_COPY} from "../assets/constants"
 
 interface AgentIntentActionsProps {
     /** Create the agent from the composer's current text. */
     onCreate: () => void
-    /** Copy the coding-agent install command + current text to the clipboard. */
-    onCodingAgentCopy: () => void
     /** Create is in flight (e.g. committing the ephemeral) — spins the button and swaps its label. */
     loading?: boolean
 }
@@ -16,11 +14,8 @@ interface AgentIntentActionsProps {
  * The trailing action cluster every "describe an agent" composer shares (home hero and the
  * playground onboarding composer), so the surfaces can't drift apart again.
  */
-const AgentIntentActions = ({onCreate, onCodingAgentCopy, loading}: AgentIntentActionsProps) => (
+const AgentIntentActions = ({onCreate, loading}: AgentIntentActionsProps) => (
     <div className="flex items-center gap-2">
-        <Button icon={<Terminal size={14} />} onClick={onCodingAgentCopy} className="!shadow-none">
-            {STRIP_COPY.useCodingAgent}
-        </Button>
         <Button
             type="primary"
             icon={<ArrowRight size={14} />}

web/oss/src/components/TemplateStrip/components/StripCard.tsx

@@ -1,3 +1,5 @@
+import {CircleNotchIcon} from "@phosphor-icons/react"
+
 import {
     templateProviderSlugs,
     type AgentTemplate,
@@ -15,20 +17,34 @@ const StripCard = ({
     selected,
     onPick,
     fluid = false,
+    loading = false,
+    disabled = false,
 }: {
     template: AgentTemplate
     selected: boolean
     onPick: (template: AgentTemplate) => void
     fluid?: boolean
+    /** This card's agent is being created — spins its monogram and blocks re-clicks. */
+    loading?: boolean
+    /** Another card's create is in flight. */
+    disabled?: boolean
 }) => (
     <button
         type="button"
         aria-pressed={selected}
+        aria-busy={loading}
+        disabled={loading || disabled}
         onClick={() => onPick(template)}
-        className={`${fluid ? "w-full" : "w-[238px] flex-none snap-start"} cursor-pointer rounded-xl border-[1.5px] border-solid ${fluid ? "p-5" : "p-[15px]"} text-left transition-[border-color,box-shadow] duration-150 ${
+        className={`${fluid ? "w-full" : "w-[238px] flex-none snap-start"} rounded-xl border-[1.5px] border-solid ${fluid ? "p-5" : "p-[15px]"} text-left transition-[border-color,box-shadow] duration-150 ${
+            loading || disabled ? "cursor-default" : "cursor-pointer"
+        } ${disabled ? "opacity-60" : ""} ${
             selected
                 ? "border-[var(--ag-colorPrimary)] bg-[var(--ag-strip-selected-bg)]"
-                : "border-[var(--ag-strip-card-border)] bg-[var(--ag-strip-card-bg)] hover:border-[var(--ag-strip-card-border-hover)] hover:shadow-[var(--ag-strip-card-hover-shadow)]"
+                : `border-[var(--ag-strip-card-border)] bg-[var(--ag-strip-card-bg)] ${
+                      loading || disabled
+                          ? ""
+                          : "hover:border-[var(--ag-strip-card-border-hover)] hover:shadow-[var(--ag-strip-card-hover-shadow)]"
+                  }`
         }`}
     >
         <div className={`${fluid ? "mb-4" : "mb-[11px]"} flex items-start justify-between`}>
@@ -38,7 +54,11 @@ const StripCard = ({
                 }`}
                 style={{background: template.color}}
             >
-                {template.initials}
+                {loading ? (
+                    <CircleNotchIcon size={fluid ? 18 : 15} className="animate-spin" />
+                ) : (
+                    template.initials
+                )}
             </span>
             <IntegrationBadges slugs={templateProviderSlugs(template)} />
         </div>

web/oss/src/components/TemplateStrip/components/StripComposer.tsx

@@ -15,8 +15,6 @@ interface StripComposerProps {
      * nothing and the caller reads the ref.
      */
     onCreate: (markdown?: string) => void
-    /** Copy the coding-agent install command + current text to the clipboard. */
-    onCodingAgentCopy: () => void
     /** Chip-docking border/radius classes from `useTemplateProvenance`. */
     composerClassName: string
     /** Forwarded to `RichChatInput`'s `onChange` — lets provenance notice the text going empty. */
@@ -35,7 +33,6 @@ interface StripComposerProps {
 const StripComposer = ({
     composerRef,
     onCreate,
-    onCodingAgentCopy,
     composerClassName,
     onTextChange,
     loading,
@@ -51,13 +48,7 @@ const StripComposer = ({
             minHeightClassName="min-h-24"
             textSizeClassName="text-sm"
             className={composerClassName}
-            trailing={
-                <AgentIntentActions
-                    onCreate={() => onCreate()}
-                    onCodingAgentCopy={onCodingAgentCopy}
-                    loading={loading}
-                />
-            }
+            trailing={<AgentIntentActions onCreate={() => onCreate()} loading={loading} />}
         />
     )
 }

web/oss/src/components/TemplateStrip/index.tsx

@@ -44,6 +44,8 @@ export interface TemplateStripProps {
      * doesn't have, so rows stack and the categories collapse into a menu.
      */
     layout?: "scroll" | "grid" | "list"
+    /** Template whose agent is being created by `onPick` — spins that card, dims the rest. */
+    pendingTemplateKey?: string | null
     className?: string
 }
 
@@ -88,6 +90,7 @@ const TemplateStrip = ({
     onHide,
     surfaceColorVar = "--ag-colorBgContainer",
     layout = "scroll",
+    pendingTemplateKey = null,
     className,
 }: TemplateStripProps) => {
     const hideable = surface !== "home"
@@ -337,6 +340,8 @@ const TemplateStrip = ({
                             fluid
                             selected={template.key === selectedTemplateKey}
                             onPick={onPick}
+                            loading={template.key === pendingTemplateKey}
+                            disabled={!!pendingTemplateKey && template.key !== pendingTemplateKey}
                         />
                     ))}
                 </div>