feat(pull-requests): copy provider checkout commands

apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx

@@ -16,6 +16,7 @@ import {
   BookOpenIcon,
   CircleDotIcon,
   ChevronDownIcon,
+  CopyIcon,
   ExternalLinkIcon,
   FileDiffIcon,
   FolderGit2Icon,
@@ -468,6 +469,16 @@ export function PullRequestDetailPanel({
     target: "branch name",
     timeout: 1600,
   });
+  const { copyToClipboard: copyCheckoutCommandToClipboard } = useCopyToClipboard({
+    target: "pull request checkout command",
+    onCopy: () => toastManager.add({ type: "success", title: "Checkout command copied" }),
+    onError: (error) =>
+      toastManager.add({
+        type: "error",
+        title: "Could not copy checkout command",
+        description: error.message,
+      }),
+  });
   // The chunk is fetched as soon as the panel exists rather than waiting for the Code tab to be
   // clicked, so a reader who does click it lands on a chunk already in the module cache.
   useEffect(() => {
@@ -507,6 +518,24 @@ export function PullRequestDetailPanel({
     [activity, coreDetail],
   );
   const repositoryUrl = detail === null ? null : changeRequestRepositoryUrl(detail.url);
+  const checkoutCommand = detail?.provider === "github" ? `gh pr checkout ${detail.number}` : null;
+  const checkoutCommandCopyButton = checkoutCommand ? (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            size="icon-micro"
+            variant="ghost-muted"
+            aria-label={`Copy ${checkoutCommand}`}
+            onClick={() => copyCheckoutCommandToClipboard(checkoutCommand)}
+          />
+        }
+      >
+        <CopyIcon aria-hidden className="size-3" />
+      </TooltipTrigger>
+      <TooltipPopup side="top">Copy {checkoutCommand}</TooltipPopup>
+    </Tooltip>
+  ) : null;
   const branchRefsQuery = useEnvironmentQuery(
     detail === null
       ? null
@@ -1579,6 +1608,7 @@ export function PullRequestDetailPanel({
                       />
                       <TooltipPopup side="top">{detail.headBranch}</TooltipPopup>
                     </Tooltip>
+                    {checkoutCommandCopyButton}
                   </span>
                   <span className="ml-auto inline-flex shrink-0 items-center justify-end gap-2 text-[11px]">
                     <span
@@ -1758,6 +1788,7 @@ export function PullRequestDetailPanel({
                         {`${isBranchCopied ? "Copied" : "Copy pull request branch"}: ${detail.headBranch}`}
                       </TooltipPopup>
                     </Tooltip>
+                    {checkoutCommandCopyButton}
                   </span>
                   <span className="ml-auto inline-flex shrink-0 items-center justify-end gap-2">
                     <span className="inline-flex items-center gap-1.5 tabular-nums">