Release 3.3.4

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/config.json

@@ -7,27 +7,13 @@
     }
   ],
   "commit": false,
-  "fixed": [
-    [
-      "@trigger.dev/*",
-      "trigger.dev"
-    ]
-  ],
+  "fixed": [["@trigger.dev/*", "trigger.dev"]],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [
-    "webapp",
-    "emails",
-    "proxy",
-    "@trigger.dev/database",
-    "coordinator",
-    "docker-provider",
-    "kubernetes-provider",
-    "@trigger.dev/otlp-importer"
-  ],
+  "ignore": ["webapp", "proxy", "coordinator", "docker-provider", "kubernetes-provider"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }
-}
+}

.github/copilot-instructions.md

@@ -0,0 +1 @@
+This is the repo for Trigger.dev, a background jobs platform written in TypeScript. Our webapp at apps/webapp is a Remix 2.1 app that uses Node.js v20. Our SDK is an isomorphic TypeScript SDK at packages/trigger-sdk. Always prefer using isomorphic code like fetch, ReadableStream, etc. instead of Node.js specific code. Our tests are all vitest. We use prisma in internal-packages/database for our database interactions using PostgreSQL. For TypeScript, we usually use types over interfaces. We use zod a lot in packages/core and in the webapp. Avoid enums. Use strict mode. No default exports, use function declarations.

.github/workflows/release.yml

@@ -17,7 +17,7 @@ concurrency:
 jobs:
   release:
     name: 🦋 Changesets Release
-    runs-on: buildjet-8vcpu-ubuntu-2204
+    runs-on: ubuntu-latest
     if: github.repository == 'triggerdotdev/trigger.dev'
     outputs:
       published: ${{ steps.changesets.outputs.published }}

.github/workflows/unit-tests.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   unitTests:
     name: "🧪 Unit Tests"
-    runs-on: buildjet-8vcpu-ubuntu-2204
+    runs-on: buildjet-16vcpu-ubuntu-2204
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
@@ -27,5 +27,20 @@ jobs:
       - name: 📥 Download deps
         run: pnpm install --frozen-lockfile
 
-      - name: 🧪 Run Unit Tests
-        run: pnpm run test
+      - name: 📀 Generate Prisma Client
+        run: pnpm run generate
+
+      - name: 🧪 Run Webapp Unit Tests
+        run: pnpm run test --filter webapp
+        env:
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/postgres
+          DIRECT_URL: postgresql://postgres:postgres@localhost:5432/postgres
+          SESSION_SECRET: "secret"
+          MAGIC_LINK_SECRET: "secret"
+          ENCRYPTION_KEY: "secret"
+      
+      - name: 🧪 Run Package Unit Tests
+        run: pnpm run test --filter "@trigger.dev/*"
+      
+      - name: 🧪 Run Internal Unit Tests
+        run: pnpm run test --filter "@internal/*"

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "packages/otlp-importer/protos"]
-	path = packages/otlp-importer/protos
+[submodule "internal-packages/otlp-importer/protos"]
+	path = internal-packages/otlp-importer/protos
 	url = https://github.com/open-telemetry/opentelemetry-proto.git

.npmrc

@@ -1,2 +1,3 @@
 link-workspace-packages=false
-public-hoist-pattern[]=*prisma*
+public-hoist-pattern[]=*prisma*
+prefer-workspace-packages=true

.vscode/extensions.json

@@ -1,8 +1,4 @@
 {
-	"recommendations": [
-        "denoland.vscode-deno"
-    ],
-	"unwantedRecommendations": [
-		
-	]
+  "recommendations": ["bierner.comment-tagged-templates"],
+  "unwantedRecommendations": []
 }

.vscode/launch.json

@@ -13,6 +13,15 @@
       "cwd": "${workspaceFolder}",
       "sourceMaps": true
     },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "Debug realtimeStreams.test.ts",
+      "command": "pnpm run test -t RealtimeStreams",
+      "envFile": "${workspaceFolder}/.env",
+      "cwd": "${workspaceFolder}/apps/webapp",
+      "sourceMaps": true
+    },
     {
       "type": "chrome",
       "request": "launch",
@@ -36,6 +45,14 @@
       "cwd": "${workspaceFolder}/references/v3-catalog",
       "sourceMaps": true
     },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "Debug Dev Next.js Realtime",
