Merge branch 'main' into feature/tri-13446-redis-snapshot-store

Author: d-cs

.server-changes/runs-list-column-customization.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Customize the runs list: show, hide, and reorder columns, and add smart columns that pull a value straight out of a run's payload, metadata, or output. Your column choices are saved in the page URL, so you can share a view, bookmark it, or save it straight to your favorites.

.server-changes/vercel-version-skew-protection.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+New Vercel connections now get version skew protection turned on automatically, so each run uses the task version its deployment shipped with. Automatic atomic deployments are deprecated and no longer offered when you connect a project, but stay available in your Vercel integration settings.

apps/webapp/app/assets/icons/ColumnsIcon.tsx

@@ -0,0 +1,9 @@
+export function ColumnsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+      <line x1="9" y1="19" x2="9" y2="5" stroke="currentColor" strokeWidth="2" />
+      <line x1="15" y1="19" x2="15" y2="5" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ResetIcon.tsx

@@ -0,0 +1,20 @@
+export function ResetIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7 3L4 6L7 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 6H13.5C17.0899 6 20 8.91015 20 12.5C20 16.0899 17.0899 19 13.5 19H6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/SmartColumnIcon.tsx

@@ -0,0 +1,13 @@
+/** Marks a smart column: in the runs table header, the Columns popover, and the dialog preview. */
+export function SmartColumnIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.94723 12.4318L12.3011 3.53646C12.9468 2.63242 14.3689 3.24855 14.1511 4.33794L13.1543 9.32131C13.0905 9.64031 13.3346 9.93793 13.6599 9.93793H17.2138C18.0524 9.93793 18.5402 10.8859 18.0527 11.5682L11.6989 20.4636C11.0532 21.3676 9.63107 20.7515 9.84895 19.6621L10.8456 14.6788C10.9095 14.3598 10.6654 14.0621 10.3401 14.0621H6.78622C5.9476 14.0621 5.45978 13.1142 5.94723 12.4318Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/Shortcuts.tsx

@@ -6,6 +6,7 @@ import { ASK_AI_SHORTCUT, askAiCanOpen } from "~/components/dashboard-agent/ask-
 import { useDashboardAgentAvailable } from "~/components/dashboard-agent/dashboardAgentOpenRequest";
 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 { useAskAiAvailability } from "~/hooks/useAskAiAvailability";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Header3 } from "./primitives/Headers";
@@ -142,6 +143,9 @@ function ShortcutContent() {
           )}
           <div className="space-y-3">
             <Header3>Runs page</Header3>
+            <Shortcut name="Customize columns">
+              <ShortcutKey shortcut={COLUMNS_SHORTCUT} variant="medium/bright" />
+            </Shortcut>
             <Shortcut name="Bulk action: Cancel runs">
               <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
             </Shortcut>

apps/webapp/app/components/integrations/VercelBuildSettings.tsx

@@ -1,12 +1,14 @@
 import { Switch } from "~/components/primitives/Switch";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { Badge } from "~/components/primitives/Badge";
 import { Label } from "~/components/primitives/Label";
 import {
   SettingsRow,
   SettingsRowDescription,
   SettingsRowTitle,
 } from "~/components/primitives/SettingsLayout";
 import { cn } from "~/utils/cn";
+import { docsPath } from "~/utils/pathBuilder";
 import { Hint } from "~/components/primitives/Hint";
 import { TextLink } from "~/components/primitives/TextLink";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
@@ -17,6 +19,16 @@ import {
 } from "~/components/environments/EnvironmentLabel";
 import { envSlugToType, type EnvSlug } from "~/v3/vercel/vercelProjectIntegrationSchema";
 
