chore: merge main into feat/compute-workload-manager

Author: nicktrn

CONTRIBUTING.md

@@ -2,10 +2,23 @@
 
 Thank you for taking the time to contribute to Trigger.dev. Your involvement is not just welcomed, but we encourage it! 🚀
 
-Please take some time to read this guide to understand contributing best practices for Trigger.dev.
+Please take some time to read this guide to understand contributing best practices for Trigger.dev. Note that we use [vouch](https://github.com/mitchellh/vouch) to manage contributor trust, so you'll need to be vouched before opening a PR.
 
 Thank you for helping us make Trigger.dev even better! 🤩
 
+## Getting vouched (required before opening a PR)
+
+We use [vouch](https://github.com/mitchellh/vouch) to manage contributor trust. **PRs from unvouched users are automatically closed.**
+
+Before you open your first pull request, you need to be vouched by a maintainer. Here's how:
+
+1. Open a [Vouch Request](https://github.com/triggerdotdev/trigger.dev/issues/new?template=vouch-request.yml) issue.
+2. Tell us what you'd like to work on and share any relevant background.
+3. A maintainer will review your request and vouch for you by commenting on the issue.
+4. Once vouched, your PRs will be accepted normally.
+
+If you're unsure whether you're already vouched, go ahead and open a PR — the check will tell you.
+
 ## Developing
 
 The development branch is `main`. This is the branch that all pull
@@ -223,19 +236,6 @@ See the [Job Catalog](./references/job-catalog/README.md) file for more.
 4. Navigate to your trigger.dev instance ([http://localhost:3030](http://localhost:3030/)), to see the jobs.
    You can use the test feature to trigger them.
 
-## Getting vouched (required before opening a PR)
-
-We use [vouch](https://github.com/mitchellh/vouch) to manage contributor trust. **PRs from unvouched users are automatically closed.**
-
-Before you open your first pull request, you need to be vouched by a maintainer. Here's how:
-
-1. Open a [Vouch Request](https://github.com/triggerdotdev/trigger.dev/issues/new?template=vouch-request.yml) issue.
-2. Tell us what you'd like to work on and share any relevant background.
-3. A maintainer will review your request and vouch for you by commenting on the issue.
-4. Once vouched, your PRs will be accepted normally.
-
-If you're unsure whether you're already vouched, go ahead and open a PR — the check will tell you.
-
 ## Making a pull request
 
 **If you get errors, be sure to fix them before committing.**

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

@@ -59,7 +59,7 @@ export function HelpAndFeedback({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750 focus-custom",
               isCollapsed ? "w-full" : "w-full justify-between"
             )}
           >

apps/webapp/app/presenters/v3/VercelSettingsPresenter.server.ts

@@ -25,6 +25,7 @@ export type VercelSettingsResult = {
   enabled: boolean;
   hasOrgIntegration: boolean;
   authInvalid?: boolean;
+  authError?: string;
   connectedProject?: {
     id: string;
     vercelProjectId: string;
@@ -52,6 +53,7 @@ export type VercelOnboardingData = {
   availableProjects: VercelAvailableProject[];
   hasProjectSelected: boolean;
   authInvalid?: boolean;
+  authError?: string;
   existingVariables: Record<string, { environments: string[] }>; // Environment slugs (non-archived only)
   gitHubAppInstallations: GitHubAppInstallation[];
   isGitHubConnected: boolean;
@@ -98,6 +100,7 @@ export class VercelSettingsPresenter extends BasePresenter {
         enabled: true,
         hasOrgIntegration: false,
         authInvalid: true,
+        authError: orgIntegrationResult.error instanceof Error ? orgIntegrationResult.error.message : "Failed to fetch organization integration",
         connectedProject: undefined,
         isGitHubConnected: false,
         hasStagingEnvironment: false,
@@ -116,6 +119,7 @@ export class VercelSettingsPresenter extends BasePresenter {
           enabled: true,
           hasOrgIntegration: true,
           authInvalid: true,
+          authError: tokenResult.isErr() ? tokenResult.error.message : "Vercel token is invalid",
           connectedProject: undefined,
           isGitHubConnected: false,
           hasStagingEnvironment: false,
@@ -382,6 +386,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             availableProjects: [],
             hasProjectSelected: false,
             authInvalid: true,
+            authError: tokenResult.isErr() ? tokenResult.error.message : "Vercel token is invalid",
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
@@ -397,6 +402,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             availableProjects: [],
             hasProjectSelected: false,
             authInvalid: clientResult.error.authInvalid,
+            authError: clientResult.error.authInvalid ? clientResult.error.message : undefined,
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
@@ -426,6 +432,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             availableProjects: [],
             hasProjectSelected: false,
             authInvalid: availableProjectsResult.error.authInvalid,
+            authError: availableProjectsResult.error.authInvalid ? availableProjectsResult.error.message : undefined,
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
@@ -472,12 +479,19 @@ export class VercelSettingsPresenter extends BasePresenter {
           (sharedEnvVarsResult.isErr() && sharedEnvVarsResult.error.authInvalid);
 
         if (authInvalid) {
+          const authError =
+            (customEnvironmentsResult.isErr() && customEnvironmentsResult.error.authInvalid && customEnvironmentsResult.error.message) ||
+            (projectEnvVarsResult.isErr() && projectEnvVarsResult.error.authInvalid && projectEnvVarsResult.error.message) ||
+            (sharedEnvVarsResult.isErr() && sharedEnvVarsResult.error.authInvalid && sharedEnvVarsResult.error.message) ||
+            undefined;
+
           return {
             customEnvironments: [],
             environmentVariables: [],
             availableProjects: availableProjectsResult.value,
             hasProjectSelected: true,
             authInvalid: true,
+            authError: authError || undefined,
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,

apps/webapp/app/routes/resources.incidents.tsx

@@ -1,58 +1,87 @@
 import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { json } from "@remix-run/node";
-import { useFetcher } from "@remix-run/react";
+import { useFetcher, type ShouldRevalidateFunction } from "@remix-run/react";
 import { motion } from "framer-motion";
-import { useCallback, useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useFeatures } from "~/hooks/useFeatures";
-import { BetterStackClient } from "~/services/betterstack/betterstack.server";
+import { BetterStackClient, type AggregateState } from "~/services/betterstack/betterstack.server";
+
+// Prevent Remix from revalidating this route when other fetchers submit
+export const shouldRevalidate: ShouldRevalidateFunction = () => false;
+
+export type IncidentLoaderData = {
+  status: AggregateState;
+  title: string | null;
+};
 
 export async function loader() {
   const client = new BetterStackClient();
-  const result = await client.getIncidents();
+  const result = await client.getIncidentStatus();
 
   if (!result.success) {
-    return json({ operational: true });
+    return json<IncidentLoaderData>({ status: "operational", title: null });
   }
 
-  return json({
-    operational: result.data.attributes.aggregate_state === "operational",
+  return json<IncidentLoaderData>({
+    status: result.data.status,
+    title: result.data.title,
   });
 }
 
-export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
+const DEFAULT_MESSAGE =
+  "Our team is working on resolving the issue. Check our status page for more information.";
+
+const POLL_INTERVAL_MS = 60_000;
+
+/** Hook to fetch and poll incident status */
+export function useIncidentStatus() {
   const { isManagedCloud } = useFeatures();
   const fetcher = useFetcher<typeof loader>();
-
-  const fetchIncidents = useCallback(() => {
-    if (fetcher.state === "idle") {
-      fetcher.load("/resources/incidents");
-    }
-  }, []);
+  const hasInitiallyFetched = useRef(false);
 
   useEffect(() => {
     if (!isManagedCloud) return;
 
-    fetchIncidents();
+    // Initial fetch on mount
+    if (!hasInitiallyFetched.current && fetcher.state === "idle") {
+      hasInitiallyFetched.current = true;
+      fetcher.load("/resources/incidents");
+    }
 
-    const interval = setInterval(fetchIncidents, 60 * 1000); // 1 minute
+    // Poll every 60 seconds
+    const interval = setInterval(() => {
+      if (fetcher.state === "idle") {
+        fetcher.load("/resources/incidents");
+      }
+    }, POLL_INTERVAL_MS);
 
     return () => clearInterval(interval);
-  }, [isManagedCloud, fetchIncidents]);
+  }, [isManagedCloud]);
+
+  return {
+    status: fetcher.data?.status ?? "operational",
+    title: fetcher.data?.title ?? null,
+    hasIncident: (fetcher.data?.status ?? "operational") !== "operational",
+    isManagedCloud,
+  };
+}
 
-  const operational = fetcher.data?.operational ?? true;
+export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boolean }) {
+  const { title, hasIncident, isManagedCloud } = useIncidentStatus();
 
-  if (!isManagedCloud || operational) {
+  if (!isManagedCloud || !hasIncident) {
     return null;
   }
 
+  const message = title || DEFAULT_MESSAGE;
+
   return (
     <Popover>
       <div className="p-1">
-        {/* Expanded panel - animated height and opacity */}
         <motion.div
           initial={false}
           animate={{
@@ -62,35 +91,9 @@ export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boo
           transition={{ duration: 0.15 }}
           className="overflow-hidden"
         >
-          <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
-            {/* Header */}
-            <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
-              <ExclamationTriangleIcon className="size-4" />
-              <Paragraph variant="small/bright" className="text-warning">
-                Active incident
-              </Paragraph>
-            </div>
-
-            {/* Description */}
-            <Paragraph variant="extra-small/bright" className="text-warning/80">
-              Our team is working on resolving the issue. Check our status page for more
-              information.
-            </Paragraph>
-
-            {/* Button */}
-            <LinkButton
-              variant="secondary/small"
-              to="https://status.trigger.dev"
-              target="_blank"
-              fullWidth
-              className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
-            >
-              <span className="text-warning">View status page</span>
-            </LinkButton>
-          </div>
+          <IncidentPanelContent message={message} />
         </motion.div>
 
-        {/* Collapsed button - animated height and opacity */}
         <motion.div
           initial={false}
           animate={{
@@ -102,8 +105,8 @@ export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boo
         >
           <SimpleTooltip
             button={
-              <PopoverTrigger className="flex !h-8 w-full items-center justify-center rounded border border-warning/20 bg-warning/10 transition-colors hover:border-warning/30 hover:bg-warning/20">
-                <ExclamationTriangleIcon className="size-5 text-warning" />
+              <PopoverTrigger className="flex !h-8 w-full items-center justify-center rounded border border-yellow-500/30 bg-yellow-500/15 transition-colors hover:border-yellow-500/50 hover:bg-yellow-500/25">
+                <ExclamationTriangleIcon className="size-5 text-yellow-400" />
               </PopoverTrigger>
             }
             content="Active incident"
@@ -115,32 +118,32 @@ export function IncidentStatusPanel({ isCollapsed = false }: { isCollapsed?: boo
         </motion.div>
       </div>
       <PopoverContent side="right" sideOffset={8} align="start" className="!min-w-0 w-52 p-0">
-        <IncidentPopoverContent />
+        <IncidentPanelContent message={message} />
       </PopoverContent>
     </Popover>
   );
 }
 
-function IncidentPopoverContent() {
+function IncidentPanelContent({ message }: { message: string }) {
   return (
-    <div className="flex flex-col gap-2 rounded border border-warning/20 bg-warning/5 p-2 pt-1.5">
-      <div className="flex items-center gap-1 border-b border-warning/20 pb-1 text-warning">
-        <ExclamationTriangleIcon className="size-4" />
-        <Paragraph variant="small/bright" className="text-warning">
+    <div className="flex flex-col gap-2 rounded border border-yellow-500/30 bg-yellow-500/10 p-2 pt-1.5">
+      <div className="flex items-center gap-1 border-b border-yellow-500/30 pb-1">
+        <ExclamationTriangleIcon className="size-4 text-yellow-400" />
+        <Paragraph variant="small/bright" className="text-yellow-300">
           Active incident
         </Paragraph>
       </div>
-      <Paragraph variant="extra-small/bright" className="text-warning/80">
-        Our team is working on resolving the issue. Check our status page for more information.
+      <Paragraph variant="extra-small/bright" className="text-yellow-300">
+        {message}
       </Paragraph>
       <LinkButton
         variant="secondary/small"
         to="https://status.trigger.dev"
         target="_blank"
         fullWidth
-        className="border-warning/20 bg-warning/10 hover:!border-warning/30 hover:!bg-warning/20"
+        className="border-yellow-500/30 bg-yellow-500/15 hover:!border-yellow-500/50 hover:!bg-yellow-500/25"
       >
-        <span className="text-warning">View status page</span>
+        <span className="text-yellow-300">View status page</span>
       </LinkButton>
     </div>
   );

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx

@@ -188,10 +188,12 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   }
 
   const authInvalid = onboardingData?.authInvalid || result.authInvalid || false;
+  const authError = onboardingData?.authError || result.authError;
 
   return typedjson({
     ...result,
     authInvalid,
+    authError,
     onboardingData,
     organizationSlug,
     projectSlug: projectParam,