+      "command": "pnpm exec trigger dev",
+      "cwd": "${workspaceFolder}/references/nextjs-realtime",
+      "sourceMaps": true
+    },
     {
       "type": "node-terminal",
       "request": "launch",

CONTRIBUTING.md

@@ -223,7 +223,7 @@ pnpm run db:studio
 
 ## Adding and running migrations
 
-1. Modify packages/database/prisma/schema.prisma file
+1. Modify internal-packages/database/prisma/schema.prisma file
 2. Change directory to the packages/database folder
 
    ```sh

README.md

@@ -15,13 +15,20 @@
 
 ## About Trigger.dev
 
-Trigger.dev is an open source platform and SDK which allows you to create long-running background jobs with no timeouts. Write normal async code, deploy, and never hit a timeout.
+Trigger.dev is an open source platform and SDK which allows you to create long-running background jobs. Write normal async code, deploy, and never hit a timeout.
 
-#### Features:
+### Key features:
 
 - JavaScript and TypeScript SDK
 - Write reliable code by default
+- No timeouts
+- Retries (with exponential backoff)
+- Queues and concurrency controls
+- Schedules and crons
+- Full Observability; logs, live trace views, advanced filtering
+- Custom alerts, get notified by email, Slack or webhooks
 - No infrastructure to manage
+- Elastic (scaling)
 - Works with your existing tech stack
 
 ## In your codebase
@@ -45,7 +52,7 @@ export const helloWorld = task({
 
 ## Deployment
 
-Use our SDK to write tasks in your codebase. There's no infrastructure to manage, your tasks automatically scale and connect to our cloud. Or you can always [self-host](https://trigger.dev/docs/v3/open-source-self-hosting#overview).
+Use our SDK to write tasks in your codebase. There's no infrastructure to manage, your tasks automatically scale and connect to our cloud. Or you can always self-host.
 
 ## Environments
 
@@ -59,11 +66,19 @@ View every task in every run so you can tell exactly what happened. We provide a
 
 # Getting started
 
-Visit our docs [here](https://trigger.dev/docs/v3/introduction) for a full guide on how to get started with Trigger.dev.
+The quickest way to get started is to create an account and project in our [web app](https://cloud.trigger.dev), and follow the instructions in the onboarding. Build and deploy your first task in minutes.
 
-## Self-host
+### Useful links:
 
-If you prefer to self-host, you can follow our [self-hosting guide](https://trigger.dev/docs/v3/open-source-self-hosting#overview).
+- [Quick start](https://trigger.dev/docs/quick-start) - get up and running in minutes
+- [How it works](https://trigger.dev/docs/v3/how-it-works) - understand how Trigger.dev works under the hood
+- [Guides and examples](https://trigger.dev/docs/guides/introduction) - walk-through guides and code examples for popular frameworks and use cases
+
+## Self-hosting
+
+If you prefer to self-host Trigger.dev, you can follow our [self-hosting guide](https://trigger.dev/docs/v3/open-source-self-hosting#overview).
+
+We also have a dedicated self-hosting channel in our [Discord server](https://trigger.dev/discord) for support.
 
 ## Development
 

apps/coordinator/src/checkpointer.ts

@@ -1,6 +1,5 @@
 import { ExponentialBackoff } from "@trigger.dev/core/v3/apps";
 import { testDockerCheckpoint } from "@trigger.dev/core/v3/apps";
-import { SimpleLogger } from "@trigger.dev/core/v3/apps";
 import { nanoid } from "nanoid";
 import fs from "node:fs/promises";
 import { ChaosMonkey } from "./chaosMonkey";
@@ -8,6 +7,7 @@ import { Buildah, Crictl, Exec } from "./exec";
 import { setTimeout } from "node:timers/promises";
 import { TempFileCleaner } from "./cleaner";
 import { numFromEnv, boolFromEnv } from "./util";
+import { SimpleStructuredLogger } from "@trigger.dev/core/v3/utils/structuredLogger";
 
 type CheckpointerInitializeReturn = {
   canCheckpoint: boolean;
@@ -86,7 +86,7 @@ export class Checkpointer {
   #canCheckpoint = false;
   #dockerMode: boolean;
 
-  #logger = new SimpleLogger("[checkptr]");
+  #logger = new SimpleStructuredLogger("checkpointer");
   #abortControllers = new Map<string, AbortController>();
   #failedCheckpoints = new Map<string, unknown>();
   #waitingForRetry = new Set<string>();
@@ -137,7 +137,7 @@ export class Checkpointer {
         return this.#getInitReturn(true);
       }
 
-      this.#logger.error(testCheckpoint.message, testCheckpoint.error ?? "");
+      this.#logger.error(testCheckpoint.message, { error: testCheckpoint.error });
       return this.#getInitReturn(false);
     }
 
@@ -436,7 +436,10 @@ export class Checkpointer {
         this.#logger.error("Error during cleanup", { ...metadata, error });
       }
 
-      this.#abortControllers.delete(runId);
+      // Ensure only the current controller is removed
+      if (this.#abortControllers.get(runId) === controller) {
+        this.#abortControllers.delete(runId);
+      }
       controller.signal.removeEventListener("abort", onAbort);
     };
 

apps/coordinator/src/cleaner.ts

@@ -1,4 +1,4 @@
-import { SimpleLogger } from "@trigger.dev/core/v3/apps";
+import { SimpleStructuredLogger } from "@trigger.dev/core/v3/utils/structuredLogger";
 import { Exec } from "./exec";
 import { setTimeout } from "timers/promises";
 
@@ -10,14 +10,18 @@ interface TempFileCleanerOptions {
 }
 
 export class TempFileCleaner {
-  private logger = new SimpleLogger("[tmp-cleaner]");
   private enabled = false;
-  private exec = new Exec({ logger: this.logger });
 
-  constructor(private opts: TempFileCleanerOptions) {}
+  private logger: SimpleStructuredLogger;
+  private exec: Exec;
+
+  constructor(private opts: TempFileCleanerOptions) {
+    this.logger = new SimpleStructuredLogger("tmp-cleaner", undefined, { ...this.opts });
+    this.exec = new Exec({ logger: this.logger });
+  }
 
   async start() {
-    this.logger.log("start", this.opts);
+    this.logger.log("TempFileCleaner.start");
     this.enabled = true;
 
     if (!this.opts.leadingEdge) {
@@ -28,7 +32,7 @@ export class TempFileCleaner {
       try {
         await this.clean();
       } catch (error) {
-        this.logger.error("error during tick", error);
+        this.logger.error("error during tick", { error });
       }
 
       await this.wait();
@@ -36,7 +40,7 @@ export class TempFileCleaner {
   }
 
   stop() {
-    this.logger.log("stop", this.opts);
+    this.logger.log("TempFileCleaner.stop");
     this.enabled = false;
   }
 
@@ -89,7 +93,7 @@ export class TempFileCleaner {
     const rmOutput = await rm;
 
     if (rmOutput.stderr.length > 0) {
-      this.logger.error("delete unsuccessful", rmOutput);
+      this.logger.error("delete unsuccessful", { rmOutput });
       return;
     }
 

apps/coordinator/src/exec.ts

@@ -1,4 +1,4 @@
-import { SimpleLogger } from "@trigger.dev/core/v3/apps";
+import { SimpleStructuredLogger } from "@trigger.dev/core/v3/utils/structuredLogger";
 import { randomUUID } from "crypto";
 import { homedir } from "os";
 import { type Result, x } from "tinyexec";
@@ -18,7 +18,7 @@ class TinyResult {
 }
 
 interface ExecOptions {
-  logger?: SimpleLogger;
+  logger?: SimpleStructuredLogger;
   abortSignal?: AbortSignal;
   logOutput?: boolean;
   trimArgs?: boolean;
@@ -26,7 +26,7 @@ interface ExecOptions {
 }
 
 export class Exec {
-  private logger: SimpleLogger;
+  private logger: SimpleStructuredLogger;
   private abortSignal: AbortSignal | undefined;
 
   private logOutput: boolean;
@@ -34,7 +34,7 @@ export class Exec {
   private neverThrow: boolean;
 
   constructor(opts: ExecOptions) {
-    this.logger = opts.logger ?? new SimpleLogger();
+    this.logger = opts.logger ?? new SimpleStructuredLogger("exec");
     this.abortSignal = opts.abortSignal;
 
     this.logOutput = opts.logOutput ?? true;
@@ -64,7 +64,18 @@ export class Exec {
       command,
       argsRaw: args,
       argsTrimmed,
-      ...output,
+      globalOpts: {
+        trimArgs: this.trimArgs,
+        neverThrow: this.neverThrow,
+        hasAbortSignal: !!this.abortSignal,
+      },
+      localOpts: opts,
+      stdout: output.stdout,
+      stderr: output.stderr,
+      pid: result.pid,
+      exitCode: result.exitCode,
+      aborted: result.aborted,
+      killed: result.killed,
     };
 
     if (this.logOutput) {
@@ -103,7 +114,7 @@ interface BuildahOptions {
 
 export class Buildah {
   private id: string;
-  private logger: SimpleLogger;
+  private logger: SimpleStructuredLogger;
   private exec: Exec;
 
   private containers = new Set<string>();
@@ -111,7 +122,7 @@ export class Buildah {
 
   constructor(opts: BuildahOptions) {
     this.id = opts.id ?? randomUUID();
-    this.logger = new SimpleLogger(`[buildah][${this.id}]`);
+    this.logger = new SimpleStructuredLogger("buildah", undefined, { id: this.id });
 
     this.exec = new Exec({
       logger: this.logger,
@@ -220,14 +231,14 @@ interface CrictlOptions {
 
 export class Crictl {
   private id: string;
-  private logger: SimpleLogger;
+  private logger: SimpleStructuredLogger;
   private exec: Exec;
 
   private archives = new Set<string>();
 
   constructor(opts: CrictlOptions) {
     this.id = opts.id ?? randomUUID();
-    this.logger = new SimpleLogger(`[crictl][${this.id}]`);
+    this.logger = new SimpleStructuredLogger("crictl", undefined, { id: this.id });
 
     this.exec = new Exec({
       logger: this.logger,

apps/docker-provider/src/index.ts

@@ -20,7 +20,7 @@ const OTEL_EXPORTER_OTLP_ENDPOINT =
   process.env.OTEL_EXPORTER_OTLP_ENDPOINT || "http://0.0.0.0:4318";
 
 const FORCE_CHECKPOINT_SIMULATION = ["1", "true"].includes(
-  process.env.FORCE_CHECKPOINT_SIMULATION ?? "true"
+  process.env.FORCE_CHECKPOINT_SIMULATION ?? "false"
 );
 
 const logger = new SimpleLogger(`[${MACHINE_NAME}]`);

apps/kubernetes-provider/src/index.ts

@@ -34,6 +34,9 @@ const UPTIME_MAX_PENDING_RUNS = Number(process.env.UPTIME_MAX_PENDING_RUNS || "2
 const UPTIME_MAX_PENDING_INDECES = Number(process.env.UPTIME_MAX_PENDING_INDECES || "10");
 const UPTIME_MAX_PENDING_ERRORS = Number(process.env.UPTIME_MAX_PENDING_ERRORS || "10");
 
+const POD_EPHEMERAL_STORAGE_SIZE_LIMIT = process.env.POD_EPHEMERAL_STORAGE_SIZE_LIMIT || "10Gi";
+const POD_EPHEMERAL_STORAGE_SIZE_REQUEST = process.env.POD_EPHEMERAL_STORAGE_SIZE_REQUEST || "2Gi";
+
 const logger = new SimpleLogger(`[${NODE_NAME}]`);
 logger.log(`running in ${RUNTIME_ENV} mode`);
 
@@ -396,13 +399,13 @@ class KubernetesTaskOperations implements TaskOperations {
 
   get #defaultResourceRequests(): ResourceQuantities {
     return {
-      "ephemeral-storage": "2Gi",
+      "ephemeral-storage": POD_EPHEMERAL_STORAGE_SIZE_REQUEST,
     };
   }
 
   get #defaultResourceLimits(): ResourceQuantities {
     return {
-      "ephemeral-storage": "10Gi",
+      "ephemeral-storage": POD_EPHEMERAL_STORAGE_SIZE_LIMIT,
     };
   }
 
@@ -658,6 +661,7 @@ provider.listen();
 
 const taskMonitor = new TaskMonitor({
   runtimeEnv: RUNTIME_ENV,
+  namespace: KUBERNETES_NAMESPACE,
   onIndexFailure: async (deploymentId, details) => {
     logger.log("Indexing failed", { deploymentId, details });
 

apps/kubernetes-provider/src/taskMonitor.ts

@@ -3,13 +3,14 @@ import { SimpleLogger } from "@trigger.dev/core/v3/apps";
 import { EXIT_CODE_ALREADY_HANDLED, EXIT_CODE_CHILD_NONZERO } from "@trigger.dev/core/v3/apps";
 import { setTimeout } from "timers/promises";
 import PQueue from "p-queue";
-import type { Prettify } from "@trigger.dev/core/v3";
+import { TaskRunErrorCodes, type Prettify, type TaskRunInternalError } from "@trigger.dev/core/v3";
 
 type FailureDetails = Prettify<{
   exitCode: number;
   reason: string;
   logs: string;
   overrideCompletion: boolean;
+  errorCode: TaskRunInternalError["code"];
 }>;
 
 type IndexFailureHandler = (deploymentId: string, details: FailureDetails) => Promise<any>;
@@ -159,19 +160,27 @@ export class TaskMonitor {
 
     let reason = rawReason || "Unknown error";
     let logs = rawLogs || "";
-    let overrideCompletion = false;
+
+    /** This will only override existing task errors. It will not crash the run.  */
+    let onlyOverrideExistingError = exitCode === EXIT_CODE_CHILD_NONZERO;
+
+    let errorCode: TaskRunInternalError["code"] = TaskRunErrorCodes.POD_UNKNOWN_ERROR;
 
     switch (rawReason) {
       case "Error":
         reason = "Unknown error.";
+        errorCode = TaskRunErrorCodes.POD_UNKNOWN_ERROR;
         break;
       case "Evicted":
         if (message.startsWith("Pod ephemeral local storage usage")) {
           reason = "Storage limit exceeded.";
+          errorCode = TaskRunErrorCodes.DISK_SPACE_EXCEEDED;
         } else if (message) {
           reason = `Evicted: ${message}`;
+          errorCode = TaskRunErrorCodes.POD_EVICTED;
         } else {
           reason = "Evicted for unknown reason.";
+          errorCode = TaskRunErrorCodes.POD_EVICTED;
         }
 
         if (logs.startsWith("failed to try resolving symlinks")) {
@@ -179,10 +188,9 @@ export class TaskMonitor {
         }
         break;
       case "OOMKilled":
-        overrideCompletion = true;
-        reason = `${
-          exitCode === EXIT_CODE_CHILD_NONZERO ? "Child process" : "Parent process"
-        } ran out of memory! Try choosing a machine preset with more memory for this task.`;
+        reason =
+          "[TaskMonitor] Your task ran out of memory. Try increasing the machine specs. If this doesn't fix it there might be a memory leak.";
+        errorCode = TaskRunErrorCodes.TASK_PROCESS_OOM_KILLED;
         break;
       default:
         break;
@@ -192,7 +200,8 @@ export class TaskMonitor {
       exitCode,
       reason,
       logs,
-      overrideCompletion,
+      overrideCompletion: onlyOverrideExistingError,
+      errorCode,
     } satisfies FailureDetails;
 
     const app = pod.metadata?.labels?.app;

apps/proxy/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "deploy": "wrangler deploy",
-    "dev": "wrangler dev"
+    "dev": "wrangler dev",
+    "dry-run:staging": "wrangler deploy --dry-run --outdir=dist --env staging"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240512.0",
@@ -15,7 +16,7 @@
     "@aws-sdk/client-sqs": "^3.445.0",
     "@trigger.dev/core": "workspace:*",
     "ulidx": "^2.2.1",
-    "zod": "3.22.3",
+    "zod": "3.23.8",
     "zod-error": "1.5.0"
   }
 }

apps/proxy/src/index.ts

@@ -17,12 +17,9 @@ export interface Env {
 
 export default {
   async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
-    if (!env.REWRITE_HOSTNAME) throw new Error("Missing REWRITE_HOSTNAME");
-    console.log("url", request.url);
-
     if (!queueingIsEnabled(env)) {
       console.log("Missing AWS credentials. Passing through to the origin.");
-      return redirectToOrigin(request, env);
+      return fetch(request);
     }
 
     const url = new URL(request.url);
@@ -42,25 +39,10 @@ export default {
     }
 
     //the same request but with the hostname (and port) changed
-    return redirectToOrigin(request, env);
+    return fetch(request);
   },
 };
 
-function redirectToOrigin(request: Request, env: Env) {
-  const newUrl = new URL(request.url);
-  newUrl.hostname = env.REWRITE_HOSTNAME;
-  newUrl.port = env.REWRITE_PORT || newUrl.port;
-
-  const requestInit: RequestInit = {
-    method: request.method,
-    headers: request.headers,
-    body: request.body,
-  };
-
-  console.log("rewritten url", newUrl.toString());
-  return fetch(newUrl.toString(), requestInit);
-}
-
 function queueingIsEnabled(env: Env) {
   return (
     env.AWS_SQS_ACCESS_KEY_ID &&

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

@@ -0,0 +1,15 @@
+export function SideMenuRightClosedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="12" y="4" width="1" height="12" fill="currentColor" />
+      <rect x="2.5" y="3.5" width="15" height="13" rx="2.5" stroke="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/components/ErrorDisplay.tsx

@@ -1,7 +1,11 @@
+import { HomeIcon } from "@heroicons/react/20/solid";
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
-import { LinkButton } from "./primitives/Buttons";
-import { Header1, Header3 } from "./primitives/Headers";
+import { motion } from "framer-motion";
 import { friendlyErrorDisplay } from "~/utils/httpErrors";
+import { LinkButton } from "./primitives/Buttons";
+import { Header1 } from "./primitives/Headers";
+import { Paragraph } from "./primitives/Paragraph";
+import Spline from "@splinetool/react-spline";
 
 type ErrorDisplayOptions = {
   button?: {
@@ -39,12 +43,27 @@ type DisplayOptionsProps = {
 
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
   return (
-    <div className="p-4">
-      <Header1 className="mb-4 border-b border-charcoal-800 pb-4">{title}</Header1>
-      {message && <Header3>{message}</Header3>}
-      <LinkButton to={button ? button.to : "/"} variant="primary/medium" className="mt-8">
-        {button ? button.title : "Home"}
-      </LinkButton>
+    <div className="relative flex min-h-screen flex-col items-center justify-center bg-[#16181C]">
+      <div className="z-10 mt-[30vh] flex flex-col items-center gap-8">
+        <Header1>{title}</Header1>
+        {message && <Paragraph>{message}</Paragraph>}
+        <LinkButton
+          to={button ? button.to : "/"}
+          shortcut={{ modifiers: ["meta"], key: "g" }}
+          variant="primary/medium"
+          LeadingIcon={HomeIcon}
+        >
+          {button ? button.title : "Go to homepage"}
+        </LinkButton>
+      </div>
+      <motion.div
+        className="pointer-events-none absolute inset-0 overflow-hidden"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5, duration: 2, ease: "easeOut" }}
+      >
+        <Spline scene="https://prod.spline.design/wRly8TZN-e0Twb8W/scene.splinecode" />
+      </motion.div>
     </div>
   );
 }

apps/webapp/app/components/Feedback.tsx

@@ -1,31 +1,24 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { BookOpenIcon } from "@heroicons/react/20/solid";
-import {
-  CalendarDaysIcon,
-  ChevronRightIcon,
-  EnvelopeIcon,
-  LifebuoyIcon,
-  LightBulbIcon,
-} from "@heroicons/react/24/solid";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { EnvelopeIcon } from "@heroicons/react/24/solid";
 import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
-import { DiscordIcon } from "@trigger.dev/companyicons";
-import { ActivityIcon } from "lucide-react";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { type FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
-import { cn } from "~/utils/cn";
-import { docsTroubleshootingPath } from "~/utils/pathBuilder";
-import { Button, LinkButton } from "./primitives/Buttons";
+import { Button } from "./primitives/Buttons";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "./primitives/Dialog";
 import { Fieldset } from "./primitives/Fieldset";
 import { FormButtons } from "./primitives/FormButtons";
 import { FormError } from "./primitives/FormError";
-import { Header1 } from "./primitives/Headers";
+import { Icon } from "./primitives/Icon";
+import { InfoPanel } from "./primitives/InfoPanel";
 import { InputGroup } from "./primitives/InputGroup";
 import { Label } from "./primitives/Label";
 import { Paragraph } from "./primitives/Paragraph";
 import { Select, SelectItem } from "./primitives/Select";
-import { Sheet, SheetBody, SheetContent, SheetTrigger } from "./primitives/Sheet";
 import { TextArea } from "./primitives/TextArea";
+import { TextLink } from "./primitives/TextLink";
+import { DialogClose } from "@radix-ui/react-dialog";
 
 type FeedbackProps = {
   button: ReactNode;
@@ -37,161 +30,113 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
   const location = useLocation();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
+  const [type, setType] = useState<FeedbackType>(defaultValue);
 
   const [form, { path, feedbackType, message }] = useForm({
     id: "accept-invite",
-    // TODO: type this
     lastSubmission: lastSubmission as any,
     onValidate({ formData }) {
       return parse(formData, { schema });
     },
+    shouldRevalidate: "onInput",
   });
 
-  if (
-    open &&
-    navigation.formAction === "/resources/feedback" &&
-    form.error === undefined &&
-    form.errors.length === 0
-  ) {
-    setOpen(false);
-  }
+  useEffect(() => {
+    if (
+      navigation.formAction === "/resources/feedback" &&
+      navigation.state === "loading" &&
+      form.error === undefined &&
+      form.errors.length === 0
+    ) {
+      setOpen(false);
+    }
+  }, [navigation, form]);
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild={true}>{button}</SheetTrigger>
-      <SheetContent className="@container">
-        <SheetBody className="flex h-full flex-col justify-between">
-          <LinkBanner
-            title="Join our Discord community"
-            icon={<DiscordIcon className="size-9" />}
-            to="https://trigger.dev/discord"
-            className="hover:border-text-link"
-          >
-            <Paragraph>The quickest way to get answers from the Trigger.dev community.</Paragraph>
-          </LinkBanner>
-          <LinkBanner
-            title="Book a 15 min chat with the founders"
-            icon={<CalendarDaysIcon className="size-9 text-green-500" />}
-            to="https://cal.com/team/triggerdotdev/founders-call"
-            className="hover:border-green-500"
-          >
-            <Paragraph>Have a question or want to chat? Book a time to talk with us.</Paragraph>
-          </LinkBanner>
-          <LinkBanner
-            title="Suggest a feature"
-            icon={<LightBulbIcon className="size-9 text-sun-500" />}
-            to="https://feedback.trigger.dev/"
-            className="hover:border-sun-400"
-          >
-            <Paragraph>Have an idea for a new feature or improvement? Let us know!</Paragraph>
-          </LinkBanner>
-          <LinkBanner
-            title="Troubleshooting"
-            icon={<LifebuoyIcon className="size-9 text-rose-500" />}
-          >
-            <Paragraph>
-              If you're having trouble, check out our troubleshooting guide or the Trigger.dev
-              Status page.
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{button}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>Contact us</DialogHeader>
+        <div className="mt-2 flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <Icon icon={EnvelopeIcon} className="size-10 min-w-[2.5rem] text-blue-500" />
+            <Paragraph variant="base/bright">
+              How can we help? We read every message and will respond as quickly as we can.
             </Paragraph>
-            <div className="flex flex-wrap gap-2">
-              <LinkButton
-                to={docsTroubleshootingPath("")}
-                variant="tertiary/medium"
-                LeadingIcon={BookOpenIcon}
-              >
-                Troubleshooting Docs
-              </LinkButton>
-              <LinkButton
-                to={"https://status.trigger.dev/"}
-                variant="tertiary/medium"
-                LeadingIcon={ActivityIcon}
-              >
-                Trigger.dev Status
-              </LinkButton>
-            </div>
-          </LinkBanner>
-          <LinkBanner
-            title="Send us an email"
-            icon={<EnvelopeIcon className="size-9 text-blue-500" />}
-          >
-            <Paragraph>We read every message and respond quickly.</Paragraph>
-            <Form method="post" action="/resources/feedback" {...form.props} className="w-full">
-              <Fieldset className="max-w-full gap-y-3">
-                <input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
-                <InputGroup className="max-w-full">
-                  <Select
-                    {...conform.select(feedbackType)}
-                    variant="tertiary/medium"
-                    defaultValue={defaultValue}
-                    placeholder="Select type"
-                    text={(value) => feedbackTypeLabel[value]}
-                    dropdownIcon
+          </div>
+          <hr className="border-charcoal-800" />
+          <Form method="post" action="/resources/feedback" {...form.props} className="w-full">
+            <Fieldset className="max-w-full gap-y-3">
+              <input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
+              <InputGroup className="max-w-full">
+                {type === "feature" && (
+                  <InfoPanel
+                    icon={InformationCircleIcon}
+                    iconClassName="text-blue-500"
+                    panelClassName="w-full mb-2"
                   >
-                    {Object.entries(feedbackTypeLabel).map(([name, title]) => (
-                      <SelectItem key={name} value={name}>
-                        {title}
-                      </SelectItem>
-                    ))}
-                  </Select>
-                  <FormError id={feedbackType.errorId}>{feedbackType.error}</FormError>
-                </InputGroup>
-                <InputGroup className="max-w-full">
-                  <Label>Message</Label>
-                  <TextArea {...conform.textarea(message)} />
-                  <FormError id={message.errorId}>{message.error}</FormError>
-                </InputGroup>
-                <FormError>{form.error}</FormError>
-                <div className="flex w-full justify-end">
-                  <FormButtons
-                    className="m-0 w-max"
-                    confirmButton={
-                      <Button type="submit" variant="tertiary/medium">
-                        Send message
-                      </Button>
-                    }
-                  />
-                </div>
-              </Fieldset>
-            </Form>
-          </LinkBanner>
-        </SheetBody>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-function LinkBanner({
-  className,
-  icon,
-  title,
-  children,
-  to,
-}: {
-  className?: string;
-  icon?: ReactNode;
-  title?: string;
-  children?: ReactNode;
-  to?: string;
-}) {
-  return (
-    <a
-      href={to}
-      target="_blank"
-      className={cn(
-        "group/banner mb-4 flex w-full items-center justify-between rounded-md border border-grid-bright bg-charcoal-750 p-4 transition",
-        className
-      )}
-    >
-      <div className="flex w-full items-start gap-4">
-        <span>{icon}</span>
-        <div className="flex w-full flex-col gap-2">
-          <Header1 className="text-2xl font-semibold text-text-bright">{title}</Header1>
-          {children}
+                    <Paragraph variant="small">
+                      All our feature requests are public and voted on by the community. The best
+                      way to submit your feature request is to{" "}
+                      <TextLink to="https://feedback.trigger.dev">
+                        post it to our feedback forum
+                      </TextLink>
+                      .
+                    </Paragraph>
+                  </InfoPanel>
+                )}
+                {type === "help" && (
+                  <InfoPanel
+                    icon={InformationCircleIcon}
+                    iconClassName="text-blue-500"
+                    panelClassName="w-full mb-2"
+                  >
+                    <Paragraph variant="small">
+                      The quickest way to get answers from the Trigger.dev team and community is to{" "}
+                      <TextLink to="https://trigger.dev/discord">ask in our Discord</TextLink>.
+                    </Paragraph>
+                  </InfoPanel>
+                )}
+                <Select
+                  {...conform.select(feedbackType)}
+                  variant="tertiary/medium"
+                  value={type}
+                  defaultValue={type}
+                  setValue={(v) => setType(v as FeedbackType)}
+                  placeholder="Select type"
+                  text={(value) => feedbackTypeLabel[value as FeedbackType]}
+                  dropdownIcon
+                >
+                  {Object.entries(feedbackTypeLabel).map(([name, title]) => (
+                    <SelectItem key={name} value={name}>
+                      {title}
+                    </SelectItem>
+                  ))}
+                </Select>
+                <FormError id={feedbackType.errorId}>{feedbackType.error}</FormError>
+              </InputGroup>
+              <InputGroup className="max-w-full">
+                <Label>Message</Label>
+                <TextArea {...conform.textarea(message)} />
+                <FormError id={message.errorId}>{message.error}</FormError>
+              </InputGroup>
+              <FormError>{form.error}</FormError>
+              <FormButtons
+                confirmButton={
+                  <Button type="submit" variant="primary/medium">
+                    Send message
+                  </Button>
+                }
+                cancelButton={
+                  <DialogClose asChild>
+                    <Button variant="tertiary/medium">Cancel</Button>
+                  </DialogClose>
+                }
+              />
+            </Fieldset>
+          </Form>
         </div>
-      </div>
-      {to && (
-        <ChevronRightIcon className="size-5 text-charcoal-500 transition group-hover:translate-x-1 group-hover/banner:text-text-bright" />
-      )}
-    </a>
+      </DialogContent>
+    </Dialog>
   );
 }

apps/webapp/app/components/ListPagination.tsx

@@ -26,7 +26,7 @@ function NextButton({ cursor }: { cursor?: string }) {
     <LinkButton
       to={path ?? "#"}
       variant={"minimal/small"}
-      TrailingIcon="arrow-right"
+      TrailingIcon="chevron-right"
       trailingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
@@ -47,7 +47,7 @@ function PreviousButton({ cursor }: { cursor?: string }) {
     <LinkButton
       to={path ?? "#"}
       variant={"minimal/small"}
-      LeadingIcon="arrow-left"
+      LeadingIcon="chevron-left"
       leadingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",

apps/webapp/app/components/billing/v2/FreePlanUsage.tsx

@@ -27,7 +27,7 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
           <ArrowUpCircleIcon className="h-5 w-5 text-text-dimmed" />
           <Paragraph className="text-2sm text-text-bright">Free Plan</Paragraph>
         </div>
-        <Link to={to} className="text-2sm text-text-link">
+        <Link to={to} className="text-2sm text-text-link focus-custom">
           Upgrade
         </Link>
       </div>

apps/webapp/app/components/code/CodeBlock.tsx

@@ -241,7 +241,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 onMouseEnter={() => setMouseOver(true)}
                 onMouseLeave={() => setMouseOver(false)}
                 className={cn(
-                  "absolute right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
+                  "absolute right-3 z-50 transition-colors duration-100 focus-custom hover:cursor-pointer",
                   showChrome ? "top-10" : "top-2.5",
                   copied ? "text-emerald-500" : "text-charcoal-500 hover:text-charcoal-300"
                 )}

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

@@ -1,18 +1,16 @@
-import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
+import { ArrowPathIcon } from "@heroicons/react/20/solid";
 import { useFetcher } from "@remix-run/react";
 import { useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { generateTwoRandomWords } from "~/utils/randomWords";
 import { Button } from "../primitives/Buttons";
-import { Header1 } from "../primitives/Headers";
-import { Input } from "../primitives/Input";
-import { Paragraph } from "../primitives/Paragraph";
-import { Spinner } from "../primitives/Spinner";
 import { Callout } from "../primitives/Callout";
 import { Fieldset } from "../primitives/Fieldset";
-import { InputGroup } from "../primitives/InputGroup";
 import { FormButtons } from "../primitives/FormButtons";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Paragraph } from "../primitives/Paragraph";
+import { Spinner } from "../primitives/Spinner";
 
 type ModalProps = {
   id: string;
@@ -31,15 +29,17 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button
-          variant="minimal/small"
-          leadingIconClassName="text-text-dimmed"
+          variant="small-menu-item"
+          fullWidth
+          textAlignLeft
+          leadingIconClassName="text-success"
           LeadingIcon={ArrowPathIcon}
         >
-          Regenerate
+          Regenerate…
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <DialogHeader>{`Regenerate ${title} Environment Key`}</DialogHeader>
+        <DialogHeader>{`Regenerate ${title.toUpperCase()} environment key`}</DialogHeader>
         <RegenerateApiKeyModalContent
           id={id}
           title={title}
@@ -62,10 +62,10 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
   }
 
   return (
-    <div className="flex flex-col items-center gap-y-5 py-4">
+    <div className="flex flex-col items-center gap-y-4 pt-4">
       <Callout variant="warning">
-        {`Regenerating the keys for this environment will temporarily break any live Jobs in the
-        ${title} Environmentuntil the new API keys are set in the relevant environment variables.`}
+        {`Regenerating the keys for this environment will temporarily break any live tasks in the
+        ${title} environment until the new API keys are set in the relevant environment variables.`}
       </Callout>
       <fetcher.Form
         method="post"
@@ -73,7 +73,7 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
         className="mt-2 w-full"
       >
         <Fieldset className="w-full">
-          <InputGroup>
+          <InputGroup className="max-w-full">
             <Paragraph variant="small/bright">Enter this text below to confirm:</Paragraph>
             <Paragraph
               variant="small"
@@ -93,14 +93,14 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
             confirmButton={
               <Button
                 type="submit"
-                variant={"primary/small"}
+                variant={"primary/medium"}
                 LeadingIcon={isSubmitting ? Spinner : undefined}
                 disabled={confirmationText !== randomWord}
               >
                 Regenerate
               </Button>
             }
-            cancelButton={<Button variant={"tertiary/small"}>Cancel</Button>}
+            cancelButton={<Button variant={"tertiary/medium"}>Cancel</Button>}
           />
         </Fieldset>
       </fetcher.Form>

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

@@ -1,14 +1,13 @@
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import { ArrowLeftIcon } from "@heroicons/react/24/solid";
-import { DiscordIcon } from "@trigger.dev/companyicons";
 import { User } from "@trigger.dev/database";
 import { useFeatures } from "~/hooks/useFeatures";
 import { cn } from "~/utils/cn";
 import { accountPath, personalAccessTokensPath, rootPath } from "~/utils/pathBuilder";
-import { Feedback } from "../Feedback";
-import { Button, LinkButton } from "../primitives/Buttons";
+import { LinkButton } from "../primitives/Buttons";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
+import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 
 export function AccountSideMenu({ user }: { user: User }) {
   const { v3Enabled } = useFeatures();
@@ -20,7 +19,7 @@ export function AccountSideMenu({ user }: { user: User }) {
       )}
     >
       <div className="flex h-full flex-col">
-        <div className={cn("flex items-center justify-between border-b p-px transition")}>
+        <div className={cn("flex h-10 items-center justify-between border-b p-1 transition")}>
           <LinkButton
             variant="minimal/medium"
             LeadingIcon={ArrowLeftIcon}
@@ -38,7 +37,7 @@ export function AccountSideMenu({ user }: { user: User }) {
             <SideMenuItem
               name="Your profile"
               icon="account"
-              iconColor="text-indigo-500"
+              activeIconColor="text-indigo-500"
               to={accountPath()}
               data-action="account"
             />
@@ -49,7 +48,7 @@ export function AccountSideMenu({ user }: { user: User }) {
               <SideMenuItem
                 name="Personal Access Tokens"
                 icon={ShieldCheckIcon}
-                iconColor="text-emerald-500"
+                activeIconColor="text-emerald-500"
                 to={personalAccessTokensPath()}
                 data-action="tokens"
               />
@@ -57,42 +56,7 @@ export function AccountSideMenu({ user }: { user: User }) {
           )}
         </div>
         <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
-          <SideMenuItem
-            name="Join our Discord"
-            icon={DiscordIcon}
-            to="https://trigger.dev/discord"
-            data-action="join our discord"
-            target="_blank"
-          />
-
-          <SideMenuItem
-            name="Documentation"
-            icon="docs"
-            to="https://trigger.dev/docs"
-            data-action="documentation"
-            target="_blank"
-          />
-          <SideMenuItem
-            name="Changelog"
-            icon="star"
-            to="https://trigger.dev/changelog"
-            data-action="changelog"
-            target="_blank"
-          />
-
-          <Feedback
-            button={
-              <Button
-                variant="small-menu-item"
-                LeadingIcon="log"
-                data-action="help & feedback"
-                fullWidth
-                textAlignLeft
-              >
-                Help & Feedback
-              </Button>
-            }
-          />
+          <HelpAndFeedback />
         </div>
       </div>
     </div>

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

@@ -0,0 +1,182 @@
+import {
+  ArrowUpRightIcon,
+  CalendarDaysIcon,
+  ChatBubbleLeftEllipsisIcon,
+  EnvelopeIcon,
+  LightBulbIcon,
+  SignalIcon,
+} from "@heroicons/react/20/solid";
+import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
+import { Fragment, useState } from "react";
+import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+import { Feedback } from "../Feedback";
+import { StepContentContainer } from "../StepContentContainer";
+import { Button } from "../primitives/Buttons";
+import { ClipboardField } from "../primitives/ClipboardField";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
+import { Icon } from "../primitives/Icon";
+import { Paragraph } from "../primitives/Paragraph";
+import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
+import { StepNumber } from "../primitives/StepNumber";
+import { MenuCount, SideMenuItem } from "./SideMenuItem";
+
+export function HelpAndFeedback() {
+  const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
+  const currentPlan = useCurrentPlan();
+
+  return (
+    <Popover onOpenChange={(open) => setHelpMenuOpen(open)}>
+      <PopoverSideMenuTrigger isOpen={isHelpMenuOpen} shortcut={{ key: "h" }}>
+        <div className="flex items-center gap-1.5">
+          <ChatBubbleLeftEllipsisIcon className="size-4 text-success" />
+          Help & Feedback
+        </div>
+      </PopoverSideMenuTrigger>
+      <PopoverContent
+        className="min-w-[14rem] divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        align="start"
+      >
+        <Fragment>
+          <div className="flex flex-col gap-1 p-1">
+            <SideMenuItem
+              name="Documentation"
+              icon="docs"
+              trailingIcon={ArrowUpRightIcon}
+              trailingIconClassName="text-text-dimmed"
+              inactiveIconColor="text-green-500"
+              activeIconColor="text-green-500"
+              to="https://trigger.dev/docs"
+              data-action="documentation"
+              target="_blank"
+            />
+          </div>
+          <div className="flex flex-col gap-1 p-1">
+            <SideMenuItem
+              name="Status"
+              icon={SignalIcon}
+              trailingIcon={ArrowUpRightIcon}
+              trailingIconClassName="text-text-dimmed"
+              inactiveIconColor="text-green-500"
+              activeIconColor="text-green-500"
+              to="https://status.trigger.dev/"
+              data-action="status"
+              target="_blank"
+            />
+            <SideMenuItem
+              name="Suggest a feature"
+              icon={LightBulbIcon}
+              trailingIcon={ArrowUpRightIcon}
+              trailingIconClassName="text-text-dimmed"
+              inactiveIconColor="text-sun-500"
+              activeIconColor="text-sun-500"
+              to="https://feedback.trigger.dev/"
+              data-action="suggest-a-feature"
+              target="_blank"
+            />
+            <SideMenuItem
+              name="Changelog"
+              icon="star"
+              trailingIcon={ArrowUpRightIcon}
+              trailingIconClassName="text-text-dimmed"
+              inactiveIconColor="text-sun-500"
+              activeIconColor="text-sun-500"
+              to="https://trigger.dev/changelog"
+              data-action="changelog"
+              target="_blank"
+            />
+          </div>
+          <div className="flex flex-col gap-1 p-1">
+            <Paragraph className="pb-1 pl-1.5 pt-1.5 text-xs">Need help?</Paragraph>
+            {currentPlan?.v3Subscription?.plan?.limits.support === "slack" && (
+              <div>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button
+                      variant="small-menu-item"
+                      LeadingIcon={SlackIcon}
+                      data-action="join-our-slack"
+                      fullWidth
+                      textAlignLeft
+                    >
+                      <div className="flex w-full items-center justify-between">
+                        <span className="text-text-bright">Join our Slack…</span>
+                        <MenuCount count="PRO" />
+                      </div>
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>Join our Slack</DialogHeader>
+                    <div className="mt-2 flex flex-col gap-4">
+                      <div className="flex items-center gap-4">
+                        <Icon icon={SlackIcon} className="h-10 w-10 min-w-[2.5rem]" />
+                        <Paragraph variant="base/bright">
+                          As a subscriber, you have access to a dedicated Slack channel for 1-to-1
+                          support with the Trigger.dev team.
+                        </Paragraph>
+                      </div>
+                      <hr className="border-charcoal-800" />
+                      <div>
+                        <StepNumber stepNumber="1" title="Email us" />
+                        <StepContentContainer>
+                          <Paragraph>
+                            Send us an email to this address from your Trigger.dev account email
+                            address:
+                            <ClipboardField
+                              variant="secondary/medium"
+                              value="priority-support@trigger.dev"
+                              className="my-2"
+                            />
+                          </Paragraph>
+                        </StepContentContainer>
+                        <StepNumber stepNumber="2" title="Look out for an invite from Slack" />
+                        <StepContentContainer>
+                          <Paragraph>
+                            As soon as we can, we'll setup a Slack Connect channel and say hello!
+                          </Paragraph>
+                        </StepContentContainer>
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            )}
+            <SideMenuItem
+              name="Ask in our Discord"
+              icon={DiscordIcon}
+              trailingIcon={ArrowUpRightIcon}
+              trailingIconClassName="text-text-dimmed"
+              to="https://trigger.dev/discord"
+              data-action="join our discord"
+              target="_blank"
+            />
+            <SideMenuItem
+              name="Book a 15 min call"
+              icon={CalendarDaysIcon}
+              trailingIcon={ArrowUpRightIcon}
+              trailingIconClassName="text-text-dimmed"
+              inactiveIconColor="text-rose-500"
+              activeIconColor="text-rose-500"
+              to="https://cal.com/team/triggerdotdev/founders-call"
+              data-action="book-a-call"
+              target="_blank"
+            />
+            <Feedback
+              button={
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={EnvelopeIcon}
+                  leadingIconClassName="text-blue-500"
+                  data-action="contact-us"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Contact us…
+                </Button>
+              }
+            />
+          </div>
+        </Fragment>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -12,18 +12,18 @@ import {
   RectangleStackIcon,
   ServerStackIcon,
   ShieldCheckIcon,
-  SignalIcon,
+  Squares2X2Icon,
 } from "@heroicons/react/20/solid";
 import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
 import { useNavigation } from "@remix-run/react";
-import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { useFeatures } from "~/hooks/useFeatures";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { type MatchedProject } from "~/hooks/useProject";
 import { type User } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+import { FeedbackType } from "~/routes/resources.feedback";
 import { cn } from "~/utils/cn";
 import {
   accountPath,
@@ -46,6 +46,7 @@ import {
   projectSetupPath,
   projectTriggersPath,
   v3ApiKeysPath,
+  v3BatchesPath,
   v3BillingPath,
   v3ConcurrencyPath,
   v3DeploymentsPath,
@@ -58,17 +59,12 @@ import {
   v3TestPath,
   v3UsagePath,
 } from "~/utils/pathBuilder";
-import { Feedback } from "../Feedback";
 import { ImpersonationBanner } from "../ImpersonationBanner";
 import { LogoIcon } from "../LogoIcon";
-import { StepContentContainer } from "../StepContentContainer";
 import { UserProfilePhoto } from "../UserProfilePhoto";
 import { FreePlanUsage } from "../billing/v2/FreePlanUsage";
 import { Badge } from "../primitives/Badge";
-import { Button, LinkButton } from "../primitives/Buttons";
-import { ClipboardField } from "../primitives/ClipboardField";
-import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
-import { Icon } from "../primitives/Icon";
+import { LinkButton } from "../primitives/Buttons";
 import { Paragraph } from "../primitives/Paragraph";
 import {
   Popover,
@@ -78,8 +74,8 @@ import {
   PopoverMenuItem,
   PopoverSectionHeader,
 } from "../primitives/Popover";
-import { StepNumber } from "../primitives/StepNumber";
 import { TextLink } from "../primitives/TextLink";
+import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 
@@ -91,6 +87,8 @@ type SideMenuProps = {
   project: SideMenuProject;
   organization: MatchedOrganization;
   organizations: MatchedOrganization[];
+  button?: ReactNode;
+  defaultValue?: FeedbackType;
 };
 
 export function SideMenu({ user, project, organization, organizations }: SideMenuProps) {
@@ -171,7 +169,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               name="Team"
               icon={UserGroupIcon}
               to={organizationTeamPath(organization)}
-              iconColor="text-amber-500"
+              activeIconColor="text-amber-500"
               data-action="team"
             />
             {organization.projects.some((proj) => proj.version === "V3") && isManagedCloud && (
@@ -180,14 +178,14 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
                   name="Usage"
                   icon={ChartBarIcon}
                   to={v3UsagePath(organization)}
-                  iconColor="text-green-600"
+                  activeIconColor="text-green-600"
                   data-action="usage"
                 />
                 <SideMenuItem
                   name="Billing"
                   icon={CreditCardIcon}
                   to={v3BillingPath(organization)}
-                  iconColor="text-blue-600"
+                  activeIconColor="text-blue-600"
                   data-action="billing"
                   badge={
                     currentPlan?.v3Subscription?.isPaying
@@ -202,14 +200,14 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
                 name="Usage (v2)"
                 icon={ChartBarIcon}
                 to={organizationBillingPath(organization)}
-                iconColor="text-green-600"
+                activeIconColor="text-green-600"
                 data-action="usage & billing"
               />
             )}
             <SideMenuItem
               name="Organization settings"
               icon="settings"
-              iconColor="text-teal-500"
+              activeIconColor="text-teal-500"
               to={organizationSettingsPath(organization)}
               data-action="organization-settings"
             />
@@ -239,96 +237,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
           )}
         </div>
         <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
-          {currentPlan?.v3Subscription?.plan?.limits.support === "slack" && (
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button
-                  variant="small-menu-item"
-                  LeadingIcon={SlackIcon}
-                  data-action="join our slack"
-                  fullWidth
-                  textAlignLeft
-                >
-                  Join our Slack
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>Join our Slack</DialogHeader>
-                <div className="mt-2 flex flex-col gap-4">
-                  <div className="flex items-center gap-4">
-                    <Icon icon={SlackIcon} className="h-10 w-10 min-w-[2.5rem]" />
-                    <Paragraph variant="base/bright">
-                      As a subscriber, you have access to a dedicated Slack channel for 1-to-1
-                      support with the Trigger.dev team.
-                    </Paragraph>
-                  </div>
-                  <hr className="border-charcoal-800" />
-                  <div>
-                    <StepNumber stepNumber="1" title="Email us" />
-                    <StepContentContainer>
-                      <Paragraph>
-                        Send us an email to this address from your Trigger.dev account email
-                        address:
-                        <ClipboardField
-                          variant="primary/medium"
-                          value="priority-support@trigger.dev"
-                          className="my-2"
-                        />
-                      </Paragraph>
-                    </StepContentContainer>
-                    <StepNumber stepNumber="2" title="Look out for an invite from Slack" />
-                    <StepContentContainer>
-                      <Paragraph>
-                        As soon as we can, we'll setup a Slack Connect channel and say hello!
-                      </Paragraph>
-                    </StepContentContainer>
-                  </div>
-                </div>
-              </DialogContent>
-            </Dialog>
-          )}
-          <SideMenuItem
-            name="Join our Discord"
-            icon={DiscordIcon}
-            to="https://trigger.dev/discord"
-            data-action="join our discord"
-            target="_blank"
-          />
-          <SideMenuItem
-            name="Documentation"
-            icon="docs"
-            to="https://trigger.dev/docs"
-            data-action="documentation"
-            target="_blank"
-          />
-          <SideMenuItem
-            name="Changelog"
-            icon="star"
-            to="https://trigger.dev/changelog"
-            data-action="changelog"
-            target="_blank"
-          />
-          <SideMenuItem
-            name="Status"
-            icon={SignalIcon}
-            to="https://status.trigger.dev/"
-            data-action="status"
-            target="_blank"
-          />
-          <Feedback
-            button={
-              <Button
-                variant="small-menu-item"
-                LeadingIcon="log"
-                leadingIconClassName="text-primary"
-                data-action="help & feedback"
-                fullWidth
-                textAlignLeft
-              >
-                <span className="text-primary">Help & Feedback</span>
-              </Button>
-            }
-          />
+          <HelpAndFeedback />
           {isV3Project && isFreeV3User && (
             <FreePlanUsage
               to={v3BillingPath(organization)}
@@ -495,47 +404,47 @@ function V2ProjectSideMenu({
       <SideMenuItem
         name="Jobs"
         icon="job"
-        iconColor="text-indigo-500"
+        activeIconColor="text-indigo-500"
         to={projectPath(organization, project)}
         data-action="jobs"
       />
       <SideMenuItem
         name="Runs"
         icon="runs"
-        iconColor="text-teal-500"
+        activeIconColor="text-teal-500"
         to={projectRunsPath(organization, project)}
       />
       <SideMenuItem
         name="Triggers"
         icon="trigger"
-        iconColor="text-amber-500"
+        activeIconColor="text-amber-500"
         to={projectTriggersPath(organization, project)}
         data-action="triggers"
       />
       <SideMenuItem
         name="Events"
         icon={CursorArrowRaysIcon}
-        iconColor="text-sky-500"
+        activeIconColor="text-sky-500"
         to={projectEventsPath(organization, project)}
       />
       <SideMenuItem
         name="HTTP endpoints"
         icon="http-endpoint"
-        iconColor="text-pink-500"
+        activeIconColor="text-pink-500"
         to={projectHttpEndpointsPath(organization, project)}
         data-action="httpendpoints"
       />
       <SideMenuItem
         name="Environments & API Keys"
         icon="environment"
-        iconColor="text-rose-500"
+        activeIconColor="text-rose-500"
         to={projectEnvironmentsPath(organization, project)}
         data-action="environments & api keys"
       />
       <SideMenuItem
         name="Project settings"
         icon="settings"
-        iconColor="text-teal-500"
+        activeIconColor="text-teal-500"
         to={projectSettingsPath(organization, project)}
         data-action="project-settings"
       />
@@ -550,49 +459,54 @@ function V3ProjectSideMenu({
   project: SideMenuProject;
   organization: MatchedOrganization;
 }) {
-  const { alertsEnabled } = useFeatures();
-
   return (
     <>
       <SideMenuHeader title={"Project"} />
       <SideMenuItem
         name="Tasks"
         icon={TaskIcon}
-        iconColor="text-blue-500"
+        activeIconColor="text-blue-500"
         to={v3ProjectPath(organization, project)}
         data-action="tasks"
       />
       <SideMenuItem
         name="Runs"
         icon="runs"
-        iconColor="text-teal-500"
+        activeIconColor="text-teal-500"
         to={v3RunsPath(organization, project)}
       />
+      <SideMenuItem
+        name="Batches"
+        icon={Squares2X2Icon}
+        activeIconColor="text-blue-500"
+        to={v3BatchesPath(organization, project)}
+        data-action="batches"
+      />
       <SideMenuItem
         name="Test"
         icon={BeakerIcon}
-        iconColor="text-lime-500"
+        activeIconColor="text-lime-500"
         to={v3TestPath(organization, project)}
         data-action="test"
       />
       <SideMenuItem
         name="Schedules"
         icon={ClockIcon}
-        iconColor="text-sun-500"
+        activeIconColor="text-sun-500"
         to={v3SchedulesPath(organization, project)}
         data-action="schedules"
       />
       <SideMenuItem
         name="API keys"
         icon={KeyIcon}
-        iconColor="text-amber-500"
+        activeIconColor="text-amber-500"
         to={v3ApiKeysPath(organization, project)}
         data-action="api keys"
       />
       <SideMenuItem
         name="Environment variables"
         icon={IdentificationIcon}
-        iconColor="text-pink-500"
+        activeIconColor="text-pink-500"
         to={v3EnvironmentVariablesPath(organization, project)}
         data-action="environment variables"
       />
@@ -600,30 +514,28 @@ function V3ProjectSideMenu({
       <SideMenuItem
         name="Deployments"
         icon={ServerStackIcon}
-        iconColor="text-blue-500"
+        activeIconColor="text-blue-500"
         to={v3DeploymentsPath(organization, project)}
         data-action="deployments"
       />
-      {alertsEnabled && (
-        <SideMenuItem
-          name="Alerts"
-          icon={BellAlertIcon}
-          iconColor="text-red-500"
-          to={v3ProjectAlertsPath(organization, project)}
-          data-action="alerts"
-        />
-      )}
+      <SideMenuItem
+        name="Alerts"
+        icon={BellAlertIcon}
+        activeIconColor="text-red-500"
+        to={v3ProjectAlertsPath(organization, project)}
+        data-action="alerts"
+      />
       <SideMenuItem
         name="Concurrency limits"
         icon={RectangleStackIcon}
-        iconColor="text-indigo-500"
+        activeIconColor="text-indigo-500"
         to={v3ConcurrencyPath(organization, project)}
         data-action="concurrency"
       />
       <SideMenuItem
         name="Project settings"
         icon="settings"
-        iconColor="text-teal-500"
+        activeIconColor="text-teal-500"
         to={v3ProjectSettingsPath(organization, project)}
         data-action="project-settings"
       />

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

@@ -3,25 +3,26 @@ import { usePathName } from "~/hooks/usePathName";
 import { cn } from "~/utils/cn";
 import { LinkButton } from "../primitives/Buttons";
 import { type IconNames } from "../primitives/NamedIcon";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
-import { Icon } from "../primitives/Icon";
-import { IconExclamationCircle } from "@tabler/icons-react";
 
 export function SideMenuItem({
   icon,
-  iconColor,
+  activeIconColor,
+  inactiveIconColor,
+  trailingIcon,
+  trailingIconClassName,
   name,
   to,
-  hasWarning,
   badge,
   target,
   subItem = false,
 }: {
   icon?: IconNames | React.ComponentType<any>;
-  iconColor?: string;
+  activeIconColor?: string;
+  inactiveIconColor?: string;
+  trailingIcon?: IconNames | React.ComponentType<any>;
+  trailingIconClassName?: string;
   name: string;
   to: string;
-  hasWarning?: string | boolean;
   badge?: string;
   target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
   subItem?: boolean;
@@ -35,11 +36,13 @@ export function SideMenuItem({
       fullWidth
       textAlignLeft
       LeadingIcon={icon}
-      leadingIconClassName={isActive ? iconColor : "text-text-dimmed"}
+      leadingIconClassName={isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"}
+      TrailingIcon={trailingIcon}
+      trailingIconClassName={trailingIconClassName}
       to={to}
       target={target}
       className={cn(
-        "text-text-bright group-hover:bg-charcoal-750",
+        "text-text-bright group-hover:bg-charcoal-750 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
         subItem ? "text-text-dimmed" : "",
         isActive ? "bg-tertiary text-text-bright" : "group-hover:text-text-bright"
       )}
@@ -48,27 +51,13 @@ export function SideMenuItem({
         {name}
         <div className="flex items-center gap-1">
           {badge !== undefined && <MenuCount count={badge} />}
-          {typeof hasWarning === "string" ? (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Icon icon={IconExclamationCircle} className="h-5 w-5 text-error" />
-                </TooltipTrigger>
-                <TooltipContent className="flex items-center gap-1 border border-error bg-error/20 backdrop-blur-xl">
-                  {hasWarning}
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          ) : (
-            hasWarning && <Icon icon={IconExclamationCircle} className="h-5 w-5 text-error" />
-          )}
         </div>
       </div>
     </LinkButton>
   );
 }
 
-function MenuCount({ count }: { count: number | string }) {
+export function MenuCount({ count }: { count: number | string }) {
   return (
     <div className="rounded-full bg-charcoal-900 px-2 py-1 text-xxs uppercase tracking-wider text-text-dimmed">
       {count}

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

@@ -0,0 +1,177 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
+
+const variants = {
+  small: {
+    size: "size-[1rem]",
+    arrowHeadRight: "group-hover:translate-x-[3px]",
+    arrowLineRight: "h-[1.5px] w-[7px] translate-x-1 top-[calc(50%-0.5px)]",
+    arrowHeadLeft: "group-hover:translate-x-[3px]",
+    arrowLineLeft: "h-[1.5px] w-[7px] translate-x-1 top-[calc(50%-0.5px)]",
+    arrowHeadTopRight:
+      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+  },
+  medium: {
+    size: "size-[1.1rem]",
+    arrowHeadRight: "group-hover:translate-x-[3px]",
+    arrowLineRight: "h-[1.5px] w-[9px] translate-x-1 top-[calc(50%-1px)]",
+    arrowHeadLeft: "group-hover:translate-x-[-3px]",
+    arrowLineLeft: "h-[1.5px] w-[9px] translate-x-1 top-[calc(50%-1px)]",
+    arrowHeadTopRight:
+      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+  },
+  large: {
+    size: "size-6",
+    arrowHeadRight: "group-hover:translate-x-1",
+    arrowLineRight: "h-[2.3px] w-[12px] translate-x-[6px] top-[calc(50%-1px)]",
+    arrowHeadLeft: "group-hover:translate-x-1",
+    arrowLineLeft: "h-[2.3px] w-[12px] translate-x-[6px] top-[calc(50%-1px)]",
+    arrowHeadTopRight:
+      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+  },
+  "extra-large": {
+    size: "size-8",
+    arrowHeadRight: "group-hover:translate-x-1",
+    arrowLineRight: "h-[3px] w-[16px] translate-x-[8px] top-[calc(50%-1.5px)]",
+    arrowHeadLeft: "group-hover:translate-x-1",
+    arrowLineLeft: "h-[3px] w-[16px] translate-x-[8px] top-[calc(50%-1.5px)]",
+    arrowHeadTopRight:
+      "-translate-x-0 transition group-hover:translate-x-[3px] group-hover:translate-y-[-3px]",
+  },
+};
+
+export const themes = {
+  dark: {
+    textStyle: "text-background-bright",
+    arrowLine: "bg-background-bright",
+  },
+  dimmed: {
+    textStyle: "text-text-dimmed",
+    arrowLine: "bg-text-dimmed",
+  },
+  bright: {
+    textStyle: "text-text-bright",
+    arrowLine: "bg-text-bright",
+  },
+  primary: {
+    textStyle: "text-text-dimmed group-hover:text-primary",
+    arrowLine: "bg-text-dimmed group-hover:bg-primary",
+  },
+  blue: {
+    textStyle: "text-text-dimmed group-hover:text-blue-500",
+    arrowLine: "bg-text-dimmed group-hover:bg-blue-500",
+  },
+  rose: {
+    textStyle: "text-text-dimmed group-hover:text-rose-500",
+    arrowLine: "bg-text-dimmed group-hover:bg-rose-500",
+  },
+  amber: {
+    textStyle: "text-text-dimmed group-hover:text-amber-500",
+    arrowLine: "bg-text-dimmed group-hover:bg-amber-500",
+  },
+  apple: {
+    textStyle: "text-text-dimmed group-hover:text-apple-500",
+    arrowLine: "bg-text-dimmed group-hover:bg-apple-500",
+  },
+  lavender: {
+    textStyle: "text-text-dimmed group-hover:text-lavender-500",
+    arrowLine: "bg-text-dimmed group-hover:bg-lavender-500",
+  },
+};
+
+type Variants = keyof typeof variants;
+type Theme = keyof typeof themes;
+
+type AnimatingArrowProps = {
+  className?: string;
+  variant?: Variants;
+  theme?: Theme;
+  direction?: "right" | "left" | "topRight";
+};
+
+export function AnimatingArrow({
+  className,
+  variant = "medium",
+  theme = "dimmed",
+  direction = "right",
+}: AnimatingArrowProps) {
+  const variantStyles = variants[variant];
+  const themeStyles = themes[theme];
+
+  return (
+    <span className={cn("relative -mr-1 ml-1 flex", variantStyles.size, className)}>
+      {direction === "topRight" && (
+        <>
+          <svg
+            className={cn(
+              "absolute top-[5px] transition duration-200 ease-in-out",
+              themeStyles.textStyle
+            )}
+            width="9"
+            height="8"
+            viewBox="0 0 9 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M1.5 7L7.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+
+          <svg
+            className={cn(
+              "absolute top-[5px] transition duration-300 ease-in-out",
+              themeStyles.textStyle,
+              variantStyles.arrowHeadTopRight
+            )}
+            width="9"
+            height="8"
+            viewBox="0 0 9 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M1 1H7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            <path d="M7.5 7L7.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            <path d="M1 7.5L7.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+        </>
+      )}
+      {direction === "right" && (
+        <>
+          <span
+            className={cn(
+              "absolute rounded-full opacity-0 transition duration-300 ease-in-out group-hover:opacity-100",
+              variantStyles.arrowLineRight,
+              themeStyles.arrowLine
+            )}
+          />
+          <ChevronRightIcon
+            className={cn(
+              "absolute -translate-x-0.5 transition duration-300 ease-in-out",
+              variantStyles.arrowHeadRight,
+              variantStyles.size,
+              themeStyles.textStyle
+            )}
+          />
+        </>
+      )}
+      {direction === "left" && (
+        <>
+          <span
+            className={cn(
+              "absolute rounded-full opacity-0 transition duration-300 ease-in-out group-hover:opacity-100",
+              variantStyles.arrowLineLeft,
+              themeStyles.arrowLine
+            )}
+          />
+          <ChevronLeftIcon
+            className={cn(
+              "absolute translate-x-0.5 transition duration-300 ease-in-out",
+              variantStyles.arrowHeadLeft,
+              variantStyles.size,
+              themeStyles.textStyle
+            )}
+          />
+        </>
+      )}
+    </span>
+  );
+}

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

@@ -45,7 +45,10 @@ export function AppliedFilter({
       </div>
       {removable && (
         <button
-          className={cn("group flex size-6 items-center justify-center", variantClassName.clear)}
+          className={cn(
+            "group flex size-6 items-center justify-center focus-custom",
+            variantClassName.clear
+          )}
           onClick={onRemove}
         >
           <XMarkIcon className="size-3.5" />

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

@@ -41,40 +41,53 @@ type Size = keyof typeof sizes;
 const theme = {
   primary: {
     textColor:
-      "text-charcoal-900 group-hover:text-charcoal-900 transition group-disabled:text-charcoal-900",
+      "text-charcoal-900 group-hover/button:text-charcoal-900 transition group-disabled/button:text-charcoal-900",
     button:
-      "bg-primary group-hover:bg-apple-200 group-disabled:opacity-50 group-disabled:bg-primary group-disabled:pointer-events-none",
+      "bg-primary group-hover/button:bg-apple-200 group-disabled/button:opacity-50 group-disabled/button:bg-primary group-disabled/button:pointer-events-none",
     shortcut:
-      "border-black/40 text-charcoal-900 group-hover:border-black/60 group-hover:text-charcoal-900",
+      "border-black/40 text-charcoal-900 group-hover/button:border-black/60 group-hover/button:text-charcoal-900",
+    icon: "text-charcoal-900",
   },
   secondary: {
-    textColor: "text-secondary group-hover:text-secondary transition group-disabled:text-secondary",
+    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-transparent border border-secondary group-hover:border-secondary group-hover:bg-secondary/10 group-disabled:opacity-30 group-disabled:border-secondary group-disabled:bg-transparent group-disabled:pointer-events-none",
+      "bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-650 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
-      "border-secondary/30 text-secondary group-hover:text-text-bright/80 group-hover:border-dimmed/60",
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-text-bright",
   },
   tertiary: {
-    textColor: "text-text-bright transition group-disabled:text-text-dimmed/80",
+    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-tertiary group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none",
+      "bg-tertiary group-hover/button:bg-charcoal-600 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
-      "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed",
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-text-bright",
   },
   minimal: {
     textColor:
-      "text-text-dimmed group-hover:text-text-bright transition group-disabled:text-text-dimmed/80",
+      "text-text-dimmed group-hover/button:text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-transparent group-hover:bg-tertiary disabled:opacity-50 group-disabled:bg-transparent group-disabled:pointer-events-none",
+      "bg-transparent group-hover/button:bg-tertiary disabled:opacity-50 group-disabled/button:bg-transparent group-disabled/button:pointer-events-none",
     shortcut:
-      "border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60",
+      "border-dimmed/40 text-text-dimmed group-hover/button:text-text-bright/80 group-hover/button:border-dimmed/60",
+    icon: "text-text-dimmed",
   },
   danger: {
     textColor:
-      "text-text-bright group-hover:text-white transition group-disabled:text-text-bright/80",
+      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-bright/80",
     button:
-      "bg-error group-hover:bg-rose-500 disabled:opacity-50 group-disabled:bg-error group-disabled:pointer-events-none",
-    shortcut: "border-text-bright text-text-bright group-hover:border-bright/60",
+      "bg-error group-hover/button:bg-rose-500 disabled:opacity-50 group-disabled/button:bg-error group-disabled/button:pointer-events-none",
+    shortcut: "border-text-bright text-text-bright group-hover/button:border-bright/60",
+    icon: "text-text-bright",
+  },
+  docs: {
+    textColor: "text-blue-200/70 transition group-disabled/button:text-text-dimmed/80",
+    button:
+      "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover/button:bg-charcoal-650 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+    shortcut:
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-blue-500",
   },
 };
 
@@ -84,7 +97,7 @@ function createVariant(sizeName: Size, themeName: Theme) {
   return {
     textColor: theme[themeName].textColor,
     button: cn(sizes[sizeName].button, theme[themeName].button),
-    icon: sizes[sizeName].icon,
+    icon: cn(sizes[sizeName].icon, theme[themeName].icon),
     iconSpacing: sizes[sizeName].iconSpacing,
     shortcutVariant: sizes[sizeName].shortcutVariant,
     shortcut: cn(sizes[sizeName].shortcut, theme[themeName].shortcut),
@@ -112,10 +125,14 @@ const variant = {
   "danger/medium": createVariant("medium", "danger"),
   "danger/large": createVariant("large", "danger"),
   "danger/extra-large": createVariant("extra-large", "danger"),
+  "docs/small": createVariant("small", "docs"),
+  "docs/medium": createVariant("medium", "docs"),
+  "docs/large": createVariant("large", "docs"),
+  "docs/extra-large": createVariant("extra-large", "docs"),
   "menu-item": {
     textColor: "text-text-bright px-1",
     button:
-      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-800 transition",
+      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover/button:bg-charcoal-750",
     icon: "h-5",
     iconSpacing: "gap-x-0.5",
     shortcutVariant: undefined,
@@ -124,7 +141,7 @@ const variant = {
   "small-menu-item": {
     textColor: "text-text-bright",
     button:
-      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-850 transition",
+      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750",
     icon: "h-4",
     iconSpacing: "gap-x-1.5",
     shortcutVariant: undefined,
@@ -133,7 +150,7 @@ const variant = {
   "small-menu-sub-item": {
     textColor: "text-text-dimmed",
     button:
-      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-850 transition",
+      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750 focus-custom",
     icon: undefined,
     iconSpacing: undefined,
     shortcutVariant: undefined,
@@ -142,7 +159,7 @@ const variant = {
 };
 
 const allVariants = {
-  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none",
+  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-none group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
   variant: variant,
 };
 
@@ -157,6 +174,7 @@ export type ButtonContentPropsType = {
   className?: string;
   shortcut?: ShortcutDefinition;
   variant: keyof typeof variant;
+  shortcutPosition?: "before-trailing-icon" | "after-trailing-icon";
 };
 
 export function ButtonContent(props: ButtonContentPropsType) {
@@ -193,13 +211,18 @@ export function ButtonContent(props: ButtonContentPropsType) {
           (typeof LeadingIcon === "string" ? (
             <NamedIcon
               name={LeadingIcon}
-              className={cn(iconClassName, leadingIconClassName, "shrink-0 justify-start")}
+              className={cn(
+                iconClassName,
+                leadingIconClassName,
+                "shrink-0 justify-start",
+                variation.icon
+              )}
             />
           ) : (
             <LeadingIcon
               className={cn(
                 iconClassName,
-                textColorClassName,
+                variation.icon,
                 leadingIconClassName,
                 "shrink-0 justify-start"
               )}
@@ -215,29 +238,44 @@ export function ButtonContent(props: ButtonContentPropsType) {
             <>{text}</>
           ))}
 
-        {TrailingIcon &&
-          (typeof TrailingIcon === "string" ? (
-            <NamedIcon
-              name={TrailingIcon}
-              className={cn(iconClassName, trailingIconClassName, "shrink-0 justify-end")}
-            />
-          ) : (
-            <TrailingIcon
-              className={cn(
-                iconClassName,
-                textColorClassName,
-                trailingIconClassName,
-                "shrink-0 justify-end"
-              )}
-            />
-          ))}
-        {shortcut && (
+        {shortcut && props.shortcutPosition === "before-trailing-icon" && (
           <ShortcutKey
             className={cn(shortcutClassName)}
             shortcut={shortcut}
             variant={variation.shortcutVariant ?? "medium"}
           />
         )}
+
+        {TrailingIcon &&
+          (typeof TrailingIcon === "string" ? (
+            <NamedIcon
+              name={TrailingIcon}
+              className={cn(
+                iconClassName,
+                trailingIconClassName,
+                "shrink-0 justify-end",
+                variation.icon
+              )}
+            />
+          ) : (
+            <TrailingIcon
+              className={cn(
+                iconClassName,
+                variation.icon,
+                trailingIconClassName,
+                "shrink-0 justify-end"
+              )}
+            />
+          ))}
+
+        {shortcut &&
+          (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") && (
+            <ShortcutKey
+              className={cn(shortcutClassName)}
+              shortcut={shortcut}
+              variant={variation.shortcutVariant ?? "medium"}
+            />
+          )}
       </div>
     </div>
   );
@@ -268,7 +306,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
 
     return (
       <button
-        className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button outline-none focus-custom", props.fullWidth ? "w-full" : "")}
         type={type}
         disabled={disabled}
         onClick={onClick}
@@ -314,7 +352,7 @@ export const LinkButton = ({
     return (
       <div
         className={cn(
-          "group pointer-events-none cursor-default opacity-40 outline-none",
+          "group/button pointer-events-none cursor-default opacity-40 outline-none",
           props.fullWidth ? "w-full" : ""
         )}
       >
@@ -328,7 +366,7 @@ export const LinkButton = ({
       <ExtLink
         href={to.toString()}
         ref={innerRef}
-        className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button focus-custom", props.fullWidth ? "w-full" : "")}
         onClick={onClick}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -343,7 +381,7 @@ export const LinkButton = ({
       <Link
         to={to}
         ref={innerRef}
-        className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button focus-custom", props.fullWidth ? "w-full" : "")}
         onClick={onClick}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -364,7 +402,7 @@ export const NavLinkButton = ({ to, className, target, ...props }: NavLinkPropsT
   return (
     <NavLink
       to={to}
-      className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
+      className={cn("group/button outline-none", props.fullWidth ? "w-full" : "")}
       target={target}
     >
       {({ isActive, isPending }) => (

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

@@ -61,6 +61,7 @@ export type CheckboxProps = Omit<
   description?: string;
   badges?: string[];
   className?: string;
+  labelClassName?: string;
   onChange?: (isChecked: boolean) => void;
 };
 
@@ -78,6 +79,7 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
       badges,
       disabled,
       className,
+      labelClassName: externalLabelClassName,
       ...props
     },
     ref
@@ -148,7 +150,8 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
               htmlFor={id}
               className={cn(
                 props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-                labelClassName
+                labelClassName,
+                externalLabelClassName
               )}
               onClick={(e) => e.preventDefault()}
             >

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

@@ -1,4 +1,4 @@
-import { BellAlertIcon } from "@heroicons/react/20/solid";
+import { BellAlertIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { CalendarDateTime, createCalendar } from "@internationalized/date";
 import { useDateField, useDateSegment } from "@react-aria/datepicker";
 import type { DateFieldState, DateSegment } from "@react-stately/datepicker";
@@ -12,7 +12,7 @@ const variants = {
   small: {
     fieldStyles: "h-5 text-sm rounded-sm px-0.5",
     nowButtonVariant: "tertiary/small" as const,
-    clearButtonVariant: "minimal/small" as const,
+    clearButtonVariant: "tertiary/small" as const,
   },
   medium: {
     fieldStyles: "h-7 text-base rounded px-1",
@@ -35,9 +35,12 @@ type DateFieldProps = {
   showNowButton?: boolean;
   showClearButton?: boolean;
   onValueChange?: (value: Date | undefined) => void;
+  utc?: boolean;
   variant?: Variant;
 };
 
+const deviceTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
 export function DateField({
   label,
   defaultValue,
@@ -50,10 +53,11 @@ export function DateField({
   showGuide = false,
   showNowButton = false,
   showClearButton = false,
+  utc = false,
   variant = "small",
 }: DateFieldProps) {
   const [value, setValue] = useState<undefined | CalendarDateTime>(
-    utcDateToCalendarDate(defaultValue)
+    utc ? utcDateToCalendarDate(defaultValue) : dateToCalendarDate(defaultValue)
   );
 
   const state = useDateFieldState({
@@ -61,11 +65,11 @@ export function DateField({
     onChange: (value) => {
       if (value) {
         setValue(value);
-        onValueChange?.(value.toDate("utc"));
+        onValueChange?.(value.toDate(utc ? "utc" : deviceTimezone));
       }
     },
-    minValue: utcDateToCalendarDate(minValue),
-    maxValue: utcDateToCalendarDate(maxValue),
+    minValue: utc ? utcDateToCalendarDate(minValue) : dateToCalendarDate(minValue),
+    maxValue: utc ? utcDateToCalendarDate(maxValue) : dateToCalendarDate(maxValue),
     shouldForceLeadingZeros: true,
     granularity,
     locale: "en-US",
@@ -78,7 +82,9 @@ export function DateField({
   useEffect(() => {
     if (state.value === undefined && defaultValue === undefined) return;
 
-    const calendarDate = utcDateToCalendarDate(defaultValue);
+    const calendarDate = utc
+      ? utcDateToCalendarDate(defaultValue)
+      : dateToCalendarDate(defaultValue);
     //unchanged
     if (state.value?.toDate("utc").getTime() === defaultValue?.getTime()) {
       return;
@@ -134,23 +140,19 @@ export function DateField({
           <Button
             type="button"
             variant={variants[variant].nowButtonVariant}
-            LeadingIcon={BellAlertIcon}
-            leadingIconClassName="text-text-dimmed group-hover:text-text-bright"
             onClick={() => {
               const now = new Date();
-              setValue(utcDateToCalendarDate(new Date()));
+              setValue(utc ? utcDateToCalendarDate(now) : dateToCalendarDate(now));
               onValueChange?.(now);
             }}
           >
-            <span className="text-text-dimmed transition group-hover:text-text-bright">Now</span>
+            Now
           </Button>
         )}
         {showClearButton && (
           <Button
             type="button"
             variant={variants[variant].clearButtonVariant}
-            LeadingIcon={"close"}
-            leadingIconClassName="-mr-2"
             onClick={() => {
               setValue(undefined);
               onValueChange?.(undefined);
@@ -181,7 +183,7 @@ function utcDateToCalendarDate(date?: Date) {
   return date
     ? new CalendarDateTime(
         date.getUTCFullYear(),
-        date.getUTCMonth(),
+        date.getUTCMonth() + 1,
         date.getUTCDate(),
         date.getUTCHours(),
         date.getUTCMinutes(),
@@ -190,6 +192,19 @@ function utcDateToCalendarDate(date?: Date) {
     : undefined;
 }
 
+function dateToCalendarDate(date?: Date) {
+  return date
+    ? new CalendarDateTime(
+        date.getFullYear(),
+        date.getMonth() + 1,
+        date.getDate(),
+        date.getHours(),
+        date.getMinutes(),
+        date.getSeconds()
+      )
+    : undefined;
+}
+
 type DateSegmentProps = {
   segment: DateSegment;
   state: DateFieldState;

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

@@ -34,6 +34,7 @@ type DetailCellProps = {
   description?: string | React.ReactNode;
   className?: string;
   variant?: keyof typeof variations;
+  boxClassName?: string;
 };
 
 export function DetailCell({
@@ -45,6 +46,7 @@ export function DetailCell({
   description,
   className,
   variant = "small",
+  boxClassName,
 }: DetailCellProps) {
   const variation = variations[variant];
 
@@ -53,6 +55,7 @@ export function DetailCell({
       <IconInBox
         icon={leadingIcon}
         className={cn("flex-none transition group-hover:border-charcoal-750", leadingIconClassName)}
+        boxClassName={boxClassName}
       />
       <div className="flex flex-1 flex-col">
         <Paragraph

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

@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
     >
       <hr className="absolute left-0 top-11 w-full" />
       {children}
-      <DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus-visible:ring-ring absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-3 top-2 rounded-sm py-1 pr-1 opacity-70 transition-opacity focus-custom hover:opacity-100 disabled:pointer-events-none">
         <div className="flex gap-x-2">
           <ShortcutKey
             shortcut={{
@@ -82,7 +82,7 @@ DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn("flex justify-between border-t border-grid-bright pt-4", className)}
     {...props}
   />
 );
@@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground pt-4 text-sm", className)}
+    className={cn("pt-2 text-base text-text-dimmed", className)}
     {...props}
   />
 ));

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

@@ -10,7 +10,12 @@ export function FormButtons({
   className?: string;
 }) {
   return (
-    <div className={cn("flex w-full items-center justify-between", className)}>
+    <div
+      className={cn(
+        "flex w-full items-center justify-between border-t border-grid-bright pt-4",
+        className
+      )}
+    >
       {cancelButton ? cancelButton : <div />} {confirmButton}
     </div>
   );

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

@@ -1,14 +1,17 @@
-import { LinkButton } from "./Buttons";
-import { Header3 } from "./Headers";
-import { Paragraph } from "./Paragraph";
 import { cn } from "~/utils/cn";
+import { LinkButton } from "./Buttons";
+import { Header2 } from "./Headers";
+import { Paragraph } from "./Paragraph";
 
 const variants = {
   info: {
-    panelStyle: "border-grid-bright bg-background-bright",
+    panelStyle: "border-grid-bright bg-background-bright rounded-md border p-4 gap-3",
   },
   upgrade: {
-    panelStyle: "border-indigo-400/20 bg-indigo-800/10",
+    panelStyle: "border-indigo-400/20 bg-indigo-800/10 rounded-md border p-4 gap-3",
+  },
+  minimal: {
+    panelStyle: "max-w-full w-full py-3 px-3 gap-2",
   },
 };
 
@@ -43,7 +46,7 @@ export function InfoPanel({
       className={cn(
         variantStyle.panelStyle,
         title ? "flex-col" : "",
-        "flex h-fit items-start gap-3 rounded-md border p-4",
+        "flex h-fit items-start",
         panelClassName
       )}
     >
@@ -57,7 +60,7 @@ export function InfoPanel({
         )}
       </div>
       <div className="flex flex-col gap-1">
-        {title && <Header3 className="text-text-bright">{title}</Header3>}
+        {title && <Header2 className="text-text-bright">{title}</Header2>}
         {typeof children === "string" ? (
           <Paragraph variant={"small"} className="text-text-dimmed">
             {children}

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

@@ -4,7 +4,7 @@ import { cn } from "~/utils/cn";
 import { Icon, RenderIcon } from "./Icon";
 
 const containerBase =
-  "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
+  "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-text-link has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
 
 const inputBase =
   "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none";

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

@@ -49,7 +49,7 @@ export function PageTitle({ title, backButton }: PageTitleProps) {
         <div className="group -ml-1.5 flex items-center gap-0">
           <Link
             to={backButton.to}
-            className="rounded px-1.5 py-1 text-xs text-text-dimmed transition group-hover:bg-charcoal-700 group-hover:text-text-bright"
+            className="rounded px-1.5 py-1 text-xs text-text-dimmed transition focus-custom group-hover:bg-charcoal-700 group-hover:text-text-bright"
           >
             {backButton.text}
           </Link>

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

@@ -20,15 +20,15 @@ export function PaginationControls({
   }
 
   return (
-    <nav className="flex items-center gap-1" aria-label="Pagination">
+    <nav className="flex items-center gap-0.5" aria-label="Pagination">
       <LinkDisabled
         to={pageUrl(location, currentPage - 1)}
         className={currentPage > 1 ? "group" : ""}
         disabled={currentPage === 1}
         disabledClassName="opacity-30 cursor-default"
       >
-        <ButtonContent variant="minimal/medium" LeadingIcon={ChevronLeftIcon}>
-          Previous
+        <ButtonContent variant="minimal/small" LeadingIcon={ChevronLeftIcon}>
+          Prev
         </ButtonContent>
       </LinkDisabled>
 
@@ -44,7 +44,7 @@ export function PaginationControls({
         disabled={currentPage === totalPages}
         disabledClassName="opacity-30 cursor-default"
       >
-        <ButtonContent variant="minimal/medium" TrailingIcon={ChevronRightIcon}>
+        <ButtonContent variant="minimal/small" TrailingIcon={ChevronRightIcon}>
           Next
         </ButtonContent>
       </LinkDisabled>
@@ -61,9 +61,9 @@ function pageUrl(location: ReturnType<typeof useLocation>, page: number): string
 }
 
 const baseClass =
-  "flex items-center justify-center border border-transparent h-8 w-8 text-xs font-medium transition text-text-dimmed rounded-sm";
+  "flex items-center justify-center border border-transparent min-w-6 h-6 px-1 text-xs font-medium transition text-text-dimmed rounded-sm";
 const unselectedClass = "hover:bg-tertiary hover:text-text-bright";
-const selectedClass = "border-text-dimmed text-text-bright hover:bg-tertiary";
+const selectedClass = "border-charcoal-600 bg-tertiary text-text-bright hover:bg-charcoal-600/50";
 
 function PageLinkComponent({
   page,

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

@@ -6,6 +6,8 @@ import * as React from "react";
 import { cn } from "~/utils/cn";
 import { type ButtonContentPropsType, LinkButton } from "./Buttons";
 import { Paragraph, type ParagraphVariant } from "./Paragraph";
+import { ShortcutKey } from "./ShortcutKey";
+import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -91,7 +93,7 @@ function PopoverCustomTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition hover:bg-charcoal-850 hover:text-text-bright",
+        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition focus-custom hover:bg-charcoal-850 hover:text-text-bright",
         className
       )}
     >
@@ -100,6 +102,45 @@ function PopoverCustomTrigger({
   );
 }
 
+function PopoverSideMenuTrigger({
+  isOpen,
+  children,
+  className,
+  shortcut,
+  ...props
+}: { isOpen?: boolean; shortcut?: ShortcutDefinition } & React.ComponentPropsWithoutRef<
+  typeof PopoverTrigger
+>) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+  useShortcutKeys({
+    shortcut: shortcut,
+    action: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (ref.current) {
+        ref.current.click();
+      }
+    },
+  });
+
+  return (
+    <PopoverTrigger
+      {...props}
+      ref={ref}
+      className={cn(
+        "flex h-[1.8rem] shrink-0 select-none items-center gap-x-1.5 rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+        shortcut ? "justify-between" : "",
+        className
+      )}
+    >
+      {children}
+      {shortcut && (
+        <ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
+      )}
+    </PopoverTrigger>
+  );
+}
+
 function PopoverArrowTrigger({
   isOpen,
   children,
@@ -116,7 +157,7 @@ function PopoverArrowTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex h-6 items-center gap-1 rounded px-2 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright",
+        "group flex h-6 items-center gap-1 rounded px-2 text-text-dimmed transition focus-custom hover:bg-charcoal-700 hover:text-text-bright",
         fullWidth && "w-full justify-between",
         className
       )}
@@ -149,11 +190,11 @@ function PopoverVerticalEllipseTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded px-1.5 py-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright",
+        "group flex items-center justify-end gap-1 rounded-[3px] p-0.5 text-text-dimmed transition focus-custom hover:bg-tertiary hover:text-text-bright",
         className
       )}
     >
-      <EllipsisVerticalIcon className={cn("h-5 w-5 transition group-hover:text-text-bright")} />
+      <EllipsisVerticalIcon className={cn("size-5 transition group-hover:text-text-bright")} />
     </PopoverTrigger>
   );
 }
@@ -165,6 +206,7 @@ export {
   PopoverCustomTrigger,
   PopoverMenuItem,
   PopoverSectionHeader,
+  PopoverSideMenuTrigger,
   PopoverTrigger,
   PopoverVerticalEllipseTrigger,
 };

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

@@ -70,7 +70,7 @@ export function RadioButtonCircle({
   return (
     <div
       className={cn(
-        "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "ring-offset-background aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-600 focus-custom disabled:cursor-not-allowed disabled:opacity-50",
         boxClassName
       )}
     >
@@ -81,7 +81,9 @@ export function RadioButtonCircle({
             outerCircleClassName
           )}
         >
-          <Circle className={cn("h-1.5 w-1.5 fill-white text-white", innerCircleClassName)} />
+          <Circle
+            className={cn("size-1.5 fill-text-bright text-text-bright", innerCircleClassName)}
+          />
         </div>
       )}
     </div>
@@ -121,7 +123,7 @@ export const RadioGroupItem = React.forwardRef<
       <RadioGroupPrimitive.Item
         ref={ref}
         className={cn(
-          "group flex cursor-pointer items-start gap-x-2 transition",
+          "group flex cursor-pointer items-start gap-x-2 transition focus-custom",
           variation.button,
           className
         )}
@@ -129,7 +131,7 @@ export const RadioGroupItem = React.forwardRef<
       >
         <div
           className={cn(
-            "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-600 focus-custom disabled:cursor-not-allowed disabled:opacity-50",
             variation.inputPosition
           )}
         >

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

@@ -26,7 +26,7 @@ const ResizableHandle = ({
 }) => (
   <PanelResizer
     className={cn(
-      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary/50 focus-visible:ring-offset-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "group relative flex w-0.75 items-center justify-center focus-custom after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
     size="3px"

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

@@ -65,10 +65,7 @@ export default function SegmentedControl({
               value={option.value}
               className={({ active, checked }) =>
                 cn(
-                  "relative flex h-full grow cursor-pointer text-center font-normal focus:outline-none",
-                  active
-                    ? "ring-offset-2 focus-visible:ring focus-visible:ring-secondary focus-visible:ring-opacity-60"
-                    : "",
+                  "relative flex h-full grow cursor-pointer text-center font-normal focus-custom",
                   checked
                     ? variants[variant].active
                     : "text-text-dimmed transition hover:text-text-bright"

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

@@ -15,18 +15,18 @@ const sizes = {
     button: "h-6 rounded text-xs px-2 ",
   },
   medium: {
-    button: "h-8 rounded text-xs px-3 text-sm",
+    button: "h-8 rounded px-3 text-sm",
   },
 };
 
 const style = {
   tertiary: {
     button:
-      "bg-tertiary focus-within:ring-charcoal-500 border border-tertiary hover:text-text-bright hover:border-charcoal-600",
+      "bg-tertiary focus-custom border border-tertiary hover:text-text-bright hover:border-charcoal-600",
   },
   minimal: {
     button:
-      "bg-transparent focus-within:ring-charcoal-500 hover:bg-tertiary disabled:bg-transparent disabled:pointer-events-none",
+      "bg-transparent focus-custom hover:bg-tertiary disabled:bg-transparent disabled:pointer-events-none",
   },
 };
 
@@ -322,7 +322,7 @@ export function SelectTrigger({
         render={
           <Ariakit.Select
             className={cn(
-              "group flex items-center gap-1 outline-offset-0 focus-within:outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+              "group flex items-center gap-1 focus-custom disabled:cursor-not-allowed disabled:opacity-50",
               variantClasses.button,
               className
             )}
@@ -426,7 +426,7 @@ export function SelectList(props: SelectListProps) {
     <Component
       {...props}
       className={cn(
-        "overflow-y-auto overscroll-contain outline-none scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+        "overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 focus-custom",
         props.className
       )}
     />
@@ -440,11 +440,11 @@ export interface SelectItemProps extends Ariakit.SelectItemProps {
 }
 
 const selectItemClasses =
-  "group cursor-pointer px-1 pt-1 text-xs text-text-dimmed outline-none last:pb-1";
+  "group cursor-pointer px-1 pt-1 text-2sm text-text-dimmed focus-custom last:pb-1";
 
 export function SelectItem({
   icon,
-  checkIcon = <Ariakit.SelectItemCheck className="size-8 flex-none text-white" />,
+  checkIcon = <Ariakit.SelectItemCheck className="size-8 flex-none text-text-bright" />,
   shortcut,
   ...props
 }: SelectItemProps) {
@@ -477,7 +477,7 @@ export function SelectItem({
       )}
       ref={ref}
     >
-      <div className="flex h-7 w-full items-center gap-1 rounded-sm px-2 group-data-[active-item=true]:bg-tertiary">
+      <div className="flex h-8 w-full items-center gap-1 rounded-sm px-2 group-data-[active-item=true]:bg-tertiary">
         {icon}
         <div className="grow truncate">{props.children || props.value}</div>
         {checkIcon}
@@ -613,7 +613,7 @@ export function SelectPopover({
         "z-50 flex flex-col overflow-clip rounded border border-charcoal-700 bg-background-bright shadow-md outline-none animate-in fade-in-40",
         "min-w-[max(180px,calc(var(--popover-anchor-width)+0.5rem))]",
         "max-w-[min(480px,var(--popover-available-width))]",
-        "max-h-[min(520px,var(--popover-available-height))]",
+        "max-h-[min(600px,var(--popover-available-height))]",
         "origin-[var(--popover-transform-origin)]",
         className
       )}

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

@@ -6,17 +6,17 @@ import { cn } from "~/utils/cn";
 
 const variations = {
   large: {
-    container: "flex items-center gap-x-2 rounded-md hover:bg-tertiary p-2 transition",
+    container: "flex items-center gap-x-2 rounded-md hover:bg-tertiary p-2 transition focus-custom",
     root: "h-6 w-11",
     thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
     text: "text-sm text-charcoal-400 group-hover:text-charcoal-200 transition",
   },
   small: {
     container:
-      "flex items-center gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 transition",
+      "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer",
     root: "h-3 w-6",
     thumb: "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
-    text: "text-xs text-charcoal-400 group-hover:text-charcoal-200 hover:cursor-pointer transition",
+    text: "text-xs",
   },
 };
 
@@ -38,14 +38,14 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
         ) : null}
         <div
           className={cn(
-            "group-focus-visible:ring-ring group-focus-visible:ring-offset-background peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-secondary group-data-[state=unchecked]:bg-charcoal-700 focus-visible:outline-none",
+            "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-text-link group-data-[state=unchecked]:bg-charcoal-700",
             root
           )}
         >
           <SwitchPrimitives.Thumb
             className={cn(
               thumb,
-              "pointer-events-none block rounded-full bg-charcoal-200 shadow-lg ring-0 transition group-data-[state=checked]:bg-charcoal-700"
+              "pointer-events-none block rounded-full bg-charcoal-200 transition group-data-[state=checked]:bg-text-bright"
             )}
           />
         </div>

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

@@ -17,7 +17,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
     return (
       <div
         className={cn(
-          "overflow-x-auto whitespace-nowrap rounded-md border border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+          "overflow-x-auto whitespace-nowrap border-t border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
           containerClassName,
           fullWidth && "w-full"
         )}
@@ -41,7 +41,7 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
       <thead
         ref={ref}
         className={cn(
-          "sticky top-0 z-10 divide-y divide-grid-dimmed rounded-t-md bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-dimmed",
+          "sticky top-0 z-10 bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
           className
         )}
       >
@@ -59,10 +59,7 @@ type TableBodyProps = {
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({ className, children }, ref) => {
     return (
-      <tbody
-        ref={ref}
-        className={cn("relative divide-y divide-grid-dimmed overflow-y-auto", className)}
-      >
+      <tbody ref={ref} className={cn("relative overflow-y-auto", className)}>
         {children}
       </tbody>
     );
@@ -78,7 +75,14 @@ type TableRowProps = {
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   ({ className, disabled, children }, ref) => {
     return (
-      <tr ref={ref} className={cn(disabled && "opacity-50", "group/table-row w-full", className)}>
+      <tr
+        ref={ref}
+        className={cn(
+          disabled && "opacity-50",
+          "group/table-row relative w-full after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
+          className
+        )}
+      >
         {children}
       </tr>
     );
@@ -114,7 +118,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         ref={ref}
         scope="col"
         className={cn(
-          "px-3 py-2 align-middle text-xxs font-normal uppercase tracking-wider text-text-dimmed",
+          "px-3 py-2.5 pb-3 align-middle text-sm font-medium text-text-bright",
           alignmentClassName,
           className
         )}
@@ -145,13 +149,16 @@ type TableCellProps = TableCellBasicProps & {
 };
 
 const rowHoverStyles = {
-  default: "group-hover/table-row:bg-charcoal-800",
-  dimmed: "group-hover/table-row:bg-charcoal-850",
-  bright: "group-hover/table-row:bg-charcoal-750",
+  default:
+    "group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
+  dimmed:
+    "group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
+  bright:
+    "group-hover/table-row:bg-charcoal-750 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-700 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-700 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
 };
 
 const stickyStyles =
-  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem]";
+  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto";
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   (
@@ -192,7 +199,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         ref={ref}
         className={cn(
-          "text-xs text-charcoal-400 transition-colors",
+          "text-xs text-charcoal-400",
           to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
@@ -202,11 +209,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         colSpan={colSpan}
       >
         {to ? (
-          <Link to={to} className={cn(flexClasses, actionClassName)}>
+          <Link to={to} className={cn("focus-custom", flexClasses, actionClassName)}>
             {children}
           </Link>
         ) : onClick ? (
-          <button onClick={onClick} className={cn(flexClasses, actionClassName)}>
+          <button onClick={onClick} className={cn("focus-custom", flexClasses, actionClassName)}>
             {children}
           </button>
         ) : (
@@ -237,7 +244,7 @@ export const TableCellChevron = forwardRef<
       alignment="right"
     >
       {children}
-      <ChevronRightIcon className="h-4 w-4 text-text-dimmed transition group-hover:text-text-bright" />
+      <ChevronRightIcon className="size-4 text-text-dimmed transition group-hover:text-text-bright" />
     </TableCell>
   );
 });
@@ -246,33 +253,72 @@ export const TableCellMenu = forwardRef<
   HTMLTableCellElement,
   {
     className?: string;
-    children?: ReactNode;
     isSticky?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    visibleButtons?: ReactNode;
+    hiddenButtons?: ReactNode;
+    popoverContent?: ReactNode;
+    children?: ReactNode;
   }
->(({ className, children, isSticky, onClick }, ref) => {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <TableCell
-      className={className}
-      isSticky={isSticky}
-      onClick={onClick}
-      ref={ref}
-      alignment="right"
-      hasAction={true}
-    >
-      <Popover onOpenChange={(open) => setIsOpen(open)}>
-        <PopoverVerticalEllipseTrigger isOpen={isOpen} />
-        <PopoverContent
-          className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-          align="end"
-        >
-          <div className="flex flex-col gap-1 p-1">{children}</div>
-        </PopoverContent>
-      </Popover>
-    </TableCell>
-  );
-});
+>(
+  (
+    { className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent, children },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <TableCell
+        className={className}
+        isSticky={isSticky}
+        onClick={onClick}
+        ref={ref}
+        alignment="right"
+        hasAction={true}
+      >
+        <div className="relative p-1">
+          <div className="absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 bg-background-dimmed p-0.5 group-hover/table-row:rounded-[0.25rem] group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright">
+            {/* Hidden buttons that show on hover */}
+            {hiddenButtons && (
+              <div className="hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed">
+                {hiddenButtons}
+              </div>
+            )}
+            {/* Always visible buttons  */}
+            {visibleButtons}
+            {/* Always visible popover with ellipsis trigger */}
+            {popoverContent && (
+              <Popover onOpenChange={(open) => setIsOpen(open)}>
+                <PopoverVerticalEllipseTrigger
+                  isOpen={isOpen}
+                  className="duration-0 group-hover/table-row:text-text-bright"
+                />
+                <PopoverContent
+                  className="min-w-[10rem] max-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                  align="end"
+                >
+                  <div className="flex flex-col gap-1 p-1">{popoverContent}</div>
+                </PopoverContent>
+              </Popover>
+            )}
+            {/* Optionally pass in children to render in a popover */}
+            {!visibleButtons && !hiddenButtons && !popoverContent && (
+              <Popover onOpenChange={(open) => setIsOpen(open)}>
+                <PopoverVerticalEllipseTrigger isOpen={isOpen} />
+                <PopoverContent
+                  className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                  align="end"
+                >
+                  <div className="flex flex-col gap-1 p-1">{children}</div>
+                </PopoverContent>
+              </Popover>
+            )}
+          </div>
+        </div>
+      </TableCell>
+    );
+  }
+);
 
 type TableBlankRowProps = {
   className?: string;

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

@@ -46,7 +46,7 @@ export function TabLink({
   layoutId: string;
 }) {
   return (
-    <NavLink to={to} className="group flex flex-col items-center pt-1" end>
+    <NavLink to={to} className="group flex flex-col items-center pt-1 focus-custom" end>
       {({ isActive, isPending }) => {
         return (
           <>
@@ -96,7 +96,7 @@ export function TabButton({
 
   return (
     <button
-      className={cn("group flex flex-col items-center pt-1", props.className)}
+      className={cn("group flex flex-col items-center pt-1 focus-custom", props.className)}
       type="button"
       ref={ref}
       {...props}

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

@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
       {...props}
       rows={rows ?? 6}
       className={cn(
-        "ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:ring-ring focus-visible:ring-ring w-full rounded-md border border-tertiary bg-tertiary px-3 text-sm text-text-bright transition file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 focus:outline-none focus:ring-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground w-full rounded border border-charcoal-800 bg-charcoal-750 px-3 text-sm text-text-bright transition focus-custom focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 hover:bg-charcoal-650 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
     />

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

@@ -41,7 +41,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-none",
       variantClasses[variant],
       className
     )}
@@ -72,7 +72,9 @@ function SimpleTooltip({
   return (
     <TooltipProvider disableHoverableContent={disableHoverableContent}>
       <Tooltip>
-        <TooltipTrigger className={cn("h-fit", buttonClassName)}>{button}</TooltipTrigger>
+        <TooltipTrigger tabIndex={-1} className={cn("h-fit", buttonClassName)}>
+          {button}
+        </TooltipTrigger>
         <TooltipContent
           side={side}
           hidden={hidden}

apps/webapp/app/components/runs/TimeFrameFilter.tsx

@@ -214,6 +214,7 @@ export function AbsoluteTimeFrame({
             granularity="second"
             showNowButton
             showClearButton
+            utc
           />
         </div>
         <div className="space-y-1">
@@ -227,6 +228,7 @@ export function AbsoluteTimeFrame({
             granularity="second"
             showNowButton
             showClearButton
+            utc
           />
         </div>
       </div>

apps/webapp/app/components/runs/v3/BatchFilters.tsx

@@ -0,0 +1,446 @@
+import * as Ariakit from "@ariakit/react";
+import { CalendarIcon, CpuChipIcon, Squares2X2Icon, TrashIcon } from "@heroicons/react/20/solid";
+import { Form } from "@remix-run/react";
+import type { BatchTaskRunStatus, RuntimeEnvironment } from "@trigger.dev/database";
+import { ListFilterIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { z } from "zod";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import { FormError } from "~/components/primitives/FormError";
+import { Input } from "~/components/primitives/Input";
+import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import {
+  ComboBox,
+  SelectButtonItem,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+  shortcutFromIndex,
+} from "~/components/primitives/Select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/primitives/Tooltip";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { Button } from "../../primitives/Buttons";
+import {
+  allBatchStatuses,
+  BatchStatusCombo,
+  batchStatusTitle,
+  descriptionForBatchStatus,
+} from "./BatchStatus";
+import {
+  AppliedCustomDateRangeFilter,
+  AppliedEnvironmentFilter,
+  AppliedPeriodFilter,
+  appliedSummary,
+  CreatedAtDropdown,
+  CustomDateRangeDropdown,
+  EnvironmentsDropdown,
+  FilterMenuProvider,
+} from "./SharedFilters";
+
+export const BatchStatus = z.enum(allBatchStatuses);
+
+export const BatchListFilters = z.object({
+  cursor: z.string().optional(),
+  direction: z.enum(["forward", "backward"]).optional(),
+  environments: z.preprocess(
+    (value) => (typeof value === "string" ? [value] : value),
+    z.string().array().optional()
+  ),
+  statuses: z.preprocess(
+    (value) => (typeof value === "string" ? [value] : value),
+    BatchStatus.array().optional()
+  ),
+  period: z.preprocess((value) => (value === "all" ? undefined : value), z.string().optional()),
+  id: z.string().optional(),
+  from: z.coerce.number().optional(),
+  to: z.coerce.number().optional(),
+});
+
+export type BatchListFilters = z.infer<typeof BatchListFilters>;
+
+type DisplayableEnvironment = Pick<RuntimeEnvironment, "type" | "id"> & {
+  userName?: string;
+};
+
+type BatchFiltersProps = {
+  possibleEnvironments: DisplayableEnvironment[];
+  hasFilters: boolean;
+};
+
+export function BatchFilters(props: BatchFiltersProps) {
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const hasFilters =
+    searchParams.has("statuses") ||
+    searchParams.has("environments") ||
+    searchParams.has("id") ||
+    searchParams.has("period") ||
+    searchParams.has("from") ||
+    searchParams.has("to");
+
+  return (
+    <div className="flex flex-row flex-wrap items-center gap-1">
+      <FilterMenu {...props} />
+      <AppliedFilters {...props} />
+      {hasFilters && (
+        <Form className="h-6">
+          <Button variant="minimal/small" LeadingIcon={TrashIcon}>
+            Clear all
+          </Button>
+        </Form>
+      )}
+    </div>
+  );
+}
+
+const filterTypes = [
+  {
+    name: "statuses",
+    title: "Status",
+    icon: (
+      <div className="flex size-4 items-center justify-center">
+        <div className="size-3 rounded-full border-2 border-text-dimmed" />
+      </div>
+    ),
+  },
+  { name: "environments", title: "Environment", icon: <CpuChipIcon className="size-4" /> },
+  { name: "created", title: "Created", icon: <CalendarIcon className="size-4" /> },
+  { name: "daterange", title: "Custom date range", icon: <CalendarIcon className="size-4" /> },
+  { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
+] as const;
+
+type FilterType = (typeof filterTypes)[number]["name"];
+
+const shortcut = { key: "f" };
+
+function FilterMenu(props: BatchFiltersProps) {
+  const [filterType, setFilterType] = useState<FilterType | undefined>();
+
+  const filterTrigger = (
+    <SelectTrigger
+      icon={
+        <div className="flex size-4 items-center justify-center">
+          <ListFilterIcon className="size-3.5" />
+        </div>
+      }
+      variant={"minimal/small"}
+      shortcut={shortcut}
+      tooltipTitle={"Filter runs"}
+    >
+      Filter
+    </SelectTrigger>
+  );
+
+  return (
+    <FilterMenuProvider onClose={() => setFilterType(undefined)}>
+      {(search, setSearch) => (
+        <Menu
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          trigger={filterTrigger}
+          filterType={filterType}
+          setFilterType={setFilterType}
+          {...props}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function AppliedFilters({ possibleEnvironments }: BatchFiltersProps) {
+  return (
+    <>
+      <AppliedStatusFilter />
+      <AppliedEnvironmentFilter possibleEnvironments={possibleEnvironments} />
+      <AppliedPeriodFilter />
+      <AppliedCustomDateRangeFilter />
+      <AppliedBatchIdFilter />
+    </>
+  );
+}
+
+type MenuProps = {
+  searchValue: string;
+  clearSearchValue: () => void;
+  trigger: React.ReactNode;
+  filterType: FilterType | undefined;
+  setFilterType: (filterType: FilterType | undefined) => void;
+} & BatchFiltersProps;
+
+function Menu(props: MenuProps) {
+  switch (props.filterType) {
+    case undefined:
+      return <MainMenu {...props} />;
+    case "statuses":
+      return <StatusDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "environments":
+      return <EnvironmentsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "created":
+      return <CreatedAtDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "daterange":
+      return <CustomDateRangeDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "batch":
+      return <BatchIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+  }
+}
+
+function MainMenu({ searchValue, trigger, clearSearchValue, setFilterType }: MenuProps) {
+  const filtered = useMemo(() => {
+    return filterTypes.filter((item) => {
+      if (item.name === "daterange") return false;
+      return item.title.toLowerCase().includes(searchValue.toLowerCase());
+    });
+  }, [searchValue]);
+
+  return (
+    <SelectProvider virtualFocus={true}>
+      {trigger}
+      <SelectPopover>
+        <ComboBox placeholder={"Filter by..."} shortcut={shortcut} value={searchValue} />
+        <SelectList>
+          {filtered.map((type, index) => (
+            <SelectButtonItem
+              key={type.name}
+              onClick={() => {
+                clearSearchValue();
+                setFilterType(type.name);
+              }}
+              icon={type.icon}
+              shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
+            >
+              {type.title}
+            </SelectButtonItem>
+          ))}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+const statuses = allBatchStatuses.map((status) => ({
+  title: batchStatusTitle(status),
+  value: status,
+}));
+
+function StatusDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ statuses: values, cursor: undefined, direction: undefined });
+  };
+
+  const filtered = useMemo(() => {
+    return statuses.filter((item) => item.title.toLowerCase().includes(searchValue.toLowerCase()));
+  }, [searchValue]);
+
+  return (
+    <SelectProvider value={values("statuses")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <ComboBox placeholder={"Filter by status..."} value={searchValue} />
+        <SelectList>
+          {filtered.map((item, index) => (
+            <SelectItem
+              key={item.value}
+              value={item.value}
+              shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
+            >
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger className="group flex w-full flex-col py-0">
+                    <BatchStatusCombo status={item.value} iconClassName="animate-none" />
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={9}>
+                    <Paragraph variant="extra-small">
+                      {descriptionForBatchStatus(item.value)}
+                    </Paragraph>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </SelectItem>
+          ))}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedStatusFilter() {
+  const { values, del } = useSearchParams();
+  const statuses = values("statuses");
+
+  if (statuses.length === 0) {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <StatusDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Status"
+                value={appliedSummary(
+                  statuses.map((v) => batchStatusTitle(v as BatchTaskRunStatus))
+                )}
+                onRemove={() => del(["statuses", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function BatchIdDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const [open, setOpen] = useState<boolean | undefined>();
+  const { value, replace } = useSearchParams();
+  const batchIdValue = value("id");
+
+  const [batchId, setBatchId] = useState(batchIdValue);
+
+  const apply = useCallback(() => {
+    clearSearchValue();
+    replace({
+      cursor: undefined,
+      direction: undefined,
+      id: batchId === "" ? undefined : batchId?.toString(),
+    });
+
+    setOpen(false);
+  }, [batchId, replace]);
+
+  let error: string | undefined = undefined;
+  if (batchId) {
+    if (!batchId.startsWith("batch_")) {
+      error = "Batch IDs start with 'batch_'";
+    } else if (batchId.length !== 27) {
+      error = "Batch IDs are 27 characters long";
+    }
+  }
+
+  return (
+    <SelectProvider virtualFocus={true} open={open} setOpen={setOpen}>
+      {trigger}
+      <SelectPopover
+        hideOnEnter={false}
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+        className="max-w-[min(32ch,var(--popover-available-width))]"
+      >
+        <div className="flex flex-col gap-4 p-3">
+          <div className="flex flex-col gap-1">
+            <Label>Batch ID</Label>
+            <Input
+              placeholder="batch_"
+              value={batchId ?? ""}
+              onChange={(e) => setBatchId(e.target.value)}
+              variant="small"
+              className="w-[29ch] font-mono"
+              spellCheck={false}
+            />
+            {error ? <FormError>{error}</FormError> : null}
+          </div>
+          <div className="flex justify-between gap-1 border-t border-grid-dimmed pt-3">
+            <Button variant="tertiary/small" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={error !== undefined || !batchId}
+              variant="secondary/small"
+              shortcut={{
+                modifiers: ["meta"],
+                key: "Enter",
+                enabledOnInputElements: true,
+              }}
+              onClick={() => apply()}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedBatchIdFilter() {
+  const { value, del } = useSearchParams();
+
+  if (value("id") === undefined) {
+    return null;
+  }
+
+  const batchId = value("id");
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <BatchIdDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Batch ID"
+                value={batchId}
+                onRemove={() => del(["id", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}

apps/webapp/app/components/runs/v3/BatchStatus.tsx

@@ -0,0 +1,81 @@
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
+import { BatchTaskRunStatus } from "@trigger.dev/database";
+import assertNever from "assert-never";
+import { Spinner } from "~/components/primitives/Spinner";
+import { cn } from "~/utils/cn";
+
+export const allBatchStatuses = ["PENDING", "COMPLETED"] as const satisfies Readonly<
+  Array<BatchTaskRunStatus>
+>;
+
+const descriptions: Record<BatchTaskRunStatus, string> = {
+  PENDING: "The batch has child runs that have not yet completed.",
+  COMPLETED: "All the batch child runs have finished.",
+};
+
+export function descriptionForBatchStatus(status: BatchTaskRunStatus): string {
+  return descriptions[status];
+}
+
+export function BatchStatusCombo({
+  status,
+  className,
+  iconClassName,
+}: {
+  status: BatchTaskRunStatus;
+  className?: string;
+  iconClassName?: string;
+}) {
+  return (
+    <span className={cn("flex items-center gap-1", className)}>
+      <BatchStatusIcon status={status} className={cn("h-4 w-4", iconClassName)} />
+      <BatchStatusLabel status={status} />
+    </span>
+  );
+}
+
+export function BatchStatusLabel({ status }: { status: BatchTaskRunStatus }) {
+  return <span className={batchStatusColor(status)}>{batchStatusTitle(status)}</span>;
+}
+
+export function BatchStatusIcon({
+  status,
+  className,
+}: {
+  status: BatchTaskRunStatus;
+  className: string;
+}) {
+  switch (status) {
+    case "PENDING":
+      return <Spinner className={cn(batchStatusColor(status), className)} />;
+    case "COMPLETED":
+      return <CheckCircleIcon className={cn(batchStatusColor(status), className)} />;
+    default: {
+      assertNever(status);
+    }
+  }
+}
+
+export function batchStatusColor(status: BatchTaskRunStatus): string {
+  switch (status) {
+    case "PENDING":
+      return "text-pending";
+    case "COMPLETED":
+      return "text-success";
+    default: {
+      assertNever(status);
+    }
+  }
+}
+
+export function batchStatusTitle(status: BatchTaskRunStatus): string {
+  switch (status) {
+    case "PENDING":
+      return "In progress";
+    case "COMPLETED":
+      return "Completed";
+    default: {
+      assertNever(status);
+    }
+  }
+}

apps/webapp/app/components/runs/v3/CancelRunDialog.tsx

@@ -1,4 +1,6 @@
 import { StopCircleIcon } from "@heroicons/react/20/solid";
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useFetcher, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/primitives/Buttons";
 import {
@@ -7,6 +9,8 @@ import {
   DialogFooter,
   DialogHeader,
 } from "~/components/primitives/Dialog";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { Paragraph } from "~/components/primitives/Paragraph";
 
 type CancelRunDialogProps = {
   runFriendlyId: string;
@@ -22,24 +26,33 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog
   return (
     <DialogContent key="cancel">
       <DialogHeader>Cancel this run?</DialogHeader>
-      <DialogDescription>
-        Canceling a run will stop execution, along with any executing subtasks.
-      </DialogDescription>
-      <DialogFooter>
-        <Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
-          <Button
-            type="submit"
-            name="redirectUrl"
-            value={redirectPath}
-            variant="danger/small"
-            LeadingIcon={isLoading ? "spinner-white" : StopCircleIcon}
-            disabled={isLoading}
-            shortcut={{ modifiers: ["meta"], key: "enter" }}
-          >
-            {isLoading ? "Canceling..." : "Cancel run"}
-          </Button>
-        </Form>
-      </DialogFooter>
+      <div className="flex flex-col gap-3 pt-3">
+        <Paragraph>
+          Canceling a run will stop execution, along with any executing subtasks.
+        </Paragraph>
+        <FormButtons
+          confirmButton={
+            <Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
+              <Button
+                type="submit"
+                name="redirectUrl"
+                value={redirectPath}
+                variant="danger/medium"
+                LeadingIcon={isLoading ? "spinner-white" : NoSymbolIcon}
+                disabled={isLoading}
+                shortcut={{ modifiers: ["meta"], key: "enter" }}
+              >
+                {isLoading ? "Canceling..." : "Cancel run"}
+              </Button>
+            </Form>
+          }
+          cancelButton={
+            <DialogClose asChild>
+              <Button variant={"tertiary/medium"}>Close</Button>
+            </DialogClose>
+          }
+        />
+      </div>
     </DialogContent>
   );
 }

apps/webapp/app/components/runs/v3/CheckBatchCompletionDialog.tsx

@@ -0,0 +1,57 @@
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Form, useNavigation } from "@remix-run/react";
+import { Button } from "~/components/primitives/Buttons";
+import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+type CheckBatchCompletionDialogProps = {
+  batchId: string;
+  redirectPath: string;
+};
+
+export function CheckBatchCompletionDialog({
+  batchId,
+  redirectPath,
+}: CheckBatchCompletionDialogProps) {
+  const navigation = useNavigation();
+
+  const formAction = `/resources/batches/${batchId}/check-completion`;
+  const isLoading = navigation.formAction === formAction;
+
+  return (
+    <DialogContent key="check-completion">
+      <DialogHeader>Try and resume batch</DialogHeader>
+      <div className="flex flex-col gap-3 pt-3">
+        <Paragraph>
+          In rare cases, parent runs don't continue after child runs have completed.
+        </Paragraph>
+        <Paragraph>
+          If this doesn't help, please get in touch. We are working on a permanent fix for this.
+        </Paragraph>
+        <FormButtons
+          confirmButton={
+            <Form action={`/resources/batches/${batchId}/check-completion`} method="post">
+              <Button
+                type="submit"
+                name="redirectUrl"
+                value={redirectPath}
+                variant="primary/medium"
+                LeadingIcon={isLoading ? "spinner-white" : undefined}
+                disabled={isLoading}
+                shortcut={{ modifiers: ["meta"], key: "enter" }}
+              >
+                {isLoading ? "Attempting resume..." : "Attempt resume"}
+              </Button>
+            </Form>
+          }
+          cancelButton={
+            <DialogClose asChild>
+              <Button variant={"tertiary/medium"}>Cancel</Button>
+            </DialogClose>
+          }
+        />
+      </div>
+    </DialogContent>
+  );
+}

apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx

@@ -129,12 +129,12 @@ function ReplayForm({
           defaultValue={environment.id}
           items={environments}
           dropdownIcon
-          variant="tertiary/small"
+          variant="tertiary/medium"
           className="w-fit pl-1"
           text={(value) => {
             const env = environments.find((env) => env.id === value)!;
             return (
-              <div className="flex items-center pr-2">
+              <div className="flex items-center pl-1 pr-2">
                 <EnvironmentLabel environment={env} userName={env.userName} />
               </div>
             );
@@ -152,11 +152,11 @@ function ReplayForm({
       <input type="hidden" name="failedRedirect" value={failedRedirect} />
       <div className="mt-3 flex items-center justify-between gap-2 border-t border-grid-dimmed pt-3.5">
         <DialogClose asChild>
-          <Button variant="tertiary/small">Cancel</Button>
+          <Button variant="tertiary/medium">Cancel</Button>
         </DialogClose>
         <Button
           type="submit"
-          variant="primary/small"
+          variant="primary/medium"
           LeadingIcon={isSubmitting ? ButtonSpinner : undefined}
           disabled={isSubmitting}
           shortcut={{ modifiers: ["meta"], key: "enter", enabledOnInputElements: true }}

apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx

@@ -1,4 +1,5 @@
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/primitives/Buttons";
 import {
@@ -33,6 +34,9 @@ export function RetryDeploymentIndexingDialog({
         any errors and re-deploy.
       </DialogDescription>
       <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="tertiary/medium">Cancel</Button>
+        </DialogClose>
         <Form
           action={`/resources/${projectId}/deployments/${deploymentShortCode}/retry-indexing`}
           method="post"
@@ -41,7 +45,7 @@ export function RetryDeploymentIndexingDialog({
             type="submit"
             name="redirectUrl"
             value={redirectPath}
-            variant="primary/small"
+            variant="primary/medium"
             LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon}
             disabled={isLoading}
             shortcut={{ modifiers: ["meta"], key: "enter" }}

apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx

@@ -1,4 +1,5 @@
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/primitives/Buttons";
 import {
@@ -33,6 +34,9 @@ export function RollbackDeploymentDialog({
         with these tasks included.
       </DialogDescription>
       <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="tertiary/medium">Cancel</Button>
+        </DialogClose>
         <Form
           action={`/resources/${projectId}/deployments/${deploymentShortCode}/rollback`}
           method="post"
@@ -41,7 +45,7 @@ export function RollbackDeploymentDialog({
             type="submit"
             name="redirectUrl"
             value={redirectPath}
-            variant="primary/small"
+            variant="primary/medium"
             LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon}
             disabled={isLoading}
             shortcut={{ modifiers: ["meta"], key: "enter" }}

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -1,30 +1,34 @@
 import * as Ariakit from "@ariakit/react";
 import {
-  ArrowPathIcon,
   CalendarIcon,
+  ClockIcon,
   CpuChipIcon,
-  InboxStackIcon,
+  FingerPrintIcon,
+  Squares2X2Icon,
   TagIcon,
-  XMarkIcon,
+  TrashIcon,
 } from "@heroicons/react/20/solid";
 import { Form, useFetcher } from "@remix-run/react";
 import type {
-  RuntimeEnvironment,
-  TaskTriggerSource,
-  TaskRunStatus,
   BulkActionType,
+  RuntimeEnvironment,
+  TaskRunStatus,
+  TaskTriggerSource,
 } from "@trigger.dev/database";
-import { ListFilterIcon } from "lucide-react";
+import { ListChecks, ListFilterIcon } from "lucide-react";
+import { matchSorter } from "match-sorter";
 import type { ReactNode } from "react";
-import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
-import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import { DateTime } from "~/components/primitives/DateTime";
+import { FormError } from "~/components/primitives/FormError";
+import { Input } from "~/components/primitives/Input";
+import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   ComboBox,
-  ComboboxProvider,
   SelectButtonItem,
   SelectItem,
   SelectList,
@@ -33,6 +37,8 @@ import {
   SelectTrigger,
   shortcutFromIndex,
 } from "~/components/primitives/Select";
+import { Spinner } from "~/components/primitives/Spinner";
+import { Switch } from "~/components/primitives/Switch";
 import {
   Tooltip,
   TooltipContent,
@@ -40,22 +46,29 @@ import {
   TooltipTrigger,
 } from "~/components/primitives/Tooltip";
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { useProject } from "~/hooks/useProject";
 import { useSearchParams } from "~/hooks/useSearchParam";
+import { type loader as tagsLoader } from "~/routes/resources.projects.$projectParam.runs.tags";
 import { Button } from "../../primitives/Buttons";
+import { BulkActionStatusCombo } from "./BulkAction";
+import {
+  AppliedCustomDateRangeFilter,
+  AppliedEnvironmentFilter,
+  AppliedPeriodFilter,
+  appliedSummary,
+  CreatedAtDropdown,
+  CustomDateRangeDropdown,
+  EnvironmentsDropdown,
+  FilterMenuProvider,
+} from "./SharedFilters";
 import {
-  TaskRunStatusCombo,
   allTaskRunStatuses,
-  filterableTaskRunStatuses,
   descriptionForTaskRunStatus,
+  filterableTaskRunStatuses,
   runStatusTitle,
+  TaskRunStatusCombo,
 } from "./TaskRunStatus";
 import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
-import { DateTime } from "~/components/primitives/DateTime";
-import { BulkActionStatusCombo } from "./BulkAction";
-import { type loader } from "~/routes/resources.projects.$projectParam.runs.tags";
-import { useProject } from "~/hooks/useProject";
-import { Spinner } from "~/components/primitives/Spinner";
-import { matchSorter } from "match-sorter";
 
 export const TaskAttemptStatus = z.enum(allTaskRunStatuses);
 
@@ -86,6 +99,10 @@ export const TaskRunListSearchFilters = z.object({
   bulkId: z.string().optional(),
   from: z.coerce.number().optional(),
   to: z.coerce.number().optional(),
+  rootOnly: z.coerce.boolean().optional(),
+  batchId: z.string().optional(),
+  runId: z.string().optional(),
+  scheduleId: z.string().optional(),
 });
 
 export type TaskRunListSearchFilters = z.infer<typeof TaskRunListSearchFilters>;
@@ -102,6 +119,7 @@ type RunFiltersProps = {
     type: BulkActionType;
     createdAt: Date;
   }[];
+  rootOnlyDefault: boolean;
   hasFilters: boolean;
 };
 
@@ -114,15 +132,24 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("tasks") ||
     searchParams.has("period") ||
     searchParams.has("bulkId") ||
-    searchParams.has("tags");
+    searchParams.has("tags") ||
+    searchParams.has("from") ||
+    searchParams.has("to") ||
+    searchParams.has("batchId") ||
+    searchParams.has("runId") ||
+    searchParams.has("scheduleId");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
       <FilterMenu {...props} />
+      <RootOnlyToggle defaultValue={props.rootOnlyDefault} />
       <AppliedFilters {...props} />
       {hasFilters && (
-        <Form>
-          <Button variant="minimal/small" LeadingIcon={XMarkIcon}>
+        <Form className="h-6">
+          {searchParams.has("rootOnly") && (
+            <input type="hidden" name="rootOnly" value={searchParams.get("rootOnly") as string} />
+          )}
+          <Button variant="minimal/small" LeadingIcon={TrashIcon}>
             Clear all
           </Button>
         </Form>
@@ -145,7 +172,11 @@ const filterTypes = [
   { name: "tasks", title: "Tasks", icon: <TaskIcon className="size-4" /> },
   { name: "tags", title: "Tags", icon: <TagIcon className="size-4" /> },
   { name: "created", title: "Created", icon: <CalendarIcon className="size-4" /> },
-  { name: "bulk", title: "Bulk action", icon: <InboxStackIcon className="size-4" /> },
+  { name: "daterange", title: "Custom date range", icon: <CalendarIcon className="size-4" /> },
+  { name: "run", title: "Run ID", icon: <FingerPrintIcon className="size-4" /> },
+  { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
+  { name: "schedule", title: "Schedule ID", icon: <ClockIcon className="size-4" /> },
+  { name: "bulk", title: "Bulk action", icon: <ListChecks className="size-4" /> },
 ] as const;
 
 type FilterType = (typeof filterTypes)[number]["name"];
@@ -186,34 +217,6 @@ function FilterMenu(props: RunFiltersProps) {
   );
 }
 
-function FilterMenuProvider({
-  children,
-  onClose,
-}: {
-  children: (search: string, setSearch: (value: string) => void) => React.ReactNode;
-  onClose?: () => void;
-}) {
-  const [searchValue, setSearchValue] = useState("");
-
-  return (
-    <ComboboxProvider
-      resetValueOnHide
-      setValue={(value) => {
-        startTransition(() => {
-          setSearchValue(value);
-        });
-      }}
-      setOpen={(open) => {
-        if (!open && onClose) {
-          onClose();
-        }
-      }}
-    >
-      {children(searchValue, setSearchValue)}
-    </ComboboxProvider>
-  );
-}
-
 function AppliedFilters({ possibleEnvironments, possibleTasks, bulkActions }: RunFiltersProps) {
   return (
     <>
@@ -222,6 +225,10 @@ function AppliedFilters({ possibleEnvironments, possibleTasks, bulkActions }: Ru
       <AppliedTaskFilter possibleTasks={possibleTasks} />
       <AppliedTagsFilter />
       <AppliedPeriodFilter />
+      <AppliedCustomDateRangeFilter />
+      <AppliedRunIdFilter />
+      <AppliedBatchIdFilter />
+      <AppliedScheduleIdFilter />
       <AppliedBulkActionsFilter bulkActions={bulkActions} />
     </>
   );
@@ -246,19 +253,28 @@ function Menu(props: MenuProps) {
     case "tasks":
       return <TasksDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "created":
-      return <CreatedDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+      return <CreatedAtDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "daterange":
+      return <CustomDateRangeDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "bulk":
       return <BulkActionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "tags":
       return <TagsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "run":
+      return <RunIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "batch":
+      return <BatchIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "schedule":
+      return <ScheduleIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
   }
 }
 
 function MainMenu({ searchValue, trigger, clearSearchValue, setFilterType }: MenuProps) {
   const filtered = useMemo(() => {
-    return filterTypes.filter((item) =>
-      item.title.toLowerCase().includes(searchValue.toLowerCase())
-    );
+    return filterTypes.filter((item) => {
+      if (item.name === "daterange") return false;
+      return item.title.toLowerCase().includes(searchValue.toLowerCase());
+    });
   }, [searchValue]);
 
   return (
@@ -368,7 +384,7 @@ function AppliedStatusFilter() {
       {(search, setSearch) => (
         <StatusDropdown
           trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer" />}>
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
               <AppliedFilter
                 label="Status"
                 value={appliedSummary(statuses.map((v) => runStatusTitle(v as TaskRunStatus)))}
@@ -384,100 +400,6 @@ function AppliedStatusFilter() {
   );
 }
 
-function EnvironmentsDropdown({
-  trigger,
-  clearSearchValue,
-  searchValue,
-  onClose,
-  possibleEnvironments,
-}: {
-  trigger: ReactNode;
-  clearSearchValue: () => void;
-  searchValue: string;
-  onClose?: () => void;
-  possibleEnvironments: DisplayableEnvironment[];
-}) {
-  const { values, replace } = useSearchParams();
-
-  const handleChange = (values: string[]) => {
-    clearSearchValue();
-    replace({ environments: values, cursor: undefined, direction: undefined });
-  };
-
-  const filtered = useMemo(() => {
-    return possibleEnvironments.filter((item) => {
-      const title = environmentTitle(item, item.userName);
-      return title.toLowerCase().includes(searchValue.toLowerCase());
-    });
-  }, [searchValue, possibleEnvironments]);
-
-  return (
-    <SelectProvider value={values("environments")} setValue={handleChange} virtualFocus={true}>
-      {trigger}
-      <SelectPopover
-        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
-        hideOnEscape={() => {
-          if (onClose) {
-            onClose();
-            return false;
-          }
-
-          return true;
-        }}
-      >
-        <ComboBox placeholder={"Filter by environment..."} value={searchValue} />
-        <SelectList>
-          {filtered.map((item, index) => (
-            <SelectItem
-              key={item.id}
-              value={item.id}
-              shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
-            >
-              <EnvironmentLabel environment={item} userName={item.userName} />
-            </SelectItem>
-          ))}
-        </SelectList>
-      </SelectPopover>
-    </SelectProvider>
-  );
-}
-
-function AppliedEnvironmentFilter({
-  possibleEnvironments,
-}: Pick<RunFiltersProps, "possibleEnvironments">) {
-  const { values, del } = useSearchParams();
-
-  if (values("environments").length === 0) {
-    return null;
-  }
-
-  return (
-    <FilterMenuProvider>
-      {(search, setSearch) => (
-        <EnvironmentsDropdown
-          trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer" />}>
-              <AppliedFilter
-                label="Environment"
-                value={appliedSummary(
-                  values("environments").map((v) => {
-                    const environment = possibleEnvironments.find((env) => env.id === v);
-                    return environment ? environmentTitle(environment, environment.userName) : v;
-                  })
-                )}
-                onRemove={() => del(["environments", "cursor", "direction"])}
-              />
-            </Ariakit.Select>
-          }
-          searchValue={search}
-          clearSearchValue={() => setSearch("")}
-          possibleEnvironments={possibleEnvironments}
-        />
-      )}
-    </FilterMenuProvider>
-  );
-}
-
 function TasksDropdown({
   trigger,
   clearSearchValue,
@@ -524,7 +446,9 @@ function TasksDropdown({
             <SelectItem
               key={item.slug}
               value={item.slug}
-              icon={<TaskTriggerSourceIcon source={item.triggerSource} className="size-4" />}
+              icon={
+                <TaskTriggerSourceIcon source={item.triggerSource} className="size-4 flex-none" />
+              }
             >
               {item.slug}
             </SelectItem>
@@ -547,7 +471,7 @@ function AppliedTaskFilter({ possibleTasks }: Pick<RunFiltersProps, "possibleTas
       {(search, setSearch) => (
         <TasksDropdown
           trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer" />}>
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
               <AppliedFilter
                 label="Task"
                 value={appliedSummary(
@@ -645,7 +569,7 @@ function AppliedBulkActionsFilter({ bulkActions }: Pick<RunFiltersProps, "bulkAc
       {(search, setSearch) => (
         <BulkActionsDropdown
           trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer" />}>
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
               <AppliedFilter
                 label="Bulk action"
                 value={bulkId}
@@ -685,7 +609,7 @@ function TagsDropdown({
     });
   };
 
-  const fetcher = useFetcher<typeof loader>();
+  const fetcher = useFetcher<typeof tagsLoader>();
 
   useEffect(() => {
     const searchParams = new URLSearchParams();
@@ -764,7 +688,7 @@ function AppliedTagsFilter() {
       {(search, setSearch) => (
         <TagsDropdown
           trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer" />}>
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
               <AppliedFilter
                 label="Tags"
                 value={appliedSummary(values("tags"))}
@@ -780,62 +704,34 @@ function AppliedTagsFilter() {
   );
 }
 
-const timePeriods = [
-  {
-    label: "All periods",
-    value: "all",
-  },
-  {
-    label: "5 mins ago",
-    value: "5m",
-  },
-  {
-    label: "15 mins ago",
-    value: "15m",
-  },
-  {
-    label: "30 mins ago",
-    value: "30m",
-  },
-  {
-    label: "1 hour ago",
-    value: "1h",
-  },
-  {
-    label: "3 hours ago",
-    value: "3h",
-  },
-  {
-    label: "6 hours ago",
-    value: "6h",
-  },
-  {
-    label: "1 day ago",
-    value: "1d",
-  },
-  {
-    label: "3 days ago",
-    value: "3d",
-  },
-  {
-    label: "7 days ago",
-    value: "7d",
-  },
-  {
-    label: "10 days ago",
-    value: "10d",
-  },
-  {
-    label: "14 days ago",
-    value: "14d",
-  },
-  {
-    label: "30 days ago",
-    value: "30d",
-  },
-];
+function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
+  const { value, values, replace } = useSearchParams();
+  const searchValue = value("rootOnly");
+  const rootOnly = searchValue !== undefined ? searchValue === "true" : defaultValue;
 
-function CreatedDropdown({
+  const batchId = value("batchId");
+  const runId = value("runId");
+  const scheduleId = value("scheduleId");
+  const tasks = values("tasks");
+
+  const disabled = !!batchId || !!runId || !!scheduleId || tasks.length > 0;
+
+  return (
+    <Switch
+      disabled={disabled}
+      variant="small"
+      label="Root only"
+      checked={disabled ? false : rootOnly}
+      onCheckedChange={(checked) => {
+        replace({
+          rootOnly: checked ? "true" : "false",
+        });
+      }}
+    />
+  );
+}
+
+function RunIdDropdown({
   trigger,
   clearSearchValue,
   searchValue,
@@ -846,25 +742,34 @@ function CreatedDropdown({
   searchValue: string;
   onClose?: () => void;
 }) {
+  const [open, setOpen] = useState<boolean | undefined>();
   const { value, replace } = useSearchParams();
+  const runIdValue = value("runId");
 
-  const handleChange = (newValue: string) => {
+  const [runId, setRunId] = useState(runIdValue);
+
+  const apply = useCallback(() => {
     clearSearchValue();
-    if (newValue === "all") {
-      if (!value) return;
+    replace({
+      cursor: undefined,
+      direction: undefined,
+      runId: runId === "" ? undefined : runId?.toString(),
+    });
+
+    setOpen(false);
+  }, [runId, replace]);
+
+  let error: string | undefined = undefined;
+  if (runId) {
+    if (!runId.startsWith("run_")) {
+      error = "Run IDs start with 'run_'";
+    } else if (runId.length !== 25) {
+      error = "Run IDs are 25 characters long";
     }
-
-    replace({ period: newValue, cursor: undefined, direction: undefined });
-  };
-
-  const filtered = useMemo(() => {
-    return timePeriods.filter((item) =>
-      item.label.toLowerCase().includes(searchValue.toLowerCase())
-    );
-  }, [searchValue]);
+  }
 
   return (
-    <SelectProvider value={value("period")} setValue={handleChange} virtualFocus={true}>
+    <SelectProvider virtualFocus={true} open={open} setOpen={setOpen}>
       {trigger}
       <SelectPopover
         hideOnEnter={false}
@@ -876,39 +781,63 @@ function CreatedDropdown({
 
           return true;
         }}
+        className="max-w-[min(32ch,var(--popover-available-width))]"
       >
-        <ComboBox placeholder={"Filter by period..."} value={searchValue} />
-        <SelectList>
-          {filtered.map((item) => (
-            <SelectItem key={item.value} value={item.value} hideOnClick={false}>
-              {item.label}
-            </SelectItem>
-          ))}
-        </SelectList>
+        <div className="flex flex-col gap-4 p-3">
+          <div className="flex flex-col gap-1">
+            <Label>Run ID</Label>
+            <Input
+              placeholder="run_"
+              value={runId ?? ""}
+              onChange={(e) => setRunId(e.target.value)}
+              variant="small"
+              className="w-[27ch] font-mono"
+              spellCheck={false}
+            />
+            {error ? <FormError>{error}</FormError> : null}
+          </div>
+          <div className="flex justify-between gap-1 border-t border-grid-dimmed pt-3">
+            <Button variant="tertiary/small" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={error !== undefined || !runId}
+              variant="secondary/small"
+              shortcut={{
+                modifiers: ["meta"],
+                key: "Enter",
+                enabledOnInputElements: true,
+              }}
+              onClick={() => apply()}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
       </SelectPopover>
     </SelectProvider>
   );
 }
 
-function AppliedPeriodFilter() {
+function AppliedRunIdFilter() {
   const { value, del } = useSearchParams();
 
-  if (value("period") === undefined || value("period") === "all") {
+  if (value("runId") === undefined) {
     return null;
   }
 
+  const runId = value("runId");
+
   return (
     <FilterMenuProvider>
       {(search, setSearch) => (
-        <CreatedDropdown
+        <RunIdDropdown
           trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer" />}>
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
               <AppliedFilter
-                label="Created"
-                value={
-                  timePeriods.find((t) => t.value === value("period"))?.label ?? value("period")
-                }
-                onRemove={() => del(["period", "cursor", "direction"])}
+                label="Run ID"
+                value={runId}
+                onRemove={() => del(["runId", "cursor", "direction"])}
               />
             </Ariakit.Select>
           }
@@ -920,14 +849,238 @@ function AppliedPeriodFilter() {
   );
 }
 
-function appliedSummary(values: string[], maxValues = 3) {
-  if (values.length === 0) {
+function BatchIdDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const [open, setOpen] = useState<boolean | undefined>();
+  const { value, replace } = useSearchParams();
+  const batchIdValue = value("batchId");
+
+  const [batchId, setBatchId] = useState(batchIdValue);
+
+  const apply = useCallback(() => {
+    clearSearchValue();
+    replace({
+      cursor: undefined,
+      direction: undefined,
+      batchId: batchId === "" ? undefined : batchId?.toString(),
+    });
+
+    setOpen(false);
+  }, [batchId, replace]);
+
+  let error: string | undefined = undefined;
+  if (batchId) {
+    if (!batchId.startsWith("batch_")) {
+      error = "Batch IDs start with 'batch_'";
+    } else if (batchId.length !== 27) {
+      error = "Batch IDs are 27 characters long";
+    }
+  }
+
+  return (
+    <SelectProvider virtualFocus={true} open={open} setOpen={setOpen}>
+      {trigger}
+      <SelectPopover
+        hideOnEnter={false}
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+        className="max-w-[min(32ch,var(--popover-available-width))]"
+      >
+        <div className="flex flex-col gap-4 p-3">
+          <div className="flex flex-col gap-1">
+            <Label>Batch ID</Label>
+            <Input
+              placeholder="batch_"
+              value={batchId ?? ""}
+              onChange={(e) => setBatchId(e.target.value)}
+              variant="small"
+              className="w-[29ch] font-mono"
+              spellCheck={false}
+            />
+            {error ? <FormError>{error}</FormError> : null}
+          </div>
+          <div className="flex justify-between gap-1 border-t border-grid-dimmed pt-3">
+            <Button variant="tertiary/small" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={error !== undefined || !batchId}
+              variant="secondary/small"
+              shortcut={{
+                modifiers: ["meta"],
+                key: "Enter",
+                enabledOnInputElements: true,
+              }}
+              onClick={() => apply()}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedBatchIdFilter() {
+  const { value, del } = useSearchParams();
+
+  if (value("batchId") === undefined) {
     return null;
   }
 
-  if (values.length > maxValues) {
-    return `${values.slice(0, maxValues).join(", ")} + ${values.length - maxValues} more`;
+  const batchId = value("batchId");
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <BatchIdDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Batch ID"
+                value={batchId}
+                onRemove={() => del(["batchId", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function ScheduleIdDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const [open, setOpen] = useState<boolean | undefined>();
+  const { value, replace } = useSearchParams();
+  const scheduleIdValue = value("scheduleId");
+
+  const [scheduleId, setScheduleId] = useState(scheduleIdValue);
+
+  const apply = useCallback(() => {
+    clearSearchValue();
+    replace({
+      cursor: undefined,
+      direction: undefined,
+      scheduleId: scheduleId === "" ? undefined : scheduleId?.toString(),
+    });
+
+    setOpen(false);
+  }, [scheduleId, replace]);
+
+  let error: string | undefined = undefined;
+  if (scheduleId) {
+    if (!scheduleId.startsWith("sched")) {
+      error = "Schedule IDs start with 'sched_'";
+    } else if (scheduleId.length !== 27) {
+      error = "Schedule IDs are 27 characters long";
+    }
   }
 
-  return values.join(", ");
+  return (
+    <SelectProvider virtualFocus={true} open={open} setOpen={setOpen}>
+      {trigger}
+      <SelectPopover
+        hideOnEnter={false}
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+        className="max-w-[min(32ch,var(--popover-available-width))]"
+      >
+        <div className="flex flex-col gap-4 p-3">
+          <div className="flex flex-col gap-1">
+            <Label>Schedule ID</Label>
+            <Input
+              placeholder="sched_"
+              value={scheduleId ?? ""}
+              onChange={(e) => setScheduleId(e.target.value)}
+              variant="small"
+              className="w-[29ch] font-mono"
+              spellCheck={false}
+            />
+            {error ? <FormError>{error}</FormError> : null}
+          </div>
+          <div className="flex justify-between gap-1 border-t border-grid-dimmed pt-3">
+            <Button variant="tertiary/small" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={error !== undefined || !scheduleId}
+              variant="secondary/small"
+              shortcut={{
+                modifiers: ["meta"],
+                key: "Enter",
+                enabledOnInputElements: true,
+              }}
+              onClick={() => apply()}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedScheduleIdFilter() {
+  const { value, del } = useSearchParams();
+
+  if (value("scheduleId") === undefined) {
+    return null;
+  }
+
+  const scheduleId = value("scheduleId");
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <ScheduleIdDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Schedule ID"
+                value={scheduleId}
+                onRemove={() => del(["scheduleId", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
 }

apps/webapp/app/components/runs/v3/RunInspector.tsx

@@ -1,6 +1,11 @@
 import { CheckIcon, ClockIcon, CloudArrowDownIcon, QueueListIcon } from "@heroicons/react/20/solid";
 import { Link } from "@remix-run/react";
-import { formatDuration, formatDurationMilliseconds, TaskRunError } from "@trigger.dev/core/v3";
+import {
+  formatDuration,
+  formatDurationMilliseconds,
+  TaskRunError,
+  taskRunErrorEnhancer,
+} from "@trigger.dev/core/v3";
 import { useEffect } from "react";
 import { useTypedFetcher } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
@@ -35,7 +40,7 @@ import {
 } from "~/utils/pathBuilder";
 import { TraceSpan } from "~/utils/taskEvent";
 import { SpanLink } from "~/v3/eventRepository.server";
-import { isFinalRunStatus } from "~/v3/taskStatus";
+import { isFailedRunStatus, isFinalRunStatus } from "~/v3/taskStatus";
 import { RunTimelineEvent, RunTimelineLine } from "./InspectorTimeline";
 import { RunTag } from "./RunTag";
 import { TaskRunStatusCombo } from "./TaskRunStatus";
@@ -70,7 +75,7 @@ export function RunInspector({
   if (!run) {
     return (
       <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-bright">
-        <div className="mx-3 flex items-center justify-between gap-2 overflow-x-hidden">
+        <div className="flex items-center justify-between gap-2 overflow-x-hidden px-3">
           <div className="flex items-center gap-1 overflow-x-hidden">
             <RunIcon name={"task"} spanName="" className="h-4 min-h-4 w-4 min-w-4" />
             <Header2 className={cn("overflow-x-hidden text-blue-500")}>
@@ -96,7 +101,7 @@ export function RunInspector({
 
   return (
     <div className="grid h-full max-h-full grid-rows-[2.5rem_2rem_1fr_3.25rem] overflow-hidden bg-background-bright">
-      <div className="mx-3 flex items-center justify-between gap-2 overflow-x-hidden">
+      <div className="flex items-center justify-between gap-2 overflow-x-hidden px-3">
         <div className="flex items-center gap-1 overflow-x-hidden">
           <RunIcon
             name={"task"}
@@ -474,6 +479,7 @@ function RunTimeline({ run }: { run: RawRun }) {
   const updatedAt = new Date(run.updatedAt);
 
   const isFinished = isFinalRunStatus(run.status);
+  const isError = isFailedRunStatus(run.status);
 
   return (
     <div className="min-w-fit max-w-80">
@@ -530,7 +536,7 @@ function RunTimeline({ run }: { run: RawRun }) {
               <RunTimelineEvent
                 title="Finished"
                 subtitle={<DateTimeAccurate date={updatedAt} />}
-                state="complete"
+                state={isError ? "error" : "complete"}
               />
             </>
           ) : (
@@ -553,7 +559,9 @@ function RunTimeline({ run }: { run: RawRun }) {
 }
 
 function RunError({ error }: { error: TaskRunError }) {
-  switch (error.type) {
+  const enhancedError = taskRunErrorEnhancer(error);
+
+  switch (enhancedError.type) {
     case "STRING_ERROR":
     case "CUSTOM_ERROR": {
       return (
@@ -561,7 +569,7 @@ function RunError({ error }: { error: TaskRunError }) {
           <CodeBlock
             showCopyButton={false}
             showLineNumbers={false}
-            code={error.raw}
+            code={enhancedError.raw}
             maxLines={20}
           />
         </div>
@@ -569,16 +577,21 @@ function RunError({ error }: { error: TaskRunError }) {
     }
     case "BUILT_IN_ERROR":
     case "INTERNAL_ERROR": {
-      const name = "name" in error ? error.name : error.code;
+      const name = "name" in enhancedError ? enhancedError.name : enhancedError.code;
       return (
         <div className="flex flex-col gap-2 rounded-sm border border-rose-500/50 px-3 pb-3 pt-2">
           <Header3 className="text-rose-500">{name}</Header3>
-          {error.message && <Callout variant="error">{error.message}</Callout>}
-          {error.stackTrace && (
+          {enhancedError.message && <Callout variant="error">{enhancedError.message}</Callout>}
+          {enhancedError.link && (
+            <Callout variant="docs" to={enhancedError.link.href}>
+              {enhancedError.link.name}
+            </Callout>
+          )}
+          {enhancedError.stackTrace && (
             <CodeBlock
               showCopyButton={false}
               showLineNumbers={false}
-              code={error.stackTrace}
+              code={enhancedError.stackTrace}
               maxLines={20}
             />
           )}

apps/webapp/app/components/runs/v3/SharedFilters.tsx

@@ -0,0 +1,482 @@
+import * as Ariakit from "@ariakit/react";
+import type { RuntimeEnvironment } from "@trigger.dev/database";
+import type { ReactNode } from "react";
+import { startTransition, useCallback, useMemo, useState } from "react";
+import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import { DateField } from "~/components/primitives/DateField";
+import { DateTime } from "~/components/primitives/DateTime";
+import { Label } from "~/components/primitives/Label";
+import {
+  ComboBox,
+  ComboboxProvider,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  shortcutFromIndex,
+} from "~/components/primitives/Select";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { Button } from "../../primitives/Buttons";
+
+export type DisplayableEnvironment = Pick<RuntimeEnvironment, "type" | "id"> & {
+  userName?: string;
+};
+
+export function FilterMenuProvider({
+  children,
+  onClose,
+}: {
+  children: (search: string, setSearch: (value: string) => void) => React.ReactNode;
+  onClose?: () => void;
+}) {
+  const [searchValue, setSearchValue] = useState("");
+
+  return (
+    <ComboboxProvider
+      resetValueOnHide
+      setValue={(value) => {
+        startTransition(() => {
+          setSearchValue(value);
+        });
+      }}
+      setOpen={(open) => {
+        if (!open && onClose) {
+          onClose();
+        }
+      }}
+    >
+      {children(searchValue, setSearchValue)}
+    </ComboboxProvider>
+  );
+}
+
+export function EnvironmentsDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+  possibleEnvironments,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+  possibleEnvironments: DisplayableEnvironment[];
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ environments: values, cursor: undefined, direction: undefined });
+  };
+
+  const filtered = useMemo(() => {
+    return possibleEnvironments.filter((item) => {
+      const title = environmentTitle(item, item.userName);
+      return title.toLowerCase().includes(searchValue.toLowerCase());
+    });
+  }, [searchValue, possibleEnvironments]);
+
+  return (
+    <SelectProvider value={values("environments")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <ComboBox placeholder={"Filter by environment..."} value={searchValue} />
+        <SelectList>
+          {filtered.map((item, index) => (
+            <SelectItem
+              key={item.id}
+              value={item.id}
+              shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
+            >
+              <EnvironmentLabel environment={item} userName={item.userName} />
+            </SelectItem>
+          ))}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+export function AppliedEnvironmentFilter({
+  possibleEnvironments,
+}: {
+  possibleEnvironments: DisplayableEnvironment[];
+}) {
+  const { values, del } = useSearchParams();
+
+  if (values("environments").length === 0) {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <EnvironmentsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Environment"
+                value={appliedSummary(
+                  values("environments").map((v) => {
+                    const environment = possibleEnvironments.find((env) => env.id === v);
+                    return environment ? environmentTitle(environment, environment.userName) : v;
+                  })
+                )}
+                onRemove={() => del(["environments", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          possibleEnvironments={possibleEnvironments}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+const timePeriods = [
+  {
+    label: "Last 5 mins",
+    value: "5m",
+  },
+  {
+    label: "Last 30 mins",
+    value: "30m",
+  },
+  {
+    label: "Last 1 hour",
+    value: "1h",
+  },
+  {
+    label: "Last 6 hours",
+    value: "6h",
+  },
+  {
+    label: "Last 1 day",
+    value: "1d",
+  },
+  {
+    label: "Last 3 days",
+    value: "3d",
+  },
+  {
+    label: "Last 7 days",
+    value: "7d",
+  },
+  {
+    label: "Last 14 days",
+    value: "14d",
+  },
+  {
+    label: "Last 30 days",
+    value: "30d",
+  },
+  {
+    label: "All periods",
+    value: "all",
+  },
+];
+
+export function CreatedAtDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+  setFilterType,
+  hideCustomRange,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+  setFilterType?: (type: "daterange" | undefined) => void;
+  hideCustomRange?: boolean;
+}) {
+  const { value, replace } = useSearchParams();
+
+  const from = value("from");
+  const to = value("to");
+  const period = value("period");
+
+  const handleChange = (newValue: string) => {
+    clearSearchValue();
+    if (newValue === "all") {
+      if (!period && !from && !to) return;
+
+      replace({
+        period: undefined,
+        from: undefined,
+        to: undefined,
+        cursor: undefined,
+        direction: undefined,
+      });
+      return;
+    }
+
+    if (newValue === "custom") {
+      setFilterType?.("daterange");
+      return;
+    }
+
+    replace({
+      period: newValue,
+      from: undefined,
+      to: undefined,
+      cursor: undefined,
+      direction: undefined,
+    });
+  };
+
+  const filtered = useMemo(() => {
+    return timePeriods.filter((item) =>
+      item.label.toLowerCase().includes(searchValue.toLowerCase())
+    );
+  }, [searchValue]);
+
+  return (
+    <SelectProvider
+      value={from || to ? "custom" : period ?? "all"}
+      setValue={handleChange}
+      virtualFocus={true}
+    >
+      {trigger}
+      <SelectPopover
+        hideOnEnter={false}
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <ComboBox placeholder={"Filter by period..."} value={searchValue} />
+        <SelectList>
+          {filtered.map((item) => (
+            <SelectItem key={item.value} value={item.value} hideOnClick={false}>
+              {item.label}
+            </SelectItem>
+          ))}
+          {!hideCustomRange ? (
+            <SelectItem value="custom" hideOnClick={false}>
+              Custom date range
+            </SelectItem>
+          ) : null}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+export function AppliedPeriodFilter() {
+  const { value, del } = useSearchParams();
+
+  if (value("period") === undefined || value("period") === "all") {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <CreatedAtDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Created"
+                value={
+                  timePeriods.find((t) => t.value === value("period"))?.label ?? value("period")
+                }
+                onRemove={() => del(["period", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          hideCustomRange
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+export function CustomDateRangeDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const [open, setOpen] = useState<boolean | undefined>();
+  const { value, replace } = useSearchParams();
+  const fromSearch = dateFromString(value("from"));
+  const toSearch = dateFromString(value("to"));
+  const [from, setFrom] = useState(fromSearch);
+  const [to, setTo] = useState(toSearch);
+
+  const apply = useCallback(() => {
+    clearSearchValue();
+    replace({
+      period: undefined,
+      cursor: undefined,
+      direction: undefined,
+      from: from?.getTime().toString(),
+      to: to?.getTime().toString(),
+    });
+
+    setOpen(false);
+  }, [from, to, replace]);
+
+  return (
+    <SelectProvider virtualFocus={true} open={open} setOpen={setOpen}>
+      {trigger}
+      <SelectPopover
+        hideOnEnter={false}
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <div className="flex flex-col gap-4 p-3">
+          <div className="flex flex-col gap-1">
+            <Label>From (local time)</Label>
+            <DateField
+              label="From time"
+              defaultValue={from}
+              onValueChange={setFrom}
+              granularity="second"
+              showNowButton
+              showClearButton
+              variant="small"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label>To (local time)</Label>
+            <DateField
+              label="To time"
+              defaultValue={to}
+              onValueChange={setTo}
+              granularity="second"
+              showNowButton
+              showClearButton
+              variant="small"
+            />
+          </div>
+          <div className="flex justify-between gap-1 border-t border-grid-dimmed pt-3">
+            <Button variant="tertiary/small" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="secondary/small"
+              shortcut={{
+                modifiers: ["meta"],
+                key: "Enter",
+                enabledOnInputElements: true,
+              }}
+              onClick={() => apply()}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+export function AppliedCustomDateRangeFilter() {
+  const { value, del } = useSearchParams();
+
+  if (value("from") === undefined && value("to") === undefined) {
+    return null;
+  }
+
+  const fromDate = dateFromString(value("from"));
+  const toDate = dateFromString(value("to"));
+
+  const rangeType = fromDate && toDate ? "range" : fromDate ? "from" : "to";
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <CustomDateRangeDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label={
+                  rangeType === "range"
+                    ? "Created"
+                    : rangeType === "from"
+                    ? "Created after"
+                    : "Created before"
+                }
+                value={
+                  <>
+                    {rangeType === "range" ? (
+                      <span>
+                        <DateTime date={fromDate!} includeTime includeSeconds /> –{" "}
+                        <DateTime date={toDate!} includeTime includeSeconds />
+                      </span>
+                    ) : rangeType === "from" ? (
+                      <DateTime date={fromDate!} includeTime includeSeconds />
+                    ) : (
+                      <DateTime date={toDate!} includeTime includeSeconds />
+                    )}
+                  </>
+                }
+                onRemove={() => del(["period", "from", "to", "cursor", "direction"])}
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+export function appliedSummary(values: string[], maxValues = 3) {
+  if (values.length === 0) {
+    return null;
+  }
+
+  if (values.length > maxValues) {
+    return `${values.slice(0, maxValues).join(", ")} + ${values.length - maxValues} more`;
+  }
+
+  return values.join(", ");
+}
+
+function dateFromString(value: string | undefined | null): Date | undefined {
+  if (!value) return;
+
+  //is it an int?
+  const int = parseInt(value);
+  if (!isNaN(int)) {
+    return new Date(int);
+  }
+
+  return new Date(value);
+}

apps/webapp/app/components/runs/v3/SpanEvents.tsx

@@ -1,9 +1,13 @@
+import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import {
+  exceptionEventEnhancer,
   isExceptionSpanEvent,
   type ExceptionEventProperties,
   type SpanEvent as OtelSpanEvent,
 } from "@trigger.dev/core/v3";
 import { CodeBlock } from "~/components/code/CodeBlock";
+import { Feedback } from "~/components/Feedback";
+import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { DateTimeAccurate } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
@@ -64,19 +68,41 @@ export function SpanEventError({
   spanEvent: OtelSpanEvent;
   exception: ExceptionEventProperties;
 }) {
+  const enhancedException = exceptionEventEnhancer(exception);
+
   return (
     <div className="flex flex-col gap-2 rounded-sm border border-rose-500/50 px-3 pb-3 pt-2">
       <SpanEventHeader
-        title={exception.type ?? "Error"}
+        title={enhancedException.type ?? "Error"}
         time={spanEvent.time}
         titleClassName="text-rose-500"
       />
-      {exception.message && <Callout variant="error">{exception.message}</Callout>}
-      {exception.stacktrace && (
+      {enhancedException.message && <Callout variant="error">{enhancedException.message}</Callout>}
+      {enhancedException.link &&
+        (enhancedException.link.magic === "CONTACT_FORM" ? (
+          <Feedback
+            button={
+              <Button
+                variant="tertiary/medium"
+                LeadingIcon={EnvelopeIcon}
+                leadingIconClassName="text-blue-400"
+                fullWidth
+                textAlignLeft
+              >
+                {enhancedException.link.name}
+              </Button>
+            }
+          />
+        ) : (
+          <Callout variant="docs" to={enhancedException.link.href}>
+            {enhancedException.link.name}
+          </Callout>
+        ))}
+      {enhancedException.stacktrace && (
         <CodeBlock
           showCopyButton={false}
           showLineNumbers={false}
-          code={exception.stacktrace}
+          code={enhancedException.stacktrace}
           maxLines={20}
         />
       )}

apps/webapp/app/components/runs/v3/SpanInspector.tsx

@@ -47,7 +47,7 @@ export function SpanInspector({
 
   return (
     <div className="grid h-full max-h-full grid-rows-[2.5rem_2rem_1fr] overflow-hidden bg-background-bright">
-      <div className="mx-3 flex items-center justify-between gap-2 overflow-x-hidden">
+      <div className="flex items-center justify-between gap-2 overflow-x-hidden px-3">
         <div className="flex items-center gap-1 overflow-x-hidden">
           <RunIcon
             name={span.style?.icon}

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -1,9 +1,10 @@
 import {
   ArrowPathIcon,
+  ArrowRightIcon,
   ClockIcon,
   CpuChipIcon,
+  NoSymbolIcon,
   RectangleStackIcon,
-  StopCircleIcon,
 } from "@heroicons/react/20/solid";
 import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
 import { useLocation } from "@remix-run/react";
@@ -14,6 +15,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
 import { useSelectedItems } from "~/components/primitives/SelectedItemsProvider";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useEnvironments } from "~/hooks/useEnvironments";
@@ -102,11 +104,11 @@ export function TaskRunsTable({
   );
 
   return (
-    <Table>
+    <Table className="max-h-full overflow-y-auto">
       <TableHeader>
         <TableRow>
           {allowSelection && (
-            <TableHeaderCell className="pl-2 pr-0">
+            <TableHeaderCell className="pl-3 pr-0">
               {runs.length > 0 && (
                 <Checkbox
                   checked={hasAll(runs.map((r) => r.id))}
@@ -210,8 +212,9 @@ export function TaskRunsTable({
                 </Paragraph>
                 <LinkButton
                   to={docsPath("v3/triggering")}
-                  variant="tertiary/small"
+                  variant="docs/small"
                   LeadingIcon={BookOpenIcon}
+                  className="mt-3"
                 >
                   Read docs
                 </LinkButton>
@@ -233,8 +236,9 @@ export function TaskRunsTable({
                 </Paragraph>
                 <LinkButton
                   to={docsPath("v3/triggering")}
-                  variant="tertiary/small"
+                  variant="docs/small"
                   LeadingIcon={BookOpenIcon}
+                  className="mt-3"
                 >
                   Read docs
                 </LinkButton>
@@ -254,8 +258,9 @@ export function TaskRunsTable({
                 </Paragraph>
                 <LinkButton
                   to={docsPath("v3/tags")}
-                  variant="tertiary/small"
+                  variant="docs/small"
                   LeadingIcon={BookOpenIcon}
+                  className="mt-3"
                 >
                   Read docs
                 </LinkButton>
@@ -282,7 +287,7 @@ export function TaskRunsTable({
             return (
               <TableRow key={run.id}>
                 {allowSelection && (
-                  <TableCell className="pl-2 pr-0">
+                  <TableCell className="pl-3 pr-0">
                     <Checkbox
                       checked={has(run.id)}
                       onChange={(element) => {
@@ -367,7 +372,7 @@ export function TaskRunsTable({
                   </TableCell>
                 )}
                 <TableCell to={path}>
-                  {run.isTest ? <CheckIcon className="h-4 w-4 text-charcoal-400" /> : "–"}
+                  {run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
                 </TableCell>
                 <TableCell to={path}>
                   {run.createdAt ? <DateTime date={run.createdAt} /> : "–"}
@@ -405,34 +410,114 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
   if (!run.isCancellable && !run.isReplayable) return <TableCell to={path}>{""}</TableCell>;
 
   return (
-    <TableCellMenu isSticky>
-      {run.isCancellable && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={StopCircleIcon}>
-              Cancel run
-            </Button>
-          </DialogTrigger>
-          <CancelRunDialog
-            runFriendlyId={run.friendlyId}
-            redirectPath={`${location.pathname}${location.search}`}
+    <TableCellMenu
+      isSticky
+      popoverContent={
+        <>
+          <PopoverMenuItem
+            to={path}
+            icon={ArrowRightIcon}
+            leadingIconClassName="text-blue-500"
+            title="View run"
           />
-        </Dialog>
-      )}
-      {run.isReplayable && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={ArrowPathIcon}>
-              Replay run
-            </Button>
-          </DialogTrigger>
-          <ReplayRunDialog
-            runFriendlyId={run.friendlyId}
-            failedRedirect={`${location.pathname}${location.search}`}
-          />
-        </Dialog>
-      )}
-    </TableCellMenu>
+          {run.isCancellable && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={NoSymbolIcon}
+                  leadingIconClassName="text-error"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Cancel run
+                </Button>
+              </DialogTrigger>
+              <CancelRunDialog
+                runFriendlyId={run.friendlyId}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+          {run.isReplayable && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowPathIcon}
+                  leadingIconClassName="text-success"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Replay run…
+                </Button>
+              </DialogTrigger>
+              <ReplayRunDialog
+                runFriendlyId={run.friendlyId}
+                failedRedirect={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+        </>
+      }
+      hiddenButtons={
+        <div className="flex items-center">
+          {run.isCancellable && (
+            <SimpleTooltip
+              button={
+                <Dialog>
+                  <DialogTrigger
+                    asChild
+                    className="size-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                  >
+                    <NoSymbolIcon className="size-3" />
+                  </DialogTrigger>
+                  <CancelRunDialog
+                    runFriendlyId={run.friendlyId}
+                    redirectPath={`${location.pathname}${location.search}`}
+                  />
+                </Dialog>
+              }
+              content="Cancel run"
+              side="left"
+              disableHoverableContent
+            />
+          )}
+          {run.isCancellable && run.isReplayable && (
+            <div className="mx-0.5 h-6 w-px bg-grid-dimmed" />
+          )}
+          {run.isReplayable && (
+            <SimpleTooltip
+              button={
+                <Dialog>
+                  <DialogTrigger
+                    asChild
+                    className="h-6 w-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                  >
+                    <ArrowPathIcon className="size-3" />
+                  </DialogTrigger>
+                  <ReplayRunDialog
+                    runFriendlyId={run.friendlyId}
+                    failedRedirect={`${location.pathname}${location.search}`}
+                  />
+                </Dialog>
+              }
+              content="Replay run…"
+              side="left"
+              disableHoverableContent
+            />
+          )}
+        </div>
+      }
+    />
   );
 }
 
@@ -503,19 +588,29 @@ function BlankState({ isLoading, filters }: Pick<RunsTableProps, "isLoading" | "
 
   return (
     <TableBlankRow colSpan={14}>
-      <div className="flex flex-col items-center justify-center gap-2">
-        <Paragraph className="w-auto" variant="small">
-          No runs currently match your filters. Try refreshing or modifying your filters.
+      <div className="flex flex-col items-center justify-center gap-6">
+        <Paragraph className="w-auto" variant="base/bright">
+          No runs match your filters. Try refreshing, modifying your filters or run a test.
         </Paragraph>
-        <Button
-          LeadingIcon={ArrowPathIcon}
-          variant="tertiary/small"
-          onClick={() => {
-            window.location.reload();
-          }}
-        >
-          Refresh
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            LeadingIcon={ArrowPathIcon}
+            variant="tertiary/medium"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            Refresh
+          </Button>
+          <Paragraph>or</Paragraph>
+          <LinkButton
+            LeadingIcon={BeakerIcon}
+            variant="tertiary/medium"
+            to={v3TestPath(organization, project)}
+          >
+            Run a test
+          </LinkButton>
+        </div>
       </div>
     </TableBlankRow>
   );

apps/webapp/app/db.server.ts

@@ -1,39 +1,24 @@
-import { Prisma, PrismaClient } from "@trigger.dev/database";
+import {
+  Prisma,
+  PrismaClient,
+  PrismaClientOrTransaction,
+  PrismaReplicaClient,
+  PrismaTransactionClient,
+  PrismaTransactionOptions,
+} from "@trigger.dev/database";
 import invariant from "tiny-invariant";
 import { z } from "zod";
 import { env } from "./env.server";
 import { logger } from "./services/logger.server";
 import { isValidDatabaseUrl } from "./utils/db";
 import { singleton } from "./utils/singleton";
+import { $transaction as transac } from "@trigger.dev/database";
 
-export type PrismaTransactionClient = Omit<
-  PrismaClient,
-  "$connect" | "$disconnect" | "$on" | "$transaction" | "$use" | "$extends"
->;
-
-export type PrismaClientOrTransaction = PrismaClient | PrismaTransactionClient;
-
-function isTransactionClient(prisma: PrismaClientOrTransaction): prisma is PrismaTransactionClient {
-  return !("$transaction" in prisma);
-}
-
-function isPrismaKnownError(error: unknown): error is Prisma.PrismaClientKnownRequestError {
-  return (
-    typeof error === "object" && error !== null && "code" in error && typeof error.code === "string"
-  );
-}
-
-export type PrismaTransactionOptions = {
-  /** The maximum amount of time (in ms) Prisma Client will wait to acquire a transaction from the database. The default value is 2000ms. */
-  maxWait?: number;
-
-  /** The maximum amount of time (in ms) the interactive transaction can run before being canceled and rolled back. The default value is 5000ms. */
-  timeout?: number;
-
-  /**  Sets the transaction isolation level. By default this is set to the value currently configured in your database. */
-  isolationLevel?: Prisma.TransactionIsolationLevel;
-
-  swallowPrismaErrors?: boolean;
+export type {
+  PrismaTransactionClient,
+  PrismaClientOrTransaction,
+  PrismaTransactionOptions,
+  PrismaReplicaClient,
 };
 
 export async function $transaction<R>(
@@ -41,14 +26,10 @@ export async function $transaction<R>(
   fn: (prisma: PrismaTransactionClient) => Promise<R>,
   options?: PrismaTransactionOptions
 ): Promise<R | undefined> {
-  if (isTransactionClient(prisma)) {
-    return fn(prisma);
-  }
-
-  try {
-    return await (prisma as PrismaClient).$transaction(fn, options);
-  } catch (error) {
-    if (isPrismaKnownError(error)) {
+  return transac(
+    prisma,
+    fn,
+    (error) => {
       logger.error("prisma.$transaction error", {
         code: error.code,
         meta: error.meta,
@@ -56,22 +37,15 @@ export async function $transaction<R>(
         message: error.message,
         name: error.name,
       });
-
-      if (options?.swallowPrismaErrors) {
-        return;
-      }
-    }
-
-    throw error;
-  }
+    },
+    options
+  );
 }
 
 export { Prisma };
 
 export const prisma = singleton("prisma", getClient);
 
-export type PrismaReplicaClient = Omit<PrismaClient, "$transaction">;
-
 export const $replica: PrismaReplicaClient = singleton(
   "replica",
   () => getReplicaClient() ?? prisma

apps/webapp/app/env.server.ts

@@ -31,7 +31,9 @@ const EnvironmentSchema = z.object({
   REMIX_APP_PORT: z.string().optional(),
   LOGIN_ORIGIN: z.string().default("http://localhost:3030"),
   APP_ORIGIN: z.string().default("http://localhost:3030"),
-  ELECTRIC_ORIGIN: z.string(),
+  API_ORIGIN: z.string().optional(),
+  STREAM_ORIGIN: z.string().optional(),
+  ELECTRIC_ORIGIN: z.string().default("http://localhost:3060"),
   APP_ENV: z.string().default(process.env.NODE_ENV),
   SERVICE_NAME: z.string().default("trigger.dev webapp"),
   SECRET_STORE: SecretStoreOptionsSchema.default("DATABASE"),
@@ -103,6 +105,25 @@ const EnvironmentSchema = z.object({
   API_RATE_LIMIT_REFILL_RATE: z.coerce.number().int().default(250), // refix 250 tokens every 10 seconds
   API_RATE_LIMIT_REQUEST_LOGS_ENABLED: z.string().default("0"),
   API_RATE_LIMIT_REJECTION_LOGS_ENABLED: z.string().default("1"),
+  API_RATE_LIMIT_LIMITER_LOGS_ENABLED: z.string().default("0"),
+
+  API_RATE_LIMIT_JWT_WINDOW: z.string().default("1m"),
+  API_RATE_LIMIT_JWT_TOKENS: z.coerce.number().int().default(60),
+
+  //Realtime rate limiting
+  /**
+   * @example "60s"
+   * @example "1m"
+   * @example "1h"
+   * @example "1d"
+   * @example "1000ms"
+   * @example "1000s"
+   */
+  REALTIME_RATE_LIMIT_WINDOW: z.string().default("1m"),
+  REALTIME_RATE_LIMIT_TOKENS: z.coerce.number().int().default(100),
+  REALTIME_RATE_LIMIT_REQUEST_LOGS_ENABLED: z.string().default("0"),
+  REALTIME_RATE_LIMIT_REJECTION_LOGS_ENABLED: z.string().default("1"),
+  REALTIME_RATE_LIMIT_LIMITER_LOGS_ENABLED: z.string().default("0"),
 
   //Ingesting event rate limit
   INGEST_EVENT_RATE_LIMIT_WINDOW: z.string().default("60s"),
@@ -121,6 +142,10 @@ const EnvironmentSchema = z.object({
   CONTAINER_REGISTRY_PASSWORD: z.string().optional(),
   DEPLOY_REGISTRY_HOST: z.string().optional(),
   DEPLOY_REGISTRY_NAMESPACE: z.string().default("trigger"),
+  DEPLOY_TIMEOUT_MS: z.coerce
+    .number()
+    .int()
+    .default(60 * 1000 * 8), // 8 minutes
   OBJECT_STORE_BASE_URL: z.string().optional(),
   OBJECT_STORE_ACCESS_KEY_ID: z.string().optional(),
   OBJECT_STORE_SECRET_ACCESS_KEY: z.string().optional(),
@@ -212,10 +237,12 @@ const EnvironmentSchema = z.object({
   MAXIMUM_TRACE_SUMMARY_VIEW_COUNT: z.coerce.number().int().default(25_000),
   TASK_PAYLOAD_OFFLOAD_THRESHOLD: z.coerce.number().int().default(524_288), // 512KB
   TASK_PAYLOAD_MAXIMUM_SIZE: z.coerce.number().int().default(3_145_728), // 3MB
+  BATCH_TASK_PAYLOAD_MAXIMUM_SIZE: z.coerce.number().int().default(1_000_000), // 1MB
   TASK_RUN_METADATA_MAXIMUM_SIZE: z.coerce.number().int().default(4_096), // 4KB
 
   MAXIMUM_DEV_QUEUE_SIZE: z.coerce.number().int().optional(),
   MAXIMUM_DEPLOYED_QUEUE_SIZE: z.coerce.number().int().optional(),
+  MAX_BATCH_V2_TRIGGER_ITEMS: z.coerce.number().int().default(500),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/features.server.ts

@@ -4,7 +4,6 @@ import { requestUrl } from "./utils/requestUrl.server";
 export type TriggerFeatures = {
   isManagedCloud: boolean;
   v3Enabled: boolean;
-  alertsEnabled: boolean;
 };
 
 function isManagedCloud(host: string): boolean {
@@ -20,7 +19,6 @@ function featuresForHost(host: string): TriggerFeatures {
   return {
     isManagedCloud: isManagedCloud(host),
     v3Enabled: env.V3_ENABLED === "true",
-    alertsEnabled: env.ALERT_FROM_EMAIL !== undefined && env.ALERT_RESEND_API_KEY !== undefined,
   };
 }
 

apps/webapp/app/hooks/useFeatures.ts

@@ -5,5 +5,5 @@ import type { TriggerFeatures } from "~/features.server";
 export function useFeatures(): TriggerFeatures {
   const routeMatch = useTypedRouteLoaderData<typeof loader>("root");
 
-  return routeMatch?.features ?? { isManagedCloud: false, v3Enabled: false, alertsEnabled: false };
+  return routeMatch?.features ?? { isManagedCloud: false, v3Enabled: false };
 }

apps/webapp/app/models/taskRun.server.ts

@@ -3,14 +3,13 @@ import type {
   TaskRunFailedExecutionResult,
   TaskRunSuccessfulExecutionResult,
 } from "@trigger.dev/core/v3";
-import { TaskRunError } from "@trigger.dev/core/v3";
+import { TaskRunError, TaskRunErrorCodes } from "@trigger.dev/core/v3";
 
 import type {
+  BatchTaskRunItemStatus as BatchTaskRunItemStatusType,
   TaskRun,
   TaskRunAttempt,
-  TaskRunAttemptStatus as TaskRunAttemptStatusType,
   TaskRunStatus as TaskRunStatusType,
-  BatchTaskRunItemStatus as BatchTaskRunItemStatusType,
 } from "@trigger.dev/database";
 
 import { assertNever } from "assert-never";
@@ -50,6 +49,7 @@ export function executionResultForTaskRun(
     return {
       ok: true,
       id: taskRun.friendlyId,
+      taskIdentifier: taskRun.taskIdentifier,
       output: attempt.output ?? undefined,
       outputType: attempt.outputType,
     } satisfies TaskRunSuccessfulExecutionResult;
@@ -60,9 +60,10 @@ export function executionResultForTaskRun(
       return {
         ok: false,
         id: taskRun.friendlyId,
+        taskIdentifier: taskRun.taskIdentifier,
         error: {
           type: "INTERNAL_ERROR",
-          code: "TASK_RUN_CANCELLED",
+          code: TaskRunErrorCodes.TASK_RUN_CANCELLED,
         },
       } satisfies TaskRunFailedExecutionResult;
     }
@@ -92,9 +93,10 @@ export function executionResultForTaskRun(
       return {
         ok: false,
         id: taskRun.friendlyId,
+        taskIdentifier: taskRun.taskIdentifier,
         error: {
           type: "INTERNAL_ERROR",
-          code: "CONFIGURED_INCORRECTLY",
+          code: TaskRunErrorCodes.CONFIGURED_INCORRECTLY,
         },
       } satisfies TaskRunFailedExecutionResult;
     }
@@ -102,6 +104,7 @@ export function executionResultForTaskRun(
     return {
       ok: false,
       id: taskRun.friendlyId,
+      taskIdentifier: taskRun.taskIdentifier,
       error: error.data,
     } satisfies TaskRunFailedExecutionResult;
   }

apps/webapp/app/models/taskRunTag.server.ts

@@ -1,7 +1,7 @@
 import { prisma } from "~/db.server";
 import { generateFriendlyId } from "~/v3/friendlyIdentifiers";
 
-export const MAX_TAGS_PER_RUN = 5;
+export const MAX_TAGS_PER_RUN = 10;
 
 export async function createTag({ tag, projectId }: { tag: string; projectId: string }) {
   if (tag.trim().length === 0) return;

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

@@ -15,7 +15,7 @@ import assertNever from "assert-never";
 import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { generatePresignedUrl } from "~/v3/r2.server";
 import { BasePresenter } from "./basePresenter.server";
-import { prisma } from "~/db.server";
+import { $replica, prisma } from "~/db.server";
 
 // Build 'select' object
 const commonRunSelect = {
@@ -59,102 +59,93 @@ type CommonRelatedRun = Prisma.Result<
   "findFirstOrThrow"
 >;
 
+type FoundRun = NonNullable<Awaited<ReturnType<typeof ApiRetrieveRunPresenter.findRun>>>;
+
 export class ApiRetrieveRunPresenter extends BasePresenter {
+  public static async findRun(friendlyId: string, env: AuthenticatedEnvironment) {
+    return $replica.taskRun.findFirst({
+      where: {
+        friendlyId,
+        runtimeEnvironmentId: env.id,
+      },
+      include: {
+        attempts: true,
+        lockedToVersion: true,
+        schedule: true,
+        tags: true,
+        batch: {
+          select: {
+            id: true,
+            friendlyId: true,
+          },
+        },
+        parentTaskRun: {
+          select: commonRunSelect,
+        },
+        rootTaskRun: {
+          select: commonRunSelect,
+        },
+        childRuns: {
+          select: {
+            ...commonRunSelect,
+          },
+        },
+      },
+    });
+  }
+
   public async call(
-    friendlyId: string,
-    env: AuthenticatedEnvironment,
-    showSecretDetails: boolean
+    taskRun: FoundRun,
+    env: AuthenticatedEnvironment
   ): Promise<RetrieveRunResponse | undefined> {
     return this.traceWithEnv("call", env, async (span) => {
-      const taskRun = await this._replica.taskRun.findFirst({
-        where: {
-          friendlyId,
-          runtimeEnvironmentId: env.id,
-        },
-        include: {
-          attempts: {
-            orderBy: {
-              createdAt: "desc",
-            },
-          },
-          lockedToVersion: true,
-          schedule: true,
-          tags: true,
-          batch: {
-            select: {
-              id: true,
-              friendlyId: true,
-            },
-          },
-          parentTaskRun: {
-            select: commonRunSelect,
-          },
-          rootTaskRun: {
-            select: commonRunSelect,
-          },
-          childRuns: {
-            select: {
-              ...commonRunSelect,
-            },
-          },
-        },
-      });
-
-      if (!taskRun) {
-        logger.debug("Task run not found", { friendlyId, envId: env.id });
-
-        return undefined;
-      }
-
       let $payload: any;
       let $payloadPresignedUrl: string | undefined;
       let $output: any;
       let $outputPresignedUrl: string | undefined;
 
-      if (showSecretDetails) {
-        const payloadPacket = await conditionallyImportPacket({
-          data: taskRun.payload,
-          dataType: taskRun.payloadType,
-        });
+      const payloadPacket = await conditionallyImportPacket({
+        data: taskRun.payload,
+        dataType: taskRun.payloadType,
+      });
 
-        if (
-          payloadPacket.dataType === "application/store" &&
-          typeof payloadPacket.data === "string"
-        ) {
-          $payloadPresignedUrl = await generatePresignedUrl(
-            env.project.externalRef,
-            env.slug,
-            payloadPacket.data,
-            "GET"
-          );
-        } else {
-          $payload = await parsePacket(payloadPacket);
-        }
+      if (
+        payloadPacket.dataType === "application/store" &&
+        typeof payloadPacket.data === "string"
+      ) {
+        $payloadPresignedUrl = await generatePresignedUrl(
+          env.project.externalRef,
+          env.slug,
+          payloadPacket.data,
+          "GET"
+        );
+      } else {
+        $payload = await parsePacket(payloadPacket);
+      }
 
-        if (taskRun.status === "COMPLETED_SUCCESSFULLY") {
-          const completedAttempt = taskRun.attempts.find(
-            (a) => a.status === "COMPLETED" && typeof a.output !== null
-          );
+      if (taskRun.status === "COMPLETED_SUCCESSFULLY") {
+        const completedAttempt = taskRun.attempts.find(
+          (a) => a.status === "COMPLETED" && typeof a.output !== null
+        );
 
-          if (completedAttempt && completedAttempt.output) {
-            const outputPacket = await conditionallyImportPacket({
-              data: completedAttempt.output,
-              dataType: completedAttempt.outputType,
-            });
+        if (completedAttempt && completedAttempt.output) {
+          const outputPacket = await conditionallyImportPacket({
+            data: completedAttempt.output,
+            dataType: completedAttempt.outputType,
+          });
 
-            if (
-              outputPacket.dataType === "application/store" &&
-              typeof outputPacket.data === "string"
-            ) {
-              $outputPresignedUrl = await generatePresignedUrl(
-                env.project.externalRef,
-                env.slug,
-                outputPacket.data,
-                "GET"
-              );
-            } else {
-              $output = await parsePacket(outputPacket);
-            }
+          if (
+            outputPacket.dataType === "application/store" &&
+            typeof outputPacket.data === "string"
+          ) {
+            $outputPresignedUrl = await generatePresignedUrl(
+              env.project.externalRef,
+              env.slug,
+              outputPacket.data,
+              "GET"
+            );
+          } else {
+            $output = await parsePacket(outputPacket);
           }
         }
       }
@@ -165,6 +156,7 @@ export class ApiRetrieveRunPresenter extends BasePresenter {
         payloadPresignedUrl: $payloadPresignedUrl,
         output: $output,
         outputPresignedUrl: $outputPresignedUrl,
+        error: ApiRetrieveRunPresenter.apiErrorFromError(taskRun.error),
         schedule: taskRun.schedule
           ? {
               id: taskRun.schedule.friendlyId,
@@ -179,17 +171,9 @@ export class ApiRetrieveRunPresenter extends BasePresenter {
               },
             }
           : undefined,
-        attempts: !showSecretDetails
-          ? []
-          : taskRun.attempts.map((a) => ({
-              id: a.friendlyId,
-              status: ApiRetrieveRunPresenter.apiStatusFromAttemptStatus(a.status),
-              createdAt: a.createdAt ?? undefined,
-              updatedAt: a.updatedAt ?? undefined,
-              startedAt: a.startedAt ?? undefined,
-              completedAt: a.completedAt ?? undefined,
-              error: ApiRetrieveRunPresenter.apiErrorFromError(a.error),
-            })),
+        // We're removing attempts from the API
+        attemptCount: taskRun.attempts.length,
+        attempts: [],
         relatedRuns: {
           root: taskRun.rootTaskRun
             ? await createCommonRunStructure(taskRun.rootTaskRun)

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

@@ -29,7 +29,7 @@ const CoercedDate = z.preprocess((arg) => {
   return arg;
 }, z.date().optional());
 
-const SearchParamsSchema = z.object({
+export const ApiRunListSearchParams = z.object({
   "page[size]": z.coerce.number().int().positive().min(1).max(100).optional(),
   "page[after]": z.string().optional(),
   "page[before]": z.string().optional(),
@@ -119,47 +119,34 @@ const SearchParamsSchema = z.object({
   "filter[createdAt][from]": CoercedDate,
   "filter[createdAt][to]": CoercedDate,
   "filter[createdAt][period]": z.string().optional(),
+  "filter[batch]": z.string().optional(),
 });
 
-type SearchParamsSchema = z.infer<typeof SearchParamsSchema>;
+type ApiRunListSearchParams = z.infer<typeof ApiRunListSearchParams>;
 
 export class ApiRunListPresenter extends BasePresenter {
   public async call(
     project: Project,
-    searchParams: URLSearchParams,
+    searchParams: ApiRunListSearchParams,
     environment?: RuntimeEnvironment
   ): Promise<ListRunResponse> {
     return this.trace("call", async (span) => {
-      const rawSearchParams = Object.fromEntries(searchParams.entries());
-      const $searchParams = SearchParamsSchema.safeParse(rawSearchParams);
-
-      if (!$searchParams.success) {
-        logger.error("Invalid search params", {
-          searchParams: rawSearchParams,
-          errors: $searchParams.error.errors,
-        });
-
-        throw fromZodError($searchParams.error);
-      }
-
-      logger.debug("Valid search params", { searchParams: $searchParams.data });
-
       const options: RunListOptions = {
         projectId: project.id,
       };
 
       // pagination
-      if ($searchParams.data["page[size]"]) {
-        options.pageSize = $searchParams.data["page[size]"];
+      if (searchParams["page[size]"]) {
+        options.pageSize = searchParams["page[size]"];
       }
 
-      if ($searchParams.data["page[after]"]) {
-        options.cursor = $searchParams.data["page[after]"];
+      if (searchParams["page[after]"]) {
+        options.cursor = searchParams["page[after]"];
         options.direction = "forward";
       }
 
-      if ($searchParams.data["page[before]"]) {
-        options.cursor = $searchParams.data["page[before]"];
+      if (searchParams["page[before]"]) {
+        options.cursor = searchParams["page[before]"];
         options.direction = "backward";
       }
 
@@ -167,12 +154,12 @@ export class ApiRunListPresenter extends BasePresenter {
       if (environment) {
         options.environments = [environment.id];
       } else {
-        if ($searchParams.data["filter[env]"]) {
+        if (searchParams["filter[env]"]) {
           const environments = await this._prisma.runtimeEnvironment.findMany({
             where: {
               projectId: project.id,
               slug: {
-                in: $searchParams.data["filter[env]"],
+                in: searchParams["filter[env]"],
               },
             },
           });
@@ -181,46 +168,50 @@ export class ApiRunListPresenter extends BasePresenter {
         }
       }
 
-      if ($searchParams.data["filter[status]"]) {
-        options.statuses = $searchParams.data["filter[status]"].flatMap((status) =>
+      if (searchParams["filter[status]"]) {
+        options.statuses = searchParams["filter[status]"].flatMap((status) =>
           ApiRunListPresenter.apiStatusToRunStatuses(status)
         );
       }
 
-      if ($searchParams.data["filter[taskIdentifier]"]) {
-        options.tasks = $searchParams.data["filter[taskIdentifier]"];
+      if (searchParams["filter[taskIdentifier]"]) {
+        options.tasks = searchParams["filter[taskIdentifier]"];
       }
 
-      if ($searchParams.data["filter[version]"]) {
-        options.versions = $searchParams.data["filter[version]"];
+      if (searchParams["filter[version]"]) {
+        options.versions = searchParams["filter[version]"];
       }
 
-      if ($searchParams.data["filter[tag]"]) {
-        options.tags = $searchParams.data["filter[tag]"];
+      if (searchParams["filter[tag]"]) {
+        options.tags = searchParams["filter[tag]"];
       }
 
-      if ($searchParams.data["filter[bulkAction]"]) {
-        options.bulkId = $searchParams.data["filter[bulkAction]"];
+      if (searchParams["filter[bulkAction]"]) {
+        options.bulkId = searchParams["filter[bulkAction]"];
       }
 
-      if ($searchParams.data["filter[schedule]"]) {
-        options.scheduleId = $searchParams.data["filter[schedule]"];
+      if (searchParams["filter[schedule]"]) {
+        options.scheduleId = searchParams["filter[schedule]"];
       }
 
-      if ($searchParams.data["filter[createdAt][from]"]) {
-        options.from = $searchParams.data["filter[createdAt][from]"].getTime();
+      if (searchParams["filter[createdAt][from]"]) {
+        options.from = searchParams["filter[createdAt][from]"].getTime();
       }
 
-      if ($searchParams.data["filter[createdAt][to]"]) {
-        options.to = $searchParams.data["filter[createdAt][to]"].getTime();
+      if (searchParams["filter[createdAt][to]"]) {
+        options.to = searchParams["filter[createdAt][to]"].getTime();
       }
 
-      if ($searchParams.data["filter[createdAt][period]"]) {
-        options.period = $searchParams.data["filter[createdAt][period]"];
+      if (searchParams["filter[createdAt][period]"]) {
+        options.period = searchParams["filter[createdAt][period]"];
       }
 
-      if (typeof $searchParams.data["filter[isTest]"] === "boolean") {
-        options.isTest = $searchParams.data["filter[isTest]"];
+      if (typeof searchParams["filter[isTest]"] === "boolean") {
+        options.isTest = searchParams["filter[isTest]"];
+      }
+
+      if (searchParams["filter[batch]"]) {
+        options.batchId = searchParams["filter[batch]"];
       }
 
       const presenter = new RunListPresenter();

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

@@ -0,0 +1,220 @@
+import { BatchTaskRunStatus, Prisma } from "@trigger.dev/database";
+import parse from "parse-duration";
+import { type Direction } from "~/components/runs/RunStatuses";
+import { sqlDatabaseSchema } from "~/db.server";
+import { displayableEnvironment } from "~/models/runtimeEnvironment.server";
+import { BasePresenter } from "./basePresenter.server";
+
+export type BatchListOptions = {
+  userId?: string;
+  projectId: string;
+  //filters
+  friendlyId?: string;
+  statuses?: BatchTaskRunStatus[];
+  environments?: string[];
+  period?: string;
+  from?: number;
+  to?: number;
+  //pagination
+  direction?: Direction;
+  cursor?: string;
+  pageSize?: number;
+};
+
+const DEFAULT_PAGE_SIZE = 25;
+
+export type BatchList = Awaited<ReturnType<BatchListPresenter["call"]>>;
+export type BatchListItem = BatchList["batches"][0];
+export type BatchListAppliedFilters = BatchList["filters"];
+
+export class BatchListPresenter extends BasePresenter {
+  public async call({
+    userId,
+    projectId,
+    friendlyId,
+    statuses,
+    environments,
+    period,
+    from,
+    to,
+    direction = "forward",
+    cursor,
+    pageSize = DEFAULT_PAGE_SIZE,
+  }: BatchListOptions) {
+    const hasStatusFilters = statuses && statuses.length > 0;
+
+    const hasFilters =
+      hasStatusFilters ||
+      (environments !== undefined && environments.length > 0) ||
+      (period !== undefined && period !== "all") ||
+      friendlyId !== undefined ||
+      from !== undefined ||
+      to !== undefined;
+
+    // Find the project scoped to the organization
+    const project = await this._replica.project.findFirstOrThrow({
+      select: {
+        id: true,
+        environments: {
+          select: {
+            id: true,
+            type: true,
+            slug: true,
+            orgMember: {
+              select: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    displayName: true,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      where: {
+        id: projectId,
+      },
+    });
+
+    let environmentIds = project.environments.map((e) => e.id);
+    if (environments && environments.length > 0) {
+      //if environments are passed in, we only include them if they're in the project
+      environmentIds = environments.filter((e) => project.environments.some((pe) => pe.id === e));
+    }
+
+    if (environmentIds.length === 0) {
+      throw new Error("No matching environments found for the project");
+    }
+
+    const periodMs = period ? parse(period) : undefined;
+
+    //get the batches
+    const batches = await this._replica.$queryRaw<
+      {
+        id: string;
+        friendlyId: string;
+        runtimeEnvironmentId: string;
+        status: BatchTaskRunStatus;
+        createdAt: Date;
+        updatedAt: Date;
+        runCount: BigInt;
+        batchVersion: string;
+      }[]
+    >`
+    SELECT
+    b.id,
+    b."friendlyId",
+    b."runtimeEnvironmentId",
+    b.status,
+    b."createdAt",
+    b."updatedAt",
+    b."runCount",
+    b."batchVersion"
+FROM
+    ${sqlDatabaseSchema}."BatchTaskRun" b
+WHERE
+    -- environments
+    b."runtimeEnvironmentId" IN (${Prisma.join(environmentIds)})
+    -- cursor
+    ${
+      cursor
+        ? direction === "forward"
+          ? Prisma.sql`AND b.id < ${cursor}`
+          : Prisma.sql`AND b.id > ${cursor}`
+        : Prisma.empty
+    }
+    -- filters
+    ${friendlyId ? Prisma.sql`AND b."friendlyId" = ${friendlyId}` : Prisma.empty}
+    ${
+      statuses && statuses.length > 0
+        ? Prisma.sql`AND b.status = ANY(ARRAY[${Prisma.join(
+            statuses
+          )}]::"BatchTaskRunStatus"[]) AND b."batchVersion" <> 'v1'`
+        : Prisma.empty
+    }
+    ${
+      periodMs
+        ? Prisma.sql`AND b."createdAt" >= NOW() - INTERVAL '1 millisecond' * ${periodMs}`
+        : Prisma.empty
+    }
+    ${
+      from
+        ? Prisma.sql`AND b."createdAt" >= ${new Date(from).toISOString()}::timestamp`
+        : Prisma.empty
+    }
+    ${to ? Prisma.sql`AND b."createdAt" <= ${new Date(to).toISOString()}::timestamp` : Prisma.empty}
+    ORDER BY
+        ${direction === "forward" ? Prisma.sql`b.id DESC` : Prisma.sql`b.id ASC`}
+    LIMIT ${pageSize + 1}`;
+
+    const hasMore = batches.length > pageSize;
+
+    //get cursors for next and previous pages
+    let next: string | undefined;
+    let previous: string | undefined;
+    switch (direction) {
+      case "forward":
+        previous = cursor ? batches.at(0)?.id : undefined;
+        if (hasMore) {
+          next = batches[pageSize - 1]?.id;
+        }
+        break;
+      case "backward":
+        batches.reverse();
+        if (hasMore) {
+          previous = batches[1]?.id;
+          next = batches[pageSize]?.id;
+        } else {
+          next = batches[pageSize - 1]?.id;
+        }
+        break;
+    }
+
+    const batchesToReturn =
+      direction === "backward" && hasMore
+        ? batches.slice(1, pageSize + 1)
+        : batches.slice(0, pageSize);
+
+    return {
+      batches: batchesToReturn.map((batch) => {
+        const environment = project.environments.find(
+          (env) => env.id === batch.runtimeEnvironmentId
+        );
+
+        if (!environment) {
+          throw new Error(`Environment not found for Batch ${batch.id}`);
+        }
+
+        const hasFinished = batch.status === "COMPLETED";
+
+        return {
+          id: batch.id,
+          friendlyId: batch.friendlyId,
+          createdAt: batch.createdAt.toISOString(),
+          updatedAt: batch.updatedAt.toISOString(),
+          hasFinished,
+          finishedAt: hasFinished ? batch.updatedAt.toISOString() : undefined,
+          status: batch.status,
+          environment: displayableEnvironment(environment, userId),
+          runCount: Number(batch.runCount),
+          batchVersion: batch.batchVersion,
+        };
+      }),
+      pagination: {
+        next,
+        previous,
+      },
+      filters: {
+        friendlyId,
+        statuses: statuses || [],
+        environments: environments || [],
+        from,
+        to,
+      },
+      hasFilters,
+    };
+  }
+}

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

@@ -108,6 +108,7 @@ export class DeploymentPresenter {
               },
             },
             sdkVersion: true,
+            cliVersion: true,
           },
         },
         triggeredBy: {
@@ -145,6 +146,7 @@ export class DeploymentPresenter {
         },
         deployedBy: deployment.triggeredBy,
         sdkVersion: deployment.worker?.sdkVersion,
+        cliVersion: deployment.worker?.cliVersion,
         imageReference: deployment.imageReference,
         externalBuildData:
           externalBuildData && externalBuildData.success ? externalBuildData.data : undefined,

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

@@ -22,6 +22,9 @@ export type RunListOptions = {
   from?: number;
   to?: number;
   isTest?: boolean;
+  rootOnly?: boolean;
+  batchId?: string;
+  runId?: string;
   //pagination
   direction?: Direction;
   cursor?: string;
@@ -47,6 +50,9 @@ export class RunListPresenter extends BasePresenter {
     period,
     bulkId,
     isTest,
+    rootOnly,
+    batchId,
+    runId,
     from,
     to,
     direction = "forward",
@@ -66,7 +72,10 @@ export class RunListPresenter extends BasePresenter {
       to !== undefined ||
       (scheduleId !== undefined && scheduleId !== "") ||
       (tags !== undefined && tags.length > 0) ||
-      typeof isTest === "boolean";
+      batchId !== undefined ||
+      runId !== undefined ||
+      typeof isTest === "boolean" ||
+      rootOnly === true;
 
     // Find the project scoped to the organization
     const project = await this._replica.project.findFirstOrThrow({
@@ -141,6 +150,43 @@ export class RunListPresenter extends BasePresenter {
       }
     }
 
+    //batch id is a friendly id
+    if (batchId) {
+      const batch = await this._replica.batchTaskRun.findFirst({
+        select: {
+          id: true,
+        },
+        where: {
+          friendlyId: batchId,
+        },
+      });
+
+      if (batch) {
+        batchId = batch.id;
+      }
+    }
+
+    //scheduleId can be a friendlyId
+    if (scheduleId && scheduleId.startsWith("sched_")) {
+      const schedule = await this._replica.taskSchedule.findFirst({
+        select: {
+          id: true,
+        },
+        where: {
+          friendlyId: scheduleId,
+        },
+      });
+
+      if (schedule) {
+        scheduleId = schedule?.id;
+      }
+    }
+
+    //show all runs if we are filtering by batchId or runId
+    if (batchId || runId || scheduleId || tasks?.length) {
+      rootOnly = false;
+    }
+
     const periodMs = period ? parse(period) : undefined;
 
     //get the runs
@@ -166,9 +212,10 @@ export class RunListPresenter extends BasePresenter {
         costInCents: number;
         baseCostInCents: number;
         usageDurationMs: BigInt;
-        tags: string[];
+        tags: null | string[];
         depth: number;
         rootTaskRunId: string | null;
+        batchId: string | null;
       }[]
     >`
     SELECT
@@ -194,15 +241,11 @@ export class RunListPresenter extends BasePresenter {
     tr."usageDurationMs" AS "usageDurationMs",
     tr."depth" AS "depth",
     tr."rootTaskRunId" AS "rootTaskRunId",
-    array_remove(array_agg(tag.name), NULL) AS "tags"
+    tr."runTags" AS "tags"
 FROM
     ${sqlDatabaseSchema}."TaskRun" tr
 LEFT JOIN
     ${sqlDatabaseSchema}."BackgroundWorker" bw ON tr."lockedToVersionId" = bw.id
-LEFT JOIN
-    ${sqlDatabaseSchema}."_TaskRunToTaskRunTag" trtg ON tr.id = trtg."A"
-LEFT JOIN
-    ${sqlDatabaseSchema}."TaskRunTag" tag ON trtg."B" = tag.id
 WHERE
     -- project
     tr."projectId" = ${project.id}
@@ -215,6 +258,8 @@ WHERE
         : Prisma.empty
     }
     -- filters
+    ${runId ? Prisma.sql`AND tr."friendlyId" = ${runId}` : Prisma.empty}
+    ${batchId ? Prisma.sql`AND tr."batchId" = ${batchId}` : Prisma.empty}
     ${
       restrictToRunIds
         ? restrictToRunIds.length === 0
@@ -248,26 +293,16 @@ WHERE
       from
         ? Prisma.sql`AND tr."createdAt" >= ${new Date(from).toISOString()}::timestamp`
         : Prisma.empty
-    } 
+    }
     ${
       to ? Prisma.sql`AND tr."createdAt" <= ${new Date(to).toISOString()}::timestamp` : Prisma.empty
-    } 
-        ${
-          tags && tags.length > 0
-            ? Prisma.sql`AND (
-              tr.id IN (
-                SELECT 
-                    trtg."A" 
-                FROM 
-                    ${sqlDatabaseSchema}."_TaskRunToTaskRunTag" trtg
-                JOIN 
-                    ${sqlDatabaseSchema}."TaskRunTag" tag ON trtg."B" = tag.id
-                WHERE 
-                    tag.name IN (${Prisma.join(tags)})
-              )
-            )`
-            : Prisma.empty
-        }
+    }
+    ${
+      tags && tags.length > 0
+        ? Prisma.sql`AND tr."runTags" && ARRAY[${Prisma.join(tags)}]::text[]`
+        : Prisma.empty
+    }
+    ${rootOnly === true ? Prisma.sql`AND tr."rootTaskRunId" IS NULL` : Prisma.empty}
     GROUP BY
       tr.id, bw.version
     ORDER BY
