Release 3.3.8

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

.env.example

@@ -31,10 +31,32 @@ DEV_OTEL_BATCH_PROCESSING_ENABLED="0"
 # AUTH_GITHUB_CLIENT_ID=
 # AUTH_GITHUB_CLIENT_SECRET=
 
-# Resend is an email service used for signing in to Trigger.dev via a Magic Link.
-# Emails will print to the console if you leave these commented out
+# Configure an email transport to allow users to sign in to Trigger.dev via a Magic Link.
+# If none are configured, emails will print to the console instead.
+# Uncomment one of the following blocks to allow delivery of
+
+# Resend
 ### Visit https://resend.com, create an account and get your API key. Then insert it below along with your From and Reply To email addresses. Visit https://resend.com/docs for more information.
-# RESEND_API_KEY=<api_key>
+# EMAIL_TRANSPORT=resend
+# FROM_EMAIL=
+# REPLY_TO_EMAIL=
+# RESEND_API_KEY=
+
+# Generic SMTP
+### Enter the configuration provided by your mail provider. Visit https://nodemailer.com/smtp/ for more information
+### SMTP_SECURE = false will use STARTTLS when connecting to a server that supports it (usually port 587)
+# EMAIL_TRANSPORT=smtp
+# FROM_EMAIL=
+# REPLY_TO_EMAIL=
+# SMTP_HOST=
+# SMTP_PORT=587
+# SMTP_SECURE=false
+# SMTP_USER=
+# SMTP_PASSWORD=
+
+# AWS Simple Email Service
+### Authentication is configured using the default Node.JS credentials provider chain (https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromnodeproviderchain)
+# EMAIL_TRANSPORT=aws-ses
 # FROM_EMAIL=
 # REPLY_TO_EMAIL=
 

.github/copilot-instructions.md

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

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

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

apps/webapp/app/assets/logos/LyftLogo.tsx

@@ -0,0 +1,19 @@
+export function LyftLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="48"
+      height="34"
+      viewBox="0 0 48 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 0.593341H7.28904V20.1709C7.28904 23.2692 8.70514 25.1147 9.82493 25.9058C8.63943 26.9605 5.01673 27.8834 2.3162 25.6421C0.724053 24.3209 0 22.1485 0 20.1049V0.593341ZM45.5536 16.856V14.7986H47.7767V7.58069H45.3354C44.3982 3.24724 40.5432 0 35.9328 0C30.6217 0 26.3164 4.30894 26.3164 9.62402V26.48C27.8295 26.6928 29.6322 26.4536 31.1659 25.1807C32.7578 23.8594 33.4818 21.6872 33.4818 19.6436V19.0226H37.1222V11.8047H33.4818V9.62402H33.4905C33.4905 8.27426 34.5839 7.18004 35.9328 7.18004C37.2815 7.18004 38.3792 8.27426 38.3792 9.62402V16.856C38.3792 22.1711 42.6891 26.48 48 26.48V19.3C46.6513 19.3 45.5536 18.2057 45.5536 16.856ZM17.9474 7.58069V18.1737C17.9474 18.7751 17.4488 19.2626 16.8337 19.2626C16.2185 19.2626 15.7199 18.7751 15.7199 18.1737V7.58069H8.50752V20.0392C8.50752 22.2803 9.26697 25.1147 12.7231 26.0376C16.1828 26.9615 18.1899 25.049 18.1899 25.049C18.007 26.3089 16.8213 27.2318 14.9113 27.4296C13.4661 27.5791 11.6178 27.1 10.6959 26.7045V33.305C13.0451 33.9983 15.5298 34.2223 17.9614 33.7501C22.3744 32.8932 25.1596 29.2019 25.1596 24.2908V7.58069H17.9474Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/logos/MiddayLogo.tsx

@@ -0,0 +1,23 @@
+export function MiddayLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width={102}
+      height={30}
+      viewBox="0 0 100 30"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M14.347 0a14.931 14.931 0 0 0-6.282 1.68l6.282 10.88V0Zm0 17.443L8.067 28.32a14.933 14.933 0 0 0 6.28 1.68V17.443ZM15.652 30V17.432l6.285 10.887A14.932 14.932 0 0 1 15.652 30Zm0-17.43V0c2.26.097 4.392.693 6.287 1.682l-6.287 10.889ZM2.336 23.068l10.884-6.284-6.284 10.884a15.093 15.093 0 0 1-4.6-4.6Zm25.33-16.132-10.88 6.282 6.282-10.88a15.094 15.094 0 0 1 4.598 4.598ZM2.335 6.934a15.094 15.094 0 0 1 4.6-4.6l6.284 10.884L2.335 6.934Zm-.654 1.13A14.931 14.931 0 0 0 0 14.35h12.568L1.681 8.064Zm0 13.873a14.932 14.932 0 0 1-1.68-6.282h12.562L1.682 21.938Zm15.754-7.587H30a14.93 14.93 0 0 0-1.68-6.285L17.435 14.35Zm10.884 7.586-10.878-6.28H30a14.932 14.932 0 0 1-1.68 6.28Zm-11.533-5.151 6.281 10.88a15.092 15.092 0 0 0 4.598-4.599l-10.88-6.281Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="currentColor"
+        d="M92.34 11.912h1.637l2.995 8.223 2.884-8.223h1.619l-4 11.107c-.372 1.06-1.08 1.544-2.196 1.544h-1.172v-1.358h1.024c.502 0 .8-.186.986-.707l.353-.912h-.52l-3.61-9.674ZM82.744 14.814c.39-1.916 1.916-3.126 4.018-3.126 2.549 0 3.963 1.489 3.963 4.13v3.964c0 .446.186.632.614.632h.39v1.358h-.65c-1.005 0-1.88-.335-1.861-1.544-.428.93-1.544 1.767-3.107 1.767-1.954 0-3.535-1.041-3.535-2.79 0-2.028 1.544-2.55 3.702-2.977l2.921-.558c-.018-1.712-.818-2.53-2.437-2.53-1.265 0-2.102.65-2.4 1.804l-1.618-.13Zm1.432 4.39c0 .8.689 1.452 2.14 1.433 1.637 0 2.92-1.153 2.92-3.442v-.167l-2.362.41c-1.47.26-2.698.371-2.698 1.767ZM80.129 8.563v13.21h-1.377l-.056-1.452c-.558 1.042-1.618 1.675-3.144 1.675-2.847 0-4.168-2.419-4.168-5.154s1.321-5.153 4.168-5.153c1.451 0 2.493.558 3.051 1.562V8.563h1.526Zm-7.145 8.28c0 1.915.819 3.701 2.884 3.701 2.028 0 2.865-1.823 2.865-3.702 0-1.953-.837-3.758-2.865-3.758-2.065 0-2.884 1.786-2.884 3.758ZM68.936 8.563v13.21H67.56l-.056-1.452c-.558 1.042-1.619 1.675-3.144 1.675-2.847 0-4.168-2.419-4.168-5.154s1.321-5.153 4.168-5.153c1.45 0 2.493.558 3.05 1.562V8.563h1.526Zm-7.144 8.28c0 1.915.819 3.701 2.884 3.701 2.028 0 2.865-1.823 2.865-3.702 0-1.953-.837-3.758-2.865-3.758-2.065 0-2.884 1.786-2.884 3.758ZM56.212 11.912h1.525v9.86h-1.525v-9.86Zm-.037-1.544V8.6h1.6v1.768h-1.6ZM40.224 11.912h1.395l.056 1.674c.446-1.21 1.47-1.898 2.846-1.898 1.414 0 2.438.763 2.865 2.084.428-1.34 1.47-2.084 3.014-2.084 1.973 0 3.126 1.377 3.126 3.74v6.344H52v-5.897c0-1.805-.707-2.828-1.916-2.828-1.544 0-2.437 1.041-2.437 2.846v5.88H46.12v-5.899c0-1.767-.725-2.827-1.916-2.827-1.526 0-2.456 1.079-2.456 2.827v5.898h-1.525v-9.86Z"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/logos/TldrawLogo.tsx

@@ -0,0 +1,41 @@
+export function TldrawLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="96"
+      height="25"
+      viewBox="0 0 96 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.3031 0.283066C15.4501 0.283066 18.5971 0.281726 21.7441 0.283066C23.5701 0.283066 24.6473 1.36288 24.6486 3.19829C24.6513 9.4695 24.6513 15.7407 24.6486 22.0133C24.6486 23.8607 23.5808 24.9325 21.7521 24.9338C15.4581 24.9352 9.16417 24.9352 2.87018 24.9338C1.08836 24.9338 0.000510729 23.8446 -0.000828987 22.0521C-0.0021687 15.7581 -0.0021687 9.46414 0.000510729 3.17015C0.00185044 1.34546 1.08568 0.284406 2.93047 0.283066C6.05469 0.281726 9.18024 0.283066 12.3045 0.283066H12.3031ZM12.1223 16.9518C12.0499 17.7543 11.6386 18.3116 11.088 18.8006C10.8201 19.0391 10.4798 19.3713 10.8308 19.6902C11.0532 19.8938 11.5475 19.9997 11.8356 19.9019C13.7808 19.2374 15.2183 16.2498 14.582 14.3019C14.2725 13.3533 13.2825 12.6178 12.3674 12.6594C11.4095 12.7022 10.5682 13.4016 10.3525 14.3327C10.0819 15.4982 10.6553 16.3637 12.1236 16.9518H12.1223ZM12.4143 5.20384C11.2354 5.21858 10.315 6.1604 10.3257 7.34337C10.3364 8.52768 11.2662 9.47218 12.4331 9.48155C13.6134 9.49093 14.586 8.49016 14.5605 7.29112C14.5351 6.10815 13.5892 5.18776 12.4157 5.2025L12.4143 5.20384Z"
+        fill="currentColor"
+      />
+      <path
+        d="M85.3405 16.6586C85.4195 16.4443 85.5267 16.2353 85.5722 16.0142C85.9849 13.9846 86.3961 11.9549 86.786 9.92119C86.8784 9.44024 87.1035 9.22588 87.6006 9.25402C88.3093 9.29287 89.2229 9.03832 89.6731 9.39067C90.1206 9.73899 90.138 10.6768 90.284 11.3681C90.6176 12.9597 90.9096 14.5606 91.2339 16.1536C91.2674 16.317 91.408 16.459 91.4978 16.6117C91.5808 16.455 91.7269 16.3023 91.7389 16.1415C91.889 14.1185 92.0323 12.0942 92.1449 10.0699C92.1784 9.48043 92.4021 9.23124 93.0063 9.25134C93.9602 9.28215 94.9167 9.25937 95.9992 9.25937C95.8612 10.157 95.7433 10.9809 95.604 11.8022C95.1793 14.3061 94.7292 16.8073 94.3259 19.3153C94.2201 19.9731 93.995 20.308 93.2582 20.2598C92.3472 20.1995 91.4268 20.2008 90.5158 20.2598C89.8781 20.3013 89.6316 20.0227 89.5284 19.4586C89.2564 17.9689 88.9724 16.4818 88.683 14.9947C88.6415 14.783 88.5397 14.5847 88.4647 14.3798L88.2543 14.3945C88.182 14.7026 88.1029 15.0094 88.0373 15.3189C87.7412 16.735 87.4425 18.1524 87.1598 19.5712C87.0593 20.0776 86.7873 20.2692 86.2702 20.2531C85.2668 20.2236 84.262 20.2249 83.2585 20.2531C82.807 20.2651 82.6048 20.0736 82.5351 19.6596C81.9979 16.4724 81.4526 13.2879 80.9247 10.0994C80.8149 9.4322 80.985 9.26607 81.6763 9.26071C82.4346 9.25536 83.1942 9.28081 83.9525 9.25134C84.3799 9.23526 84.538 9.37995 84.5688 9.81C84.7148 11.9013 84.8863 13.9899 85.0511 16.0785C85.0645 16.25 85.0872 16.4202 85.106 16.5916L85.3405 16.6586Z"
+        fill="currentColor"
+      />
+      <path
+        d="M58.7188 5.17457C58.7188 5.4961 58.7188 5.73457 58.7188 5.97438C58.7188 10.3928 58.7188 14.8125 58.7188 19.2309C58.7188 20.1981 58.6692 20.2437 57.6832 20.245C56.7266 20.245 55.7701 20.245 54.7492 20.245C54.7305 19.8846 54.7332 19.5778 54.6943 19.2764C54.6648 19.05 54.5844 18.8316 54.5268 18.6092C54.3446 18.7432 54.1276 18.8477 53.9856 19.0165C53.3988 19.7132 52.7678 20.3107 51.7952 20.4178C50.0951 20.6041 48.6656 19.7091 48.5263 18.0157C48.3534 15.9151 48.399 13.7863 48.5075 11.6775C48.5731 10.3968 49.3663 9.47371 50.6618 9.16424C52.0082 8.84405 53.1804 9.15888 54.0472 10.3244C54.1651 10.4825 54.3621 10.583 54.5215 10.7103C54.5818 10.512 54.6903 10.3137 54.693 10.1141C54.7077 8.75295 54.7198 7.39046 54.693 6.03065C54.6809 5.38892 54.9435 5.15045 55.5691 5.16653C56.5913 5.19332 57.6135 5.17323 58.7188 5.17323V5.17457ZM54.6956 14.6879C54.6956 14.6879 54.6983 14.6879 54.6997 14.6879C54.6997 14.2431 54.7064 13.7983 54.6983 13.3535C54.6863 12.6984 54.4009 12.4827 53.522 12.4465C52.816 12.4171 52.4181 12.681 52.3953 13.2839C52.3605 14.1949 52.3578 15.1086 52.394 16.0182C52.4235 16.7778 53.1175 17.086 54.149 16.7658C54.3728 16.6961 54.6313 16.3866 54.6715 16.1522C54.7532 15.6766 54.6956 15.1782 54.6956 14.6892V14.6879Z"
+        fill="currentColor"
+      />
+      <path
+        d="M79.2702 14.5379C79.2702 14.9612 79.2809 15.3859 79.2675 15.8093C79.2528 16.3103 79.2072 16.7886 79.9052 16.9105C80.0419 16.9346 80.1999 17.2937 80.2107 17.504C80.2482 18.2609 80.2442 19.0219 80.2107 19.7788C80.204 19.9383 79.991 20.2276 79.8891 20.2209C78.942 20.1566 77.9747 20.1312 77.061 19.9034C76.5974 19.7882 76.1821 19.3247 75.8365 18.9375C75.5176 18.5811 75.3328 18.5651 75.0796 18.9563C74.1592 20.3804 72.7833 20.6202 71.2587 20.3549C69.998 20.1352 69.1861 19.1559 69.1192 17.8805C69.1004 17.5241 69.1031 17.1664 69.1084 16.81C69.1299 14.988 70.1775 13.8948 72.0036 13.8265C72.873 13.7943 73.7439 13.8359 74.6133 13.805C74.8692 13.7957 75.1197 13.6537 75.3743 13.5733C75.2376 13.241 75.18 12.8257 74.9416 12.6006C74.7326 12.4037 74.3159 12.3314 74.0038 12.3582C72.8087 12.456 71.6124 12.5725 70.4321 12.7735C69.8815 12.8672 69.6778 12.7574 69.6872 12.2108C69.6993 11.5423 69.6483 10.8684 69.7127 10.2052C69.7354 9.96676 69.9712 9.60906 70.1789 9.54877C72.2661 8.94992 74.3896 8.7436 76.5171 9.29556C78.3324 9.7658 79.2072 10.9876 79.2702 13.0012C79.2863 13.5143 79.2729 14.0274 79.2729 14.5405L79.2702 14.5379ZM74.0426 15.6244C73.6956 15.7972 73.0177 15.9258 72.944 16.2112C72.6828 17.22 72.8797 17.721 74.0212 17.512C74.3668 17.4491 74.7138 17.3379 75.0286 17.1838C75.4359 16.9842 75.5833 16.2473 75.235 15.9941C74.9576 15.7932 74.5504 15.7704 74.0426 15.623V15.6244Z"
+        fill="currentColor"
+      />
+      <path
+        d="M36.6847 6.1808C36.6847 6.91899 36.6834 7.60224 36.6847 8.28549C36.6874 9.2032 36.7437 9.25813 37.6855 9.25947C38.3527 9.26081 39.0212 9.25947 39.7862 9.25947C39.7862 10.4116 39.8062 11.5343 39.758 12.6543C39.7527 12.7816 39.3628 12.9745 39.1391 12.9933C38.563 13.0415 37.9802 13.0187 37.4001 13.0067C36.8937 12.9959 36.6646 13.2197 36.6807 13.7328C36.6981 14.2901 36.6727 14.8488 36.6887 15.4047C36.7102 16.1282 36.9848 16.4202 37.7016 16.4604C38.1906 16.4886 38.6822 16.4725 39.1739 16.4698C39.5731 16.4685 39.8196 16.6373 39.8223 17.0566C39.829 18.0802 39.825 19.105 39.825 20.2304C37.802 20.1822 35.7576 20.6095 34.0227 19.2176C33.1144 18.4888 32.7567 17.4572 32.691 16.3291C32.6468 15.5735 32.6709 14.8126 32.6669 14.0543C32.6615 13.0991 32.5879 13.0241 31.6501 13.0053C31.4973 13.0026 31.3433 12.9852 31.0927 12.9665C31.0927 11.8706 31.0633 10.7854 31.1249 9.70693C31.1343 9.54349 31.5683 9.28358 31.8081 9.27956C32.4512 9.26885 32.695 8.99688 32.6709 8.38061C32.6495 7.84607 32.6133 7.30214 32.695 6.77831C32.7299 6.55458 33.0407 6.21295 33.239 6.20358C34.3469 6.14731 35.4602 6.17678 36.6861 6.17678L36.6847 6.1808Z"
+        fill="currentColor"
+      />
+      <path
+        d="M46.9683 20.2397C45.9474 20.2397 45.0766 20.2732 44.2098 20.2317C42.7214 20.162 41.7796 19.2631 41.5947 17.7894C41.5639 17.5469 41.5545 17.3004 41.5545 17.0552C41.5518 13.4206 41.5518 9.78594 41.5545 6.15129C41.5545 5.30191 41.6778 5.17732 42.5124 5.17464C43.5547 5.17062 44.5983 5.17464 45.7063 5.17464C45.7063 5.531 45.7063 5.79493 45.7063 6.05885C45.7063 9.27015 45.7143 12.4814 45.6982 15.6914C45.6956 16.2206 45.7746 16.5515 46.4177 16.5167C46.5945 16.5073 46.9388 16.7551 46.9442 16.8945C46.9884 17.9957 46.9683 19.0996 46.9683 20.2384V20.2397Z"
+        fill="currentColor"
+      />
+      <path
+        d="M65.088 9.26208C65.088 9.88237 65.076 10.3915 65.0961 10.8992C65.1014 11.0265 65.2126 11.1497 65.2756 11.2757C65.3801 11.1819 65.5194 11.1069 65.5824 10.9903C65.7833 10.6206 65.9146 10.2093 66.1477 9.86361C66.6073 9.18304 67.3106 8.97404 68.0823 9.09729C68.2819 9.12945 68.5793 9.43222 68.5874 9.62112C68.6343 10.7559 68.6075 11.8933 68.6128 13.0307C68.6155 13.5184 68.3275 13.4487 67.9831 13.4353C67.2383 13.4058 66.4867 13.3991 65.7458 13.4607C65.2635 13.5009 65.0639 13.8305 65.0733 14.3543C65.1041 16.0263 65.0719 17.6983 65.0907 19.3702C65.0974 19.9865 64.8777 20.2745 64.2319 20.2531C63.3196 20.2236 62.4046 20.2317 61.4909 20.2531C61.1104 20.2611 60.9751 20.1111 60.9751 19.7467C60.9805 16.4925 60.9764 13.237 60.9805 9.98285C60.9805 9.58763 61.1117 9.26744 61.5833 9.26476C62.7154 9.2594 63.8474 9.26342 65.0867 9.26342L65.088 9.26208Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/logos/UnkeyLogo.tsx

@@ -0,0 +1,17 @@
+export function UnkeyLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="94"
+      height="24"
+      viewBox="0 0 96 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.9012 20.0088C11.5775 20.0088 8.54297 17.1873 8.54297 12.3427V1.9082H11.3912V12.1564C11.3912 15.7499 12.9883 17.2405 16.9012 17.2405C20.8141 17.2405 22.4112 15.7499 22.4112 12.1564V1.9082H25.286V12.3427C25.286 17.1873 22.2515 20.0088 16.9012 20.0088ZM30.7083 19.7426H27.8335V6.51322H30.4688V10.6125H30.6551C31.0544 8.37651 32.8112 6.24703 36.1651 6.24703C39.8385 6.24703 41.6486 8.72256 41.6486 11.7837V19.7426H38.7738V12.5556C38.7738 10.0801 37.6558 8.82903 34.9141 8.82903C32.0127 8.82903 30.7083 10.3197 30.7083 13.1945V19.7426ZM47.085 19.7426H44.2102V1.9082H47.085V11.7571H50.8648L54.831 6.51322H58.1849L53.2072 12.8751L58.1583 19.7426H54.7777L50.8648 14.3391H47.085V19.7426ZM66.2537 20.0088C61.9149 20.0088 59.0667 17.5599 59.0667 13.1412C59.0667 9.01536 61.8883 6.24703 66.2005 6.24703C70.2997 6.24703 73.0947 8.50961 73.0947 12.529C73.0947 13.0081 73.0681 13.3808 72.9882 13.7801H61.7552C61.8616 16.3355 63.1127 17.693 66.1739 17.693C68.9422 17.693 70.0868 16.788 70.0868 15.2175V15.0045H72.9616V15.2441C72.9616 18.0657 70.1933 20.0088 66.2537 20.0088ZM66.1472 8.50961C63.2192 8.50961 61.9415 9.81392 61.7818 12.183H70.3796V12.1297C70.3796 9.68083 68.9688 8.50961 66.1472 8.50961ZM77.3773 24.2678H75.4874V21.6592H78.0694C79.2406 21.6592 79.7198 21.3398 80.1191 20.4347L80.4385 19.7426L73.9169 6.51322H77.1378L80.5183 13.5405L81.8226 16.7081H82.0356L83.2867 13.5139L86.401 6.51322H89.5686L82.6744 21.18C81.5831 23.5491 80.0924 24.2678 77.3773 24.2678Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/LoginPageLayout.tsx

