Fix pnpm lock file

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

.changeset/angry-eagles-trade.md

@@ -0,0 +1,9 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+- Fix additionalFiles that aren't decendants
+- Stop swallowing uncaught exceptions in prod
+- Improve warnings and errors, fail early on critical warnings
+- New arg to --save-logs even for successful builds

.changeset/beige-pens-dance.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+v3 CLI update command and package manager detection fix

.changeset/clever-apes-collect.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+Fix error stack traces

.changeset/clever-carrots-travel.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Implement task.onSuccess/onFailure and config.onSuccess/onFailure

.changeset/dry-walls-check.md

@@ -0,0 +1,6 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Add option to print console logs in the dev CLI locally (issue #1014)

.changeset/eleven-paws-join.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Remove the env var check during deploy (too many false negatives)

.changeset/funny-swans-destroy.md

@@ -0,0 +1,9 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Make msw a normal dependency (for now) to fix Module Not Found error in Next.js.
+
+It turns out that webpack will "hoist" dynamically imported modules and attempt to resolve them at build time, even though it's an optional peer dep:
+
+https://x.com/maverickdotdev/status/1782465214308319404

.changeset/khaki-poems-lay.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Export queue from the SDK

.changeset/mighty-flowers-train.md

@@ -0,0 +1,83 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Adds support for `emitDecoratorMetadata: true` and `experimentalDecorators: true` in your tsconfig using the [`@anatine/esbuild-decorators`](https://github.com/anatine/esbuildnx/tree/main/packages/esbuild-decorators) package. This allows you to use libraries like TypeORM: 
+
+```ts orm/index.ts
+import "reflect-metadata";
+import { DataSource } from "typeorm";
+import { Entity, Column, PrimaryColumn } from "typeorm";
+
+@Entity()
+export class Photo {
+  @PrimaryColumn()
+  id!: number;
+
+  @Column()
+  name!: string;
+
+  @Column()
+  description!: string;
+
+  @Column()
+  filename!: string;
+
+  @Column()
+  views!: number;
+
+  @Column()
+  isPublished!: boolean;
+}
+
+export const AppDataSource = new DataSource({
+  type: "postgres",
+  host: "localhost",
+  port: 5432,
+  username: "postgres",
+  password: "postgres",
+  database: "v3-catalog",
+  entities: [Photo],
+  synchronize: true,
+  logging: false,
+});
+```
+
+And then in your trigger.config.ts file you can initialize the datasource using the new `init` option:
+
+```ts trigger.config.ts
+import type { TriggerConfig } from "@trigger.dev/sdk/v3";
+import { AppDataSource } from "@/trigger/orm";
+
+export const config: TriggerConfig = {
+  // ... other options here
+  init: async (payload, { ctx }) => {
+    await AppDataSource.initialize();
+  },
+};
+```
+
+Now you are ready to use this in your tasks:
+
+```ts
+import { task } from "@trigger.dev/sdk/v3";
+import { AppDataSource, Photo } from "./orm";
+
+export const taskThatUsesDecorators = task({
+  id: "taskThatUsesDecorators",
+  run: async (payload: { message: string }) => {
+    console.log("Creating a photo...");
+
+    const photo = new Photo();
+    photo.id = 2;
+    photo.name = "Me and Bears";
+    photo.description = "I am near polar bears";
+    photo.filename = "photo-with-bears.jpg";
+    photo.views = 1;
+    photo.isPublished = true;
+
+    await AppDataSource.manager.save(photo);
+  },
+});
+```

.changeset/nasty-jars-pump.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Fixes an issue that was treating v2 trigger directories as v3

.changeset/ninety-pets-travel.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/core": patch
+---
+
+Improve the SDK function types and expose a new APIError instead of the APIResult type

.changeset/polite-rockets-matter.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Fix dev CLI output when not printing update messages

.changeset/pre.json

@@ -44,15 +44,23 @@
     "@trigger.dev/yalt": "2.3.18"
   },
   "changesets": [
+    "angry-eagles-trade",
+    "beige-pens-dance",
     "breezy-gorillas-mate",
     "chilled-hornets-move",
     "clean-pianos-listen",
+    "clever-apes-collect",
+    "clever-carrots-travel",
     "cool-glasses-bake",
     "cuddly-feet-approve",
+    "dry-walls-check",
     "eight-pumas-float",
+    "eleven-paws-join",
     "few-students-share",
+    "funny-swans-destroy",
     "green-bags-wink",
     "khaki-apricots-design",
+    "khaki-poems-lay",
     "late-icons-lie",
     "late-steaks-behave",
     "lemon-jobs-repair",
@@ -61,21 +69,44 @@
     "loud-actors-remember",
     "many-ligers-pump",
     "mighty-camels-joke",
+    "mighty-flowers-train",
+    "nasty-jars-pump",
     "new-rivers-tell",
+    "ninety-pets-travel",
     "odd-poets-own",
     "polite-ducks-switch",
+    "polite-rockets-matter",
     "poor-flowers-cross",
+    "purple-garlics-shop",
     "rare-roses-float",
     "real-planets-stare",
+    "rich-kangaroos-unite",
+    "rotten-beers-refuse",
+    "rotten-dryers-exercise",
+    "selfish-ducks-sort",
+    "shaggy-spoons-taste",
+    "sharp-emus-compare",
     "sharp-zebras-serve",
+    "shiny-coats-cry",
+    "silly-suits-switch",
+    "slow-buses-own",
+    "smart-needles-move",
     "smart-olives-eat",
     "spicy-lamps-smoke",
     "strange-ghosts-matter",
+    "strong-lemons-add",
     "stupid-bulldogs-applaud",
     "sweet-lizards-press",
+    "swift-dragons-peel",
     "tall-bees-wave",
     "tame-guests-know",
     "tender-oranges-rhyme",
-    "tiny-doors-type"
+    "tidy-balloons-suffer",
+    "tidy-dryers-sleep",
+    "tiny-doors-type",
+    "tiny-elephants-scream",
+    "tricky-bulldogs-heal",
+    "tricky-ladybugs-unite",
+    "two-pumas-wait"
   ]
 }

.changeset/purple-garlics-shop.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Add typescript as a dependency so the esbuild-decorator will work even when running in npx

.changeset/rich-kangaroos-unite.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Fix a bug where revoking the CLI token would prevent you from ever logging in again with the CLI.

.changeset/rotten-beers-refuse.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Add git to prod worker image which fixes private package installs

.changeset/rotten-dryers-exercise.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Adding task with a triggerSource of schedule

.changeset/selfish-ducks-sort.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+---
+
+Lock SDK and CLI deps on exact core version

.changeset/shaggy-spoons-taste.md

@@ -0,0 +1,56 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/core": patch
+---
+
+Updates the `trigger`, `batchTrigger` and their `*AndWait` variants to use the first parameter for the payload/items, and the second parameter for options.
+
+Before:
+
+```ts
+await yourTask.trigger({ payload: { foo: "bar" }, options: { idempotencyKey: "key_1234" } });
+await yourTask.triggerAndWait({ payload: { foo: "bar" }, options: { idempotencyKey: "key_1234" } });
+
+await yourTask.batchTrigger({ items: [{ payload: { foo: "bar" } }, { payload: { foo: "baz" } }] });
+await yourTask.batchTriggerAndWait({ items: [{ payload: { foo: "bar" } }, { payload: { foo: "baz" } }] });
+```
+
+After:
+
+```ts
+await yourTask.trigger({ foo: "bar" }, { idempotencyKey: "key_1234" });
+await yourTask.triggerAndWait({ foo: "bar" }, { idempotencyKey: "key_1234" });
+
+await yourTask.batchTrigger([{ payload: { foo: "bar" } }, { payload: { foo: "baz" } }]);
+await yourTask.batchTriggerAndWait([{ payload: { foo: "bar" } }, { payload: { foo: "baz" } }]);
+```
+
+We've also changed the API of the `triggerAndWait` result. Before, if the subtask that was triggered finished with an error, we would automatically "rethrow" the error in the parent task.
+
+Now instead we're returning a `TaskRunResult` object that allows you to discriminate between successful and failed runs in the subtask:
+
+Before:
+
+```ts
+try {
+  const result = await yourTask.triggerAndWait({ foo: "bar" });
+
+  // result is the output of your task
+  console.log("result", result);
+
+} catch (error) {
+  // handle subtask errors here
+}
+```
+
+After:
+
+```ts
+const result = await yourTask.triggerAndWait({ foo: "bar" });
+
+if (result.ok) {
+  console.log(`Run ${result.id} succeeded with output`, result.output);
+} else {
+  console.log(`Run ${result.id} failed with error`, result.error);
+}
+```

.changeset/sharp-emus-compare.md

@@ -0,0 +1,13 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+When using idempotency keys, triggerAndWait and batchTriggerAndWait will still work even if the existing runs have already been completed (or even partially completed, in the case of batchTriggerAndWait)
+
+- TaskRunExecutionResult.id is now the run friendlyId, not the attempt friendlyId
+- A single TaskRun can now have many batchItems, in the case of batchTriggerAndWait while using idempotency keys
+- A run’s idempotencyKey is now added to the ctx as well as the TaskEvent and displayed in the span view
+- When resolving batchTriggerAndWait, the runtimes no longer reject promises, leading to an error in the parent task
+

.changeset/shiny-coats-cry.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Add additional logging around cleaning up dev workers, and always kill them after 5 seconds if they haven't already exited

.changeset/silly-suits-switch.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/otlp-importer": patch
+"trigger.dev": patch
+---
+
+Fix package builds and CLI commands on Windows

.changeset/slow-buses-own.md

@@ -0,0 +1,8 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+"@trigger.dev/cli": patch
+---
+
+Move to our global system from AsyncLocalStorage for the current task context storage

.changeset/smart-needles-move.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Remove unimplemented batchOptions

.changeset/strong-lemons-add.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+Make optional schedule object fields nullish

.changeset/swift-dragons-peel.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+Added JSDocs to the schedule SDK types

.changeset/tidy-balloons-suffer.md

@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Init command was failing on Windows because of bad template paths

.changeset/tidy-dryers-sleep.md

