feat(webapp): admin copy public URL action

Mono-RevId: 30aedb04e1b3e9e8dcff0ad1c1e1313048238e86

Author: nicktrn

apps/webapp/app/components/GlobalShortcuts.tsx

@@ -1,5 +1,6 @@
 import { useNavigate, useSubmit } from "@remix-run/react";
 import { useEffect } from "react";
+import { useCopyPublicUrl } from "~/hooks/useCopyPublicUrl";
 import { useIsImpersonating } from "~/hooks/useOrganizations";
 import { useOptionalUser } from "~/hooks/useUser";
 import { adminPath } from "~/utils/pathBuilder";
@@ -10,13 +11,21 @@ export function GlobalShortcuts() {
   const isImpersonating = useIsImpersonating();
   const navigate = useNavigate();
   const submit = useSubmit();
+  const copyPublicUrl = useCopyPublicUrl();
 
   const isAdmin = Boolean(user?.admin) || isImpersonating;
 
   useEffect(() => {
     if (!isAdmin) return;
 
     const onKeyDown = (event: KeyboardEvent) => {
+      if (event.code === "KeyL" && event.altKey && (event.metaKey || event.ctrlKey)) {
+        if (!copyPublicUrl.enabled) return;
+        event.preventDefault();
+        if (!event.repeat) copyPublicUrl.copy();
+        return;
+      }
+
       // Admin escape hatch: Cmd+Option+A (Ctrl+Alt+A on Windows) opens the admin dashboard, or stops
       // impersonating. Avoids Escape — Chrome/macOS never delivers a keydown for Escape+modifier (why
       // the old Cmd+Esc did nothing). Matched on `event.code`, not `event.key`, because Option makes
@@ -34,7 +43,7 @@ export function GlobalShortcuts() {
 
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, [isAdmin, isImpersonating, navigate, submit]);
+  }, [isAdmin, isImpersonating, navigate, submit, copyPublicUrl]);
 
   return null;
 }

apps/webapp/app/components/Shortcuts.tsx

@@ -6,6 +6,7 @@ import { useDashboardAgentAvailable } from "~/components/dashboard-agent/dashboa
 import { NEW_CHAT_SHORTCUT } from "~/components/dashboard-agent/DashboardAgentHeader";
 import { TOGGLE_PANEL_SHORTCUT } from "~/components/dashboard-agent/dashboardAgentLauncher";
 import { COLUMNS_SHORTCUT } from "~/components/runs/v3/RunsDisplayOptions";
+import { useCopyPublicUrl } from "~/hooks/useCopyPublicUrl";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Header3 } from "./primitives/Headers";
 import { SideMenuItemButton } from "./navigation/SideMenuItem";