+export const SKEW_PROTECTION_DOCS_PATH = docsPath("deployment/version-skew-protection");
+
+const SKEW_PROTECTION_MIN_SDK_VERSION: string | null = "4.5.12";
+
+export function skewProtectionVersionRequirement(): string {
+  return SKEW_PROTECTION_MIN_SDK_VERSION
+    ? `from SDK and CLI v${SKEW_PROTECTION_MIN_SDK_VERSION} and later`
+    : "from a recent SDK and CLI — see the docs for the exact version";
+}
+
 type BuildSettingsFieldsProps = {
   availableEnvSlugs: EnvSlug[];
   pullEnvVarsBeforeBuild: EnvSlug[];
@@ -38,6 +50,7 @@ type BuildSettingsFieldsProps = {
   currentTriggerVersionFetchFailed?: boolean;
   /** Hide the section-level master toggles for "Pull env vars" and "Discover new env vars". */
   hideSectionToggles?: boolean;
+  showAtomicDeployments?: boolean;
   layout?: "settings" | "card";
 };
 
@@ -56,6 +69,7 @@ export function BuildSettingsFields({
   currentTriggerVersion,
   currentTriggerVersionFetchFailed,
   hideSectionToggles,
+  showAtomicDeployments = true,
   layout = "card",
 }: BuildSettingsFieldsProps) {
   const isSlugDisabled = (slug: EnvSlug) => !!disabledEnvSlugs?.[slug];
@@ -126,7 +140,7 @@ export function BuildSettingsFields({
     ) : null;
 
   const atomicSections =
-    layout === "settings" ? (
+    layout === "settings" && showAtomicDeployments ? (
       <>
         <SettingsRow
           action={
@@ -140,11 +154,25 @@ export function BuildSettingsFields({
           }
         >
           <div className="flex-1 space-y-1">
-            <SettingsRowTitle>Atomic deployments</SettingsRowTitle>
+            <SettingsRowTitle>
+              <span className="flex items-center gap-2">
+                Atomic deployments <DeprecatedBadge />
+              </span>
+            </SettingsRowTitle>
             <SettingsRowDescription>
-              Promotes your Vercel deployment and your tasks together in Production, so your app
-              never runs against a mismatched task version. Requires turning off "Auto-assign Custom
-              Production Domains" on your Vercel project, which Trigger.dev does for you.{" "}
+              Version skew protection replaces this. It pins every run to the deployment that
+              triggered it, and works on its own {skewProtectionVersionRequirement()}. Atomic
+              deployments still work, so turn this off whenever you're ready.{" "}
+              <TextLink href={SKEW_PROTECTION_DOCS_PATH} target="_blank">
+                Read about version skew protection
+              </TextLink>
+              .
+            </SettingsRowDescription>
+            <SettingsRowDescription>
+              Atomic deployments promote your Vercel deployment and your tasks together in
+              Production, so your app never runs against a mismatched task version. This needs
+              "Auto-assign Custom Production Domains" turned off on your Vercel project, and
+              Trigger.dev takes care of that for you.{" "}
               <TextLink
                 href="https://trigger.dev/docs/vercel-integration#atomic-deployments"
                 target="_blank"
@@ -172,7 +200,7 @@ export function BuildSettingsFields({
         {atomicBuilds.includes("prod") && onAutoPromoteChange !== undefined && (
           <SettingsRow
             title="Auto promotion"
-            description="Once your tasks finish deploying, Trigger.dev promotes the Vercel deployment for you. Turn this off to promote from the Vercel dashboard yourself, and Trigger.dev will follow as soon as you do."
+            description="Part of atomic deployments, and only used while they are on. Once your tasks finish deploying, Trigger.dev promotes the Vercel deployment for you. Turn this off to promote from the Vercel dashboard yourself, and Trigger.dev will follow as soon as you do."
             action={
               <Switch
                 variant="medium"
@@ -333,10 +361,14 @@ export function BuildSettingsFields({
       {atomicSections}
 
       {/* Atomic deployments */}
-      {layout === "card" && (
+      {layout === "card" && showAtomicDeployments && (
         <div>
           <div className="flex items-center justify-between">
-            <Label>Atomic deployments</Label>
+            <Label>
+              <span className="flex items-center gap-2">
+                Atomic deployments <DeprecatedBadge />
+              </span>
+            </Label>
             <Switch
               variant="small"
               checked={atomicBuilds.includes("prod")}
@@ -346,10 +378,18 @@ export function BuildSettingsFields({
             />
           </div>
           <Hint className="pr-6">
-            When enabled, production deployments wait for Vercel deployment to complete before
-            promoting the Trigger.dev deployment. This will disable the "Auto-assign Custom
-            Production Domains" option in your Vercel project settings to perform staged
-            deployments.{" "}
+            Version skew protection replaces this, and works on its own{" "}
+            {skewProtectionVersionRequirement()}.{" "}
+            <TextLink href={SKEW_PROTECTION_DOCS_PATH} target="_blank">
+              Read about version skew protection
+            </TextLink>
+            .
+          </Hint>
+          <Hint className="pr-6">
+            Atomic deployments promote your Vercel deployment and your tasks together in Production,
+            so your app never runs against a mismatched task version. This needs "Auto-assign Custom
+            Production Domains" turned off on your Vercel project, and Trigger.dev takes care of
+            that for you.{" "}
             <TextLink
               href="https://trigger.dev/docs/vercel-integration#atomic-deployments"
               target="_blank"
@@ -375,27 +415,48 @@ export function BuildSettingsFields({
       )}
 
       {/* Auto promotion — only visible when atomic deployments are on */}
-      {layout === "card" && atomicBuilds.includes("prod") && onAutoPromoteChange !== undefined && (
-        <div>
-          <div className="flex items-center justify-between">
-            <Label>Auto promotion</Label>
-            <Switch
-              variant="small"
-              checked={autoPromote ?? true}
-              onCheckedChange={onAutoPromoteChange}
-            />
+      {layout === "card" &&
+        showAtomicDeployments &&
+        atomicBuilds.includes("prod") &&
+        onAutoPromoteChange !== undefined && (
+          <div>
+            <div className="flex items-center justify-between">
+              <Label>Auto promotion</Label>
+              <Switch
+                variant="small"
+                checked={autoPromote ?? true}
+                onCheckedChange={onAutoPromoteChange}
+              />
+            </div>
+            <Hint className="pr-6">
+              When enabled, the integration automatically promotes the Vercel deployment after the
+              Trigger.dev build completes. Turn off to manually promote from your Vercel dashboard —
+              Trigger.dev will then promote automatically once you do.
+            </Hint>
           </div>
-          <Hint className="pr-6">
-            When enabled, the integration automatically promotes the Vercel deployment after the
-            Trigger.dev build completes. Turn off to manually promote from your Vercel dashboard —
-            Trigger.dev will then promote automatically once you do.
-          </Hint>
-        </div>
-      )}
+        )}
     </>
   );
 }
 
+function DeprecatedBadge() {
+  return (
+    <SimpleTooltip
+      asChild
+      button={
+        <Badge
+          variant="extra-small"
+          className="text-warning system:border-transparent system:bg-warning system:text-white"
+        >
+          Deprecated
+        </Badge>
+      }
+      content="Use version skew protection instead"
+      disableHoverableContent
+    />
+  );
+}
+
 function EnvToggleRow({
   slug,
   checked,

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -235,7 +235,7 @@ export function VercelOnboardingModal({
   const [pullEnvVarsBeforeBuild, setPullEnvVarsBeforeBuild] = useState<EnvSlug[]>(
     () => availableEnvSlugsForOnboardingBuildSettings
   );
-  const [atomicBuilds, setAtomicBuilds] = useState<EnvSlug[]>(() => ["prod"]);
+  const [atomicBuilds, setAtomicBuilds] = useState<EnvSlug[]>([]);
   const [discoverEnvVars, setDiscoverEnvVars] = useState<EnvSlug[]>(
     () => availableEnvSlugsForOnboardingBuildSettings
   );
@@ -1164,7 +1164,7 @@ export function VercelOnboardingModal({
             <div className="flex flex-col gap-4">
               <Header3>Build Settings</Header3>
               <Paragraph className="text-sm">
-                Configure how environment variables are pulled during builds and atomic deployments.
+                Configure how environment variables are pulled during builds.
               </Paragraph>
 
               <BuildSettingsFields
@@ -1176,6 +1176,7 @@ export function VercelOnboardingModal({
                 atomicBuilds={atomicBuilds}
                 onAtomicBuildsChange={setAtomicBuilds}
                 disabledEnvSlugs={disabledEnvSlugsForBuildSettings}
+                showAtomicDeployments={false}
               />
 
               <FormButtons

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

@@ -1,23 +1,14 @@
 import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
 import { StarIcon as StarIconSolid } from "@heroicons/react/20/solid";
-import { useFetcher, useLocation, useSearchParams } from "@remix-run/react";
+import { useLocation, useSearchParams } from "@remix-run/react";
 import { useEffect } from "react";
-import { useIsImpersonating } from "~/hooks/useOrganizations";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useOptionalUser } from "~/hooks/useUser";
 import { cn } from "~/utils/cn";
 import { Button } from "../primitives/Buttons";
 import { ShortcutKey } from "../primitives/ShortcutKey";
 import { SimpleTooltip } from "../primitives/Tooltip";
-import {
-  buildFavoriteLabel,
-  canonicalFavoriteUrl,
-  FAVORITE_SEARCH_PARAM,
-  FAVORITES_ACTION_PATH,
-  favoritePageUrl,
-  resolvePageMeta,
-  useFavorites,
-} from "./favoritePages";
+import { FAVORITE_SEARCH_PARAM, useFavoritePageToggle, useFavorites } from "./favoritePages";
 
 /**
  * The star in the page header that favorites the current page (full URL, including filters and
@@ -31,15 +22,10 @@ export function FavoritePageButton({
   className?: string;
 }) {
   const user = useOptionalUser();
-  const isImpersonating = useIsImpersonating();
   const location = useLocation();
   const favorites = useFavorites();
-  const fetcher = useFetcher();
   const [, setSearchParams] = useSearchParams();
-
-  // The marker param and pagination position never count toward URL identity, so paging through
-  // a favorited view keeps the same favorite (and never saves a soon-stale cursor)
-  const url = favoritePageUrl(location.pathname, location.search);
+  const { isFavorited, pageName, canFavorite, toggle } = useFavoritePageToggle(pageTitle);
 
   // A marker that isn't one of this user's favorites came from a shared link (or a favorite
   // that's since been removed): clean it from the URL so the page behaves like a normal visit.
@@ -58,34 +44,8 @@ export function FavoritePageButton({
       { replace: true, preventScrollReset: true }
     );
   }, [hasForeignMarker, setSearchParams]);
-  const existing = favorites.find((favorite) => canonicalFavoriteUrl(favorite.url) === url);
-  const isFavorited = existing !== undefined;
-  // The tooltip names the favorite: its custom name once saved, else the label saving would use
-  // (which includes detail-page ids and filter summaries, e.g. "Runs: Completed, last 7d")
-  const pageName =
-    existing?.label ?? buildFavoriteLabel(location.pathname, location.search, pageTitle);
-
-  const toggle = () => {
-    if (existing) {
-      fetcher.submit(
-        { intent: "remove", id: existing.id },
-        { method: "POST", action: FAVORITES_ACTION_PATH }
-      );
-    } else {
-      fetcher.submit(
-        {
-          intent: "add",
-          id: crypto.randomUUID(),
-          url,
-          label: buildFavoriteLabel(location.pathname, location.search, pageTitle),
-          icon: resolvePageMeta(location.pathname).icon,
-        },
-        { method: "POST", action: FAVORITES_ACTION_PATH }
-      );
-    }
-  };
 
-  const showButton = user !== undefined && !isImpersonating;
+  const showButton = canFavorite;
 
   // Option+F reports event.key "ƒ" on macOS, but the hotkeys matcher falls back to the physical
   // event.code ("KeyF"), so the standard hook captures it; exact modifier matching keeps the