Run Engine 2.0 (alpha)

.changeset/breezy-turtles-talk.md

@@ -0,0 +1,10 @@
+---
+"@trigger.dev/react-hooks": patch
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/build": patch
+"@trigger.dev/core": patch
+"@trigger.dev/rsc": patch
+---
+
+Run Engine 2.0 (alpha)

.configs/tsconfig.base.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable", "DOM.AsyncIterable"],
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "moduleDetection": "force",

.github/workflows/e2e.yml

@@ -38,6 +38,9 @@ jobs:
       - name: 📥 Download deps
         run: pnpm install --frozen-lockfile --filter trigger.dev...
 
+      - name: 📀 Generate Prisma Client
+        run: pnpm run generate
+
       - name: 🔧 Build v3 cli monorepo dependencies
         run: pnpm run build --filter trigger.dev^...
 

.github/workflows/unit-tests.yml

@@ -24,6 +24,13 @@ jobs:
           node-version: 20.11.1
           cache: "pnpm"
 
+      # ..to avoid rate limits when pulling images
+      - name: 🐳 Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
       - name: 📥 Download deps
         run: pnpm install --frozen-lockfile
 

.npmrc

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

.vscode/launch.json

@@ -133,6 +133,14 @@
       "command": "pnpm exec trigger dev",
       "cwd": "${workspaceFolder}/references/hello-world",
       "sourceMaps": true
+    },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "Debug RunEngine tests",
+      "command": "pnpm run test --filter @internal/run-engine",
+      "cwd": "${workspaceFolder}",
+      "sourceMaps": true
     }
   ]
 }

CONTRIBUTING.md

@@ -230,13 +230,21 @@ pnpm run db:studio
    cd packages/database
    ```
 
-3. Create and apply the migrations
+3. Create a migration
 
    ```