@@ -48,6 +49,7 @@ export function ShortcutsAutoOpen() {
 
 function ShortcutContent() {
   const agent = useDashboardAgentAvailable();
+  const copyPublicUrl = useCopyPublicUrl();
   const rows = aiShortcutRows({ agent });
   const shows = (row: AiShortcutRow) => rows.includes(row);
 
@@ -111,6 +113,12 @@ function ShortcutContent() {
             <Shortcut name="Help & Feedback">
               <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
             </Shortcut>
+            {copyPublicUrl.enabled && (
+              <Shortcut name="Copy public URL">
+                <ShortcutKey shortcut={{ modifiers: ["mod", "alt"] }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "l" }} variant="medium/bright" />
+              </Shortcut>
+            )}
           </div>
           {shows("agent-new-chat") && (
             <div className="space-y-3">

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -51,6 +51,7 @@ import { SlackIcon } from "~/assets/icons/SlackIcon";
 import { VercelLogo } from "~/components/integrations/VercelLogo";
 import { Avatar } from "~/components/primitives/Avatar";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
+import { useCopyPublicUrl } from "~/hooks/useCopyPublicUrl";
 import { type MatchedEnvironment } from "~/hooks/useEnvironment";
 import { usePageSwitcher } from "~/hooks/useEnvironmentSwitcher";
 import { useFeatureFlags } from "~/hooks/useFeatureFlags";
@@ -1622,7 +1623,11 @@ function OrgSelector({
         {isCollapsed && (
           <div className="border-t border-grid-bright p-1">
             <SideMenuPopoverSubMenu title="Account" icon={<UserProfilePhoto className="size-5" />}>
-              <AccountMenuItems isAdmin={isAdmin} isImpersonating={isImpersonating} />
+              <AccountMenuItems
+                isAdmin={isAdmin}
+                isImpersonating={isImpersonating}
+                onClose={() => setOrgMenuOpen(false)}
+              />
             </SideMenuPopoverSubMenu>
           </div>
         )}
@@ -1638,11 +1643,14 @@ function OrgSelector({
 function AccountMenuItems({
   isAdmin,
   isImpersonating,
+  onClose,
 }: {
   isAdmin: boolean;
   isImpersonating: boolean;
+  onClose: () => void;
 }) {
   const submit = useSubmit();
+  const copyPublicUrl = useCopyPublicUrl();
   const stopImpersonating = () =>
     submit(null, { action: "/resources/impersonation", method: "delete" });
 
@@ -1688,6 +1696,26 @@ function AccountMenuItems({
               className={SIDE_MENU_POPOVER_ITEM_LABEL}
             />
           )}
+          {copyPublicUrl.enabled && (
+            <PopoverMenuItem
+              title={
+                <div className="flex w-full items-center justify-between">
+                  <span>Copy public URL</span>
+                  <ShortcutKey
+                    shortcut={{ modifiers: ["mod", "alt"], key: "l" }}
+                    variant="medium/bright"
+                  />
+                </div>
+              }
+              icon={ChainLinkIcon}
+              onClick={() => {
+                copyPublicUrl.copy();
+                onClose();
+              }}
+              leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+              className={SIDE_MENU_POPOVER_ITEM_LABEL}
+            />
+          )}
         </div>
       )}
       <div className="flex flex-col gap-1 p-1">
@@ -1785,7 +1813,11 @@ function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImperso
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
         <PopoverSectionHeader title="Account" />
-        <AccountMenuItems isAdmin={isAdmin} isImpersonating={isImpersonating} />
+        <AccountMenuItems
+          isAdmin={isAdmin}
+          isImpersonating={isImpersonating}
+          onClose={() => setIsOpen(false)}
+        />
       </PopoverContent>
     </Popover>
   );

apps/webapp/app/hooks/useAppOrigin.ts

@@ -6,3 +6,9 @@ export function useAppOrigin() {
 
   return routeMatch!.appOrigin;
 }
+
+export function usePublicAppOrigin(): string | undefined {
+  const routeMatch = useTypedRouteLoaderData<typeof loader>("root");
+
+  return routeMatch!.publicAppOrigin;
+}

apps/webapp/app/hooks/useCopyPublicUrl.ts

@@ -0,0 +1,31 @@
+import { useLocation } from "@remix-run/react";
+import { useToast } from "~/components/primitives/Toast";
+import { useAppOrigin, usePublicAppOrigin } from "~/hooks/useAppOrigin";
+import { useHasAdminAccess } from "~/hooks/useUser";
+
+export function useCopyPublicUrl(): { enabled: boolean; copy: () => void } {
+  const { pathname, search, hash } = useLocation();
+  const appOrigin = useAppOrigin();
+  const publicAppOrigin = usePublicAppOrigin();
+  const hasAdminAccess = useHasAdminAccess();
+  const toast = useToast();
+
+  const isInternalPath = pathname.startsWith("/admin") || pathname.startsWith("/@");
+  const enabled =
+    hasAdminAccess &&
+    publicAppOrigin !== undefined &&
+    publicAppOrigin !== appOrigin &&
+    !isInternalPath;
+
+  const copy = () => {
+    if (!enabled) return;
+
+    const publicUrl = new URL(pathname + search + hash, publicAppOrigin).toString();
+    navigator.clipboard.writeText(publicUrl).then(
+      () => toast.success("Copied public URL"),
+      () => toast.error("Couldn't copy public URL")
+    );
+  };
+
+  return { enabled, copy };
+}

apps/webapp/app/root.tsx

@@ -137,6 +137,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       features,
       appEnv: env.APP_ENV,
       appOrigin: env.APP_ORIGIN,
+      publicAppOrigin: env.PUBLIC_APP_ORIGIN,
       apiOrigin: env.API_ORIGIN ?? env.APP_ORIGIN,
       dashboardAgentBaseUrl: env.DASHBOARD_AGENT_BASE_URL ?? "https://api.trigger.dev",
       triggerCliTag: env.TRIGGER_CLI_TAG,