@@ -9,6 +9,10 @@ import { LinkButton } from "./primitives/Buttons";
 import { Header3 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
 import { TextLink } from "./primitives/TextLink";
+import { TldrawLogo } from "~/assets/logos/TldrawLogo";
+import { UnkeyLogo } from "~/assets/logos/UnkeyLogo";
+import { LyftLogo } from "~/assets/logos/LyftLogo";
+import { MiddayLogo } from "~/assets/logos/MiddayLogo";
 
 interface QuoteType {
   quote: string;
@@ -72,11 +76,12 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
         <div className="flex flex-col items-center gap-4 px-8">
           <Paragraph>Trusted by developers at</Paragraph>
           <div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-charcoal-500 xl:justify-between xl:gap-0">
-            <VerizonLogo />
-            <ShopifyLogo />
-            <ATAndTLogo />
+            <LyftLogo className="w-11" />
+            <UnkeyLogo />
+            <MiddayLogo />
             <AppsmithLogo />
             <CalComLogo />
+            <TldrawLogo />
           </div>
         </div>
       </div>

apps/webapp/app/components/SetupCommands.tsx

@@ -1,3 +1,5 @@
+import { createContext, useContext, useState } from "react";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
 import { InlineCode } from "./code/InlineCode";
 import {
@@ -8,7 +10,31 @@ import {
 } from "./primitives/ClientTabs";
 import { ClipboardField } from "./primitives/ClipboardField";
 import { Paragraph } from "./primitives/Paragraph";
-import { useAppOrigin } from "~/hooks/useAppOrigin";
+
+type PackageManagerContextType = {
+  activePackageManager: string;
+  setActivePackageManager: (value: string) => void;
+};
+
+const PackageManagerContext = createContext<PackageManagerContextType | undefined>(undefined);
+
+export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
+  const [activePackageManager, setActivePackageManager] = useState("npm");
+
+  return (
+    <PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
+      {children}
+    </PackageManagerContext.Provider>
+  );
+}
+
+function usePackageManager() {
+  const context = useContext(PackageManagerContext);
+  if (context === undefined) {
+    throw new Error("usePackageManager must be used within a PackageManagerProvider");
+  }
+  return context;
+}
 
 export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) {
   return (
@@ -131,7 +157,6 @@ export function TriggerDevStep({ extra }: { extra?: string }) {
   );
 }
 
-// Trigger.dev version 3 setup commands
 const v3PackageTag = "latest";
 
 function getApiUrlArg() {
@@ -160,14 +185,19 @@ function getApiUrlArg() {
 export function InitCommandV3() {
   const project = useProject();
   const projectRef = project.ref;
-
   const apiUrlArg = getApiUrlArg();
 
   const initCommandParts = [`trigger.dev@${v3PackageTag}`, "init", `-p ${projectRef}`, apiUrlArg];
   const initCommand = initCommandParts.filter(Boolean).join(" ");
 
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -202,8 +232,14 @@ export function InitCommandV3() {
 }
 
 export function TriggerDevStepV3() {
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -238,8 +274,14 @@ export function TriggerDevStepV3() {
 }
 
 export function TriggerLoginStepV3() {
+  const { activePackageManager, setActivePackageManager } = usePackageManager();
+
   return (
-    <ClientTabs defaultValue="npm">
+    <ClientTabs
+      defaultValue="npm"
+      value={activePackageManager}
+      onValueChange={setActivePackageManager}
+    >
       <ClientTabsList>
         <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
         <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>

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

@@ -12,6 +12,7 @@ import {
   RectangleStackIcon,
   ServerStackIcon,
   ShieldCheckIcon,
+  Squares2X2Icon,
 } from "@heroicons/react/20/solid";
 import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
 import { useNavigation } from "@remix-run/react";
@@ -45,6 +46,7 @@ import {
   projectSetupPath,
   projectTriggersPath,
   v3ApiKeysPath,
+  v3BatchesPath,
   v3BillingPath,
   v3ConcurrencyPath,
   v3DeploymentsPath,
@@ -63,6 +65,7 @@ import { UserProfilePhoto } from "../UserProfilePhoto";
 import { FreePlanUsage } from "../billing/v2/FreePlanUsage";
 import { Badge } from "../primitives/Badge";
 import { LinkButton } from "../primitives/Buttons";
+import { Header2 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
 import {
   Popover,
@@ -89,6 +92,34 @@ type SideMenuProps = {
   defaultValue?: FeedbackType;
 };
 
+function V2Countdown() {
+  const [days, setDays] = useState(0);
+
+  useEffect(() => {
+    const targetDate = new Date("2025-01-31T00:00:00Z");
+
+    const calculateDays = () => {
+      const now = new Date();
+      const difference = targetDate.getTime() - now.getTime();
+      return Math.floor(difference / (1000 * 60 * 60 * 24));
+    };
+
+    const timer = setInterval(() => {
+      setDays(calculateDays());
+    }, 1000 * 60 * 60); // Update every hour
+
+    setDays(calculateDays()); // Initial calculation
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Header2 className="flex-wrap gap-4 text-error">
+      V2 goes offline in <span className="tabular-nums">{days}d</span>
+    </Header2>
+  );
+}
+
 export function SideMenu({ user, project, organization, organizations }: SideMenuProps) {
   const borderRef = useRef<HTMLDivElement>(null);
   const [showHeaderDivider, setShowHeaderDivider] = useState(false);
@@ -213,7 +244,8 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
         </div>
         <div className="m-2">
           {project.version === "V2" && (
-            <div className="flex flex-col gap-3 rounded border border-success/50 bg-success/10 p-3">
+            <div className="flex flex-col gap-3 rounded border border-error/50 bg-error/5 p-3">
+              <V2Countdown />
               <Paragraph variant="small/bright">
                 This is a v2 project. V2 will be deprecated on January 31, 2025.{" "}
                 <TextLink
@@ -457,8 +489,6 @@ function V3ProjectSideMenu({
   project: SideMenuProject;
   organization: MatchedOrganization;
 }) {
-  const { alertsEnabled } = useFeatures();
-
   return (
     <>
       <SideMenuHeader title={"Project"} />
@@ -475,6 +505,13 @@ function V3ProjectSideMenu({
         activeIconColor="text-teal-500"
         to={v3RunsPath(organization, project)}
       />
+      <SideMenuItem
+        name="Batches"
+        icon={Squares2X2Icon}
+        activeIconColor="text-blue-500"
+        to={v3BatchesPath(organization, project)}
+        data-action="batches"
+      />
       <SideMenuItem
         name="Test"
         icon={BeakerIcon}
@@ -511,15 +548,13 @@ function V3ProjectSideMenu({
         to={v3DeploymentsPath(organization, project)}
         data-action="deployments"
       />
-      {alertsEnabled && (
-        <SideMenuItem
-          name="Alerts"
-          icon={BellAlertIcon}
-          activeIconColor="text-red-500"
-          to={v3ProjectAlertsPath(organization, project)}
-          data-action="alerts"
-        />
-      )}
+      <SideMenuItem
+        name="Alerts"
+        icon={BellAlertIcon}
+        activeIconColor="text-red-500"
+        to={v3ProjectAlertsPath(organization, project)}
+        data-action="alerts"
+      />
       <SideMenuItem
         name="Concurrency limits"
         icon={RectangleStackIcon}

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

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

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

@@ -174,6 +174,7 @@ export type ButtonContentPropsType = {
   className?: string;
   shortcut?: ShortcutDefinition;
   variant: keyof typeof variant;
+  shortcutPosition?: "before-trailing-icon" | "after-trailing-icon";
 };
 
 export function ButtonContent(props: ButtonContentPropsType) {
@@ -237,6 +238,14 @@ export function ButtonContent(props: ButtonContentPropsType) {
             <>{text}</>
           ))}
 
+        {shortcut && props.shortcutPosition === "before-trailing-icon" && (
+          <ShortcutKey
+            className={cn(shortcutClassName)}
+            shortcut={shortcut}
+            variant={variation.shortcutVariant ?? "medium"}
+          />
+        )}
+
         {TrailingIcon &&
           (typeof TrailingIcon === "string" ? (
             <NamedIcon
@@ -258,13 +267,15 @@ export function ButtonContent(props: ButtonContentPropsType) {
               )}
             />
           ))}
-        {shortcut && (
-          <ShortcutKey
-            className={cn(shortcutClassName)}
-            shortcut={shortcut}
-            variant={variation.shortcutVariant ?? "medium"}
-          />
-        )}
+
+        {shortcut &&
+          (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") && (
+            <ShortcutKey
+              className={cn(shortcutClassName)}
+              shortcut={shortcut}
+              variant={variation.shortcutVariant ?? "medium"}
+            />
+          )}
       </div>
     </div>
   );

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

@@ -5,7 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "~/utils/cn";
 import { motion } from "framer-motion";
 
-const ClientTabs = TabsPrimitive.Root;
+const ClientTabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>((props, ref) => <TabsPrimitive.Root ref={ref} {...props} />);
+ClientTabs.displayName = TabsPrimitive.Root.displayName;
 
 const ClientTabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,

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

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

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

@@ -440,7 +440,7 @@ export interface SelectItemProps extends Ariakit.SelectItemProps {
 }
 
 const selectItemClasses =
-  "group cursor-pointer px-1 pt-1 text-sm text-text-dimmed focus-custom last:pb-1";
+  "group cursor-pointer px-1 pt-1 text-2sm text-text-dimmed focus-custom last:pb-1";
 
 export function SelectItem({
   icon,
@@ -482,7 +482,11 @@ export function SelectItem({
         <div className="grow truncate">{props.children || props.value}</div>
         {checkIcon}
         {shortcut && (
-          <ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
+          <ShortcutKey
+            className={cn("size-4 flex-none transition duration-0 group-hover:border-charcoal-600")}
+            shortcut={shortcut}
+            variant={"small"}
+          />
         )}
       </div>
     </Ariakit.SelectItem>
@@ -613,7 +617,7 @@ export function SelectPopover({
         "z-50 flex flex-col overflow-clip rounded border border-charcoal-700 bg-background-bright shadow-md outline-none animate-in fade-in-40",
         "min-w-[max(180px,calc(var(--popover-anchor-width)+0.5rem))]",
         "max-w-[min(480px,var(--popover-available-width))]",
-        "max-h-[min(520px,var(--popover-available-height))]",
+        "max-h-[min(600px,var(--popover-available-height))]",
         "origin-[var(--popover-transform-origin)]",
         className
       )}

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

@@ -26,8 +26,8 @@ export function Spinner({
       foreground: "#3C4B62",
     },
     dark: {
-      background: "#15171A",
-      foreground: "#272A2E",
+      background: "rgba(18, 19, 23, 0.35)",
+      foreground: "#1A1B1F",
     },
   };
 

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

@@ -13,10 +13,10 @@ const variations = {
   },
   small: {
     container:
-      "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 transition focus-custom",
+      "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer",
     root: "h-3 w-6",
     thumb: "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
-    text: "text-xs text-charcoal-400 group-hover:text-charcoal-200 hover:cursor-pointer transition",
+    text: "text-xs",
   },
 };
 

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

@@ -70,16 +70,18 @@ type TableRowProps = {
   className?: string;
   children: ReactNode;
   disabled?: boolean;
+  isSelected?: boolean;
 };
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ className, disabled, children }, ref) => {
+  ({ className, disabled, isSelected, children }, ref) => {
     return (
       <tr
         ref={ref}
         className={cn(
-          disabled && "opacity-50",
           "group/table-row relative w-full after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
+          disabled && "opacity-50",
+          isSelected && isSelectedStyle,
           className
         )}
       >
@@ -146,6 +148,7 @@ type TableCellProps = TableCellBasicProps & {
   isSticky?: boolean;
   actionClassName?: string;
   rowHoverStyle?: keyof typeof rowHoverStyles;
+  isSelected?: boolean;
 };
 
 const rowHoverStyles = {
@@ -160,6 +163,8 @@ const rowHoverStyles = {
 const stickyStyles =
   "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto";
 
+const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750";
+
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   (
     {
@@ -173,6 +178,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       hasAction = false,
       isSticky = false,
       rowHoverStyle = "default",
+      isSelected,
     },
     ref
   ) => {
@@ -203,7 +209,8 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
-          rowHoverStyles[rowHoverStyle],
+          isSelected && isSelectedStyle,
+          !isSelected && rowHoverStyles[rowHoverStyle],
           className
         )}
         colSpan={colSpan}
@@ -259,10 +266,20 @@ export const TableCellMenu = forwardRef<
     hiddenButtons?: ReactNode;
     popoverContent?: ReactNode;
     children?: ReactNode;
+    isSelected?: boolean;
   }
 >(
   (
-    { className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent, children },
+    {
+      className,
+      isSticky,
+      onClick,
+      visibleButtons,
+      hiddenButtons,
+      popoverContent,
+      children,
+      isSelected,
+    },
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -275,9 +292,17 @@ export const TableCellMenu = forwardRef<
         ref={ref}
         alignment="right"
         hasAction={true}
+        isSelected={isSelected}
       >
-        <div className="relative p-1">
-          <div className="absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 bg-background-dimmed p-0.5 group-hover/table-row:rounded-[0.25rem] group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright">
+        <div className="relative h-full p-1">
+          <div
+            className={cn(
+              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright",
+              isSelected && isSelectedStyle,
+              isSelected &&
+                "group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/50"
+            )}
+          >
             {/* Hidden buttons that show on hover */}
             {hiddenButtons && (
               <div className="hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed">

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

@@ -6,6 +6,7 @@ import { useTypedLoaderData } from "remix-typedjson";
 import { loader } from "~/root";
 import { useEffect } from "react";
 import { Paragraph } from "./Paragraph";
+import { cn } from "~/utils/cn";
 
 const defaultToastDuration = 5000;
 const permanentToastDuration = 60 * 60 * 24 * 1000;
@@ -39,23 +40,27 @@ export function ToastUI({
 }) {
   return (
     <div
-      className={`self-end rounded-md border border-grid-bright bg-background-dimmed`}
+      className={cn(
+        "self-end rounded-md border border-grid-bright bg-background-dimmed",
+        variant === "success" && "border-success",
+        variant === "error" && "border-error"
+      )}
       style={{
         width: toastWidth,
       }}
     >
       <div className="flex w-full items-start gap-2 rounded-lg p-3">
         {variant === "success" ? (
-          <CheckCircleIcon className="mt-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] text-green-600" />
+          <CheckCircleIcon className="mt-1 size-6 min-w-6 text-success" />
         ) : (
-          <ExclamationCircleIcon className="mt-1 h-6 w-6 min-w-[1.5rem] text-rose-600" />
+          <ExclamationCircleIcon className="mt-1 size-6 min-w-6 text-error" />
         )}
-        <Paragraph className="py-1 text-text-dimmed">{message}</Paragraph>
+        <Paragraph className="py-1 text-text-bright">{message}</Paragraph>
         <button
           className="hover:bg-midnight-800 ms-auto rounded p-2 text-text-dimmed transition hover:text-text-bright"
           onClick={() => toast.dismiss(t)}
         >
-          <XMarkIcon className="h-4 w-4" />
+          <XMarkIcon className="size-4" />
         </button>
       </div>
     </div>

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

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

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

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

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

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

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

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

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

@@ -118,3 +118,34 @@ export function deploymentStatusTitle(status: WorkerDeploymentStatus, isBuilt: b
     }
   }
 }
+
+// PENDING and CANCELED are not used so are ommited from the UI
+export const deploymentStatuses: WorkerDeploymentStatus[] = [
+  "BUILDING",
+  "DEPLOYING",
+  "DEPLOYED",
+  "FAILED",
+  "TIMED_OUT",
+];
+
+export function deploymentStatusDescription(status: WorkerDeploymentStatus): string {
+  switch (status) {
+    case "PENDING":
+      return "The deployment is queued and waiting to be processed.";
+    case "BUILDING":
+      return "The code is being built and prepared for deployment.";
+    case "DEPLOYING":
+      return "The deployment is in progress and tasks are being indexed.";
+    case "DEPLOYED":
+      return "The deployment has completed successfully.";
+    case "CANCELED":
+      return "The deployment was manually canceled.";
+    case "FAILED":
+      return "The deployment encountered an error and could not complete.";
+    case "TIMED_OUT":
+      return "The deployment exceeded the maximum allowed time and was stopped.";
+    default: {
+      assertNever(status);
+    }
+  }
+}

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

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

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

@@ -121,7 +121,7 @@ export function RunInspector({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}

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

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

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

@@ -67,7 +67,7 @@ export function SpanInspector({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}

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

@@ -2,15 +2,14 @@ import {
   CheckCircleIcon,
   ClockIcon,
   NoSymbolIcon,
-  PauseCircleIcon,
   RectangleStackIcon,
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import type { TaskRunAttemptStatus as TaskRunAttemptStatusType } from "@trigger.dev/database";
-import { TaskRunAttemptStatus } from "~/database-types";
 import assertNever from "assert-never";
-import { SnowflakeIcon } from "lucide-react";
+import { HourglassIcon, SnowflakeIcon } from "lucide-react";
 import { Spinner } from "~/components/primitives/Spinner";
+import { TaskRunAttemptStatus } from "~/database-types";
 import { cn } from "~/utils/cn";
 
 export const allTaskRunAttemptStatuses = Object.values(
@@ -65,7 +64,7 @@ export function TaskRunAttemptStatusIcon({
     case "EXECUTING":
       return <Spinner className={cn(runAttemptStatusClassNameColor(status), className)} />;
     case "PAUSED":
-      return <SnowflakeIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
+      return <HourglassIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
     case "FAILED":
       return <XCircleIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
     case "CANCELED":
@@ -91,7 +90,7 @@ export function runAttemptStatusClassNameColor(status: ExtendedTaskAttemptStatus
     case "EXECUTING":
       return "text-pending";
     case "PAUSED":
-      return "text-sky-300";
+      return "text-charcoal-500";
     case "FAILED":
       return "text-error";
     case "CANCELED":
@@ -117,7 +116,7 @@ export function runAttemptStatusTitle(status: ExtendedTaskAttemptStatus | null):
     case "EXECUTING":
       return "Executing";
     case "PAUSED":
-      return "Frozen";
+      return "Waiting";
     case "FAILED":
       return "Failed";
     case "CANCELED":

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

@@ -8,13 +8,12 @@ import {
   NoSymbolIcon,
   PauseCircleIcon,
   RectangleStackIcon,
-  StopIcon,
   TrashIcon,
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import { TaskRunStatus } from "@trigger.dev/database";
 import assertNever from "assert-never";
-import { SnowflakeIcon } from "lucide-react";
+import { HourglassIcon } from "lucide-react";
 import { TimedOutIcon } from "~/assets/icons/TimedOutIcon";
 import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
@@ -41,9 +40,9 @@ export const filterableTaskRunStatuses = [
   "WAITING_FOR_DEPLOY",
   "DELAYED",
   "PENDING",
+  "WAITING_TO_RESUME",
   "EXECUTING",
   "RETRYING_AFTER_FAILURE",
-  "WAITING_TO_RESUME",
   "COMPLETED_SUCCESSFULLY",
   "CANCELED",
   "COMPLETED_WITH_ERRORS",
@@ -55,21 +54,21 @@ export const filterableTaskRunStatuses = [
 ] as const satisfies Readonly<Array<TaskRunStatus>>;
 
 const taskRunStatusDescriptions: Record<TaskRunStatus, string> = {
-  DELAYED: "Task has been delayed and is waiting to be executed",
-  PENDING: "Task is waiting to be executed",
-  WAITING_FOR_DEPLOY: "Task needs to be deployed first to start executing",
-  EXECUTING: "Task is currently being executed",
-  RETRYING_AFTER_FAILURE: "Task is being reattempted after a failure",
-  WAITING_TO_RESUME: "Task has been frozen and is waiting to be resumed",
-  COMPLETED_SUCCESSFULLY: "Task has been successfully completed",
-  CANCELED: "Task has been canceled",
-  COMPLETED_WITH_ERRORS: "Task has failed with errors",
-  INTERRUPTED: "Task has failed because it was interrupted",
-  SYSTEM_FAILURE: "Task has failed due to a system failure",
-  PAUSED: "Task has been paused by the user",
-  CRASHED: "Task has crashed and won't be retried",
-  EXPIRED: "Task has surpassed its ttl and won't be executed",
-  TIMED_OUT: "Task has failed because it exceeded its maxDuration",
+  DELAYED: "Task has been delayed and is waiting to be executed.",
+  PENDING: "Task is waiting to be executed.",
+  WAITING_FOR_DEPLOY: "Task needs to be deployed first to start executing.",
+  EXECUTING: "Task is currently being executed.",
+  RETRYING_AFTER_FAILURE: "Task is being reattempted after a failure.",
+  WAITING_TO_RESUME: `You have used a "wait" function. When the wait is complete, the task will resume execution.`,
+  COMPLETED_SUCCESSFULLY: "Task has been successfully completed.",
+  CANCELED: "Task has been canceled.",
+  COMPLETED_WITH_ERRORS: "Task has failed with errors.",
+  INTERRUPTED: "Task has failed because it was interrupted.",
+  SYSTEM_FAILURE: "Task has failed due to a system failure.",
+  PAUSED: "Task has been paused by the user.",
+  CRASHED: "Task has crashed and won't be retried.",
+  EXPIRED: "Task has surpassed its ttl and won't be executed.",
+  TIMED_OUT: "Task has failed because it exceeded its maxDuration.",
 };
 
 export const QUEUED_STATUSES = [
@@ -126,7 +125,7 @@ export function TaskRunStatusIcon({
     case "EXECUTING":
       return <Spinner className={cn(runStatusClassNameColor(status), className)} />;
     case "WAITING_TO_RESUME":
-      return <SnowflakeIcon className={cn(runStatusClassNameColor(status), className)} />;
+      return <HourglassIcon className={cn(runStatusClassNameColor(status), className)} />;
     case "RETRYING_AFTER_FAILURE":
       return <ArrowPathIcon className={cn(runStatusClassNameColor(status), className)} />;
     case "PAUSED":
@@ -165,7 +164,7 @@ export function runStatusClassNameColor(status: TaskRunStatus): string {
     case "RETRYING_AFTER_FAILURE":
       return "text-pending";
     case "WAITING_TO_RESUME":
-      return "text-sky-300";
+      return "text-charcoal-500";
     case "PAUSED":
       return "text-amber-300";
     case "CANCELED":
@@ -200,7 +199,7 @@ export function runStatusTitle(status: TaskRunStatus): string {
     case "EXECUTING":
       return "Executing";
     case "WAITING_TO_RESUME":
-      return "Frozen";
+      return "Waiting";
     case "RETRYING_AFTER_FAILURE":
       return "Reattempting";
     case "PAUSED":

apps/webapp/app/env.server.ts

@@ -44,9 +44,16 @@ const EnvironmentSchema = z.object({
   HIGHLIGHT_PROJECT_ID: z.string().optional(),
   AUTH_GITHUB_CLIENT_ID: z.string().optional(),
   AUTH_GITHUB_CLIENT_SECRET: z.string().optional(),
+  EMAIL_TRANSPORT: z.enum(["resend", "smtp", "aws-ses"]).optional(),
   FROM_EMAIL: z.string().optional(),
   REPLY_TO_EMAIL: z.string().optional(),
   RESEND_API_KEY: z.string().optional(),
+  SMTP_HOST: z.string().optional(),
+  SMTP_PORT: z.coerce.number().optional(),
+  SMTP_SECURE: z.coerce.boolean().optional(),
+  SMTP_USER: z.string().optional(),
+  SMTP_PASSWORD:  z.string().optional(),
+
   PLAIN_API_KEY: z.string().optional(),
   RUNTIME_PLATFORM: z.enum(["docker-compose", "ecs", "local"]).default("local"),
   WORKER_SCHEMA: z.string().default("graphile_worker"),
@@ -142,6 +149,10 @@ const EnvironmentSchema = z.object({
   CONTAINER_REGISTRY_PASSWORD: z.string().optional(),
   DEPLOY_REGISTRY_HOST: z.string().optional(),
   DEPLOY_REGISTRY_NAMESPACE: z.string().default("trigger"),
+  DEPLOY_TIMEOUT_MS: z.coerce
+    .number()
+    .int()
+    .default(60 * 1000 * 8), // 8 minutes
   OBJECT_STORE_BASE_URL: z.string().optional(),
   OBJECT_STORE_ACCESS_KEY_ID: z.string().optional(),
   OBJECT_STORE_SECRET_ACCESS_KEY: z.string().optional(),
@@ -191,8 +202,16 @@ const EnvironmentSchema = z.object({
   ORG_SLACK_INTEGRATION_CLIENT_SECRET: z.string().optional(),
 
   /** These enable the alerts feature in v3 */
+  ALERT_EMAIL_TRANSPORT: z.enum(["resend", "smtp", "aws-ses"]).optional(),
   ALERT_FROM_EMAIL: z.string().optional(),
+  ALERT_REPLY_TO_EMAIL: z.string().optional(),
   ALERT_RESEND_API_KEY: z.string().optional(),
+  ALERT_SMTP_HOST: z.string().optional(),
+  ALERT_SMTP_PORT: z.coerce.number().optional(),
+  ALERT_SMTP_SECURE: z.coerce.boolean().optional(),
+  ALERT_SMTP_USER: z.string().optional(),
+  ALERT_SMTP_PASSWORD:  z.string().optional(),
+
 
   MAX_SEQUENTIAL_INDEX_FAILURE_COUNT: z.coerce.number().default(96),
 
@@ -233,10 +252,14 @@ const EnvironmentSchema = z.object({
   MAXIMUM_TRACE_SUMMARY_VIEW_COUNT: z.coerce.number().int().default(25_000),
   TASK_PAYLOAD_OFFLOAD_THRESHOLD: z.coerce.number().int().default(524_288), // 512KB
   TASK_PAYLOAD_MAXIMUM_SIZE: z.coerce.number().int().default(3_145_728), // 3MB
+  BATCH_TASK_PAYLOAD_MAXIMUM_SIZE: z.coerce.number().int().default(1_000_000), // 1MB
   TASK_RUN_METADATA_MAXIMUM_SIZE: z.coerce.number().int().default(4_096), // 4KB
 
   MAXIMUM_DEV_QUEUE_SIZE: z.coerce.number().int().optional(),
   MAXIMUM_DEPLOYED_QUEUE_SIZE: z.coerce.number().int().optional(),
+  MAX_BATCH_V2_TRIGGER_ITEMS: z.coerce.number().int().default(500),
+
+  REALTIME_STREAM_VERSION: z.enum(["v1", "v2"]).default("v1"),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/features.server.ts

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

apps/webapp/app/hooks/useFeatures.ts

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

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

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

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

@@ -15,7 +15,7 @@ import assertNever from "assert-never";
 import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { generatePresignedUrl } from "~/v3/r2.server";
 import { BasePresenter } from "./basePresenter.server";
-import { prisma } from "~/db.server";
+import { $replica, prisma } from "~/db.server";
 
 // Build 'select' object
 const commonRunSelect = {
@@ -59,48 +59,46 @@ type CommonRelatedRun = Prisma.Result<
   "findFirstOrThrow"
 >;
 
+type FoundRun = NonNullable<Awaited<ReturnType<typeof ApiRetrieveRunPresenter.findRun>>>;
+
 export class ApiRetrieveRunPresenter extends BasePresenter {
+  public static async findRun(friendlyId: string, env: AuthenticatedEnvironment) {
+    return $replica.taskRun.findFirst({
+      where: {
+        friendlyId,
+        runtimeEnvironmentId: env.id,
+      },
+      include: {
+        attempts: true,
+        lockedToVersion: true,
+        schedule: true,
+        tags: true,
+        batch: {
+          select: {
+            id: true,
+            friendlyId: true,
+          },
+        },
+        parentTaskRun: {
+          select: commonRunSelect,
+        },
+        rootTaskRun: {
+          select: commonRunSelect,
+        },
+        childRuns: {
+          select: {
+            ...commonRunSelect,
+          },
+        },
+      },
+    });
+  }
+
   public async call(
-    friendlyId: string,
+    taskRun: FoundRun,
     env: AuthenticatedEnvironment
   ): Promise<RetrieveRunResponse | undefined> {
     return this.traceWithEnv("call", env, async (span) => {
-      const taskRun = await this._replica.taskRun.findFirst({
-        where: {
-          friendlyId,
-          runtimeEnvironmentId: env.id,
-        },
-        include: {
-          attempts: true,
-          lockedToVersion: true,
-          schedule: true,
-          tags: true,
-          batch: {
-            select: {
-              id: true,
-              friendlyId: true,
-            },
-          },
-          parentTaskRun: {
-            select: commonRunSelect,
-          },
-          rootTaskRun: {
-            select: commonRunSelect,
-          },
-          childRuns: {
-            select: {
-              ...commonRunSelect,
-            },
-          },
-        },
-      });
-
-      if (!taskRun) {
-        logger.debug("Task run not found", { friendlyId, envId: env.id });
-
-        return undefined;
-      }
-
       let $payload: any;
       let $payloadPresignedUrl: string | undefined;
       let $output: any;

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

@@ -1,4 +1,4 @@
-import { ListRunResponse, ListRunResponseItem, RunStatus } from "@trigger.dev/core/v3";
+import { ListRunResponse, ListRunResponseItem, parsePacket, RunStatus } from "@trigger.dev/core/v3";
 import { Project, RuntimeEnvironment, TaskRunStatus } from "@trigger.dev/database";
 import assertNever from "assert-never";
 import { z } from "zod";
@@ -119,6 +119,7 @@ export const ApiRunListSearchParams = z.object({
   "filter[createdAt][from]": CoercedDate,
   "filter[createdAt][to]": CoercedDate,
   "filter[createdAt][period]": z.string().optional(),
+  "filter[batch]": z.string().optional(),
 });
 
 type ApiRunListSearchParams = z.infer<typeof ApiRunListSearchParams>;
@@ -209,42 +210,61 @@ export class ApiRunListPresenter extends BasePresenter {
         options.isTest = searchParams["filter[isTest]"];
       }
 
+      if (searchParams["filter[batch]"]) {
+        options.batchId = searchParams["filter[batch]"];
+      }
+
       const presenter = new RunListPresenter();
 
       logger.debug("Calling RunListPresenter", { options });
 
       const results = await presenter.call(options);
 
-      const data: ListRunResponseItem[] = results.runs.map((run) => {
-        return {
-          id: run.friendlyId,
-          status: ApiRetrieveRunPresenter.apiStatusFromRunStatus(run.status),
-          taskIdentifier: run.taskIdentifier,
-          idempotencyKey: run.idempotencyKey,
-          version: run.version ?? undefined,
-          createdAt: new Date(run.createdAt),
-          updatedAt: new Date(run.updatedAt),
-          startedAt: run.startedAt ? new Date(run.startedAt) : undefined,
-          finishedAt: run.finishedAt ? new Date(run.finishedAt) : undefined,
-          delayedUntil: run.delayUntil ? new Date(run.delayUntil) : undefined,
-          isTest: run.isTest,
-          ttl: run.ttl ?? undefined,
-          expiredAt: run.expiredAt ? new Date(run.expiredAt) : undefined,
-          env: {
-            id: run.environment.id,
-            name: run.environment.slug,
-            user: run.environment.userName,
-          },
-          tags: run.tags,
-          costInCents: run.costInCents,
-          baseCostInCents: run.baseCostInCents,
-          durationMs: run.usageDurationMs,
-          depth: run.depth,
-          ...ApiRetrieveRunPresenter.apiBooleanHelpersFromRunStatus(
-            ApiRetrieveRunPresenter.apiStatusFromRunStatus(run.status)
-          ),
-        };
-      });
+      logger.debug("RunListPresenter results", { results });
+
+      const data: ListRunResponseItem[] = await Promise.all(
+        results.runs.map(async (run) => {
+          const metadata = await parsePacket(
+            {
+              data: run.metadata ?? undefined,
+              dataType: run.metadataType,
+            },
+            {
+              filteredKeys: ["$$streams", "$$streamsVersion", "$$streamsBaseUrl"],
+            }
+          );
+
+          return {
+            id: run.friendlyId,
+            status: ApiRetrieveRunPresenter.apiStatusFromRunStatus(run.status),
+            taskIdentifier: run.taskIdentifier,
+            idempotencyKey: run.idempotencyKey,
+            version: run.version ?? undefined,
+            createdAt: new Date(run.createdAt),
+            updatedAt: new Date(run.updatedAt),
+            startedAt: run.startedAt ? new Date(run.startedAt) : undefined,
+            finishedAt: run.finishedAt ? new Date(run.finishedAt) : undefined,
+            delayedUntil: run.delayUntil ? new Date(run.delayUntil) : undefined,
+            isTest: run.isTest,
+            ttl: run.ttl ?? undefined,
+            expiredAt: run.expiredAt ? new Date(run.expiredAt) : undefined,
+            env: {
+              id: run.environment.id,
+              name: run.environment.slug,
+              user: run.environment.userName,
+            },
+            tags: run.tags,
+            costInCents: run.costInCents,
+            baseCostInCents: run.baseCostInCents,
+            durationMs: run.usageDurationMs,
+            depth: run.depth,
+            metadata,
+            ...ApiRetrieveRunPresenter.apiBooleanHelpersFromRunStatus(
+              ApiRetrieveRunPresenter.apiStatusFromRunStatus(run.status)
+            ),
+          };
+        })
+      );
 
       return {
         data,

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

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

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

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

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

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

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

@@ -149,6 +149,11 @@ export class SpanPresenter extends BasePresenter {
             spanId: true,
           },
         },
+        batch: {
+          select: {
+            friendlyId: true,
+          },
+        },
       },
       where: {
         spanId,
@@ -210,7 +215,9 @@ export class SpanPresenter extends BasePresenter {
     const span = await eventRepository.getSpan(spanId, run.traceId);
 
     const metadata = run.metadata
-      ? await prettyPrintPacket(run.metadata, run.metadataType, { filteredKeys: ["$$streams"] })
+      ? await prettyPrintPacket(run.metadata, run.metadataType, {
+          filteredKeys: ["$$streams", "$$streamsVersion", "$$streamsBaseUrl"],
+        })
       : undefined;
 
     const context = {
@@ -312,6 +319,7 @@ export class SpanPresenter extends BasePresenter {
       context: JSON.stringify(context, null, 2),
       metadata,
       maxDurationInSeconds: getMaxDuration(run.maxDurationInSeconds),
+      batch: run.batch ? { friendlyId: run.batch.friendlyId } : undefined,
     };
   }
 

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

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

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

@@ -23,6 +23,7 @@ import { Label } from "~/components/primitives/Label";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { InfoIconTooltip } from "~/components/primitives/Tooltip";
+import { env } from "~/env.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -150,9 +151,13 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const option = url.searchParams.get("option");
 
+  const emailAlertsEnabled =
+    env.ALERT_FROM_EMAIL !== undefined && env.ALERT_RESEND_API_KEY !== undefined;
+
   return typedjson({
     ...results,
     option: option === "slack" ? ("SLACK" as const) : undefined,
+    emailAlertsEnabled,
   });
 }
 
@@ -200,7 +205,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
 export default function Page() {
   const [isOpen, setIsOpen] = useState(false);
-  const { slack, option } = useTypedLoaderData<typeof loader>();
+  const { slack, option, emailAlertsEnabled } = useTypedLoaderData<typeof loader>();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
   const navigate = useNavigate();
@@ -271,16 +276,23 @@ export default function Page() {
             </InputGroup>
 
             {currentAlertChannel === "EMAIL" ? (
-              <InputGroup fullWidth>
-                <Label>Email</Label>
-                <Input
-                  {...conform.input(channelValue)}
-                  placeholder="email@youremail.com"
-                  type="email"
-                  autoFocus
-                />
-                <FormError id={channelValue.errorId}>{channelValue.error}</FormError>
-              </InputGroup>
+              emailAlertsEnabled ? (
+                <InputGroup fullWidth>
+                  <Label>Email</Label>
+                  <Input
+                    {...conform.input(channelValue)}
+                    placeholder="email@youremail.com"
+                    type="email"
+                    autoFocus
+                  />
+                  <FormError id={channelValue.errorId}>{channelValue.error}</FormError>
+                </InputGroup>
+              ) : (
+                <Callout variant="warning">
+                  Email integration is not available. Please contact your organization
+                  administrator.
+                </Callout>
+              )
             ) : currentAlertChannel === "SLACK" ? (
               <InputGroup fullWidth>
                 {slack.status === "READY" ? (

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

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

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

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

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

@@ -35,7 +35,11 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import { TextLink } from "~/components/primitives/TextLink";
-import { DeploymentStatus } from "~/components/runs/v3/DeploymentStatus";
+import {
+  DeploymentStatus,
+  deploymentStatuses,
+  deploymentStatusDescription,
+} from "~/components/runs/v3/DeploymentStatus";
 import { RetryDeploymentIndexingDialog } from "~/components/runs/v3/RetryDeploymentIndexingDialog";
 import { RollbackDeploymentDialog } from "~/components/runs/v3/RollbackDeploymentDialog";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -46,6 +50,7 @@ import {
   DeploymentListPresenter,
 } from "~/presenters/v3/DeploymentListPresenter.server";
 import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
 import {
   ProjectParamSchema,
   docsPath,
@@ -119,7 +124,30 @@ export default function Page() {
                       <TableHeaderCell>Deploy</TableHeaderCell>
                       <TableHeaderCell>Env</TableHeaderCell>
                       <TableHeaderCell>Version</TableHeaderCell>
-                      <TableHeaderCell>Status</TableHeaderCell>
+                      <TableHeaderCell
+                        tooltip={
+                          <div className="flex flex-col divide-y divide-grid-dimmed">
+                            {deploymentStatuses.map((status) => (
+                              <div
+                                key={status}
+                                className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
+                              >
+                                <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
+                                  <DeploymentStatus status={status} isBuilt={false} />
+                                </div>
+                                <Paragraph
+                                  variant="extra-small"
+                                  className="!text-wrap text-text-dimmed"
+                                >
+                                  {deploymentStatusDescription(status)}
+                                </Paragraph>
+                              </div>
+                            ))}
+                          </div>
+                        }
+                      >
+                        Status
+                      </TableHeaderCell>
                       <TableHeaderCell>Tasks</TableHeaderCell>
                       <TableHeaderCell>Deployed at</TableHeaderCell>
                       <TableHeaderCell>Deployed by</TableHeaderCell>
@@ -139,9 +167,10 @@ export default function Page() {
                           deployment,
                           currentPage
                         );
+                        const isSelected = deploymentParam === deployment.shortCode;
                         return (
-                          <TableRow key={deployment.id} className="group">
-                            <TableCell to={path}>
+                          <TableRow key={deployment.id} className="group" isSelected={isSelected}>
+                            <TableCell to={path} isSelected={isSelected}>
                               <div className="flex items-center gap-2">
                                 <Paragraph variant="extra-small">{deployment.shortCode}</Paragraph>
                                 {deployment.label && (
@@ -149,30 +178,32 @@ export default function Page() {
                                 )}
                               </div>
                             </TableCell>
-                            <TableCell to={path}>
+                            <TableCell to={path} isSelected={isSelected}>
                               <EnvironmentLabel
                                 environment={deployment.environment}
                                 userName={usernameForEnv}
                               />
                             </TableCell>
-                            <TableCell to={path}>{deployment.version}</TableCell>
-                            <TableCell to={path}>
+                            <TableCell to={path} isSelected={isSelected}>
+                              {deployment.version}
+                            </TableCell>
+                            <TableCell to={path} isSelected={isSelected}>
                               <DeploymentStatus
                                 status={deployment.status}
                                 isBuilt={deployment.isBuilt}
                               />
                             </TableCell>
-                            <TableCell to={path}>
+                            <TableCell to={path} isSelected={isSelected}>
                               {deployment.tasksCount !== null ? deployment.tasksCount : "–"}
                             </TableCell>
-                            <TableCell to={path}>
+                            <TableCell to={path} isSelected={isSelected}>
                               {deployment.deployedAt ? (
                                 <DateTime date={deployment.deployedAt} />
                               ) : (
                                 "–"
                               )}
                             </TableCell>
-                            <TableCell to={path}>
+                            <TableCell to={path} isSelected={isSelected}>
                               {deployment.deployedBy ? (
                                 <div className="flex items-center gap-1">
                                   <UserAvatar
@@ -192,7 +223,11 @@ export default function Page() {
                                 "–"
                               )}
                             </TableCell>
-                            <DeploymentActionsCell deployment={deployment} path={path} />
+                            <DeploymentActionsCell
+                              deployment={deployment}
+                              path={path}
+                              isSelected={isSelected}
+                            />
                           </TableRow>
                         );
                       })
@@ -277,9 +312,11 @@ function CreateDeploymentInstructions() {
 function DeploymentActionsCell({
   deployment,
   path,
+  isSelected,
 }: {
   deployment: DeploymentListItem;
   path: string;
+  isSelected: boolean;
 }) {
   const location = useLocation();
   const project = useProject();
@@ -288,12 +325,17 @@ function DeploymentActionsCell({
   const canRetryIndexing = deployment.isLatest && deploymentIndexingIsRetryable(deployment);
 
   if (!canRollback && !canRetryIndexing) {
-    return <TableCell to={path}>{""}</TableCell>;
+    return (
+      <TableCell to={path} isSelected={isSelected}>
+        {""}
+      </TableCell>
+    );
   }
 
   return (
     <TableCellMenu
       isSticky
+      isSelected={isSelected}
       popoverContent={
         <>
           {canRollback && (

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

@@ -35,9 +35,13 @@ import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
 import { BULK_ACTION_RUN_LIMIT } from "~/consts";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useUser } from "~/hooks/useUser";
 import { findProjectBySlug } from "~/models/project.server";
 import { RunListPresenter } from "~/presenters/v3/RunListPresenter.server";
+import {
+  getRootOnlyFilterPreference,
+  setRootOnlyFilterPreference,
+  uiPreferencesStorage,
+} from "~/services/preferences/uiPreferences.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import {
@@ -54,6 +58,14 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { projectParam, organizationSlug } = ProjectParamSchema.parse(params);
 
   const url = new URL(request.url);
+
+  let rootOnlyValue = false;
+  if (url.searchParams.has("rootOnly")) {
+    rootOnlyValue = url.searchParams.get("rootOnly") === "true";
+  } else {
+    rootOnlyValue = await getRootOnlyFilterPreference(request);
+  }
+
   const s = {
     cursor: url.searchParams.get("cursor") ?? undefined,
     direction: url.searchParams.get("direction") ?? undefined,
@@ -63,6 +75,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     period: url.searchParams.get("period") ?? undefined,
     bulkId: url.searchParams.get("bulkId") ?? undefined,
     tags: url.searchParams.getAll("tags").map((t) => decodeURIComponent(t)),
+    from: url.searchParams.get("from") ?? undefined,
+    to: url.searchParams.get("to") ?? undefined,
+    rootOnly: rootOnlyValue,
+    runId: url.searchParams.get("runId") ?? undefined,
+    batchId: url.searchParams.get("batchId") ?? undefined,
+    scheduleId: url.searchParams.get("scheduleId") ?? undefined,
   };
   const {
     tasks,
@@ -76,6 +94,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     to,
     cursor,
     direction,
+    rootOnly,
+    runId,
+    batchId,
+    scheduleId,
   } = TaskRunListSearchFilters.parse(s);
 
   const project = await findProjectBySlug(organizationSlug, projectParam, userId);
@@ -97,21 +119,35 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     bulkId,
     from,
     to,
+    batchId,
+    runId,
+    scheduleId,
+    rootOnly,
     direction: direction,
     cursor: cursor,
   });
 
-  return typeddefer({
-    data: list,
-  });
+  const session = await setRootOnlyFilterPreference(rootOnlyValue, request);
+  const cookieValue = await uiPreferencesStorage.commitSession(session);
+
+  return typeddefer(
+    {
+      data: list,
+      rootOnlyDefault: rootOnlyValue,
+    },
+    {
+      headers: {
+        "Set-Cookie": cookieValue,
+      },
+    }
+  );
 };
 
 export default function Page() {
-  const { data } = useTypedLoaderData<typeof loader>();
+  const { data, rootOnlyDefault } = useTypedLoaderData<typeof loader>();
   const navigation = useNavigation();
   const isLoading = navigation.state !== "idle";
   const project = useProject();
-  const user = useUser();
 
   return (
     <>
@@ -170,6 +206,7 @@ export default function Page() {
                               possibleTasks={list.possibleTasks}
                               bulkActions={list.bulkActions}
                               hasFilters={list.hasFilters}
+                              rootOnlyDefault={rootOnlyDefault}
                             />
                             <div className="flex items-center justify-end gap-x-2">
                               <ListPagination list={list} />

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

@@ -216,9 +216,10 @@ export default function Page() {
         <Header2 className={cn("whitespace-nowrap")}>{schedule.friendlyId}</Header2>
         <LinkButton
           to={`${v3SchedulesPath(organization, project)}${location.search}`}
-          variant="minimal/medium"
-          LeadingIcon={ExitIcon}
+          variant="minimal/small"
+          TrailingIcon={ExitIcon}
           shortcut={{ key: "esc" }}
+          shortcutPosition="before-trailing-icon"
         />
       </div>
       <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">

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

@@ -204,7 +204,7 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
       );
       e.preventDefault();
     },
-    [currentPayloadJson, currentMetadataJson]
+    [currentPayloadJson, currentMetadataJson, task]
   );
 
   const [form, { environmentId, payload }] = useForm({
@@ -412,6 +412,7 @@ function ScheduledTaskForm({
                   granularity="second"
                   showNowButton
                   variant="medium"
+                  utc
                 />
                 <Hint>
                   This is the timestamp of the CRON, it will come through to your run in the
@@ -436,6 +437,7 @@ function ScheduledTaskForm({
                   showNowButton
                   showClearButton
                   variant="medium"
+                  utc
                 />
                 <Hint>
                   This is the timestamp of the previous run. You can use this in your code to find

apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx

@@ -209,6 +209,7 @@ export default function Page() {
             title="Unlock more team members"
             to={v3BillingPath(organization)}
             buttonLabel="Upgrade"
+            panelClassName="mt-4 max-w-sm"
           >
             <Paragraph variant="small">
               You've used all {limits.limit} of your available team members. Upgrade your plan to

apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx

@@ -87,6 +87,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 const monthDateFormatter = new Intl.DateTimeFormat("en-US", {
   month: "long",
   year: "numeric",
+  timeZone: "utc",
 });
 
 export default function Page() {

apps/webapp/app/routes/api.v1.batches.$batchId.ts

@@ -0,0 +1,39 @@
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { $replica } from "~/db.server";
+import { createLoaderApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+
+const ParamsSchema = z.object({
+  batchId: z.string(),
+});
+
+export const loader = createLoaderApiRoute(
+  {
+    params: ParamsSchema,
+    allowJWT: true,
+    corsStrategy: "all",
+    findResource: (params, auth) => {
+      return $replica.batchTaskRun.findFirst({
+        where: {
+          friendlyId: params.batchId,
+          runtimeEnvironmentId: auth.environment.id,
+        },
+      });
+    },
+    authorization: {
+      action: "read",
+      resource: (batch) => ({ batch: batch.friendlyId }),
+      superScopes: ["read:runs", "read:all", "admin"],
+    },
+  },
+  async ({ resource: batch }) => {
+    return json({
+      id: batch.friendlyId,
+      status: batch.status,
+      idempotencyKey: batch.idempotencyKey ?? undefined,
+      createdAt: batch.createdAt,
+      updatedAt: batch.updatedAt,
+      runCount: batch.runCount,
+    });
+  }
+);

apps/webapp/app/routes/api.v1.packets.$.ts

@@ -45,6 +45,7 @@ export const loader = createLoaderApiRoute(
     params: ParamsSchema,
     allowJWT: true,
     corsStrategy: "all",
+    findResource: async () => 1, // This is a dummy function, we don't need to find a resource
   },
   async ({ params, authentication }) => {
     const filename = params["*"];

apps/webapp/app/routes/api.v1.runs.$runParam.reschedule.ts

@@ -61,8 +61,17 @@ export async function action({ request, params }: ActionFunctionArgs) {
       return json({ error: "An unknown error occurred" }, { status: 500 });
     }
 
+    const run = await ApiRetrieveRunPresenter.findRun(
+      updatedRun.friendlyId,
+      authenticationResult.environment
+    );
+
+    if (!run) {
+      return json({ error: "Run not found" }, { status: 404 });
+    }
+
     const presenter = new ApiRetrieveRunPresenter();
-    const result = await presenter.call(updatedRun.friendlyId, authenticationResult.environment);
+    const result = await presenter.call(run, authenticationResult.environment);
 
     if (!result) {
       return json({ error: "Run not found" }, { status: 404 });

apps/webapp/app/routes/api.v1.runs.ts

@@ -12,9 +12,10 @@ export const loader = createLoaderApiRoute(
     corsStrategy: "all",
     authorization: {
       action: "read",
-      resource: (_, searchParams) => ({ tasks: searchParams["filter[taskIdentifier]"] }),
+      resource: (_, __, searchParams) => ({ tasks: searchParams["filter[taskIdentifier]"] }),
       superScopes: ["read:runs", "read:all", "admin"],
     },
+    findResource: async () => 1, // This is a dummy function, we don't need to find a resource
   },
   async ({ searchParams, authentication }) => {
     const presenter = new ApiRunListPresenter();

apps/webapp/app/routes/api.v1.tasks.$taskId.trigger.ts

@@ -3,9 +3,10 @@ import { generateJWT as internal_generateJWT, TriggerTaskRequestBody } from "@tr
 import { TaskRun } from "@trigger.dev/database";
 import { z } from "zod";
 import { env } from "~/env.server";
-import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { AuthenticatedEnvironment, getOneTimeUseToken } from "~/services/apiAuth.server";
 import { logger } from "~/services/logger.server";
 import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { resolveIdempotencyKeyTTL } from "~/utils/idempotencyKeys.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { OutOfEntitlementError, TriggerTaskService } from "~/v3/services/triggerTask.server";
 
@@ -15,6 +16,7 @@ const ParamsSchema = z.object({
 
 export const HeadersSchema = z.object({
   "idempotency-key": z.string().nullish(),
+  "idempotency-key-ttl": z.string().nullish(),
   "trigger-version": z.string().nullish(),
   "x-trigger-span-parent-as-link": z.coerce.number().nullish(),
   "x-trigger-worker": z.string().nullish(),
@@ -31,7 +33,7 @@ const { action, loader } = createActionApiRoute(
     allowJWT: true,
     maxContentLength: env.TASK_PAYLOAD_MAXIMUM_SIZE,
     authorization: {
-      action: "write",
+      action: "trigger",
       resource: (params) => ({ tasks: params.taskId }),
       superScopes: ["write:tasks", "admin"],
     },
@@ -40,6 +42,7 @@ const { action, loader } = createActionApiRoute(
   async ({ body, headers, params, authentication }) => {
     const {
       "idempotency-key": idempotencyKey,
+      "idempotency-key-ttl": idempotencyKeyTTL,
       "trigger-version": triggerVersion,
       "x-trigger-span-parent-as-link": spanParentAsLink,
       traceparent,
@@ -56,9 +59,12 @@ const { action, loader } = createActionApiRoute(
           ? { traceparent, tracestate }
           : undefined;
 
+      const oneTimeUseToken = await getOneTimeUseToken(authentication);
+
       logger.debug("Triggering task", {
         taskId: params.taskId,
         idempotencyKey,
+        idempotencyKeyTTL,
         triggerVersion,
         headers,
         options: body.options,
@@ -66,11 +72,15 @@ const { action, loader } = createActionApiRoute(
         traceContext,
       });
 
+      const idempotencyKeyExpiresAt = resolveIdempotencyKeyTTL(idempotencyKeyTTL);
+
       const run = await service.call(params.taskId, authentication.environment, body, {
         idempotencyKey: idempotencyKey ?? undefined,
+        idempotencyKeyExpiresAt: idempotencyKeyExpiresAt,
         triggerVersion: triggerVersion ?? undefined,
         traceContext,
         spanParentAsLink: spanParentAsLink === 1,
+        oneTimeUseToken,
       });
 
       if (!run) {

apps/webapp/app/routes/api.v1.tasks.batch.ts

@@ -0,0 +1,167 @@
+import { json } from "@remix-run/server-runtime";
+import {
+  BatchTriggerTaskResponse,
+  BatchTriggerTaskV2RequestBody,
+  BatchTriggerTaskV2Response,
+  generateJWT,
+} from "@trigger.dev/core/v3";
+import { env } from "~/env.server";
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { HeadersSchema } from "./api.v1.tasks.$taskId.trigger";
+import { resolveIdempotencyKeyTTL } from "~/utils/idempotencyKeys.server";
+import {
+  BatchProcessingStrategy,
+  BatchTriggerV2Service,
+} from "~/v3/services/batchTriggerV2.server";
+import { ServiceValidationError } from "~/v3/services/baseService.server";
+import { OutOfEntitlementError } from "~/v3/services/triggerTask.server";
+import { AuthenticatedEnvironment, getOneTimeUseToken } from "~/services/apiAuth.server";
+import { logger } from "~/services/logger.server";
+import { z } from "zod";
+
+const { action, loader } = createActionApiRoute(
+  {
+    headers: HeadersSchema.extend({
+      "batch-processing-strategy": BatchProcessingStrategy.nullish(),
+    }),
+    body: BatchTriggerTaskV2RequestBody,
+    allowJWT: true,
+    maxContentLength: env.BATCH_TASK_PAYLOAD_MAXIMUM_SIZE,
+    authorization: {
+      action: "batchTrigger",
+      resource: (_, __, ___, body) => ({
+        tasks: Array.from(new Set(body.items.map((i) => i.task))),
+      }),
+      superScopes: ["write:tasks", "admin"],
+    },
+    corsStrategy: "all",
+  },
+  async ({ body, headers, params, authentication }) => {
+    if (!body.items.length) {
+      return json({ error: "Batch cannot be triggered with no items" }, { status: 400 });
+    }
+
+    // Check the there are fewer than MAX_BATCH_V2_TRIGGER_ITEMS items
+    if (body.items.length > env.MAX_BATCH_V2_TRIGGER_ITEMS) {
+      return json(
+        {
+          error: `Batch size of ${body.items.length} is too large. Maximum allowed batch size is ${env.MAX_BATCH_V2_TRIGGER_ITEMS}.`,
+        },
+        { status: 400 }
+      );
+    }
+
+    const {
+      "idempotency-key": idempotencyKey,
+      "idempotency-key-ttl": idempotencyKeyTTL,
+      "trigger-version": triggerVersion,
+      "x-trigger-span-parent-as-link": spanParentAsLink,
+      "x-trigger-worker": isFromWorker,
+      "x-trigger-client": triggerClient,
+      "batch-processing-strategy": batchProcessingStrategy,
+      traceparent,
+      tracestate,
+    } = headers;
+
+    const oneTimeUseToken = await getOneTimeUseToken(authentication);
+
+    logger.debug("Batch trigger request", {
+      idempotencyKey,
+      idempotencyKeyTTL,
+      triggerVersion,
+      spanParentAsLink,
+      isFromWorker,
+      triggerClient,
+      traceparent,
+      tracestate,
+      batchProcessingStrategy,
+    });
+
+    const traceContext =
+      traceparent && isFromWorker // If the request is from a worker, we should pass the trace context
+        ? { traceparent, tracestate }
+        : undefined;
+
+    // By default, the idempotency key expires in 30 days
+    const idempotencyKeyExpiresAt =
+      resolveIdempotencyKeyTTL(idempotencyKeyTTL) ??
+      new Date(Date.now() + 24 * 60 * 60 * 1000 * 30);
+
+    const service = new BatchTriggerV2Service(batchProcessingStrategy ?? undefined);
+
+    try {
+      const batch = await service.call(authentication.environment, body, {
+        idempotencyKey: idempotencyKey ?? undefined,
+        idempotencyKeyExpiresAt,
+        triggerVersion: triggerVersion ?? undefined,
+        traceContext,
+        spanParentAsLink: spanParentAsLink === 1,
+        oneTimeUseToken,
+      });
+
+      const $responseHeaders = await responseHeaders(
+        batch,
+        authentication.environment,
+        triggerClient
+      );
+
+      return json(batch, { status: 202, headers: $responseHeaders });
+    } catch (error) {
+      logger.error("Batch trigger error", {
+        error: {
+          message: (error as Error).message,
+          stack: (error as Error).stack,
+        },
+      });
+
+      if (error instanceof ServiceValidationError) {
+        return json({ error: error.message }, { status: 422 });
+      } else if (error instanceof OutOfEntitlementError) {
+        return json({ error: error.message }, { status: 422 });
+      } else if (error instanceof Error) {
+        return json(
+          { error: error.message },
+          { status: 500, headers: { "x-should-retry": "false" } }
+        );
+      }
+
+      return json({ error: "Something went wrong" }, { status: 500 });
+    }
+  }
+);
+
+async function responseHeaders(
+  batch: BatchTriggerTaskV2Response,
+  environment: AuthenticatedEnvironment,
+  triggerClient?: string | null
+): Promise<Record<string, string>> {
+  const claimsHeader = JSON.stringify({
+    sub: environment.id,
+    pub: true,
+  });
+
+  if (triggerClient === "browser") {
+    const claims = {
+      sub: environment.id,
+      pub: true,
+      scopes: [`read:batch:${batch.id}`],
+    };
+
+    const jwt = await generateJWT({
+      secretKey: environment.apiKey,
+      payload: claims,
+      expirationTime: "1h",
+    });
+
+    return {
+      "x-trigger-jwt-claims": claimsHeader,
+      "x-trigger-jwt": jwt,
+    };
+  }
+
+  return {
+    "x-trigger-jwt-claims": claimsHeader,
+  };
+}
+
+export { action, loader };

apps/webapp/app/routes/api.v3.runs.$runId.ts

@@ -12,18 +12,30 @@ export const loader = createLoaderApiRoute(
     params: ParamsSchema,
     allowJWT: true,
     corsStrategy: "all",
+    findResource: (params, auth) => {
+      return ApiRetrieveRunPresenter.findRun(params.runId, auth.environment);
+    },
+    shouldRetryNotFound: true,
     authorization: {
       action: "read",
-      resource: (params) => ({ runs: params.runId }),
+      resource: (run) => ({
+        runs: run.friendlyId,
+        tags: run.runTags,
+        batch: run.batch?.friendlyId,
+        tasks: run.taskIdentifier,
+      }),
       superScopes: ["read:runs", "read:all", "admin"],
     },
   },
-  async ({ params, authentication }) => {
+  async ({ authentication, resource }) => {
     const presenter = new ApiRetrieveRunPresenter();
-    const result = await presenter.call(params.runId, authentication.environment);
+    const result = await presenter.call(resource, authentication.environment);
 
     if (!result) {
-      return json({ error: "Run not found" }, { status: 404 });
+      return json(
+        { error: "Run not found" },
+        { status: 404, headers: { "x-should-retry": "true" } }
+      );
     }
 
     return json(result);

apps/webapp/app/routes/realtime.v1.batches.$batchId.ts

@@ -1,4 +1,3 @@
-import { json } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { $replica } from "~/db.server";
 import { realtimeClient } from "~/services/realtimeClientGlobal.server";
@@ -13,24 +12,21 @@ export const loader = createLoaderApiRoute(
     params: ParamsSchema,
     allowJWT: true,
     corsStrategy: "all",
+    findResource: (params, auth) => {
+      return $replica.batchTaskRun.findFirst({
+        where: {
+          friendlyId: params.batchId,
+          runtimeEnvironmentId: auth.environment.id,
+        },
+      });
+    },
     authorization: {
       action: "read",
-      resource: (params) => ({ batch: params.batchId }),
+      resource: (batch) => ({ batch: batch.friendlyId }),
       superScopes: ["read:runs", "read:all", "admin"],
     },
   },
-  async ({ params, authentication, request }) => {
-    const batchRun = await $replica.batchTaskRun.findFirst({
-      where: {
-        friendlyId: params.batchId,
-        runtimeEnvironmentId: authentication.environment.id,
-      },
-    });
-
-    if (!batchRun) {
-      return json({ error: "Batch not found" }, { status: 404 });
-    }
-
+  async ({ authentication, request, resource: batchRun }) => {
     return realtimeClient.streamBatch(
       request.url,
       authentication.environment,

apps/webapp/app/routes/realtime.v1.runs.$runId.ts

@@ -13,24 +13,33 @@ export const loader = createLoaderApiRoute(
     params: ParamsSchema,
     allowJWT: true,
     corsStrategy: "all",
+    findResource: async (params, authentication) => {
+      return $replica.taskRun.findFirst({
+        where: {
+          friendlyId: params.runId,
+          runtimeEnvironmentId: authentication.environment.id,
+        },
+        include: {
+          batch: {
+            select: {
+              friendlyId: true,
+            },
+          },
+        },
+      });
+    },
     authorization: {
       action: "read",
-      resource: (params) => ({ runs: params.runId }),
+      resource: (run) => ({
+        runs: run.friendlyId,
+        tags: run.runTags,
+        batch: run.batch?.friendlyId,
+        tasks: run.taskIdentifier,
+      }),
       superScopes: ["read:runs", "read:all", "admin"],
     },
   },
-  async ({ params, authentication, request }) => {
-    const run = await $replica.taskRun.findFirst({
-      where: {
-        friendlyId: params.runId,
-        runtimeEnvironmentId: authentication.environment.id,
-      },
-    });
-
-    if (!run) {
-      return json({ error: "Run not found" }, { status: 404 });
-    }
-
+  async ({ authentication, request, resource: run }) => {
     return realtimeClient.streamRun(
       request.url,
       authentication.environment,

apps/webapp/app/routes/realtime.v1.runs.ts

@@ -16,9 +16,10 @@ export const loader = createLoaderApiRoute(
     searchParams: SearchParamsSchema,
     allowJWT: true,
     corsStrategy: "all",
+    findResource: async () => 1, // This is a dummy value, it's not used
     authorization: {
       action: "read",
-      resource: (_, searchParams) => searchParams,
+      resource: (_, __, searchParams) => searchParams,
       superScopes: ["read:runs", "read:all", "admin"],
     },
   },

apps/webapp/app/routes/realtime.v1.streams.$runId.$streamId.ts

@@ -1,7 +1,8 @@
 import { ActionFunctionArgs } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { $replica } from "~/db.server";
-import { realtimeStreams } from "~/services/realtimeStreamsGlobal.server";
+import { relayRealtimeStreams } from "~/services/realtime/relayRealtimeStreams.server";
+import { v1RealtimeStreams } from "~/services/realtime/v1StreamsGlobal.server";
 import { createLoaderApiRoute } from "~/services/routeBuilders/apiBuilder.server";
 
 const ParamsSchema = z.object({
@@ -16,7 +17,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return new Response("No body provided", { status: 400 });
   }
 
-  return realtimeStreams.ingestData(request.body, $params.runId, $params.streamId);
+  return relayRealtimeStreams.ingestData(request.body, $params.runId, $params.streamId);
 }
 
 export const loader = createLoaderApiRoute(
@@ -24,24 +25,39 @@ export const loader = createLoaderApiRoute(
     params: ParamsSchema,
     allowJWT: true,
     corsStrategy: "all",
+    findResource: async (params, auth) => {
+      return $replica.taskRun.findFirst({
+        where: {
+          friendlyId: params.runId,
+          runtimeEnvironmentId: auth.environment.id,
+        },
+        include: {
+          batch: {
+            select: {
+              friendlyId: true,
+            },
+          },
+        },
+      });
+    },
     authorization: {
       action: "read",
-      resource: (params) => ({ runs: params.runId }),
+      resource: (run) => ({
+        runs: run.friendlyId,
+        tags: run.runTags,
+        batch: run.batch?.friendlyId,
+        tasks: run.taskIdentifier,
+      }),
       superScopes: ["read:runs", "read:all", "admin"],
     },
   },
-  async ({ params, authentication, request }) => {
-    const run = await $replica.taskRun.findFirst({
-      where: {
-        friendlyId: params.runId,
-        runtimeEnvironmentId: authentication.environment.id,
-      },
-    });
-
-    if (!run) {
-      return new Response("Run not found", { status: 404 });
-    }
-
-    return realtimeStreams.streamResponse(run.friendlyId, params.streamId, request.signal);
+  async ({ params, request, resource: run, authentication }) => {
+    return relayRealtimeStreams.streamResponse(
+      request,
+      run.friendlyId,
+      params.streamId,
+      authentication.environment,
+      request.signal
+    );
   }
 );

apps/webapp/app/routes/realtime.v2.streams.$runId.$streamId.ts

@@ -0,0 +1,87 @@
+import { z } from "zod";
+import { $replica } from "~/db.server";
+import {
+  createActionApiRoute,
+  createLoaderApiRoute,
+} from "~/services/routeBuilders/apiBuilder.server";
+import { v2RealtimeStreams } from "~/services/realtime/v2StreamsGlobal.server";
+
+const ParamsSchema = z.object({
+  runId: z.string(),
+  streamId: z.string(),
+});
+
+const { action } = createActionApiRoute(
+  {
+    params: ParamsSchema,
+  },
+  async ({ request, params, authentication }) => {
+    if (!request.body) {
+      return new Response("No body provided", { status: 400 });
+    }
+
+    const run = await $replica.taskRun.findFirst({
+      where: {
+        friendlyId: params.runId,
+        runtimeEnvironmentId: authentication.environment.id,
+      },
+      include: {
+        batch: {
+          select: {
+            friendlyId: true,
+          },
+        },
+      },
+    });
+
+    if (!run) {
+      return new Response("Run not found", { status: 404 });
+    }
+
+    return v2RealtimeStreams.ingestData(request.body, run.id, params.streamId);
+  }
+);
+
+export { action };
+
+export const loader = createLoaderApiRoute(
+  {
+    params: ParamsSchema,
+    allowJWT: true,
+    corsStrategy: "all",
+    findResource: async (params, auth) => {
+      return $replica.taskRun.findFirst({
+        where: {
+          friendlyId: params.runId,
+          runtimeEnvironmentId: auth.environment.id,
+        },
+        include: {
+          batch: {
+            select: {
+              friendlyId: true,
+            },
+          },
+        },
+      });
+    },
+    authorization: {
+      action: "read",
+      resource: (run) => ({
+        runs: run.friendlyId,
+        tags: run.runTags,
+        batch: run.batch?.friendlyId,
+        tasks: run.taskIdentifier,
+      }),
+      superScopes: ["read:runs", "read:all", "admin"],
+    },
+  },
+  async ({ params, request, resource: run, authentication }) => {
+    return v2RealtimeStreams.streamResponse(
+      request,
+      run.id,
+      params.streamId,
+      authentication.environment,
+      request.signal
+    );
+  }
+);

apps/webapp/app/routes/resources.batches.$batchId.check-completion.ts

@@ -0,0 +1,70 @@
+import { parse } from "@conform-to/zod";
+import { ActionFunction, json } from "@remix-run/node";
+import { assertExhaustive } from "@trigger.dev/core";
+import { z } from "zod";
+import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import { logger } from "~/services/logger.server";
+import { ResumeBatchRunService } from "~/v3/services/resumeBatchRun.server";
+
+export const checkCompletionSchema = z.object({
+  redirectUrl: z.string(),
+});
+
+const ParamSchema = z.object({
+  batchId: z.string(),
+});
+
+export const action: ActionFunction = async ({ request, params }) => {
+  const { batchId } = ParamSchema.parse(params);
+
+  const formData = await request.formData();
+  const submission = parse(formData, { schema: checkCompletionSchema });
+
+  if (!submission.value) {
+    return json(submission);
+  }
+
+  try {
+    const resumeBatchRunService = new ResumeBatchRunService();
+    const resumeResult = await resumeBatchRunService.call(batchId);
+
+    let message: string | undefined;
+
+    switch (resumeResult) {
+      case "ERROR": {
+        throw "Unknown error during batch completion check";
+      }
+      case "ALREADY_COMPLETED": {
+        message = "Batch already completed.";
+        break;
+      }
+      case "COMPLETED": {
+        message = "Batch completed and parent tasks resumed.";
+        break;
+      }
+      case "PENDING": {
+        message = "Child runs still in progress. Please try again later.";
+        break;
+      }
+      default: {
+        assertExhaustive(resumeResult);
+      }
+    }
+
+    return redirectWithSuccessMessage(submission.value.redirectUrl, request, message);
+  } catch (error) {
+    if (error instanceof Error) {
+      logger.error("Failed to check batch completion", {
+        error: {
+          name: error.name,
+          message: error.message,
+          stack: error.stack,
+        },
+      });
+      return redirectWithErrorMessage(submission.value.redirectUrl, request, error.message);
+    } else {
+      logger.error("Failed to check batch completion", { error });
+      return redirectWithErrorMessage(submission.value.redirectUrl, request, "Unknown error");
+    }
+  }
+};

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

@@ -56,6 +56,8 @@ import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { formatCurrencyAccurate } from "~/utils/numberFormatter";
 import {
+  v3BatchPath,
+  v3BatchRunsPath,
   v3RunDownloadLogsPath,
   v3RunPath,
   v3RunSpanPath,
@@ -199,7 +201,7 @@ function SpanBody({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}
@@ -440,7 +442,7 @@ function RunBody({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}
@@ -583,6 +585,21 @@ function RunBody({
                     </>
                   )
                 ) : null}
+                {run.batch && (
+                  <Property.Item>
+                    <Property.Label>Batch</Property.Label>
+                    <Property.Value>
+                      <SimpleTooltip
+                        button={
+                          <TextLink to={v3BatchPath(organization, project, run.batch)}>
+                            {run.batch.friendlyId}
+                          </TextLink>
+                        }
+                        content={`Jump to ${run.batch.friendlyId}`}
+                      />
+                    </Property.Value>
+                  </Property.Item>
+                )}
                 <Property.Item>
                   <Property.Label>Version</Property.Label>
                   <Property.Value>

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -5,7 +5,7 @@ import {
   ShieldCheckIcon,
   XMarkIcon,
 } from "@heroicons/react/20/solid";
-import { ArrowDownCircleIcon } from "@heroicons/react/24/outline";
+import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Form, useLocation, useNavigation } from "@remix-run/react";
 import { ActionFunctionArgs } from "@remix-run/server-runtime";
 import { uiComponent } from "@team-plain/typescript-sdk";
@@ -190,6 +190,11 @@ const pricingDefinitions = {
     content:
       "A single email address, Slack channel, or webhook URL that you want to send alerts to.",
   },
+  realtime: {
+    title: "Realtime connections",
+    content:
+      "Realtime allows you to send the live status and data from your runs to your frontend. This is the number of simultaneous Realtime connections that can be made.",
+  },
 };
 
 type PricingPlansProps = {
@@ -494,6 +499,7 @@ export function TierFree({
             <LogRetention limits={plan.limits} />
             <SupportLevel limits={plan.limits} />
             <Alerts limits={plan.limits} />
+            <RealtimeConnecurrency limits={plan.limits} />
           </ul>
         </>
       )}
@@ -608,6 +614,7 @@ export function TierHobby({
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
+        <RealtimeConnecurrency limits={plan.limits} />
       </ul>
     </TierContainer>
   );
@@ -626,6 +633,11 @@ export function TierPro({
   const navigation = useNavigation();
   const formAction = `/resources/orgs/${organizationSlug}/select-plan`;
   const isLoading = navigation.formAction === formAction;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  useEffect(() => {
+    setIsDialogOpen(false);
+  }, [subscription]);
 
   return (
     <TierContainer>
@@ -638,27 +650,67 @@ export function TierPro({
           <input type="hidden" name="type" value="paid" />
           <input type="hidden" name="planCode" value={plan.code} />
           <input type="hidden" name="callerPath" value={location.pathname} />
-          <Button
-            variant="tertiary/large"
-            fullWidth
-            form="subscribe-pro"
-            className="text-md font-medium"
-            disabled={
-              isLoading ||
-              (subscription?.plan?.code === plan.code && subscription.canceledAt === undefined)
-            }
-            LeadingIcon={
-              isLoading && navigation.formData?.get("planCode") === plan.code ? Spinner : undefined
-            }
-          >
-            {subscription?.plan === undefined
-              ? "Select plan"
-              : subscription.plan.type === "free" || subscription.canceledAt !== undefined
-              ? `Upgrade to ${plan.title}`
-              : subscription.plan.code === plan.code
-              ? "Current plan"
-              : `Upgrade to ${plan.title}`}
-          </Button>
+          {subscription?.plan !== undefined &&
+          subscription?.plan?.type === "paid" &&
+          subscription?.plan?.code !== plan.code &&
+          subscription.canceledAt === undefined ? (
+            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen} key="upgrade">
+              <DialogTrigger asChild>
+                <Button variant="tertiary/large" fullWidth className="text-md font-medium">
+                  {`Upgrade to ${plan.title}`}
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-md">
+                <DialogHeader>Upgrade plan</DialogHeader>
+                <div className="mb-2 mt-4 flex items-start gap-3">
+                  <span>
+                    <ArrowUpCircleIcon className="size-12 text-primary" />
+                  </span>
+                  <Paragraph variant="base/bright" className="text-text-bright">
+                    Upgrade to get instant access to all the Pro features. You will be charged the
+                    new plan price for the remainder of this month on a pro rata basis.
+                  </Paragraph>
+                </div>
+                <DialogFooter>
+                  <Button variant="tertiary/medium" onClick={() => setIsDialogOpen(false)}>
+                    Dismiss
+                  </Button>
+                  <Button
+                    variant="primary/medium"
+                    disabled={isLoading}
+                    LeadingIcon={isLoading ? () => <Spinner color="dark" /> : undefined}
+                    form="subscribe-pro"
+                  >
+                    {`Upgrade to ${plan.title}`}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          ) : (
+            <Button
+              variant="tertiary/large"
+              fullWidth
+              form="subscribe-pro"
+              className="text-md font-medium"
+              disabled={
+                isLoading ||
+                (subscription?.plan?.code === plan.code && subscription.canceledAt === undefined)
+              }
+              LeadingIcon={
+                isLoading && navigation.formData?.get("planCode") === plan.code
+                  ? Spinner
+                  : undefined
+              }
+            >
+              {subscription?.plan === undefined
+                ? "Select plan"
+                : subscription.plan.type === "free" || subscription.canceledAt !== undefined
+                ? `Upgrade to ${plan.title}`
+                : subscription.plan.code === plan.code
+                ? "Current plan"
+                : `Upgrade to ${plan.title}`}
+            </Button>
+          )}
         </div>
       </Form>
       <ul className="flex flex-col gap-2.5">
@@ -678,6 +730,7 @@ export function TierPro({
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
+        <RealtimeConnecurrency limits={plan.limits} />
       </ul>
     </TierContainer>
   );
@@ -950,3 +1003,18 @@ function Alerts({ limits }: { limits: Limits }) {
     </FeatureItem>
   );
 }
+
+function RealtimeConnecurrency({ limits }: { limits: Limits }) {
+  return (
+    <FeatureItem checked>
+      {limits.realtimeConcurrentConnections.number}
+      {limits.realtimeConcurrentConnections.canExceed ? "+" : ""}{" "}
+      <DefinitionTip
+        title={pricingDefinitions.realtime.title}
+        content={pricingDefinitions.realtime.content}
+      >
+        concurrent Realtime connections
+      </DefinitionTip>
+    </FeatureItem>
+  );
+}

apps/webapp/app/routes/storybook.spinner/route.tsx

@@ -0,0 +1,28 @@
+import { Spinner } from "~/components/primitives/Spinner";
+
+export default function Story() {
+  return (
+    <div className="flex flex-col items-start gap-y-3 p-4">
+      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-750 px-3 py-2 text-text-bright">
+        Blue: <Spinner color="blue" />
+      </div>
+      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-750 px-3 py-2 text-text-bright">
+        White: <Spinner color="white" />
+      </div>
+      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-600 px-3 py-2 text-text-bright">
+        Muted: <Spinner color="muted" />
+      </div>
+      <div className="flex items-center gap-x-2">
+        <div className="flex items-center gap-x-4 rounded-md bg-charcoal-600 px-3 py-2 text-text-bright">
+          Dark: <Spinner color="dark" />
+        </div>
+        <div className="flex items-center gap-x-4 rounded-md bg-primary px-2 py-2 text-text-bright">
+          <Spinner color="dark" />
+        </div>
+      </div>
+      <div className="flex items-center gap-x-4 rounded-md bg-charcoal-600 px-3 py-2 text-text-bright">
+        Custom: <Spinner color={{ background: "#EA189E", foreground: "#6532F5" }} />
+      </div>
+    </div>
+  );
+}

apps/webapp/app/routes/storybook.toast/route.tsx

@@ -6,15 +6,20 @@ export default function Story() {
   return (
     <div className="flex flex-col items-start gap-y-4 p-4">
       <ToastUI variant="success" message="Success UI" t="-" />
-      <ToastUI variant="error" message="Error UI" t="-" />
       <ToastUI
         variant="success"
+        message="This is a long success message that wraps over multiple lines so we can test the UI."
+        t="-"
+      />
+      <ToastUI variant="error" message="Error UI" t="-" />
+      <ToastUI
+        variant="error"
         message="This is a long error message that wraps over multiple lines so we can test the UI."
         t="-"
       />
       <br />
       <Button
-        variant="primary/large"
+        variant="primary/medium"
         onClick={() =>
           toast.custom((t) => <ToastUI variant="success" message="Success" t={t as string} />, {
             duration: Infinity, // Prevents auto-dismissal for demo purposes
@@ -24,7 +29,7 @@ export default function Story() {
         Trigger success toast
       </Button>
       <Button
-        variant="danger/large"
+        variant="danger/medium"
         onClick={() =>
           toast.custom((t) => <ToastUI variant="error" message="Error" t={t as string} />, {
             duration: Infinity,

apps/webapp/app/routes/storybook/route.tsx

@@ -84,6 +84,10 @@ const stories: Story[] = [
     name: "Shortcuts",
     slug: "shortcuts",
   },
+  {
+    name: "Spinners",
+    slug: "spinner",
+  },
   {
     name: "Switch",
     slug: "switch",

apps/webapp/app/services/apiAuth.server.ts

@@ -20,6 +20,8 @@ import { isPublicJWT, validatePublicJwtKey } from "./realtime/jwtAuth.server";
 
 const ClaimsSchema = z.object({
   scopes: z.array(z.string()).optional(),
+  // One-time use token
+  otu: z.boolean().optional(),
 });
 
 type Optional<T, K extends keyof T> = Prettify<Omit<T, K> & Partial<Pick<T, K>>>;
@@ -39,6 +41,7 @@ export type ApiAuthenticationResultSuccess = {
   type: "PUBLIC" | "PRIVATE" | "PUBLIC_JWT";
   environment: AuthenticatedEnvironment;
   scopes?: string[];
+  oneTimeUse?: boolean;
 };
 
 export type ApiAuthenticationResultFailure = {
@@ -146,6 +149,7 @@ export async function authenticateApiKey(
         ...result,
         environment: validationResults.environment,
         scopes: parsedClaims.success ? parsedClaims.data.scopes : [],
+        oneTimeUse: parsedClaims.success ? parsedClaims.data.otu : false,
       };
     }
   }
@@ -227,6 +231,7 @@ export async function authenticateApiKeyWithFailure(
         ...result,
         environment: validationResults.environment,
         scopes: parsedClaims.success ? parsedClaims.data.scopes : [],
+        oneTimeUse: parsedClaims.success ? parsedClaims.data.otu : false,
       };
     }
   }
@@ -531,3 +536,20 @@ function calculateJWTExpiration() {
 
   return (Date.now() + DEFAULT_JWT_EXPIRATION_IN_MS) / 1000;
 }
+
+export async function getOneTimeUseToken(
+  auth: ApiAuthenticationResultSuccess
+): Promise<string | undefined> {
+  if (auth.type !== "PUBLIC_JWT") {
+    return;
+  }
+
+  if (!auth.oneTimeUse) {
+    return;
+  }
+
+  // Hash the API key to make it unique
+  const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(auth.apiKey));
+
+  return Buffer.from(hash).toString("hex");
+}

apps/webapp/app/services/authorization.server.ts

@@ -1,4 +1,4 @@
-export type AuthorizationAction = "read" | "write"; // Add more actions as needed
+export type AuthorizationAction = "read" | "write" | string; // Add more actions as needed
 
 const ResourceTypes = ["tasks", "tags", "runs", "batch"] as const;
 
@@ -88,34 +88,26 @@ export function checkAuthorization(
   for (const [resourceType, resourceValue] of Object.entries(filteredResource)) {
     const resourceValues = Array.isArray(resourceValue) ? resourceValue : [resourceValue];
 
-    let resourceAuthorized = false;
     for (const value of resourceValues) {
       // Check for specific resource permission
       const specificPermission = `${action}:${resourceType}:${value}`;
       // Check for general resource type permission
       const generalPermission = `${action}:${resourceType}`;
 
+      // If any permission matches, return authorized
       if (entity.scopes.includes(specificPermission) || entity.scopes.includes(generalPermission)) {
-        resourceAuthorized = true;
-        break;
+        return { authorized: true };
       }
     }
-
-    // If any resource is not authorized, return false
-    if (!resourceAuthorized) {
-      return {
-        authorized: false,
-        reason: `Public Access Token is missing required permissions. Permissions required for ${resourceValues
-          .map((v) => `'${action}:${resourceType}:${v}'`)
-          .join(", ")} but token has the following permissions: ${entity.scopes
-          .map((s) => `'${s}'`)
-          .join(
-            ", "
-          )}. See https://trigger.dev/docs/frontend/overview#authentication for more information.`,
-      };
-    }
   }
 
-  // All resources are authorized
-  return { authorized: true };
+  // No matching permissions found
+  return {
+    authorized: false,
+    reason: `Public Access Token is missing required permissions. Token has the following permissions: ${entity.scopes
+      .map((s) => `'${s}'`)
+      .join(
+        ", "
+      )}. See https://trigger.dev/docs/frontend/overview#authentication for more information.`,
+  };
 }

apps/webapp/app/services/email.server.ts

@@ -1,5 +1,5 @@
 import type { DeliverEmail, SendPlainTextOptions } from "emails";
-import { EmailClient } from "emails";
+import { EmailClient, MailTransportOptions } from "emails";
 import type { SendEmailOptions } from "remix-auth-email-link";
 import { redirect } from "remix-typedjson";
 import { env } from "~/env.server";
@@ -13,7 +13,7 @@ const client = singleton(
   "email-client",
   () =>
     new EmailClient({
-      apikey: env.RESEND_API_KEY,
+      transport: buildTransportOptions(),
       imagesBaseUrl: env.APP_ORIGIN,
       from: env.FROM_EMAIL ?? "team@email.trigger.dev",
       replyTo: env.REPLY_TO_EMAIL ?? "help@email.trigger.dev",
@@ -24,13 +24,45 @@ const alertsClient = singleton(
   "alerts-email-client",
   () =>
     new EmailClient({
-      apikey: env.ALERT_RESEND_API_KEY,
+      transport: buildTransportOptions(true),
       imagesBaseUrl: env.APP_ORIGIN,
       from: env.ALERT_FROM_EMAIL ?? "noreply@alerts.trigger.dev",
       replyTo: env.REPLY_TO_EMAIL ?? "help@email.trigger.dev",
     })
 );
 
+function buildTransportOptions(alerts?: boolean): MailTransportOptions {
+  const transportType = alerts ? env.ALERT_EMAIL_TRANSPORT : env.EMAIL_TRANSPORT
+  logger.debug(`Constructing email transport '${transportType}' for usage '${alerts?'alerts':'general'}'`)
+
+  switch (transportType) {
+    case "aws-ses":
+      return { type: "aws-ses" };
+    case "resend":
+      return {
+        type: "resend",
+        config: {
+          apiKey: alerts ? env.ALERT_RESEND_API_KEY : env.RESEND_API_KEY,
+        }
+      }
+    case "smtp":
+      return {
+        type: "smtp",
+        config: {
+          host: alerts ? env.ALERT_SMTP_HOST : env.SMTP_HOST,
+          port: alerts ? env.ALERT_SMTP_PORT : env.SMTP_PORT,
+          secure: alerts ? env.ALERT_SMTP_SECURE : env.SMTP_SECURE,
+          auth: {
+            user: alerts ? env.ALERT_SMTP_USER : env.SMTP_USER,
+            pass: alerts ? env.ALERT_SMTP_PASSWORD : env.SMTP_PASSWORD
+          }
+        }
+      };
+    default:
+      return { type: undefined };
+  }
+}
+
 export async function sendMagicLinkEmail(options: SendEmailOptions<AuthUser>): Promise<void> {
   // Auto redirect when in development mode
   if (env.NODE_ENV === "development") {

apps/webapp/app/services/preferences/uiPreferences.server.ts

@@ -0,0 +1,44 @@
+import { createCookieSessionStorage } from "@remix-run/node";
+import { env } from "~/env.server";
+
+export const uiPreferencesStorage = createCookieSessionStorage({
+  cookie: {
+    name: "__ui_prefs",
+    sameSite: "lax",
+    path: "/",
+    httpOnly: true,
+    secrets: [env.SESSION_SECRET],
+    secure: env.NODE_ENV === "production",
+    maxAge: 60 * 60 * 24 * 365, // 1 year
+  },
+});
+
+export function getUiPreferencesSession(request: Request) {
+  return uiPreferencesStorage.getSession(request.headers.get("Cookie"));
+}
+
+export async function getUsefulLinksPreference(request: Request): Promise<boolean | undefined> {
+  const session = await getUiPreferencesSession(request);
+  return session.get("showUsefulLinks");
+}
+
+export async function setUsefulLinksPreference(show: boolean, request: Request) {
+  const session = await getUiPreferencesSession(request);
+  session.set("showUsefulLinks", show);
+  return session;
+}
+
+export async function getRootOnlyFilterPreference(request: Request): Promise<boolean> {
+  const session = await getUiPreferencesSession(request);
+  const rootOnly = session.get("rootOnly");
+  if (rootOnly === undefined) {
+    return false;
+  }
+  return rootOnly;
+}
+
+export async function setRootOnlyFilterPreference(rootOnly: boolean, request: Request) {
+  const session = await getUiPreferencesSession(request);
+  session.set("rootOnly", rootOnly);
+  return session;
+}

apps/webapp/app/services/realtime/databaseRealtimeStreams.server.ts

@@ -0,0 +1,74 @@
+import { PrismaClient } from "@trigger.dev/database";
+import { AuthenticatedEnvironment } from "../apiAuth.server";
+import { logger } from "../logger.server";
+import { RealtimeClient } from "../realtimeClient.server";
+import { StreamIngestor, StreamResponder } from "./types";
+
+export type DatabaseRealtimeStreamsOptions = {
+  prisma: PrismaClient;
+  realtimeClient: RealtimeClient;
+};
+
+// Class implementing both interfaces
+export class DatabaseRealtimeStreams implements StreamIngestor, StreamResponder {
+  constructor(private options: DatabaseRealtimeStreamsOptions) {}
+
+  async streamResponse(
+    request: Request,
+    runId: string,
+    streamId: string,
+    environment: AuthenticatedEnvironment,
+    signal: AbortSignal
+  ): Promise<Response> {
+    return this.options.realtimeClient.streamChunks(
+      request.url,
+      environment,
+      runId,
+      streamId,
+      signal,
+      request.headers.get("x-trigger-electric-version") ?? undefined
+    );
+  }
+
+  async ingestData(
+    stream: ReadableStream<Uint8Array>,
+    runId: string,
+    streamId: string
+  ): Promise<Response> {
+    try {
+      const textStream = stream.pipeThrough(new TextDecoderStream());
+
+      const reader = textStream.getReader();
+      let sequence = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done || !value) {
+          break;
+        }
+
+        logger.debug("[DatabaseRealtimeStreams][ingestData] Reading data", {
+          streamId,
+          runId,
+          value,
+        });
+
+        await this.options.prisma.realtimeStreamChunk.create({
+          data: {
+            runId,
+            key: streamId,
+            sequence: sequence++,
+            value,
+          },
+        });
+      }
+
+      return new Response(null, { status: 200 });
+    } catch (error) {
+      logger.error("[DatabaseRealtimeStreams][ingestData] Error in ingestData:", { error });
+
+      return new Response(null, { status: 500 });
+    }
+  }
+}

apps/webapp/app/services/realtime/redisRealtimeStreams.server.ts

@@ -1,5 +1,8 @@
-import Redis, { RedisKey, RedisOptions, RedisValue } from "ioredis";
-import { logger } from "./logger.server";
+import Redis, { RedisOptions } from "ioredis";
+import { AuthenticatedEnvironment } from "../apiAuth.server";
+import { logger } from "../logger.server";
+import { StreamIngestor, StreamResponder } from "./types";
+import { LineTransformStream } from "./utils.server";
 
 export type RealtimeStreamsOptions = {
   redis: RedisOptions | undefined;
@@ -7,10 +10,17 @@ export type RealtimeStreamsOptions = {
 
 const END_SENTINEL = "<<CLOSE_STREAM>>";
 
-export class RealtimeStreams {
+// Class implementing both interfaces
+export class RedisRealtimeStreams implements StreamIngestor, StreamResponder {
   constructor(private options: RealtimeStreamsOptions) {}
 
-  async streamResponse(runId: string, streamId: string, signal: AbortSignal): Promise<Response> {
+  async streamResponse(
+    request: Request,
+    runId: string,
+    streamId: string,
+    environment: AuthenticatedEnvironment,
+    signal: AbortSignal
+  ): Promise<Response> {
     const redis = new Redis(this.options.redis ?? {});
     const streamKey = `stream:${runId}:${streamId}`;
     let isCleanedUp = false;
@@ -47,7 +57,7 @@ export class RealtimeStreams {
                       controller.close();
                       return;
                     }
-                    controller.enqueue(`data: ${fields[1]}\n\n`);
+                    controller.enqueue(fields[1]);
 
                     if (signal.aborted) {
                       controller.close();
@@ -79,7 +89,18 @@ export class RealtimeStreams {
       cancel: async () => {
         await cleanup();
       },
-    });
+    })
+      .pipeThrough(new LineTransformStream())
+      .pipeThrough(
+        new TransformStream({
+          transform(chunk, controller) {
+            for (const line of chunk) {
+              controller.enqueue(`data: ${line}\n\n`);
+            }
+          },
+        })
+      )
+      .pipeThrough(new TextEncoderStream());
 
     async function cleanup() {
       if (isCleanedUp) return;
@@ -89,7 +110,7 @@ export class RealtimeStreams {
 
     signal.addEventListener("abort", cleanup);
 
-    return new Response(stream.pipeThrough(new TextEncoderStream()), {
+    return new Response(stream, {
       headers: {
         "Content-Type": "text/event-stream",
         "Cache-Control": "no-cache",
@@ -110,59 +131,30 @@ export class RealtimeStreams {
       try {
         await redis.quit();
       } catch (error) {
-        logger.error("[RealtimeStreams][ingestData] Error in cleanup:", { error });
+        logger.error("[RedisRealtimeStreams][ingestData] Error in cleanup:", { error });
       }
     }
 
     try {
-      // Use TextDecoderStream to simplify text decoding
       const textStream = stream.pipeThrough(new TextDecoderStream());
       const reader = textStream.getReader();
 
-      const batchSize = 10; // Adjust this value based on performance testing
-      let batchCommands: Array<[key: RedisKey, ...args: RedisValue[]]> = [];
-
       while (true) {
         const { done, value } = await reader.read();
 
-        if (done) {
+        if (done || !value) {
           break;
         }
 
-        logger.debug("[RealtimeStreams][ingestData] Reading data", { streamKey, value });
+        logger.debug("[RedisRealtimeStreams][ingestData] Reading data", {
+          streamKey,
+          runId,
+          value,
+        });
 
-        // 'value' is a string containing the decoded text
-        const lines = value.split("\n");
-
-        for (const line of lines) {
-          if (line.trim()) {
-            // Avoid unnecessary parsing; assume 'line' is already a JSON string
-            // Add XADD command with MAXLEN option to limit stream size
-            batchCommands.push([streamKey, "MAXLEN", "~", "2500", "*", "data", line]);
-
-            if (batchCommands.length >= batchSize) {
-              // Send batch using a pipeline
-              const pipeline = redis.pipeline();
-              for (const args of batchCommands) {
-                pipeline.xadd(...args);
-              }
-              await pipeline.exec();
-              batchCommands = [];
-            }
-          }
-        }
+        await redis.xadd(streamKey, "MAXLEN", "~", "1000", "*", "data", value);
       }
 
-      // Send any remaining commands
-      if (batchCommands.length > 0) {
-        const pipeline = redis.pipeline();
-        for (const args of batchCommands) {
-          pipeline.xadd(...args);
-        }
-        await pipeline.exec();
-      }
-
-      // Send the __end message to indicate the end of the stream
       await redis.xadd(streamKey, "MAXLEN", "~", "1000", "*", "data", END_SENTINEL);
 
       return new Response(null, { status: 200 });

apps/webapp/app/services/realtime/relayRealtimeStreams.server.ts

@@ -0,0 +1,257 @@
+import { AuthenticatedEnvironment } from "../apiAuth.server";
+import { logger } from "../logger.server";
+import { StreamIngestor, StreamResponder } from "./types";
+import { LineTransformStream } from "./utils.server";
+import { v1RealtimeStreams } from "./v1StreamsGlobal.server";
+import { singleton } from "~/utils/singleton";
+
+export type RelayRealtimeStreamsOptions = {
+  ttl: number;
+  cleanupInterval: number;
+  fallbackIngestor: StreamIngestor;
+  fallbackResponder: StreamResponder;
+  waitForBufferTimeout?: number; // Time to wait for buffer in ms (default: 500ms)
+  waitForBufferInterval?: number; // Polling interval in ms (default: 50ms)
+};
+
+interface RelayedStreamRecord {
+  stream: ReadableStream<Uint8Array>;
+  createdAt: number;
+  lastAccessed: number;
+  locked: boolean;
+  finalized: boolean;
+}
+
+export class RelayRealtimeStreams implements StreamIngestor, StreamResponder {
+  private _buffers: Map<string, RelayedStreamRecord> = new Map();
+  private cleanupInterval: NodeJS.Timeout;
+  private waitForBufferTimeout: number;
+  private waitForBufferInterval: number;
+
+  constructor(private options: RelayRealtimeStreamsOptions) {
+    this.waitForBufferTimeout = options.waitForBufferTimeout ?? 1200;
+    this.waitForBufferInterval = options.waitForBufferInterval ?? 50;
+
+    // Periodic cleanup
+    this.cleanupInterval = setInterval(() => {
+      this.cleanup();
+    }, this.options.cleanupInterval).unref();
+  }
+
+  async streamResponse(
+    request: Request,
+    runId: string,
+    streamId: string,
+    environment: AuthenticatedEnvironment,
+    signal: AbortSignal
+  ): Promise<Response> {
+    let record = this._buffers.get(`${runId}:${streamId}`);
+
+    if (!record) {
+      logger.debug(
+        "[RelayRealtimeStreams][streamResponse] No ephemeral record found, waiting to see if one becomes available",
+        {
+          streamId,
+          runId,
+        }
+      );
+
+      record = await this.waitForBuffer(`${runId}:${streamId}`);
+
+      if (!record) {
+        logger.debug(
+          "[RelayRealtimeStreams][streamResponse] No ephemeral record found, using fallback",
+          {
+            streamId,
+            runId,
+          }
+        );
+
+        // No ephemeral record, use fallback
+        return this.options.fallbackResponder.streamResponse(
+          request,
+          runId,
+          streamId,
+          environment,
+          signal
+        );
+      }
+    }
+
+    // Only 1 reader of the stream can use the relayed stream, the rest should use the fallback
+    if (record.locked) {
+      logger.debug("[RelayRealtimeStreams][streamResponse] Stream already locked, using fallback", {
+        streamId,
+        runId,
+      });
+
+      return this.options.fallbackResponder.streamResponse(
+        request,
+        runId,
+        streamId,
+        environment,
+        signal
+      );
+    }
+
+    record.locked = true;
+    record.lastAccessed = Date.now();
+
+    logger.debug("[RelayRealtimeStreams][streamResponse] Streaming from ephemeral record", {
+      streamId,
+      runId,
+    });
+
+    // Create a streaming response from the buffered data
+    const stream = record.stream
+      .pipeThrough(new TextDecoderStream())
+      .pipeThrough(new LineTransformStream())
+      .pipeThrough(
+        new TransformStream({
+          transform(chunk, controller) {
+            for (const line of chunk) {
+              controller.enqueue(`data: ${line}\n\n`);
+            }
+          },
+        })
+      )
+      .pipeThrough(new TextEncoderStream());
+
+    // Once we start streaming, consider deleting the buffer when done.
+    // For a simple approach, we can rely on finalized and no more reads.
+    // Or we can let TTL cleanup handle it if multiple readers might come in.
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+        "x-trigger-relay-realtime-streams": "true",
+      },
+    });
+  }
+
+  async ingestData(
+    stream: ReadableStream<Uint8Array>,
+    runId: string,
+    streamId: string
+  ): Promise<Response> {
+    const [localStream, fallbackStream] = stream.tee();
+
+    logger.debug("[RelayRealtimeStreams][ingestData] Ingesting data", { runId, streamId });
+
+    // Handle local buffering asynchronously and catch errors
+    this.handleLocalIngestion(localStream, runId, streamId).catch((err) => {
+      logger.error("[RelayRealtimeStreams][ingestData] Error in local ingestion:", { err });
+    });
+
+    // Forward to the fallback ingestor asynchronously and catch errors
+    return this.options.fallbackIngestor.ingestData(fallbackStream, runId, streamId);
+  }
+
+  /**
+   * Handles local buffering of the stream data.
+   * @param stream The readable stream to buffer.
+   * @param streamId The unique identifier for the stream.
+   */
+  private async handleLocalIngestion(
+    stream: ReadableStream<Uint8Array>,
+    runId: string,
+    streamId: string
+  ) {
+    this.createOrUpdateRelayedStream(`${runId}:${streamId}`, stream);
+  }
+
+  /**
+   * Retrieves an existing buffer or creates a new one for the given streamId.
+   * @param streamId The unique identifier for the stream.
+   */
+  private createOrUpdateRelayedStream(
+    bufferKey: string,
+    stream: ReadableStream<Uint8Array>
+  ): RelayedStreamRecord {
+    let record = this._buffers.get(bufferKey);
+    if (!record) {
+      record = {
+        stream,
+        createdAt: Date.now(),
+        lastAccessed: Date.now(),
+        finalized: false,
+        locked: false,
+      };
+      this._buffers.set(bufferKey, record);
+    } else {
+      record.lastAccessed = Date.now();
+    }
+    return record;
+  }
+
+  private cleanup() {
+    const now = Date.now();
+
+    logger.debug("[RelayRealtimeStreams][cleanup] Cleaning up old buffers", {
+      bufferCount: this._buffers.size,
+    });
+
+    for (const [key, record] of this._buffers.entries()) {
+      // If last accessed is older than ttl, clean up
+      if (now - record.lastAccessed > this.options.ttl) {
+        this.deleteBuffer(key);
+      }
+    }
+
+    logger.debug("[RelayRealtimeStreams][cleanup] Cleaned up old buffers", {
+      bufferCount: this._buffers.size,
+    });
+  }
+
+  private deleteBuffer(bufferKey: string) {
+    this._buffers.delete(bufferKey);
+  }
+
+  /**
+   * Waits for a buffer to be created within a specified timeout.
+   * @param streamId The unique identifier for the stream.
+   * @returns A promise that resolves to true if the buffer was created, false otherwise.
+   */
+  private async waitForBuffer(bufferKey: string): Promise<RelayedStreamRecord | undefined> {
+    const timeout = this.waitForBufferTimeout;
+    const interval = this.waitForBufferInterval;
+    const maxAttempts = Math.ceil(timeout / interval);
+    let attempts = 0;
+
+    return new Promise<RelayedStreamRecord | undefined>((resolve) => {
+      const checkBuffer = () => {
+        attempts++;
+        if (this._buffers.has(bufferKey)) {
+          resolve(this._buffers.get(bufferKey));
+          return;
+        }
+        if (attempts >= maxAttempts) {
+          resolve(undefined);
+          return;
+        }
+        setTimeout(checkBuffer, interval);
+      };
+      checkBuffer();
+    });
+  }
+
+  // Don't forget to clear interval on shutdown if needed
+  close() {
+    clearInterval(this.cleanupInterval);
+  }
+}
+
+function initializeRelayRealtimeStreams() {
+  return new RelayRealtimeStreams({
+    ttl: 1000 * 60 * 5, // 5 minutes
+    cleanupInterval: 1000 * 60, // 1 minute
+    fallbackIngestor: v1RealtimeStreams,
+    fallbackResponder: v1RealtimeStreams,
+  });
+}
+
+export const relayRealtimeStreams = singleton(
+  "relayRealtimeStreams",
+  initializeRelayRealtimeStreams
+);

apps/webapp/app/services/realtime/types.ts

@@ -0,0 +1,21 @@
+import { AuthenticatedEnvironment } from "../apiAuth.server";
+
+// Interface for stream ingestion
+export interface StreamIngestor {
+  ingestData(
+    stream: ReadableStream<Uint8Array>,
+    runId: string,
+    streamId: string
+  ): Promise<Response>;
+}
+
+// Interface for stream response
+export interface StreamResponder {
+  streamResponse(
+    request: Request,
+    runId: string,
+    streamId: string,
+    environment: AuthenticatedEnvironment,
+    signal: AbortSignal
+  ): Promise<Response>;
+}

apps/webapp/app/services/realtime/utils.server.ts

@@ -0,0 +1,33 @@
+export class LineTransformStream extends TransformStream<string, string[]> {
+  private buffer = "";
+
+  constructor() {
+    super({
+      transform: (chunk, controller) => {
+        // Append the chunk to the buffer
+        this.buffer += chunk;
+
+        // Split on newlines
+        const lines = this.buffer.split("\n");
+
+        // The last element might be incomplete, hold it back in buffer
+        this.buffer = lines.pop() || "";
+
+        // Filter out empty or whitespace-only lines
+        const fullLines = lines.filter((line) => line.trim().length > 0);
+
+        // If we got any complete lines, emit them as an array
+        if (fullLines.length > 0) {
+          controller.enqueue(fullLines);
+        }
+      },
+      flush: (controller) => {
+        // On stream end, if there's leftover text, emit it as a single-element array
+        const trimmed = this.buffer.trim();
+        if (trimmed.length > 0) {
+          controller.enqueue([trimmed]);
+        }
+      },
+    });
+  }
+}

apps/webapp/app/services/realtime/v1StreamsGlobal.server.ts

@@ -1,9 +1,9 @@
 import { env } from "~/env.server";
 import { singleton } from "~/utils/singleton";
-import { RealtimeStreams } from "./realtimeStreams.server";
+import { RedisRealtimeStreams } from "./redisRealtimeStreams.server";
 
-function initializeRealtimeStreams() {
-  return new RealtimeStreams({
+function initializeRedisRealtimeStreams() {
+  return new RedisRealtimeStreams({
     redis: {
       port: env.REDIS_PORT,
       host: env.REDIS_HOST,
@@ -16,4 +16,4 @@ function initializeRealtimeStreams() {
   });
 }
 
-export const realtimeStreams = singleton("realtimeStreams", initializeRealtimeStreams);
+export const v1RealtimeStreams = singleton("realtimeStreams", initializeRedisRealtimeStreams);

apps/webapp/app/services/realtime/v2StreamsGlobal.server.ts

@@ -0,0 +1,13 @@
+import { prisma } from "~/db.server";
+import { singleton } from "~/utils/singleton";
+import { realtimeClient } from "../realtimeClientGlobal.server";
+import { DatabaseRealtimeStreams } from "./databaseRealtimeStreams.server";
+
+function initializeDatabaseRealtimeStreams() {
+  return new DatabaseRealtimeStreams({
+    prisma,
+    realtimeClient,
+  });
+}
+
+export const v2RealtimeStreams = singleton("dbRealtimeStreams", initializeDatabaseRealtimeStreams);

apps/webapp/app/services/realtimeClient.server.ts

@@ -37,6 +37,23 @@ export class RealtimeClient {
     this.#registerCommands();
   }
 
+  async streamChunks(
+    url: URL | string,
+    environment: RealtimeEnvironment,
+    runId: string,
+    streamId: string,
+    signal?: AbortSignal,
+    clientVersion?: string
+  ) {
+    return this.#streamChunksWhere(
+      url,
+      environment,
+      `"runId"='${runId}' AND "key"='${streamId}'`,
+      signal,
+      clientVersion
+    );
+  }
+
   async streamRun(
     url: URL | string,
     environment: RealtimeEnvironment,
@@ -52,7 +69,14 @@ export class RealtimeClient {
     batchId: string,
     clientVersion?: string
   ) {
-    return this.#streamRunsWhere(url, environment, `"batchId"='${batchId}'`, clientVersion);
+    const whereClauses: string[] = [
+      `"runtimeEnvironmentId"='${environment.id}'`,
+      `"batchId"='${batchId}'`,
+    ];
+
+    const whereClause = whereClauses.join(" AND ");
+
+    return this.#streamRunsWhere(url, environment, whereClause, clientVersion);
   }
 
   async streamRuns(
@@ -78,12 +102,12 @@ export class RealtimeClient {
     whereClause: string,
     clientVersion?: string
   ) {
-    const electricUrl = this.#constructElectricUrl(url, whereClause, clientVersion);
+    const electricUrl = this.#constructRunsElectricUrl(url, whereClause, clientVersion);
 
-    return this.#performElectricRequest(electricUrl, environment, clientVersion);
+    return this.#performElectricRequest(electricUrl, environment, undefined, clientVersion);
   }
 
-  #constructElectricUrl(url: URL | string, whereClause: string, clientVersion?: string): URL {
+  #constructRunsElectricUrl(url: URL | string, whereClause: string, clientVersion?: string): URL {
     const $url = new URL(url.toString());
 
     const electricUrl = new URL(`${this.options.electricOrigin}/v1/shape`);
@@ -105,9 +129,44 @@ export class RealtimeClient {
     return electricUrl;
   }
 
+  async #streamChunksWhere(
+    url: URL | string,
+    environment: RealtimeEnvironment,
+    whereClause: string,
+    signal?: AbortSignal,
+    clientVersion?: string
+  ) {
+    const electricUrl = this.#constructChunksElectricUrl(url, whereClause, clientVersion);
+
+    return this.#performElectricRequest(electricUrl, environment, signal, clientVersion);
+  }
+
+  #constructChunksElectricUrl(url: URL | string, whereClause: string, clientVersion?: string): URL {
+    const $url = new URL(url.toString());
+
+    const electricUrl = new URL(`${this.options.electricOrigin}/v1/shape`);
+
+    // Copy over all the url search params to the electric url
+    $url.searchParams.forEach((value, key) => {
+      electricUrl.searchParams.set(key, value);
+    });
+
+    electricUrl.searchParams.set("where", whereClause);
+    electricUrl.searchParams.set("table", `public."RealtimeStreamChunk"`);
+
+    if (!clientVersion) {
+      // If the client version is not provided, that means we're using an older client
+      // This means the client will be sending shape_id instead of handle
+      electricUrl.searchParams.set("handle", electricUrl.searchParams.get("shape_id") ?? "");
+    }
+
+    return electricUrl;
+  }
+
   async #performElectricRequest(
     url: URL,
     environment: RealtimeEnvironment,
+    signal?: AbortSignal,
     clientVersion?: string
   ) {
     const shapeId = extractShapeId(url);
@@ -122,13 +181,13 @@ export class RealtimeClient {
 
     if (!shapeId) {
       // If the shapeId is not present, we're just getting the initial value
-      return longPollingFetch(url.toString(), {}, rewriteResponseHeaders);
+      return longPollingFetch(url.toString(), { signal }, rewriteResponseHeaders);
     }
 
     const isLive = isLiveRequestUrl(url);
 
     if (!isLive) {
-      return longPollingFetch(url.toString(), {}, rewriteResponseHeaders);
+      return longPollingFetch(url.toString(), { signal }, rewriteResponseHeaders);
     }
 
     const requestId = randomUUID();
@@ -170,7 +229,7 @@ export class RealtimeClient {
 
     try {
       // ... (rest of your existing code for the long polling request)
-      const response = await longPollingFetch(url.toString(), {}, rewriteResponseHeaders);
+      const response = await longPollingFetch(url.toString(), { signal }, rewriteResponseHeaders);
 
       // Decrement the counter after the long polling request is complete
       await this.#decrementConcurrency(environment.id, requestId);

apps/webapp/app/services/routeBuilders/apiBuilder.server.ts

@@ -21,16 +21,23 @@ import { safeJsonParse } from "~/utils/json";
 type ApiKeyRouteBuilderOptions<
   TParamsSchema extends z.AnyZodObject | undefined = undefined,
   TSearchParamsSchema extends z.AnyZodObject | undefined = undefined,
-  THeadersSchema extends z.AnyZodObject | undefined = undefined
+  THeadersSchema extends z.AnyZodObject | undefined = undefined,
+  TResource = never
 > = {
   params?: TParamsSchema;
   searchParams?: TSearchParamsSchema;
   headers?: THeadersSchema;
   allowJWT?: boolean;
   corsStrategy?: "all" | "none";
+  findResource: (
+    params: TParamsSchema extends z.AnyZodObject ? z.infer<TParamsSchema> : undefined,
+    authentication: ApiAuthenticationResultSuccess
+  ) => Promise<TResource | undefined>;
+  shouldRetryNotFound?: boolean;
   authorization?: {
     action: AuthorizationAction;
     resource: (
+      resource: NonNullable<TResource>,
       params: TParamsSchema extends z.AnyZodObject ? z.infer<TParamsSchema> : undefined,
       searchParams: TSearchParamsSchema extends z.AnyZodObject
         ? z.infer<TSearchParamsSchema>
@@ -44,7 +51,8 @@ type ApiKeyRouteBuilderOptions<
 type ApiKeyHandlerFunction<
   TParamsSchema extends z.AnyZodObject | undefined,
   TSearchParamsSchema extends z.AnyZodObject | undefined,
-  THeadersSchema extends z.AnyZodObject | undefined = undefined
+  THeadersSchema extends z.AnyZodObject | undefined = undefined,
+  TResource = never
 > = (args: {
   params: TParamsSchema extends z.AnyZodObject ? z.infer<TParamsSchema> : undefined;
   searchParams: TSearchParamsSchema extends z.AnyZodObject
@@ -53,15 +61,17 @@ type ApiKeyHandlerFunction<
   headers: THeadersSchema extends z.AnyZodObject ? z.infer<THeadersSchema> : undefined;
   authentication: ApiAuthenticationResultSuccess;
   request: Request;
+  resource: NonNullable<TResource>;
 }) => Promise<Response>;
 
 export function createLoaderApiRoute<
   TParamsSchema extends z.AnyZodObject | undefined = undefined,
   TSearchParamsSchema extends z.AnyZodObject | undefined = undefined,
-  THeadersSchema extends z.AnyZodObject | undefined = undefined
+  THeadersSchema extends z.AnyZodObject | undefined = undefined,
+  TResource = never
 >(
-  options: ApiKeyRouteBuilderOptions<TParamsSchema, TSearchParamsSchema, THeadersSchema>,
-  handler: ApiKeyHandlerFunction<TParamsSchema, TSearchParamsSchema, THeadersSchema>
+  options: ApiKeyRouteBuilderOptions<TParamsSchema, TSearchParamsSchema, THeadersSchema, TResource>,
+  handler: ApiKeyHandlerFunction<TParamsSchema, TSearchParamsSchema, THeadersSchema, TResource>
 ) {
   return async function loader({ request, params }: LoaderFunctionArgs) {
     const {
@@ -71,6 +81,8 @@ export function createLoaderApiRoute<
       allowJWT = false,
       corsStrategy = "none",
       authorization,
+      findResource,
+      shouldRetryNotFound,
     } = options;
 
     if (corsStrategy !== "none" && request.method.toUpperCase() === "OPTIONS") {
@@ -146,13 +158,32 @@ export function createLoaderApiRoute<
         parsedHeaders = headers.data;
       }
 
+      // Find the resource
+      const resource = await findResource(parsedParams, authenticationResult);
+
+      if (!resource) {
+        return await wrapResponse(
+          request,
+          json(
+            { error: "Not found" },
+            { status: 404, headers: { "x-should-retry": shouldRetryNotFound ? "true" : "false" } }
+          ),
+          corsStrategy !== "none"
+        );
+      }
+
       if (authorization) {
-        const { action, resource, superScopes } = authorization;
-        const $resource = resource(parsedParams, parsedSearchParams, parsedHeaders);
+        const { action, resource: authResource, superScopes } = authorization;
+        const $authResource = authResource(
+          resource,
+          parsedParams,
+          parsedSearchParams,
+          parsedHeaders
+        );
 
         logger.debug("Checking authorization", {
           action,
-          resource: $resource,
+          resource: $authResource,
           superScopes,
           scopes: authenticationResult.scopes,
         });
@@ -160,7 +191,7 @@ export function createLoaderApiRoute<
         const authorizationResult = checkAuthorization(
           authenticationResult,
           action,
-          $resource,
+          $authResource,
           superScopes
         );
 
@@ -187,6 +218,7 @@ export function createLoaderApiRoute<
         headers: parsedHeaders,
         authentication: authenticationResult,
         request,
+        resource,
       });
       return await wrapResponse(request, result, corsStrategy !== "none");
     } catch (error) {
@@ -346,7 +378,24 @@ type ApiKeyActionRouteBuilderOptions<
   TSearchParamsSchema extends z.AnyZodObject | undefined = undefined,
   THeadersSchema extends z.AnyZodObject | undefined = undefined,
   TBodySchema extends z.AnyZodObject | undefined = undefined
-> = ApiKeyRouteBuilderOptions<TParamsSchema, TSearchParamsSchema, THeadersSchema> & {
+> = {
+  params?: TParamsSchema;
+  searchParams?: TSearchParamsSchema;
+  headers?: THeadersSchema;
+  allowJWT?: boolean;
+  corsStrategy?: "all" | "none";
+  authorization?: {
+    action: AuthorizationAction;
+    resource: (
+      params: TParamsSchema extends z.AnyZodObject ? z.infer<TParamsSchema> : undefined,
+      searchParams: TSearchParamsSchema extends z.AnyZodObject
+        ? z.infer<TSearchParamsSchema>
+        : undefined,
+      headers: THeadersSchema extends z.AnyZodObject ? z.infer<THeadersSchema> : undefined,
+      body: TBodySchema extends z.AnyZodObject ? z.infer<TBodySchema> : undefined
+    ) => AuthorizationResources;
+    superScopes?: string[];
+  };
   maxContentLength?: number;
   body?: TBodySchema;
 };
@@ -517,7 +566,7 @@ export function createActionApiRoute<
 
       if (authorization) {
         const { action, resource, superScopes } = authorization;
-        const $resource = resource(parsedParams, parsedSearchParams, parsedHeaders);
+        const $resource = resource(parsedParams, parsedSearchParams, parsedHeaders, parsedBody);
 
         logger.debug("Checking authorization", {
           action,
@@ -526,10 +575,25 @@ export function createActionApiRoute<
           scopes: authenticationResult.scopes,
         });
 
-        if (!checkAuthorization(authenticationResult, action, $resource, superScopes)) {
+        const authorizationResult = checkAuthorization(
+          authenticationResult,
+          action,
+          $resource,
+          superScopes
+        );
+
+        if (!authorizationResult.authorized) {
           return await wrapResponse(
             request,
-            json({ error: "Unauthorized" }, { status: 403 }),
+            json(
+              {
+                error: `Unauthorized: ${authorizationResult.reason}`,
+                code: "unauthorized",
+                param: "access_token",
+                type: "authorization",
+              },
+              { status: 403 }
+            ),
             corsStrategy !== "none"
           );
         }

apps/webapp/app/services/worker.server.ts

@@ -55,6 +55,7 @@ import {
   CancelDevSessionRunsServiceOptions,
 } from "~/v3/services/cancelDevSessionRuns.server";
 import { logger } from "./logger.server";
+import { BatchProcessingOptions, BatchTriggerV2Service } from "~/v3/services/batchTriggerV2.server";
 
 const workerCatalog = {
   indexEndpoint: z.object({
@@ -197,6 +198,7 @@ const workerCatalog = {
     attemptId: z.string(),
   }),
   "v3.cancelDevSessionRuns": CancelDevSessionRunsServiceOptions,
+  "v3.processBatchTaskRun": BatchProcessingOptions,
 };
 
 const executionWorkerCatalog = {
@@ -561,7 +563,7 @@ function getWorkerQueue() {
         handler: async (payload, job) => {
           const service = new ResumeBatchRunService();
 
-          return await service.call(payload.batchRunId);
+          await service.call(payload.batchRunId);
         },
       },
       "v3.resumeTaskDependency": {
@@ -727,6 +729,15 @@ function getWorkerQueue() {
           return await service.call(payload);
         },
       },
+      "v3.processBatchTaskRun": {
+        priority: 0,
+        maxAttempts: 5,
+        handler: async (payload, job) => {
+          const service = new BatchTriggerV2Service(payload.strategy);
+
+          await service.processBatchTaskRun(payload);
+        },
+      },
     },
   });
 }

apps/webapp/app/tailwind.css

@@ -13,6 +13,14 @@
     @apply bg-background-dimmed text-text-dimmed;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+
+  /* Text selection styles */
+  ::selection {
+    @apply bg-text-bright/30 text-text-bright;
+  }
+  ::-moz-selection {
+    @apply bg-text-bright/30 text-text-bright;
+  }
   
   /* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
   :root {

apps/webapp/app/utils/idempotencyKeys.server.ts

@@ -0,0 +1,41 @@
+/**
+ * Resolve the TTL for an idempotency key.
+ *
+ * The TTL format is a string like "5m", "1h", "7d"
+ *
+ * @param ttl The TTL string
+ * @returns The date when the key will expire
+ * @throws If the TTL string is invalid
+ */
+export function resolveIdempotencyKeyTTL(ttl: string | undefined | null): Date | undefined {
+  if (!ttl) {
+    return undefined;
+  }
+
+  const match = ttl.match(/^(\d+)([smhd])$/);
+
+  if (!match) {
+    return;
+  }
+
+  const [, value, unit] = match;
+
+  const now = new Date();
+
+  switch (unit) {
+    case "s":
+      now.setSeconds(now.getSeconds() + parseInt(value, 10));
+      break;
+    case "m":
+      now.setMinutes(now.getMinutes() + parseInt(value, 10));
+      break;
+    case "h":
+      now.setHours(now.getHours() + parseInt(value, 10));
+      break;
+    case "d":
+      now.setDate(now.getDate() + parseInt(value, 10));
+      break;
+  }
+
+  return now;
+}

apps/webapp/app/utils/pathBuilder.ts

@@ -437,6 +437,26 @@ export function v3NewSchedulePath(organization: OrgForPath, project: ProjectForP
   return `${v3ProjectPath(organization, project)}/schedules/new`;
 }
 
+export function v3BatchesPath(organization: OrgForPath, project: ProjectForPath) {
+  return `${v3ProjectPath(organization, project)}/batches`;
+}
+
+export function v3BatchPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  batch: { friendlyId: string }
+) {
+  return `${v3ProjectPath(organization, project)}/batches?id=${batch.friendlyId}`;
+}
+
+export function v3BatchRunsPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  batch: { friendlyId: string }
+) {
+  return `${v3ProjectPath(organization, project)}/runs?batchId=${batch.friendlyId}`;
+}
+
 export function v3ProjectSettingsPath(organization: OrgForPath, project: ProjectForPath) {
   return `${v3ProjectPath(organization, project)}/settings`;
 }

apps/webapp/app/v3/environmentVariables/environmentVariablesRepository.server.ts

@@ -662,12 +662,25 @@ export async function resolveVariablesForEnvironment(runtimeEnvironment: Runtime
     runtimeEnvironment.id
   );
 
+  const overridableTriggerVariables = await resolveOverridableTriggerVariables(runtimeEnvironment);
+
   const builtInVariables =
     runtimeEnvironment.type === "DEVELOPMENT"
       ? await resolveBuiltInDevVariables(runtimeEnvironment)
       : await resolveBuiltInProdVariables(runtimeEnvironment);
 
-  return [...projectSecrets, ...builtInVariables];
+  return [...overridableTriggerVariables, ...projectSecrets, ...builtInVariables];
+}
+
+async function resolveOverridableTriggerVariables(runtimeEnvironment: RuntimeEnvironment) {
+  let result: Array<EnvironmentVariable> = [
+    {
+      key: "TRIGGER_REALTIME_STREAM_VERSION",
+      value: env.REALTIME_STREAM_VERSION,
+    },
+  ];
+
+  return result;
 }
 
 async function resolveBuiltInDevVariables(runtimeEnvironment: RuntimeEnvironment) {

apps/webapp/app/v3/handleSocketIo.server.ts

@@ -207,6 +207,7 @@ function createCoordinatorNamespace(io: Server) {
           const payload = await sharedQueueTasks.getExecutionPayloadFromAttempt({
             id: attempt.id,
             setToExecuting: true,
+            skipStatusChecks: true,
           });
 
           if (!payload) {

apps/webapp/app/v3/marqs/devQueueConsumer.server.ts

@@ -378,24 +378,15 @@ export class DevQueueConsumer {
         lockedById: backgroundTask.id,
         status: "EXECUTING",
         lockedToVersionId: backgroundWorker.id,
+        taskVersion: backgroundWorker.version,
+        sdkVersion: backgroundWorker.sdkVersion,
+        cliVersion: backgroundWorker.cliVersion,
         startedAt: existingTaskRun.startedAt ?? new Date(),
         maxDurationInSeconds: getMaxDuration(
           existingTaskRun.maxDurationInSeconds,
           backgroundTask.maxDurationInSeconds
         ),
       },
-      include: {
-        attempts: {
-          take: 1,
-          orderBy: { number: "desc" },
-        },
-        tags: true,
-        batchItems: {
-          include: {
-            batchTaskRun: true,
-          },
-        },
-      },
     });
 
     if (!lockedTaskRun) {

apps/webapp/app/v3/marqs/sharedQueueConsumer.server.ts

@@ -407,6 +407,9 @@ export class SharedQueueConsumer {
             lockedAt: new Date(),
             lockedById: backgroundTask.id,
             lockedToVersionId: deployment.worker.id,
+            taskVersion: deployment.worker.version,
+            sdkVersion: deployment.worker.sdkVersion,
+            cliVersion: deployment.worker.cliVersion,
             startedAt: existingTaskRun.startedAt ?? new Date(),
             baseCostInCents: env.CENTS_PER_RUN,
             machinePreset: machinePresetFromConfig(backgroundTask.machineConfig ?? {}).name,
@@ -1035,6 +1038,7 @@ class SharedQueueTasks {
         id: attempt.taskRun.friendlyId,
         output: attempt.output ?? undefined,
         outputType: attempt.outputType,
+        taskIdentifier: attempt.taskRun.taskIdentifier,
       };
       return success;
     } else {
@@ -1042,6 +1046,7 @@ class SharedQueueTasks {
         ok,
         id: attempt.taskRun.friendlyId,
         error: attempt.error as TaskRunError,
+        taskIdentifier: attempt.taskRun.taskIdentifier,
       };
       return failure;
     }
@@ -1076,7 +1081,11 @@ class SharedQueueTasks {
             tags: true,
             batchItems: {
               include: {
-                batchTaskRun: true,
+                batchTaskRun: {
+                  select: {
+                    friendlyId: true,
+                  },
+                },
               },
             },
           },

apps/webapp/app/v3/queueSizeLimits.server.ts

@@ -10,7 +10,8 @@ export type QueueSizeGuardResult = {
 
 export async function guardQueueSizeLimitsForEnv(
   environment: AuthenticatedEnvironment,
-  marqs?: MarQS
+  marqs?: MarQS,
+  itemsToAdd: number = 1
 ): Promise<QueueSizeGuardResult> {
   const maximumSize = getMaximumSizeForEnvironment(environment);
 
@@ -23,9 +24,10 @@ export async function guardQueueSizeLimitsForEnv(
   }
 
   const queueSize = await marqs.lengthOfEnvQueue(environment);
+  const projectedSize = queueSize + itemsToAdd;
 
   return {
-    isWithinLimits: queueSize < maximumSize,
+    isWithinLimits: projectedSize <= maximumSize,
     maximumSize,
     queueSize,
   };

apps/webapp/app/v3/r2.server.ts

@@ -4,6 +4,7 @@ import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { logger } from "~/services/logger.server";
 import { singleton } from "~/utils/singleton";
 import { startActiveSpan } from "./tracer.server";
+import { IOPacket } from "@trigger.dev/core/v3";
 
 export const r2 = singleton("r2", initializeR2);
 
@@ -18,13 +19,13 @@ function initializeR2() {
   });
 }
 
-export async function uploadToObjectStore(
+export async function uploadPacketToObjectStore(
   filename: string,
-  data: string,
+  data: ReadableStream | string,
   contentType: string,
   environment: AuthenticatedEnvironment
 ): Promise<string> {
-  return await startActiveSpan("uploadToObjectStore()", async (span) => {
+  return await startActiveSpan("uploadPacketToObjectStore()", async (span) => {
     if (!r2) {
       throw new Error("Object store credentials are not set");
     }
@@ -60,6 +61,92 @@ export async function uploadToObjectStore(
   });
 }
 
+export async function downloadPacketFromObjectStore(
+  packet: IOPacket,
+  environment: AuthenticatedEnvironment
+): Promise<IOPacket> {
+  if (packet.dataType !== "application/store") {
+    return packet;
+  }
+
+  return await startActiveSpan("downloadPacketFromObjectStore()", async (span) => {
+    if (!r2) {
+      throw new Error("Object store credentials are not set");
+    }
+
+    if (!env.OBJECT_STORE_BASE_URL) {
+      throw new Error("Object store base URL is not set");
+    }
+
+    span.setAttributes({
+      projectRef: environment.project.externalRef,
+      environmentSlug: environment.slug,
+      filename: packet.data,
+    });
+
+    const url = new URL(env.OBJECT_STORE_BASE_URL);
+    url.pathname = `/packets/${environment.project.externalRef}/${environment.slug}/${packet.data}`;
+
+    logger.debug("Downloading from object store", { url: url.href });
+
+    const response = await r2.fetch(url.toString());
+
+    if (!response.ok) {
+      throw new Error(`Failed to download input from ${url}: ${response.statusText}`);
+    }
+
+    const data = await response.text();
+
+    const rawPacket = {
+      data,
+      dataType: "application/json",
+    };
+
+    return rawPacket;
+  });
+}
+
+export async function uploadDataToObjectStore(
+  filename: string,
+  data: string,
+  contentType: string,
+  prefix?: string
+): Promise<string> {
+  return await startActiveSpan("uploadDataToObjectStore()", async (span) => {
+    if (!r2) {
+      throw new Error("Object store credentials are not set");
+    }
+
+    if (!env.OBJECT_STORE_BASE_URL) {
+      throw new Error("Object store base URL is not set");
+    }
+
+    span.setAttributes({
+      prefix,
+      filename,
+    });
+
+    const url = new URL(env.OBJECT_STORE_BASE_URL);
+    url.pathname = `${prefix}/${filename}`;
+
+    logger.debug("Uploading to object store", { url: url.href });
+
+    const response = await r2.fetch(url.toString(), {
+      method: "PUT",
+      headers: {
+        "Content-Type": contentType,
+      },
+      body: data,
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to upload data to ${url}: ${response.statusText}`);
+    }
+
+    return url.href;
+  });
+}
+
 export async function generatePresignedRequest(
   projectRef: string,
   envSlug: string,

apps/webapp/app/v3/services/alerts/deliverAlert.server.ts

@@ -219,6 +219,7 @@ export class DeliverAlertService extends BaseService {
             environment: alert.environment.slug,
             error: createJsonErrorObject(taskRunError),
             attemptLink: `${env.APP_ORIGIN}/projects/v3/${alert.project.externalRef}/runs/${alert.taskRunAttempt.taskRun.friendlyId}`,
+            organization: alert.project.organization.title,
           });
         } else {
           logger.error("[DeliverAlert] Task run attempt not found", {
@@ -244,6 +245,7 @@ export class DeliverAlertService extends BaseService {
             environment: alert.environment.slug,
             error: createJsonErrorObject(taskRunError),
             runLink: `${env.APP_ORIGIN}/projects/v3/${alert.project.externalRef}/runs/${alert.taskRun.friendlyId}`,
+            organization: alert.project.organization.title,
           });
         } else {
           logger.error("[DeliverAlert] Task run not found", {
@@ -276,6 +278,7 @@ export class DeliverAlertService extends BaseService {
             failedAt: alert.workerDeployment.failedAt ?? new Date(),
             error: preparedError,
             deploymentLink: `${env.APP_ORIGIN}/projects/v3/${alert.project.externalRef}/deployments/${alert.workerDeployment.shortCode}`,
+            organization: alert.project.organization.title,
           });
         } else {
           logger.error("[DeliverAlert] Worker deployment not found", {
@@ -296,6 +299,7 @@ export class DeliverAlertService extends BaseService {
             deployedAt: alert.workerDeployment.deployedAt ?? new Date(),
             deploymentLink: `${env.APP_ORIGIN}/projects/v3/${alert.project.externalRef}/deployments/${alert.workerDeployment.shortCode}`,
             taskCount: alert.workerDeployment.worker?.tasks.length ?? 0,
+            organization: alert.project.organization.title,
           });
         } else {
           logger.error("[DeliverAlert] Worker deployment not found", {

apps/webapp/app/v3/services/batchTriggerTask.server.ts

@@ -26,10 +26,9 @@ export class BatchTriggerTaskService extends BaseService {
       const existingBatch = options.idempotencyKey
         ? await this._prisma.batchTaskRun.findUnique({
             where: {
-              runtimeEnvironmentId_taskIdentifier_idempotencyKey: {
+              runtimeEnvironmentId_idempotencyKey: {
                 runtimeEnvironmentId: environment.id,
                 idempotencyKey: options.idempotencyKey,
-                taskIdentifier: taskId,
               },
             },
             include: {

apps/webapp/app/v3/services/batchTriggerV2.server.ts

@@ -0,0 +1,844 @@
+import {
+  BatchTriggerTaskV2RequestBody,
+  BatchTriggerTaskV2Response,
+  IOPacket,
+  packetRequiresOffloading,
+  parsePacket,
+} from "@trigger.dev/core/v3";
+import { BatchTaskRun, Prisma, TaskRunAttempt } from "@trigger.dev/database";
+import { $transaction, prisma, PrismaClientOrTransaction } from "~/db.server";
+import { env } from "~/env.server";
+import { batchTaskRunItemStatusForRunStatus } from "~/models/taskRun.server";
+import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { logger } from "~/services/logger.server";
+import { getEntitlement } from "~/services/platform.v3.server";
+import { workerQueue } from "~/services/worker.server";
+import { generateFriendlyId } from "../friendlyIdentifiers";
+import { marqs } from "../marqs/index.server";
+import { guardQueueSizeLimitsForEnv } from "../queueSizeLimits.server";
+import { downloadPacketFromObjectStore, uploadPacketToObjectStore } from "../r2.server";
+import { isFinalAttemptStatus, isFinalRunStatus } from "../taskStatus";
+import { startActiveSpan } from "../tracer.server";
+import { BaseService, ServiceValidationError } from "./baseService.server";
+import { OutOfEntitlementError, TriggerTaskService } from "./triggerTask.server";
+import { z } from "zod";
+
+const PROCESSING_BATCH_SIZE = 50;
+const ASYNC_BATCH_PROCESS_SIZE_THRESHOLD = 20;
+const MAX_ATTEMPTS = 10;
+
+export const BatchProcessingStrategy = z.enum(["sequential", "parallel"]);
+export type BatchProcessingStrategy = z.infer<typeof BatchProcessingStrategy>;
+
+export const BatchProcessingOptions = z.object({
+  batchId: z.string(),
+  processingId: z.string(),
+  range: z.object({ start: z.number().int(), count: z.number().int() }),
+  attemptCount: z.number().int(),
+  strategy: BatchProcessingStrategy,
+});
+
+export type BatchProcessingOptions = z.infer<typeof BatchProcessingOptions>;
+
+export type BatchTriggerTaskServiceOptions = {
+  idempotencyKey?: string;
+  idempotencyKeyExpiresAt?: Date;
+  triggerVersion?: string;
+  traceContext?: Record<string, string | undefined>;
+  spanParentAsLink?: boolean;
+  oneTimeUseToken?: string;
+};
+
+export class BatchTriggerV2Service extends BaseService {
+  private _batchProcessingStrategy: BatchProcessingStrategy;
+
+  constructor(
+    batchProcessingStrategy?: BatchProcessingStrategy,
+    protected readonly _prisma: PrismaClientOrTransaction = prisma
+  ) {
+    super(_prisma);
+
+    this._batchProcessingStrategy = batchProcessingStrategy ?? "parallel";
+  }
+
+  public async call(
+    environment: AuthenticatedEnvironment,
+    body: BatchTriggerTaskV2RequestBody,
+    options: BatchTriggerTaskServiceOptions = {}
+  ): Promise<BatchTriggerTaskV2Response> {
+    try {
+      return await this.traceWithEnv<BatchTriggerTaskV2Response>(
+        "call()",
+        environment,
+        async (span) => {
+          const existingBatch = options.idempotencyKey
+            ? await this._prisma.batchTaskRun.findUnique({
+                where: {
+                  runtimeEnvironmentId_idempotencyKey: {
+                    runtimeEnvironmentId: environment.id,
+                    idempotencyKey: options.idempotencyKey,
+                  },
+                },
+              })
+            : undefined;
+
+          if (existingBatch) {
+            if (
+              existingBatch.idempotencyKeyExpiresAt &&
+              existingBatch.idempotencyKeyExpiresAt < new Date()
+            ) {
+              logger.debug("[BatchTriggerV2][call] Idempotency key has expired", {
+                idempotencyKey: options.idempotencyKey,
+                batch: {
+                  id: existingBatch.id,
+                  friendlyId: existingBatch.friendlyId,
+                  runCount: existingBatch.runCount,
+                  idempotencyKeyExpiresAt: existingBatch.idempotencyKeyExpiresAt,
+                  idempotencyKey: existingBatch.idempotencyKey,
+                },
+              });
+
+              // Update the existing batch to remove the idempotency key
+              await this._prisma.batchTaskRun.update({
+                where: { id: existingBatch.id },
+                data: { idempotencyKey: null },
+              });
+
+              // Don't return, just continue with the batch trigger
+            } else {
+              span.setAttribute("batchId", existingBatch.friendlyId);
+
+              return this.#respondWithExistingBatch(existingBatch, environment);
+            }
+          }
+
+          const batchId = generateFriendlyId("batch");
+
+          span.setAttribute("batchId", batchId);
+
+          const dependentAttempt = body?.dependentAttempt
+            ? await this._prisma.taskRunAttempt.findUnique({
+                where: { friendlyId: body.dependentAttempt },
+                include: {
+                  taskRun: {
+                    select: {
+                      id: true,
+                      status: true,
+                    },
+                  },
+                },
+              })
+            : undefined;
+
+          if (
+            dependentAttempt &&
+            (isFinalAttemptStatus(dependentAttempt.status) ||
+              isFinalRunStatus(dependentAttempt.taskRun.status))
+          ) {
+            logger.debug("[BatchTriggerV2][call] Dependent attempt or run is in a terminal state", {
+              dependentAttempt: dependentAttempt,
+              batchId,
+            });
+
+            throw new ServiceValidationError(
+              "Cannot process batch as the parent run is already in a terminal state"
+            );
+          }
+
+          if (environment.type !== "DEVELOPMENT") {
+            const result = await getEntitlement(environment.organizationId);
+            if (result && result.hasAccess === false) {
+              throw new OutOfEntitlementError();
+            }
+          }
+
+          const idempotencyKeys = body.items.map((i) => i.options?.idempotencyKey).filter(Boolean);
+
+          const cachedRuns =
+            idempotencyKeys.length > 0
+              ? await this._prisma.taskRun.findMany({
+                  where: {
+                    runtimeEnvironmentId: environment.id,
+                    idempotencyKey: {
+                      in: body.items.map((i) => i.options?.idempotencyKey).filter(Boolean),
+                    },
+                  },
+                  select: {
+                    friendlyId: true,
+                    idempotencyKey: true,
+                    idempotencyKeyExpiresAt: true,
+                  },
+                })
+              : [];
+
+          if (cachedRuns.length) {
+            logger.debug("[BatchTriggerV2][call] Found cached runs", {
+              cachedRuns,
+              batchId,
+            });
+          }
+
+          // Now we need to create an array of all the run IDs, in order
+          // If we have a cached run, that isn't expired, we should use that run ID
+          // If we have a cached run, that is expired, we should generate a new run ID and save that cached run ID to a set of expired run IDs
+          // If we don't have a cached run, we should generate a new run ID
+          const expiredRunIds = new Set<string>();
+          let cachedRunCount = 0;
+
+          const runs = body.items.map((item) => {
+            const cachedRun = cachedRuns.find(
+              (r) => r.idempotencyKey === item.options?.idempotencyKey
+            );
+
+            if (cachedRun) {
+              if (
+                cachedRun.idempotencyKeyExpiresAt &&
+                cachedRun.idempotencyKeyExpiresAt < new Date()
+              ) {
+                expiredRunIds.add(cachedRun.friendlyId);
+
+                return {
+                  id: generateFriendlyId("run"),
+                  isCached: false,
+                  idempotencyKey: item.options?.idempotencyKey ?? undefined,
+                  taskIdentifier: item.task,
+                };
+              }
+
+              cachedRunCount++;
+
+              return {
+                id: cachedRun.friendlyId,
+                isCached: true,
+                idempotencyKey: item.options?.idempotencyKey ?? undefined,
+                taskIdentifier: item.task,
+              };
+            }
+
+            return {
+              id: generateFriendlyId("run"),
+              isCached: false,
+              idempotencyKey: item.options?.idempotencyKey ?? undefined,
+              taskIdentifier: item.task,
+            };
+          });
+
+          // Calculate how many new runs we need to create
+          const newRunCount = body.items.length - cachedRunCount;
+
+          if (newRunCount === 0) {
+            logger.debug("[BatchTriggerV2][call] All runs are cached", {
+              batchId,
+            });
+
+            await this._prisma.batchTaskRun.create({
+              data: {
+                friendlyId: batchId,
+                runtimeEnvironmentId: environment.id,
+                idempotencyKey: options.idempotencyKey,
+                idempotencyKeyExpiresAt: options.idempotencyKeyExpiresAt,
+                dependentTaskAttemptId: dependentAttempt?.id,
+                runCount: body.items.length,
+                runIds: runs.map((r) => r.id),
+                status: "COMPLETED",
+                batchVersion: "v2",
+                oneTimeUseToken: options.oneTimeUseToken,
+              },
+            });
+
+            return {
+              id: batchId,
+              isCached: false,
+              idempotencyKey: options.idempotencyKey ?? undefined,
+              runs,
+            };
+          }
+
+          const queueSizeGuard = await guardQueueSizeLimitsForEnv(environment, marqs, newRunCount);
+
+          logger.debug("Queue size guard result", {
+            newRunCount,
+            queueSizeGuard,
+            environment: {
+              id: environment.id,
+              type: environment.type,
+              organization: environment.organization,
+              project: environment.project,
+            },
+          });
+
+          if (!queueSizeGuard.isWithinLimits) {
+            throw new ServiceValidationError(
+              `Cannot trigger ${newRunCount} tasks as the queue size limit for this environment has been reached. The maximum size is ${queueSizeGuard.maximumSize}`
+            );
+          }
+
+          // Expire the cached runs that are no longer valid
+          if (expiredRunIds.size) {
+            logger.debug("Expiring cached runs", {
+              expiredRunIds: Array.from(expiredRunIds),
+              batchId,
+            });
+
+            // TODO: is there a limit to the number of items we can update in a single query?
+            await this._prisma.taskRun.updateMany({
+              where: { friendlyId: { in: Array.from(expiredRunIds) } },
+              data: { idempotencyKey: null },
+            });
+          }
+
+          // Upload to object store
+          const payloadPacket = await this.#handlePayloadPacket(
+            body.items,
+            `batch/${batchId}`,
+            environment
+          );
+
+          const batch = await this.#createAndProcessBatchTaskRun(
+            batchId,
+            runs,
+            payloadPacket,
+            newRunCount,
+            environment,
+            body,
+            options,
+            dependentAttempt ?? undefined
+          );
+
+          if (!batch) {
+            throw new Error("Failed to create batch");
+          }
+
+          return {
+            id: batch.friendlyId,
+            isCached: false,
+            idempotencyKey: batch.idempotencyKey ?? undefined,
+            runs,
+          };
+        }
+      );
+    } catch (error) {
+      // Detect a prisma transaction Unique constraint violation
+      if (error instanceof Prisma.PrismaClientKnownRequestError) {
+        logger.debug("BatchTriggerV2: Prisma transaction error", {
+          code: error.code,
+          message: error.message,
+          meta: error.meta,
+        });
+
+        if (error.code === "P2002") {
+          const target = error.meta?.target;
+
+          if (
+            Array.isArray(target) &&
+            target.length > 0 &&
+            typeof target[0] === "string" &&
+            target[0].includes("oneTimeUseToken")
+          ) {
+            throw new ServiceValidationError(
+              "Cannot batch trigger with a one-time use token as it has already been used."
+            );
+          } else {
+            throw new ServiceValidationError(
+              "Cannot batch trigger as it has already been triggered with the same idempotency key."
+            );
+          }
+        }
+      }
+
+      throw error;
+    }
+  }
+
+  async #createAndProcessBatchTaskRun(
+    batchId: string,
+    runs: Array<{
+      id: string;
+      isCached: boolean;
+      idempotencyKey: string | undefined;
+      taskIdentifier: string;
+    }>,
+    payloadPacket: IOPacket,
+    newRunCount: number,
+    environment: AuthenticatedEnvironment,
+    body: BatchTriggerTaskV2RequestBody,
+    options: BatchTriggerTaskServiceOptions = {},
+    dependentAttempt?: TaskRunAttempt
+  ) {
+    if (newRunCount <= ASYNC_BATCH_PROCESS_SIZE_THRESHOLD) {
+      const batch = await this._prisma.batchTaskRun.create({
+        data: {
+          friendlyId: batchId,
+          runtimeEnvironmentId: environment.id,
+          idempotencyKey: options.idempotencyKey,
+          idempotencyKeyExpiresAt: options.idempotencyKeyExpiresAt,
+          dependentTaskAttemptId: dependentAttempt?.id,
+          runCount: newRunCount,
+          runIds: runs.map((r) => r.id),
+          payload: payloadPacket.data,
+          payloadType: payloadPacket.dataType,
+          options,
+          batchVersion: "v2",
+          oneTimeUseToken: options.oneTimeUseToken,
+        },
+      });
+
+      const result = await this.#processBatchTaskRunItems(
+        batch,
+        environment,
+        0,
+        PROCESSING_BATCH_SIZE,
+        body.items,
+        options
+      );
+
+      switch (result.status) {
+        case "COMPLETE": {
+          logger.debug("[BatchTriggerV2][call] Batch inline processing complete", {
+            batchId: batch.friendlyId,
+            currentIndex: 0,
+          });
+
+          return batch;
+        }
+        case "INCOMPLETE": {
+          logger.debug("[BatchTriggerV2][call] Batch inline processing incomplete", {
+            batchId: batch.friendlyId,
+            currentIndex: result.workingIndex,
+          });
+
+          // If processing inline does not finish for some reason, enqueue processing the rest of the batch
+          await this.#enqueueBatchTaskRun({
+            batchId: batch.id,
+            processingId: "0",
+            range: {
+              start: result.workingIndex,
+              count: PROCESSING_BATCH_SIZE,
+            },
+            attemptCount: 0,
+            strategy: "sequential",
+          });
+
+          return batch;
+        }
+        case "ERROR": {
+          logger.error("[BatchTriggerV2][call] Batch inline processing error", {
+            batchId: batch.friendlyId,
+            currentIndex: result.workingIndex,
+            error: result.error,
+          });
+
+          await this.#enqueueBatchTaskRun({
+            batchId: batch.id,
+            processingId: "0",
+            range: {
+              start: result.workingIndex,
+              count: PROCESSING_BATCH_SIZE,
+            },
+            attemptCount: 0,
+            strategy: "sequential",
+          });
+
+          return batch;
+        }
+      }
+    } else {
+      return await $transaction(this._prisma, async (tx) => {
+        const batch = await tx.batchTaskRun.create({
+          data: {
+            friendlyId: batchId,
+            runtimeEnvironmentId: environment.id,
+            idempotencyKey: options.idempotencyKey,
+            idempotencyKeyExpiresAt: options.idempotencyKeyExpiresAt,
+            dependentTaskAttemptId: dependentAttempt?.id,
+            runCount: body.items.length,
+            runIds: runs.map((r) => r.id),
+            payload: payloadPacket.data,
+            payloadType: payloadPacket.dataType,
+            options,
+            batchVersion: "v2",
+            oneTimeUseToken: options.oneTimeUseToken,
+          },
+        });
+
+        switch (this._batchProcessingStrategy) {
+          case "sequential": {
+            await this.#enqueueBatchTaskRun({
+              batchId: batch.id,
+              processingId: batchId,
+              range: { start: 0, count: PROCESSING_BATCH_SIZE },
+              attemptCount: 0,
+              strategy: this._batchProcessingStrategy,
+            });
+
+            break;
+          }
+          case "parallel": {
+            const ranges = Array.from({
+              length: Math.ceil(newRunCount / PROCESSING_BATCH_SIZE),
+            }).map((_, index) => ({
+              start: index * PROCESSING_BATCH_SIZE,
+              count: PROCESSING_BATCH_SIZE,
+            }));
+
+            await Promise.all(
+              ranges.map((range, index) =>
+                this.#enqueueBatchTaskRun(
+                  {
+                    batchId: batch.id,
+                    processingId: `${index}`,
+                    range,
+                    attemptCount: 0,
+                    strategy: this._batchProcessingStrategy,
+                  },
+                  tx
+                )
+              )
+            );
+
+            break;
+          }
+        }
+
+        return batch;
+      });
+    }
+  }
+
+  async #respondWithExistingBatch(
+    batch: BatchTaskRun,
+    environment: AuthenticatedEnvironment
+  ): Promise<BatchTriggerTaskV2Response> {
+    // Resolve the payload
+    const payloadPacket = await downloadPacketFromObjectStore(
+      {
+        data: batch.payload ?? undefined,
+        dataType: batch.payloadType,
+      },
+      environment
+    );
+
+    const payload = await parsePacket(payloadPacket).then(
+      (p) => p as BatchTriggerTaskV2RequestBody["items"]
+    );
+
+    const runs = batch.runIds.map((id, index) => {
+      const item = payload[index];
+
+      return {
+        id,
+        taskIdentifier: item.task,
+        isCached: true,
+        idempotencyKey: item.options?.idempotencyKey ?? undefined,
+      };
+    });
+
+    return {
+      id: batch.friendlyId,
+      idempotencyKey: batch.idempotencyKey ?? undefined,
+      isCached: true,
+      runs,
+    };
+  }
+
+  async processBatchTaskRun(options: BatchProcessingOptions) {
+    logger.debug("[BatchTriggerV2][processBatchTaskRun] Processing batch", {
+      options,
+    });
+
+    const $attemptCount = options.attemptCount + 1;
+
+    // Add early return if max attempts reached
+    if ($attemptCount > MAX_ATTEMPTS) {
+      logger.error("[BatchTriggerV2][processBatchTaskRun] Max attempts reached", {
+        options,
+        attemptCount: $attemptCount,
+      });
+      // You might want to update the batch status to failed here
+      return;
+    }
+
+    const batch = await this._prisma.batchTaskRun.findFirst({
+      where: { id: options.batchId },
+      include: {
+        runtimeEnvironment: {
+          include: {
+            project: true,
+            organization: true,
+          },
+        },
+      },
+    });
+
+    if (!batch) {
+      return;
+    }
+
+    // Check to make sure the currentIndex is not greater than the runCount
+    if (options.range.start >= batch.runCount) {
+      logger.debug("[BatchTriggerV2][processBatchTaskRun] currentIndex is greater than runCount", {
+        options,
+        batchId: batch.friendlyId,
+        runCount: batch.runCount,
+        attemptCount: $attemptCount,
+      });
+
+      return;
+    }
+
+    // Resolve the payload
+    const payloadPacket = await downloadPacketFromObjectStore(
+      {
+        data: batch.payload ?? undefined,
+        dataType: batch.payloadType,
+      },
+      batch.runtimeEnvironment
+    );
+
+    const payload = await parsePacket(payloadPacket);
+
+    if (!payload) {
+      logger.debug("[BatchTriggerV2][processBatchTaskRun] Failed to parse payload", {
+        options,
+        batchId: batch.friendlyId,
+        attemptCount: $attemptCount,
+      });
+
+      throw new Error("Failed to parse payload");
+    }
+
+    // Skip zod parsing
+    const $payload = payload as BatchTriggerTaskV2RequestBody["items"];
+    const $options = batch.options as BatchTriggerTaskServiceOptions;
+
+    const result = await this.#processBatchTaskRunItems(
+      batch,
+      batch.runtimeEnvironment,
+      options.range.start,
+      options.range.count,
+      $payload,
+      $options
+    );
+
+    switch (result.status) {
+      case "COMPLETE": {
+        logger.debug("[BatchTriggerV2][processBatchTaskRun] Batch processing complete", {
+          options,
+          batchId: batch.friendlyId,
+          attemptCount: $attemptCount,
+        });
+
+        return;
+      }
+      case "INCOMPLETE": {
+        logger.debug("[BatchTriggerV2][processBatchTaskRun] Batch processing incomplete", {
+          batchId: batch.friendlyId,
+          currentIndex: result.workingIndex,
+          attemptCount: $attemptCount,
+        });
+
+        // Only enqueue the next batch task run if the strategy is sequential
+        // if the strategy is parallel, we will already have enqueued the next batch task run
+        if (options.strategy === "sequential") {
+          await this.#enqueueBatchTaskRun({
+            batchId: batch.id,
+            processingId: options.processingId,
+            range: {
+              start: result.workingIndex,
+              count: options.range.count,
+            },
+            attemptCount: 0,
+            strategy: options.strategy,
+          });
+        }
+
+        return;
+      }
+      case "ERROR": {
+        logger.error("[BatchTriggerV2][processBatchTaskRun] Batch processing error", {
+          batchId: batch.friendlyId,
+          currentIndex: result.workingIndex,
+          error: result.error,
+          attemptCount: $attemptCount,
+        });
+
+        // if the strategy is sequential, we will requeue processing with a count of the PROCESSING_BATCH_SIZE
+        // if the strategy is parallel, we will requeue processing with a range starting at the workingIndex and a count that is the remainder of this "slice" of the batch
+        if (options.strategy === "sequential") {
+          await this.#enqueueBatchTaskRun({
+            batchId: batch.id,
+            processingId: options.processingId,
+            range: {
+              start: result.workingIndex,
+              count: options.range.count, // This will be the same as the original count
+            },
+            attemptCount: $attemptCount,
+            strategy: options.strategy,
+          });
+        } else {
+          await this.#enqueueBatchTaskRun({
+            batchId: batch.id,
+            processingId: options.processingId,
+            range: {
+              start: result.workingIndex,
+              // This will be the remainder of the slice
+              // for example if the original range was 0-50 and the workingIndex is 25, the new range will be 25-25
+              // if the original range was 51-100 and the workingIndex is 75, the new range will be 75-25
+              count: options.range.count - result.workingIndex - options.range.start,
+            },
+            attemptCount: $attemptCount,
+            strategy: options.strategy,
+          });
+        }
+
+        return;
+      }
+    }
+  }
+
+  async #processBatchTaskRunItems(
+    batch: BatchTaskRun,
+    environment: AuthenticatedEnvironment,
+    currentIndex: number,
+    batchSize: number,
+    items: BatchTriggerTaskV2RequestBody["items"],
+    options?: BatchTriggerTaskServiceOptions
+  ): Promise<
+    | { status: "COMPLETE" }
+    | { status: "INCOMPLETE"; workingIndex: number }
+    | { status: "ERROR"; error: string; workingIndex: number }
+  > {
+    // Grab the next PROCESSING_BATCH_SIZE runIds
+    const runIds = batch.runIds.slice(currentIndex, currentIndex + batchSize);
+
+    logger.debug("[BatchTriggerV2][processBatchTaskRun] Processing batch items", {
+      batchId: batch.friendlyId,
+      currentIndex,
+      runIds,
+      runCount: batch.runCount,
+    });
+
+    // Combine the "window" between currentIndex and currentIndex + PROCESSING_BATCH_SIZE with the runId and the item in the payload which is an array
+    const itemsToProcess = runIds.map((runId, index) => ({
+      runId,
+      item: items[index + currentIndex],
+    }));
+
+    let workingIndex = currentIndex;
+
+    for (const item of itemsToProcess) {
+      try {
+        await this.#processBatchTaskRunItem(batch, environment, item, workingIndex, options);
+
+        workingIndex++;
+      } catch (error) {
+        logger.error("[BatchTriggerV2][processBatchTaskRun] Failed to process item", {
+          batchId: batch.friendlyId,
+          currentIndex: workingIndex,
+          error,
+        });
+
+        return {
+          status: "ERROR",
+          error: error instanceof Error ? error.message : String(error),
+          workingIndex,
+        };
+      }
+    }
+
+    // if there are more items to process, requeue the batch
+    if (workingIndex < batch.runCount) {
+      return { status: "INCOMPLETE", workingIndex };
+    }
+
+    return { status: "COMPLETE" };
+  }
+
+  async #processBatchTaskRunItem(
+    batch: BatchTaskRun,
+    environment: AuthenticatedEnvironment,
+    task: { runId: string; item: BatchTriggerTaskV2RequestBody["items"][number] },
+    currentIndex: number,
+    options?: BatchTriggerTaskServiceOptions
+  ) {
+    logger.debug("[BatchTriggerV2][processBatchTaskRunItem] Processing item", {
+      batchId: batch.friendlyId,
+      runId: task.runId,
+      currentIndex,
+    });
+
+    const triggerTaskService = new TriggerTaskService();
+
+    const run = await triggerTaskService.call(
+      task.item.task,
+      environment,
+      {
+        ...task.item,
+        options: {
+          ...task.item.options,
+          dependentBatch: batch.dependentTaskAttemptId ? batch.friendlyId : undefined, // Only set dependentBatch if dependentAttempt is set which means batchTriggerAndWait was called
+          parentBatch: batch.dependentTaskAttemptId ? undefined : batch.friendlyId, // Only set parentBatch if dependentAttempt is NOT set which means batchTrigger was called
+        },
+      },
+      {
+        triggerVersion: options?.triggerVersion,
+        traceContext: options?.traceContext,
+        spanParentAsLink: options?.spanParentAsLink,
+        batchId: batch.friendlyId,
+        skipChecks: true,
+        runId: task.runId,
+      }
+    );
+
+    if (!run) {
+      throw new Error(`Failed to trigger run ${task.runId} for batch ${batch.friendlyId}`);
+    }
+
+    await this._prisma.batchTaskRunItem.create({
+      data: {
+        batchTaskRunId: batch.id,
+        taskRunId: run.id,
+        status: batchTaskRunItemStatusForRunStatus(run.status),
+      },
+    });
+  }
+
+  async #enqueueBatchTaskRun(options: BatchProcessingOptions, tx?: PrismaClientOrTransaction) {
+    await workerQueue.enqueue("v3.processBatchTaskRun", options, {
+      tx,
+      jobKey: `BatchTriggerV2Service.process:${options.batchId}:${options.processingId}`,
+    });
+  }
+
+  async #handlePayloadPacket(
+    payload: any,
+    pathPrefix: string,
+    environment: AuthenticatedEnvironment
+  ) {
+    return await startActiveSpan("handlePayloadPacket()", async (span) => {
+      const packet = { data: JSON.stringify(payload), dataType: "application/json" };
+
+      if (!packet.data) {
+        return packet;
+      }
+
+      const { needsOffloading } = packetRequiresOffloading(
+        packet,
+        env.TASK_PAYLOAD_OFFLOAD_THRESHOLD
+      );
+
+      if (!needsOffloading) {
+        return packet;
+      }
+
+      const filename = `${pathPrefix}/payload.json`;
+
+      await uploadPacketToObjectStore(filename, packet.data, packet.dataType, environment);
+
+      return {
+        data: filename,
+        dataType: "application/store",
+      };
+    });
+  }
+}

apps/webapp/app/v3/services/createBackgroundWorker.server.ts

@@ -190,7 +190,6 @@ export async function createBackgroundTasks(
         },
         update: {
           concurrencyLimit,
-          rateLimit: task.queue?.rateLimit,
         },
         create: {
           friendlyId: generateFriendlyId("queue"),
@@ -198,18 +197,35 @@ export async function createBackgroundTasks(
           concurrencyLimit,
           runtimeEnvironmentId: worker.runtimeEnvironmentId,
           projectId: worker.projectId,
-          rateLimit: task.queue?.rateLimit,
           type: task.queue?.name ? "NAMED" : "VIRTUAL",
         },
       });
 
       if (typeof taskQueue.concurrencyLimit === "number") {
+        logger.debug("CreateBackgroundWorkerService: updating concurrency limit", {
+          workerId: worker.id,
+          taskQueue,
+          orgId: environment.organizationId,
+          projectId: environment.projectId,
+          environmentId: environment.id,
+          concurrencyLimit,
+          taskidentifier: task.id,
+        });
         await marqs?.updateQueueConcurrencyLimits(
           environment,
           taskQueue.name,
           taskQueue.concurrencyLimit
         );
       } else {
+        logger.debug("CreateBackgroundWorkerService: removing concurrency limit", {
+          workerId: worker.id,
+          taskQueue,
+          orgId: environment.organizationId,
+          projectId: environment.projectId,
+          environmentId: environment.id,
+          concurrencyLimit,
+          taskidentifier: task.id,
+        });
         await marqs?.removeQueueConcurrencyLimits(environment, taskQueue.name);
       }
     } catch (error) {

apps/webapp/app/v3/services/createTaskRunAttempt.server.ts

@@ -72,7 +72,11 @@ export class CreateTaskRunAttemptService extends BaseService {
           },
           batchItems: {
             include: {
-              batchTaskRun: true,
+              batchTaskRun: {
+                select: {
+                  friendlyId: true,
+                },
+              },
             },
           },
         },

apps/webapp/app/v3/services/expireEnqueuedRun.server.ts

@@ -49,6 +49,14 @@ export class ExpireEnqueuedRunService extends BaseService {
       return;
     }
 
+    if (run.lockedAt) {
+      logger.debug("Run cannot be expired because it's locked", {
+        run,
+      });
+
+      return;
+    }
+
     logger.debug("Expiring enqueued run", {
       run,
     });

apps/webapp/app/v3/services/finalizeTaskRun.server.ts

@@ -14,6 +14,7 @@ import { BaseService } from "./baseService.server";
 import { ResumeDependentParentsService } from "./resumeDependentParents.server";
 import { ExpireEnqueuedRunService } from "./expireEnqueuedRun.server";
 import { socketIo } from "../handleSocketIo.server";
+import { ResumeBatchRunService } from "./resumeBatchRun.server";
 
 type BaseInput = {
   id: string;
@@ -63,9 +64,13 @@ export class FinalizeTaskRunService extends BaseService {
       completedAt,
     });
 
+    // I moved the error update here for two reasons:
+    // - A single update is more efficient than two
+    // - If the status updates to a final status, realtime will receive that status and then shut down the stream
+    //   before the error is updated, which would cause the error to be lost
     const run = await this._prisma.taskRun.update({
       where: { id },
-      data: { status, expiredAt, completedAt },
+      data: { status, expiredAt, completedAt, error: error ? sanitizeError(error) : undefined },
       ...(include ? { include } : {}),
     });
 
@@ -77,8 +82,13 @@ export class FinalizeTaskRunService extends BaseService {
       await this.finalizeAttempt({ attemptStatus, error, run });
     }
 
-    if (error) {
-      await this.finalizeRunError(run, error);
+    try {
+      await this.#finalizeBatch(run);
+    } catch (finalizeBatchError) {
+      logger.error("FinalizeTaskRunService: Failed to finalize batch", {
+        runId: run.id,
+        error: finalizeBatchError,
+      });
     }
 
     //resume any dependencies
@@ -135,13 +145,70 @@ export class FinalizeTaskRunService extends BaseService {
     return run as Output<T>;
   }
 
-  async finalizeRunError(run: TaskRun, error: TaskRunError) {
-    await this._prisma.taskRun.update({
-      where: { id: run.id },
-      data: {
-        error: sanitizeError(error),
+  async #finalizeBatch(run: TaskRun) {
+    if (!run.batchId) {
+      return;
+    }
+
+    logger.debug("FinalizeTaskRunService: Finalizing batch", { runId: run.id });
+
+    const environment = await this._prisma.runtimeEnvironment.findFirst({
+      where: {
+        id: run.runtimeEnvironmentId,
       },
     });
+
+    if (!environment) {
+      return;
+    }
+
+    const batchItems = await this._prisma.batchTaskRunItem.findMany({
+      where: {
+        taskRunId: run.id,
+      },
+      include: {
+        batchTaskRun: {
+          select: {
+            id: true,
+            dependentTaskAttemptId: true,
+          },
+        },
+      },
+    });
+
+    if (batchItems.length === 0) {
+      return;
+    }
+
+    if (batchItems.length > 10) {
+      logger.error("FinalizeTaskRunService: More than 10 batch items", {
+        runId: run.id,
+        batchItems: batchItems.length,
+      });
+
+      return;
+    }
+
+    for (const item of batchItems) {
+      // Don't do anything if this is a batchTriggerAndWait in a deployed task
+      if (environment.type !== "DEVELOPMENT" && item.batchTaskRun.dependentTaskAttemptId) {
+        continue;
+      }
+
+      // Update the item to complete
+      await this._prisma.batchTaskRunItem.update({
+        where: {
+          id: item.id,
+        },
+        data: {
+          status: "COMPLETED",
+        },
+      });
+
+      // This won't resume because this batch does not have a dependent task attempt ID
+      // or is in development, but this service will mark the batch as completed
+      await ResumeBatchRunService.enqueue(item.batchTaskRunId, this._prisma);
+    }
   }
 
   async finalizeAttempt({

apps/webapp/app/v3/services/indexDeployment.server.ts

@@ -50,7 +50,7 @@ export class IndexDeploymentService extends BaseService {
         deployment.id,
         "DEPLOYING",
         "Could not index deployment in time",
-        new Date(Date.now() + 180_000)
+        new Date(Date.now() + env.DEPLOY_TIMEOUT_MS)
       );
 
       const responses = await socketIo.providerNamespace.timeout(30_000).emitWithAck("INDEX", {

apps/webapp/app/v3/services/initializeDeployment.server.ts

@@ -64,7 +64,7 @@ export class InitializeDeploymentService extends BaseService {
         deployment.id,
         "BUILDING",
         "Building timed out",
-        new Date(Date.now() + 180_000) // 3 minutes
+        new Date(Date.now() + env.DEPLOY_TIMEOUT_MS)
       );
 
       const imageTag = `${payload.namespace ?? env.DEPLOY_REGISTRY_NAMESPACE}/${