-   pnpm run db:migrate:dev
+   pnpm run db:migrate:dev:create
    ```
 
-   This creates a migration file and executes the migrations against your database and applies changes to the database schema(s)
+   This creates a migration file. Check the migration file does only what you want. If you're adding any database indexes they must use `CONCURRENTLY`, otherwise they'll lock the table when executed.
+
+4. Run the migration.
+
+  ```
+  pnpm run db:migrate:deploy
+  pnpm run generate
+  ```
+   This executes the migrations against your database and applies changes to the database schema(s), and then regenerates the Prisma client.
 
 4. Commit generated migrations as well as changes to the schema.prisma file
 5. If you're using VSCode you may need to restart the Typescript server in the webapp to get updated type inference. Open a TypeScript file, then open the Command Palette (View > Command Palette) and run `TypeScript: Restart TS server`.

apps/coordinator/package.json

@@ -23,10 +23,8 @@
     "tinyexec": "^0.3.0"
   },
   "devDependencies": {
-    "@types/node": "^18",
     "dotenv": "^16.4.2",
     "esbuild": "^0.19.11",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.3"
+    "tsx": "^4.7.0"
   }
 }

apps/coordinator/src/checkpointer.ts

@@ -1,5 +1,5 @@
 import { ExponentialBackoff } from "@trigger.dev/core/v3/apps";
-import { testDockerCheckpoint } from "@trigger.dev/core/v3/apps";
+import { testDockerCheckpoint } from "@trigger.dev/core/v3/checkpoints";
 import { nanoid } from "nanoid";
 import fs from "node:fs/promises";
 import { ChaosMonkey } from "./chaosMonkey";

apps/coordinator/tsconfig.json

@@ -1,8 +1,6 @@
 {
-  "include": ["./src/**/*.ts"],
-  "exclude": ["node_modules"],
   "compilerOptions": {
-    "target": "es2016",
+    "target": "es2018",
     "module": "commonjs",
     "esModuleInterop": true,
     "resolveJsonModule": true,

apps/docker-provider/package.json

@@ -20,10 +20,8 @@
     "execa": "^8.0.1"
   },
   "devDependencies": {
-    "@types/node": "^18.19.8",
     "dotenv": "^16.4.2",
     "esbuild": "^0.19.11",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.3"
+    "tsx": "^4.7.0"
   }
 }

apps/docker-provider/src/index.ts

@@ -7,7 +7,8 @@ import {
   TaskOperationsRestoreOptions,
 } from "@trigger.dev/core/v3/apps";
 import { SimpleLogger } from "@trigger.dev/core/v3/apps";
-import { isExecaChildProcess, testDockerCheckpoint } from "@trigger.dev/core/v3/apps";
+import { isExecaChildProcess } from "@trigger.dev/core/v3/apps";
+import { testDockerCheckpoint } from "@trigger.dev/core/v3/checkpoints";
 import { setTimeout } from "node:timers/promises";
 import { PostStartCauses, PreStopCauses } from "@trigger.dev/core/v3";
 

apps/kubernetes-provider/package.json

@@ -23,7 +23,6 @@
   "devDependencies": {
     "dotenv": "^16.4.2",
     "esbuild": "^0.19.11",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.3"
+    "tsx": "^4.7.0"
   }
 }

apps/kubernetes-provider/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "target": "es2018",
     "module": "commonjs",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

apps/proxy/package.json

@@ -9,7 +9,6 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240512.0",
-    "typescript": "^5.0.4",
     "wrangler": "^3.57.1"
   },
   "dependencies": {

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

@@ -0,0 +1,27 @@
+import { useAnimate } from "framer-motion";
+import { HourglassIcon } from "lucide-react";
+import { useEffect } from "react";
+
+export function AnimatedHourglassIcon({
+  className,
+  delay,
+}: {
+  className?: string;
+  delay?: number;
+}) {
+  const [scope, animate] = useAnimate();
+
+  useEffect(() => {
+    animate(
+      [
+        [scope.current, { rotate: 0 }, { duration: 0.7 }],
+        [scope.current, { rotate: 180 }, { duration: 0.3 }],
+        [scope.current, { rotate: 180 }, { duration: 0.7 }],
+        [scope.current, { rotate: 360 }, { duration: 0.3 }],
+      ],
+      { repeat: Infinity, delay }
+    );
+  }, []);
+
+  return <HourglassIcon ref={scope} className={className} />;
+}

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

@@ -0,0 +1,12 @@
+export function PauseIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM6.5 6C6.5 5.44772 6.94772 5 7.5 5C8.05229 5 8.5 5.44772 8.5 6V14C8.5 14.5523 8.05229 15 7.5 15C6.94772 15 6.5 14.5523 6.5 14V6ZM12.5 5C11.9477 5 11.5 5.44772 11.5 6V14C11.5 14.5523 11.9477 15 12.5 15C13.0523 15 13.5 14.5523 13.5 14V6C13.5 5.44772 13.0523 5 12.5 5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,49 @@
+export function TaskCachedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_15584_76102)">
+        <path
+          d="M0.5 3.5L0.5 2.5C0.5 1.39543 1.39543 0.5 2.5 0.5H3.5"
+          stroke="#3B82F6"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5 12.5L15.5 13.5C15.5 14.6046 14.6046 15.5 13.5 15.5L12.5 15.5"
+          stroke="#3B82F6"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.5 0.5L13.5 0.5C14.6046 0.5 15.5 1.39543 15.5 2.5L15.5 3.5"
+          stroke="#3B82F6"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3.5 15.5L2.5 15.5C1.39543 15.5 0.5 14.6046 0.5 13.5L0.5 12.5"
+          stroke="#3B82F6"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+        <path d="M11.1799 4.19V5.598H8.8479V12H7.1649V5.598H4.8219V4.19H11.1799Z" fill="#3B82F6" />
+        <line x1="6" y1="15.5" x2="10" y2="15.5" stroke="#3B82F6" />
+        <line x1="6" y1="0.5" x2="10" y2="0.5" stroke="#3B82F6" />
+        <line x1="15.5" y1="6" x2="15.5" y2="10" stroke="#3B82F6" />
+        <line x1="0.5" y1="6" x2="0.5" y2="10" stroke="#3B82F6" />
+      </g>
+      <defs>
+        <clipPath id="clip0_15584_76102">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

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

@@ -53,7 +53,7 @@ type CodeBlockProps = {
   fileName?: string;
 
   /** title text for the Title row */
-  rowTitle?: string;
+  rowTitle?: ReactNode;
 
   /** Whether to show the open in modal button */
   showOpenInModal?: boolean;

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "~/utils/cn";
+import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 
 const variations = {
   large: {
@@ -23,14 +24,34 @@ const variations = {
 type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
   label?: React.ReactNode;
   variant: keyof typeof variations;
+  shortcut?: ShortcutDefinition;
 };
 
 export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
   ({ className, variant, label, ...props }, ref) => {
+    const innerRef = React.useRef<HTMLButtonElement>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);
+
     const { container, root, thumb, text } = variations[variant];
 
+    if (props.shortcut) {
+      useShortcutKeys({
+        shortcut: props.shortcut,
+        action: () => {
+          if (innerRef.current) {
+            innerRef.current.click();
+          }
+        },
+        disabled: props.disabled,
+      });
+    }
+
     return (
-      <SwitchPrimitives.Root className={cn("group", container, className)} {...props} ref={ref}>
+      <SwitchPrimitives.Root
+        className={cn("group", container, className)}
+        {...props}
+        ref={innerRef}
+      >
         {label ? (
           <label className={cn("whitespace-nowrap", text)}>
             {typeof label === "string" ? <span>{label}</span> : label}

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

@@ -359,8 +359,8 @@ function BatchIdDropdown({
   if (batchId) {
     if (!batchId.startsWith("batch_")) {
       error = "Batch IDs start with 'batch_'";
-    } else if (batchId.length !== 27) {
-      error = "Batch IDs are 27 characters long";
+    } else if (batchId.length !== 27 && batchId.length !== 31) {
+      error = "Batch IDs are 27/32 characters long";
     }
   }
 

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

@@ -66,3 +66,37 @@ export function LiveCountUp({
     </>
   );
 }
+
+export function LiveCountdown({
+  endTime,
+  updateInterval = 100,
+}: {
+  endTime: Date;
+  updateInterval?: number;
+}) {
+  const [now, setNow] = useState<Date>();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const date = new Date();
+      setNow(date);
+
+      if (date > endTime) {
+        clearInterval(interval);
+      }
+    }, updateInterval);
+
+    return () => clearInterval(interval);
+  }, [endTime]);
+
+  return (
+    <>
+      {formatDuration(now, endTime, {
+        style: "short",
+        maxDecimalPoints: 0,
+        units: ["d", "h", "m", "s"],
+        maxUnits: 4,
+      })}
+    </>
+  );
+}

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

@@ -763,8 +763,8 @@ function RunIdDropdown({
   if (runId) {
     if (!runId.startsWith("run_")) {
       error = "Run IDs start with 'run_'";
-    } else if (runId.length !== 25) {
-      error = "Run IDs are 25 characters long";
+    } else if (runId.length !== 25 && runId.length !== 29) {
+      error = "Run IDs are 25/30 characters long";
     }
   }