@@ -336,7 +371,7 @@ WHERE
           costInCents: run.costInCents,
           baseCostInCents: run.baseCostInCents,
           usageDurationMs: Number(run.usageDurationMs),
-          tags: run.tags.sort((a, b) => a.localeCompare(b)),
+          tags: run.tags ? run.tags.sort((a, b) => a.localeCompare(b)) : [],
           depth: run.depth,
           rootTaskRunId: run.rootTaskRunId,
         };

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

@@ -7,7 +7,7 @@ import {
 import { RUNNING_STATUSES } from "~/components/runs/v3/TaskRunStatus";
 import { eventRepository } from "~/v3/eventRepository.server";
 import { machinePresetFromName } from "~/v3/machinePresets.server";
-import { FINAL_ATTEMPT_STATUSES, isFinalRunStatus } from "~/v3/taskStatus";
+import { FINAL_ATTEMPT_STATUSES, isFailedRunStatus, isFinalRunStatus } from "~/v3/taskStatus";
 import { BasePresenter } from "./basePresenter.server";
 import { getMaxDuration } from "~/v3/utils/maxDuration";
 
@@ -149,6 +149,11 @@ export class SpanPresenter extends BasePresenter {
             spanId: true,
           },
         },
+        batch: {
+          select: {
+            friendlyId: true,
+          },
+        },
       },
       where: {
         spanId,
@@ -210,7 +215,7 @@ export class SpanPresenter extends BasePresenter {
     const span = await eventRepository.getSpan(spanId, run.traceId);
 
     const metadata = run.metadata
-      ? await prettyPrintPacket(run.metadata, run.metadataType)
+      ? await prettyPrintPacket(run.metadata, run.metadataType, { filteredKeys: ["$$streams"] })
       : undefined;
 
     const context = {
@@ -294,6 +299,7 @@ export class SpanPresenter extends BasePresenter {
       usageDurationMs: run.usageDurationMs,
       isFinished,
       isRunning: RUNNING_STATUSES.includes(run.status),
+      isError: isFailedRunStatus(run.status),
       payload,
       payloadType: run.payloadType,
       output,
@@ -311,6 +317,7 @@ export class SpanPresenter extends BasePresenter {
       context: JSON.stringify(context, null, 2),
       metadata,
       maxDurationInSeconds: getMaxDuration(run.maxDurationInSeconds),
+      batch: run.batch ? { friendlyId: run.batch.friendlyId } : undefined,
     };
   }
 

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

@@ -31,6 +31,7 @@ export type Task = {
   environments: {
     id: string;
     type: RuntimeEnvironmentType;
+    slug: string;
     userName?: string;
   }[];
 };

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

@@ -113,10 +113,10 @@ export class TestPresenter extends BasePresenter {
           triggerSource: TaskTriggerSource;
         }[]
       >`WITH workers AS (
-          SELECT 
+          SELECT
                 bw.*,
                 ROW_NUMBER() OVER(ORDER BY string_to_array(bw.version, '.')::int[] DESC) AS rn
-          FROM 
+          FROM
                 ${sqlDatabaseSchema}."BackgroundWorker" bw
           WHERE "runtimeEnvironmentId" = ${envId}
         ),

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

@@ -1,13 +1,15 @@
 import { ScheduledTaskPayload, parsePacket, prettyPrintPacket } from "@trigger.dev/core/v3";
-import { RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database";
+import { BackgroundWorkerTask, RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database";
 import { PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server";
 import { getTimezones } from "~/utils/timezones.server";
 import { getUsername } from "~/utils/username";
+import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server";
 
 type TestTaskOptions = {
   userId: string;
   projectSlug: string;
-  taskFriendlyId: string;
+  environmentSlug: string;
+  taskIdentifier: string;
 };
 
 type Task = {
@@ -37,6 +39,15 @@ export type TestTask =
       runs: ScheduledRun[];
     };
 
+export type TestTaskResult =
+  | {
+      foundTask: true;
+      task: TestTask;
+    }
+  | {
+      foundTask: false;
+    };
+
 type RawRun = {
   id: string;
   number: BigInt;
@@ -71,55 +82,79 @@ export class TestTaskPresenter {
     this.#prismaClient = prismaClient;
   }
 
-  public async call({ userId, projectSlug, taskFriendlyId }: TestTaskOptions): Promise<TestTask> {
-    const task = await this.#prismaClient.backgroundWorkerTask.findFirstOrThrow({
+  public async call({
+    userId,
+    projectSlug,
+    environmentSlug,
+    taskIdentifier,
+  }: TestTaskOptions): Promise<TestTaskResult> {
+    const environment = await this.#prismaClient.runtimeEnvironment.findFirstOrThrow({
+      where: {
+        slug: environmentSlug,
+        project: {
+          slug: projectSlug,
+        },
+        orgMember: environmentSlug === "dev" ? { userId } : undefined,
+      },
       select: {
         id: true,
-        filePath: true,
-        exportName: true,
-        slug: true,
-        triggerSource: true,
-        runtimeEnvironment: {
+        type: true,
+        orgMember: {
           select: {
-            id: true,
-            type: true,
-            orgMember: {
+            user: {
               select: {
-                user: {
-                  select: {
-                    id: true,
-                    name: true,
-                    displayName: true,
-                  },
-                },
+                id: true,
+                name: true,
+                displayName: true,
               },
             },
           },
         },
       },
-      where: {
-        friendlyId: taskFriendlyId,
-      },
     });
 
+    let task: BackgroundWorkerTask | null = null;
+    if (environment.type !== "DEVELOPMENT") {
+      const deployment = await findCurrentWorkerDeployment(environment.id);
+      if (deployment) {
+        task = deployment.worker?.tasks.find((t) => t.slug === taskIdentifier) ?? null;
+      }
+    } else {
+      task = await this.#prismaClient.backgroundWorkerTask.findFirst({
+        where: {
+          slug: taskIdentifier,
+          runtimeEnvironmentId: environment.id,
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+      });
+    }
+
+    if (!task) {
+      return {
+        foundTask: false,
+      };
+    }
+
     const latestRuns = await this.#prismaClient.$queryRaw<RawRun[]>`
     WITH taskruns AS (
-      SELECT 
-          tr.* 
-      FROM 
+      SELECT
+          tr.*
+      FROM
           ${sqlDatabaseSchema}."TaskRun" as tr
       JOIN
           ${sqlDatabaseSchema}."BackgroundWorkerTask" as bwt
       ON
           tr."taskIdentifier" = bwt.slug
       WHERE
-          bwt."friendlyId" = ${taskFriendlyId} AND
-          tr."runtimeEnvironmentId" = ${task.runtimeEnvironment.id}
-      ORDER BY 
+          bwt."friendlyId" = ${task.friendlyId} AND
+          tr."runtimeEnvironmentId" = ${environment.id}
+      ORDER BY
           tr."createdAt" DESC
       LIMIT 5
     )
-    SELECT 
+    SELECT
         taskr.id,
         taskr.number,
         taskr."friendlyId",
@@ -131,7 +166,7 @@ export class TestTaskPresenter {
         taskr."seedMetadata",
         taskr."seedMetadataType",
         taskr."runtimeEnvironmentId"
-    FROM 
+    FROM
         taskruns AS taskr
     WHERE
         taskr."payloadType" = 'application/json' OR taskr."payloadType" = 'application/super+json'
@@ -143,58 +178,64 @@ export class TestTaskPresenter {
       taskIdentifier: task.slug,
       filePath: task.filePath,
       exportName: task.exportName,
-      friendlyId: taskFriendlyId,
+      friendlyId: task.friendlyId,
       environment: {
-        id: task.runtimeEnvironment.id,
-        type: task.runtimeEnvironment.type,
-        userId: task.runtimeEnvironment.orgMember?.user.id,
-        userName: getUsername(task.runtimeEnvironment.orgMember?.user),
+        id: environment.id,
+        type: environment.type,
+        userId: environment.orgMember?.user.id,
+        userName: getUsername(environment.orgMember?.user),
       },
     };
 
     switch (task.triggerSource) {
       case "STANDARD":
         return {
-          triggerSource: "STANDARD",
-          task: taskWithEnvironment,
-          runs: await Promise.all(
-            latestRuns.map(async (r) => {
-              const number = Number(r.number);
+          foundTask: true,
+          task: {
+            triggerSource: "STANDARD",
+            task: taskWithEnvironment,
+            runs: await Promise.all(
+              latestRuns.map(async (r) => {
+                const number = Number(r.number);
 
-              return {
-                ...r,
-                number,
-                payload: await prettyPrintPacket(r.payload, r.payloadType),
-                metadata: r.seedMetadata
-                  ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType)
-                  : undefined,
-              };
-            })
-          ),
+                return {
+                  ...r,
+                  number,
+                  payload: await prettyPrintPacket(r.payload, r.payloadType),
+                  metadata: r.seedMetadata
+                    ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType)
+                    : undefined,
+                };
+              })
+            ),
+          },
         };
       case "SCHEDULED":
         const possibleTimezones = getTimezones();
         return {
-          triggerSource: "SCHEDULED",
-          task: taskWithEnvironment,
-          possibleTimezones,
-          runs: (
-            await Promise.all(
-              latestRuns.map(async (r) => {
-                const number = Number(r.number);
+          foundTask: true,
+          task: {
+            triggerSource: "SCHEDULED",
+            task: taskWithEnvironment,
+            possibleTimezones,
+            runs: (
+              await Promise.all(
+                latestRuns.map(async (r) => {
+                  const number = Number(r.number);
 
-                const payload = await getScheduleTaskRunPayload(r);
+                  const payload = await getScheduleTaskRunPayload(r);
 
-                if (payload.success) {
-                  return {
-                    ...r,
-                    number,
-                    payload: payload.data,
-                  };
-                }
-              })
-            )
-          ).filter(Boolean),
+                  if (payload.success) {
+                    return {
+                      ...r,
+                      number,
+                      payload: payload.data,
+                    };
+                  }
+                })
+              )
+            ).filter(Boolean),
+          },
         };
     }
   }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/ConfigureEndpointSheet.tsx

@@ -22,7 +22,7 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { Sheet, SheetBody, SheetContent, SheetHeader } from "~/components/primitives/Sheet";
 import { ClientEndpoint } from "~/presenters/EnvironmentsPresenter.server";
 import { endpointStreamingPath } from "~/utils/pathBuilder";
-import { EndpointIndexStatus, RuntimeEnvironmentType } from "../../../../../packages/database/src";
+import { EndpointIndexStatus, RuntimeEnvironmentType } from "@trigger.dev/database";
 import { bodySchema } from "../resources.environments.$environmentParam.endpoint";
 
 type ConfigureEndpointSheetProps = {

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx

@@ -39,7 +39,7 @@ import {
   projectEnvironmentsStreamingPath,
 } from "~/utils/pathBuilder";
 import { requestUrl } from "~/utils/requestUrl.server";
-import { RuntimeEnvironmentType } from "../../../../../packages/database/src";
+import { RuntimeEnvironmentType } from "@trigger.dev/database";
 import { ConfigureEndpointSheet } from "./ConfigureEndpointSheet";
 import { FirstEndpointSheet } from "./FirstEndpointSheet";
 import { BookOpenIcon } from "@heroicons/react/20/solid";

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

@@ -1,11 +1,24 @@
-import { ChatBubbleLeftRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
-import { useRevalidator } from "@remix-run/react";
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import {
+  BeakerIcon,
+  BookOpenIcon,
+  ChatBubbleLeftRightIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  LightBulbIcon,
+  UserPlusIcon,
+  VideoCameraIcon,
+} from "@heroicons/react/20/solid";
+import { json } from "@remix-run/node";
+import { Link, useRevalidator, useSubmit } from "@remix-run/react";
+import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { DiscordIcon } from "@trigger.dev/companyicons";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import { TaskRunStatus } from "@trigger.dev/database";
 import { Fragment, Suspense, useEffect, useState } from "react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, TooltipProps } from "recharts";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
+import { ExitIcon } from "~/assets/icons/ExitIcon";
+import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { Feedback } from "~/components/Feedback";
 import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
@@ -13,14 +26,22 @@ import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
 import { EnvironmentLabels } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Button } from "~/components/primitives/Buttons";
+import { AnimatingArrow } from "~/components/primitives/AnimatingArrow";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { formatDateTime } from "~/components/primitives/DateTime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "~/components/primitives/Dialog";
 import { Header1, Header2, Header3 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
 import * as Property from "~/components/primitives/PropertyTable";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "~/components/primitives/Resizable";
 import { Spinner } from "~/components/primitives/Spinner";
 import { StepNumber } from "~/components/primitives/StepNumber";
 import {
@@ -28,7 +49,7 @@ import {
   TableBlankRow,
   TableBody,
   TableCell,
-  TableCellChevron,
+  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
@@ -38,17 +59,30 @@ import TooltipPortal from "~/components/primitives/TooltipPortal";
 import { TaskFunctionName } from "~/components/runs/v3/TaskPath";
 import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import {
-  TaskTriggerSourceIcon,
   taskTriggerSourceDescription,
+  TaskTriggerSourceIcon,
 } from "~/components/runs/v3/TaskTriggerSource";
 import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTextFilter } from "~/hooks/useTextFilter";
 import { Task, TaskActivity, TaskListPresenter } from "~/presenters/v3/TaskListPresenter.server";
+import {
+  getUsefulLinksPreference,
+  setUsefulLinksPreference,
+  uiPreferencesStorage,
+} from "~/services/preferences/uiPreferences.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { ProjectParamSchema, v3RunsPath, v3TasksStreamingPath } from "~/utils/pathBuilder";
+import {
+  docsPath,
+  inviteTeamMemberPath,
+  ProjectParamSchema,
+  v3RunsPath,
+  v3TasksStreamingPath,
+  v3TestPath,
+  v3TestTaskPath,
+} from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -62,12 +96,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       projectSlug: projectParam,
     });
 
+    const usefulLinksPreference = await getUsefulLinksPreference(request);
+
     return typeddefer({
       tasks,
       userHasTasks,
       activity,
       runningStats,
       durations,
+      usefulLinksPreference,
     });
   } catch (error) {
     console.error(error);
@@ -78,10 +115,26 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   }
 };
 
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const showUsefulLinks = formData.get("showUsefulLinks") === "true";
+
+  const session = await setUsefulLinksPreference(showUsefulLinks, request);
+
+  return json(
+    { success: true },
+    {
+      headers: {
+        "Set-Cookie": await uiPreferencesStorage.commitSession(session),
+      },
+    }
+  );
+}
+
 export default function Page() {
   const organization = useOrganization();
   const project = useProject();
-  const { tasks, userHasTasks, activity, runningStats, durations } =
+  const { tasks, userHasTasks, activity, runningStats, durations, usefulLinksPreference } =
     useTypedLoaderData<typeof loader>();
   const { filterText, setFilterText, filteredItems } = useTextFilter<Task>({
     items: tasks,
@@ -123,6 +176,16 @@ export default function Page() {
     // WARNING Don't put the revalidator in the useEffect deps array or bad things will happen
   }, [streamedEvents]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const [showUsefulLinks, setShowUsefulLinks] = useState(usefulLinksPreference ?? true);
+
+  // Create a submit handler to save the preference
+  const submit = useSubmit();
+
+  const handleUsefulLinksToggle = (show: boolean) => {
+    setShowUsefulLinks(show);
+    submit({ showUsefulLinks: show.toString() }, { method: "post" });
+  };
+
   return (
     <PageContainer>
       <NavBar>
@@ -144,145 +207,223 @@ export default function Page() {
               ))}
             </Property.Table>
           </AdminDebugTooltip>
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/tasks/overview")}
+          >
+            Task docs
+          </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className={cn("grid h-full grid-rows-1")}>
-          {hasTasks ? (
-            <div className="flex flex-col gap-4 pb-4">
-              {!userHasTasks && <UserHasNoTasks />}
-              <div className="pb-4">
-                <div className="h-8">
-                  <Input
-                    placeholder="Search tasks"
-                    variant="tertiary"
-                    icon="search"
-                    fullWidth={true}
-                    value={filterText}
-                    onChange={(e) => setFilterText(e.target.value)}
-                    autoFocus
-                  />
-                </div>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHeaderCell>Task ID</TableHeaderCell>
-                      <TableHeaderCell>Task</TableHeaderCell>
-                      <TableHeaderCell>Running</TableHeaderCell>
-                      <TableHeaderCell>Queued</TableHeaderCell>
-                      <TableHeaderCell>Activity (7d)</TableHeaderCell>
-                      <TableHeaderCell>Avg. duration</TableHeaderCell>
-                      <TableHeaderCell>Environments</TableHeaderCell>
-                      <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredItems.length > 0 ? (
-                      filteredItems.map((task) => {
-                        const path = v3RunsPath(organization, project, {
-                          tasks: [task.slug],
-                        });
-                        return (
-                          <TableRow key={task.slug} className="group">
-                            <TableCell to={path}>
-                              <div className="flex items-center gap-2">
-                                <SimpleTooltip
-                                  button={<TaskTriggerSourceIcon source={task.triggerSource} />}
-                                  content={taskTriggerSourceDescription(task.triggerSource)}
-                                />
-                                <span>{task.slug}</span>
-                              </div>
-                            </TableCell>
-                            <TableCell to={path} className="py-0" actionClassName="py-0">
-                              <TaskFunctionName
-                                functionName={task.exportName}
-                                variant="extra-extra-small"
-                              />
-                            </TableCell>
-                            <TableCell to={path} className="p-0">
-                              <Suspense
-                                fallback={
-                                  <>
-                                    <Spinner color="muted" />
-                                  </>
-                                }
-                              >
-                                <TypedAwait resolve={runningStats}>
-                                  {(data) => {
-                                    const taskData = data[task.slug];
-                                    return taskData?.running ?? "0";
-                                  }}
-                                </TypedAwait>
-                              </Suspense>
-                            </TableCell>
-                            <TableCell to={path} className="p-0">
-                              <Suspense fallback={<></>}>
-                                <TypedAwait resolve={runningStats}>
-                                  {(data) => {
-                                    const taskData = data[task.slug];
-                                    return taskData?.queued ?? "0";
-                                  }}
-                                </TypedAwait>
-                              </Suspense>
-                            </TableCell>
-                            <TableCell to={path} className="p-0" actionClassName="py-0">
-                              <Suspense fallback={<TaskActivityBlankState />}>
-                                <TypedAwait resolve={activity}>
-                                  {(data) => {
-                                    const taskData = data[task.slug];
-                                    return (
+      <PageBody scrollable={false}>
+        <ResizablePanelGroup orientation="horizontal" className="max-h-full">
+          <ResizablePanel id="tasks-main" className="max-h-full">
+            <div className={cn("grid h-full grid-rows-1")}>
+              {hasTasks ? (
+                <div className="flex min-w-0 max-w-full flex-col">
+                  {!userHasTasks && <UserHasNoTasks />}
+                  <div className="max-h-full overflow-hidden">
+                    <div className="flex items-center p-2">
+                      <Input
+                        placeholder="Search tasks"
+                        variant="tertiary"
+                        icon="search"
+                        fullWidth={true}
+                        value={filterText}
+                        onChange={(e) => setFilterText(e.target.value)}
+                        autoFocus
+                      />
+                      {!showUsefulLinks && (
+                        <Button
+                          variant="minimal/small"
+                          TrailingIcon={LightBulbIcon}
+                          onClick={() => handleUsefulLinksToggle(true)}
+                          className="px-2.5"
+                        />
+                      )}
+                    </div>
+                    <Table containerClassName="max-h-full pb-[2.5rem]">
+                      <TableHeader>
+                        <TableRow>
+                          <TableHeaderCell>Task ID</TableHeaderCell>
+                          <TableHeaderCell>Task</TableHeaderCell>
+                          <TableHeaderCell>Running</TableHeaderCell>
+                          <TableHeaderCell>Queued</TableHeaderCell>
+                          <TableHeaderCell>Activity (7d)</TableHeaderCell>
+                          <TableHeaderCell>Avg. duration</TableHeaderCell>
+                          <TableHeaderCell>Environments</TableHeaderCell>
+                          <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {filteredItems.length > 0 ? (
+                          filteredItems.map((task) => {
+                            const path = v3RunsPath(organization, project, {
+                              tasks: [task.slug],
+                            });
+
+                            const devYouEnvironment = task.environments.find(
+                              (e) => e.type === "DEVELOPMENT" && !e.userName
+                            );
+                            const firstDeployedEnvironment = task.environments
+                              .filter((e) => e.type !== "DEVELOPMENT")
+                              .at(0);
+                            const testEnvironment = devYouEnvironment ?? firstDeployedEnvironment;
+
+                            const testPath = testEnvironment
+                              ? v3TestTaskPath(
+                                  organization,
+                                  project,
+                                  { taskIdentifier: task.slug },
+                                  testEnvironment.slug
+                                )
+                              : v3TestPath(organization, project);
+
+                            return (
+                              <TableRow key={task.slug} className="group">
+                                <TableCell to={path}>
+                                  <div className="flex items-center gap-2">
+                                    <SimpleTooltip
+                                      button={<TaskTriggerSourceIcon source={task.triggerSource} />}
+                                      content={taskTriggerSourceDescription(task.triggerSource)}
+                                    />
+                                    <span>{task.slug}</span>
+                                  </div>
+                                </TableCell>
+                                <TableCell to={path} className="py-0" actionClassName="py-0">
+                                  <TaskFunctionName
+                                    functionName={task.exportName}
+                                    variant="extra-extra-small"
+                                  />
+                                </TableCell>
+                                <TableCell to={path} className="p-0">
+                                  <Suspense
+                                    fallback={
                                       <>
-                                        {taskData !== undefined ? (
-                                          <div className="h-6 w-[5.125rem] rounded-sm">
-                                            <TaskActivityGraph activity={taskData} />
-                                          </div>
-                                        ) : (
-                                          <TaskActivityBlankState />
-                                        )}
+                                        <Spinner color="muted" />
                                       </>
-                                    );
-                                  }}
-                                </TypedAwait>
-                              </Suspense>
-                            </TableCell>
-                            <TableCell to={path} className="p-0">
-                              <Suspense fallback={<></>}>
-                                <TypedAwait resolve={durations}>
-                                  {(data) => {
-                                    const taskData = data[task.slug];
-                                    return taskData
-                                      ? formatDurationMilliseconds(taskData * 1000, {
-                                          style: "short",
-                                        })
-                                      : "–";
-                                  }}
-                                </TypedAwait>
-                              </Suspense>
-                            </TableCell>
-                            <TableCell to={path}>
-                              <EnvironmentLabels environments={task.environments} />
-                            </TableCell>
-                            <TableCellChevron to={path} />
-                          </TableRow>
-                        );
-                      })
-                    ) : (
-                      <TableBlankRow colSpan={8}>
-                        <Paragraph variant="small" className="flex items-center justify-center">
-                          No tasks match your filters
-                        </Paragraph>
-                      </TableBlankRow>
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+                                    }
+                                  >
+                                    <TypedAwait resolve={runningStats}>
+                                      {(data) => {
+                                        const taskData = data[task.slug];
+                                        return taskData?.running ?? "0";
+                                      }}
+                                    </TypedAwait>
+                                  </Suspense>
+                                </TableCell>
+                                <TableCell to={path} className="p-0">
+                                  <Suspense fallback={<></>}>
+                                    <TypedAwait resolve={runningStats}>
+                                      {(data) => {
+                                        const taskData = data[task.slug];
+                                        return taskData?.queued ?? "0";
+                                      }}
+                                    </TypedAwait>
+                                  </Suspense>
+                                </TableCell>
+                                <TableCell to={path} className="p-0" actionClassName="py-0">
+                                  <Suspense fallback={<TaskActivityBlankState />}>
+                                    <TypedAwait resolve={activity}>
+                                      {(data) => {
+                                        const taskData = data[task.slug];
+                                        return (
+                                          <>
+                                            {taskData !== undefined ? (
+                                              <div className="h-6 w-[5.125rem] rounded-sm">
+                                                <TaskActivityGraph activity={taskData} />
+                                              </div>
+                                            ) : (
+                                              <TaskActivityBlankState />
+                                            )}
+                                          </>
+                                        );
+                                      }}
+                                    </TypedAwait>
+                                  </Suspense>
+                                </TableCell>
+                                <TableCell to={path} className="p-0">
+                                  <Suspense fallback={<></>}>
+                                    <TypedAwait resolve={durations}>
+                                      {(data) => {
+                                        const taskData = data[task.slug];
+                                        return taskData
+                                          ? formatDurationMilliseconds(taskData * 1000, {
+                                              style: "short",
+                                            })
+                                          : "–";
+                                      }}
+                                    </TypedAwait>
+                                  </Suspense>
+                                </TableCell>
+                                <TableCell to={path}>
+                                  <EnvironmentLabels environments={task.environments} />
+                                </TableCell>
+                                <TableCellMenu
+                                  isSticky
+                                  popoverContent={
+                                    <>
+                                      <PopoverMenuItem
+                                        icon="runs"
+                                        to={path}
+                                        title="View runs"
+                                        leadingIconClassName="text-teal-500"
+                                      />
+                                      <PopoverMenuItem
+                                        icon="beaker"
+                                        to={testPath}
+                                        title="Test task"
+                                      />
+                                    </>
+                                  }
+                                  hiddenButtons={
+                                    <LinkButton
+                                      variant="minimal/small"
+                                      LeadingIcon={BeakerIcon}
+                                      leadingIconClassName="text-text-bright"
+                                      to={testPath}
+                                    >
+                                      Test
+                                    </LinkButton>
+                                  }
+                                />
+                              </TableRow>
+                            );
+                          })
+                        ) : (
+                          <TableBlankRow colSpan={8}>
+                            <Paragraph variant="small" className="flex items-center justify-center">
+                              No tasks match your filters
+                            </Paragraph>
+                          </TableBlankRow>
+                        )}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              ) : (
+                <MainCenteredContainer className="max-w-prose">
+                  <CreateTaskInstructions />
+                </MainCenteredContainer>
+              )}
             </div>
-          ) : (
-            <MainCenteredContainer className="max-w-prose">
-              <CreateTaskInstructions />
-            </MainCenteredContainer>
-          )}
-        </div>
+          </ResizablePanel>
+          {hasTasks && showUsefulLinks ? (
+            <>
+              <ResizableHandle id="tasks-handle" />
+              <ResizablePanel
+                id="tasks-inspector"
+                min="200px"
+                default="400px"
+                max="500px"
+                className="w-full"
+              >
+                <HelpfulInfoHasTasks onClose={() => handleUsefulLinksToggle(false)} />
+              </ResizablePanel>
+            </>
+          ) : null}
+        </ResizablePanelGroup>
       </PageBody>
     </PageContainer>
   );
@@ -329,43 +470,45 @@ function UserHasNoTasks() {
   const [open, setOpen] = useState(false);
 
   return (
-    <Callout
-      variant="info"
-      cta={
-        <Button
-          variant="tertiary/small"
-          TrailingIcon={open ? ChevronUpIcon : ChevronDownIcon}
-          onClick={() => setOpen((o) => !o)}
-        >
-          {open ? "Close" : "Setup your dev environment"}
-        </Button>
-      }
-    >
-      {open ? (
-        <div>
-          <Header2 spacing>Get setup in 3 minutes</Header2>
+    <div className="px-2 pt-2">
+      <Callout
+        variant="info"
+        cta={
+          <Button
+            variant="tertiary/small"
+            TrailingIcon={open ? ChevronUpIcon : ChevronDownIcon}
+            onClick={() => setOpen((o) => !o)}
+          >
+            {open ? "Close" : "Setup your dev environment"}
+          </Button>
+        }
+      >
+        {open ? (
+          <div>
+            <Header2 spacing>Get setup in 3 minutes</Header2>
 
-          <StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
-          <StepContentContainer>
-            <Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
-          </StepContentContainer>
-          <StepNumber stepNumber="2" title="Run the CLI 'login' command" />
-          <StepContentContainer>
-            <TriggerLoginStepV3 />
-          </StepContentContainer>
-          <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
-          <StepContentContainer>
-            <TriggerDevStepV3 />
-          </StepContentContainer>
-          <StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
-          <StepContentContainer>
-            <Paragraph>This page will automatically refresh.</Paragraph>
-          </StepContentContainer>
-        </div>
-      ) : (
-        "Your DEV environment isn't setup yet."
-      )}
-    </Callout>
+            <StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
+            <StepContentContainer>
+              <Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
+            </StepContentContainer>
+            <StepNumber stepNumber="2" title="Run the CLI 'login' command" />
+            <StepContentContainer>
+              <TriggerLoginStepV3 />
+            </StepContentContainer>
+            <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
+            <StepContentContainer>
+              <TriggerDevStepV3 />
+            </StepContentContainer>
+            <StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
+            <StepContentContainer>
+              <Paragraph>This page will automatically refresh.</Paragraph>
+            </StepContentContainer>
+          </div>
+        ) : (
+          "Your DEV environment isn't setup yet."
+        )}
+      </Callout>
+    </div>
   );
 }
 
@@ -457,7 +600,7 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>)
     return (
       <TooltipPortal active={active}>
         <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-          <Header3 className="border-b-charcoal-650 border-b pb-2">{formattedDate}</Header3>
+          <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
           <div className="mt-2 grid grid-cols-[1fr_auto] gap-2 text-xs text-text-bright">
             {items.map((item) => (
               <Fragment key={item.status}>
@@ -473,3 +616,251 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>)
 
   return null;
 };
+
+function HelpfulInfoHasTasks({ onClose }: { onClose: () => void }) {
+  const organization = useOrganization();
+  const project = useProject();
+  const [isVideoDialogOpen, setIsVideoDialogOpen] = useState(false);
+
+  return (
+    <div className="grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
+      <div className="overflow-y-scroll p-3 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="mb-2 flex items-center justify-between gap-2 border-b border-grid-dimmed pb-2">
+          <Header2 className="flex items-center gap-2">
+            <LightBulbIcon className="size-4 min-w-4 text-sun-500" />
+            Helpful next steps
+          </Header2>
+          <Button
+            onClick={onClose}
+            variant="minimal/small"
+            TrailingIcon={ExitIcon}
+            shortcut={{ key: "esc" }}
+            shortcutPosition="before-trailing-icon"
+            className="pl-[0.375rem]"
+          />
+        </div>
+        <LinkWithIcon
+          variant="withIcon"
+          to={v3TestPath(organization, project)}
+          description="Test your tasks"
+          icon={<BeakerIcon className="size-5 text-lime-500" />}
+        />
+        <LinkWithIcon
+          variant="withIcon"
+          to={inviteTeamMemberPath(organization)}
+          description="Invite team members"
+          icon={<UserPlusIcon className="size-5 text-amber-500" />}
+        />
+        <div
+          role="button"
+          onClick={() => setIsVideoDialogOpen(true)}
+          className={cn(
+            "group flex w-full items-center justify-between gap-2 rounded-md p-1 pr-3 transition hover:bg-charcoal-750",
+            variants["withIcon"].container
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <div className={variants["withIcon"].iconContainer}>
+              <VideoCameraIcon className="size-5 text-rose-500" />
+            </div>
+            <Paragraph variant="base" className="transition-colors group-hover:text-text-bright">
+              Watch a 14 min walkthrough video
+            </Paragraph>
+          </div>
+          <AnimatingArrow direction="right" theme="dimmed" />
+        </div>
+        <LinkWithIcon
+          variant="withIcon"
+          to="https://trigger.dev/discord"
+          description="Join our Discord for help and support"
+          icon={<DiscordIcon className="size-5" />}
+          isExternal
+        />
+        <div className="mb-2 flex items-center gap-2 border-b border-grid-dimmed pb-2 pt-6">
+          <Header2 className="flex items-center gap-2">
+            <BookOpenIcon className="size-5 text-blue-500" />
+            From the docs
+          </Header2>
+        </div>
+        <LinkWithIcon
+          to={docsPath("/writing-tasks-introduction")}
+          description="How to write a task"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/tasks/scheduled")}
+          description="Scheduled tasks (cron)"
+          isExternal
+        />
+        <LinkWithIcon to={docsPath("/triggering")} description="How to trigger a task" isExternal />
+        <LinkWithIcon to={docsPath("/cli-dev")} description="Running the CLI" isExternal />
+        <LinkWithIcon
+          to={docsPath("/how-it-works")}
+          description="How Trigger.dev works"
+          isExternal
+        />
+        <div className="mb-2 flex items-center gap-2 border-b border-grid-dimmed pb-2 pt-6">
+          <Header2 className="flex items-center gap-2">
+            <TaskIcon className="size-4 text-blue-500" />
+            Example tasks
+          </Header2>
+        </div>
+        <LinkWithIcon
+          to={docsPath("/examples/dall-e3-generate-image")}
+          description="DALL·E 3 image generation"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/deepgram-transcribe-audio")}
+          description="Deepgram audio transcription"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/fal-ai-image-to-cartoon")}
+          description="Fal.ai image to cartoon"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/fal-ai-realtime")}
+          description="Fal.ai with Realtime"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/ffmpeg-video-processing")}
+          description="FFmpeg video processing"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/firecrawl-url-crawl")}
+          description="Firecrawl URL crawl"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/libreoffice-pdf-conversion")}
+          description="LibreOffice PDF conversion"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/open-ai-with-retrying")}
+          description="OpenAI with retrying"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/pdf-to-image")}
+          description="PDF to image"
+          isExternal
+        />
+        <LinkWithIcon to={docsPath("/examples/puppeteer")} description="Puppeteer" isExternal />
+        <LinkWithIcon to={docsPath("/examples/react-pdf")} description="React to PDF" isExternal />
+        <LinkWithIcon
+          to={docsPath("/examples/resend-email-sequence")}
+          description="Resend email sequence"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/scrape-hacker-news")}
+          description="Scrape Hacker News"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/sentry-error-tracking")}
+          description="Sentry error tracking"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/sharp-image-processing")}
+          description="Sharp image processing"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/supabase-database-operations")}
+          description="Supabase database operations"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/supabase-storage-upload")}
+          description="Supabase Storage upload"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/vercel-ai-sdk")}
+          description="Vercel AI SDK"
+          isExternal
+        />
+        <LinkWithIcon
+          to={docsPath("/examples/vercel-sync-env-vars")}
+          description="Vercel sync environment variables"
+          isExternal
+        />
+      </div>
+      <Dialog open={isVideoDialogOpen} onOpenChange={setIsVideoDialogOpen}>
+        <DialogContent className="sm:max-w-screen-lg">
+          <DialogHeader className="mb-4 pt-1">
+            <DialogTitle>Trigger.dev walkthrough</DialogTitle>
+          </DialogHeader>
+          <div className="aspect-video">
+            <iframe
+              width="100%"
+              height="100%"
+              src="https://www.youtube.com/embed/YH_4c0K7fGM?si=BcX6MAt_V139sRw9"
+              title="Trigger.dev walkthrough"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+const variants = {
+  withIcon: {
+    container: "",
+    iconContainer:
+      "grid size-9 min-w-9 place-items-center rounded border border-transparent bg-charcoal-750 shadow transition group-hover:border-charcoal-650",
+  },
+  minimal: {
+    container: "pl-3 py-2",
+    iconContainer: "",
+  },
+} as const;
+
+type LinkWithIconProps = {
+  to: string;
+  description: string;
+  icon?: React.ReactNode;
+  isExternal?: boolean;
+  variant?: keyof typeof variants;
+};
+
+function LinkWithIcon({
+  to,
+  description,
+  icon,
+  isExternal,
+  variant = "minimal",
+}: LinkWithIconProps) {
+  const variation = variants[variant];
+
+  return (
+    <Link
+      to={to}
+      target={isExternal ? "_blank" : undefined}
+      rel={isExternal ? "noreferrer" : undefined}
+      className={cn(
+        "group flex w-full items-center justify-between gap-2 rounded-md p-1 pr-3 transition hover:bg-charcoal-750",
+        variation.container
+      )}
+    >
+      <div className="flex items-center gap-2">
+        {variant === "withIcon" && icon && <div className={variation.iconContainer}>{icon}</div>}
+        <Paragraph variant="base" className="transition-colors group-hover:text-text-bright">
+          {description}
+        </Paragraph>
+      </div>
+      <AnimatingArrow direction={isExternal ? "topRight" : "right"} theme="dimmed" />
+    </Link>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx

@@ -23,6 +23,7 @@ import { Label } from "~/components/primitives/Label";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { InfoIconTooltip } from "~/components/primitives/Tooltip";
+import { env } from "~/env.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -150,9 +151,13 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const option = url.searchParams.get("option");
 
+  const emailAlertsEnabled =
+    env.ALERT_FROM_EMAIL !== undefined && env.ALERT_RESEND_API_KEY !== undefined;
+
   return typedjson({
     ...results,
     option: option === "slack" ? ("SLACK" as const) : undefined,
+    emailAlertsEnabled,
   });
 }
 
@@ -200,7 +205,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
 export default function Page() {
   const [isOpen, setIsOpen] = useState(false);
-  const { slack, option } = useTypedLoaderData<typeof loader>();
+  const { slack, option, emailAlertsEnabled } = useTypedLoaderData<typeof loader>();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
   const navigate = useNavigate();
@@ -271,16 +276,23 @@ export default function Page() {
             </InputGroup>
 
             {currentAlertChannel === "EMAIL" ? (
-              <InputGroup fullWidth>
-                <Label>Email</Label>
-                <Input
-                  {...conform.input(channelValue)}
-                  placeholder="email@youremail.com"
-                  type="email"
-                  autoFocus
-                />
-                <FormError id={channelValue.errorId}>{channelValue.error}</FormError>
-              </InputGroup>
+              emailAlertsEnabled ? (
+                <InputGroup fullWidth>
+                  <Label>Email</Label>
+                  <Input
+                    {...conform.input(channelValue)}
+                    placeholder="email@youremail.com"
+                    type="email"
+                    autoFocus
+                  />
+                  <FormError id={channelValue.errorId}>{channelValue.error}</FormError>
+                </InputGroup>
+              ) : (
+                <Callout variant="warning">
+                  Email integration is not available. Please contact your organization
+                  administrator.
+                </Callout>
+              )
             ) : currentAlertChannel === "SLACK" ? (
               <InputGroup fullWidth>
                 {slack.status === "READY" ? (
@@ -416,28 +428,21 @@ export default function Page() {
               <FormError id={environmentTypes.errorId}>{environmentTypes.error}</FormError>
             </InputGroup>
             <FormError>{form.error}</FormError>
-            <div className="border-t border-grid-bright pt-3">
-              <FormButtons
-                confirmButton={
-                  <Button
-                    variant="primary/medium"
-                    disabled={isLoading}
-                    name="action"
-                    value="create"
-                  >
-                    {isLoading ? "Saving…" : "Save"}
-                  </Button>
-                }
-                cancelButton={
-                  <LinkButton
-                    to={v3ProjectAlertsPath(organization, project)}
-                    variant="tertiary/medium"
-                  >
-                    Cancel
-                  </LinkButton>
-                }
-              />
-            </div>
+            <FormButtons
+              confirmButton={
+                <Button variant="primary/medium" disabled={isLoading} name="action" value="create">
+                  {isLoading ? "Saving…" : "Save"}
+                </Button>
+              }
+              cancelButton={
+                <LinkButton
+                  to={v3ProjectAlertsPath(organization, project)}
+                  variant="tertiary/medium"
+                >
+                  Cancel
+                </LinkButton>
+              }
+            />
           </Fieldset>
         </Form>
       </DialogContent>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx

@@ -37,6 +37,7 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import {
+  SimpleTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -163,17 +164,17 @@ export default function Page() {
           <LinkButton
             LeadingIcon={BookOpenIcon}
             to={docsPath("v3/troubleshooting-alerts")}
-            variant="minimal/small"
+            variant="docs/small"
           >
             Alerts docs
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className={cn("flex h-full flex-col gap-3")}>
-          {alertChannels.length > 0 && !requiresUpgrade && (
-            <div className="flex items-end justify-between">
-              <Header2 className="">Project alerts</Header2>
+      <PageBody scrollable={false}>
+        <div className="grid max-h-full min-h-full grid-rows-[auto_1fr_auto]">
+          <div className="flex h-fit items-end justify-between p-2 pl-3">
+            <Header2 className="">Project alerts</Header2>
+            {alertChannels.length > 0 && !requiresUpgrade && (
               <LinkButton
                 to={v3NewProjectAlertPath(organization, project)}
                 variant="primary/small"
@@ -182,8 +183,8 @@ export default function Page() {
               >
                 New alert
               </LinkButton>
-            </div>
-          )}
+            )}
+          </div>
           <Table>
             <TableHeader>
               <TableRow>
@@ -225,20 +226,27 @@ export default function Page() {
                         disabledIcon={BellSlashIcon}
                       />
                     </TableCell>
-                    <TableCellMenu isSticky>
-                      {alertChannel.enabled ? (
-                        <DisableAlertChannelButton id={alertChannel.id} />
-                      ) : (
-                        <EnableAlertChannelButton id={alertChannel.id} />
-                      )}
-
-                      <DeleteAlertChannelButton id={alertChannel.id} />
-                    </TableCellMenu>
+                    <TableCellMenu
+                      isSticky
+                      popoverContent={
+                        <>
+                          {alertChannel.enabled ? (
+                            <DisableAlertChannelButton id={alertChannel.id} />
+                          ) : (
+                            <EnableAlertChannelButton id={alertChannel.id} />
+                          )}
+                          <DeleteAlertChannelButton id={alertChannel.id} />
+                        </>
+                      }
+                      className={
+                        alertChannel.enabled ? "" : "group-hover/table-row:bg-charcoal-800/50"
+                      }
+                    />
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={5}>
+                  <TableCell colSpan={6}>
                     <div className="flex flex-col items-center justify-center py-6">
                       <Header2 spacing className="text-text-bright">
                         You haven't created any project alerts yet
@@ -261,40 +269,55 @@ export default function Page() {
               )}
             </TableBody>
           </Table>
-          <div className="flex items-stretch gap-3">
-            {requiresUpgrade ? (
-              <InfoPanel
-                variant="upgrade"
-                icon={LockOpenIcon}
-                iconClassName="text-indigo-500"
-                title="Unlock more alerts"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
-              >
-                <Paragraph variant="small">
-                  You've used all {limits.limit} of your available alerts. Upgrade your plan to
-                  enable more.
-                </Paragraph>
-              </InfoPanel>
-            ) : (
-              <div className="flex h-fit flex-col items-start gap-4 rounded-md border border-grid-bright bg-background-bright p-4">
-                <div className="flex items-center justify-between gap-6">
-                  <Header3>
-                    You've used {limits.used}/{limits.limit} of your alerts.
-                  </Header3>
+          <div className="flex h-fit items-stretch gap-3">
+            <div className="flex w-full items-start justify-between">
+              <div className="flex h-fit w-full items-center gap-4 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
+                <SimpleTooltip
+                  button={
+                    <div className="size-6">
+                      <svg className="h-full w-full -rotate-90 overflow-visible">
+                        <circle
+                          className="fill-none stroke-grid-bright"
+                          strokeWidth="4"
+                          r="10"
+                          cx="12"
+                          cy="12"
+                        />
+                        <circle
+                          className={`fill-none ${
+                            requiresUpgrade ? "stroke-error" : "stroke-success"
+                          }`}
+                          strokeWidth="4"
+                          r="10"
+                          cx="12"
+                          cy="12"
+                          strokeDasharray={`${(limits.used / limits.limit) * 62.8} 62.8`}
+                          strokeDashoffset="0"
+                          strokeLinecap="round"
+                        />
+                      </svg>
+                    </div>
+                  }
+                  content={`${Math.round((limits.used / limits.limit) * 100)}%`}
+                />
+                <div className="flex w-full items-center justify-between gap-6">
+                  {requiresUpgrade ? (
+                    <Header3 className="text-error">
+                      You've used all {limits.limit} of your available alerts. Upgrade your plan to
+                      enable more.
+                    </Header3>
+                  ) : (
+                    <Header3>
+                      You've used {limits.used}/{limits.limit} of your alerts.
+                    </Header3>
+                  )}
 
                   <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
                     Upgrade
                   </LinkButton>
                 </div>
-                <div className="h-2 w-full overflow-hidden rounded-full border border-grid-bright">
-                  <div
-                    className="h-full bg-grid-bright"
-                    style={{ width: `${(limits.used / limits.limit) * 100}%` }}
-                  />
-                </div>
               </div>
-            )}
+            </div>
           </div>
         </div>
         <Outlet />
@@ -328,6 +351,8 @@ function DeleteAlertChannelButton(props: { id: string }) {
       <Button
         name="action"
         value="delete"
+        fullWidth
+        textAlignLeft
         type="submit"
         variant="small-menu-item"
         LeadingIcon={TrashIcon}
@@ -367,6 +392,8 @@ function DisableAlertChannelButton(props: { id: string }) {
         name="action"
         value="disable"
         type="submit"
+        fullWidth
+        textAlignLeft
         variant="small-menu-item"
         LeadingIcon={BellSlashIcon}
         leadingIconClassName="text-dimmed"
@@ -405,6 +432,8 @@ function EnableAlertChannelButton(props: { id: string }) {
         name="action"
         value="enable"
         type="submit"
+        fullWidth
+        textAlignLeft
         variant="small-menu-item"
         LeadingIcon={BellAlertIcon}
         leadingIconClassName="text-success"
@@ -430,6 +459,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           leadingIconClassName="text-charcoal-400"
           label={"Email"}
           description={alertChannel.properties.email}
+          boxClassName="group-hover/table-row:bg-charcoal-800"
         />
       );
     }
@@ -461,6 +491,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
               className="mt-1 w-80"
             />
           }
+          boxClassName="group-hover/table-row:bg-charcoal-800"
         />
       );
     }
@@ -476,6 +507,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           leadingIconClassName="text-charcoal-400"
           label={"Slack"}
           description={`#${alertChannel.properties.channelName}`}
+          boxClassName="group-hover/table-row:bg-charcoal-800"
         />
       );
     }

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

@@ -1,4 +1,5 @@
 import { BookOpenIcon, InformationCircleIcon, LockOpenIcon } from "@heroicons/react/20/solid";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
@@ -72,7 +73,7 @@ export default function Page() {
           </AdminDebugTooltip>
 
           <LinkButton
-            variant={"minimal/small"}
+            variant={"docs/small"}
             LeadingIcon={BookOpenIcon}
             to={docsPath("/v3/apikeys")}
           >
@@ -80,9 +81,9 @@ export default function Page() {
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className="mt-1 flex flex-col gap-4">
-          <Table>
+      <PageBody scrollable={false}>
+        <div className="flex flex-col">
+          <Table containerClassName="border-t-0">
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Environment</TableHeaderCell>
@@ -104,7 +105,7 @@ export default function Page() {
                       className="w-full max-w-none"
                       secure={`tr_${environment.apiKey.split("_")[1]}_••••••••`}
                       value={environment.apiKey}
-                      variant={"tertiary/small"}
+                      variant={"secondary/small"}
                     />
                   </TableCell>
                   <TableCell>
@@ -112,19 +113,22 @@ export default function Page() {
                   </TableCell>
                   <TableCell>{environment.latestVersion ?? "–"}</TableCell>
                   <TableCell>{environment.environmentVariableCount}</TableCell>
-                  <TableCellMenu isSticky>
-                    <RegenerateApiKeyModal
-                      id={environment.id}
-                      title={environmentTitle(environment)}
-                    />
-                  </TableCellMenu>
+                  <TableCellMenu
+                    isSticky
+                    popoverContent={
+                      <RegenerateApiKeyModal
+                        id={environment.id}
+                        title={environmentTitle(environment)}
+                      />
+                    }
+                  ></TableCellMenu>
                 </TableRow>
               ))}
             </TableBody>
           </Table>
 
-          <div className="flex gap-3">
-            <InfoPanel icon={InformationCircleIcon} panelClassName="max-w-sm">
+          <div className="flex flex-wrap justify-between">
+            <InfoPanel icon={InformationCircleIcon} variant="minimal" panelClassName="max-w-fit">
               <Paragraph variant="small">
                 Secret keys should be used on your server. They give full API access and allow you
                 to <TextLink to={docsPath("v3/triggering")}>trigger tasks</TextLink> from your
@@ -133,16 +137,19 @@ export default function Page() {
             </InfoPanel>
 
             {!hasStaging && (
-              <InfoPanel
-                icon={LockOpenIcon}
-                variant="upgrade"
-                title="Unlock a Staging environment"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
-                iconClassName="text-indigo-500"
-              >
-                Upgrade your plan to add a Staging environment.
-              </InfoPanel>
+              <div className="flex items-center gap-2 pl-3 pr-2">
+                <LockOpenIcon className="size-5 min-w-5 text-indigo-500" />
+                <Paragraph variant="small" className="text-text-bright">
+                  Upgrade to add a Staging environment
+                </Paragraph>
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                >
+                  Upgrade
+                </LinkButton>
+              </div>
             )}
           </div>
         </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx

@@ -0,0 +1,296 @@
+import {
+  ArrowPathRoundedSquareIcon,
+  ArrowRightIcon,
+  ExclamationCircleIcon,
+} from "@heroicons/react/20/solid";
+import { BookOpenIcon } from "@heroicons/react/24/solid";
+import { useLocation, useNavigation } from "@remix-run/react";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { formatDuration } from "@trigger.dev/core/v3/utils/durations";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { ListPagination } from "~/components/ListPagination";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { DateTime } from "~/components/primitives/DateTime";
+import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
+import { Spinner } from "~/components/primitives/Spinner";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableCellMenu,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "~/components/primitives/Table";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { BatchFilters, BatchListFilters } from "~/components/runs/v3/BatchFilters";
+import {
+  allBatchStatuses,
+  BatchStatusCombo,
+  descriptionForBatchStatus,
+} from "~/components/runs/v3/BatchStatus";
+import { CheckBatchCompletionDialog } from "~/components/runs/v3/CheckBatchCompletionDialog";
+import { LiveTimer } from "~/components/runs/v3/LiveTimer";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { redirectWithErrorMessage } from "~/models/message.server";
+import { findProjectBySlug } from "~/models/project.server";
+import {
+  BatchList,
+  BatchListItem,
+  BatchListPresenter,
+} from "~/presenters/v3/BatchListPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { docsPath, ProjectParamSchema, v3BatchRunsPath } from "~/utils/pathBuilder";
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { projectParam, organizationSlug } = ProjectParamSchema.parse(params);
+
+  const url = new URL(request.url);
+  const s = {
+    cursor: url.searchParams.get("cursor") ?? undefined,
+    direction: url.searchParams.get("direction") ?? undefined,
+    environments: url.searchParams.getAll("environments"),
+    statuses: url.searchParams.getAll("statuses"),
+    period: url.searchParams.get("period") ?? undefined,
+    from: url.searchParams.get("from") ?? undefined,
+    to: url.searchParams.get("to") ?? undefined,
+    id: url.searchParams.get("id") ?? undefined,
+  };
+  const filters = BatchListFilters.parse(s);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+
+  if (!project) {
+    return redirectWithErrorMessage("/", request, "Project not found");
+  }
+
+  const presenter = new BatchListPresenter();
+  const list = await presenter.call({
+    userId,
+    projectId: project.id,
+    ...filters,
+    friendlyId: filters.id,
+  });
+
+  return typedjson(list);
+};
+
+export default function Page() {
+  const { batches, hasFilters, filters, pagination } = useTypedLoaderData<typeof loader>();
+  const project = useProject();
+
+  return (
+    <PageContainer>
+      <NavBar>
+        <PageTitle title="Batches" />
+        <PageAccessories>
+          <AdminDebugTooltip />
+
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/triggering")}
+          >
+            Batches docs
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
+      <PageBody scrollable={false}>
+        <div className="grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden">
+          <div className="flex items-start justify-between gap-x-2 p-2">
+            <BatchFilters possibleEnvironments={project.environments} hasFilters={hasFilters} />
+            <div className="flex items-center justify-end gap-x-2">
+              <ListPagination list={{ pagination }} />
+            </div>
+          </div>
+
+          <BatchesTable
+            batches={batches}
+            filters={filters}
+            hasFilters={hasFilters}
+            pagination={pagination}
+          />
+        </div>
+      </PageBody>
+    </PageContainer>
+  );
+}
+
+function BatchesTable({ batches, hasFilters, filters }: BatchList) {
+  const navigation = useNavigation();
+  const isLoading = navigation.state !== "idle";
+  const organization = useOrganization();
+  const project = useProject();
+
+  return (
+    <Table className="max-h-full overflow-y-auto">
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>ID</TableHeaderCell>
+          <TableHeaderCell>Env</TableHeaderCell>
+          <TableHeaderCell
+            tooltip={
+              <div className="flex flex-col divide-y divide-grid-dimmed">
+                {allBatchStatuses.map((status) => (
+                  <div
+                    key={status}
+                    className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
+                  >
+                    <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
+                      <BatchStatusCombo status={status} />
+                    </div>
+                    <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                      {descriptionForBatchStatus(status)}
+                    </Paragraph>
+                  </div>
+                ))}
+              </div>
+            }
+          >
+            Status
+          </TableHeaderCell>
+          <TableHeaderCell>Runs</TableHeaderCell>
+          <TableHeaderCell>Duration</TableHeaderCell>
+          <TableHeaderCell>Created</TableHeaderCell>
+          <TableHeaderCell>Finished</TableHeaderCell>
+          <TableHeaderCell>
+            <span className="sr-only">Go to batch</span>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {batches.length === 0 && !hasFilters ? (
+          <TableBlankRow colSpan={8}>
+            {!isLoading && (
+              <div className="flex items-center justify-center">
+                <Paragraph className="w-auto">No batches</Paragraph>
+              </div>
+            )}
+          </TableBlankRow>
+        ) : batches.length === 0 ? (
+          <TableBlankRow colSpan={8}>
+            <div className="flex items-center justify-center">
+              <Paragraph className="w-auto">No batches match these filters</Paragraph>
+            </div>
+          </TableBlankRow>
+        ) : (
+          batches.map((batch, index) => {
+            const path = v3BatchRunsPath(organization, project, batch);
+            return (
+              <TableRow key={batch.id}>
+                <TableCell to={path}>{batch.friendlyId}</TableCell>
+                <TableCell to={path}>
+                  <EnvironmentLabel
+                    environment={batch.environment}
+                    userName={batch.environment.userName}
+                  />
+                </TableCell>
+                <TableCell to={path}>
+                  {batch.batchVersion === "v1" ? (
+                    <SimpleTooltip
+                      content="Upgrade to the latest SDK for batch statuses to appear."
+                      disableHoverableContent
+                      button={
+                        <span className="flex items-center gap-1">
+                          <ExclamationCircleIcon className="size-4 text-slate-500" />
+                          <span>Legacy batch</span>
+                        </span>
+                      }
+                    />
+                  ) : (
+                    <SimpleTooltip
+                      content={descriptionForBatchStatus(batch.status)}
+                      disableHoverableContent
+                      button={<BatchStatusCombo status={batch.status} />}
+                    />
+                  )}
+                </TableCell>
+                <TableCell to={path}>{batch.runCount}</TableCell>
+                <TableCell to={path} className="w-[1%]" actionClassName="pr-0 tabular-nums">
+                  {batch.finishedAt ? (
+                    formatDuration(new Date(batch.createdAt), new Date(batch.finishedAt), {
+                      style: "short",
+                    })
+                  ) : (
+                    <LiveTimer startTime={new Date(batch.createdAt)} />
+                  )}
+                </TableCell>
+                <TableCell to={path}>
+                  <DateTime date={batch.createdAt} />
+                </TableCell>
+                <TableCell to={path}>
+                  {batch.finishedAt ? <DateTime date={batch.finishedAt} /> : "–"}
+                </TableCell>
+                <BatchActionsCell batch={batch} path={path} />
+              </TableRow>
+            );
+          })
+        )}
+        {isLoading && (
+          <TableBlankRow
+            colSpan={8}
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-charcoal-900/90"
+          >
+            <Spinner /> <span className="text-text-dimmed">Loading…</span>
+          </TableBlankRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+
+function BatchActionsCell({ batch, path }: { batch: BatchListItem; path: string }) {
+  const location = useLocation();
+
+  if (batch.hasFinished || batch.environment.type === "DEVELOPMENT") {
+    return <TableCell to={path}>{""}</TableCell>;
+  }
+
+  return (
+    <TableCellMenu
+      isSticky
+      popoverContent={
+        <>
+          <PopoverMenuItem
+            to={path}
+            icon={ArrowRightIcon}
+            leadingIconClassName="text-blue-500"
+            title="View batch"
+          />
+          {!batch.hasFinished && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowPathRoundedSquareIcon}
+                  leadingIconClassName="text-success"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Try and resume
+                </Button>
+              </DialogTrigger>
+              <CheckBatchCompletionDialog
+                batchId={batch.id}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+        </>
+      }
+    />
+  );
+}

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

@@ -1,4 +1,8 @@
-import { ArrowUpCircleIcon, BookOpenIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowUpCircleIcon,
+  BookOpenIcon,
+  ChatBubbleLeftEllipsisIcon,
+} from "@heroicons/react/20/solid";
 import { Await } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { Suspense } from "react";
@@ -27,6 +31,8 @@ import {
 import { requireUserId } from "~/services/session.server";
 import { docsPath, ProjectParamSchema, v3BillingPath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { LockOpenIcon } from "@heroicons/react/24/solid";
+import { Paragraph } from "~/components/primitives/Paragraph";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -62,7 +68,7 @@ export default function Page() {
         <PageAccessories>
           <AdminDebugTooltip />
           <LinkButton
-            variant={"minimal/small"}
+            variant={"docs/small"}
             LeadingIcon={BookOpenIcon}
             to={docsPath("/queue-concurrency")}
           >
@@ -70,50 +76,56 @@ export default function Page() {
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className="flex flex-col gap-4">
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <Header2>Environments</Header2>
-              {plan ? (
-                plan?.v3Subscription?.plan?.limits.concurrentRuns.canExceed ? (
-                  <Feedback
-                    button={
-                      <Button LeadingIcon={ArrowUpCircleIcon} variant="tertiary/small">
-                        Request more concurrency
-                      </Button>
-                    }
-                    defaultValue="help"
-                  />
-                ) : (
-                  <LinkButton
-                    LeadingIcon={ArrowUpCircleIcon}
-                    to={v3BillingPath(organization)}
-                    variant="tertiary/small"
-                  >
-                    Upgrade for more concurrency
-                  </LinkButton>
-                )
-              ) : null}
-            </div>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHeaderCell>Environment</TableHeaderCell>
-                  <TableHeaderCell alignment="right">Queued</TableHeaderCell>
-                  <TableHeaderCell alignment="right">Running</TableHeaderCell>
-                  <TableHeaderCell alignment="right">Concurrency limit</TableHeaderCell>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <Suspense fallback={<Spinner />}>
-                  <Await resolve={environments} errorElement={<p>Error loading environments</p>}>
-                    {(environments) => <EnvironmentsTable environments={environments} />}
-                  </Await>
-                </Suspense>
-              </TableBody>
-            </Table>
-          </div>
+      <PageBody scrollable={false}>
+        <div className="flex flex-col">
+          <Table containerClassName="border-t-0">
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Environment</TableHeaderCell>
+                <TableHeaderCell alignment="right">Queued</TableHeaderCell>
+                <TableHeaderCell alignment="right">Running</TableHeaderCell>
+                <TableHeaderCell alignment="right">Concurrency limit</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <Suspense fallback={<Spinner />}>
+                <Await resolve={environments} errorElement={<p>Error loading environments</p>}>
+                  {(environments) => <EnvironmentsTable environments={environments} />}
+                </Await>
+              </Suspense>
+            </TableBody>
+          </Table>
+          {plan ? (
+            plan?.v3Subscription?.plan?.limits.concurrentRuns.canExceed ? (
+              <div className="flex w-full items-center justify-end gap-2 pl-3 pr-2 pt-3">
+                <Paragraph variant="small" className="text-text-bright">
+                  Need more concurrency?
+                </Paragraph>
+                <Feedback
+                  button={
+                    <Button LeadingIcon={ChatBubbleLeftEllipsisIcon} variant="tertiary/small">
+                      Request more
+                    </Button>
+                  }
+                  defaultValue="help"
+                />
+              </div>
+            ) : (
+              <div className="flex w-full items-center justify-end gap-2 pl-3 pr-2 pt-3">
+                <LockOpenIcon className="size-5 min-w-5 text-indigo-500" />
+                <Paragraph variant="small" className="text-text-bright">
+                  Upgrade for more concurrency
+                </Paragraph>
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                >
+                  Upgrade
+                </LinkButton>
+              </div>
+            )
+          ) : null}
         </div>
       </PageBody>
     </PageContainer>

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

@@ -151,6 +151,10 @@ export default function Page() {
               <Property.Label>SDK Version</Property.Label>
               <Property.Value>{deployment.sdkVersion ? deployment.sdkVersion : "–"}</Property.Value>
             </Property.Item>
+            <Property.Item>
+              <Property.Label>CLI Version</Property.Label>
+              <Property.Value>{deployment.cliVersion ? deployment.cliVersion : "–"}</Property.Value>
+            </Property.Item>
             <Property.Item>
               <Property.Label>Started at</Property.Label>
               <Property.Value>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx

@@ -16,7 +16,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
@@ -46,6 +46,7 @@ import {
   DeploymentListPresenter,
 } from "~/presenters/v3/DeploymentListPresenter.server";
 import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
 import {
   ProjectParamSchema,
   docsPath,
@@ -98,111 +99,122 @@ export default function Page() {
     <PageContainer>
       <NavBar>
         <PageTitle title="Deployments" />
+        <PageAccessories>
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/cli-deploy")}
+          >
+            Deployments docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
         <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
-          <ResizablePanel id="deployments-main" min="100px" className="max-h-full overflow-y-auto">
+          <ResizablePanel id="deployments-main" min="100px" className="max-h-full">
             {hasDeployments ? (
-              <div className="max-h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                <div className="flex flex-col gap-4 p-3">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHeaderCell>Deploy</TableHeaderCell>
-                        <TableHeaderCell>Env</TableHeaderCell>
-                        <TableHeaderCell>Version</TableHeaderCell>
-                        <TableHeaderCell>Status</TableHeaderCell>
-                        <TableHeaderCell>Tasks</TableHeaderCell>
-                        <TableHeaderCell>Deployed at</TableHeaderCell>
-                        <TableHeaderCell>Deployed by</TableHeaderCell>
-                        <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {deployments.length > 0 ? (
-                        deployments.map((deployment) => {
-                          const usernameForEnv =
-                            user.id !== deployment.environment.userId
-                              ? deployment.environment.userName
-                              : undefined;
-                          const path = v3DeploymentPath(
-                            organization,
-                            project,
-                            deployment,
-                            currentPage
-                          );
-                          return (
-                            <TableRow key={deployment.id} className="group">
-                              <TableCell to={path}>
-                                <div className="flex items-center gap-2">
+              <div className="grid max-h-full grid-rows-[1fr_auto]">
+                <Table containerClassName="border-t-0">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHeaderCell>Deploy</TableHeaderCell>
+                      <TableHeaderCell>Env</TableHeaderCell>
+                      <TableHeaderCell>Version</TableHeaderCell>
+                      <TableHeaderCell>Status</TableHeaderCell>
+                      <TableHeaderCell>Tasks</TableHeaderCell>
+                      <TableHeaderCell>Deployed at</TableHeaderCell>
+                      <TableHeaderCell>Deployed by</TableHeaderCell>
+                      <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {deployments.length > 0 ? (
+                      deployments.map((deployment) => {
+                        const usernameForEnv =
+                          user.id !== deployment.environment.userId
+                            ? deployment.environment.userName
+                            : undefined;
+                        const path = v3DeploymentPath(
+                          organization,
+                          project,
+                          deployment,
+                          currentPage
+                        );
+                        const isSelected = deploymentParam === deployment.shortCode;
+                        return (
+                          <TableRow
+                            key={deployment.id}
+                            className={cn("group", isSelected ? "bg-grid-dimmed" : undefined)}
+                          >
+                            <TableCell to={path}>
+                              <div className="flex items-center gap-2">
+                                <Paragraph variant="extra-small">{deployment.shortCode}</Paragraph>
+                                {deployment.label && (
+                                  <Badge variant="outline-rounded">{deployment.label}</Badge>
+                                )}
+                              </div>
+                            </TableCell>
+                            <TableCell to={path}>
+                              <EnvironmentLabel
+                                environment={deployment.environment}
+                                userName={usernameForEnv}
+                              />
+                            </TableCell>
+                            <TableCell to={path}>{deployment.version}</TableCell>
+                            <TableCell to={path}>
+                              <DeploymentStatus
+                                status={deployment.status}
+                                isBuilt={deployment.isBuilt}
+                              />
+                            </TableCell>
+                            <TableCell to={path}>
+                              {deployment.tasksCount !== null ? deployment.tasksCount : "–"}
+                            </TableCell>
+                            <TableCell to={path}>
+                              {deployment.deployedAt ? (
+                                <DateTime date={deployment.deployedAt} />
+                              ) : (
+                                "–"
+                              )}
+                            </TableCell>
+                            <TableCell to={path}>
+                              {deployment.deployedBy ? (
+                                <div className="flex items-center gap-1">
+                                  <UserAvatar
+                                    avatarUrl={deployment.deployedBy.avatarUrl}
+                                    name={
+                                      deployment.deployedBy.name ??
+                                      deployment.deployedBy.displayName
+                                    }
+                                    className="h-4 w-4"
+                                  />
                                   <Paragraph variant="extra-small">
-                                    {deployment.shortCode}
+                                    {deployment.deployedBy.name ??
+                                      deployment.deployedBy.displayName}
                                   </Paragraph>
-                                  {deployment.label && (
-                                    <Badge variant="outline-rounded">{deployment.label}</Badge>
-                                  )}
                                 </div>
-                              </TableCell>
-                              <TableCell to={path}>
-                                <EnvironmentLabel
-                                  environment={deployment.environment}
-                                  userName={usernameForEnv}
-                                />
-                              </TableCell>
-                              <TableCell to={path}>{deployment.version}</TableCell>
-                              <TableCell to={path}>
-                                <DeploymentStatus
-                                  status={deployment.status}
-                                  isBuilt={deployment.isBuilt}
-                                />
-                              </TableCell>
-                              <TableCell to={path}>
-                                {deployment.tasksCount !== null ? deployment.tasksCount : "–"}
-                              </TableCell>
-                              <TableCell to={path}>
-                                {deployment.deployedAt ? (
-                                  <DateTime date={deployment.deployedAt} />
-                                ) : (
-                                  "–"
-                                )}
-                              </TableCell>
-                              <TableCell to={path}>
-                                {deployment.deployedBy ? (
-                                  <div className="flex items-center gap-1">
-                                    <UserAvatar
-                                      avatarUrl={deployment.deployedBy.avatarUrl}
-                                      name={
-                                        deployment.deployedBy.name ??
-                                        deployment.deployedBy.displayName
-                                      }
-                                      className="h-4 w-4"
-                                    />
-                                    <Paragraph variant="extra-small">
-                                      {deployment.deployedBy.name ??
-                                        deployment.deployedBy.displayName}
-                                    </Paragraph>
-                                  </div>
-                                ) : (
-                                  "–"
-                                )}
-                              </TableCell>
-                              <DeploymentActionsCell deployment={deployment} path={path} />
-                            </TableRow>
-                          );
-                        })
-                      ) : (
-                        <TableBlankRow colSpan={6}>
-                          <Paragraph variant="small" className="flex items-center justify-center">
-                            No deploys match your filters
-                          </Paragraph>
-                        </TableBlankRow>
-                      )}
-                    </TableBody>
-                  </Table>
-                  <div className="flex justify-end">
+                              ) : (
+                                "–"
+                              )}
+                            </TableCell>
+                            <DeploymentActionsCell deployment={deployment} path={path} />
+                          </TableRow>
+                        );
+                      })
+                    ) : (
+                      <TableBlankRow colSpan={8}>
+                        <Paragraph className="flex items-center justify-center">
+                          No deploys match your filters
+                        </Paragraph>
+                      </TableBlankRow>
+                    )}
+                  </TableBody>
+                </Table>
+                {totalPages > 1 && (
+                  <div className="-mt-px flex justify-end border-t border-grid-dimmed py-2 pr-2">
                     <PaginationControls currentPage={currentPage} totalPages={totalPages} />
                   </div>
-                </div>
+                )}
               </div>
             ) : (
               <CreateDeploymentInstructions />
@@ -212,7 +224,7 @@ export default function Page() {
           {deploymentParam && (
             <>
               <ResizableHandle id="deployments-handle" />
-              <ResizablePanel id="deployments-inspector" min="225px" max="500px">
+              <ResizablePanel id="deployments-inspector" min="400px" max="700px">
                 <Outlet />
               </ResizablePanel>
             </>
@@ -231,7 +243,7 @@ function CreateDeploymentInstructions() {
     <MainCenteredContainer className="max-w-md">
       <InfoPanel
         icon={ServerStackIcon}
-        iconClassName="text-blue-400"
+        iconClassName="text-blue-500"
         title="Deploy for the first time"
         panelClassName="max-w-full"
       >
@@ -247,7 +259,7 @@ function CreateDeploymentInstructions() {
         <div className="flex gap-3">
           <LinkButton
             to={docsPath("v3/cli-deploy")}
-            variant="tertiary/small"
+            variant="docs/medium"
             LeadingIcon={BookOpenIcon}
             className="inline-flex"
           >
@@ -255,7 +267,7 @@ function CreateDeploymentInstructions() {
           </LinkButton>
           <LinkButton
             to={docsPath("v3/github-actions")}
-            variant="tertiary/small"
+            variant="docs/medium"
             LeadingIcon={BookOpenIcon}
             className="inline-flex"
           >
@@ -285,35 +297,52 @@ function DeploymentActionsCell({
   }
 
   return (
-    <TableCellMenu isSticky>
-      {canRollback && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={ArrowUturnLeftIcon}>
-              Rollback
-            </Button>
-          </DialogTrigger>
-          <RollbackDeploymentDialog
-            projectId={project.id}
-            deploymentShortCode={deployment.shortCode}
-            redirectPath={`${location.pathname}${location.search}`}
-          />
-        </Dialog>
-      )}
-      {canRetryIndexing && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={ArrowPathIcon}>
-              Retry indexing
-            </Button>
-          </DialogTrigger>
-          <RetryDeploymentIndexingDialog
-            projectId={project.id}
-            deploymentShortCode={deployment.shortCode}
-            redirectPath={`${location.pathname}${location.search}`}
-          />
-        </Dialog>
-      )}
-    </TableCellMenu>
+    <TableCellMenu
+      isSticky
+      popoverContent={
+        <>
+          {canRollback && (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowUturnLeftIcon}
+                  leadingIconClassName="text-blue-500"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Rollback…
+                </Button>
+              </DialogTrigger>
+              <RollbackDeploymentDialog
+                projectId={project.id}
+                deploymentShortCode={deployment.shortCode}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+          {canRetryIndexing && (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowPathIcon}
+                  leadingIconClassName="text-blue-500"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Retry indexing…
+                </Button>
+              </DialogTrigger>
+              <RetryDeploymentIndexingDialog
+                projectId={project.id}
+                deploymentShortCode={deployment.shortCode}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+        </>
+      }
+    />
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx

@@ -311,7 +311,6 @@ export default function Page() {
                   Cancel
                 </LinkButton>
               }
-              className="mt-2"
             />
           </Fieldset>
         </Form>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx

@@ -8,6 +8,7 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/20/solid";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Form, Outlet, useActionData, useNavigation } from "@remix-run/react";
 import {
   ActionFunctionArgs,
@@ -28,6 +29,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
+import { Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -184,33 +186,33 @@ export default function Page() {
           <LinkButton
             LeadingIcon={BookOpenIcon}
             to={docsPath("v3/deploy-environment-variables")}
-            variant="minimal/small"
+            variant="docs/small"
           >
             Environment variables docs
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className={cn("flex h-full flex-col gap-3")}>
-          <div className="flex items-center justify-end gap-2">
-            {environmentVariables.length > 0 && (
+      <PageBody scrollable={false}>
+        <div className={cn("flex h-full flex-col")}>
+          {environmentVariables.length > 0 && (
+            <div className="flex items-center justify-end gap-2 px-2 py-2">
               <Switch
                 variant="small"
                 label="Reveal values"
                 checked={revealAll}
                 onCheckedChange={(e) => setRevealAll(e.valueOf())}
               />
-            )}
-            <LinkButton
-              to={v3NewEnvironmentVariablesPath(organization, project)}
-              variant="primary/small"
-              LeadingIcon={PlusIcon}
-              shortcut={{ key: "n" }}
-            >
-              Add new
-            </LinkButton>
-          </div>
-          <Table>
+              <LinkButton
+                to={v3NewEnvironmentVariablesPath(organization, project)}
+                variant="primary/small"
+                LeadingIcon={PlusIcon}
+                shortcut={{ key: "n" }}
+              >
+                Add new
+              </LinkButton>
+            </div>
+          )}
+          <Table containerClassName={cn(environmentVariables.length === 0 && "border-t-0")}>
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Key</TableHeaderCell>
@@ -239,26 +241,39 @@ export default function Page() {
                             className="-ml-2"
                             secure={!revealAll}
                             value={value}
-                            variant={"tertiary/small"}
+                            variant={"secondary/small"}
                           />
                         </TableCell>
                       );
                     })}
-                    <TableCellMenu isSticky>
-                      <EditEnvironmentVariablePanel
-                        environments={environments}
-                        variable={variable}
-                        revealAll={revealAll}
-                      />
-                      <DeleteEnvironmentVariableButton variable={variable} />
-                    </TableCellMenu>
+                    <TableCellMenu
+                      isSticky
+                      popoverContent={
+                        <>
+                          <EditEnvironmentVariablePanel
+                            environments={environments}
+                            variable={variable}
+                            revealAll={revealAll}
+                          />
+                          <DeleteEnvironmentVariableButton variable={variable} />
+                        </>
+                      }
+                    ></TableCellMenu>
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
                   <TableCell colSpan={environments.length + 2}>
-                    <div className="flex items-center justify-center">
-                      <Paragraph>No environment variables have been set</Paragraph>
+                    <div className="flex flex-col items-center justify-center gap-y-4 py-8">
+                      <Header2>You haven't set any environment variables yet.</Header2>
+                      <LinkButton
+                        to={v3NewEnvironmentVariablesPath(organization, project)}
+                        variant="primary/medium"
+                        LeadingIcon={PlusIcon}
+                        shortcut={{ key: "n" }}
+                      >
+                        Add new
+                      </LinkButton>
                     </div>
                   </TableCell>
                 </TableRow>
@@ -266,22 +281,25 @@ export default function Page() {
             </TableBody>
           </Table>
 
-          <div className="flex gap-3">
-            <InfoPanel icon={InformationCircleIcon} panelClassName="max-w-[22rem]">
+          <div className="z-10 -mt-px flex w-full flex-wrap justify-between border-t border-grid-dimmed">
+            <InfoPanel icon={InformationCircleIcon} variant="minimal" panelClassName="max-w-fit">
               Dev environment variables specified here will be overridden by ones in your .env file
               when running locally.
             </InfoPanel>
             {!hasStaging && (
-              <InfoPanel
-                icon={LockOpenIcon}
-                variant="upgrade"
-                title="Unlock a Staging environment"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
-                iconClassName="text-indigo-500"
-              >
-                Upgrade your plan to add a Staging environment.
-              </InfoPanel>
+              <div className="flex items-center gap-2 pl-3 pr-2">
+                <LockOpenIcon className="size-5 min-w-5 text-indigo-500" />
+                <Paragraph variant="small" className="text-text-bright">
+                  Upgrade to add a Staging environment
+                </Paragraph>
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                >
+                  Upgrade
+                </LinkButton>
+              </div>
             )}
           </div>
         </div>
@@ -328,14 +346,7 @@ function EditEnvironmentVariablePanel({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button
-          variant="small-menu-item"
-          LeadingIcon={PencilSquareIcon}
-          leadingIconClassName="text-charcoal-500"
-          className="text-xs"
-          fullWidth
-          textAlignLeft
-        >
+        <Button variant="small-menu-item" LeadingIcon={PencilSquareIcon} fullWidth textAlignLeft>
           Edit
         </Button>
       </DialogTrigger>
@@ -457,9 +468,11 @@ function DeleteEnvironmentVariableButton({
         value="delete"
         type="submit"
         variant="small-menu-item"
+        fullWidth
+        textAlignLeft
         LeadingIcon={TrashIcon}
-        leadingIconClassName="text-rose-500"
-        className="text-xs"
+        leadingIconClassName="text-rose-500 group-hover/button:text-text-bright transition-colors"
+        className="transition-colors group-hover/button:bg-error"
       >
         {isLoading ? "Deleting" : "Delete"}
       </Button>

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

@@ -1,6 +1,7 @@
 import {
   ArrowUturnLeftIcon,
   BoltSlashIcon,
+  BookOpenIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   InformationCircleIcon,
@@ -70,6 +71,7 @@ import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { lerp } from "~/utils/lerp";
 import {
+  docsPath,
   v3BillingPath,
   v3RunParamsSchema,
   v3RunPath,
@@ -193,6 +195,9 @@ export default function Page() {
               </Property.Item>
             </Property.Table>
           </AdminDebugTooltip>
+          <LinkButton variant={"docs/small"} LeadingIcon={BookOpenIcon} to={docsPath("/runs")}>
+            Run docs
+          </LinkButton>
           <Dialog key={`replay-${run.friendlyId}`}>
             <DialogTrigger asChild>
               <Button
@@ -501,16 +506,14 @@ function TasksTreeView({
 
   return (
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
-      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
+      <div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-2">
         <SearchField onChange={setFilterText} />
-        <div className="flex items-center gap-2">
-          <Switch
-            variant="small"
-            label="Errors only"
-            checked={errorsOnly}
-            onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
-          />
-        </div>
+        <Switch
+          variant="small"
+          label="Errors only"
+          checked={errorsOnly}
+          onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
+        />
       </div>
       <ResizablePanelGroup autosaveId={resizableSettings.tree.autosaveId}>
         {/* Tree list */}
@@ -1008,7 +1011,7 @@ function ShowParentLink({
       {mouseOver ? (
         <ShowParentIconSelected className="h-4 w-4 text-indigo-500" />
       ) : (
-        <ShowParentIcon className="text-charcoal-650 h-4 w-4" />
+        <ShowParentIcon className="h-4 w-4 text-charcoal-650" />
       )}
       <Paragraph
         variant="small"

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

@@ -21,7 +21,7 @@ import {
 } from "~/components/primitives/Dialog";
 import { Header1, Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   SelectedItemsProvider,
@@ -35,12 +35,22 @@ import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
 import { BULK_ACTION_RUN_LIMIT } from "~/consts";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useUser } from "~/hooks/useUser";
 import { findProjectBySlug } from "~/models/project.server";
 import { RunListPresenter } from "~/presenters/v3/RunListPresenter.server";
+import {
+  getRootOnlyFilterPreference,
+  setRootOnlyFilterPreference,
+  uiPreferencesStorage,
+} from "~/services/preferences/uiPreferences.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { ProjectParamSchema, v3ProjectPath, v3RunsPath, v3TestPath } from "~/utils/pathBuilder";
+import {
+  docsPath,
+  ProjectParamSchema,
+  v3ProjectPath,
+  v3RunsPath,
+  v3TestPath,
+} from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -48,6 +58,14 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { projectParam, organizationSlug } = ProjectParamSchema.parse(params);
 
   const url = new URL(request.url);
+
+  let rootOnlyValue = false;
+  if (url.searchParams.has("rootOnly")) {
+    rootOnlyValue = url.searchParams.get("rootOnly") === "true";
+  } else {
+    rootOnlyValue = await getRootOnlyFilterPreference(request);
+  }
+
   const s = {
     cursor: url.searchParams.get("cursor") ?? undefined,
     direction: url.searchParams.get("direction") ?? undefined,
@@ -57,6 +75,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     period: url.searchParams.get("period") ?? undefined,
     bulkId: url.searchParams.get("bulkId") ?? undefined,
     tags: url.searchParams.getAll("tags").map((t) => decodeURIComponent(t)),
+    from: url.searchParams.get("from") ?? undefined,
+    to: url.searchParams.get("to") ?? undefined,
+    rootOnly: rootOnlyValue,
+    runId: url.searchParams.get("runId") ?? undefined,
+    batchId: url.searchParams.get("batchId") ?? undefined,
+    scheduleId: url.searchParams.get("scheduleId") ?? undefined,
   };
   const {
     tasks,
@@ -70,6 +94,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     to,
     cursor,
     direction,
+    rootOnly,
+    runId,
+    batchId,
+    scheduleId,
   } = TaskRunListSearchFilters.parse(s);
 
   const project = await findProjectBySlug(organizationSlug, projectParam, userId);
@@ -91,26 +119,49 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     bulkId,
     from,
     to,
+    batchId,
+    runId,
+    scheduleId,
+    rootOnly,
     direction: direction,
     cursor: cursor,
   });
 
-  return typeddefer({
-    data: list,
-  });
+  const session = await setRootOnlyFilterPreference(rootOnlyValue, request);
+  const cookieValue = await uiPreferencesStorage.commitSession(session);
+
+  return typeddefer(
+    {
+      data: list,
+      rootOnlyDefault: rootOnlyValue,
+    },
+    {
+      headers: {
+        "Set-Cookie": cookieValue,
+      },
+    }
+  );
 };
 
 export default function Page() {
-  const { data } = useTypedLoaderData<typeof loader>();
+  const { data, rootOnlyDefault } = useTypedLoaderData<typeof loader>();
   const navigation = useNavigation();
   const isLoading = navigation.state !== "idle";
   const project = useProject();
-  const user = useUser();
 
   return (
     <>
       <NavBar>
         <PageTitle title="Runs" />
+        <PageAccessories>
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/runs-and-attempts")}
+          >
+            Runs docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
         <SelectedItemsProvider
@@ -121,61 +172,61 @@ export default function Page() {
             <div
               className={cn(
                 "grid h-full max-h-full overflow-hidden",
-                selectedItems.size === 0 ? "grid-rows-1" : "grid-rows-[1fr_3.5rem]"
+                selectedItems.size === 0 ? "grid-rows-1" : "grid-rows-[1fr_auto]"
               )}
             >
-              <div className="overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                <Suspense
-                  fallback={
-                    <div className="flex items-center justify-center py-2">
-                      <div className="mx-auto flex items-center gap-2">
-                        <Spinner />
-                        <Paragraph variant="small">Loading runs</Paragraph>
-                      </div>
+              <Suspense
+                fallback={
+                  <div className="flex items-center justify-center py-2">
+                    <div className="mx-auto flex items-center gap-2">
+                      <Spinner />
+                      <Paragraph variant="small">Loading runs</Paragraph>
                     </div>
-                  }
-                >
-                  <TypedAwait resolve={data}>
-                    {(list) => (
-                      <>
-                        {list.runs.length === 0 && !list.hasFilters ? (
-                          list.possibleTasks.length === 0 ? (
-                            <CreateFirstTaskInstructions />
-                          ) : (
-                            <RunTaskInstructions />
-                          )
+                  </div>
+                }
+              >
+                <TypedAwait resolve={data}>
+                  {(list) => (
+                    <>
+                      {list.runs.length === 0 && !list.hasFilters ? (
+                        list.possibleTasks.length === 0 ? (
+                          <CreateFirstTaskInstructions />
                         ) : (
-                          <div className={cn("grid h-fit grid-cols-1 gap-4")}>
-                            <div>
-                              <div className="mb-2 flex items-start justify-between gap-x-2">
-                                <RunsFilters
-                                  possibleEnvironments={project.environments}
-                                  possibleTasks={list.possibleTasks}
-                                  bulkActions={list.bulkActions}
-                                  hasFilters={list.hasFilters}
-                                />
-                                <div className="flex items-center justify-end gap-x-2">
-                                  <ListPagination list={list} />
-                                </div>
-                              </div>
-
-                              <TaskRunsTable
-                                total={list.runs.length}
-                                hasFilters={list.hasFilters}
-                                filters={list.filters}
-                                runs={list.runs}
-                                isLoading={isLoading}
-                                allowSelection
-                              />
-                              <ListPagination list={list} className="mt-2 justify-end" />
+                          <RunTaskInstructions />
+                        )
+                      ) : (
+                        <div
+                          className={cn(
+                            "grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden"
+                          )}
+                        >
+                          <div className="flex items-start justify-between gap-x-2 p-2">
+                            <RunsFilters
+                              possibleEnvironments={project.environments}
+                              possibleTasks={list.possibleTasks}
+                              bulkActions={list.bulkActions}
+                              hasFilters={list.hasFilters}
+                              rootOnlyDefault={rootOnlyDefault}
+                            />
+                            <div className="flex items-center justify-end gap-x-2">
+                              <ListPagination list={list} />
                             </div>
                           </div>
-                        )}
-                      </>
-                    )}
-                  </TypedAwait>
-                </Suspense>
-              </div>
+
+                          <TaskRunsTable
+                            total={list.runs.length}
+                            hasFilters={list.hasFilters}
+                            filters={list.filters}
+                            runs={list.runs}
+                            isLoading={isLoading}
+                            allowSelection
+                          />
+                        </div>
+                      )}
+                    </>
+                  )}
+                </TypedAwait>
+              </Suspense>
               <BulkActionBar />
             </div>
           )}
@@ -198,7 +249,7 @@ function BulkActionBar() {
           initial={{ translateY: "100%" }}
           animate={{ translateY: 0 }}
           exit={{ translateY: "100%" }}
-          className="flex items-center justify-between gap-3 border-t border-grid-bright bg-background-bright pl-4 pr-3"
+          className="flex items-center justify-between gap-3 border-t border-grid-bright bg-background-bright py-3 pl-4 pr-3"
         >
           <div className="flex items-center gap-1.5 text-sm text-text-bright">
             <ListChecks className="mr-1 size-7 text-indigo-400" />

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

@@ -528,16 +528,14 @@ function TasksTreeView({
 
   return (
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
-      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
+      <div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-3">
         <SearchField onChange={setFilterText} />
-        <div className="flex items-center gap-2">
-          <Switch
-            variant="small"
-            label="Errors only"
-            checked={errorsOnly}
-            onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
-          />
-        </div>
+        <Switch
+          variant="small"
+          label="Errors only"
+          checked={errorsOnly}
+          onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
+        />
       </div>
       <ResizablePanelGroup autosaveId={resizableSettings.tree.autosaveId}>
         {/* Tree list */}
@@ -1015,7 +1013,7 @@ function ShowParentLink({ runFriendlyId }: { runFriendlyId: string }) {
       {mouseOver ? (
         <ShowParentIconSelected className="h-4 w-4 text-indigo-500" />
       ) : (
-        <ShowParentIcon className="text-charcoal-650 h-4 w-4" />
+        <ShowParentIcon className="h-4 w-4 text-charcoal-650" />
       )}
       <Paragraph
         variant="small"

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx

@@ -216,9 +216,10 @@ export default function Page() {
         <Header2 className={cn("whitespace-nowrap")}>{schedule.friendlyId}</Header2>
         <LinkButton
           to={`${v3SchedulesPath(organization, project)}${location.search}`}
-          variant="minimal/medium"
-          LeadingIcon={ExitIcon}
+          variant="minimal/small"
+          TrailingIcon={ExitIcon}
           shortcut={{ key: "esc" }}
+          shortcutPosition="before-trailing-icon"
         />
       </div>
       <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
@@ -252,7 +253,7 @@ export default function Page() {
                 <Property.Label>Timezone</Property.Label>
                 <Property.Value>{schedule.timezone}</Property.Value>
               </Property.Item>
-              <Property.Item>
+              <Property.Item className="gap-1">
                 <Property.Label>Environments</Property.Label>
                 <Property.Value>
                   <EnvironmentLabels size="small" environments={schedule.environments} />
@@ -272,7 +273,7 @@ export default function Page() {
                       {schedule.userProvidedDeduplicationKey ? schedule.deduplicationKey : "–"}
                     </Property.Value>
                   </Property.Item>
-                  <Property.Item>
+                  <Property.Item className="gap-1.5">
                     <Property.Label>Status</Property.Label>
                     <Property.Value>
                       <EnabledStatus enabled={schedule.active} />
@@ -354,11 +355,11 @@ export default function Page() {
       </div>
       {isImperative && (
         <div className="flex items-center justify-between gap-2 border-t border-grid-dimmed px-2">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
             <Form method="post">
               <Button
                 type="submit"
-                variant="minimal/medium"
+                variant="tertiary/medium"
                 LeadingIcon={schedule.active ? BoltSlashIcon : BoltIcon}
                 leadingIconClassName={schedule.active ? "text-dimmed" : "text-success"}
                 name="action"
@@ -371,26 +372,24 @@ export default function Page() {
               <DialogTrigger asChild>
                 <Button
                   type="submit"
-                  variant="minimal/medium"
+                  variant="danger/medium"
                   LeadingIcon={TrashIcon}
-                  leadingIconClassName="text-error"
-                  className="text-error"
                   name="action"
                   value="delete"
                 >
                   Delete
                 </Button>
               </DialogTrigger>
-              <DialogContent className="max-w-md">
+              <DialogContent className="sm:max-w-sm">
                 <DialogHeader>Delete schedule</DialogHeader>
-                <DialogDescription>
+                <DialogDescription className="mt-3">
                   Are you sure you want to delete this schedule? This can't be reversed.
                 </DialogDescription>
-                <DialogFooter>
+                <DialogFooter className="sm:justify-end">
                   <Form method="post">
                     <Button
                       type="submit"
-                      variant="danger/small"
+                      variant="danger/medium"
                       LeadingIcon={TrashIcon}
                       name="action"
                       value="delete"

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx

@@ -63,6 +63,8 @@ import {
   v3SchedulePath,
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -94,7 +96,6 @@ export default function Page() {
     possibleTasks,
     possibleEnvironments,
     hasFilters,
-    filters,
     limits,
     currentPage,
     totalPages,
@@ -132,11 +133,20 @@ export default function Page() {
             </Property.Table>
           </AdminDebugTooltip>
 
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/tasks/scheduled")}
+          >
+            Schedules docs
+          </LinkButton>
+
           {limits.used >= limits.limit ? (
             <Dialog>
               <DialogTrigger asChild>
                 <Button
                   LeadingIcon={PlusIcon}
+                  leadingIconClassName="text-background-dimmed"
                   variant="primary/small"
                   shortcut={{ key: "n" }}
                   disabled={possibleTasks.length === 0 || isShowingNewPane}
@@ -177,16 +187,16 @@ export default function Page() {
         </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
-        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
+        <ResizablePanelGroup orientation="horizontal" className="max-h-full">
           <ResizablePanel id="schedules-main" min={"100px"}>
-            <div className="max-h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <div className="grid max-h-full min-h-full grid-rows-[auto_1fr_auto]">
               {possibleTasks.length === 0 ? (
                 <CreateScheduledTaskInstructions />
               ) : schedules.length === 0 && !hasFilters ? (
                 <AttachYourFirstScheduleInstructions />
               ) : (
-                <div className="p-3">
-                  <div className="mb-2 flex items-center justify-between gap-x-2">
+                <>
+                  <div className="flex items-center justify-between gap-x-2 p-2">
                     <ScheduleFilters
                       possibleEnvironments={possibleEnvironments}
                       possibleTasks={possibleTasks}
@@ -200,51 +210,73 @@ export default function Page() {
                     </div>
                   </div>
 
-                  <SchedulesTable schedules={schedules} hasFilters={hasFilters} />
-                  <div className="mt-3 flex w-full items-start justify-between">
-                    {requiresUpgrade ? (
-                      <InfoPanel
-                        variant="upgrade"
-                        icon={LockOpenIcon}
-                        iconClassName="text-indigo-500"
-                        title="Unlock more schedules"
-                        to={v3BillingPath(organization)}
-                        buttonLabel="Upgrade"
-                      >
-                        <Paragraph variant="small">
-                          You've used all {limits.limit} of your available schedules. Upgrade your
-                          plan to enable more.
-                        </Paragraph>
-                      </InfoPanel>
-                    ) : (
-                      <div className="flex h-fit flex-col items-start gap-4 rounded-md border border-grid-bright bg-background-bright p-4">
-                        <div className="flex items-center justify-between gap-6">
+                  <div className="h-fit max-h-full overflow-x-auto">
+                    <SchedulesTable schedules={schedules} hasFilters={hasFilters} />
+                    <div className="flex justify-end py-3">
+                      <PaginationControls currentPage={currentPage} totalPages={totalPages} />
+                    </div>
+                  </div>
+
+                  <div className="flex w-full items-start justify-between">
+                    <div className="flex h-fit w-full items-center gap-4 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
+                      <SimpleTooltip
+                        button={
+                          <div className="size-6">
+                            <svg className="h-full w-full -rotate-90 overflow-visible">
+                              <circle
+                                className="fill-none stroke-grid-bright"
+                                strokeWidth="4"
+                                r="10"
+                                cx="12"
+                                cy="12"
+                              />
+                              <circle
+                                className={`fill-none ${
+                                  requiresUpgrade ? "stroke-error" : "stroke-success"
+                                }`}
+                                strokeWidth="4"
+                                r="10"
+                                cx="12"
+                                cy="12"
+                                strokeDasharray={`${(limits.used / limits.limit) * 62.8} 62.8`}
+                                strokeDashoffset="0"
+                                strokeLinecap="round"
+                              />
+                            </svg>
+                          </div>
+                        }
+                        content={`${Math.round((limits.used / limits.limit) * 100)}%`}
+                      />
+                      <div className="flex w-full items-center justify-between gap-6">
+                        {requiresUpgrade ? (
+                          <Header3 className="text-error">
+                            You've used all {limits.limit} of your available schedules. Upgrade your
+                            plan to enable more.
+                          </Header3>
+                        ) : (
                           <Header3>
                             You've used {limits.used}/{limits.limit} of your schedules.
                           </Header3>
+                        )}
 
-                          {canUpgrade ? (
-                            <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
-                              Upgrade
-                            </LinkButton>
-                          ) : (
-                            <Feedback
-                              button={<Button variant="secondary/small">Request more</Button>}
-                              defaultValue="help"
-                            />
-                          )}
-                        </div>
-                        <div className="h-2 w-full overflow-hidden rounded-full border border-grid-bright">
-                          <div
-                            className="h-full bg-grid-bright"
-                            style={{ width: `${(limits.used / limits.limit) * 100}%` }}
+                        {canUpgrade ? (
+                          <LinkButton
+                            to={v3BillingPath(organization)}
+                            variant="secondary/small"
+                            LeadingIcon={ArrowUpCircleIcon}
+                          >
+                            Upgrade
+                          </LinkButton>
+                        ) : (
+                          <Feedback
+                            button={<Button variant="secondary/small">Request more</Button>}
+                            defaultValue="help"
                           />
-                        </div>
+                        )}
                       </div>
-                    )}
-                    <PaginationControls currentPage={currentPage} totalPages={totalPages} />
+                    </div>
                   </div>
-                </div>
+                </>
               )}
             </div>
           </ResizablePanel>
@@ -270,13 +302,18 @@ function CreateScheduledTaskInstructions() {
         icon={ClockIcon}
         iconClassName="text-sun-500"
         panelClassName="max-w-full"
-        to={docsPath("v3/tasks-scheduled")}
-        buttonLabel="Scheduled task docs"
       >
-        <Paragraph variant="small">
+        <Paragraph spacing variant="small">
           You have no scheduled tasks in your project. Before you can schedule a task you need to
           create a <InlineCode>schedules.task</InlineCode>.
         </Paragraph>
+        <LinkButton
+          to={docsPath("v3/tasks-scheduled")}
+          variant="docs/medium"
+          LeadingIcon={BookOpenIcon}
+        >
+          View the docs
+        </LinkButton>
       </InfoPanel>
     </MainCenteredContainer>
   );
@@ -372,14 +409,14 @@ function SchedulesTable({
                     deleted from the dashboard or using the SDK.
                   </Paragraph>
                 </div>
-                <div>
-                  <LinkButton
-                    variant="tertiary/medium"
-                    to="https://trigger.dev/docs/v3/tasks-scheduled"
-                  >
-                    View the docs
-                  </LinkButton>
-                </div>
+                <LinkButton
+                  variant="docs/small"
+                  to={docsPath("v3/tasks-scheduled")}
+                  LeadingIcon={BookOpenIcon}
+                  className="mb-1"
+                >
+                  View the docs
+                </LinkButton>
               </div>
             }
           >

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx

@@ -5,7 +5,7 @@ import { Form, useActionData, useSubmit } from "@remix-run/react";
 import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { TaskRunStatus } from "@trigger.dev/database";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { JSONEditor } from "~/components/code/JSONEditor";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Button } from "~/components/primitives/Buttons";
@@ -32,7 +32,11 @@ import { TextLink } from "~/components/primitives/TextLink";
 import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import { TimezoneList } from "~/components/scheduled/timezones";
 import { useSearchParams } from "~/hooks/useSearchParam";
-import { redirectBackWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import {
+  redirectBackWithErrorMessage,
+  redirectWithErrorMessage,
+  redirectWithSuccessMessage,
+} from "~/models/message.server";
 import {
   ScheduledRun,
   StandardRun,
@@ -42,7 +46,7 @@ import {
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { docsPath, v3RunSpanPath, v3TaskParamsSchema } from "~/utils/pathBuilder";
+import { docsPath, v3RunSpanPath, v3TaskParamsSchema, v3TestPath } from "~/utils/pathBuilder";
 import { TestTaskService } from "~/v3/services/testTask.server";
 import { OutOfEntitlementError } from "~/v3/services/triggerTask.server";
 import { TestTaskData } from "~/v3/testTask";
@@ -51,14 +55,30 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const { projectParam, organizationSlug, taskParam } = v3TaskParamsSchema.parse(params);
 
-  const presenter = new TestTaskPresenter();
-  const result = await presenter.call({
-    userId,
-    projectSlug: projectParam,
-    taskFriendlyId: taskParam,
-  });
+  //need an environment
+  const searchParams = new URL(request.url).searchParams;
+  const environment = searchParams.get("environment");
+  if (!environment) {
+    return redirect(v3TestPath({ slug: organizationSlug }, { slug: projectParam }));
+  }
 
-  return typedjson(result);
+  const presenter = new TestTaskPresenter();
+  try {
+    const result = await presenter.call({
+      userId,
+      projectSlug: projectParam,
+      taskIdentifier: taskParam,
+      environmentSlug: environment,
+    });
+
+    return typedjson(result);
+  } catch (error) {
+    return redirectWithErrorMessage(
+      v3TestPath({ slug: organizationSlug }, { slug: projectParam }, environment),
+      request,
+      `Couldn't load test page for ${taskParam}`
+    );
+  }
 };
 
 export const action: ActionFunction = async ({ request, params }) => {
@@ -113,16 +133,20 @@ export const action: ActionFunction = async ({ request, params }) => {
 export default function Page() {
   const result = useTypedLoaderData<typeof loader>();
 
-  switch (result.triggerSource) {
+  if (!result.foundTask) {
+    return <div></div>;
+  }
+
+  switch (result.task.triggerSource) {
     case "STANDARD": {
-      return <StandardTaskForm task={result.task} runs={result.runs} />;
+      return <StandardTaskForm task={result.task.task} runs={result.task.runs} />;
     }
     case "SCHEDULED": {
       return (
         <ScheduledTaskForm
-          task={result.task}
-          runs={result.runs}
-          possibleTimezones={result.possibleTimezones}
+          task={result.task.task}
+          runs={result.task.runs}
+          possibleTimezones={result.task.possibleTimezones}
         />
       );
     }
@@ -194,7 +218,7 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
 
   return (
     <Form
-      className="grid h-full max-h-full grid-rows-[1fr_2.5rem]"
+      className="grid h-full max-h-full grid-rows-[1fr_auto]"
       method="post"
       {...form.props}
       onSubmit={(e) => submitForm(e)}
@@ -202,7 +226,7 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
       <input type="hidden" name="triggerSource" value={"STANDARD"} />
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel id="test-task-main" min="100px" default="60%">
-          <div className="h-full bg-charcoal-900">
+          <div className="flex h-full flex-col overflow-hidden bg-charcoal-900">
             <TabContainer className="px-3 pt-2">
               <TabButton
                 isActive={!tab || tab === "payload"}
@@ -224,7 +248,7 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
                 Metadata
               </TabButton>
             </TabContainer>
-            <div>
+            <div className="flex-1 overflow-hidden">
               <JSONEditor
                 defaultValue={defaultPayloadJson}
                 readOnly={false}
@@ -241,11 +265,9 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
                   }
                 }}
                 height="100%"
-                min-height="100%"
-                max-height="100%"
                 autoFocus={!tab || tab === "payload"}
                 placeholder="{ }"
-                className={cn("h-full", tab === "metadata" && "hidden")}
+                className={cn("h-full overflow-auto", tab === "metadata" && "hidden")}
               />
               <JSONEditor
                 defaultValue={defaultMetadataJson}
@@ -263,11 +285,9 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
                   }
                 }}
                 height="100%"
-                min-height="100%"
-                max-height="100%"
                 autoFocus={tab === "metadata"}
                 placeholder=""
-                className={cn("h-full", tab !== "metadata" && "hidden")}
+                className={cn("h-full overflow-auto", tab !== "metadata" && "hidden")}
               />
             </div>
           </div>
@@ -287,16 +307,16 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
           />
         </ResizablePanel>
       </ResizablePanelGroup>
-      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed px-2">
+      <div className="flex items-center justify-end gap-3 border-t border-grid-bright bg-background-dimmed p-2">
         <div className="flex items-center gap-1">
           <Paragraph variant="small" className="whitespace-nowrap">
             This test will run in
           </Paragraph>
-          <EnvironmentLabel environment={task.environment} />
+          <EnvironmentLabel environment={task.environment} size="large" />
         </div>
         <Button
           type="submit"
-          variant="primary/small"
+          variant="primary/medium"
           LeadingIcon={BeakerIcon}
           shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
         >
@@ -358,7 +378,7 @@ function ScheduledTaskForm({
   });
 
   return (
-    <Form className="grid h-full max-h-full grid-rows-[1fr_2.5rem]" method="post" {...form.props}>
+    <Form className="grid h-full max-h-full grid-rows-[1fr_auto]" method="post" {...form.props}>
       <input
         type="hidden"
         {...conform.input(triggerSource, { type: "hidden" })}
@@ -392,6 +412,7 @@ function ScheduledTaskForm({
                   granularity="second"
                   showNowButton
                   variant="medium"
+                  utc
                 />
                 <Hint>
                   This is the timestamp of the CRON, it will come through to your run in the
@@ -416,6 +437,7 @@ function ScheduledTaskForm({
                   showNowButton
                   showClearButton
                   variant="medium"
+                  utc
                 />
                 <Hint>
                   This is the timestamp of the previous run. You can use this in your code to find
@@ -484,7 +506,7 @@ function ScheduledTaskForm({
           />
         </ResizablePanel>
       </ResizablePanelGroup>
-      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed px-2">
+      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed p-2">
         <div className="flex items-center gap-1">
           <Paragraph variant="small" className="whitespace-nowrap">
             This test will run in
@@ -519,7 +541,7 @@ function RecentPayloads({
   onSelected: (id: string) => void;
 }) {
   return (
-    <div className="flex flex-col gap-2 pl-4">
+    <div className="flex flex-col gap-2 px-3">
       <div className="flex h-10 items-center border-b border-grid-dimmed">
         <Header2>Recent payloads</Header2>
       </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx

@@ -1,3 +1,4 @@
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { Link, Outlet, useLocation, useNavigation, useParams } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -8,9 +9,11 @@ import {
   environmentTitle,
 } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
 import { Header2 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioButtonCircle } from "~/components/primitives/RadioButton";
 import {
@@ -42,7 +45,7 @@ import {
 } from "~/presenters/v3/TestPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { ProjectParamSchema, v3TestPath, v3TestTaskPath } from "~/utils/pathBuilder";
+import { docsPath, ProjectParamSchema, v3TestPath, v3TestTaskPath } from "~/utils/pathBuilder";
 
 export const TestSearchParams = z.object({
   environment: z.string().optional(),
@@ -75,18 +78,23 @@ export default function Page() {
   const navigation = useNavigation();
 
   const location = useLocation();
-  const locationSearchParams = new URLSearchParams(location.search);
-  const navigationSearchParams = new URLSearchParams(navigation.location?.search);
+  const currentEnvironment = new URLSearchParams(location.search).get("environment");
+  const pendingEnvironment = new URLSearchParams(navigation.location?.search).get("environment");
 
   const isLoadingTasks =
     navigation.state === "loading" &&
     navigation.location.pathname === location.pathname &&
-    navigationSearchParams.get("environment") !== locationSearchParams.get("environment");
+    currentEnvironment !== pendingEnvironment;
 
   return (
     <PageContainer>
       <NavBar>
         <PageTitle title="Test" />
+        <PageAccessories>
+          <LinkButton variant={"docs/small"} LeadingIcon={BookOpenIcon} to={docsPath("/run-tests")}>
+            Test docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
         <div className={cn("grid h-full max-h-full grid-cols-1")}>
@@ -106,10 +114,19 @@ export default function Page() {
                             "flex h-8 flex-1 items-center justify-center rounded-sm border text-xs uppercase tracking-wider",
                             isSelected
                               ? cn(environmentBorderClassName(env), environmentTextClassName(env))
-                              : "border-grid-bright text-text-dimmed"
+                              : "border-grid-bright text-text-dimmed transition hover:border-charcoal-600 hover:text-text-bright"
                           )}
                           key={env.id}
-                          to={v3TestPath(organization, project, env.slug)}
+                          to={
+                            taskParam
+                              ? v3TestTaskPath(
+                                  organization,
+                                  project,
+                                  { taskIdentifier: taskParam },
+                                  env.slug
+                                )
+                              : v3TestPath(organization, project, env.slug)
+                          }
                         >
                           <span>{environmentTitle(env)}</span>
                         </Link>
@@ -122,8 +139,8 @@ export default function Page() {
                     <Spinner />
                   </div>
                 ) : hasSelectedEnvironment ? (
-                  <div className="grid grid-rows-[2rem_1fr] overflow-hidden">
-                    <div className="mx-3 flex items-end">
+                  <div className="grid grid-rows-[auto_1fr] overflow-hidden">
+                    <div className="flex items-end px-3 pt-2">
                       <Header2>Select a task</Header2>
                     </div>
                     {!rest.tasks?.length ? (
@@ -132,6 +149,7 @@ export default function Page() {
                       <TaskSelector
                         tasks={rest.tasks}
                         environmentSlug={rest.selectedEnvironment.slug}
+                        activeTaskIdentifier={taskParam}
                       />
                     )}
                   </div>
@@ -154,14 +172,24 @@ export default function Page() {
 function TaskSelector({
   tasks,
   environmentSlug,
+  activeTaskIdentifier,
 }: {
   tasks: TaskListItem[];
   environmentSlug: string;
+  activeTaskIdentifier?: string;
 }) {
   const { filterText, setFilterText, filteredItems } = useFilterTasks<TaskListItem>({ tasks });
+  const hasTaskInEnvironment = activeTaskIdentifier
+    ? tasks.some((t) => t.taskIdentifier === activeTaskIdentifier)
+    : undefined;
 
   return (
-    <div className="divide-y divide-charcoal-800 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div
+      className={cn(
+        "grid max-h-full  overflow-hidden",
+        hasTaskInEnvironment === false ? "grid-rows-[auto_auto_1fr]" : "grid-rows-[auto_1fr]"
+      )}
+    >
       <div className="p-2">
         <Input
           placeholder="Search tasks"
@@ -173,13 +201,19 @@ function TaskSelector({
           onChange={(e) => setFilterText(e.target.value)}
         />
       </div>
+      {hasTaskInEnvironment === false && (
+        <div className="px-2 pb-2">
+          <Callout variant="warning">
+            There is no task {activeTaskIdentifier} in the selected environment.
+          </Callout>
+        </div>
+      )}
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHeaderCell className="px-2">
-              <span className="sr-only">Go to test task</span>
+            <TableHeaderCell className="pl-3" colSpan={2}>
+              Task
             </TableHeaderCell>
-            <TableHeaderCell className="px-2">Task</TableHeaderCell>
             <TableHeaderCell className="px-2">File path</TableHeaderCell>
           </TableRow>
         </TableHeader>
@@ -204,9 +238,9 @@ function TaskSelector({
 function NoTaskInstructions({ environment }: { environment?: SelectedEnvironment }) {
   return (
     <div className="px-3 py-3">
-      <Paragraph spacing variant="small">
+      <Callout variant="info">
         You have no tasks {environment ? `in ${environmentTitle(environment)}` : ""}.
-      </Paragraph>
+      </Callout>
     </div>
   );
 }
@@ -217,23 +251,29 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu
 
   const path = v3TestTaskPath(organization, project, task, environmentSlug);
   const { isActive, isPending } = useLinkStatus(path);
+
   return (
     <TableRow
       key={task.taskIdentifier}
-      className={cn(
-        (isActive || isPending) &&
-          "z-20 rounded-sm outline outline-1 outline-offset-[-1px] outline-secondary"
-      )}
+      className={cn((isActive || isPending) && "bg-indigo-500/10")}
     >
-      <TableCell to={path} actionClassName="pl-2.5 pr-1 py-1">
+      <TableCell
+        to={path}
+        actionClassName="pl-2.5 pr-2 py-1"
+        className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
+      >
         <RadioButtonCircle checked={isActive || isPending} />
       </TableCell>
-      <TableCell to={path} actionClassName="pl-1 pr-2 py-1">
+      <TableCell
+        to={path}
+        actionClassName="pl-1 pr-2 py-1.5"
+        className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
+      >
         <div className="flex flex-col gap-0.5">
           <TaskFunctionName
             variant="extra-small"
             functionName={task.exportName}
-            className="-ml-1 inline-flex"
+            className="inline-flex w-fit"
           />
           <div className="flex items-start gap-1">
             <TaskTriggerSourceIcon source={task.triggerSource} className="size-3.5" />
@@ -244,7 +284,11 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu
         </div>
       </TableCell>
 
-      <TableCell to={path} actionClassName="px-2 py-1">
+      <TableCell
+        to={path}
+        actionClassName="px-2 py-1"
+        className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
+      >
         {task.filePath}
       </TableCell>
     </TableRow>