fix(webapp): restore admin debug tooltip on Tasks and Runs, make its IDs copyable

apps/webapp/app/components/admin/debugTooltip.tsx

@@ -1,4 +1,5 @@
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import * as Property from "~/components/primitives/PropertyTable";
 import {
   Tooltip,
@@ -25,7 +26,10 @@ export function AdminDebugTooltip({ children }: { children?: React.ReactNode })
         <TooltipTrigger>
           <ShieldCheckIcon className="size-5" />
         </TooltipTrigger>
-        <TooltipContent className="max-h-[90vh] overflow-y-auto">
+        {/* The copy controls below pass `hideTooltip` so their own tooltips don't fire
+            Radix's global close and dismiss this panel. `pr-8` leaves room for the
+            copy button, which is absolutely positioned to the right of each value. */}
+        <TooltipContent className="max-h-[90vh] overflow-y-auto pr-8">
           <Content>{children}</Content>
         </TooltipContent>
       </Tooltip>
@@ -44,31 +48,41 @@ function Content({ children }: { children: React.ReactNode }) {
       <Property.Table>
         <Property.Item>
           <Property.Label>User ID</Property.Label>
-          <Property.Value>{user.id}</Property.Value>
+          <Property.Value>
+            <CopyableText value={user.id} asChild hideTooltip />
+          </Property.Value>
         </Property.Item>
         {organization && (
           <Property.Item>
             <Property.Label>Org ID</Property.Label>
-            <Property.Value>{organization.id}</Property.Value>
+            <Property.Value>
+              <CopyableText value={organization.id} asChild hideTooltip />
+            </Property.Value>
           </Property.Item>
         )}
         {project && (
           <>
             <Property.Item>
               <Property.Label>Project ID</Property.Label>
-              <Property.Value>{project.id}</Property.Value>
+              <Property.Value>
+                <CopyableText value={project.id} asChild hideTooltip />
+              </Property.Value>
             </Property.Item>
             <Property.Item>
               <Property.Label>Project ref</Property.Label>
-              <Property.Value>{project.externalRef}</Property.Value>
+              <Property.Value>
+                <CopyableText value={project.externalRef} asChild hideTooltip />
+              </Property.Value>
             </Property.Item>
           </>
         )}
         {environment && (
           <>
             <Property.Item>
               <Property.Label>Environment ID</Property.Label>
-              <Property.Value>{environment.id}</Property.Value>
+              <Property.Value>
+                <CopyableText value={environment.id} asChild hideTooltip />
+              </Property.Value>
             </Property.Item>
             <Property.Item>
               <Property.Label>Environment type</Property.Label>
@@ -81,7 +95,7 @@ function Content({ children }: { children: React.ReactNode }) {
           </>
         )}
       </Property.Table>
-      <div className="pt-2">{children}</div>
+      {children && <div className="pt-2">{children}</div>}
     </div>
   );
 }

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

@@ -11,19 +11,44 @@ export function CopyableText({
   className,
   asChild,
   variant,
+  hideTooltip,
 }: {
   value: string;
   copyValue?: string;
   className?: string;
   asChild?: boolean;
   variant?: "icon-right" | "text-below";
+  /**
+   * Hide the "Copy"/"Copied" hint tooltip. Use when this is rendered inside another
+   * Radix tooltip (e.g. the admin debug panel): the nested tooltip would otherwise
+   * fire Radix's global "one tooltip open at a time" close and dismiss the parent.
+   */
+  hideTooltip?: boolean;
 }) {
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(copyValue ?? value);
 
   const resolvedVariant = variant ?? "icon-right";
 
   if (resolvedVariant === "icon-right") {
+    const iconButton = (
+      <span
+        className={cn(
+          "ml-1 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
+          asChild && "p-1",
+          copied
+            ? "text-green-500"
+            : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
+        )}
+      >
+        {copied ? (
+          <ClipboardCheckIcon className="size-3.5" />
+        ) : (
+          <ClipboardIcon className="size-3.5" />
+        )}
+      </span>
+    );
+
     return (
       <span
         className={cn("group relative inline-flex h-6 items-center", className)}
@@ -38,29 +63,17 @@ export function CopyableText({
             isHovered ? "flex" : "hidden"
           )}
         >
-          <SimpleTooltip
-            button={
-              <span
-                className={cn(
-                  "ml-1 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
-                  asChild && "p-1",
-                  copied
-                    ? "text-green-500"
-                    : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
-                )}
-              >
-                {copied ? (
-                  <ClipboardCheckIcon className="size-3.5" />
-                ) : (
-                  <ClipboardIcon className="size-3.5" />
-                )}
-              </span>
-            }
-            content={copied ? "Copied!" : "Copy"}
-            className="font-sans"
-            disableHoverableContent
-            asChild={asChild}
-          />
+          {hideTooltip ? (
+            iconButton
+          ) : (
+            <SimpleTooltip
+              button={iconButton}
+              content={copied ? "Copied!" : "Copy"}
+              className="font-sans"
+              disableHoverableContent
+              asChild={asChild}
+            />
+          )}
         </span>
       </span>
     );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

@@ -16,6 +16,7 @@ import { PlusIcon } from "~/assets/icons/PlusIcon";
 import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { InlineCode } from "~/components/code/InlineCode";
 import { HasNoTasksDeployed, HasNoTasksDev } from "~/components/BlankStatePanels";
@@ -261,6 +262,7 @@ export default function Page() {
       <NavBar>
         <PageTitle title="Tasks" accessory={<TasksHelpTooltip />} />
         <PageAccessories>
+          <AdminDebugTooltip />
           <LinkButton
             variant={"docs/small"}
             LeadingIcon={BookOpenIcon}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx

@@ -2,6 +2,7 @@ import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { type MetaFunction } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { InlineCode } from "~/components/code/InlineCode";
 import {
@@ -113,7 +114,9 @@ export default function Page() {
             <Property.Table>
               <Property.Item key={environment.id}>
                 <Property.Label>{environment.slug}</Property.Label>
-                <Property.Value>{environment.id}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={environment.id} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
             </Property.Table>
           </AdminDebugTooltip>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx

@@ -242,7 +242,9 @@ export default function Page() {
               {branches.map((branch) => (
                 <Property.Item key={branch.id}>
                   <Property.Label>{branch.branchName}</Property.Label>
-                  <Property.Value>{branch.id}</Property.Value>
+                  <Property.Value>
+                    <CopyableText value={branch.id} asChild hideTooltip />
+                  </Property.Value>
                 </Property.Item>
               ))}
             </Property.Table>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx

@@ -21,6 +21,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import simplur from "simplur";
 import { z } from "zod";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
 import { Feedback } from "~/components/Feedback";
 import {
@@ -270,7 +271,9 @@ export default function Page() {
                     {environment.type}{" "}
                     {environment.branchName ? ` (${environment.branchName})` : ""}
                   </Property.Label>
-                  <Property.Value>{environment.id}</Property.Value>
+                  <Property.Value>
+                    <CopyableText value={environment.id} asChild hideTooltip />
+                  </Property.Value>
                 </Property.Item>
               ))}
             </Property.Table>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx

@@ -18,6 +18,7 @@ import { GitMetadata } from "~/components/GitMetadata";
 import { VercelLink } from "~/components/integrations/VercelLink";
 import { RuntimeIcon } from "~/components/RuntimeIcon";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
 import { Badge } from "~/components/primitives/Badge";
 import { LinkButton } from "~/components/primitives/Buttons";
@@ -283,20 +284,28 @@ export default function Page() {
           <Property.Table>
             <Property.Item>
               <Property.Label>ID</Property.Label>
-              <Property.Value>{deployment.id}</Property.Value>
+              <Property.Value>
+                <CopyableText value={deployment.id} asChild hideTooltip />
+              </Property.Value>
             </Property.Item>
             <Property.Item>
               <Property.Label>Project ID</Property.Label>
-              <Property.Value>{deployment.projectId}</Property.Value>
+              <Property.Value>
+                <CopyableText value={deployment.projectId} asChild hideTooltip />
+              </Property.Value>
             </Property.Item>
             <Property.Item>
               <Property.Label>Org ID</Property.Label>
-              <Property.Value>{deployment.organizationId}</Property.Value>
+              <Property.Value>
+                <CopyableText value={deployment.organizationId} asChild hideTooltip />
+              </Property.Value>
             </Property.Item>
             {deployment.imageReference && (
               <Property.Item>
                 <Property.Label>Image</Property.Label>
-                <Property.Value>{deployment.imageReference}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={deployment.imageReference} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
             )}
             <Property.Item>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev-branches/route.tsx

@@ -95,7 +95,9 @@ export default function Page() {
               {branches.map((branch) => (
                 <Property.Item key={branch.id}>
                   <Property.Label>{branch.branchName}</Property.Label>
-                  <Property.Value>{branch.id}</Property.Value>
+                  <Property.Value>
+                    <CopyableText value={branch.id} asChild hideTooltip />
+                  </Property.Value>
                 </Property.Item>
               ))}
             </Property.Table>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx

@@ -7,6 +7,7 @@ import { Gauge } from "lucide-react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { Feedback } from "~/components/Feedback";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { EnvironmentSelector } from "~/components/navigation/EnvironmentSelector";
@@ -125,7 +126,9 @@ export default function Page() {
               </Property.Item>
               <Property.Item>
                 <Property.Label>Organization ID</Property.Label>
-                <Property.Value>{data.organizationId}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={data.organizationId} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
             </Property.Table>
           </AdminDebugTooltip>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -163,7 +163,9 @@ export default function Page() {
               {regions.map((region) => (
                 <Property.Item key={region.id}>
                   <Property.Label>{region.name}</Property.Label>
-                  <Property.Value>{region.id}</Property.Value>
+                  <Property.Value>
+                    <CopyableText value={region.id} asChild hideTooltip />
+                  </Property.Value>
                 </Property.Item>
               ))}
             </Property.Table>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -489,19 +489,27 @@ export default function Page() {
             <Property.Table>
               <Property.Item>
                 <Property.Label>ID</Property.Label>
-                <Property.Value>{run.id}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={run.id} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
               <Property.Item>
                 <Property.Label>Trace ID</Property.Label>
-                <Property.Value>{run.traceId}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={run.traceId} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
               <Property.Item>
                 <Property.Label>Env ID</Property.Label>
-                <Property.Value>{run.environment.id}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={run.environment.id} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
               <Property.Item>
                 <Property.Label>Org ID</Property.Label>
-                <Property.Value>{run.environment.organizationId}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={run.environment.organizationId} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
             </Property.Table>
           </AdminDebugTooltip>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx

@@ -11,6 +11,7 @@ import {
 import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
 import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { DevDisconnectedBanner, useDevPresence } from "~/components/DevPresence";
 import { InlineCode } from "~/components/code/InlineCode";
 import { StepContentContainer } from "~/components/StepContentContainer";
@@ -166,6 +167,7 @@ export default function Page() {
           <DevDisconnectedBanner isConnected={isConnected} />
         )}
         <PageAccessories>
+          <AdminDebugTooltip />
           <LinkButton
             variant={"docs/small"}
             LeadingIcon={BookOpenIcon}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx

@@ -2,9 +2,9 @@ import { Outlet, type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
-import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { useProject } from "~/hooks/useProject";
 import { requireUserId } from "~/services/session.server";
 import {
@@ -55,14 +55,15 @@ export default function SettingsLayout() {
             <Property.Table>
               <Property.Item>
                 <Property.Label>ID</Property.Label>
-                <Property.Value>{project.id}</Property.Value>
-                <div className="flex items-center gap-2">
-                  <Paragraph variant="extra-small/bright/mono">{project.id}</Paragraph>
-                </div>
+                <Property.Value>
+                  <CopyableText value={project.id} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
               <Property.Item>
                 <Property.Label>Org ID</Property.Label>
-                <Property.Value>{project.organizationId}</Property.Value>
+                <Property.Value>
+                  <CopyableText value={project.organizationId} asChild hideTooltip />
+                </Property.Value>
               </Property.Item>
             </Property.Table>
           </AdminDebugTooltip>