@@ -0,0 +1,10 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Fixes an issue that caused failed tasks when resuming after calling `triggerAndWait` or `batchTriggerAndWait` in prod/staging (this doesn't effect dev).
+
+The version of Node.js we use for deployed workers (latest 20) would crash with an out-of-memory error when the checkpoint was restored. This crash does not happen on Node 18x or Node21x, so we've decided to upgrade the worker version to Node.js21x, to mitigate this issue.
+
+You'll need to re-deploy to production to fix the issue.

.changeset/tiny-elephants-scream.md

@@ -0,0 +1,7 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+- Add graceful exit for prod workers
+- Prevent overflow in long waits

.changeset/tricky-bulldogs-heal.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Added a new global - Task Catalog - to better handle task metadata

.changeset/tricky-ladybugs-unite.md

@@ -0,0 +1,8 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/core-apps": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Extracting out all the non-SDK related features from the main @trigger.dev/core/v3 export

.changeset/two-pumas-wait.md

@@ -0,0 +1,6 @@
+---
+"trigger.dev": patch
+"@trigger.dev/cli": patch
+---
+
+Add support for tasks located in subdirectories inside trigger dirs

.github/workflows/pr_checks.yml

@@ -27,6 +27,6 @@ jobs:
     uses: ./.github/workflows/unit-tests.yml
     secrets: inherit
 
-  e2e:
-    uses: ./.github/workflows/e2e.yml
-    secrets: inherit
+  # e2e:
+  #   uses: ./.github/workflows/e2e.yml
+  #   secrets: inherit

.github/workflows/publish.yml

@@ -49,11 +49,11 @@ jobs:
     uses: ./.github/workflows/unit-tests.yml
     secrets: inherit
 
-  e2e:
-    uses: ./.github/workflows/e2e.yml
-    secrets: inherit
+  # e2e:
+  #   uses: ./.github/workflows/e2e.yml
+  #   secrets: inherit
 
   publish:
-    needs: [typecheck, units, e2e]
+    needs: [typecheck, units]
     uses: ./.github/workflows/publish-docker.yml
     secrets: inherit

apps/coordinator/package.json

@@ -21,8 +21,8 @@
     "execa": "^8.0.1",
     "nanoid": "^5.0.6",
     "prom-client": "^15.1.0",
-    "socket.io": "^4.7.4",
-    "socket.io-client": "^4.7.4"
+    "socket.io": "4.7.4",
+    "socket.io-client": "4.7.4"
   },
   "devDependencies": {
     "@types/node": "^18",

apps/coordinator/src/index.ts

@@ -8,9 +8,9 @@ import {
   PlatformToCoordinatorMessages,
   ProdWorkerSocketData,
   ProdWorkerToCoordinatorMessages,
-  ZodNamespace,
-  ZodSocketConnection,
 } from "@trigger.dev/core/v3";
+import { ZodNamespace } from "@trigger.dev/core/v3/zodNamespace";
+import { ZodSocketConnection } from "@trigger.dev/core/v3/zodSocket";
 import { HttpReply, getTextBody, SimpleLogger } from "@trigger.dev/core-apps";
 
 import { collectDefaultMetrics, register, Gauge } from "prom-client";

apps/docker-provider/src/index.ts

@@ -257,6 +257,7 @@ class DockerTaskOperations implements TaskOperations {
       return await execa("docker", [
         "exec",
         containerName,
+        "busybox",
         "wget",
         "-q",
         "-O-",

apps/kubernetes-provider/src/index.ts

@@ -133,6 +133,7 @@ class KubernetesTaskOperations implements TaskOperations {
         },
         spec: {
           ...this.#defaultPodSpec,
+          terminationGracePeriodSeconds: 60 * 60,
           containers: [
             {
               name: this.#getRunContainerName(opts.runId),
@@ -210,7 +211,7 @@ class KubernetesTaskOperations implements TaskOperations {
             },
             {
               name: "populate-taskinfo",
-              image: "busybox",
+              image: "docker.io/library/busybox",
               command: ["/bin/sh", "-c"],
               args: ["printenv COORDINATOR_HOST | tee /etc/taskinfo/coordinator-host"],
               env: [
@@ -409,7 +410,7 @@ class KubernetesTaskOperations implements TaskOperations {
       `for i in $(seq ${retries}); do sleep 1; busybox wget -q -O- 127.0.0.1:8000/${type}?cause=${cause} && break; done`,
     ];
 
-    logger.log("getLifecycleCommand()", { exec });
+    logger.debug("getLifecycleCommand()", { exec });
 
     return exec;
   }

apps/kubernetes-provider/src/taskMonitor.ts

@@ -408,7 +408,7 @@ export class TaskMonitor {
     const createNonZeroExitPod = async (name: string, labels?: Record<string, string>) => {
       const container = {
         name,
-        image: "busybox",
+        image: "docker.io/library/busybox",
         command: ["sh"],
         args: ["-c", "exit 1"],
       } satisfies k8s.V1Container;
@@ -419,7 +419,7 @@ export class TaskMonitor {
     const createOoDiskPod = async (name: string, labels?: Record<string, string>) => {
       const container = {
         name,
-        image: "busybox",
+        image: "docker.io/library/busybox",
         command: ["sh"],
         args: [
           "-c",

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

@@ -0,0 +1,53 @@
+export function AISparkleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.9806 0.803884C14.8871 0.33646 14.4767 0 14 0C13.5233 0 13.1129 0.33646 13.0194 0.803884L12.7809 1.99644C12.7017 2.3923 12.3923 2.70174 11.9964 2.78091L10.8039 3.01942C10.3365 3.1129 10 3.52332 10 4C10 4.47668 10.3365 4.8871 10.8039 4.98058L11.9964 5.21909C12.3923 5.29826 12.7017 5.6077 12.7809 6.00356L13.0194 7.19612C13.1129 7.66354 13.5233 8 14 8C14.4767 8 14.8871 7.66354 14.9806 7.19612L15.2191 6.00356C15.2983 5.6077 15.6077 5.29826 16.0036 5.21909L17.1961 4.98058C17.6635 4.8871 18 4.47668 18 4C18 3.52332 17.6635 3.1129 17.1961 3.01942L16.0036 2.78091C15.6077 2.70174 15.2983 2.3923 15.2191 1.99644L14.9806 0.803884Z"
+        fill="url(#paint0_linear_11402_36656)"
+      />
+      <path
+        d="M5.94868 4.68377C5.81257 4.27543 5.43043 4 5 4C4.56957 4 4.18743 4.27543 4.05132 4.68377L3.36754 6.73509C3.26801 7.03369 3.03369 7.26801 2.73509 7.36754L0.683772 8.05132C0.27543 8.18743 0 8.56957 0 9C0 9.43043 0.27543 9.81257 0.683772 9.94868L2.73509 10.6325C3.03369 10.732 3.26801 10.9663 3.36754 11.2649L4.05132 13.3162C4.18743 13.7246 4.56957 14 5 14C5.43043 14 5.81257 13.7246 5.94868 13.3162L6.63246 11.2649C6.73199 10.9663 6.96631 10.732 7.26491 10.6325L9.31623 9.94868C9.72457 9.81257 10 9.43043 10 9C10 8.56957 9.72457 8.18743 9.31623 8.05132L7.26491 7.36754C6.96631 7.26801 6.73199 7.03369 6.63246 6.73509L5.94868 4.68377Z"
+        fill="url(#paint1_linear_11402_36656)"
+      />
+      <path
+        d="M12.9487 12.6838C12.8126 12.2754 12.4304 12 12 12C11.5696 12 11.1874 12.2754 11.0513 12.6838L10.8675 13.2351C10.768 13.5337 10.5337 13.768 10.2351 13.8675L9.68377 14.0513C9.27543 14.1874 9 14.5696 9 15C9 15.4304 9.27543 15.8126 9.68377 15.9487L10.2351 16.1325C10.5337 16.232 10.768 16.4663 10.8675 16.7649L11.0513 17.3162C11.1874 17.7246 11.5696 18 12 18C12.4304 18 12.8126 17.7246 12.9487 17.3162L13.1325 16.7649C13.232 16.4663 13.4663 16.232 13.7649 16.1325L14.3162 15.9487C14.7246 15.8126 15 15.4304 15 15C15 14.5696 14.7246 14.1874 14.3162 14.0513L13.7649 13.8675C13.4663 13.768 13.232 13.5337 13.1325 13.2351L12.9487 12.6838Z"
+        fill="url(#paint2_linear_11402_36656)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_11402_36656"
+          x1="9"
+          y1="0"
+          x2="9"
+          y2="18"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#E543FF" />
+          <stop offset="1" stopColor="#286399" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_11402_36656"
+          x1="9"
+          y1="0"
+          x2="9"
+          y2="18"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#E543FF" />
+          <stop offset="1" stopColor="#286399" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_11402_36656"
+          x1="9"
+          y1="0"
+          x2="9"
+          y2="18"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#E543FF" />
+          <stop offset="1" stopColor="#286399" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

apps/webapp/app/components/SetupCommands.tsx

@@ -206,3 +206,39 @@ export function TriggerDevStepV3() {
     </ClientTabs>
   );
 }
+
+export function TriggerLoginStepV3() {
+  return (
+    <ClientTabs defaultValue="npm">
+      <ClientTabsList>
+        <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
+        <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
+        <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
+      </ClientTabsList>
+      <ClientTabsContent value={"npm"}>
+        <ClipboardField
+          variant="primary/medium"
+          iconButton
+          className="mb-4"
+          value={`npx trigger.dev@${v3PackageTag} login`}
+        />
+      </ClientTabsContent>
+      <ClientTabsContent value={"pnpm"}>
+        <ClipboardField
+          variant="primary/medium"
+          iconButton
+          className="mb-4"
+          value={`pnpm dlx trigger.dev@${v3PackageTag} login`}
+        />
+      </ClientTabsContent>
+      <ClientTabsContent value={"yarn"}>
+        <ClipboardField
+          variant="primary/medium"
+          iconButton
+          className="mb-4"
+          value={`yarn dlx trigger.dev@${v3PackageTag} login`}
+        />
+      </ClientTabsContent>
+    </ClientTabs>
+  );
+}

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

@@ -4,6 +4,7 @@ import {
   ArrowRightOnRectangleIcon,
   BeakerIcon,
   ChartBarIcon,
+  ClockIcon,
   CursorArrowRaysIcon,
   IdentificationIcon,
   KeyIcon,
@@ -47,6 +48,7 @@ import {
   v3ProjectPath,
   v3ProjectSettingsPath,
   v3RunsPath,
+  v3SchedulesPath,
   v3TestPath,
 } from "~/utils/pathBuilder";
 import { Feedback } from "../Feedback";
@@ -571,6 +573,13 @@ function V3ProjectSideMenu({
         to={v3TestPath(organization, project)}
         data-action="test"
       />
+      <SideMenuItem
+        name="Schedules"
+        icon={ClockIcon}
+        iconColor="text-sun-500"
+        to={v3SchedulesPath(organization, project)}
+        data-action="schedules"
+      />
       <SideMenuItem
         name="API keys"
         icon={KeyIcon}

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

@@ -286,8 +286,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
 type LinkPropsType = Pick<
   LinkProps,
   "to" | "target" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "download"
-> &
-  React.ComponentProps<typeof ButtonContent>;
+> & { disabled?: boolean } & React.ComponentProps<typeof ButtonContent>;
 export const LinkButton = ({
   to,
   onClick,
@@ -295,6 +294,7 @@ export const LinkButton = ({
   onMouseEnter,
   onMouseLeave,
   download,
+  disabled = false,
   ...props
 }: LinkPropsType) => {
   const innerRef = useRef<HTMLAnchorElement>(null);
@@ -309,6 +309,19 @@ export const LinkButton = ({
     });
   }
 
+  if (disabled) {
+    return (
+      <div
+        className={cn(
+          "group pointer-events-none cursor-default opacity-40 outline-none",
+          props.fullWidth ? "w-full" : ""
+        )}
+      >
+        <ButtonContent {...props} />
+      </div>
+    );
+  }
+
   if (to.toString().startsWith("http") || to.toString().startsWith("/resources")) {
     return (
       <ExtLink

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

@@ -23,7 +23,7 @@ const variants = {
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
     label: "text-sm text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-0",
@@ -32,7 +32,7 @@ const variants = {
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
@@ -57,7 +57,7 @@ export type CheckboxProps = Omit<
   name?: string;
   value?: string;
   variant?: keyof typeof variants;
-  label?: string;
+  label?: React.ReactNode;
   description?: string;
   badges?: string[];
   className?: string;
@@ -137,7 +137,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           className={cn(
             inputPositionClasses,
             props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-700 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
+            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
           )}
           id={id}
           ref={ref}

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

@@ -1,3 +1,4 @@
+import { BellAlertIcon } 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";
@@ -5,11 +6,25 @@ import { useDateFieldState } from "@react-stately/datepicker";
 import { Granularity } from "@react-types/datepicker";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
-import { useLocales } from "./LocaleProvider";
 import { Button } from "./Buttons";
 
+const variants = {
+  small: {
+    fieldStyles: "h-5 text-sm rounded-sm px-0.5",
+    nowButtonVariant: "tertiary/small" as const,
+    clearButtonVariant: "minimal/small" as const,
+  },
+  medium: {
+    fieldStyles: "h-7 text-base rounded px-1",
+    nowButtonVariant: "tertiary/medium" as const,
+    clearButtonVariant: "minimal/medium" as const,
+  },
+};
+
+type Variant = keyof typeof variants;
+
 type DateFieldProps = {
-  label?: string;
+  label: string;
   defaultValue?: Date;
   minValue?: Date;
   maxValue?: Date;
@@ -20,6 +35,7 @@ type DateFieldProps = {
   showNowButton?: boolean;
   showClearButton?: boolean;
   onValueChange?: (value: Date | undefined) => void;
+  variant?: Variant;
 };
 
 export function DateField({
@@ -34,6 +50,7 @@ export function DateField({
   showGuide = false,
   showNowButton = false,
   showClearButton = false,
+  variant = "small",
 }: DateFieldProps) {
   const [value, setValue] = useState<undefined | CalendarDateTime>(
     utcDateToCalendarDate(defaultValue)
@@ -90,48 +107,50 @@ export function DateField({
 
   return (
     <div className={`flex flex-col items-start ${className || ""}`}>
-      <span {...labelProps} className="mb-1 ml-0.5 text-xs text-charcoal-300">
-        {label}
-      </span>
-      <div className="flex flex-row items-center gap-1">
+      <div className="flex flex-row items-center gap-1" aria-label={label}>
         <div
           {...fieldProps}
           ref={ref}
           className={cn(
-            "flex rounded-sm border border-charcoal-800 bg-charcoal-750 p-0.5 px-1.5 transition-colors focus-within:border-charcoal-500 hover:border-charcoal-700 focus-within:hover:border-charcoal-500",
+            "flex rounded-sm border bg-charcoal-700 p-0.5 transition focus-within:border-charcoal-600 hover:border-charcoal-600",
             fieldClassName
           )}
         >
-          <DateSegment segment={yearSegment} state={state} />
-          <DateSegment segment={literalSegment("/")} state={state} />
-          <DateSegment segment={monthSegment} state={state} />
-          <DateSegment segment={literalSegment("/")} state={state} />
-          <DateSegment segment={daySegment} state={state} />
-          <DateSegment segment={literalSegment(", ")} state={state} />
-          <DateSegment segment={hourSegment} state={state} />
-          <DateSegment segment={literalSegment(":")} state={state} />
-          <DateSegment segment={minuteSegment} state={state} />
-          <DateSegment segment={literalSegment(":")} state={state} />
-          <DateSegment segment={secondSegment} state={state} />
-          <DateSegment segment={literalSegment(" ")} state={state} />
-          <DateSegment segment={dayPeriodSegment} state={state} />
+          <DateSegment segment={yearSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment("/")} state={state} variant={variant} />
+          <DateSegment segment={monthSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment("/")} state={state} variant={variant} />
+          <DateSegment segment={daySegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(", ")} state={state} variant={variant} />
+          <DateSegment segment={hourSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(":")} state={state} variant={variant} />
+          <DateSegment segment={minuteSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(":")} state={state} variant={variant} />
+          <DateSegment segment={secondSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(" ")} state={state} variant={variant} />
+          <DateSegment segment={dayPeriodSegment} state={state} variant={variant} />
         </div>
         {showNowButton && (
           <Button
-            variant="tertiary/small"
+            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()));
               onValueChange?.(now);
             }}
           >
-            Now
+            <span className="text-text-dimmed transition group-hover:text-text-bright">Now</span>
           </Button>
         )}
         {showClearButton && (
           <Button
-            variant="tertiary/small"
+            type="button"
+            variant={variants[variant].clearButtonVariant}
             LeadingIcon={"close"}
+            leadingIconClassName="-mr-2"
             onClick={() => {
               setValue(undefined);
               onValueChange?.(undefined);
@@ -142,7 +161,9 @@ export function DateField({
               state.clearSegment("minute");
               state.clearSegment("second");
             }}
-          />
+          >
+            Clear
+          </Button>
         )}
       </div>
       {showGuide && (
@@ -172,11 +193,13 @@ function utcDateToCalendarDate(date?: Date) {
 type DateSegmentProps = {
   segment: DateSegment;
   state: DateFieldState;
+  variant: Variant;
 };
 
-function DateSegment({ segment, state }: DateSegmentProps) {
+function DateSegment({ segment, state, variant }: DateSegmentProps) {
   const ref = useRef<null | HTMLDivElement>(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
+  const sizeVariant = variants[variant];
 
   return (
     <div
@@ -186,23 +209,27 @@ function DateSegment({ segment, state }: DateSegmentProps) {
         ...segmentProps.style,
         minWidth: minWidthForSegment(segment),
       }}
-      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none focus:bg-indigo-500 focus:text-white ${
+      className={cn(
+        "group box-content text-center tabular-nums outline-none focus:bg-charcoal-600 focus:text-text-bright",
+        sizeVariant.fieldStyles,
         !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
-      }`}
+      )}
     >
       {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}
       <span
         aria-hidden="true"
-        className="block text-center italic text-charcoal-500 group-focus:text-white"
+        className="flex h-full items-center justify-center text-center text-charcoal-500 group-focus:text-text-bright"
         style={{
           visibility: segment.isPlaceholder ? undefined : "hidden",
-          height: segment.isPlaceholder ? "" : 0,
+          height: segment.isPlaceholder ? undefined : 0,
           pointerEvents: "none",
         }}
       >
         {segment.placeholder}
       </span>
-      {segment.isPlaceholder ? "" : segment.text}
+      <span className="flex h-full items-center justify-center">
+        {segment.isPlaceholder ? "" : segment.text}
+      </span>
     </div>
   );
 }
@@ -231,7 +258,7 @@ function DateSegmentGuide({ segment }: { segment: DateSegment }) {
       style={{
         minWidth: minWidthForSegment(segment),
       }}
-      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none ${
+      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums text-rose-500 outline-none ${
         !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
       }`}
     >

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

@@ -10,7 +10,7 @@ type DateTimeProps = {
 
 export const DateTime = ({
   date,
-  timeZone = "UTC",
+  timeZone,
   includeSeconds = true,
   includeTime = true,
 }: DateTimeProps) => {
@@ -20,7 +20,7 @@ export const DateTime = ({
 
   const initialFormattedDateTime = formatDateTime(
     realDate,
-    timeZone,
+    timeZone ?? "UTC",
     locales,
     includeSeconds,
     includeTime
@@ -32,7 +32,13 @@ export const DateTime = ({
     const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
 
     setFormattedDateTime(
-      formatDateTime(realDate, resolvedOptions.timeZone, locales, includeSeconds, includeTime)
+      formatDateTime(
+        realDate,
+        timeZone ?? resolvedOptions.timeZone,
+        locales,
+        includeSeconds,
+        includeTime
+      )
     );
   }, [locales, includeSeconds, realDate]);
 

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

@@ -1,29 +1,41 @@
 import * as React from "react";
 import { cn } from "~/utils/cn";
+import { InfoIconTooltip, SimpleTooltip } from "./Tooltip";
 
-const labelVariants = {
+const variants = {
   small: {
-    text: "font-sans text-sm font-normal",
+    text: "font-sans text-sm font-normal text-text-bright leading-tight flex items-center gap-1",
   },
   medium: {
-    text: "font-sans text-sm leading-5 font-medium",
+    text: "font-sans text-sm text-text-bright leading-tight flex items-center gap-1",
   },
   large: {
-    text: "font-sans text-base leading-6 font-medium",
+    text: "font-sans text-base font-medium text-text-bright leading-tight flex items-center gap-1",
   },
 };
 
 type LabelProps = React.AllHTMLAttributes<HTMLLabelElement> & {
   className?: string;
   children: React.ReactNode;
-  variant?: keyof typeof labelVariants;
+  variant?: keyof typeof variants;
+  required?: boolean;
+  tooltip?: React.ReactNode;
 };
 
-export function Label({ className, children, variant = "medium", ...props }: LabelProps) {
-  const variation = labelVariants[variant];
+export function Label({
+  className,
+  children,
+  variant = "medium",
+  required = true,
+  tooltip,
+  ...props
+}: LabelProps) {
+  const variation = variants[variant];
   return (
     <label className={cn(variation.text, className)} {...props}>
       {children}
+      {tooltip ? <InfoIconTooltip content={tooltip} /> : null}
+      {!required && <span className="text-text-dimmed"> (optional)</span>}
     </label>
   );
 }

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

@@ -1,16 +1,18 @@
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { ChevronLeftIcon } from "@heroicons/react/24/solid";
 import { Link, useLocation } from "@remix-run/react";
-import { LinkDisabled } from "./LinkWithDisabled";
 import { cn } from "~/utils/cn";
-import { ButtonContent, LinkButton } from "./Buttons";
+import { ButtonContent } from "./Buttons";
+import { LinkDisabled } from "./LinkWithDisabled";
 
 export function PaginationControls({
   currentPage,
   totalPages,
+  showPageNumbers = true,
 }: {
   currentPage: number;
   totalPages: number;
+  showPageNumbers?: boolean;
 }) {
   const location = useLocation();
   if (totalPages <= 1) {
@@ -30,9 +32,11 @@ export function PaginationControls({
         </ButtonContent>
       </LinkDisabled>
 
-      {calculatePageLinks(currentPage, totalPages).map((page, i) => (
-        <PageLinkComponent page={page} key={i} location={location} />
-      ))}
+      {showPageNumbers
+        ? calculatePageLinks(currentPage, totalPages).map((page, i) => (
+            <PageLinkComponent page={page} key={i} location={location} />
+          ))
+        : null}
 
       <LinkDisabled
         to={pageUrl(location, currentPage + 1)}

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

@@ -22,7 +22,7 @@ const variants = {
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition data-[disabled]:opacity-70 data-[disabled]:hover:bg-transparent data-[state=checked]:bg-charcoal-850",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition data-[disabled]:opacity-70 data-[disabled]:hover:bg-transparent data-[state=checked]:bg-charcoal-850",
     label: "text-sm text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-0",
@@ -30,7 +30,7 @@ const variants = {
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition data-[state=checked]:bg-charcoal-850 data-[disabled]:opacity-70",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition data-[state=checked]:bg-charcoal-850 data-[disabled]:opacity-70",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
@@ -38,7 +38,7 @@ const variants = {
   },
   description: {
     button:
-      "w-full p-2.5 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-800 border rounded-sm",
+      "w-full p-2.5 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-600 border rounded-sm",
     label: "text-text-bright font-semibold -mt-1 text-left",
     description: "text-text-dimmed -mt-0 text-left",
     inputPosition: "mt-0",
@@ -46,7 +46,7 @@ const variants = {
   },
   icon: {
     button:
-      "w-full p-2.5 pb-4 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-800 border rounded-sm",
+      "w-full p-2.5 pb-4 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-600 border rounded-sm",
     label: "text-text-bright font-semibold -mt-1 text-left",
     description: "text-text-dimmed -mt-0 text-left",
     inputPosition: "mt-0",
@@ -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-700 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:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         boxClassName
       )}
     >
@@ -129,7 +129,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-700 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:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             variation.inputPosition
           )}
         >

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

@@ -2,8 +2,14 @@ import { Fragment } from "react";
 import { Modifier, ShortcutDefinition } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { useOperatingSystem } from "./OperatingSystemProvider";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+} from "@heroicons/react/20/solid";
 
-const variants = {
+export const variants = {
   small:
     "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase",
   medium:
@@ -23,7 +29,7 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps)
   const isMac = platform === "mac";
   let relevantShortcut = "mac" in shortcut ? (isMac ? shortcut.mac : shortcut.windows) : shortcut;
   const modifiers = relevantShortcut.modifiers ?? [];
-  const character = keyString(relevantShortcut.key, isMac);
+  const character = keyString(relevantShortcut.key, isMac, variant);
 
   return (
     <span className={cn(variants[variant], className)}>
@@ -35,10 +41,22 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps)
   );
 }
 
-function keyString(key: String, isMac: boolean) {
+function keyString(key: String, isMac: boolean, size: "small" | "medium") {
+  key = key.toLowerCase();
+
+  const className = size === "small" ? "w-2.5 h-4" : "w-3 h-5";
+
   switch (key) {
     case "enter":
       return isMac ? "↵" : key;
+    case "arrowdown":
+      return <ChevronDownIcon className={className} />;
+    case "arrowup":
+      return <ChevronUpIcon className={className} />;
+    case "arrowleft":
+      return <ChevronLeftIcon className={className} />;
+    case "arrowright":
+      return <ChevronRightIcon className={className} />;
     default:
       return key;
   }

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

@@ -49,7 +49,7 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
 
 type TableBodyProps = {
   className?: string;
-  children: ReactNode;
+  children?: ReactNode;
 };
 
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "~/utils/cn";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
 
 const variantClasses = {
   basic:
@@ -83,4 +84,22 @@ function SimpleTooltip({
   );
 }
 
+export function InfoIconTooltip({
+  content,
+  buttonClassName,
+}: {
+  content: React.ReactNode;
+  buttonClassName?: string;
+}) {
+  return (
+    <SimpleTooltip
+      button={
+        <InformationCircleIcon className={cn("h-3.5 w-3.5 text-text-dimmed", buttonClassName)} />
+      }
+      content={content}
+      variant="dark"
+    />
+  );
+}
+
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, SimpleTooltip };

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

@@ -1,10 +1,10 @@
 import { VirtualItem, Virtualizer, useVirtualizer } from "@tanstack/react-virtual";
+import { motion } from "framer-motion";
 import { MutableRefObject, RefObject, useCallback, useEffect, useReducer, useRef } from "react";
 import { UnmountClosed } from "react-collapse";
 import { cn } from "~/utils/cn";
 import { NodeState, NodesState, reducer } from "./reducer";
 import { applyFilterToState, concreteStateFromInput, selectedIdFromState } from "./utils";
-import { motion } from "framer-motion";
 
 export type TreeViewProps<TData> = {
   tree: FlatTree<TData>;
@@ -165,6 +165,11 @@ export type UseTreeStateOutput = {
   expandNode: (id: string, scrollToNode?: boolean) => void;
   collapseNode: (id: string) => void;
   toggleExpandNode: (id: string, scrollToNode?: boolean) => void;
+  expandAllBelowDepth: (depth: number) => void;
+  collapseAllBelowDepth: (depth: number) => void;
+  expandLevel: (level: number) => void;
+  collapseLevel: (level: number) => void;
+  toggleExpandLevel: (level: number) => void;
   selectFirstVisibleNode: (scrollToNode?: boolean) => void;
   selectLastVisibleNode: (scrollToNode?: boolean) => void;
   selectNextVisibleNode: (scrollToNode?: boolean) => void;
@@ -333,6 +338,41 @@ export function useTree<TData>({
     [state]
   );
 
+  const expandAllBelowDepth = useCallback(
+    (depth: number) => {
+      dispatch({ type: "EXPAND_ALL_BELOW_DEPTH", payload: { tree, depth } });
+    },
+    [state]
+  );
+
+  const collapseAllBelowDepth = useCallback(
+    (depth: number) => {
+      dispatch({ type: "COLLAPSE_ALL_BELOW_DEPTH", payload: { tree, depth } });
+    },
+    [state]
+  );
+
+  const expandLevel = useCallback(
+    (level: number) => {
+      dispatch({ type: "EXPAND_LEVEL", payload: { tree, level } });
+    },
+    [state]
+  );
+
+  const collapseLevel = useCallback(
+    (level: number) => {
+      dispatch({ type: "COLLAPSE_LEVEL", payload: { tree, level } });
+    },
+    [state]
+  );
+
+  const toggleExpandLevel = useCallback(
+    (level: number) => {
+      dispatch({ type: "TOGGLE_EXPAND_LEVEL", payload: { tree, level } });
+    },
+    [state]
+  );
+
   const getTreeProps = useCallback(() => {
     return {
       role: "tree",
@@ -368,25 +408,48 @@ export function useTree<TData>({
           }
           case "Left":
           case "ArrowLeft": {
+            e.preventDefault();
+
             const selected = selectedIdFromState(state.nodes);
             if (selected) {
               const treeNode = tree.find((node) => node.id === selected);
-              if (treeNode && treeNode.hasChildren && state.nodes[selected].expanded) {
+
+              if (e.altKey) {
+                if (treeNode && treeNode.hasChildren) {
+                  collapseLevel(treeNode.level);
+                }
+                break;
+              }
+
+              const shouldCollapse =
+                treeNode && treeNode.hasChildren && state.nodes[selected].expanded;
+              if (shouldCollapse) {
                 collapseNode(selected);
               } else {
                 selectParentNode(true);
               }
             }
-            e.preventDefault();
+
             break;
           }
           case "Right":
           case "ArrowRight": {
+            e.preventDefault();
+
             const selected = selectedIdFromState(state.nodes);
+
             if (selected) {
+              const treeNode = tree.find((node) => node.id === selected);
+
+              if (e.altKey) {
+                if (treeNode && treeNode.hasChildren) {
+                  expandLevel(treeNode.level);
+                }
+                break;
+              }
+
               expandNode(selected, true);
             }
-            e.preventDefault();
             break;
           }
           case "Escape": {
@@ -427,6 +490,11 @@ export function useTree<TData>({
     expandNode,
     collapseNode,
     toggleExpandNode,
+    expandAllBelowDepth,
+    collapseAllBelowDepth,
+    expandLevel,
+    collapseLevel,
+    toggleExpandLevel,
     selectFirstVisibleNode,
     selectLastVisibleNode,
     selectNextVisibleNode,

apps/webapp/app/components/primitives/TreeView/reducer.ts

@@ -91,6 +91,46 @@ type ToggleExpandNodeAction = {
   } & WithScrollToNode;
 };
 
+type ExpandAllBelowDepthAction = {
+  type: "EXPAND_ALL_BELOW_DEPTH";
+  payload: {
+    depth: number;
+    tree: FlatTree<any>;
+  };
+};
+
+type CollapseAllBelowDepthAction = {
+  type: "COLLAPSE_ALL_BELOW_DEPTH";
+  payload: {
+    depth: number;
+    tree: FlatTree<any>;
+  };
+};
+
+type ExpandLevelAction = {
+  type: "EXPAND_LEVEL";
+  payload: {
+    level: number;
+    tree: FlatTree<any>;
+  };
+};
+
+type CollapseLevelAction = {
+  type: "COLLAPSE_LEVEL";
+  payload: {
+    level: number;
+    tree: FlatTree<any>;
+  };
+};
+
+type ToggleExpandLevelAction = {
+  type: "TOGGLE_EXPAND_LEVEL";
+  payload: {
+    level: number;
+    tree: FlatTree<any>;
+  };
+};
+
 type SelectFirstVisibleNodeAction = {
   type: "SELECT_FIRST_VISIBLE_NODE";
   payload: {
@@ -135,6 +175,11 @@ export type Action =
   | ExpandNodeAction
   | CollapseNodeAction
   | ToggleExpandNodeAction
+  | ExpandAllBelowDepthAction
+  | CollapseAllBelowDepthAction
+  | ExpandLevelAction
+  | CollapseLevelAction
+  | ToggleExpandLevelAction
   | SelectFirstVisibleNodeAction
   | SelectLastVisibleNodeAction
   | SelectNextVisibleNodeAction
@@ -229,6 +274,109 @@ export function reducer(state: TreeState, action: Action): TreeState {
         });
       }
     }
+    case "EXPAND_ALL_BELOW_DEPTH": {
+      const nodesToExpand = action.payload.tree.filter(
+        (n) => n.level >= action.payload.depth && n.hasChildren
+      );
+
+      const newNodes = Object.fromEntries(
+        Object.entries(state.nodes).map(([key, value]) => [
+          key,
+          {
+            ...value,
+            expanded: nodesToExpand.find((n) => n.id === key) ? true : value.expanded,
+          },
+        ])
+      );
+
+      const visibleNodes = applyVisibility(action.payload.tree, newNodes);
+      return { nodes: visibleNodes, changes: generateChanges(state.nodes, visibleNodes) };
+    }
+    case "COLLAPSE_ALL_BELOW_DEPTH": {
+      const nodesToCollapse = action.payload.tree.filter(
+        (n) => n.level >= action.payload.depth && n.hasChildren
+      );
+
+      const newNodes = Object.fromEntries(
+        Object.entries(state.nodes).map(([key, value]) => [
+          key,
+          {
+            ...value,
+            expanded: nodesToCollapse.find((n) => n.id === key) ? false : value.expanded,
+          },
+        ])
+      );
+
+      const visibleNodes = applyVisibility(action.payload.tree, newNodes);
+      return { nodes: visibleNodes, changes: generateChanges(state.nodes, visibleNodes) };
+    }
+    case "EXPAND_LEVEL": {
+      const nodesToExpand = action.payload.tree.filter(
+        (n) => n.level <= action.payload.level && n.hasChildren
+      );
+
+      const newNodes = Object.fromEntries(
+        Object.entries(state.nodes).map(([key, value]) => [
+          key,
+          {
+            ...value,
+            expanded: nodesToExpand.find((n) => n.id === key) ? true : value.expanded,
+          },
+        ])
+      );
+
+      const visibleNodes = applyVisibility(action.payload.tree, newNodes);
+      return { nodes: visibleNodes, changes: generateChanges(state.nodes, visibleNodes) };
+    }
+    case "COLLAPSE_LEVEL": {
+      const nodesToCollapse = action.payload.tree.filter(
+        (n) => n.level === action.payload.level && n.hasChildren
+      );
+
+      const newNodes = Object.fromEntries(
+        Object.entries(state.nodes).map(([key, value]) => [
+          key,
+          {
+            ...value,
+            expanded: nodesToCollapse.find((n) => n.id === key) ? false : value.expanded,
+          },
+        ])
+      );
+
+      const visibleNodes = applyVisibility(action.payload.tree, newNodes);
+      return { nodes: visibleNodes, changes: generateChanges(state.nodes, visibleNodes) };
+    }
+    case "TOGGLE_EXPAND_LEVEL": {
+      //first get the first item at that level in the tree. If it is expanded, collapse all nodes at that level
+      //if it is collapsed, expand all nodes at that level
+      const nodesAtLevel = action.payload.tree.filter(
+        (n) => n.level === action.payload.level && n.hasChildren
+      );
+      const firstNode = nodesAtLevel[0];
+      if (!firstNode) {
+        return state;
+      }
+
+      const currentlyExpanded = state.nodes[firstNode.id]?.expanded ?? true;
+      const currentVisible = state.nodes[firstNode.id]?.visible ?? true;
+      if (currentlyExpanded && currentVisible) {
+        return reducer(state, {
+          type: "COLLAPSE_LEVEL",
+          payload: {
+            level: action.payload.level,
+            tree: action.payload.tree,
+          },
+        });
+      } else {
+        return reducer(state, {
+          type: "EXPAND_LEVEL",
+          payload: {
+            level: action.payload.level,
+            tree: action.payload.tree,
+          },
+        });
+      }
+    }
     case "SELECT_FIRST_VISIBLE_NODE": {
       const node = firstVisibleNode(action.payload.tree, state.nodes);
       if (node) {

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

@@ -32,6 +32,7 @@ import {
 import { TimeFrameFilter } from "./TimeFrameFilter";
 import { Button } from "../primitives/Buttons";
 import { useCallback } from "react";
+import assertNever from "assert-never";
 
 export function RunsFilters() {
   const navigate = useNavigate();
@@ -182,8 +183,7 @@ export function FilterStatusIcon({
     case "FAILED":
       return <XCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -205,8 +205,7 @@ export function filterStatusTitle(status: FilterableStatus): string {
     case "TIMEDOUT":
       return "Timed out";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -228,8 +227,7 @@ export function filterStatusClassNameColor(status: FilterableStatus): string {
     case "TIMEDOUT":
       return "text-amber-300";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }

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

@@ -11,6 +11,7 @@ import type { JobRunStatus } from "@trigger.dev/database";
 import { cn } from "~/utils/cn";
 import { Spinner } from "../primitives/Spinner";
 import { z } from "zod";
+import assertNever from "assert-never";
 
 export function RunStatus({ status }: { status: JobRunStatus }) {
   return (
@@ -51,8 +52,7 @@ export function RunStatusIcon({ status, className }: { status: JobRunStatus; cla
     case "CANCELED":
       return <NoSymbolIcon className={cn(runStatusClassNameColor(status), className)} />;
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -89,8 +89,7 @@ export function runStatusTitle(status: JobRunStatus): string {
     case "INVALID_PAYLOAD":
       return "Invalid payload";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -123,8 +122,7 @@ export function runStatusClassNameColor(status: JobRunStatus): string {
     case "CANCELED":
       return "text-charcoal-500";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }

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

@@ -7,6 +7,7 @@ import { DateField } from "../primitives/DateField";
 import { formatDateTime } from "../primitives/DateTime";
 import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
+import { Label } from "../primitives/Label";
 
 type RunTimeFrameFilterProps = {
   from?: number;
@@ -190,7 +191,7 @@ const timeFrameValues = [
 
 export type RelativeTimeFrameItem = (typeof timeFrameValues)[number];
 
-function AbsoluteTimeFrame({
+export function AbsoluteTimeFrame({
   from,
   to,
   onValueChange,
@@ -202,7 +203,8 @@ function AbsoluteTimeFrame({
   return (
     <div className="flex flex-col gap-2 pt-2">
       <div className="flex flex-col justify-start gap-2">
-        <div className="flex flex-row items-center gap-1">
+        <div className="space-y-1">
+          <Label>From (UTC)</Label>
           <DateField
             label="From (UTC)"
             defaultValue={from}
@@ -214,7 +216,8 @@ function AbsoluteTimeFrame({
             showClearButton
           />
         </div>
-        <div className="flex flex-row items-center gap-1">
+        <div className="space-y-1">
+          <Label>To (UTC)</Label>
           <DateField
             label="To (UTC)"
             defaultValue={to}

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

@@ -5,6 +5,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import { WorkerDeploymentStatus } from "@trigger.dev/database";
+import assertNever from "assert-never";
 import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
 
@@ -54,8 +55,7 @@ export function DeploymentStatusIcon({
         />
       );
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -74,8 +74,7 @@ export function deploymentStatusClassNameColor(status: WorkerDeploymentStatus):
     case "FAILED":
       return "text-error";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -97,8 +96,7 @@ export function deploymentStatusTitle(status: WorkerDeploymentStatus): string {
     case "FAILED":
       return "Failed";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }

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

@@ -0,0 +1,20 @@
+import { BoltSlashIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
+
+export function EnabledStatus({ enabled }: { enabled: boolean }) {
+  switch (enabled) {
+    case true:
+      return (
+        <div className="flex items-center gap-1 text-xs text-success">
+          <CheckCircleIcon className="h-4 w-4" />
+          Enabled
+        </div>
+      );
+    case false:
+      return (
+        <div className="text-dimmed flex items-center gap-1 text-xs">
+          <BoltSlashIcon className="h-4 w-4" />
+          Disabled
+        </div>
+      );
+  }
+}

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

@@ -1,4 +1,4 @@
-import { TrashIcon } from "@heroicons/react/20/solid";
+import { XMarkIcon } from "@heroicons/react/20/solid";
 import { useNavigate } from "@remix-run/react";
 import type { TaskRunStatus as TaskRunStatusType } from "@trigger.dev/database";
 import { RuntimeEnvironment, TaskRunAttemptStatus, TaskRunStatus } from "@trigger.dev/database";
@@ -247,7 +247,7 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
 
       <TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
 
-      <Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={TrashIcon} />
+      <Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={XMarkIcon} />
     </div>
   );
 }

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

@@ -1,6 +1,5 @@
 import {
   ClockIcon,
-  FolderIcon,
   HandRaisedIcon,
   InformationCircleIcon,
   Squares2X2Icon,
@@ -41,6 +40,8 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
   switch (name) {
     case "task":
       return <TaskIcon className={cn(className, "text-blue-500")} />;
+    case "scheduled":
+      return <ClockIcon className={cn(className, "text-sun-500")} />;
     case "attempt":
       return <AttemptIcon className={cn(className, "text-text-dimmed")} />;
     case "wait":

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

@@ -0,0 +1,162 @@
+import { TrashIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { useNavigate } from "@remix-run/react";
+import { RuntimeEnvironment } from "@trigger.dev/database";
+import { useCallback } from "react";
+import { z } from "zod";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { EnvironmentLabel } from "../../environments/EnvironmentLabel";
+import { Button } from "../../primitives/Buttons";
+import { Paragraph } from "../../primitives/Paragraph";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../primitives/Select";
+import { Input } from "~/components/primitives/Input";
+import { useDebounce } from "~/hooks/useDebounce";
+import { useThrottle } from "~/hooks/useThrottle";
+
+export const ScheduleListFilters = z.object({
+  page: z.coerce.number().default(1),
+  tasks: z
+    .string()
+    .optional()
+    .transform((value) => (value ? value.split(",") : undefined)),
+  environments: z
+    .string()
+    .optional()
+    .transform((value) => (value ? value.split(",") : undefined)),
+  search: z.string().optional(),
+});
+
+export type ScheduleListFilters = z.infer<typeof ScheduleListFilters>;
+
+const All = "ALL";
+
+type DisplayableEnvironment = Pick<RuntimeEnvironment, "type" | "id"> & {
+  userName?: string;
+};
+
+type ScheduleFiltersProps = {
+  possibleEnvironments: DisplayableEnvironment[];
+  possibleTasks: string[];
+};
+
+export function ScheduleFilters({ possibleEnvironments, possibleTasks }: ScheduleFiltersProps) {
+  const navigate = useNavigate();
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const { environments, tasks, page, search } = ScheduleListFilters.parse(
+    Object.fromEntries(searchParams.entries())
+  );
+
+  const handleFilterChange = useCallback((filterType: string, value: string | undefined) => {
+    if (value) {
+      searchParams.set(filterType, value);
+    } else {
+      searchParams.delete(filterType);
+    }
+    searchParams.delete("page");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  const handleTaskChange = useCallback((value: string | typeof All) => {
+    handleFilterChange("tasks", value === "ALL" ? undefined : value);
+  }, []);
+
+  const handleEnvironmentChange = useCallback((value: string | typeof All) => {
+    handleFilterChange("environments", value === "ALL" ? undefined : value);
+  }, []);
+
+  const handleSearchChange = useThrottle((value: string) => {
+    handleFilterChange("search", value.length === 0 ? undefined : value);
+  }, 300);
+
+  const clearFilters = useCallback(() => {
+    searchParams.delete("page");
+    searchParams.delete("enabled");
+    searchParams.delete("tasks");
+    searchParams.delete("environments");
+    searchParams.delete("search");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  return (
+    <div className="flex w-full flex-row">
+      <Input
+        name="search"
+        placeholder="Search schedule id, external id, deduplication id or CRON pattern"
+        icon="search"
+        variant="tertiary"
+        className="grow"
+        defaultValue={search}
+        onChange={(e) => handleSearchChange(e.target.value)}
+      />
+      <SelectGroup>
+        <Select
+          name="environment"
+          value={environments?.at(0) ?? "ALL"}
+          onValueChange={handleEnvironmentChange}
+        >
+          <SelectTrigger size="minimal" width="full">
+            <SelectValue
+              placeholder={"Select environment"}
+              className="ml-2 whitespace-nowrap p-0"
+            />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph
+                variant="extra-small"
+                className="whitespace-nowrap pl-0.5 transition group-hover:text-text-bright"
+              >
+                All environments
+              </Paragraph>
+            </SelectItem>
+            {possibleEnvironments.map((env) => (
+              <SelectItem key={env.id} value={env.id}>
+                <div className="flex items-center gap-x-2">
+                  <EnvironmentLabel environment={env} userName={env.userName} />
+                  <Paragraph variant="extra-small">environment</Paragraph>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+
+      <SelectGroup>
+        <Select name="tasks" value={tasks?.at(0) ?? "ALL"} onValueChange={handleTaskChange}>
+          <SelectTrigger size="minimal" width="full">
+            <SelectValue placeholder="Select task" className="ml-2 p-0" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph
+                variant="extra-small"
+                className="whitespace-nowrap pl-0.5 transition group-hover:text-text-bright"
+              >
+                All tasks
+              </Paragraph>
+            </SelectItem>
+            {possibleTasks.map((task) => (
+              <SelectItem key={task} value={task}>
+                <Paragraph
+                  variant="extra-small"
+                  className="pl-0.5 transition group-hover:text-text-bright"
+                >
+                  {task}
+                </Paragraph>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+
+      <Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={XMarkIcon} />
+    </div>
+  );
+}

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

@@ -73,14 +73,7 @@ export function SpanCodePathAccessory({
     >
       {accessory.items.map((item, index) => (
         <Fragment key={index}>
-          <span
-            className={cn(
-              "truncate",
-              index === accessory.items.length - 1 ? "text-sun-100" : "text-text-dimmed"
-            )}
-          >
-            {item.text}
-          </span>
+          <span className={cn("truncate", "text-text-dimmed")}>{item.text}</span>
           {index < accessory.items.length - 1 && (
             <span className="text-text-dimmed">
               <ChevronRightIcon className="h-4 w-4" />

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

@@ -27,7 +27,7 @@ type TaskFunctionNameProps = {
 
 export function TaskFunctionName({ variant, functionName, className }: TaskFunctionNameProps) {
   return (
-    <InlineCode variant={variant} className={cn("text-sun-100", className)}>
+    <InlineCode variant={variant} className={cn("text-text-dimmed", className)}>
       {`${functionName}()`}
     </InlineCode>
   );

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

@@ -8,6 +8,7 @@ import {
 } from "@heroicons/react/20/solid";
 import type { TaskRunAttemptStatus as TaskRunAttemptStatusType } from "@trigger.dev/database";
 import { TaskRunAttemptStatus } from "@trigger.dev/database";
+import assertNever from "assert-never";
 import { SnowflakeIcon } from "lucide-react";
 import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
@@ -72,8 +73,7 @@ export function TaskRunAttemptStatusIcon({
     case "COMPLETED":
       return <CheckCircleIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -99,8 +99,7 @@ export function runAttemptStatusClassNameColor(status: ExtendedTaskAttemptStatus
     case "COMPLETED":
       return "text-success";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -126,8 +125,7 @@ export function runAttemptStatusTitle(status: ExtendedTaskAttemptStatus | null):
     case "COMPLETED":
       return "Completed";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }

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

@@ -10,6 +10,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import { TaskRunStatus } from "@trigger.dev/database";
+import assertNever from "assert-never";
 import { SnowflakeIcon } from "lucide-react";
 import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
@@ -29,6 +30,14 @@ const taskRunStatusDescriptions: Record<TaskRunStatus, string> = {
   CRASHED: "Task has crashed and won't be retried",
 };
 
+export const QUEUED_STATUSES: TaskRunStatus[] = ["PENDING", "WAITING_FOR_DEPLOY"];
+
+export const RUNNING_STATUSES: TaskRunStatus[] = [
+  "EXECUTING",
+  "RETRYING_AFTER_FAILURE",
+  "WAITING_TO_RESUME",
+];
+
 export function descriptionForTaskRunStatus(status: TaskRunStatus): string {
   return taskRunStatusDescriptions[status];
 }
@@ -88,8 +97,7 @@ export function TaskRunStatusIcon({
       return <FireIcon className={cn(runStatusClassNameColor(status), className)} />;
 
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -120,8 +128,7 @@ export function runStatusClassNameColor(status: TaskRunStatus): string {
     case "CRASHED":
       return "text-error";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }
@@ -153,8 +160,7 @@ export function runStatusTitle(status: TaskRunStatus): string {
     case "CRASHED":
       return "Crashed";
     default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
+      assertNever(status);
     }
   }
 }

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

@@ -1,10 +1,16 @@
+import { ArrowPathIcon, StopCircleIcon } from "@heroicons/react/20/solid";
 import { StopIcon } from "@heroicons/react/24/outline";
 import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
+import { useLocation } from "@remix-run/react";
+import { formatDuration } from "@trigger.dev/core/v3";
 import { User } from "@trigger.dev/database";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
+import { useEnvironments } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { RunListAppliedFilters, RunListItem } from "~/presenters/v3/RunListPresenter.server";
-import { docsPath, v3RunPath, v3TestPath } from "~/utils/pathBuilder";
+import { docsPath, v3RunSpanPath, v3TestPath } from "~/utils/pathBuilder";
 import { EnvironmentLabel } from "../../environments/EnvironmentLabel";
 import { DateTime } from "../../primitives/DateTime";
 import { Paragraph } from "../../primitives/Paragraph";
@@ -14,21 +20,14 @@ import {
   TableBlankRow,
   TableBody,
   TableCell,
-  TableCellChevron,
   TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
 } from "../../primitives/Table";
-import { formatDuration } from "@trigger.dev/core/v3";
-import { TaskRunStatusCombo } from "./TaskRunStatus";
-import { useEnvironments } from "~/hooks/useEnvironments";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { ArrowPathIcon, StopCircleIcon } from "@heroicons/react/20/solid";
-import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { CancelRunDialog } from "./CancelRunDialog";
-import { useLocation } from "@remix-run/react";
 import { ReplayRunDialog } from "./ReplayRunDialog";
+import { TaskRunStatusCombo } from "./TaskRunStatus";
 
 type RunsTableProps = {
   total: number;
@@ -37,7 +36,6 @@ type RunsTableProps = {
   showJob?: boolean;
   runs: RunListItem[];
   isLoading?: boolean;
-  currentUser: User;
 };
 
 export function TaskRunsTable({
@@ -46,7 +44,6 @@ export function TaskRunsTable({
   filters,
   runs,
   isLoading = false,
-  currentUser,
 }: RunsTableProps) {
   const organization = useOrganization();
   const project = useProject();
@@ -78,16 +75,17 @@ export function TaskRunsTable({
           <BlankState isLoading={isLoading} filters={filters} />
         ) : (
           runs.map((run) => {
-            const path = v3RunPath(organization, project, run);
-            const usernameForEnv =
-              currentUser.id !== run.environment.userId ? run.environment.userName : undefined;
+            const path = v3RunSpanPath(organization, project, run, { spanId: run.spanId });
             return (
               <TableRow key={run.id}>
                 <TableCell to={path}>#{run.number}</TableCell>
                 <TableCell to={path}>{run.taskIdentifier}</TableCell>
                 <TableCell to={path}>{run.version ?? "–"}</TableCell>
                 <TableCell to={path}>
-                  <EnvironmentLabel environment={run.environment} userName={usernameForEnv} />
+                  <EnvironmentLabel
+                    environment={run.environment}
+                    userName={run.environment.userName}
+                  />
                 </TableCell>
                 <TableCell to={path}>
                   <TaskRunStatusCombo status={run.status} />

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

@@ -0,0 +1,36 @@
+import { ClockIcon } from "@heroicons/react/20/solid";
+import { TaskTriggerSource } from "@trigger.dev/database";
+import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { cn } from "~/utils/cn";
+
+export function TaskTriggerSourceIcon({
+  source,
+  className,
+}: {
+  source: TaskTriggerSource;
+  className?: string;
+}) {
+  switch (source) {
+    case "STANDARD": {
+      return (
+        <div className={cn("grid size-4 place-items-center text-blue-500", className)}>
+          <TaskIcon className="size-[87.5%]" />
+        </div>
+      );
+    }
+    case "SCHEDULED": {
+      return <ClockIcon className={cn("size-4 text-sun-500", className)} />;
+    }
+  }
+}
+
+export function taskTriggerSourceDescription(source: TaskTriggerSource) {
+  switch (source) {
+    case "STANDARD": {
+      return "Standard task";
+    }
+    case "SCHEDULED": {
+      return "Scheduled task";
+    }
+  }
+}

apps/webapp/app/db.server.ts

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { logger } from "./services/logger.server";
 import { env } from "./env.server";
 import { singleton } from "./utils/singleton";
+import { isValidDatabaseUrl } from "./utils/db";
 
 export type PrismaTransactionClient = Omit<
   PrismaClient,
@@ -69,23 +70,21 @@ export { Prisma };
 
 export const prisma = singleton("prisma", getClient);
 
+export const $replica: Omit<PrismaClient, "$transaction"> = singleton(
+  "replica",
+  () => getReplicaClient() ?? prisma
+);
+
 function getClient() {
   const { DATABASE_URL } = process.env;
   invariant(typeof DATABASE_URL === "string", "DATABASE_URL env var not set");
 
-  const databaseUrl = new URL(DATABASE_URL);
+  const databaseUrl = extendQueryParams(DATABASE_URL, {
+    connection_limit: env.DATABASE_CONNECTION_LIMIT.toString(),
+    pool_timeout: env.DATABASE_POOL_TIMEOUT.toString(),
+  });
 
-  // We need to add the connection_limit and pool_timeout query params to the url, in a way that works if the DATABASE_URL already has query params
-  const query = databaseUrl.searchParams;
-  query.set("connection_limit", env.DATABASE_CONNECTION_LIMIT.toString());
-  query.set("pool_timeout", env.DATABASE_POOL_TIMEOUT.toString());
-  databaseUrl.search = query.toString();
-
-  // Remove the username:password in the url and print that to the console
-  const urlWithoutCredentials = new URL(databaseUrl.href);
-  urlWithoutCredentials.password = "";
-
-  console.log(`🔌 setting up prisma client to ${urlWithoutCredentials.toString()}`);
+  console.log(`🔌 setting up prisma client to ${redactUrlSecrets(databaseUrl)}`);
 
   const client = new PrismaClient({
     datasources: {
@@ -133,8 +132,90 @@ function getClient() {
   return client;
 }
 
+function getReplicaClient() {
+  if (!env.DATABASE_READ_REPLICA_URL) {
+    console.log(`🔌 No database replica, using the regular client`);
+    return;
+  }
+
+  const replicaUrl = extendQueryParams(env.DATABASE_READ_REPLICA_URL, {
+    connection_limit: env.DATABASE_CONNECTION_LIMIT.toString(),
+    pool_timeout: env.DATABASE_POOL_TIMEOUT.toString(),
+  });
+
+  console.log(`🔌 setting up read replica connection to ${redactUrlSecrets(replicaUrl)}`);
+
+  const replicaClient = new PrismaClient({
+    datasources: {
+      db: {
+        url: replicaUrl.href,
+      },
+    },
+    log: [
+      {
+        emit: "stdout",
+        level: "error",
+      },
+      {
+        emit: "stdout",
+        level: "info",
+      },
+      {
+        emit: "stdout",
+        level: "warn",
+      },
+    ],
+  });
+
+  // connect eagerly
+  replicaClient.$connect();
+
+  console.log(`🔌 read replica connected`);
+
+  return replicaClient;
+}
+
+function extendQueryParams(hrefOrUrl: string | URL, queryParams: Record<string, string>) {
+  const url = new URL(hrefOrUrl);
+  const query = url.searchParams;
+
+  for (const [key, val] of Object.entries(queryParams)) {
+    query.set(key, val);
+  }
+
+  url.search = query.toString();
+
+  return url;
+}
+
+function redactUrlSecrets(hrefOrUrl: string | URL) {
+  const url = new URL(hrefOrUrl);
+  url.password = "";
+  return url.href;
+}
+
 export type { PrismaClient } from "@trigger.dev/database";
 
 export const PrismaErrorSchema = z.object({
   code: z.string(),
 });
+
+function getDatabaseSchema() {
+  if (!isValidDatabaseUrl(env.DATABASE_URL)) {
+    throw new Error("Invalid Database URL");
+  }
+
+  const databaseUrl = new URL(env.DATABASE_URL);
+  const schemaFromSearchParam = databaseUrl.searchParams.get("schema");
+
+  if (!schemaFromSearchParam) {
+    console.debug("❗ database schema unspecified, will default to `public` schema");
+    return "public";
+  }
+
+  return schemaFromSearchParam;
+}
+
+export const DATABASE_SCHEMA = singleton("DATABASE_SCHEMA", getDatabaseSchema);
+
+export const sqlDatabaseSchema = Prisma.sql([`${DATABASE_SCHEMA}`]);

apps/webapp/app/env.server.ts

@@ -1,13 +1,25 @@
 import { z } from "zod";
 import { SecretStoreOptionsSchema } from "./services/secrets/secretStore.server";
 import { isValidRegex } from "./utils/regex";
+import { isValidDatabaseUrl } from "./utils/db";
 
 const EnvironmentSchema = z.object({
   NODE_ENV: z.union([z.literal("development"), z.literal("production"), z.literal("test")]),
-  DATABASE_URL: z.string(),
+  DATABASE_URL: z
+    .string()
+    .refine(
+      isValidDatabaseUrl,
+      "DATABASE_URL is invalid, for details please check the additional output above this message."
+    ),
   DATABASE_CONNECTION_LIMIT: z.coerce.number().int().default(10),
   DATABASE_POOL_TIMEOUT: z.coerce.number().int().default(60),
-  DIRECT_URL: z.string(),
+  DIRECT_URL: z
+    .string()
+    .refine(
+      isValidDatabaseUrl,
+      "DIRECT_URL is invalid, for details please check the additional output above this message."
+    ),
+  DATABASE_READ_REPLICA_URL: z.string().optional(),
   SESSION_SECRET: z.string(),
   MAGIC_LINK_SECRET: z.string(),
   ENCRYPTION_KEY: z.string(),
@@ -54,6 +66,7 @@ const EnvironmentSchema = z.object({
   AWS_SQS_BATCH_SIZE: z.coerce.number().int().optional().default(1),
   AWS_SQS_WAIT_TIME_MS: z.coerce.number().int().optional().default(100),
   DISABLE_SSE: z.string().optional(),
+  OPENAI_API_KEY: z.string().optional(),
 
   // Redis options
   REDIS_HOST: z.string().optional(),
@@ -64,7 +77,6 @@ const EnvironmentSchema = z.object({
   REDIS_PASSWORD: z.string().optional(),
   REDIS_TLS_DISABLED: z.string().optional(),
 
-  DEFAULT_QUEUE_EXECUTION_CONCURRENCY_LIMIT: z.coerce.number().int().default(5),
   DEFAULT_ENV_EXECUTION_CONCURRENCY_LIMIT: z.coerce.number().int().default(10),
   DEFAULT_ORG_EXECUTION_CONCURRENCY_LIMIT: z.coerce.number().int().default(10),
   DEFAULT_DEV_ENV_EXECUTION_ATTEMPTS: z.coerce.number().int().positive().default(1),

apps/webapp/app/hooks/useEnvironments.ts

@@ -10,20 +10,3 @@ export function useEnvironments(matches?: UIMatch[]) {
 
   return project.environments;
 }
-
-export function useDevEnvironment(matches?: UIMatch[]) {
-  const user = useUser();
-  const environments = useEnvironments(matches);
-  if (!environments) return;
-
-  return environments.find(
-    (environment) => environment.type === "DEVELOPMENT" && environment.userId === user.id
-  );
-}
-
-export function useProdEnvironment(matches?: UIMatch[]) {
-  const environments = useEnvironments(matches);
-  if (!environments) return;
-
-  return environments.find((environment) => environment.type === "PRODUCTION");
-}

apps/webapp/app/hooks/useReplaceLocation.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import { useOptimisticLocation } from "./useOptimisticLocation";
+import type { Location } from "@remix-run/react";
+
+export function useReplaceLocation() {
+  const optimisticLocation = useOptimisticLocation();
+  const [location, setLocation] = useState(optimisticLocation);
+
+  const replaceLocation = useCallback((location: Location<any>) => {
+    const fullPath = location.pathname + location.search + location.hash;
+    //replace the URL in the browser
+    history.replaceState(null, "", fullPath);
+    //update the state (new object in case the same location ref was modified)
+    const newLocation = { ...location };
+    setLocation(newLocation);
+  }, []);
+
+  const replaceSearchParam = useCallback(
+    (key: string, value?: string) => {
+      const searchParams = new URLSearchParams(location.search);
+      if (value) {
+        searchParams.set(key, value);
+      } else {
+        searchParams.delete(key);
+      }
+      replaceLocation({ ...optimisticLocation, search: "?" + searchParams.toString() });
+    },
+    [optimisticLocation, replaceLocation]
+  );
+
+  return { location, replaceLocation, replaceSearchParam };
+}

apps/webapp/app/hooks/useThrottle.ts

@@ -1,14 +1,23 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
-export function useThrottle<T extends (...args: any[]) => any>(fn: T, delay: number) {
+export function useThrottle(fn: (...args: any[]) => void, duration: number) {
   const timeout = useRef<ReturnType<typeof setTimeout>>();
 
-  return (...args: Parameters<T>) => {
-    if (!timeout.current) {
-      fn(...args);
-      timeout.current = setTimeout(() => {
-        timeout.current = undefined;
-      }, delay);
+  // Clean up when the component is unmounted
+  useEffect(() => {
+    return () => {
+      if (timeout.current) clearTimeout(timeout.current);
+    };
+  }, []);
+
+  return (...args: Parameters<typeof fn>) => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
     }
+
+    timeout.current = setTimeout(() => {
+      fn(...args);
+      timeout.current = undefined;
+    }, duration);
   };
 }

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

@@ -87,8 +87,8 @@ export async function createOrganization(
 }
 
 export async function createEnvironment(
-  organization: Organization,
-  project: Project,
+  organization: Pick<Organization, "id">,
+  project: Pick<Project, "id">,
   type: RuntimeEnvironment["type"],
   member?: OrgMember,
   prismaClient: PrismaClientOrTransaction = prisma

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

@@ -87,7 +87,7 @@ export async function createProject(
   // Create the dev and prod environments
   await createEnvironment(organization, project, "PRODUCTION");
 
-  if (project.version === "V2") {
+  if (version === "v2") {
     await createEnvironment(organization, project, "STAGING");
   }
 
@@ -97,3 +97,16 @@ export async function createProject(
 
   return project;
 }
+
+export async function findProjectBySlug(orgSlug: string, projectSlug: string, userId: string) {
+  // Find the project scoped to the organization, making sure the user belongs to that org
+  return await prisma.project.findFirst({
+    where: {
+      slug: projectSlug,
+      organization: {
+        slug: orgSlug,
+        members: { some: { userId } },
+      },
+    },
+  });
+}

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

@@ -1,5 +1,6 @@
-import type { RuntimeEnvironment } from "@trigger.dev/database";
+import type { Prisma, RuntimeEnvironment } from "@trigger.dev/database";
 import { prisma } from "~/db.server";
+import { getUsername } from "~/utils/username";
 
 export type { RuntimeEnvironment };
 
@@ -62,3 +63,92 @@ export async function findEnvironmentById(id: string) {
 
   return environment;
 }
+
+export async function createNewSession(environment: RuntimeEnvironment, ipAddress: string) {
+  return prisma.$transaction(async (tx) => {
+    const session = await tx.runtimeEnvironmentSession.create({
+      data: {
+        environmentId: environment.id,
+        ipAddress,
+      },
+    });
+
+    await tx.runtimeEnvironment.update({
+      where: {
+        id: environment.id,
+      },
+      data: {
+        currentSessionId: session.id,
+      },
+    });
+
+    return session;
+  });
+}
+
+export async function disconnectSession(environmentId: string) {
+  return prisma.$transaction(async (tx) => {
+    const environment = await tx.runtimeEnvironment.findUnique({
+      where: {
+        id: environmentId,
+      },
+    });
+
+    if (!environment || !environment.currentSessionId) {
+      return null;
+    }
+
+    const session = await tx.runtimeEnvironmentSession.update({
+      where: {
+        id: environment.currentSessionId,
+      },
+      data: {
+        disconnectedAt: new Date(),
+      },
+    });
+
+    await tx.runtimeEnvironment.update({
+      where: {
+        id: environment.id,
+      },
+      data: {
+        currentSessionId: null,
+      },
+    });
+
+    return session;
+  });
+}
+
+type DisplayableInputEnvironment = Prisma.RuntimeEnvironmentGetPayload<{
+  select: {
+    id: true;
+    type: true;
+    orgMember: {
+      select: {
+        user: {
+          select: {
+            id: true;
+            name: true;
+            displayName: true;
+          };
+        };
+      };
+    };
+  };
+}>;
+
+export function displayableEnvironments(
+  environment: DisplayableInputEnvironment,
+  userId: string | undefined
+) {
+  return {
+    id: environment.id,
+    type: environment.type,
+    userName: environment.orgMember
+      ? environment.orgMember.user.id === userId
+        ? undefined
+        : getUsername(environment.orgMember.user)
+      : undefined,
+  };
+}

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

@@ -0,0 +1,128 @@
+import {
+  TaskRunError,
+  TaskRunExecutionResult,
+  TaskRunFailedExecutionResult,
+  TaskRunSuccessfulExecutionResult,
+} from "@trigger.dev/core/v3";
+import {
+  BatchTaskRunItemStatus,
+  TaskRun,
+  TaskRunAttempt,
+  TaskRunAttemptStatus,
+  TaskRunStatus,
+} from "@trigger.dev/database";
+import { assertNever } from "assert-never";
+import { logger } from "~/services/logger.server";
+
+const SUCCESSFUL_STATUSES = [TaskRunStatus.COMPLETED_SUCCESSFULLY];
+const FAILURE_STATUSES = [
+  TaskRunStatus.CANCELED,
+  TaskRunStatus.INTERRUPTED,
+  TaskRunStatus.COMPLETED_WITH_ERRORS,
+  TaskRunStatus.SYSTEM_FAILURE,
+  TaskRunStatus.CRASHED,
+];
+
+export type TaskRunWithAttempts = TaskRun & {
+  attempts: TaskRunAttempt[];
+};
+
+export function executionResultForTaskRun(
+  taskRun: TaskRunWithAttempts
+): TaskRunExecutionResult | undefined {
+  if (SUCCESSFUL_STATUSES.includes(taskRun.status)) {
+    // find the last attempt that was successful
+    const attempt = taskRun.attempts.find((a) => a.status === TaskRunAttemptStatus.COMPLETED);
+
+    if (!attempt) {
+      logger.error("Task run is successful but no successful attempt found", {
+        taskRunId: taskRun.id,
+        taskRunStatus: taskRun.status,
+        taskRunAttempts: taskRun.attempts.map((a) => a.status),
+      });
+
+      return undefined;
+    }
+
+    return {
+      ok: true,
+      id: taskRun.friendlyId,
+      output: attempt.output ?? undefined,
+      outputType: attempt.outputType,
+    } satisfies TaskRunSuccessfulExecutionResult;
+  }
+
+  if (FAILURE_STATUSES.includes(taskRun.status)) {
+    if (taskRun.status === TaskRunStatus.CANCELED) {
+      return {
+        ok: false,
+        id: taskRun.friendlyId,
+        error: {
+          type: "INTERNAL_ERROR",
+          code: "TASK_RUN_CANCELLED",
+        },
+      } satisfies TaskRunFailedExecutionResult;
+    }
+
+    const attempt = taskRun.attempts.find((a) => a.status === TaskRunAttemptStatus.FAILED);
+
+    if (!attempt) {
+      logger.error("Task run is failed but no failed attempt found", {
+        taskRunId: taskRun.id,
+        taskRunStatus: taskRun.status,
+        taskRunAttempts: taskRun.attempts.map((a) => a.status),
+      });
+
+      return undefined;
+    }
+
+    const error = TaskRunError.safeParse(attempt.error);
+
+    if (!error.success) {
+      logger.error("Failed to parse error from failed task run attempt", {
+        taskRunId: taskRun.id,
+        taskRunStatus: taskRun.status,
+        taskRunAttempts: taskRun.attempts.map((a) => a.status),
+        error: attempt.error,
+      });
+
+      return {
+        ok: false,
+        id: taskRun.friendlyId,
+        error: {
+          type: "INTERNAL_ERROR",
+          code: "CONFIGURED_INCORRECTLY",
+        },
+      } satisfies TaskRunFailedExecutionResult;
+    }
+
+    return {
+      ok: false,
+      id: taskRun.friendlyId,
+      error: error.data,
+    } satisfies TaskRunFailedExecutionResult;
+  }
+}
+
+export function batchTaskRunItemStatusForRunStatus(status: TaskRunStatus): BatchTaskRunItemStatus {
+  switch (status) {
+    case TaskRunStatus.COMPLETED_SUCCESSFULLY:
+      return BatchTaskRunItemStatus.COMPLETED;
+    case TaskRunStatus.CANCELED:
+    case TaskRunStatus.INTERRUPTED:
+    case TaskRunStatus.COMPLETED_WITH_ERRORS:
+    case TaskRunStatus.SYSTEM_FAILURE:
+    case TaskRunStatus.CRASHED:
+    case TaskRunStatus.COMPLETED_WITH_ERRORS:
+      return BatchTaskRunItemStatus.FAILED;
+    case TaskRunStatus.PENDING:
+    case TaskRunStatus.WAITING_FOR_DEPLOY:
+    case TaskRunStatus.WAITING_TO_RESUME:
+    case TaskRunStatus.RETRYING_AFTER_FAILURE:
+    case TaskRunStatus.EXECUTING:
+    case TaskRunStatus.PAUSED:
+      return BatchTaskRunItemStatus.PENDING;
+    default:
+      assertNever(status);
+  }
+}

apps/webapp/app/presenters/JobListPresenter.server.ts

@@ -3,7 +3,7 @@ import {
   DisplayPropertySchema,
   EventSpecificationSchema,
 } from "@trigger.dev/core";
-import { PrismaClient, Prisma, prisma } from "~/db.server";
+import { PrismaClient, Prisma, prisma, sqlDatabaseSchema } from "~/db.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
 import { User } from "~/models/user.server";
@@ -122,7 +122,7 @@ export class JobListPresenter {
               "jobId",
               ROW_NUMBER() OVER(PARTITION BY "jobId" ORDER BY "createdAt" DESC) as rn
           FROM 
-              "JobRun" 
+              ${sqlDatabaseSchema}."JobRun" 
           WHERE 
               "jobId" IN (${Prisma.join(jobs.map((j) => j.id))})
       ) t

apps/webapp/app/presenters/OrgUsagePresenter.server.ts

@@ -1,5 +1,5 @@
 import { estimate } from "@trigger.dev/billing";
-import { PrismaClient, prisma } from "~/db.server";
+import { sqlDatabaseSchema, PrismaClient, prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
 import { BillingService } from "~/services/billing.server";
 
@@ -53,7 +53,7 @@ export class OrgUsagePresenter {
         month: string;
         count: number;
       }[]
-    >`SELECT TO_CHAR("createdAt", 'YYYY-MM') as month, COUNT(*) as count FROM "JobRun" WHERE "organizationId" = ${organization.id} AND "createdAt" >= NOW() - INTERVAL '6 months' AND "internal" = FALSE GROUP BY month ORDER BY month ASC`;
+    >`SELECT TO_CHAR("createdAt", 'YYYY-MM') as month, COUNT(*) as count FROM ${sqlDatabaseSchema}."JobRun" WHERE "organizationId" = ${organization.id} AND "createdAt" >= NOW() - INTERVAL '6 months' AND "internal" = FALSE GROUP BY month ORDER BY month ASC`;
 
     const hasMonthlyRunData = monthlyRunsDataRaw.length > 0;
     const monthlyRunsData = monthlyRunsDataRaw.map((obj) => ({
@@ -117,7 +117,7 @@ export class OrgUsagePresenter {
 
     const dailyRunsRawData = await this.#prismaClient.$queryRaw<
       { day: Date; runs: BigInt }[]
-    >`SELECT date_trunc('day', "createdAt") as day, COUNT(*) as runs FROM "JobRun" WHERE "organizationId" = ${organization.id} AND "createdAt" >= NOW() - INTERVAL '30 days' AND "internal" = FALSE GROUP BY day`;
+    >`SELECT date_trunc('day', "createdAt") as day, COUNT(*) as runs FROM ${sqlDatabaseSchema}."JobRun" WHERE "organizationId" = ${organization.id} AND "createdAt" >= NOW() - INTERVAL '30 days' AND "internal" = FALSE GROUP BY day`;
 
     const hasDailyRunsData = dailyRunsRawData.length > 0;
     const dailyRunsDataFilledIn = fillInMissingDailyRuns(ThirtyDaysAgo, 31, dailyRunsRawData);

apps/webapp/app/presenters/ProjectPresenter.server.ts

@@ -1,6 +1,8 @@
 import { PrismaClient, prisma } from "~/db.server";
 import { Project } from "~/models/project.server";
+import { displayableEnvironments } from "~/models/runtimeEnvironment.server";
 import { User } from "~/models/user.server";
+import { sortEnvironments } from "~/services/environmentSort.server";
 
 export class ProjectPresenter {
   #prismaClient: PrismaClient;
@@ -49,7 +51,13 @@ export class ProjectPresenter {
             type: true,
             orgMember: {
               select: {
-                userId: true,
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    displayName: true,
+                  },
+                },
               },
             },
             apiKey: true,
@@ -76,13 +84,12 @@ export class ProjectPresenter {
       hasInactiveExternalTriggers: project._count.sources > 0,
       jobCount: project._count.jobs,
       httpEndpointCount: project._count.httpEndpoints,
-      environments: project.environments.map((environment) => ({
-        id: environment.id,
-        slug: environment.slug,
-        type: environment.type,
-        apiKey: environment.apiKey,
-        userId: environment.orgMember?.userId,
-      })),
+      environments: sortEnvironments(
+        project.environments.map((environment) => ({
+          ...displayableEnvironments(environment, userId),
+          userId: environment.orgMember?.user.id,
+        }))
+      ),
     };
   }
 }

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

@@ -0,0 +1,46 @@
+import { BatchTaskRunExecutionResult } from "@trigger.dev/core/v3";
+import { executionResultForTaskRun } from "~/models/taskRun.server";
+import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { BasePresenter } from "./basePresenter.server";
+
+export class ApiBatchResultsPresenter extends BasePresenter {
+  public async call(
+    friendlyId: string,
+    env: AuthenticatedEnvironment
+  ): Promise<BatchTaskRunExecutionResult | undefined> {
+    return this.traceWithEnv("call", env, async (span) => {
+      const batchRun = await this._prisma.batchTaskRun.findUnique({
+        where: {
+          friendlyId,
+          runtimeEnvironmentId: env.id,
+        },
+        include: {
+          items: {
+            include: {
+              taskRun: {
+                include: {
+                  attempts: {
+                    orderBy: {
+                      createdAt: "desc",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+
+      if (!batchRun) {
+        return undefined;
+      }
+
+      return {
+        id: batchRun.friendlyId,
+        items: batchRun.items
+          .map((item) => executionResultForTaskRun(item.taskRun))
+          .filter(Boolean),
+      };
+    });
+  }
+}

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

@@ -74,6 +74,7 @@ export class ApiKeysPresenter {
           environmentVariableCount: environment._count.environmentVariableValues,
         }))
       ),
+      hasStaging: environments.some((environment) => environment.type === "STAGING"),
     };
   }
 }

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

@@ -0,0 +1,33 @@
+import { TaskRunExecutionResult } from "@trigger.dev/core/v3";
+import { executionResultForTaskRun } from "~/models/taskRun.server";
+import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { BasePresenter } from "./basePresenter.server";
+
+export class ApiRunResultPresenter extends BasePresenter {
+  public async call(
+    friendlyId: string,
+    env: AuthenticatedEnvironment
+  ): Promise<TaskRunExecutionResult | undefined> {
+    return this.traceWithEnv("call", env, async (span) => {
+      const taskRun = await this._prisma.taskRun.findUnique({
+        where: {
+          friendlyId,
+          runtimeEnvironmentId: env.id,
+        },
+        include: {
+          attempts: {
+            orderBy: {
+              createdAt: "desc",
+            },
+          },
+        },
+      });
+
+      if (!taskRun) {
+        return undefined;
+      }
+
+      return executionResultForTaskRun(taskRun);
+    });
+  }
+}

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

@@ -1,5 +1,5 @@
 import { WorkerDeploymentStatus } from "@trigger.dev/database";
-import { PrismaClient, prisma } from "~/db.server";
+import { sqlDatabaseSchema, PrismaClient, prisma } from "~/db.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
 import { User } from "~/models/user.server";
@@ -97,7 +97,7 @@ export class DeploymentListPresenter {
   wd."id", 
   wd."shortCode", 
   wd."version", 
-  (SELECT COUNT(*) FROM "BackgroundWorkerTask" WHERE "BackgroundWorkerTask"."workerId" = wd."workerId") AS "tasksCount", 
+  (SELECT COUNT(*) FROM ${sqlDatabaseSchema}."BackgroundWorkerTask" WHERE "BackgroundWorkerTask"."workerId" = wd."workerId") AS "tasksCount", 
   wd."environmentId", 
   wd."status", 
   u."id" AS "userId", 
@@ -106,9 +106,9 @@ export class DeploymentListPresenter {
   u."avatarUrl" AS "userAvatarUrl", 
   wd."deployedAt"
 FROM 
-  "WorkerDeployment" as wd
+  ${sqlDatabaseSchema}."WorkerDeployment" as wd
 INNER JOIN 
-  "User" as u ON wd."triggeredById" = u."id" 
+  ${sqlDatabaseSchema}."User" as u ON wd."triggeredById" = u."id" 
 WHERE 
   wd."projectId" = ${project.id}
 ORDER BY 

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

@@ -0,0 +1,135 @@
+import { RuntimeEnvironmentType } from "@trigger.dev/database";
+import { PrismaClient, prisma } from "~/db.server";
+
+type EditScheduleOptions = {
+  userId: string;
+  projectSlug: string;
+  friendlyId?: string;
+};
+
+export type EditableScheduleElements = Awaited<ReturnType<EditSchedulePresenter["call"]>>;
+
+type Environment = {
+  id: string;
+  type: RuntimeEnvironmentType;
+  userName?: string;
+};
+
+export class EditSchedulePresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({ userId, projectSlug, friendlyId }: EditScheduleOptions) {
+    // Find the project scoped to the organization
+    const project = await this.#prismaClient.project.findFirstOrThrow({
+      select: {
+        id: true,
+        environments: {
+          select: {
+            id: true,
+            type: true,
+            slug: true,
+            orgMember: {
+              select: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    displayName: true,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      where: {
+        slug: projectSlug,
+        organization: {
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+      },
+    });
+
+    const possibleTasks = await this.#prismaClient.backgroundWorkerTask.findMany({
+      distinct: ["slug"],
+      where: {
+        projectId: project.id,
+        triggerSource: "SCHEDULED",
+      },
+    });
+
+    const possibleEnvironments = project.environments.map((environment) => {
+      let userName: undefined | string;
+      if (environment.orgMember) {
+        if (environment.orgMember.user.id !== userId) {
+          userName =
+            environment.orgMember.user.displayName ?? environment.orgMember.user.name ?? undefined;
+        }
+      }
+
+      return {
+        id: environment.id,
+        type: environment.type,
+        userName,
+      };
+    });
+
+    return {
+      possibleTasks: possibleTasks.map((task) => task.slug),
+      possibleEnvironments,
+      schedule: await this.#getExistingSchedule(friendlyId, possibleEnvironments),
+    };
+  }
+
+  async #getExistingSchedule(scheduleId: string | undefined, possibleEnvironments: Environment[]) {
+    if (!scheduleId) {
+      return undefined;
+    }
+
+    const schedule = await this.#prismaClient.taskSchedule.findFirst({
+      select: {
+        id: true,
+        friendlyId: true,
+        generatorExpression: true,
+        externalId: true,
+        deduplicationKey: true,
+        userProvidedDeduplicationKey: true,
+        taskIdentifier: true,
+        instances: {
+          select: {
+            environmentId: true,
+          },
+        },
+        active: true,
+      },
+      where: {
+        friendlyId: scheduleId,
+      },
+    });
+
+    if (!schedule) {
+      return undefined;
+    }
+
+    return {
+      ...schedule,
+      cron: schedule.generatorExpression,
+      environments: schedule.instances.map((instance) => {
+        const environment = possibleEnvironments.find((env) => env.id === instance.environmentId);
+        if (!environment) {
+          throw new Error(`Environment with id ${instance.environmentId} not found`);
+        }
+
+        return environment;
+      }),
+    };
+  }
+}

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

@@ -1,22 +1,24 @@
-import { Prisma, TaskRunAttemptStatus, TaskRunStatus } from "@trigger.dev/database";
+import { Prisma, TaskRunStatus } from "@trigger.dev/database";
 import { Direction } from "~/components/runs/RunStatuses";
-import { PrismaClient, prisma } from "~/db.server";
+import { sqlDatabaseSchema, PrismaClient, prisma } from "~/db.server";
+import { displayableEnvironments } from "~/models/runtimeEnvironment.server";
 import { getUsername } from "~/utils/username";
 import { CANCELLABLE_STATUSES } from "~/v3/services/cancelTaskRun.server";
 
 type RunListOptions = {
-  userId: string;
+  userId?: string;
   projectSlug: string;
   //filters
-  tasks: string[] | undefined;
-  versions: string[] | undefined;
-  statuses: TaskRunStatus[] | undefined;
-  environments: string[] | undefined;
-  from: number | undefined;
-  to: number | undefined;
+  tasks?: string[];
+  versions?: string[];
+  statuses?: TaskRunStatus[];
+  environments?: string[];
+  scheduleId?: string;
+  from?: number;
+  to?: number;
   //pagination
-  direction: Direction | undefined;
-  cursor: string | undefined;
+  direction?: Direction;
+  cursor?: string;
   pageSize?: number;
 };
 
@@ -40,6 +42,7 @@ export class RunListPresenter {
     versions,
     statuses,
     environments,
+    scheduleId,
     from,
     to,
     direction = "forward",
@@ -52,7 +55,9 @@ export class RunListPresenter {
       tasks !== undefined ||
       versions !== undefined ||
       hasStatusFilters ||
-      environments !== undefined;
+      environments !== undefined ||
+      from !== undefined ||
+      to !== undefined;
 
     // Find the project scoped to the organization
     const project = await this.#prismaClient.project.findFirstOrThrow({
@@ -83,11 +88,12 @@ export class RunListPresenter {
     });
 
     //get all possible tasks
-    const possibleTasks = await this.#prismaClient.$queryRaw<{ slug: string }[]>`
-    SELECT DISTINCT(slug)
-    FROM "BackgroundWorkerTask"
-    WHERE "projectId" = ${project.id};
-    `;
+    const possibleTasks = await this.#prismaClient.backgroundWorkerTask.findMany({
+      distinct: ["slug"],
+      where: {
+        projectId: project.id,
+      },
+    });
 
     //get the runs
     let runs = await this.#prismaClient.$queryRaw<
@@ -103,6 +109,7 @@ export class RunListPresenter {
         lockedAt: Date | null;
         completedAt: Date | null;
         isTest: boolean;
+        spanId: string;
         attempts: BigInt;
       }[]
     >`
@@ -118,17 +125,18 @@ export class RunListPresenter {
     tr."lockedAt" AS "lockedAt",
     tra."completedAt" AS "completedAt",
     tr."isTest" AS "isTest",
+    tr."spanId" AS "spanId",
     COUNT(tra.id) AS attempts
   FROM
-    "TaskRun" tr
+    ${sqlDatabaseSchema}."TaskRun" tr
   LEFT JOIN
     (
       SELECT *,
         ROW_NUMBER() OVER (PARTITION BY "taskRunId" ORDER BY "createdAt" DESC) rn
-      FROM "TaskRunAttempt"
+      FROM ${sqlDatabaseSchema}."TaskRunAttempt"
     ) tra ON tr.id = tra."taskRunId" AND tra.rn = 1
   LEFT JOIN
-    "BackgroundWorker" bw ON tra."backgroundWorkerId" = bw.id
+    ${sqlDatabaseSchema}."BackgroundWorker" bw ON tra."backgroundWorkerId" = bw.id
   WHERE
       -- project
       tr."projectId" = ${project.id}
@@ -160,6 +168,7 @@ export class RunListPresenter {
           ? Prisma.sql`AND tr."runtimeEnvironmentId" IN (${Prisma.join(environments)})`
           : Prisma.empty
       }
+      ${scheduleId ? Prisma.sql`AND tr."scheduleId" = ${scheduleId}` : Prisma.empty}
       ${
         from
           ? Prisma.sql`AND tr."createdAt" >= ${new Date(from).toISOString()}::timestamp`
@@ -221,15 +230,11 @@ export class RunListPresenter {
           status: run.status,
           version: run.version,
           taskIdentifier: run.taskIdentifier,
+          spanId: run.spanId,
           attempts: Number(run.attempts),
           isReplayable: true,
           isCancellable: CANCELLABLE_STATUSES.includes(run.status),
-          environment: {
-            type: environment.type,
-            slug: environment.slug,
-            userId: environment.orgMember?.user.id,
-            userName: getUsername(environment.orgMember?.user),
-          },
+          environment: displayableEnvironments(environment, userId),
         };
       }),
       pagination: {

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

@@ -0,0 +1,272 @@
+import { Prisma, RuntimeEnvironmentType } from "@trigger.dev/database";
+import { ScheduleListFilters } from "~/components/runs/v3/ScheduleFilters";
+import { PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server";
+import { getUsername } from "~/utils/username";
+import { calculateNextScheduledTimestamp } from "~/v3/utils/calculateNextSchedule.server";
+
+type ScheduleListOptions = {
+  projectId: string;
+  userId?: string;
+  pageSize?: number;
+} & ScheduleListFilters;
+
+const DEFAULT_PAGE_SIZE = 20;
+
+export type ScheduleListItem = {
+  id: string;
+  friendlyId: string;
+  taskIdentifier: string;
+  deduplicationKey: string | null;
+  userProvidedDeduplicationKey: boolean;
+  cron: string;
+  cronDescription: string;
+  externalId: string | null;
+  nextRun: Date;
+  lastRun: Date | undefined;
+  active: boolean;
+  environments: {
+    id: string;
+    type: RuntimeEnvironmentType;
+    userName?: string;
+  }[];
+};
+export type ScheduleList = Awaited<ReturnType<ScheduleListPresenter["call"]>>;
+export type ScheduleListAppliedFilters = ScheduleList["filters"];
+
+export class ScheduleListPresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({
+    userId,
+    projectId,
+    tasks,
+    environments,
+    search,
+    page,
+    pageSize = DEFAULT_PAGE_SIZE,
+  }: ScheduleListOptions) {
+    const hasFilters =
+      tasks !== undefined || environments !== undefined || (search !== undefined && search !== "");
+
+    // Find the project scoped to the organization
+    const project = await this.#prismaClient.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,
+      },
+    });
+
+    //get all possible scheduled tasks
+    const possibleTasks = await this.#prismaClient.backgroundWorkerTask.findMany({
+      distinct: ["slug"],
+      where: {
+        projectId: project.id,
+        triggerSource: "SCHEDULED",
+      },
+    });
+
+    //do this here to protect against SQL injection
+    search = search && search !== "" ? `%${search}%` : undefined;
+
+    const totalCount = await this.#prismaClient.taskSchedule.count({
+      where: {
+        projectId: project.id,
+        taskIdentifier: tasks ? { in: tasks } : undefined,
+        instances: {
+          some: {
+            environmentId: environments ? { in: environments } : undefined,
+          },
+        },
+        AND: search
+          ? {
+              OR: [
+                {
+                  externalId: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+                {
+                  friendlyId: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+                {
+                  deduplicationKey: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+                {
+                  generatorExpression: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+              ],
+            }
+          : undefined,
+      },
+    });
+
+    const rawSchedules = await this.#prismaClient.taskSchedule.findMany({
+      select: {
+        id: true,
+        friendlyId: true,
+        taskIdentifier: true,
+        deduplicationKey: true,
+        userProvidedDeduplicationKey: true,
+        generatorExpression: true,
+        generatorDescription: true,
+        externalId: true,
+        instances: {
+          select: {
+            environmentId: true,
+          },
+        },
+        active: true,
+      },
+      where: {
+        projectId: project.id,
+        taskIdentifier: tasks ? { in: tasks } : undefined,
+        instances: environments
+          ? {
+              some: {
+                environmentId: environments ? { in: environments } : undefined,
+              },
+            }
+          : undefined,
+        AND: search
+          ? {
+              OR: [
+                {
+                  externalId: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+                {
+                  friendlyId: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+                {
+                  deduplicationKey: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+                {
+                  generatorExpression: {
+                    contains: search,
+                    mode: "insensitive",
+                  },
+                },
+              ],
+            }
+          : undefined,
+      },
+      take: pageSize,
+      skip: (page - 1) * pageSize,
+    });
+
+    const latestRuns =
+      rawSchedules.length > 0
+        ? await this.#prismaClient.$queryRaw<{ scheduleId: string; createdAt: Date }[]>`
+    SELECT t."scheduleId", t."createdAt"
+    FROM (
+      SELECT "scheduleId", MAX("createdAt") as "LatestRun"
+      FROM ${sqlDatabaseSchema}."TaskRun"
+      WHERE "scheduleId" IN (${Prisma.join(rawSchedules.map((s) => s.id))})
+      GROUP BY "scheduleId"
+    ) r
+    JOIN ${sqlDatabaseSchema}."TaskRun" t
+    ON t."scheduleId" = r."scheduleId" AND t."createdAt" = r."LatestRun";`
+        : [];
+
+    const schedules = rawSchedules.map((schedule) => {
+      const latestRun = latestRuns.find((r) => r.scheduleId === schedule.id);
+
+      return {
+        id: schedule.id,
+        friendlyId: schedule.friendlyId,
+        taskIdentifier: schedule.taskIdentifier,
+        deduplicationKey: schedule.deduplicationKey,
+        userProvidedDeduplicationKey: schedule.userProvidedDeduplicationKey,
+        cron: schedule.generatorExpression,
+        cronDescription: schedule.generatorDescription,
+        active: schedule.active,
+        externalId: schedule.externalId,
+        lastRun: latestRun?.createdAt,
+        nextRun: calculateNextScheduledTimestamp(schedule.generatorExpression),
+        environments: schedule.instances.map((instance) => {
+          const environment = project.environments.find((env) => env.id === instance.environmentId);
+          if (!environment) {
+            throw new Error(
+              `Environment not found for TaskScheduleInstance env: ${instance.environmentId}`
+            );
+          }
+
+          return {
+            id: instance.environmentId,
+            type: environment.type,
+            userName:
+              environment.orgMember?.user.id === userId
+                ? undefined
+                : getUsername(environment.orgMember?.user),
+          };
+        }),
+      };
+    });
+
+    return {
+      currentPage: page,
+      totalPages: Math.ceil(totalCount / pageSize),
+      totalCount: totalCount,
+      schedules,
+      possibleTasks: possibleTasks.map((task) => task.slug),
+      possibleEnvironments: project.environments.map((environment) => {
+        return {
+          id: environment.id,
+          type: environment.type,
+          userName:
+            environment.orgMember?.user.id === userId
+              ? undefined
+              : getUsername(environment.orgMember?.user),
+        };
+      }),
+      hasFilters,
+      filters: {
+        tasks,
+        environments,
+        search,
+      },
+    };
+  }
+}

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

@@ -1,19 +1,42 @@
-import { Prisma, TaskRunAttemptStatus, TaskRunStatus } from "@trigger.dev/database";
-import { PrismaClient, prisma } from "~/db.server";
+import {
+  Prisma,
+  RuntimeEnvironmentType,
+  TaskRunStatus,
+  TaskTriggerSource,
+} from "@trigger.dev/database";
+import { PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
 import { User } from "~/models/user.server";
+import { sortEnvironments } from "~/services/environmentSort.server";
+import { logger } from "~/services/logger.server";
 import { getUsername } from "~/utils/username";
+import { BasePresenter } from "./basePresenter.server";
+import { QUEUED_STATUSES, RUNNING_STATUSES } from "~/components/runs/v3/TaskRunStatus";
+import { displayableEnvironments } from "~/models/runtimeEnvironment.server";
 
-export type Task = Awaited<ReturnType<TaskListPresenter["call"]>>[0];
+export type Task = {
+  slug: string;
+  exportName: string;
+  filePath: string;
+  createdAt: Date;
+  triggerSource: TaskTriggerSource;
+  environments: {
+    id: string;
+    type: RuntimeEnvironmentType;
+    userName?: string;
+  }[];
+  latestRun?: {
+    createdAt: Date;
+    status: TaskRunStatus;
+  };
+};
 
-export class TaskListPresenter {
-  #prismaClient: PrismaClient;
+type Return = Awaited<ReturnType<TaskListPresenter["call"]>>;
 
-  constructor(prismaClient: PrismaClient = prisma) {
-    this.#prismaClient = prismaClient;
-  }
+export type TaskActivity = Awaited<Return["activity"]>[string];
 
+export class TaskListPresenter extends BasePresenter {
   public async call({
     userId,
     projectSlug,
@@ -23,7 +46,7 @@ export class TaskListPresenter {
     projectSlug: Project["slug"];
     organizationSlug: Organization["slug"];
   }) {
-    const project = await this.#prismaClient.project.findFirstOrThrow({
+    const project = await this._replica.project.findFirstOrThrow({
       select: {
         id: true,
         environments: {
@@ -53,7 +76,7 @@ export class TaskListPresenter {
       },
     });
 
-    const tasks = await this.#prismaClient.$queryRaw<
+    const tasks = await this._replica.$queryRaw<
       {
         id: string;
         slug: string;
@@ -61,74 +84,246 @@ export class TaskListPresenter {
         filePath: string;
         runtimeEnvironmentId: string;
         createdAt: Date;
+        triggerSource: TaskTriggerSource;
       }[]
     >`
-    SELECT DISTINCT ON(bwt.slug, bwt."runtimeEnvironmentId")
-      bwt.slug,
-      bwt.id,
-      bwt."exportName",
-      bwt."filePath",
-      bwt."runtimeEnvironmentId",
-      bwt."createdAt"
-    FROM
-      "BackgroundWorkerTask" as bwt
-    WHERE bwt."projectId" = ${project.id}
-    ORDER BY
-      bwt.slug,
-      bwt."runtimeEnvironmentId",
-      bwt."createdAt" DESC;`;
+    WITH workers AS (
+      SELECT DISTINCT ON ("runtimeEnvironmentId") id, "runtimeEnvironmentId", version
+      FROM ${sqlDatabaseSchema}."BackgroundWorker"
+      WHERE "runtimeEnvironmentId" IN (${Prisma.join(project.environments.map((e) => e.id))})
+      ORDER BY "runtimeEnvironmentId", "createdAt" DESC
+    )
+    SELECT tasks.id, slug, "filePath", "exportName", "triggerSource", tasks."runtimeEnvironmentId", tasks."createdAt"
+    FROM workers
+    JOIN ${sqlDatabaseSchema}."BackgroundWorkerTask" tasks ON tasks."workerId" = workers.id
+    ORDER BY slug ASC;`;
 
     let latestRuns = [] as {
       createdAt: Date;
       status: TaskRunStatus;
-      lockedById: string;
+      taskIdentifier: string;
     }[];
 
     if (tasks.length > 0) {
-      latestRuns = await this.#prismaClient.$queryRaw<
+      const uniqueTaskSlugs = new Set(tasks.map((t) => t.slug));
+      latestRuns = await this._replica.$queryRaw<
         {
           createdAt: Date;
           status: TaskRunStatus;
-          lockedById: string;
+          taskIdentifier: string;
         }[]
       >`
       SELECT * FROM (
         SELECT
           "createdAt",
           "status",
-          "lockedById",
-          ROW_NUMBER() OVER (PARTITION BY "lockedById" ORDER BY "updatedAt" DESC) AS rn
+          "taskIdentifier",
+          ROW_NUMBER() OVER (PARTITION BY "taskIdentifier" ORDER BY "updatedAt" DESC) AS rn
         FROM
-          "TaskRun"
+          ${sqlDatabaseSchema}."TaskRun"
         WHERE
-          "lockedById" IN(${Prisma.join(tasks.map((t) => t.id))})
-            ) t
-            WHERE rn = 1;`;
+          "taskIdentifier" IN(${Prisma.join(Array.from(uniqueTaskSlugs))})
+          AND "projectId" = ${project.id}
+      ) t
+      WHERE rn = 1;`;
     }
 
-    return tasks.map((task) => {
-      const latestRun = latestRuns.find((r) => r.lockedById === task.id);
+    //group by the task identifier (task.slug). Add the latestRun and add all the environments.
+    const outputTasks = tasks.reduce((acc, task) => {
+      const latestRun = latestRuns.find((r) => r.taskIdentifier === task.slug);
       const environment = project.environments.find((env) => env.id === task.runtimeEnvironmentId);
       if (!environment) {
         throw new Error(`Environment not found for TaskRun ${task.id}`);
       }
 
-      return {
-        ...task,
-        environment: {
-          id: environment.id,
-          type: environment.type,
-          slug: environment.slug,
-          userId: environment.orgMember?.user.id,
-          userName: getUsername(environment.orgMember?.user),
-        },
-        latestRun: latestRun
-          ? {
-              createdAt: latestRun.createdAt,
-              status: latestRun.status,
-            }
-          : undefined,
-      };
-    });
+      let existingTask = acc.find((t) => t.slug === task.slug);
+
+      if (!existingTask) {
+        existingTask = {
+          ...task,
+          environments: [],
+        };
+        acc.push(existingTask);
+      }
+
+      existingTask.environments.push(displayableEnvironments(environment, userId));
+
+      //order the environments
+      existingTask.environments = sortEnvironments(existingTask.environments);
+
+      existingTask.latestRun = latestRun
+        ? {
+            createdAt: latestRun.createdAt,
+            status: latestRun.status,
+          }
+        : undefined;
+
+      return acc;
+    }, [] as Task[]);
+
+    //then get the activity for each task
+    const activity = this.#getActivity(
+      outputTasks.map((t) => t.slug),
+      project.id
+    );
+
+    const runningStats = this.#getRunningStats(
+      outputTasks.map((t) => t.slug),
+      project.id
+    );
+
+    const durations = this.#getAverageDurations(
+      outputTasks.map((t) => t.slug),
+      project.id
+    );
+
+    const userEnvironment = project.environments.find((e) => e.orgMember?.user.id === userId);
+    const userHasTasks = userEnvironment
+      ? outputTasks.some((t) => t.environments.some((e) => e.id === userEnvironment.id))
+      : false;
+
+    return { tasks: outputTasks, userHasTasks, activity, runningStats, durations };
+  }
+
+  async #getActivity(tasks: string[], projectId: string) {
+    const activity = await this._replica.$queryRaw<
+      {
+        taskIdentifier: string;
+        status: TaskRunStatus;
+        day: Date;
+        count: BigInt;
+      }[]
+    >`
+    SELECT 
+    tr."taskIdentifier", 
+    tr."status",
+    DATE(tr."createdAt") as day, 
+    COUNT(*) 
+  FROM 
+    ${sqlDatabaseSchema}."TaskRun" as tr
+  WHERE 
+    tr."taskIdentifier" IN (${Prisma.join(tasks)})
+    AND tr."projectId" = ${projectId}
+    AND tr."createdAt" >= (current_date - interval '6 days')
+  GROUP BY 
+    tr."taskIdentifier", 
+    tr."status", 
+    day
+  ORDER BY 
+    tr."taskIdentifier" ASC,
+    day ASC,
+    tr."status" ASC;`;
+
+    //today with no time
+    const today = new Date();
+    today.setUTCHours(0, 0, 0, 0);
+
+    return activity.reduce((acc, a) => {
+      let existingTask = acc[a.taskIdentifier];
+
+      if (!existingTask) {
+        existingTask = [];
+        //populate the array with the past 7 days
+        for (let i = 6; i >= 0; i--) {
+          const day = new Date(today);
+          day.setUTCDate(today.getDate() - i);
+          day.setUTCHours(0, 0, 0, 0);
+
+          existingTask.push({
+            day: day.toISOString(),
+            [TaskRunStatus.COMPLETED_SUCCESSFULLY]: 0,
+          } as { day: string } & Record<TaskRunStatus, number>);
+        }
+
+        acc[a.taskIdentifier] = existingTask;
+      }
+
+      const dayString = a.day.toISOString();
+      const day = existingTask.find((d) => d.day === dayString);
+
+      if (!day) {
+        logger.warn(`Day not found for TaskRun`, {
+          day: dayString,
+          taskIdentifier: a.taskIdentifier,
+          existingTask,
+        });
+        return acc;
+      }
+
+      day[a.status] = Number(a.count);
+
+      return acc;
+    }, {} as Record<string, ({ day: string } & Record<TaskRunStatus, number>)[]>);
+  }
+
+  async #getRunningStats(tasks: string[], projectId: string) {
+    const statuses = await this._replica.$queryRaw<
+      {
+        taskIdentifier: string;
+        status: TaskRunStatus;
+        count: BigInt;
+      }[]
+    >`
+    SELECT 
+    tr."taskIdentifier", 
+    tr."status",
+    COUNT(*) 
+  FROM 
+    ${sqlDatabaseSchema}."TaskRun" as tr
+  WHERE 
+    tr."taskIdentifier" IN (${Prisma.join(tasks)})
+    AND tr."projectId" = ${projectId}
+    AND tr."status" IN ('PENDING', 'WAITING_FOR_DEPLOY', 'EXECUTING', 'RETRYING_AFTER_FAILURE', 'WAITING_TO_RESUME')
+  GROUP BY 
+    tr."taskIdentifier", 
+    tr."status"
+  ORDER BY 
+    tr."taskIdentifier" ASC,
+    tr."status" ASC;`;
+
+    return statuses.reduce((acc, a) => {
+      let existingTask = acc[a.taskIdentifier];
+
+      if (!existingTask) {
+        existingTask = {
+          queued: 0,
+          running: 0,
+        };
+
+        acc[a.taskIdentifier] = existingTask;
+      }
+
+      if (QUEUED_STATUSES.includes(a.status)) {
+        existingTask.queued += Number(a.count);
+      }
+      if (RUNNING_STATUSES.includes(a.status)) {
+        existingTask.running += Number(a.count);
+      }
+
+      return acc;
+    }, {} as Record<string, { queued: number; running: number }>);
+  }
+
+  async #getAverageDurations(tasks: string[], projectId: string) {
+    const durations = await this._replica.$queryRaw<
+      {
+        taskIdentifier: string;
+        duration: Number;
+      }[]
+    >`    
+    SELECT 
+      tr."taskIdentifier", 
+      AVG(EXTRACT(EPOCH FROM (tr."updatedAt" - tr."lockedAt"))) as duration
+      FROM 
+      ${sqlDatabaseSchema}."TaskRun" as tr
+    WHERE 
+      tr."taskIdentifier" IN (${Prisma.join(tasks)})
+      AND tr."projectId" = ${projectId}
+      AND tr."createdAt" >= (current_date - interval '6 days')
+      AND tr."status" IN ('COMPLETED_SUCCESSFULLY', 'COMPLETED_WITH_ERRORS')
+    GROUP BY 
+      tr."taskIdentifier";`;
+
+    return Object.fromEntries(durations.map((s) => [s.taskIdentifier, Number(s.duration)]));
   }
 }

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

@@ -1,4 +1,5 @@
-import { PrismaClient, prisma } from "~/db.server";
+import { TaskTriggerSource } from "@trigger.dev/database";
+import { sqlDatabaseSchema, PrismaClient, prisma } from "~/db.server";
 import { TestSearchParams } from "~/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route";
 import { sortEnvironments } from "~/services/environmentSort.server";
 import { createSearchParams } from "~/utils/searchParams";
@@ -89,20 +90,21 @@ export class TestPresenter {
         filePath: string;
         exportName: string;
         friendlyId: string;
+        triggerSource: TaskTriggerSource;
       }[]
     >`WITH workers AS (
       SELECT 
             bw.*,
             ROW_NUMBER() OVER(ORDER BY string_to_array(bw.version, '.')::int[] DESC) AS rn
       FROM 
-            "BackgroundWorker" bw
+            ${sqlDatabaseSchema}."BackgroundWorker" bw
       WHERE "runtimeEnvironmentId" = ${matchingEnvironment.id}
     ),
     latest_workers AS (SELECT * FROM workers WHERE rn = 1)
-    SELECT "BackgroundWorkerTask".id, version, slug as "taskIdentifier", "filePath", "exportName", "BackgroundWorkerTask"."friendlyId" 
+    SELECT bwt.id, version, slug as "taskIdentifier", "filePath", "exportName", bwt."friendlyId" 
     FROM latest_workers
-    JOIN "BackgroundWorkerTask" ON "BackgroundWorkerTask"."workerId" = latest_workers.id
-    ORDER BY "BackgroundWorkerTask"."exportName" ASC;
+    JOIN ${sqlDatabaseSchema}."BackgroundWorkerTask" bwt ON bwt."workerId" = latest_workers.id
+    ORDER BY bwt."exportName" ASC;
     `;
 
     return {
@@ -117,6 +119,7 @@ export class TestPresenter {
           filePath: task.filePath,
           exportName: task.exportName,
           friendlyId: task.friendlyId,
+          triggerSource: task.triggerSource,
         };
       }),
     };

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

@@ -1,5 +1,11 @@
-import { TaskRunAttemptStatus, TaskRunStatus } from "@trigger.dev/database";
-import { PrismaClient, prisma } from "~/db.server";
+import { ScheduledTaskPayload, parsePacket, prettyPrintPacket } from "@trigger.dev/core/v3";
+import {
+  RuntimeEnvironmentType,
+  TaskRunAttemptStatus,
+  TaskRunStatus,
+  TaskTriggerSource,
+} from "@trigger.dev/database";
+import { sqlDatabaseSchema, PrismaClient, prisma } from "~/db.server";
 import { getUsername } from "~/utils/username";
 
 type TestTaskOptions = {
@@ -8,7 +14,55 @@ type TestTaskOptions = {
   taskFriendlyId: string;
 };
 
-export type TestTask = Awaited<ReturnType<TestTaskPresenter["call"]>>;
+type Task = {
+  id: string;
+  taskIdentifier: string;
+  filePath: string;
+  exportName: string;
+  friendlyId: string;
+  environment: {
+    id: string;
+    type: RuntimeEnvironmentType;
+    userId?: string;
+    userName?: string;
+  };
+};
+
+export type TestTask =
+  | {
+      triggerSource: "STANDARD";
+      task: Task;
+      runs: StandardRun[];
+    }
+  | {
+      triggerSource: "SCHEDULED";
+      task: Task;
+      runs: ScheduledRun[];
+    };
+
+type RawRun = {
+  id: string;
+  number: BigInt;
+  friendlyId: string;
+  createdAt: Date;
+  status: TaskRunStatus;
+  payload: string;
+  payloadType: string;
+  runtimeEnvironmentId: string;
+};
+
+export type StandardRun = Omit<RawRun, "number"> & {
+  number: number;
+};
+
+export type ScheduledRun = Omit<RawRun, "number" | "payload"> & {
+  number: number;
+  payload: {
+    timestamp: Date;
+    lastTimestamp?: Date;
+    externalId?: string;
+  };
+};
 
 export class TestTaskPresenter {
   #prismaClient: PrismaClient;
@@ -17,13 +71,14 @@ export class TestTaskPresenter {
     this.#prismaClient = prismaClient;
   }
 
-  public async call({ userId, projectSlug, taskFriendlyId }: TestTaskOptions) {
+  public async call({ userId, projectSlug, taskFriendlyId }: TestTaskOptions): Promise<TestTask> {
     const task = await this.#prismaClient.backgroundWorkerTask.findFirstOrThrow({
       select: {
         id: true,
         filePath: true,
         exportName: true,
         slug: true,
+        triggerSource: true,
         runtimeEnvironment: {
           select: {
             id: true,
@@ -47,25 +102,14 @@ export class TestTaskPresenter {
       },
     });
 
-    const latestRuns = await this.#prismaClient.$queryRaw<
-      {
-        id: string;
-        number: BigInt;
-        friendlyId: string;
-        createdAt: Date;
-        status: TaskRunStatus;
-        payload: string;
-        payloadType: string;
-        runtimeEnvironmentId: string;
-      }[]
-    >`
+    const latestRuns = await this.#prismaClient.$queryRaw<RawRun[]>`
     WITH taskruns AS (
       SELECT 
           tr.* 
       FROM 
-          "TaskRun" as tr
+          ${sqlDatabaseSchema}."TaskRun" as tr
       JOIN
-          "BackgroundWorkerTask" as bwt
+          ${sqlDatabaseSchema}."BackgroundWorkerTask" as bwt
       ON
           tr."taskIdentifier" = bwt.slug
       WHERE
@@ -88,32 +132,63 @@ export class TestTaskPresenter {
     FROM 
         taskruns AS taskr
     WHERE
-        taskr."payloadType" = 'application/json'
+        taskr."payloadType" = 'application/json' OR taskr."payloadType" = 'application/super+json'
     ORDER BY
         taskr."createdAt" DESC;`;
 
-    return {
-      task: {
-        id: task.id,
-        taskIdentifier: task.slug,
-        filePath: task.filePath,
-        exportName: task.exportName,
-        friendlyId: taskFriendlyId,
-        environment: {
-          id: task.runtimeEnvironment.id,
-          type: task.runtimeEnvironment.type,
-          userId: task.runtimeEnvironment.orgMember?.user.id,
-          userName: getUsername(task.runtimeEnvironment.orgMember?.user),
-        },
+    const taskWithEnvironment = {
+      id: task.id,
+      taskIdentifier: task.slug,
+      filePath: task.filePath,
+      exportName: task.exportName,
+      friendlyId: taskFriendlyId,
+      environment: {
+        id: task.runtimeEnvironment.id,
+        type: task.runtimeEnvironment.type,
+        userId: task.runtimeEnvironment.orgMember?.user.id,
+        userName: getUsername(task.runtimeEnvironment.orgMember?.user),
       },
-      runs: latestRuns.map((r) => {
-        //we need to format the code on the server, because we detect if the sample has been edited by comparing the contents
-        try {
-          r.payload = JSON.stringify(JSON.parse(r.payload ?? ""), null, 2);
-        } catch (e) {}
-
-        return { ...r, number: Number(r.number) };
-      }),
     };
+
+    switch (task.triggerSource) {
+      case "STANDARD":
+        return {
+          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),
+              };
+            })
+          ),
+        };
+      case "SCHEDULED":
+        return {
+          triggerSource: "SCHEDULED",
+          task: taskWithEnvironment,
+          runs: await Promise.all(
+            latestRuns.map(async (r) => {
+              const number = Number(r.number);
+
+              return {
+                ...r,
+                number,
+                payload: await getScheduleTaskRunPayload(r),
+              };
+            })
+          ),
+        };
+    }
   }
 }
+
+async function getScheduleTaskRunPayload(run: RawRun) {
+  const payload = await parsePacket({ data: run.payload, dataType: run.payloadType });
+  const parsed = ScheduledTaskPayload.parse(payload);
+  return parsed;
+}

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

@@ -0,0 +1,131 @@
+import { PrismaClient, prisma } from "~/db.server";
+import { nextScheduledTimestamps } from "~/v3/utils/calculateNextSchedule.server";
+import { RunListPresenter } from "./RunListPresenter.server";
+import { ScheduleObject } from "@trigger.dev/core/v3";
+
+type ViewScheduleOptions = {
+  userId?: string;
+  projectId: string;
+  friendlyId: string;
+};
+
+export class ViewSchedulePresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({ userId, projectId, friendlyId }: ViewScheduleOptions) {
+    const schedule = await this.#prismaClient.taskSchedule.findFirst({
+      select: {
+        id: true,
+        friendlyId: true,
+        generatorExpression: true,
+        generatorDescription: true,
+        externalId: true,
+        deduplicationKey: true,
+        userProvidedDeduplicationKey: true,
+        taskIdentifier: true,
+        project: {
+          select: {
+            slug: true,
+          },
+        },
+        instances: {
+          select: {
+            environment: {
+              select: {
+                id: true,
+                type: true,
+                orgMember: {
+                  select: {
+                    user: {
+                      select: {
+                        id: true,
+                        name: true,
+                        displayName: true,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        active: true,
+      },
+      where: {
+        friendlyId,
+        projectId,
+      },
+    });
+
+    if (!schedule) {
+      return;
+    }
+
+    const nextRuns = schedule.active
+      ? nextScheduledTimestamps(schedule.generatorExpression, new Date(), 5)
+      : [];
+
+    const runPresenter = new RunListPresenter(this.#prismaClient);
+    const { runs } = await runPresenter.call({
+      projectSlug: schedule.project.slug,
+      scheduleId: schedule.id,
+      pageSize: 5,
+    });
+
+    return {
+      schedule: {
+        ...schedule,
+        cron: schedule.generatorExpression,
+        cronDescription: schedule.generatorDescription,
+        nextRuns,
+        runs,
+        environments: schedule.instances.map((instance) => {
+          const environment = instance.environment;
+          let userName: undefined | string;
+          if (environment.orgMember) {
+            if (environment.orgMember.user.id !== userId) {
+              userName =
+                environment.orgMember.user.displayName ??
+                environment.orgMember.user.name ??
+                undefined;
+            }
+          }
+
+          return {
+            id: environment.id,
+            type: environment.type,
+            userName,
+          };
+        }),
+      },
+    };
+  }
+
+  public toJSONResponse(result: NonNullable<Awaited<ReturnType<ViewSchedulePresenter["call"]>>>) {
+    const response: ScheduleObject = {
+      id: result.schedule.friendlyId,
+      task: result.schedule.taskIdentifier,
+      active: result.schedule.active,
+      nextRun: result.schedule.nextRuns[0],
+      generator: {
+        type: "CRON",
+        expression: result.schedule.cron,
+        description: result.schedule.cronDescription,
+      },
+      externalId: result.schedule.externalId ?? undefined,
+      deduplicationKey: result.schedule.userProvidedDeduplicationKey
+        ? result.schedule.deduplicationKey ?? undefined
+        : undefined,
+      environments: result.schedule.instances.map((instance) => ({
+        id: instance.environment.id,
+        type: instance.environment.type,
+      })),
+    };
+
+    return response;
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Span, SpanKind } from "@opentelemetry/api";
+import { $replica, PrismaClientOrTransaction, prisma } from "~/db.server";
+import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { attributesFromAuthenticatedEnv, tracer } from "../../v3/tracer.server";
+
+export abstract class BasePresenter {
+  constructor(
+    protected readonly _prisma: PrismaClientOrTransaction = prisma,
+    protected readonly _replica: PrismaClientOrTransaction = $replica
+  ) {}
+
+  protected async traceWithEnv<T>(
+    trace: string,
+    env: AuthenticatedEnvironment,
+    fn: (span: Span) => Promise<T>
+  ): Promise<T> {
+    return tracer.startActiveSpan(
+      `${this.constructor.name}.${trace}`,
+      { attributes: attributesFromAuthenticatedEnv(env), kind: SpanKind.SERVER },
+      async (span) => {
+        try {
+          return await fn(span);
+        } catch (e) {
+          if (e instanceof Error) {
+            span.recordException(e);
+          } else {
+            span.recordException(new Error(String(e)));
+          }
+
+          throw e;
+        } finally {
+          span.end();
+        }
+      }
+    );
+  }
+}

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

@@ -60,7 +60,7 @@ export default function Page() {
   const user = useUser();
 
   return (
-    <>
+    <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
       {job.hasIntegrationsRequiringAction && (
         <Callout variant="error" to={organizationIntegrationsPath(organization)} className="mb-2">
           {simplur`This Job has ${
@@ -96,6 +96,6 @@ export default function Page() {
           </div>
         )}
       </Help>
-    </>
+    </div>
   );
 }

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

@@ -1,5 +1,4 @@
 import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
-import invariant from "tiny-invariant";
 import { AstroLogo } from "~/assets/logos/AstroLogo";
 import { Feedback } from "~/components/Feedback";
 import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
@@ -11,18 +10,17 @@ import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { StepNumber } from "~/components/primitives/StepNumber";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
-import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { projectSetupPath } from "~/utils/pathBuilder";
+import { useV2OnboardingApiKey } from "../_app.orgs.$organizationSlug.projects.$projectParam.setup/route";
 
 export default function SetUpAstro() {
   const organization = useOrganization();
   const project = useProject();
   useProjectSetupComplete();
-  const devEnvironment = useDevEnvironment();
-  invariant(devEnvironment, "Dev environment must be defined");
+  const { apiKey } = useV2OnboardingApiKey();
   const appOrigin = useAppOrigin();
 
   return (
@@ -67,7 +65,7 @@ export default function SetUpAstro() {
             title="Run the CLI 'init' command in an existing Astro project"
           />
           <StepContentContainer>
-            <InitCommand appOrigin={appOrigin} apiKey={devEnvironment.apiKey} />
+            <InitCommand appOrigin={appOrigin} apiKey={apiKey} />
 
             <Paragraph spacing variant="small">
               You’ll notice a new folder in your project called 'jobs'. We’ve added a very simple

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

@@ -1,5 +1,4 @@
 import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
-import invariant from "tiny-invariant";
 import { ExpressLogo } from "~/assets/logos/ExpressLogo";
 import { Feedback } from "~/components/Feedback";
 import { RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
@@ -11,20 +10,17 @@ import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { StepNumber } from "~/components/primitives/StepNumber";
-import { useAppOrigin } from "~/hooks/useAppOrigin";
-import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { projectSetupPath } from "~/utils/pathBuilder";
+import { useV2OnboardingApiKey } from "../_app.orgs.$organizationSlug.projects.$projectParam.setup/route";
 
 export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   useProjectSetupComplete();
-  const devEnvironment = useDevEnvironment();
-  invariant(devEnvironment, "Dev environment must be defined");
-  const appOrigin = useAppOrigin();
+  const { apiKey } = useV2OnboardingApiKey();
 
   return (
     <div className="mx-auto max-w-3xl pt-16">
@@ -73,7 +69,7 @@ export default function Page() {
               <ClipboardField
                 secure
                 className="w-fit"
-                value={devEnvironment.apiKey}
+                value={apiKey}
                 variant={"secondary/medium"}
                 icon={<Badge variant="outline">Server</Badge>}
               />

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

@@ -1,5 +1,4 @@
 import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
-import invariant from "tiny-invariant";
 import { NestjsLogo } from "~/assets/logos/NestjsLogo";
 import { Feedback } from "~/components/Feedback";
 import { TriggerDevStep } from "~/components/SetupCommands";
@@ -11,12 +10,12 @@ import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { StepNumber } from "~/components/primitives/StepNumber";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
-import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { projectSetupPath } from "~/utils/pathBuilder";
 import { CodeBlock } from "../../components/code/CodeBlock";
+import { useV2OnboardingApiKey } from "../_app.orgs.$organizationSlug.projects.$projectParam.setup/route";
 
 const AppModuleCode = `
 import { Module } from '@nestjs/common';
@@ -114,11 +113,9 @@ export default function SetupNestJS() {
   const organization = useOrganization();
   const project = useProject();
   useProjectSetupComplete();
-  const devEnvironment = useDevEnvironment();
+  const { apiKey } = useV2OnboardingApiKey();
   const appOrigin = useAppOrigin();
 
-  invariant(devEnvironment, "devEnvironment is required");
-
   return (
     <div className="mx-auto max-w-3xl pt-16">
       <div className="mb-12 grid place-items-center">
@@ -161,7 +158,7 @@ export default function SetupNestJS() {
           <CodeBlock
             fileName=".env"
             showChrome
-            code={`TRIGGER_API_KEY=${devEnvironment.apiKey}\nTRIGGER_API_URL=${appOrigin}`}
+            code={`TRIGGER_API_KEY=${apiKey}\nTRIGGER_API_URL=${appOrigin}`}
           />
         </StepContentContainer>
         <StepNumber stepNumber="3" title="Add the TriggerDevModule" />

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

@@ -1,6 +1,5 @@
 import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
 import { useState } from "react";
-import invariant from "tiny-invariant";
 import { NextjsLogo } from "~/assets/logos/NextjsLogo";
 import { Feedback } from "~/components/Feedback";
 import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
@@ -21,11 +20,11 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import { StepNumber } from "~/components/primitives/StepNumber";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
-import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { projectSetupPath } from "~/utils/pathBuilder";
+import { useV2OnboardingApiKey } from "../_app.orgs.$organizationSlug.projects.$projectParam.setup/route";
 
 type SelectionChoices = "use-existing-project" | "create-new-next-app";
 
@@ -33,12 +32,10 @@ export default function SetupNextjs() {
   const organization = useOrganization();
   const project = useProject();
   useProjectSetupComplete();
-  const devEnvironment = useDevEnvironment();
+  const { apiKey } = useV2OnboardingApiKey();
   const appOrigin = useAppOrigin();
   const [selectedValue, setSelectedValue] = useState<SelectionChoices | null>(null);
 
-  invariant(devEnvironment, "devEnvironment is required");
-
   return (
     <div className="mx-auto max-w-3xl pt-16">
       <div className="mb-12 grid place-items-center">
@@ -152,7 +149,7 @@ export default function SetupNextjs() {
                 title="Run the CLI 'init' command in your new Next.js project"
               />
               <StepContentContainer>
-                <InitCommand appOrigin={appOrigin} apiKey={devEnvironment.apiKey} />
+                <InitCommand appOrigin={appOrigin} apiKey={apiKey} />
                 <Paragraph spacing variant="small">
                   You’ll notice a new folder in your project called 'jobs'. We’ve added a very
                   simple example Job in <InlineCode variant="extra-small">examples.ts</InlineCode>{" "}
@@ -179,7 +176,7 @@ export default function SetupNextjs() {
                 title="Run the CLI 'init' command in an existing Next.js project"
               />
               <StepContentContainer>
-                <InitCommand appOrigin={appOrigin} apiKey={devEnvironment.apiKey} />
+                <InitCommand appOrigin={appOrigin} apiKey={apiKey} />
 
                 <Paragraph spacing variant="small">
                   You’ll notice a new folder in your project called 'jobs'. We’ve added a very

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

@@ -1,5 +1,4 @@
 import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
-import invariant from "tiny-invariant";
 import { RemixLogo } from "~/assets/logos/RemixLogo";
 import { Feedback } from "~/components/Feedback";
 import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
@@ -11,18 +10,17 @@ import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { StepNumber } from "~/components/primitives/StepNumber";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
-import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { projectSetupPath } from "~/utils/pathBuilder";
+import { useV2OnboardingApiKey } from "../_app.orgs.$organizationSlug.projects.$projectParam.setup/route";
 
 export default function SetUpRemix() {
   const organization = useOrganization();
   const project = useProject();
   useProjectSetupComplete();
-  const devEnvironment = useDevEnvironment();
-  invariant(devEnvironment, "Dev environment must be defined");
+  const { apiKey } = useV2OnboardingApiKey();
   const appOrigin = useAppOrigin();
 
   return (
@@ -67,7 +65,7 @@ export default function SetUpRemix() {
             title="Run the CLI 'init' command in an existing Remix project"
           />
           <StepContentContainer>
-            <InitCommand appOrigin={appOrigin} apiKey={devEnvironment.apiKey} />
+            <InitCommand appOrigin={appOrigin} apiKey={apiKey} />
 
             <Paragraph spacing variant="small">
               You’ll notice a new folder in your project called 'jobs'. We’ve added a very simple

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

@@ -1,5 +1,4 @@
 import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
-import invariant from "tiny-invariant";
 import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo";
 import { Feedback } from "~/components/Feedback";
 import { RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
@@ -11,18 +10,18 @@ import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { StepNumber } from "~/components/primitives/StepNumber";
-import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { projectSetupPath } from "~/utils/pathBuilder";
+import { useV2OnboardingApiKey } from "../_app.orgs.$organizationSlug.projects.$projectParam.setup/route";
 
 export default function SetUpSveltekit() {
   const organization = useOrganization();
   const project = useProject();
   useProjectSetupComplete();
-  const devEnvironment = useDevEnvironment();
-  invariant(devEnvironment, "Dev environment must be defined");
+  const { apiKey } = useV2OnboardingApiKey();
+
   return (
     <div className="mx-auto max-w-3xl pt-16">
       <div className="mb-12 grid place-items-center">
@@ -70,7 +69,7 @@ export default function SetUpSveltekit() {
               <ClipboardField
                 secure
                 className="w-fit"
-                value={devEnvironment.apiKey}
+                value={apiKey}
                 variant={"secondary/medium"}
                 icon={<Badge variant="outline">Server</Badge>}
               />

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

@@ -1,4 +1,48 @@
 import { Outlet } from "@remix-run/react";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson } from "remix-typedjson";
+import { prisma } from "~/db.server";
+import { useTypedMatchData, useTypedMatchesData } from "~/hooks/useTypedMatchData";
+import { requireUserId } from "~/services/session.server";
+import { ProjectParamSchema } from "~/utils/pathBuilder";
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam } = ProjectParamSchema.parse(params);
+
+  const environment = await prisma.runtimeEnvironment.findFirst({
+    where: {
+      organization: {
+        slug: organizationSlug,
+      },
+      project: {
+        slug: projectParam,
+      },
+      orgMember: {
+        userId,
+      },
+    },
+  });
+
+  if (!environment) {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  return typedjson({
+    apiKey: environment.apiKey,
+  });
+};
+
+export function useV2OnboardingApiKey() {
+  const routeMatch = useTypedMatchesData<typeof loader>({
+    id: "routes/_app.orgs.$organizationSlug.projects.$projectParam.setup",
+  });
+  if (!routeMatch) {
+    throw new Error("Route match not found");
+  }
+
+  return routeMatch;
+}
 
 export default function Page() {
   return (