feat: add copy AI prompt button to org projects settings page

Adds a copy-AI-prompt button to the organization Projects settings page,
shown when projects need a runtime upgrade, so the prompt can be pasted
into a coding agent to perform the upgrade.

Mono-RevId: e27230fc359ffb8e183382201d8da306eee825b4

Author: claude[bot]

.server-changes/copy-ai-prompt-runtime-update.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Projects that need a Node.js runtime update can now be handed to a coding agent: the organization Projects settings page has a button that copies a ready-to-paste prompt listing every project to update.

apps/webapp/app/components/SetupCommands.tsx

@@ -1,18 +1,16 @@
-import { CheckIcon } from "@heroicons/react/20/solid";
-import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
 import { useTriggerCliTag } from "~/hooks/useTriggerCliTag";
-import { Button } from "./primitives/Buttons";
 import {
   ClientTabs,
   ClientTabsContent,
   ClientTabsList,
   ClientTabsTrigger,
 } from "./primitives/ClientTabs";
 import { ClipboardField } from "./primitives/ClipboardField";
+import { CopyAgentPromptButton } from "./primitives/CopyButton";
 import { Header3 } from "./primitives/Headers";
-import { SimpleTooltip } from "./primitives/Tooltip";
 
 type PackageManagerContextType = {
   activePackageManager: string;
@@ -165,43 +163,12 @@ export function InitAgentPromptV3() {
   const project = useProject();
   const apiUrl = useApiUrl();
   const cliTag = useTriggerCliTag();
-  const [copied, setCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const onCopy = () => {
-    const prompt = buildAgentSetupPrompt({
-      projectRef: project.externalRef,
-      apiUrl,
-      cliTag,
-    });
-    setCopied(true);
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setCopied(false), 2000);
-    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" 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"
+    <CopyAgentPromptButton
+      prompt={buildAgentSetupPrompt({ projectRef: project.externalRef, apiUrl, cliTag })}
+      label="Copy AI agent prompt"
+      tooltip="Copies a setup prompt to paste into Claude Code, Cursor, or any coding agent"
     />
   );
 }

apps/webapp/app/components/primitives/CopyButton.tsx

@@ -1,7 +1,9 @@
+import { CheckIcon } from "@heroicons/react/20/solid";
 import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { useCopy } from "~/hooks/useCopy";
 import { cn } from "~/utils/cn";
-import { Button } from "./Buttons";
+import { Button, type ButtonVariant } from "./Buttons";
 import { SimpleTooltip } from "./Tooltip";
 
 const sizes = {
@@ -117,3 +119,75 @@ export function CopyButton({
     </span>
   );
 }
+
+/**
+ * Copies a ready-to-paste AI agent prompt, briefly swapping its label to confirm.
+ *
+ * The prompt is built by the caller — it is long, page-specific text, not a value
+ * a user would ever want echoed in a tooltip, so this stays a plain button rather
+ * than reusing the `CopyButton` clipboard treatment above.
+ */
+export function CopyAgentPromptButton({
+  prompt,
+  label,
+  tooltip,
+  variant = "primary/medium",
+}: {
+  prompt: string;
+  /** Idle label. Keep it at least as long as "Copied prompt" — its width is reserved for it. */
+  label: string;
+  tooltip: string;
+  variant?: ButtonVariant;
+}) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const unmountedRef = useRef(false);
+
+  useEffect(
+    () => () => {
+      unmountedRef.current = true;
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+
+  const onCopy = async () => {
+    try {
+      // Throws when the clipboard API is unavailable (e.g. an insecure context) and
+      // rejects when the write is denied. Either way the prompt was not copied, so
+      // fall through without confirming it.
+      await navigator.clipboard.writeText(prompt);
+    } catch {
+      return;
+    }
+
+    if (unmountedRef.current) return;
+
+    setCopied(true);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <SimpleTooltip
+      asChild
+      tabbable
+      button={
+        <Button type="button" variant={variant} onClick={() => void 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" : label}</span>
+            </span>
+            {/* 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". */}
+            <span aria-hidden className="invisible col-start-1 row-start-1">
+              {label}
+            </span>
+          </span>
+        </Button>
+      }
+      content={tooltip}
+    />
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.projects/ProjectsPage.tsx

@@ -5,6 +5,7 @@ import { InlineCode } from "~/components/code/InlineCode";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
+import { CopyAgentPromptButton } from "~/components/primitives/CopyButton";
 import { DateTime } from "~/components/primitives/DateTime";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -29,6 +30,29 @@ const CONFIG_SNIPPET = `export default defineConfig({
 
 const CLI_COMMAND = "npx trigger.dev@latest projects list --needs-update";
 
+function buildRuntimeUpdatePrompt({
+  projects,
+  targetMajor,
+}: {
+  projects: ProjectRuntimeRow[];
+  targetMajor: number;
+}) {
+  const projectList = projects.map((project) => `- ${project.name} (${project.ref})`).join("\n");
+
+  return `Update these Trigger.dev projects to Node.js ${targetMajor}.
+
+They still deploy on Node.js ${NODE_RUNTIME_UPDATE_MAJOR} in production. Moving to Node.js ${targetMajor} is a one-field change in each project's trigger.config.ts.
+
+Projects to update:
+${projectList}
+
+How to do it:
+1. Find the trigger.config.ts for each project above — the reference in parentheses is its "project" field.
+2. In defineConfig, set runtime: "node-${targetMajor}", adding the field if it isn't there. Reference: https://trigger.dev/docs/config/config-file#runtime
+3. Deploy each project so the new runtime takes effect.
+4. Check that nothing is left by running: ${CLI_COMMAND}`;
+}
+
 /** A project and its current Production deployment, or `null` when it has never been deployed. */
 export type ProjectRuntimeRow = {
   name: string;
@@ -116,6 +140,22 @@ export function ProjectsPage({
                     />
                   }
                 />
+
+                <SettingsRow
+                  title="Or let your AI agent do it"
+                  description="Copy a ready-to-paste prompt for Claude Code, Cursor, or any coding agent. It includes every project that needs updating."
+                  action={
+                    <CopyAgentPromptButton
+                      prompt={buildRuntimeUpdatePrompt({
+                        projects: needsUpdate,
+                        targetMajor: NODE_RUNTIME_TARGET_MAJOR,
+                      })}
+                      label="Copy AI agent prompt"
+                      tooltip="Copies an update prompt to paste into Claude Code, Cursor, or any coding agent"
+                      variant="primary/small"
+                    />
+                  }
+                />
               </SettingsSection>
 
               <SettingsSection>