Merge pull request #157 from triggerdotdev/changeset-release/main

chore: Update version for release (next)

.changeset/afraid-hornets-cheer.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+run context jsdocs

.changeset/beige-maps-hug.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Better docs for io.try

.changeset/big-tables-search.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Added retrying and better messaging

.changeset/bright-buses-join.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+IO Logging now respects the job and client logLevel, and only outputs locally when ioLogLocalEnabled is true

.changeset/brown-bikes-bathe.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/openai": patch
+---
+
+Improved OpenAI task errors

.changeset/cuddly-pets-arrive.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Don't return the apiKey when they don't match

.changeset/dull-bulldogs-design.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/typeform": patch
+---
+
+getAllResponses fixed

.changeset/empty-falcons-run.md

@@ -0,0 +1,9 @@
+---
+"@trigger.dev/typeform": patch
+"@trigger.dev/github": patch
+"@trigger.dev/openai": patch
+"@trigger.dev/resend": patch
+"@trigger.dev/plain": patch
+---
+
+Missing token/apikey error improved for display in Next.js logs

.changeset/fast-ligers-wink.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+registerCron and unregisterCron jsdocs

.changeset/fifty-melons-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added support for Runs being canceled

.changeset/forty-pugs-share.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/nextjs": patch
+---
+
+Set duplex "half" when creating fetch based Request objects when they have a body

.changeset/friendly-parents-clean.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Split the CLI into two commands, init and a new dev command

.changeset/funny-elephants-sing.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/plain": patch
+---
+
+Added upsertCustomTimelineEntry Task and exported the components from the plain package

.changeset/gentle-dogs-end.md

@@ -0,0 +1,10 @@
+---
+"@trigger.dev/typeform": patch
+"@trigger.dev/sdk": patch
+"@trigger.dev/github": patch
+"@trigger.dev/openai": patch
+"@trigger.dev/slack": patch
+"@trigger.dev/cli": patch
+---
+
+Upgrade to zod 3.21.4

.changeset/gentle-guests-leave.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/cli": patch
+---
+
+api.trigger.dev is now the default cloud url

.changeset/healthy-rockets-cry.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+io.runTask jsdocs

.changeset/heavy-eyes-own.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+[dev] Better handle errors when registering endpoint

.changeset/hot-eggs-protect.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+io.sendEvent jsdocs

.changeset/hot-seals-press.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+deliverAt and timestamp event properties are now dates

.changeset/itchy-cars-count.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/openai": patch
+---
+
+listModels returns the response.data instead of response.data.data

.changeset/khaki-needles-wait.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+cronTrigger jsdocs

.changeset/lemon-ads-wait.md

@@ -0,0 +1,9 @@
+---
+"@trigger.dev/typeform": patch
+"@trigger.dev/github": patch
+"@trigger.dev/openai": patch
+"@trigger.dev/resend": patch
+"@trigger.dev/plain": patch
+---
+
+Throw if the clients are passed an undefined apikey or token

.changeset/long-clocks-hide.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added JSDocs related to logging

.changeset/lovely-chicken-serve.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/typeform": patch
+---
+
+Use a standalone tsconfig.json file to increase portability

.changeset/lovely-hounds-accept.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Removed --tunnel option, currently we just support ngrok

.changeset/lovely-plants-brake.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+intervalTrigger() jsdocs

.changeset/lucky-crews-matter.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Fixed responses from the PING action to match expected schema

.changeset/metal-trainers-work.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Generate the README for a new integration package

.changeset/mighty-seals-fold.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Adding the create-integration command to scaffold out new integration packages (inside or outside of the monorepo)

.changeset/modern-turtles-eat.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+jsdocs for DynamicTrigger and DynamicSchedule

.changeset/moody-islands-melt.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Export the client from the generated code and added code comments

.changeset/odd-colts-smash.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/github": patch
+---
+
+Fixed some properties that had API urls instead of HTML urls

.changeset/pink-islands-pay.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/nextjs": patch
+---
+
+Adaptors no longer take an options object

.changeset/pink-numbers-jam.md

@@ -0,0 +1,14 @@
+---
+"@trigger.dev/integration-kit": patch
+"@trigger.dev/typeform": patch
+"@trigger.dev/sdk": patch
+"@trigger.dev/github": patch
+"@trigger.dev/openai": patch
+"@trigger.dev/resend": patch
+"@trigger.dev/plain": patch
+"@trigger.dev/slack": patch
+"@trigger.dev/nextjs": patch
+"@trigger.dev/cli": patch
+---
+
+Set Node version to 16.8 and above

.changeset/plenty-ties-raise.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/nextjs": patch
+---
+
+Loosen the Next.js dependency version

.changeset/popular-cooks-boil.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/internal": patch
+---
+
+backgroundFetch jsdocs

.changeset/pre.json

@@ -14,29 +14,91 @@
     "@trigger.dev/database": "0.0.0",
     "@trigger.dev/init": "0.2.0",
     "@trigger.dev/integration-kit": "2.0.0-next.1",
-    "@trigger.dev/resend": "1.0.0-next.1"
+    "@trigger.dev/resend": "1.0.0-next.1",
+    "@trigger.dev/cli": "0.2.1-next.8",
+    "@trigger.dev/typeform": "1.0.0-next.2",
+    "@trigger.dev/plain": "1.0.0-next.2"
   },
   "changesets": [
+    "afraid-hornets-cheer",
+    "beige-maps-hug",
+    "big-tables-search",
+    "bright-buses-join",
     "bright-horses-bathe",
+    "brown-bikes-bathe",
     "chatty-cars-agree",
     "chilly-meals-warn",
     "clever-bats-learn",
+    "cuddly-pets-arrive",
     "curly-hornets-sort",
     "dirty-needles-kneel",
+    "dull-bulldogs-design",
     "eight-buckets-agree",
     "eighty-queens-prove",
+    "empty-falcons-run",
+    "fast-ligers-wink",
+    "fifty-melons-enjoy",
+    "forty-pugs-share",
     "four-ligers-perform",
+    "friendly-parents-clean",
+    "funny-elephants-sing",
+    "gentle-dogs-end",
+    "gentle-guests-leave",
     "great-meals-listen",
+    "healthy-rockets-cry",
+    "heavy-eyes-own",
     "heavy-mails-explain",
+    "hot-eggs-protect",
+    "hot-seals-press",
+    "itchy-cars-count",
     "itchy-rockets-provide",
+    "khaki-needles-wait",
+    "lemon-ads-wait",
+    "long-clocks-hide",
+    "lovely-chicken-serve",
+    "lovely-hounds-accept",
+    "lovely-plants-brake",
+    "lucky-crews-matter",
     "metal-donkeys-relate",
+    "metal-trainers-work",
+    "mighty-seals-fold",
     "modern-emus-suffer",
+    "modern-turtles-eat",
+    "moody-islands-melt",
+    "odd-colts-smash",
+    "pink-islands-pay",
+    "pink-numbers-jam",
+    "plenty-ties-raise",
+    "popular-cooks-boil",
+    "pretty-bats-obey",
     "quick-stingrays-own",
+    "quiet-berries-tickle",
+    "quiet-dryers-collect",
+    "rich-clocks-attack",
+    "rude-bees-taste",
+    "shiny-mirrors-beam",
+    "shy-bobcats-hear",
+    "silent-mirrors-lay",
+    "silver-clocks-visit",
+    "silver-insects-sneeze",
+    "six-humans-happen",
+    "sixty-pandas-deliver",
+    "sixty-squids-wink",
+    "strange-jobs-shout",
     "strong-cars-visit",
     "stupid-files-cough",
+    "sweet-adults-applaud",
+    "sweet-cups-rescue",
+    "sweet-houses-drum",
     "sweet-snails-refuse",
     "tame-flowers-invite",
+    "tasty-bats-flow",
+    "ten-birds-confess",
+    "thirty-apes-happen",
+    "tidy-planes-compete",
     "tough-walls-share",
-    "wild-rats-mix"
+    "two-tools-hide",
+    "wild-rats-mix",
+    "young-birds-unite"
   ]
 }

.changeset/pretty-bats-obey.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/typeform": patch
+---
+
+safeBodyParse webhook import fixed

.changeset/quiet-berries-tickle.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Initializing a next.js project now creates a better file structure

.changeset/quiet-dryers-collect.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+registerTrigger jsdocs

.changeset/rich-clocks-attack.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+io.registerInterval and io.unregisterInterval jsdocs

.changeset/rude-bees-taste.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Fix when setting the url as an option

.changeset/shiny-mirrors-beam.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/integration-kit": patch
+"@trigger.dev/sdk": patch
+"@trigger.dev/typeform": patch
+---
+
+Creating the typeform integration package

.changeset/shy-bobcats-hear.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Removed the url option for TriggerClient

.changeset/silent-mirrors-lay.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added JSdocs for io.wait and io.logger

.changeset/silver-clocks-visit.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/typeform": patch
+---
+
+Update how tasks are exported

.changeset/silver-insects-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+isTriggerError jsdocs

.changeset/six-humans-happen.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+eventTrigger() jsdocs

.changeset/sixty-pandas-deliver.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/sdk": patch
+"@trigger.dev/openai": patch
+---
+
+Adding support for output properties on tasks

.changeset/sixty-squids-wink.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+io.try jsdocs

.changeset/strange-jobs-shout.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Added better Next Steps in the init cli command

.changeset/sweet-adults-applaud.md

@@ -0,0 +1,6 @@
+---
+"@trigger.dev/typeform": patch
+"@trigger.dev/integration-kit": patch
+---
+
+integration-kit uses webhook package

.changeset/sweet-cups-rescue.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added human readable cron expression property to cron triggers

.changeset/sweet-houses-drum.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+All logs are now structured logs

.changeset/tasty-bats-flow.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added jsdocs for TriggerClient() and sendEvent()

.changeset/ten-birds-confess.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Better handle input for the --trigger-url option

.changeset/thirty-apes-happen.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Improved the endpoint prompt

.changeset/tidy-planes-compete.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/slack": patch
+---
+
+Added joinConversation task, and automatically try and join a public conversation if the bot is not in it when posting a message

.changeset/two-tools-hide.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/cli": patch
+---
+
+Improved spinner and made port clear in logs

.changeset/young-birds-unite.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added JSdocs for Job

.github/workflows/publish.yml

@@ -106,48 +106,3 @@ jobs:
         env:
           REGISTRY: ghcr.io/triggerdotdev
           REPOSITORY: trigger.dev
-
-      - name: 🌐 Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v2
-        with:
-          role-to-assume: arn:aws:iam::067435167850:role/GitHubAction-AssumeRoleWithAction
-          aws-region: ${{ env.AWS_REGION }}
-
-      - name: 🌐 Login to ECR
-        id: ecr-login
-        uses: aws-actions/amazon-ecr-login@v1
-
-      - name: 🌐 Push to Amazon ECR
-        run: |
-          docker tag release_build_image $REGISTRY/$REPOSITORY:$IMAGE_TAG
-          docker push $REGISTRY/$REPOSITORY:$IMAGE_TAG
-        env:
-          REGISTRY: ${{ steps.ecr-login.outputs.registry }}
-          REPOSITORY: trigger.dev
-          IMAGE_TAG: ${{ steps.get_version.outputs.version }}
-
-      - name: 🌐 Push 'latest' to Amazon ECR
-        if: startsWith(github.ref, 'refs/tags/')
-        run: |
-          docker tag release_build_image $REGISTRY/$REPOSITORY:latest
-          docker push $REGISTRY/$REPOSITORY:latest
-        env:
-          REGISTRY: ${{ steps.ecr-login.outputs.registry }}
-          REPOSITORY: trigger.dev
-
-      - name: 🌐 Push commit hash to Amazon ECR
-        if: startsWith(github.ref, 'refs/heads/')
-        run: |
-          docker tag release_build_image $REGISTRY/$REPOSITORY:$IMAGE_TAG
-          docker push $REGISTRY/$REPOSITORY:$IMAGE_TAG
-        env:
-          REGISTRY: ${{ steps.ecr-login.outputs.registry }}
-          REPOSITORY: trigger.dev
-          IMAGE_TAG: ${{ steps.get_version.outputs.version }}-${{ steps.get_commit.outputs.sha_short }}
-
-      - name: 🚀 Trigger Test Deploy
-        if: github.ref == 'refs/heads/main' && github.event_name == 'push' && github.repository == 'triggerdotdev/trigger.dev'
-        env:
-          DEPLOY_TEST_HOOK: ${{ secrets.DEPLOY_TEST_HOOK }}
-        run: |
-          curl -X POST $DEPLOY_TEST_HOOK

CONTRIBUTING.md

@@ -0,0 +1,90 @@
+# Contributing to Trigger.dev
+
+Thank you for taking the time to contribute to Trigger.dev. Your involvement is not just welcomed, but we encourage it! 🚀
+
+Please take some time to read this guide to understand contributing best practices for Trigger.dev.
+
+Thank you for helping us make Trigger.dev even better! 🤩
+
+## Developing
+
+The development branch is `main`. This is the branch that all pull
+requests should be made against. The changes on the `main`
+branch are tagged into a release monthly.
+
+### Prerequisites
+- [Node.js](https://nodejs.org/en) version >=16.x
+- [pnpm package manager](https://pnpm.io/installation) version 7
+- [Docker](https://www.docker.com/get-started/)
+
+### Setup
+
+1. Clone the repo into a public GitHub repository or [fork the repo](https://github.com/triggerdotdev/trigger.dev/fork). If you plan to distribute the code, keep the source code public to comply with the [Apache Licence 2.0](https://github.com/triggerdotdev/trigger.dev/blob/main/LICENSE).
+
+      ```
+      git clone https://github.com/triggerdotdev/trigger.dev.git
+      ```
+      > If you are on windows, run the following command on gitbash with admin privileges:
+      > `git clone -c core.symlinks=true https://triggerdotdev/trigger.dev.git`
+2. Navigate to the project folder
+      ```
+      cd trigger.dev
+      ```
+3. Install the required packages using pnpm.
+      ```
+      pnpm i
+      ```
+4. Create your `.env` files
+      ```
+      cp .env.example .env && cp packages/database/.env.example packages/database/.env
+      ```
+5. Open the root `.env` file and fill in the required values Magic Link:
+            
+      Both of these secrets should be random strings, which you can easily generate (and copy into your pasteboard) with the following command:
+      
+      ```sh
+      openssl rand -hex 16 | pbcopy
+      ```
+
+      <p>Then set them here:</p>
+
+      ```
+      SESSION_SECRET=<string>
+      MAGIC_LINK_SECRET=<string>
+      ```
+      
+7. Start Docker. This starts the required services like Postgres.
+      ```
+      pnpm run docker
+      ```
+8. Migrate the database
+      ```
+      pnpm run db:migrate
+      ```
+9. Run the seed script
+      ```
+      pnpm run db:seed
+      ```
+5. Run the app. See the section below.
+
+## Running
+
+1. You can run the app with:
+      ```
+      pnpm run dev --filter webapp
+      ```
+      
+      It should run on port `3030`: [http://localhost:3030](http://localhost:3030/)
+
+2. Once the app is running click the magic link button and enter your email.
+3. Check your terminal, the magic link email should have printed out.
+4. Paste the magic link shown in your terminal into your browser to login.
+
+## Making a pull request
+
+**If you get errors, be sure to fix them before committing.**
+
+- Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue
+  ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
+- Be sure to fill the PR Template accordingly.

DEPLOYMENT.md

@@ -1,32 +0,0 @@
-# Trigger.dev Deployment Guide
-
-## StreamNative Cloud - Hosted Pulsar
-
-### Generic client credentials
-
-```sh
-snctl auth export-service-account webapp --key-file webapp-credentials.json
-snctl auth export-service-account websocketserver --key-file wss-credentials.json
-```
-
-### Topics
-
-#### Triggers (`persistent://triggerdotdev/workflows/triggers`)
-
-Events that trigger workflows to run. These are sent by the "platform" and read by the Web Socket Servers, which then coordinate with the hosts for running the workflows
-
-#### Run Commands (`persistent://triggerdotdev/workflows/run-commands`)
-
-These are events that come from hosts and are published by the Web Socket Servers, e.g. Sending Integration Requests, Sending Logs, Initializing a Delay
-
-#### Run Command Responses (`persistent://triggerdotdev/workflows/run-command-responses`)
-
-These are events that come from the platform and are read by the Web Socket Servers, to resolve or reject a previous Run Command
-
-#### Integration Requests (`persistent://triggerdotdev/queues/integration-requests`)
-
-This is an internal queue used by the platform to perform integration requests, and retry them.
-
-#### App Task Queue (`persistent://triggerdotdev/queues/background-tasks`)
-
-This is an internal queue used by the platform to do tasks in a queue. Basically a background job system.

DEVELOPMENT.md

@@ -1,231 +0,0 @@
-# Initial setup
-
-## Prerequisites
-
-### Pulsar requirements
-
-1. Ensure you have Homebrew installed by running `which brew` in terminal. If it's not found then you should install it: https://brew.sh/. Run `which brew` again to check it's found. If it's not you may need to [add it your path](https://stackoverflow.com/questions/36657321/after-installing-homebrew-i-get-zsh-command-not-found-brew)
-
-2. Run `brew install libpulsar` to install the C++ libraries that the pulsar-client depends on
-
-3. Make sure you have Python installed on your machine by running `which python3` in terminal.
-
-4. If python isn't found then you should install it: https://www.python.org/downloads/. In a new terminal window run `which python3` again.
-
-5. Run `npm config set python /the/path/from/the/which/python3/command` inserting the path from step 2 or 3
-
-6. Install node-gyp: `npm install -g node-gyp`
-
-7. Make sure you have the Xcode command line tools installed by running `xcode-select --install` from the terminal. If it says they're already installed then you're set.
-
-8. Run this in the terminal:
-
-```sh
-export CPLUS_INCLUDE_PATH="$CPLUS_INCLUDE_PATH:$(brew --prefix)/include"
-export LIBRARY_PATH="$LIBRARY_PATH:$(brew --prefix)/lib"
-export PULSAR_CPP_DIR=/opt/homebrew/Cellar/libpulsar/3.1.0
-```
-
-9. Run `pnpm install` in the same terminal window.
-
-## Building and running the webapp
-
-> **Warning**
-> All the following commands should be launched from the **monorepo root directory**
-
-1. Install the dependencies.
-   ```bash
-   pnpm install
-   ```
-2. Optionally, if you are testing auth (pizzly) or webhooks (webapp) then you'll need to use ngrok to proxy internet traffic to your local machine
-
-   Get access to ngrok and then follow the instructions here to get it setup: https://ngrok.com/download (use homebrew) and make sure to authenticate.
-
-   Then run the following scripts to start proxying:
-
-   ```sh
-   ./scripts/proxy-pizzly.sh dan-pizzly-dev
-   ./scripts/proxy-webapp.sh dan-trigger-dev
-   ```
-
-3. Environment variables. You will need to create copies of the `.env.example` files in `app/webapp`
-
-   ```sh
-   cp ./apps/webapp/.env.example ./apps/webapp/.env
-   ```
-
-   Then you will need to fill in the fields with real values.
-
-   You also need to create the `pizzly-server.env` files under the `.docker` directory:
-
-   ```sh
-   cp ./.docker/pizzly-server.env.example ./.docker/pizzly-server.env
-   ```
-
-   Next, update the `AUTH_CALLBACK_URL` env var in the `pizzly-server.env` env file with the value provided to the `./scripts/proxy-pizzly.sh` command. Using the example above the `AUTH_CALLBACK_URL` would be `AUTH_CALLBACK_URL=https://dan-pizzly-dev.eu.ngrok.io/oauth/callback`.
-
-   If you aren't proxying pizzly according to step 2, then leave the `pizzly-server.env` file empty.
-
-   If you are proxying the webapp according to step 2 then in `webapp/.env`, set the `APP_ORIGIN` to the `NGROK_SUBDOMAIN` provided to the `./scripts/proxy-webapp.sh` command, e.g. `APP_ORIGIN=https://dan-trigger-dev.eu.ngrok.io`
-
-4. Start postgresql, redis, pizzly server, followed by pulsar standalone
-
-   ```bash
-   pnpm run docker:services
-   pnpm run docker:pulsar
-   ```
-
-   > **Note:** The npm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.
-
-5. Generate prisma schema
-   ```bash
-   pnpm run generate
-   ```
-6. Run the Prisma migration to the database
-
-   ```bash
-   pnpm run db:migrate:deploy
-   ```
-
-7. Run the first build (with dependencies via the `...` option)
-
-   ```bash
-   pnpm run build --filter=webapp...
-   ```
-
-   **Running simply `pnpm run build` will build everything, including the Remix app.**
-
-8. Run the Remix dev server
-
-```bash
-pnpm run dev --filter=webapp
-```
-
-## Attaching an API integration using Pizzly
-
-```bash
-PIZZLY_HOSTPORT=http://localhost:3004 npx pizzly config:create github github <client-id> <client-secret> "repo,user"
-```
-
-## Tests, Typechecks, Lint, Install packages...
-
-Check the `turbo.json` file to see the available pipelines.
-
-- Run the Cypress tests and Dev
-  ```bash
-  pnpm run test:e2e:dev --filter=webapp
-  ```
-- Lint everything
-  ```bash
-  pnpm run lint
-  ```
-- Typecheck the whole monorepo
-  ```bash
-  pnpm run typecheck
-  ```
-- Test the whole monorepo
-  ```bash
-  pnpm run test
-  or
-  pnpm run test:dev
-  ```
-- How to install an npm package in the Remix app ?
-  ```bash
-  pnpm add dayjs --filter webapp
-  ```
-- Tweak the tsconfigs, eslint configs in the `config-package` folder. Any package or app will then extend from these configs.
-
-# Running a workflow locally
-
-## After pulling a change
-
-1. Ensure there are no database migrations to run
-
-```bash
-pnpm run db:migrate:dev
-```
-
-2. Generate the Prisma database client
-
-```bash
-pnpm run generate
-```
-
-3. Install packages
-
-```bash
-pnpm install
-```
-
-4. Build everything
-
-```bash
-pnpm run build
-```
-
-5. Install packages again, this makes sure the local packages are linked
-
-```bash
-pnpm install
-```
-
-## Running the servers
-
-1. Ensure the docker containers are running
-
-```bash
-pnpm run docker:services
-pnpm run docker:pulsar
-```
-
-2. Run the webapp
-
-```bash
-pnpm run dev --filter=webapp
-```
-
-3. Run the Web Socket Server
-
-```bash
-pnpm run dev --filter=wss
-```
-
-4. Build all the @trigger.dev/\* packages
-
-```bash
-pnpm run dev --filter="@trigger.dev/*"
-```
-
-## Running the smoke test
-
-1. Run the smoke test workflow
-
-```bash
-cd ./examples/smoke-test
-pnpm run dev
-```
-
-2. Running the workflow requires you to send data to the local API.
-
-You can use this cURL command to send a `user.created` event. This will run the workflow and generate the corresponding logs.
-
-```bash
-curl --request POST \
-  --url http://localhost:3000/api/v1/events \
-  --header 'Authorization: Bearer trigger_dev_zC25mKNn6c0q' \
-  --header 'Content-Type: application/json' \
-  --data '{
-	"name": "user.created",
-	"payload": {
-		"id": "123"
-	}
-}'
-```
-
-## Dependency & Package graph
-
-![Dependency Graph](assets/dependencyGraph.png)
-
-## Warp Launch Configuration
-
-Setup a custom launch configuration for the Warp terminal ([docs here](https://docs.warp.dev/features/sessions/launch-configurations)) by copying the `.warp/triggerdotdev.yaml.example` file to `~/.warp/launch_configurations/triggerdotdev.yaml`. Make sure you edit the file and replace `<your-trigger-dev>` and `<your-pizzly-dev>` with your custom ngrok subdomains.

README.md

@@ -7,7 +7,7 @@
   
 ### The background jobs framework for Next.js
 
-[Discord](https://discord.gg/bpVDSjcG) | [Website](https://trigger.dev) | [Issues](https://github.com/triggerdotdev/trigger.dev/issues) | [Docs](https://trigger.dev/docs)
+[Discord](https://discord.gg/JtBAxBr2m3) | [Website](https://trigger.dev) | [Issues](https://github.com/triggerdotdev/trigger.dev/issues) | [Docs](https://trigger.dev/docs)
 
 [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/triggerdotdev.svg?style=social&label=Follow%20%40trigger.dev)](https://twitter.com/triggerdotdev)
 [![GitHub Repo stars](https://img.shields.io/github/stars/triggerdotdev/trigger.dev?style=social)](https://github.com/triggerdotdev/trigger.dev)
@@ -60,46 +60,5 @@ We provide an official trigger.dev docker image you can use to easily self-host
 
 ## Development
 
-### Prerequisites
-- [Node.js](https://nodejs.org/en) version >=18.x
-- [pnpm package manager](https://pnpm.io/installation) version 7
-- [Docker](https://www.docker.com/get-started/)
+To setup and develop locally or contribute to the open source project, follow our [developement guide](./CONTRIBUTING.md). 
 
-### Setup
-
-1. Clone the repo into a public GitHub repository or [fork the repo](https://github.com/triggerdotdev/trigger.dev/fork). If you plan to distribute the code, keep the source code public to comply with the [Apache Licence 2.0](https://github.com/triggerdotdev/trigger.dev/blob/main/LICENSE).
-
-      ```
-      git clone https://github.com/triggerdotdev/trigger.dev.git
-      ```
-      > If you are on windows, run the following command on gitbash with admin privileges:
-      > `git clone -c core.symlinks=true https://triggerdotdev/trigger.dev.git`
-2. Navigate to the project folder
-      ```
-      cd trigger.dev
-      ```
-3. Install the required packages using pnpm.
-      ```
-      pnpm i
-      ```
-4. Create your `.env` files
-      ```
-      cp .env.example .env && cp packages/database/.env.example packages/database/.env
-      ```
-      Open the root `.env` file and fill in the required values.
-6. Start Docker. This starts the required services like Postgres.
-      ```
-      pnpm run docker
-      ```
-7. Migrate the database
-      ```
-      pnpm run db:migrate
-      ```
-8. Run the seed script
-      ```
-      pnpm run db:seed
-      ```
-5. Run the project. It should run on `port:3030`
-      ```
-      pnpm run dev --filter webapp
-      ```

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

@@ -0,0 +1,18 @@
+export function ErrorIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="7" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/ComingSoon.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { MainCenteredContainer } from "./layout/AppLayout";
-import { Header1, Header2 } from "./primitives/Headers";
-import { NamedIcon, NamedIconInBox } from "./primitives/NamedIcon";
+import { Header2 } from "./primitives/Headers";
+import { NamedIconInBox } from "./primitives/NamedIcon";
 import { Paragraph } from "./primitives/Paragraph";
 
 type ComingSoonProps = {
@@ -23,9 +23,9 @@ export function ComingSoon({ title, description, icon }: ComingSoonProps) {
           ) : (
             icon
           )}
-          <div className="mt-0.5 flex flex-col">
+          <div className="mt-0.5 flex flex-col gap-y-1">
             <Paragraph variant="extra-extra-small/caps">Coming soon</Paragraph>
-            <Header1 className="-mt-0.5">{title}</Header1>
+            <Header2 className="-mt-0.5">{title}</Header2>
           </div>
         </div>
         <Paragraph variant="small" className="p-4">

apps/webapp/app/components/ErrorDisplay.tsx

@@ -0,0 +1,59 @@
+import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
+import { LinkButton } from "./primitives/Buttons";
+import { Header1, Header3 } from "./primitives/Headers";
+import { friendlyErrorDisplay } from "~/utils/httpErrors";
+
+type ErrorDisplayOptions = {
+  button?: {
+    title: string;
+    to: string;
+  };
+};
+
+export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
+  const error = useRouteError();
+
+  return (
+    <>
+      {isRouteErrorResponse(error) ? (
+        <ErrorDisplay
+          title={friendlyErrorDisplay(error.status, error.statusText).title}
+          message={
+            error.data.message ??
+            friendlyErrorDisplay(error.status, error.statusText).message
+          }
+          {...options}
+        />
+      ) : error instanceof Error ? (
+        <ErrorDisplay title={error.name} message={error.message} {...options} />
+      ) : (
+        <ErrorDisplay
+          title="Oops"
+          message={JSON.stringify(error)}
+          {...options}
+        />
+      )}
+    </>
+  );
+}
+
+type DisplayOptionsProps = {
+  title: string;
+  message?: string;
+} & ErrorDisplayOptions;
+
+export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
+  return (
+    <div className="p-4">
+      <Header1 className="mb-4 border-b border-slate-800 pb-4">{title}</Header1>
+      {message && <Header3>{message}</Header3>}
+      <LinkButton
+        to={button ? button.to : "/"}
+        variant="primary/medium"
+        className="mt-8"
+      >
+        {button ? button.title : "Home"}
+      </LinkButton>
+    </div>
+  );
+}

apps/webapp/app/components/HighlightInit.tsx

@@ -0,0 +1,14 @@
+import { H, HighlightOptions } from "highlight.run";
+import { useEffect } from "react";
+
+interface Props extends HighlightOptions {
+  projectId?: string;
+}
+
+export function HighlightInit({ projectId, ...highlightOptions }: Props) {
+  useEffect(() => {
+    projectId && H.init(projectId, highlightOptions);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return null;
+}

apps/webapp/app/components/UserProfilePhoto.tsx

@@ -23,9 +23,9 @@ export function UserAvatar({
   className?: string;
 }) {
   return avatarUrl ? (
-    <div>
+    <div className={cn("grid aspect-square place-items-center", className)}>
       <img
-        className={cn("aspect-square rounded-full p-[7%]", className)}
+        className={cn("aspect-square rounded-full p-[7%]")}
         src={avatarUrl}
         alt={name ?? "User"}
       />

apps/webapp/app/components/helpContent/HelpContentText.tsx

@@ -1,97 +1,44 @@
-import { Paragraph, TextLink } from "~/components/primitives/Paragraph";
+import { Link } from "@remix-run/react";
+import { Paragraph } from "~/components/primitives/Paragraph";
 import { StepNumber } from "~/components/primitives/StepNumber";
-import { IntegrationIcon } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route";
-import { Callout } from "../primitives/Callout";
-import integrationButton from "./integration-button.png";
-import ngrok from "./ngrok.png";
-import publicUrl from "./public-url.png";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useDevEnvironment } from "~/hooks/useEnvironments";
-import { ClipboardField } from "../primitives/ClipboardField";
-import { Button } from "../primitives/Buttons";
+import { useJob } from "~/hooks/useJob";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { IntegrationIcon } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route";
+import { jobTestPath } from "~/utils/pathBuilder";
 import { InlineCode } from "../code/InlineCode";
+import { HelpPanelProps } from "../integrations/ApiKeyHelp";
+import { HelpInstall } from "../integrations/HelpInstall";
+import { HelpSamples } from "../integrations/HelpSamples";
+import { Button, LinkButton } from "../primitives/Buttons";
+import { Callout, variantClasses } from "../primitives/Callout";
 import {
   ClientTabs,
   ClientTabsContent,
   ClientTabsList,
   ClientTabsTrigger,
 } from "../primitives/ClientTabs";
+import { ClipboardField } from "../primitives/ClipboardField";
+import integrationButton from "./integration-button.png";
+import selectEnvironment from "./select-environment.png";
+import selectExample from "./select-example.png";
+import { Header2 } from "../primitives/Headers";
+import { CodeBlock } from "../code/CodeBlock";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { TextLink } from "../primitives/TextLink";
 
 export function HowToSetupYourProject() {
   const devEnvironment = useDevEnvironment();
+  const appOrigin = useAppOrigin();
   return (
     <>
-      <StepNumber stepNumber="1" title="Run your Next.js app" />
-      <StepContentContainer>
-        <Paragraph>
-          Ensure your Next.js app is running locally on port 3000.
-        </Paragraph>
-      </StepContentContainer>
-      <StepNumber stepNumber="2" title="Create a tunnel to your Next.js app" />
+      <StepNumber stepNumber="1" title="Run the CLI init command" />
       <StepContentContainer>
         <Paragraph spacing>
-          There are a few ways to do this, but we recommend using{" "}
-          <TextLink
-            href="https://trigger.dev/docs/documentation/guides/tunneling-localhost"
-            target="_blank"
-          >
-            ngrok
-          </TextLink>
-          . It’s free and easy to use and required to create a tunnel, making
-          your local machine accessible to the internet.
+          Run this CLI command in a terminal window from your Next.js project.
         </Paragraph>
-        <StepNumber stepNumber="a" title="Install ngrok" className="mb-2" />
-        <StepContentContainer>
-          <ClientTabs defaultValue="mac">
-            <ClientTabsList>
-              <ClientTabsTrigger value={"mac"}>Mac</ClientTabsTrigger>
-              <ClientTabsTrigger value={"windows"}>Windows</ClientTabsTrigger>
-            </ClientTabsList>
-            <ClientTabsContent value={"mac"}>
-              <ClipboardField
-                variant="primary/medium"
-                fullWidth={false}
-                value={`brew install ngrok/ngrok/ngrok`}
-              />
-            </ClientTabsContent>
-            <ClientTabsContent value={"windows"}>
-              <ClipboardField
-                variant="primary/medium"
-                fullWidth={false}
-                value={`choco install ngrok`}
-              />
-            </ClientTabsContent>
-          </ClientTabs>
-        </StepContentContainer>
-        <StepNumber stepNumber="b" title="Open a new terminal window/tab" />
-        <StepContentContainer>
-          <Paragraph spacing>You need to leave this running.</Paragraph>
-        </StepContentContainer>
-        <StepNumber stepNumber="c" title="Create an http tunnel at port 3000" />
-        <StepContentContainer>
-          <Paragraph spacing>
-            This creates a tunnel to your Next.js app.
-          </Paragraph>
-          <ClipboardField
-            variant="primary/medium"
-            fullWidth={false}
-            className="mb-4"
-            value={`ngrok http 3000`}
-          />
-        </StepContentContainer>
-        <StepNumber
-          stepNumber="d"
-          title={`Grab your "forwarding" URL from the ngrok output`}
-        />
-        <StepContentContainer>
-          <img src={ngrok} className="mt-2 w-full" />
-        </StepContentContainer>
-      </StepContentContainer>
-      <StepNumber stepNumber="3" title="Use the CLI" />
-      <StepContentContainer>
-        <Paragraph spacing>
-          Copy this CLI command into a new terminal window.{" "}
-        </Paragraph>
-
         <ClientTabs defaultValue="npm">
           <ClientTabsList>
             <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
@@ -102,42 +49,87 @@ export function HowToSetupYourProject() {
             <ClipboardField
               variant="primary/medium"
               className="mb-4"
-              secure="npx @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
-              value={`npx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
+              secure={`npx @trigger.dev/cli@latest init -k ••••••••• -t ${appOrigin}`}
+              value={`npx @trigger.dev/cli@latest init -k ${devEnvironment?.apiKey} -t ${appOrigin}`}
             />
           </ClientTabsContent>
           <ClientTabsContent value={"pnpm"}>
             <ClipboardField
               variant="primary/medium"
               className="mb-4"
-              secure="pnpm dlx @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
-              value={`pnpm dlx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
+              secure={`pnpm dlx @trigger.dev/cli@latest init -k ••••••••• -t ${appOrigin}`}
+              value={`pnpm dlx @trigger.dev/cli@latest init -k ${devEnvironment?.apiKey} -t ${appOrigin}`}
             />
           </ClientTabsContent>
           <ClientTabsContent value={"yarn"}>
             <ClipboardField
               variant="primary/medium"
               className="mb-4"
-              secure="yarn @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
-              value={`yarn @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
+              secure={`yarn @trigger.dev/cli@latest init -k ••••••••• -t ${appOrigin}`}
+              value={`yarn @trigger.dev/cli@latest init -k ${devEnvironment?.apiKey} -t ${appOrigin}`}
             />
           </ClientTabsContent>
         </ClientTabs>
-        <Paragraph spacing>
-          Use the "forwarding" URL from step 2d above to replace the -u
-          placeholder text.
+        <Paragraph spacing variant="small">
+          It will ask you for a "unique ID for your endpoint". You can use the
+          default by hitting enter.
         </Paragraph>
-        <img src={publicUrl} className="mb-4 mt-2 w-full" />
       </StepContentContainer>
-
-      <StepNumber stepNumber="4" title="Run the CLI" />
+      <StepNumber stepNumber="2" title="Run your Next.js app" />
+      <StepContentContainer>
+        <Paragraph>
+          Ensure your Next.js app is running locally on port 3000.
+        </Paragraph>
+      </StepContentContainer>
+      <StepNumber stepNumber="3" title="Run the CLI dev command" />
       <StepContentContainer>
         <Paragraph spacing>
-          It will add Trigger.dev to your existing Next.js project, setup a
-          route and give you an example file.
+          The CLI <InlineCode>dev</InlineCode> command allows the Trigger.dev
+          service to send messages to your Next.js site. This is required for
+          registering Jobs, triggering them and running Tasks. To achieve this
+          it creates a tunnel (using{" "}
+          <TextLink href="https://ngrok.com/">ngrok</TextLink>) so Trigger.dev
+          can send messages to your machine.
         </Paragraph>
+        <Paragraph spacing>
+          You should leave the <InlineCode>dev</InlineCode> command running when
+          you're developing.
+        </Paragraph>
+        <Paragraph spacing>
+          In a{" "}
+          <strong className="text-bright">new terminal window or tab</strong>{" "}
+          run:
+        </Paragraph>
+        <ClientTabs defaultValue="npm">
+          <ClientTabsList>
+            <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
+            <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
+            <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
+          </ClientTabsList>
+          <ClientTabsContent value={"npm"}>
+            <ClipboardField
+              variant="primary/medium"
+              className="mb-4"
+              value={`npx @trigger.dev/cli@latest dev`}
+            />
+          </ClientTabsContent>
+          <ClientTabsContent value={"pnpm"}>
+            <ClipboardField
+              variant="primary/medium"
+              className="mb-4"
+              value={`pnpm dlx @trigger.dev/cli@latest dev`}
+            />
+          </ClientTabsContent>
+          <ClientTabsContent value={"yarn"}>
+            <ClipboardField
+              variant="primary/medium"
+              className="mb-4"
+              value={`yarn @trigger.dev/cli@latest dev`}
+            />
+          </ClientTabsContent>
+        </ClientTabs>
       </StepContentContainer>
-      <StepNumber stepNumber="5" title="Check for Jobs" />
+      <StepNumber stepNumber="4" title="Check for Jobs" />
       <StepContentContainer>
         <Paragraph>
           Once you've run the CLI command, click Refresh to view your example
@@ -156,13 +148,100 @@ export function HowToSetupYourProject() {
   );
 }
 
+export function HowToRunYourJob() {
+  const organization = useOrganization();
+  const project = useProject();
+  const job = useJob();
+
+  return (
+    <>
+      <Callout variant="info" className="mb-6">
+        <Paragraph variant={"small"} className={variantClasses.info.textColor}>
+          Scheduled Triggers <strong>do not</strong> trigger Jobs in the DEV
+          Environment. When developing locally you should use the{" "}
+          <Link
+            to={jobTestPath(organization, project, job)}
+            className="underline underline-offset-2 transition hover:text-blue-100"
+          >
+            Test feature
+          </Link>{" "}
+          to trigger any scheduled Jobs.
+        </Paragraph>
+      </Callout>
+
+      <Paragraph spacing>There are two ways to run your Job:</Paragraph>
+
+      <StepNumber stepNumber="1" title="Trigger a test Run" />
+      <StepContentContainer>
+        <Paragraph spacing>
+          You can perform a Run with any payload you want, or use one of our
+          examples, on the test page.
+        </Paragraph>
+        <LinkButton
+          to={jobTestPath(organization, project, job)}
+          variant={"primary/small"}
+          LeadingIcon={"beaker"}
+          leadingIconClassName="text-bright"
+        >
+          Test
+        </LinkButton>
+      </StepContentContainer>
+
+      <StepNumber stepNumber="2" title="Trigger your Job for real" />
+      <StepContentContainer>
+        <Paragraph spacing>
+          Performing a real run depends on the type of Trigger your Job is
+          using.
+        </Paragraph>
+
+        <LinkButton
+          to="https://trigger.dev/docs/documentation/guides/running-jobs"
+          variant={"primary/small"}
+          LeadingIcon={"docs"}
+          leadingIconClassName="text-bright"
+        >
+          How to run a Job
+        </LinkButton>
+      </StepContentContainer>
+    </>
+  );
+}
+
 export function HowToRunATest() {
   return (
     <>
-      <StepNumber stepNumber="1" title="Step 1 title" />
+      <StepNumber
+        stepNumber="1"
+        title="Select an environment
+"
+      />
       <StepContentContainer>
-        <Paragraph>Content</Paragraph>
+        <Paragraph spacing>
+          Select the environment you’d like the test to run against.
+        </Paragraph>
+        <img src={selectEnvironment} className="mt-2 w-52" />
       </StepContentContainer>
+      <StepNumber stepNumber="2" title="Write your test payload" />
+      <StepContentContainer>
+        <Paragraph spacing>
+          Write your own payload specific to your Job. Some Triggers also
+          provide example payloads that you can select from. This will populate
+          the code editor below.
+        </Paragraph>
+        <img src={selectExample} className="mt-2 h-40" />
+      </StepContentContainer>
+      <StepNumber stepNumber="3" title="Run your test" />
+      <StepContentContainer>
+        <Paragraph spacing>
+          When you’re happy with the payload, click Run test.
+        </Paragraph>
+      </StepContentContainer>
+      <Callout
+        variant="docs"
+        to="https://trigger.dev/docs/documentation/guides/testing-jobs"
+      >
+        Learn more about running tests.
+      </Callout>
     </>
   );
 }
@@ -207,7 +286,7 @@ export function HowToConnectAnIntegration() {
       </StepContentContainer>
       <Callout
         variant={"docs"}
-        href="https://trigger.dev/docs/integrations/introduction"
+        to="https://trigger.dev/docs/integrations/introduction"
       >
         View the Integration docs page for more information on connecting an API
         using an Integration or other method.
@@ -216,13 +295,124 @@ export function HowToConnectAnIntegration() {
   );
 }
 
-export function HowToUseThisIntegration() {
+export function HowToUseThisIntegration({
+  integration,
+  help,
+  integrationClient,
+}: HelpPanelProps) {
   return (
     <>
-      <StepNumber stepNumber="1" title="Step 1 title" />
+      <StepNumber stepNumber="1" title="Install the package" />
       <StepContentContainer>
-        <Paragraph>Content</Paragraph>
+        <HelpInstall packageName={integration.packageName} />
       </StepContentContainer>
+      {help && (
+        <>
+          <StepNumber stepNumber="2" title="Create a Job" />
+          <StepContentContainer>
+            <HelpSamples
+              help={help}
+              integration={integration}
+              integrationClient={integrationClient}
+            />
+          </StepContentContainer>
+        </>
+      )}
+    </>
+  );
+}
+
+export function HowToUseApiKeysAndEndpoints() {
+  return (
+    <>
+      <Paragraph spacing>
+        Environments and Endpoints are used to connect your server to the
+        Trigger.dev platform.
+      </Paragraph>
+      <Header2 spacing>Environments</Header2>
+      <Paragraph spacing>
+        Each environment has an API Key associated with it. This API Key is used
+        to authenticate your Jobs with the Trigger.dev platform.
+      </Paragraph>
+      <Paragraph spacing>
+        The API Key you use for your{" "}
+        <TextLink to="https://trigger.dev/docs/documentation/concepts/client-adaptors">
+          Client
+        </TextLink>{" "}
+        is how we know which environment to run your code against:
+      </Paragraph>
+      <CodeBlock
+        showLineNumbers={false}
+        className="mb-4"
+        code={`export const client = new TriggerClient({
+  id: "nextjs-example",
+  //this environment variable should be set to your DEV API Key locally,
+  //and your PROD API Key in production
+  apiKey: process.env.TRIGGER_API_KEY!,
+});`}
+      />
+      <StepNumber
+        stepNumber="→"
+        title={
+          <span className="flex items-center gap-x-2">
+            <span>Development</span>
+            <EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />
+          </span>
+        }
+      />
+      <StepContentContainer>
+        <Paragraph>
+          The <InlineCode>DEV</InlineCode> environment should only be used for
+          local development. It’s where you can test your Jobs before deploying
+          them to servers.
+        </Paragraph>
+        <Callout variant="warning" className="my-2">
+          Scheduled Triggers do not trigger Jobs in the DEV Environment. When
+          you’re working locally you should use the Test feature to trigger any
+          scheduled Jobs.
+        </Callout>
+      </StepContentContainer>
+      <StepNumber
+        stepNumber="→"
+        title={
+          <span className="flex items-center gap-x-2">
+            <span>Production</span>
+            <EnvironmentLabel environment={{ type: "PRODUCTION" }} />
+          </span>
+        }
+      />
+      <StepContentContainer>
+        <Paragraph spacing>
+          The <InlineCode>PROD</InlineCode> environment is where your Jobs will
+          run in production. It’s where you can run your Jobs against real data.
+        </Paragraph>
+      </StepContentContainer>
+      <Header2 spacing>Endpoints</Header2>
+      <Paragraph spacing>
+        An Endpoint is a URL on your server that Trigger.dev can connect to.
+        This URL is used to register Jobs, start them and orchestrate runs and
+        retries.
+      </Paragraph>
+      <Paragraph spacing>
+        <InlineCode>DEV</InlineCode> has multiple endpoints associated with it –
+        one for each team member. This allows each team member to run their own
+        Jobs, without interfering with each other.
+      </Paragraph>
+      <Paragraph spacing>
+        All other environments have just a single endpoint (with a single URL)
+        associated with them.
+      </Paragraph>
+      <Header2 spacing>Deployment</Header2>
+      <Paragraph spacing>
+        Deployment uses Environments and Endpoints to connect your Jobs to the
+        Trigger.dev platform.
+      </Paragraph>
+      <Callout
+        variant="docs"
+        to="https://trigger.dev/docs/documentation/guides/deployment"
+      >
+        Read the deployment guide to learn more.
+      </Callout>
     </>
   );
 }

apps/webapp/app/components/integrations/ApiKeyHelp.tsx

@@ -1,20 +1,26 @@
-import {
-  ApiAuthenticationMethodApiKey,
-  Integration,
-} from "~/services/externalApis/types";
-import { Paragraph } from "../primitives/Paragraph";
-import { CodeBlock } from "../code/CodeBlock";
+import { Help, Integration } from "~/services/externalApis/types";
 import { InlineCode } from "../code/InlineCode";
-import { Header1, Header2 } from "../primitives/Headers";
-import { ClipboardField } from "../primitives/ClipboardField";
+import { Header1 } from "../primitives/Headers";
+import { Paragraph } from "../primitives/Paragraph";
+import { HelpInstall } from "./HelpInstall";
+import { HelpSamples, ReplacementData } from "./HelpSamples";
+
+export type HelpPanelIntegration = Pick<
+  Integration,
+  "name" | "packageName" | "identifier"
+>;
+
+export type HelpPanelProps = {
+  integration: HelpPanelIntegration;
+  help?: Help;
+  integrationClient?: ReplacementData;
+};
 
 export function ApiKeyHelp({
   integration,
-  apiAuth,
-}: {
-  integration: Integration;
-  apiAuth: ApiAuthenticationMethodApiKey;
-}) {
+  help,
+  integrationClient,
+}: HelpPanelProps) {
   return (
     <div className="mt-4">
       <Header1 className="mb-2">
@@ -28,21 +34,14 @@ export function ApiKeyHelp({
         First install the <InlineCode>{integration.packageName}</InlineCode>{" "}
         package using your preferred package manager. For example:
       </Paragraph>
-      <ClipboardField
-        variant="secondary/medium"
-        value={`npm install ${integration.packageName}`}
-        className="mb-4"
-      />
-      {apiAuth.help.samples.map((sample, i) => (
-        <div key={i}>
-          <Paragraph spacing>{sample.title}</Paragraph>
-          <CodeBlock
-            code={sample.code}
-            className="mb-4"
-            highlightedRanges={sample.highlight}
-          />
-        </div>
-      ))}
+      <HelpInstall packageName={integration.packageName} />
+      {help && (
+        <HelpSamples
+          help={help}
+          integration={integration}
+          integrationClient={integrationClient}
+        />
+      )}
     </div>
   );
 }

apps/webapp/app/components/integrations/ConnectToIntegrationSheet.tsx

@@ -5,7 +5,7 @@ import {
 } from "~/services/externalApis/types";
 import { docsIntegrationPath } from "~/utils/pathBuilder";
 import { LinkButton } from "../primitives/Buttons";
-import { Header2 } from "../primitives/Headers";
+import { Header1, Header2 } from "../primitives/Headers";
 import { NamedIconInBox } from "../primitives/NamedIcon";
 import { Paragraph } from "../primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "../primitives/RadioButton";
@@ -50,7 +50,7 @@ export function ConnectToIntegrationSheet({
         <SheetHeader>
           <NamedIconInBox name={integration.identifier} className="h-9 w-9" />
           <div className="grow">
-            <Header2>{integration.name}</Header2>
+            <Header1>{integration.name}</Header1>
             {integration.description && (
               <Paragraph variant="small">{integration.description}</Paragraph>
             )}
@@ -129,12 +129,7 @@ function SelectedIntegrationMethod({
     case "apikey":
       const apiAuth = authMethods.find((a) => a.type === "apikey");
       if (!apiAuth) return null;
-      return (
-        <ApiKeyHelp
-          integration={integration}
-          apiAuth={apiAuth as ApiAuthenticationMethodApiKey}
-        />
-      );
+      return <ApiKeyHelp integration={integration} help={apiAuth.help} />;
     case "oauth2":
       return (
         <SelectOAuthMethod

apps/webapp/app/components/integrations/HelpInstall.tsx

@@ -0,0 +1,45 @@
+import { Integration } from "~/services/externalApis/types";
+import { InlineCode } from "../code/InlineCode";
+import {
+  ClientTabs,
+  ClientTabsList,
+  ClientTabsTrigger,
+  ClientTabsContent,
+} from "../primitives/ClientTabs";
+import { ClipboardField } from "../primitives/ClipboardField";
+import { Paragraph } from "../primitives/Paragraph";
+
+export function HelpInstall({ packageName }: { packageName: string }) {
+  return (
+    <>
+      <ClientTabs defaultValue="npm">
+        <ClientTabsList>
+          <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
+          <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
+          <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
+        </ClientTabsList>
+        <ClientTabsContent value={"npm"}>
+          <ClipboardField
+            variant="secondary/medium"
+            value={`npm install ${packageName}`}
+            className="mb-4"
+          />
+        </ClientTabsContent>
+        <ClientTabsContent value={"pnpm"}>
+          <ClipboardField
+            variant="secondary/medium"
+            value={`pnpm install ${packageName}`}
+            className="mb-4"
+          />
+        </ClientTabsContent>
+        <ClientTabsContent value={"yarn"}>
+          <ClipboardField
+            variant="secondary/medium"
+            value={`yarn add ${packageName}`}
+            className="mb-4"
+          />
+        </ClientTabsContent>
+      </ClientTabs>
+    </>
+  );
+}

apps/webapp/app/components/integrations/HelpSamples.tsx

@@ -0,0 +1,62 @@
+import { Integration } from "~/services/externalApis/types";
+import { HelpPanelIntegration, HelpPanelProps } from "./ApiKeyHelp";
+import { Paragraph } from "../primitives/Paragraph";
+import { CodeBlock } from "../code/CodeBlock";
+
+export type ReplacementData = {
+  slug: string;
+};
+
+export function HelpSamples({
+  help,
+  integrationClient,
+  integration,
+}: HelpPanelProps) {
+  return (
+    <>
+      {help &&
+        help.samples.map((sample, i) => {
+          const code = runReplacers(
+            sample.code,
+            integrationClient,
+            integration
+          );
+          return (
+            <div key={i}>
+              <Paragraph spacing>{sample.title}</Paragraph>
+              <CodeBlock
+                code={code}
+                className="mb-4"
+                highlightedRanges={sample.highlight}
+              />
+            </div>
+          );
+        })}
+    </>
+  );
+}
+
+const replacements = [
+  {
+    match: /__SLUG__/g,
+    replacement: (
+      data: ReplacementData | undefined,
+      integration: HelpPanelIntegration
+    ) => {
+      if (data) return data.slug;
+      return integration.identifier;
+    },
+  },
+];
+
+function runReplacers(
+  code: string,
+  replacementData: ReplacementData | undefined,
+  integration: HelpPanelIntegration
+) {
+  replacements.forEach((r) => {
+    code = code.replace(r.match, r.replacement(replacementData, integration));
+  });
+
+  return code;
+}

apps/webapp/app/components/integrations/IntegrationWithMissingFieldSheet.tsx

@@ -0,0 +1,63 @@
+import { docsIntegrationPath } from "~/utils/pathBuilder";
+import { LinkButton } from "../primitives/Buttons";
+import { Header1 } from "../primitives/Headers";
+import { NamedIconInBox } from "../primitives/NamedIcon";
+import { Paragraph } from "../primitives/Paragraph";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from "../primitives/Sheet";
+import { SelectOAuthMethod } from "./SelectOAuthMethod";
+import { Integration } from "~/services/externalApis/types";
+import { Client } from "~/presenters/IntegrationsPresenter.server";
+
+export function IntegrationWithMissingFieldSheet({
+  integration,
+  organizationId,
+  button,
+  callbackUrl,
+  existingIntegration,
+  className,
+}: {
+  integration: Integration;
+  organizationId: string;
+  button: React.ReactNode;
+  callbackUrl: string;
+  existingIntegration: Client;
+  className?: string;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger className={className}>{button}</SheetTrigger>
+      <SheetContent size="lg" className="relative">
+        <SheetHeader>
+          <NamedIconInBox name={integration.identifier} className="h-9 w-9" />
+          <div className="grow">
+            <Header1>{integration.name}</Header1>
+            {integration.description && (
+              <Paragraph variant="small">{integration.description}</Paragraph>
+            )}
+          </div>
+          <LinkButton
+            to={docsIntegrationPath(integration.identifier)}
+            variant="secondary/small"
+            LeadingIcon="docs"
+          >
+            View docs
+          </LinkButton>
+        </SheetHeader>
+        <SheetBody>
+          <SelectOAuthMethod
+            integration={integration}
+            organizationId={organizationId}
+            callbackUrl={callbackUrl}
+            existingIntegration={existingIntegration}
+          />
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/webapp/app/components/integrations/NoIntegrationSheet.tsx

@@ -41,7 +41,7 @@ export function NoIntegrationSheet({
             <div className="flex items-center gap-1">
               <CheckIcon className="h-4 w-4 text-green-500" />
               <Paragraph variant="small">
-                We'll let you know when the integration is available.
+                We'll let you know when the Integration is available.
               </Paragraph>
             </div>
           ) : (
@@ -56,16 +56,16 @@ export function NoIntegrationSheet({
               >
                 {isLoading
                   ? "Saving…"
-                  : `I want an integration for ${api.name}`}
+                  : `I want an Integration for ${api.name}`}
               </Button>
             </fetcher.Form>
           )}
         </SheetHeader>
         <SheetBody>
           <Callout variant="info">
-            We don’t have an integration for the {api.name} API yet but you can
+            We don’t have an Integration for the {api.name} API yet but you can
             request one by clicking the button above. In the meantime, connect
-            to {api.name} using the methods below.
+            to {api.name} using one of the methods below.
           </Callout>
           <CustomHelp name={api.name} />
         </SheetBody>

apps/webapp/app/components/integrations/SelectOAuthMethod.tsx

@@ -8,12 +8,16 @@ import type { ConnectionType } from "@trigger.dev/database";
 import { Header2 } from "../primitives/Headers";
 import { ConnectToOAuthForm } from "./ConnectToOAuthForm";
 import { Paragraph } from "../primitives/Paragraph";
+import { Client } from "~/presenters/IntegrationsPresenter.server";
+import { UpdateOAuthForm } from "./UpdateOAuthForm";
 
 export function SelectOAuthMethod({
   integration,
   organizationId,
-  callbackUrl
+  callbackUrl,
+  existingIntegration,
 }: {
+  existingIntegration?: Client;
   integration: Integration;
   organizationId: string;
   callbackUrl: string;
@@ -91,14 +95,26 @@ export function SelectOAuthMethod({
         connectionType &&
         oAuthKey &&
         (connectionType === "DEVELOPER" ? (
-          <ConnectToOAuthForm
-            integration={integration}
-            authMethod={selectedOAuthMethod}
-            authMethodKey={oAuthKey}
-            organizationId={organizationId}
-            clientType={connectionType}
-            callbackUrl={callbackUrl}
-          />
+          existingIntegration ? (
+            <UpdateOAuthForm
+              existingIntegration={existingIntegration}
+              integration={integration}
+              authMethod={selectedOAuthMethod}
+              authMethodKey={oAuthKey}
+              organizationId={organizationId}
+              clientType={connectionType}
+              callbackUrl={callbackUrl}
+            />
+          ) : (
+            <ConnectToOAuthForm
+              integration={integration}
+              authMethod={selectedOAuthMethod}
+              authMethodKey={oAuthKey}
+              organizationId={organizationId}
+              clientType={connectionType}
+              callbackUrl={callbackUrl}
+            />
+          )
         ) : (
           <>
             <Header2 className="mb-1 mt-4">User OAuth coming soon</Header2>

apps/webapp/app/components/integrations/UpdateOAuthForm.tsx

@@ -0,0 +1,263 @@
+import { conform, useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { useFetcher, useLocation, useNavigation } from "@remix-run/react";
+import type { ConnectionType } from "@trigger.dev/database";
+import { useState } from "react";
+import simplur from "simplur";
+import { useFeatures } from "~/hooks/useFeatures";
+import { useTextFilter } from "~/hooks/useTextFilter";
+import {
+  ApiAuthenticationMethodOAuth2,
+  Integration,
+  Scope,
+} from "~/services/externalApis/types";
+import { cn } from "~/utils/cn";
+import { CodeBlock } from "../code/CodeBlock";
+import { Button } from "../primitives/Buttons";
+import { Checkbox } from "../primitives/Checkbox";
+import { Fieldset } from "../primitives/Fieldset";
+import { FormError } from "../primitives/FormError";
+import { Header2, Header3 } from "../primitives/Headers";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Label } from "../primitives/Label";
+import { Paragraph } from "../primitives/Paragraph";
+import { Client } from "~/presenters/IntegrationsPresenter.server";
+import { schema } from "~/routes/resources.connection.$organizationId.oauth2.$integrationId";
+
+export type Status = "loading" | "idle";
+
+export function UpdateOAuthForm({
+  existingIntegration,
+  integration,
+  authMethod,
+  authMethodKey,
+  organizationId,
+  clientType,
+  callbackUrl,
+}: {
+  existingIntegration: Client;
+  integration: Integration;
+  authMethod: ApiAuthenticationMethodOAuth2;
+  authMethodKey: string;
+  organizationId: string;
+  clientType: ConnectionType;
+  callbackUrl: string;
+}) {
+  const transition = useNavigation();
+  const fetcher = useFetcher();
+  const { isManagedCloud } = useFeatures();
+
+  const [
+    form,
+    { title, scopes, hasCustomClient, customClientId, customClientSecret },
+  ] = useForm({
+    lastSubmission: fetcher.data,
+    onValidate({ formData }) {
+      return parse(formData, {
+        schema,
+      });
+    },
+  });
+
+  const location = useLocation();
+
+  const [selectedScopes, setSelectedScopes] = useState<Set<string>>(
+    new Set(
+      authMethod.scopes.filter((s) => s.defaultChecked).map((s) => s.name)
+    )
+  );
+
+  const requiresCustomOAuthApp = clientType === "EXTERNAL" || !isManagedCloud;
+
+  const [useMyOAuthApp, setUseMyOAuthApp] = useState(requiresCustomOAuthApp);
+
+  const { filterText, setFilterText, filteredItems } = useTextFilter<Scope>({
+    items: authMethod.scopes,
+    filter: (scope, text) => {
+      if (scope.name.toLowerCase().includes(text.toLowerCase())) return true;
+      if (
+        scope.description &&
+        scope.description.toLowerCase().includes(text.toLowerCase())
+      )
+        return true;
+
+      return false;
+    },
+  });
+
+  return (
+    <fetcher.Form
+      method="put"
+      action={`/resources/connection/${organizationId}/oauth2/${existingIntegration.id}`}
+      {...form.props}
+      className="flex h-full max-h-full flex-grow flex-col"
+    >
+      <Fieldset>
+        <input type="hidden" name="id" value={existingIntegration.id} />
+        <input
+          type="hidden"
+          name="integrationIdentifier"
+          value={integration.identifier}
+        />
+        <input
+          type="hidden"
+          name="integrationAuthMethod"
+          value={authMethodKey}
+        />
+        <input type="hidden" name="redirectTo" value={location.pathname} />
+        <InputGroup>
+          <FormError>{form.error}</FormError>
+        </InputGroup>
+        <InputGroup fullWidth>
+          <Label variant="large">ID</Label>
+          <Paragraph variant="small" className="mb-2">
+            {existingIntegration.slug}
+          </Paragraph>
+        </InputGroup>
+        <InputGroup fullWidth>
+          <Label variant="large">Name</Label>
+          <Input
+            type="text"
+            fullWidth
+            {...conform.input(title)}
+            defaultValue={existingIntegration.title ?? undefined}
+            placeholder={`e.g. Personal ${integration.name}`}
+          />
+          <FormError>{title.error}</FormError>
+        </InputGroup>
+        <input type="hidden" name="clientType" value={clientType} />
+        <div>
+          <Header2>Use my OAuth App</Header2>
+          <Paragraph variant="small" className="mb-2">
+            To use your own OAuth app, check the option below and insert the
+            details.
+          </Paragraph>
+          <Checkbox
+            id="hasCustomClient"
+            label="Use my OAuth App"
+            variant="simple/small"
+            disabled={requiresCustomOAuthApp}
+            onChange={(checked) => setUseMyOAuthApp(checked)}
+            {...conform.input(hasCustomClient, { type: "checkbox" })}
+            defaultChecked={requiresCustomOAuthApp}
+          />
+          {useMyOAuthApp && (
+            <div className="ml-6 mt-2">
+              <Paragraph variant="small" className="mb-2">
+                Set the callback url to{" "}
+                <CodeBlock code={callbackUrl} showLineNumbers={false} />
+              </Paragraph>
+              <div className="flex flex-col gap-2">
+                <div className="flex gap-2">
+                  <InputGroup fullWidth>
+                    <Label variant="small">Client ID</Label>
+                    <Input
+                      fullWidth
+                      {...conform.input(customClientId, { type: "text" })}
+                    />
+                  </InputGroup>
+                  <InputGroup fullWidth>
+                    <Label variant="small">Client secret</Label>
+                    <Input
+                      fullWidth
+                      {...conform.input(customClientSecret, {
+                        type: "password",
+                      })}
+                    />
+                  </InputGroup>
+                </div>
+                <FormError>{customClientId.error}</FormError>
+              </div>
+            </div>
+          )}
+        </div>
+        <div>
+          <Header2>Scopes</Header2>
+          <Paragraph variant="small" className="mb-4">
+            Select the scopes you want to grant to {integration.name} in order
+            for it to access your data. Note: If you try and perform an action
+            in a Job that requires a scope you haven’t granted, that task will
+            fail.
+          </Paragraph>
+          {/* <Header3 className="mb-2">
+                  Select from popular scope collections
+                </Header3>
+                <fieldset>
+                  <Checkbox
+                    id="allScopes"
+                    label="Select all"
+                    variant="button/small"
+                  />
+                </fieldset> */}
+          <div className="mb-2 mt-4 flex items-center justify-between">
+            <Header3>Select {integration.name} scopes</Header3>
+            <Paragraph variant="small" className="text-slate-500">
+              {simplur`${selectedScopes.size} scope[|s] selected`}
+            </Paragraph>
+          </div>
+          <Input
+            placeholder="Search scopes"
+            className="mb-2"
+            variant="medium"
+            icon="search"
+            fullWidth={true}
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+          />
+          <div className="mb-28 flex flex-col gap-y-0.5 overflow-hidden rounded-md">
+            {filteredItems.length === 0 && (
+              <Paragraph variant="small" className="p-4">
+                No scopes match {filterText}. Try a different search query.
+              </Paragraph>
+            )}
+            {authMethod.scopes.map((s) => {
+              return (
+                <Checkbox
+                  key={s.name}
+                  id={s.name}
+                  value={s.name}
+                  name="scopes"
+                  label={s.name}
+                  defaultChecked={s.defaultChecked ?? false}
+                  badges={s.annotations?.map((a) => a.label)}
+                  description={s.description}
+                  variant="description"
+                  className={cn(
+                    filteredItems.find((f) => f.name === s.name) ? "" : "hidden"
+                  )}
+                  onChange={(isChecked) => {
+                    if (isChecked) {
+                      setSelectedScopes((selected) => {
+                        selected.add(s.name);
+                        return new Set(selected);
+                      });
+                    } else {
+                      setSelectedScopes((selected) => {
+                        selected.delete(s.name);
+                        return new Set(selected);
+                      });
+                    }
+                  }}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </Fieldset>
+
+      <div className="absolute bottom-0 left-0 flex w-full items-center justify-end gap-x-4 rounded-b-md border-t border-slate-800 bg-midnight-900 p-4">
+        <FormError>{scopes.error}</FormError>
+        <Button
+          type="submit"
+          className="flex gap-2"
+          disabled={transition.state !== "idle"}
+          variant="primary/medium"
+          LeadingIcon={integration.identifier}
+        >
+          Connect to {integration.name}
+        </Button>
+      </div>
+    </fetcher.Form>
+  );
+}

apps/webapp/app/components/jobs/JobsTable.tsx

@@ -18,6 +18,7 @@ import { runStatusTitle } from "../runs/RunStatuses";
 import { ProjectJob, useProject } from "~/hooks/useProject";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { JobRunStatus } from "~/models/job.server";
+import { cn } from "~/utils/cn";
 
 export function JobsTable({
   jobs,
@@ -46,7 +47,12 @@ export function JobsTable({
           jobs.map((job) => {
             const path = jobPath(organization, project, job);
             return (
-              <TableRow key={job.id}>
+              <TableRow
+                key={job.id}
+                className={cn(
+                  job.hasIntegrationsRequiringAction && "bg-rose-500/30"
+                )}
+              >
                 <TableCell to={path}>
                   <span className="flex items-center gap-2">
                     <NamedIcon name={job.event.icon} className="h-8 w-8" />
@@ -79,12 +85,30 @@ export function JobsTable({
                     <SimpleTooltip
                       key={integration.key}
                       button={
-                        <NamedIcon
-                          name={integration.icon}
-                          className="h-6 w-6"
-                        />
+                        <div className="relative">
+                          <NamedIcon
+                            name={integration.icon}
+                            className="h-6 w-6"
+                          />
+                          {integration.setupStatus === "MISSING_FIELDS" && (
+                            <NamedIcon
+                              name="error"
+                              className="absolute -left-1 -top-1 h-4 w-4"
+                            />
+                          )}
+                        </div>
+                      }
+                      content={
+                        <div>
+                          <p className="mb-1 text-rose-400">
+                            {integration.setupStatus === "MISSING_FIELDS" &&
+                              "This integration requires configuration"}
+                          </p>
+                          <p>
+                            {integration.title}: {integration.key}
+                          </p>
+                        </div>
                       }
-                      content={`${integration.title}: ${integration.key}`}
                     />
                   ))}
                 </TableCell>
@@ -126,10 +150,9 @@ export function JobsTable({
                         </span>
                       }
                       value={
-                        <DateTime
-                          date={job.lastRun.createdAt}
-                          className={classForJobStatus(job.lastRun.status)}
-                        />
+                        <span className={classForJobStatus(job.lastRun.status)}>
+                          <DateTime date={job.lastRun.createdAt} />
+                        </span>
                       }
                     />
                   ) : (

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

@@ -1,211 +1,29 @@
-import { useMatches } from "@remix-run/react";
-import { Fragment } from "react";
-import {
-  useIntegrationClient,
-  useOptionalIntegrationClient,
-} from "~/hooks/useIntegrationClient";
-import { useJob, useOptionalJob } from "~/hooks/useJob";
-import {
-  useOptionalOrganization,
-  useOrganization,
-} from "~/hooks/useOrganizations";
-import { useOptionalProject, useProject } from "~/hooks/useProject";
-import { useOptionalRun, useRun } from "~/hooks/useRun";
-import {
-  integrationClientConnectionsPath,
-  integrationClientPath,
-  integrationClientScopesPath,
-  jobPath,
-  jobTestPath,
-  projectEnvironmentsPath,
-  projectIntegrationsPath,
-  projectPath,
-  runDashboardPath,
-} from "~/utils/pathBuilder";
+import { RouteMatch, useMatches } from "@remix-run/react";
+import { Fragment, ReactNode } from "react";
 import { BreadcrumbIcon } from "../primitives/BreadcrumbIcon";
-import { JobsMenu } from "./JobsMenu";
-import { BreadcrumbLink } from "./NavBar";
-import { ProjectsMenu } from "./ProjectsMenu";
 
-export type Breadcrumb = {
-  slug:
-    | "projects"
-    | "jobs"
-    | "integrations"
-    | "integration"
-    | "integration-job"
-    | "integration-connections"
-    | "integration-scopes"
-    | "environments"
-    | "job"
-    | "test"
-    | "runs"
-    | "run";
-  link?: {
-    to: string;
-    title: string;
-  };
-};
-
-function useBreadcrumbs(): Breadcrumb[] {
-  const matches = useMatches();
-
-  return matches
-    .filter((match) => match.handle)
-    .filter((match) => match.handle!.breadcrumb)
-    .map((match) => match.handle!.breadcrumb as Breadcrumb);
-}
+export type BreadcrumbItem = (
+  match: RouteMatch,
+  allMatches: RouteMatch[]
+) => ReactNode;
 
 export function Breadcrumb() {
-  const breadcrumbs = useBreadcrumbs();
-  const organization = useOptionalOrganization();
-  const project = useOptionalProject();
-  const job = useOptionalJob();
-  const run = useOptionalRun();
-  const client = useOptionalIntegrationClient();
+  const matches = useMatches();
 
   return (
     <div className="hidden items-center md:flex">
-      {breadcrumbs.map((breadcrumb, index) => (
-        <Fragment key={breadcrumb.slug}>
-          <BreadcrumbIcon />
-          <BreadcrumbItem
-            breadcrumb={breadcrumb}
-            organization={organization}
-            project={project}
-            job={job}
-            run={run}
-            client={client}
-          />
-        </Fragment>
-      ))}
+      {matches.map((match) => {
+        if (!match.handle || !match.handle.breadcrumb) return null;
+
+        const breadcrumb = match.handle.breadcrumb as BreadcrumbItem;
+
+        return (
+          <Fragment key={match.id}>
+            <BreadcrumbIcon />
+            {breadcrumb(match, matches)}
+          </Fragment>
+        );
+      })}
     </div>
   );
 }
-
-function BreadcrumbItem({
-  breadcrumb,
-  organization,
-  project,
-  job,
-  run,
-  client,
-}: {
-  breadcrumb: Breadcrumb;
-  organization?: ReturnType<typeof useOrganization>;
-  project?: ReturnType<typeof useProject>;
-  job?: ReturnType<typeof useJob>;
-  run?: ReturnType<typeof useRun>;
-  client?: ReturnType<typeof useIntegrationClient>;
-}) {
-  switch (breadcrumb.slug) {
-    case "projects":
-      return <ProjectsMenu key={breadcrumb.slug} />;
-    case "jobs":
-      return (
-        <BreadcrumbLink
-          key={breadcrumb.slug}
-          to={projectPath(organization!, project!)}
-          title="Jobs"
-        />
-      );
-    case "environments":
-      return (
-        <BreadcrumbLink
-          key={breadcrumb.slug}
-          to={projectEnvironmentsPath(organization!, project!)}
-          title="Environments"
-        />
-      );
-    case "integrations":
-      return (
-        <BreadcrumbLink
-          key={breadcrumb.slug}
-          to={projectIntegrationsPath(organization!, project!)}
-          title="Integrations"
-        />
-      );
-    case "integration":
-      return (
-        <Fragment key={breadcrumb.slug}>
-          <BreadcrumbLink
-            to={projectIntegrationsPath(organization!, project!)}
-            title="Integrations"
-          />
-          <BreadcrumbIcon />
-          <BreadcrumbLink
-            to={integrationClientPath(organization!, project!, client!)}
-            title={client!.title}
-          />
-        </Fragment>
-      );
-    case "integration-job":
-      return (
-        <BreadcrumbLink
-          to={integrationClientPath(organization!, project!, client!)}
-          title={"Jobs"}
-        />
-      );
-    case "integration-connections":
-      return (
-        <BreadcrumbLink
-          to={integrationClientConnectionsPath(
-            organization!,
-            project!,
-            client!
-          )}
-          title={"Connections"}
-        />
-      );
-    case "integration-scopes":
-      return (
-        <BreadcrumbLink
-          to={integrationClientScopesPath(organization!, project!, client!)}
-          title={"Scopes"}
-        />
-      );
-    case "job":
-      return (
-        <Fragment key={breadcrumb.slug}>
-          <BreadcrumbLink
-            to={projectPath(organization!, project!)}
-            title="Jobs"
-          />
-          <BreadcrumbIcon />
-          <JobsMenu key={breadcrumb.slug} />
-        </Fragment>
-      );
-    case "test":
-      return (
-        <BreadcrumbLink
-          key={breadcrumb.slug}
-          to={jobTestPath(organization!, project!, job!)}
-          title="Test"
-        />
-      );
-    case "runs":
-      return (
-        <BreadcrumbLink
-          key={breadcrumb.slug}
-          to={jobPath(organization!, project!, job!)}
-          title="Runs"
-        />
-      );
-    case "run":
-      return (
-        <Fragment key={breadcrumb.slug}>
-          <BreadcrumbLink
-            to={jobPath(organization!, project!, job!)}
-            title="Runs"
-          />
-          <BreadcrumbIcon />
-          <BreadcrumbLink
-            to={runDashboardPath(organization!, project!, job!, run!)}
-            title={`Run #${run!.number}`}
-          />
-        </Fragment>
-      );
-  }
-
-  return <span className="text-red-500">{breadcrumb.slug}</span>;
-}

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

@@ -1,26 +1,24 @@
+import { Link, RouteMatch } from "@remix-run/react";
 import { useState } from "react";
 import { useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { cn } from "~/utils/cn";
 import { jobPath } from "~/utils/pathBuilder";
-import { IconNames, NamedIcon } from "../primitives/NamedIcon";
+import { LabelValueStack } from "../primitives/LabelValueStack";
+import { NamedIcon } from "../primitives/NamedIcon";
 import {
   Popover,
   PopoverArrowTrigger,
   PopoverContent,
-  PopoverMenuItem,
   PopoverSectionHeader,
 } from "../primitives/Popover";
-import { LabelValueStack } from "../primitives/LabelValueStack";
-import { LinkButton } from "../primitives/Buttons";
-import { Link } from "@remix-run/react";
-import { cn } from "~/utils/cn";
 
-export function JobsMenu() {
+export function JobsMenu({ matches }: { matches: RouteMatch[] }) {
   const [isOpen, setIsOpen] = useState(false);
-  const organization = useOrganization();
-  const project = useProject();
-  const currentJob = useJob();
+  const organization = useOrganization(matches);
+  const project = useProject(matches);
+  const currentJob = useJob(matches);
 
   return (
     <>
@@ -29,7 +27,7 @@ export function JobsMenu() {
           {currentJob?.title ?? "Select a job"}
         </PopoverArrowTrigger>
         <PopoverContent
-          className="w-80 overflow-y-auto p-0"
+          className="min-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
           align="start"
           collisionPadding={20}
         >
@@ -42,11 +40,11 @@ export function JobsMenu() {
                   key={job.id}
                   to={jobPath(organization, project, job)}
                   className={cn(
-                    "flex w-full items-center gap-2 rounded-md p-2",
+                    "flex w-full items-center gap-2 rounded-md p-2 transition hover:bg-slate-800",
                     isSelected && "bg-slate-750 group-hover:bg-slate-750"
                   )}
                 >
-                  <NamedIcon name={job.event.icon} className="h-6 w-6" />
+                  <NamedIcon name={job.event.icon} className="h-8 w-8" />
                   <LabelValueStack
                     label={job.title}
                     value={job.slug}

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

@@ -11,7 +11,7 @@ import { docsRoot } from "~/utils/pathBuilder";
 
 export function NavBar() {
   return (
-    <div className="z-50 flex w-full items-center justify-between gap-2 border-b border-divide py-1 pl-2 pr-2.5">
+    <div className="z-50 flex w-full items-center justify-between gap-2 border-b border-divide py-1 pl-1 pr-2.5">
       <div className="flex gap-0.5">
         <Link to="/" className="p-2">
           <LogoIcon className="h-5 w-5" />

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

@@ -1,10 +1,10 @@
 import { useMatches } from "@remix-run/react";
 import { motion } from "framer-motion";
-import invariant from "tiny-invariant";
-import { useJob, useOptionalJob } from "~/hooks/useJob";
+import { useOptionalJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
+import { Handle } from "~/utils/handle";
 import {
   accountPath,
   organizationBillingPath,
@@ -12,12 +12,12 @@ import {
   projectEnvironmentsPath,
   projectIntegrationsPath,
   projectPath,
+  projectTriggersPath,
 } from "~/utils/pathBuilder";
-import { NavLinkButton } from "../primitives/Buttons";
-import type { IconNames } from "../primitives/NamedIcon";
-import { SimpleTooltip } from "../primitives/Tooltip";
 import { UserProfilePhoto } from "../UserProfilePhoto";
-import { useOptionalIntegrationClient } from "~/hooks/useIntegrationClient";
+import { NavLinkButton } from "../primitives/Buttons";
+import { NamedIcon, type IconNames } from "../primitives/NamedIcon";
+import { SimpleTooltip } from "../primitives/Tooltip";
 
 export function SideMenuContainer({ children }: { children: React.ReactNode }) {
   return (
@@ -46,14 +46,15 @@ export function ProjectSideMenu() {
   const project = useProject();
   const matches = useMatches();
 
-  //we collapse the menu if we're in a job or an integration
-  const job = useOptionalJob();
-  const client = useOptionalIntegrationClient();
-  const isCollapsed = job !== undefined || client !== undefined;
+  //the deepest route `handle` determines if the menu is expanded
+  const deepestMatch = matches.at(-1);
+  const handle = deepestMatch?.handle as Handle;
+  const isCollapsed = handle?.expandSidebar ? !handle.expandSidebar : true;
 
+  const job = useOptionalJob();
   const jobsActive =
     job !== undefined ||
-    matches.at(-1)?.id ===
+    deepestMatch?.id ===
       "routes/_app.orgs.$organizationSlug.projects.$projectParam._index";
 
   return (
@@ -72,18 +73,30 @@ export function ProjectSideMenu() {
           to={projectPath(organization, project)}
           isCollapsed={isCollapsed}
           forceActive={jobsActive}
+          data-action="jobs"
         />
         <SideMenuItem
           name="Integrations"
           icon="integration"
           to={projectIntegrationsPath(organization, project)}
           isCollapsed={isCollapsed}
+          hasWarning={project.hasUnconfiguredIntegrations}
+          data-action="integrations"
+        />
+        <SideMenuItem
+          name="Triggers"
+          icon="trigger"
+          to={projectTriggersPath(organization, project)}
+          isCollapsed={isCollapsed}
+          hasWarning={project.hasInactiveExternalTriggers}
+          data-action="triggers"
         />
         <SideMenuItem
           name="Environments & API Keys"
           icon="environment"
           to={projectEnvironmentsPath(organization, project)}
           isCollapsed={isCollapsed}
+          data-action="environments & api keys"
         />
       </div>
       <div className="flex flex-col">
@@ -92,18 +105,21 @@ export function ProjectSideMenu() {
           icon="team"
           to={organizationTeamPath(organization)}
           isCollapsed={isCollapsed}
+          data-action="team"
         />
         <SideMenuItem
           name="Usage & Billing"
           icon="billing"
           to={organizationBillingPath(organization)}
           isCollapsed={isCollapsed}
+          data-action="usage & billing"
         />
         <SideMenuItem
           name="Account"
           icon={UserProfilePhoto}
           to={accountPath()}
           isCollapsed={isCollapsed}
+          data-action="account"
         />
       </div>
     </motion.div>
@@ -125,11 +141,13 @@ function SideMenuItem({
   to,
   isCollapsed,
   forceActive,
+  hasWarning = false,
 }: {
   icon: IconNames | React.ComponentType<any>;
   name: string;
   to: string;
   isCollapsed: boolean;
+  hasWarning?: boolean;
   forceActive?: boolean;
 }) {
   return (
@@ -147,6 +165,7 @@ function SideMenuItem({
               isActive = forceActive;
             }
             return cn(
+              "relative",
               isActive
                 ? "bg-slate-800 text-bright group-hover:bg-slate-800"
                 : "text-dimmed group-hover:bg-slate-850 group-hover:text-bright"
@@ -161,6 +180,9 @@ function SideMenuItem({
           >
             {name}
           </motion.span>
+          {hasWarning && (
+            <NamedIcon name="error" className="absolute left-1 top-1 h-4 w-4" />
+          )}
         </NavLinkButton>
       }
       content={name}

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

@@ -1,9 +1,10 @@
+import { RouteMatch } from "@remix-run/react";
 import { Fragment, useState } from "react";
 import {
   useIsNewOrganizationPage,
   useOrganizations,
 } from "~/hooks/useOrganizations";
-import { useOptionalProject, useProject } from "~/hooks/useProject";
+import { useOptionalProject } from "~/hooks/useProject";
 import {
   newOrganizationPath,
   newProjectPath,
@@ -17,11 +18,11 @@ import {
   PopoverSectionHeader,
 } from "../primitives/Popover";
 
-export function ProjectsMenu() {
+export function ProjectsMenu({ matches }: { matches: RouteMatch[] }) {
   const [isOpen, setIsOpen] = useState(false);
-  const organizations = useOrganizations();
-  const isNewOrgPage = useIsNewOrganizationPage();
-  const currentProject = useOptionalProject();
+  const organizations = useOrganizations(matches);
+  const isNewOrgPage = useIsNewOrganizationPage(matches);
+  const currentProject = useOptionalProject(matches);
 
   if (isNewOrgPage) {
     return null;
@@ -33,11 +34,15 @@ export function ProjectsMenu() {
         <PopoverArrowTrigger isOpen={isOpen}>
           {currentProject?.name ?? "Select a project"}
         </PopoverArrowTrigger>
-        <PopoverContent className="w-80 p-0" align="start">
+        <PopoverContent
+          className="min-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+          align="start"
+          collisionPadding={20}
+        >
           {organizations.map((organization) => (
             <Fragment key={organization.id}>
               <PopoverSectionHeader title={organization.title} />
-              <div className="flex flex-col gap-1 p-1">
+              <div className="flex flex-col gap-1 p-1 ">
                 {organization.projects.map((project) => {
                   const isSelected = project.id === currentProject?.id;
                   return (

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

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
-import { NamedIcon } from "./NamedIcon";
+import { IconNamesOrString, NamedIcon } from "./NamedIcon";
 import { ShortcutKey } from "./ShortcutKey";
 
 const variant = {
@@ -125,8 +125,8 @@ const allVariants = {
 
 type ButtonContentPropsType = {
   children?: React.ReactNode;
-  LeadingIcon?: React.ComponentType<any> | string;
-  TrailingIcon?: React.ComponentType<any> | string;
+  LeadingIcon?: React.ComponentType<any> | IconNamesOrString;
+  TrailingIcon?: React.ComponentType<any> | IconNamesOrString;
   trailingIconClassName?: string;
   leadingIconClassName?: string;
   fullWidth?: boolean;

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

@@ -4,49 +4,54 @@ import {
   InformationCircleIcon,
   LightBulbIcon,
 } from "@heroicons/react/20/solid";
-import { cn } from "~/utils/cn";
-import { Paragraph } from "./Paragraph";
 import {
   ArrowTopRightOnSquareIcon,
   BookOpenIcon,
   CheckCircleIcon,
+  ChevronRightIcon,
 } from "@heroicons/react/24/solid";
+import { Link } from "@remix-run/react";
+import { cn } from "~/utils/cn";
+import { Paragraph } from "./Paragraph";
 
-const variantClasses = {
+export const variantClasses = {
   info: {
     className: "border-blue-400/20 bg-blue-400/30",
     icon: <InformationCircleIcon className="h-5 w-5 shrink-0 text-blue-400" />,
-    text: "text-blue-200",
+    textColor: "text-blue-200",
+    linkClassName: "transition hover:bg-blue-400/40",
   },
   warning: {
     className: "border-yellow-400/20 bg-yellow-400/30",
     icon: (
-      <ExclamationCircleIcon className="h-5 w-5 shrink-0 text-yellow-400" />
+      <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-yellow-400" />
     ),
-    text: "text-yellow-200",
+    textColor: "text-yellow-200",
+    linkClassName: "transition hover:bg-yellow-400/40",
   },
   error: {
-    className: "border-[hsl(347,77%,50%)]/30 bg-[hsl(347,77%,50%)]/20",
-    icon: (
-      <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-rose-400" />
-    ),
-    text: "text-rose-200",
+    className: "border-rose-500/20 bg-rose-500/30",
+    icon: <ExclamationCircleIcon className="h-5 w-5 shrink-0 text-rose-400" />,
+    textColor: "text-rose-200",
+    linkClassName: "transition hover:bg-rose-500/40",
   },
   idea: {
     className: "border-green-400/20 bg-green-400/30",
     icon: <LightBulbIcon className="h-5 w-5 shrink-0 text-green-400" />,
-    text: "text-green-200",
+    textColor: "text-green-200",
+    linkClassName: "transition hover:bg-green-400/40",
   },
   success: {
     className: "border-green-400/20 bg-green-400/30",
     icon: <CheckCircleIcon className="h-5 w-5 shrink-0 text-green-400" />,
-    text: "text-green-200",
+    textColor: "text-green-200",
+    linkClassName: "transition hover:bg-green-400/40",
   },
   docs: {
-    className:
-      "border-blue-400/20 bg-blue-400/30 transition hover:bg-blue-400/40",
-    icon: <BookOpenIcon className="h-5 w-5 shrink-0 text-blue-400" />,
-    text: "text-blue-200",
+    className: "border-blue-400/20 bg-blue-400/30",
+    icon: <BookOpenIcon className="mt-0.5 h-5 w-5 shrink-0 text-blue-400" />,
+    textColor: "text-blue-200",
+    linkClassName: "transition hover:bg-blue-400/40",
   },
 } as const;
 
@@ -55,41 +60,79 @@ export function Callout({
   className,
   icon,
   variant,
-  href,
+  to,
 }: {
   children?: React.ReactNode;
   className?: string;
   icon?: React.ReactNode;
   variant: keyof typeof variantClasses;
-  href?: string;
+  to?: string;
 }) {
   const variantDefinition = variantClasses[variant];
 
-  if (variant === "docs") {
-    return (
-      <a
-        href={href}
-        target="_blank"
-        className={cn(
-          `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
-          variantDefinition.className,
-          className
-        )}
-      >
-        <div className="flex w-full items-center gap-x-2">
-          {icon ? icon : variantDefinition.icon}
-
-          {typeof children === "string" ? (
-            <Paragraph variant={"small"} className={variantDefinition.text}>
-              {children}
-            </Paragraph>
-          ) : (
-            children
+  if (to !== undefined) {
+    if (to.startsWith("http")) {
+      return (
+        <a
+          href={to}
+          target="_blank"
+          className={cn(
+            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+            variantDefinition.className,
+            variantDefinition.linkClassName,
+            className
           )}
-        </div>
-        <ArrowTopRightOnSquareIcon className="h-5 w-5 text-blue-400" />
-      </a>
-    );
+        >
+          <div className={"flex w-full items-start gap-x-2"}>
+            {icon ? icon : variantDefinition.icon}
+
+            {typeof children === "string" ? (
+              <Paragraph
+                variant={"small"}
+                className={variantDefinition.textColor}
+              >
+                {children}
+              </Paragraph>
+            ) : (
+              children
+            )}
+          </div>
+          <ArrowTopRightOnSquareIcon
+            className={cn("h-5 w-5", variantDefinition.textColor)}
+          />
+        </a>
+      );
+    } else {
+      return (
+        <Link
+          to={to}
+          className={cn(
+            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+            variantDefinition.className,
+            variantDefinition.linkClassName,
+            className
+          )}
+        >
+          <div className={"flex w-full items-start gap-x-2"}>
+            {icon ? icon : variantDefinition.icon}
+
+            {typeof children === "string" ? (
+              <Paragraph
+                variant={"small"}
+                className={variantDefinition.textColor}
+              >
+                {children}
+              </Paragraph>
+            ) : (
+              children
+            )}
+          </div>
+          <ChevronRightIcon
+            className={cn("h-5 w-5", variantDefinition.textColor)}
+          />
+        </Link>
+      );
+    }
   }
 
   return (
@@ -103,7 +146,7 @@ export function Callout({
       {icon ? icon : variantDefinition.icon}
 
       {typeof children === "string" ? (
-        <Paragraph variant={"small"} className={variantDefinition.text}>
+        <Paragraph variant={"small"} className={variantDefinition.textColor}>
           {children}
         </Paragraph>
       ) : (

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

@@ -106,11 +106,11 @@ export function ClipboardField({
   const inputIcon = useRef<HTMLInputElement>(null);
 
   return (
-    <div
+    <span
       className={cn(container, fullWidth ? "w-full" : "max-w-max", className)}
     >
       {icon && (
-        <div
+        <span
           onClick={() => inputIcon.current && inputIcon.current.focus()}
           className={cn(iconPosition, "flex items-center")}
         >
@@ -119,7 +119,7 @@ export function ClipboardField({
           ) : (
             icon
           )}
-        </div>
+        </span>
       )}
       <input
         type="text"
@@ -153,6 +153,6 @@ export function ClipboardField({
       >
         {copied ? <CheckIcon className="h-4 w-4 text-green-500" /> : "Copy"}
       </Button>
-    </div>
+    </span>
   );
 }

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

@@ -1,60 +1,114 @@
+import { Fragment, useEffect, useState } from "react";
 import { useLocales } from "./LocaleProvider";
 
 type DateTimeProps = {
   date: Date | string;
   timeZone?: string;
-  className?: string;
+  includeSeconds?: boolean;
 };
 
-export const DateTime = ({ date, timeZone, className }: DateTimeProps) => {
+export const DateTime = ({
+  date,
+  timeZone = "UTC",
+  includeSeconds = true,
+}: DateTimeProps) => {
+  const locales = useLocales();
+
   const realDate = typeof date === "string" ? new Date(date) : date;
 
-  const locales = useLocales();
-  const isoString = realDate.toISOString();
-  const formattedDate = new Intl.DateTimeFormat(locales, {
+  const initialFormattedDateTime = formatDateTime(
+    realDate,
+    timeZone,
+    locales,
+    includeSeconds
+  );
+
+  const [formattedDateTime, setFormattedDateTime] = useState<string>(
+    initialFormattedDateTime
+  );
+
+  useEffect(() => {
+    const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
+
+    setFormattedDateTime(
+      formatDateTime(
+        realDate,
+        resolvedOptions.timeZone,
+        locales,
+        includeSeconds
+      )
+    );
+  }, [locales, includeSeconds, realDate]);
+
+  return (
+    <Fragment>
+      {formattedDateTime.replace(/\s/g, String.fromCharCode(32))}
+    </Fragment>
+  );
+};
+
+function formatDateTime(
+  date: Date,
+  timeZone: string,
+  locales: string[],
+  includeSeconds: boolean
+): string {
+  return new Intl.DateTimeFormat(locales, {
     year: "numeric",
     month: "short",
     day: "numeric",
-    timeZone,
-  }).format(realDate);
-
-  const formattedTime = new Intl.DateTimeFormat(locales, {
     hour: "numeric",
     minute: "numeric",
+    second: includeSeconds ? "numeric" : undefined,
     timeZone,
-  }).format(realDate);
+  }).format(date);
+}
+
+export const DateTimeAccurate = ({ date, timeZone = "UTC" }: DateTimeProps) => {
+  const locales = useLocales();
+
+  const realDate = typeof date === "string" ? new Date(date) : date;
+
+  const initialFormattedDateTime = formatDateTimeAccurate(
+    realDate,
+    timeZone,
+    locales
+  );
+
+  const [formattedDateTime, setFormattedDateTime] = useState<string>(
+    initialFormattedDateTime
+  );
+
+  useEffect(() => {
+    const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
+
+    setFormattedDateTime(
+      formatDateTimeAccurate(realDate, resolvedOptions.timeZone, locales)
+    );
+  }, [locales, realDate]);
 
   return (
-    <time dateTime={isoString} className={className}>
-      {formattedDate} at {formattedTime}
-    </time>
+    <Fragment>
+      {formattedDateTime.replace(/\s/g, String.fromCharCode(32))}
+    </Fragment>
   );
 };
 
-export const DateTimeAccurate = ({ date, timeZone }: DateTimeProps) => {
-  const realDate = typeof date === "string" ? new Date(date) : date;
+function formatDateTimeAccurate(
+  date: Date,
+  timeZone: string,
+  locales: string[]
+): string {
+  const milliseconds = `00${date.getMilliseconds()}`.slice(-3);
 
-  const locales = useLocales();
-  const isoString = realDate.toISOString();
-  const formattedDate = new Intl.DateTimeFormat(locales, {
+  const formattedDateTime = new Intl.DateTimeFormat(locales, {
     month: "short",
     day: "2-digit",
-    timeZone,
-  }).format(realDate);
-
-  const formattedTime = new Intl.DateTimeFormat(locales, {
     hour: "numeric",
     minute: "2-digit",
     second: "2-digit",
-    hour12: false,
     timeZone,
-  }).format(realDate);
+  }).format(date);
 
-  const milliseconds = `00${realDate.getMilliseconds()}`.slice(-3);
-
-  return (
-    <time dateTime={isoString}>
-      {formattedDate} {formattedTime}.{milliseconds}
-    </time>
-  );
-};
+  return `${formatDateTime}.${milliseconds}`;
+}

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

@@ -1,40 +1,96 @@
 import { cn } from "~/utils/cn";
 
-const header1Styles =
-  "font-sans text-base md:text-lg lg:text-xl leading-5 md:leading-6 lg:leading-7 font-semibold";
-const header2Styles = "font-sans text-base leading-6 font-medium text-bright";
-const header3Styles = "font-sans text-sm leading-5 font-medium text-bright";
+const headerVariants = {
+  header1: {
+    text: "font-sans text-base md:text-lg lg:text-xl leading-5 md:leading-6 lg:leading-7 font-semibold",
+    spacing: "mb-2",
+  },
+  header2: {
+    text: "font-sans text-base leading-6 font-medium",
+    spacing: "mb-2",
+  },
+  header3: {
+    text: "font-sans text-sm leading-5 font-medium",
+    spacing: "mb-2",
+  },
+};
 
-const header1Variants = {
-  default: "text-bright",
+const textColorVariants = {
+  bright: "text-bright",
   dimmed: "text-dimmed",
 };
 
+export type HeaderVariant = keyof typeof headerVariants;
+
 type HeaderProps = {
   className?: string;
   children: React.ReactNode;
-};
-
-type Header1Props = HeaderProps & {
-  variant?: keyof typeof header1Variants;
-};
+  spacing?: boolean;
+  textColor?: "bright" | "dimmed";
+} & React.HTMLAttributes<HTMLHeadingElement>;
 
 export function Header1({
-  variant = "default",
   className,
   children,
-}: Header1Props) {
+  spacing = false,
+  textColor = "bright",
+}: HeaderProps) {
   return (
-    <h1 className={cn(header1Styles, header1Variants[variant], className)}>
+    <h1
+      className={cn(
+        headerVariants.header1.text,
+        spacing === true && headerVariants.header1.spacing,
+        textColor === "bright"
+          ? textColorVariants.bright
+          : textColorVariants.dimmed,
+        className
+      )}
+    >
       {children}
     </h1>
   );
 }
 
-export function Header2({ className, children }: HeaderProps) {
-  return <h2 className={cn(header2Styles, className)}>{children}</h2>;
+export function Header2({
+  className,
+  children,
+  spacing = false,
+  textColor = "bright",
+}: HeaderProps) {
+  return (
+    <h2
+      className={cn(
+        headerVariants.header2.text,
+        spacing === true && headerVariants.header2.spacing,
+        textColor === "bright"
+          ? textColorVariants.bright
+          : textColorVariants.dimmed,
+        className
+      )}
+    >
+      {children}
+    </h2>
+  );
 }
 
-export function Header3({ className, children }: HeaderProps) {
-  return <h3 className={cn(header3Styles, className)}>{children}</h3>;
+export function Header3({
+  className,
+  children,
+  spacing = false,
+  textColor = "bright",
+}: HeaderProps) {
+  return (
+    <h3
+      className={cn(
+        headerVariants.header3.text,
+        spacing === true && headerVariants.header3.spacing,
+        textColor === "bright"
+          ? textColorVariants.bright
+          : textColorVariants.dimmed,
+        className
+      )}
+    >
+      {children}
+    </h3>
+  );
 }

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

@@ -52,7 +52,7 @@ export function HelpTrigger({ title }: { title: string }) {
     <Button
       variant="tertiary/small"
       LeadingIcon="lightbulb"
-      leadingIconClassName="text-slate-400"
+      leadingIconClassName="text-amber-400"
       onClick={() => setOpen(true)}
     >
       {title}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cn } from "~/utils/cn";
-import type { IconNames } from "./NamedIcon";
+import type { IconNamesOrString } from "./NamedIcon";
 import { NamedIcon } from "./NamedIcon";
 
 const variants = {
@@ -44,7 +44,7 @@ const variants = {
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   variant?: keyof typeof variants;
-  icon?: IconNames;
+  icon?: IconNamesOrString;
   shortcut?: string;
   fullWidth?: boolean;
 };

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

@@ -1,12 +1,22 @@
 import * as React from "react";
 import { cn } from "~/utils/cn";
-import { Header2, Header3 } from "./Headers";
-import { Paragraph } from "./Paragraph";
+
+const labelVariants = {
+  small: {
+    text: "font-sans text-sm font-normal",
+  },
+  medium: {
+    text: "font-sans text-sm leading-5 font-medium",
+  },
+  large: {
+    text: "font-sans text-base leading-6 font-medium",
+  },
+};
 
 type LabelProps = React.AllHTMLAttributes<HTMLLabelElement> & {
   className?: string;
   children: React.ReactNode;
-  variant?: "small" | "medium" | "large";
+  variant?: keyof typeof labelVariants;
 };
 
 export function Label({
@@ -15,17 +25,10 @@ export function Label({
   variant = "medium",
   ...props
 }: LabelProps) {
-  return variant === "medium" ? (
-    <Header3 className={cn(className)} {...props}>
+  const variation = labelVariants[variant];
+  return (
+    <label className={cn(variation.text, className)} {...props}>
       {children}
-    </Header3>
-  ) : variant === "large" ? (
-    <Header2 className={cn(className)} {...props}>
-      {children}
-    </Header2>
-  ) : (
-    <Paragraph variant="small" className={cn(className)}>
-      {children}
-    </Paragraph>
+    </label>
   );
 }

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

@@ -3,10 +3,7 @@ import { Paragraph, ParagraphVariant } from "./Paragraph";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
 import { SimpleTooltip } from "./Tooltip";
 
-const variations: Record<
-  string,
-  { label: ParagraphVariant; value: ParagraphVariant }
-> = {
+const variations = {
   primary: {
     label: "extra-small/bright",
     value: "extra-small",
@@ -15,7 +12,7 @@ const variations: Record<
     label: "extra-extra-small/caps",
     value: "extra-small/bright",
   },
-};
+} as const;
 
 type LabelValueStackProps = {
   label: React.ReactNode;

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

@@ -1,15 +1,13 @@
 import {
-  ExclamationCircleIcon,
+  ArrowTopRightOnSquareIcon,
   ExclamationTriangleIcon,
   InformationCircleIcon,
   StopIcon,
 } from "@heroicons/react/20/solid";
-import { CompanyIcon, hasIcon } from "@trigger.dev/companyicons";
 import {
   ArrowLeftIcon,
   ArrowPathIcon,
   ArrowRightIcon,
-  ArrowTopRightOnSquareIcon,
   BeakerIcon,
   BellAlertIcon,
   BoltIcon,
@@ -17,6 +15,7 @@ import {
   BuildingOffice2Icon,
   CalendarDaysIcon,
   ChatBubbleLeftEllipsisIcon,
+  CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
@@ -39,6 +38,7 @@ import {
   MagnifyingGlassIcon,
   PlusIcon,
   PlusSmallIcon,
+  QrCodeIcon,
   SquaresPlusIcon,
   StarIcon,
   UserCircleIcon,
@@ -46,20 +46,26 @@ import {
   UserIcon,
   UserPlusIcon,
   WrenchScrewdriverIcon,
+  XCircleIcon,
   XMarkIcon,
 } from "@heroicons/react/24/solid";
+import { CompanyIcon, hasIcon } from "@trigger.dev/companyicons";
+import { HourglassIcon } from "lucide-react";
+import { DynamicTriggerIcon } from "~/assets/icons/DynamicTriggerIcon";
+import { ErrorIcon } from "~/assets/icons/ErrorIcon";
 import { ScheduleIcon } from "~/assets/icons/ScheduleIcon";
 import { WebhookIcon } from "~/assets/icons/WebhookIcon";
 import { cn } from "~/utils/cn";
 import { LogoIcon } from "../LogoIcon";
 import { Spinner } from "./Spinner";
-import { HourglassIcon } from "lucide-react";
-import { DynamicTriggerIcon } from "~/assets/icons/DynamicTriggerIcon";
 
 const icons = {
   account: (className: string) => (
     <UserCircleIcon className={cn("text-slate-400", className)} />
   ),
+  active: (className: string) => (
+    <CheckCircleIcon className={cn("text-green-500", className)} />
+  ),
   "arrow-right": (className: string) => (
     <ArrowRightIcon className={cn("text-white", className)} />
   ),
@@ -103,7 +109,7 @@ const icons = {
     <XMarkIcon className={cn("text-dimmed", className)} />
   ),
   "connection-alert": (className: string) => (
-    <BellAlertIcon className={cn("text-rose-500", className)} />
+    <BellAlertIcon className={cn("text-amber-500", className)} />
   ),
   docs: (className: string) => (
     <BookOpenIcon className={cn("text-slate-400", className)} />
@@ -112,7 +118,7 @@ const icons = {
     <DynamicTriggerIcon className={cn("text-cyan-500", className)} />
   ),
   error: (className: string) => (
-    <ExclamationCircleIcon className={cn("text-rose-500", className)} />
+    <ErrorIcon className={cn("text-rose-500", className)} />
   ),
   "external-link": (className: string) => (
     <ArrowTopRightOnSquareIcon className={cn("text-dimmed", className)} />
@@ -141,6 +147,9 @@ const icons = {
   id: (className: string) => (
     <FingerPrintIcon className={cn("text-rose-200", className)} />
   ),
+  inactive: (className: string) => (
+    <XCircleIcon className={cn("text-rose-500", className)} />
+  ),
   info: (className: string) => (
     <InformationCircleIcon className={cn("text-blue-500", className)} />
   ),
@@ -175,6 +184,9 @@ const icons = {
   property: (className: string) => (
     <Cog8ToothIcon className={cn("text-slate-600", className)} />
   ),
+  "qr-code": (className: string) => (
+    <QrCodeIcon className={cn("text-amber-400", className)} />
+  ),
   refresh: (className: string) => (
     <ArrowPathIcon className={cn("text-bright", className)} />
   ),
@@ -193,6 +205,9 @@ const icons = {
   star: (className: string) => (
     <StarIcon className={cn("text-yellow-500", className)} />
   ),
+  stop: (className: string) => (
+    <StopIcon className={cn("text-rose-500", className)} />
+  ),
   team: (className: string) => (
     <UserGroupIcon className={cn("text-blue-500", className)} />
   ),
@@ -209,8 +224,11 @@ const icons = {
   "custom-event": (className: string) => (
     <CodeBracketSquareIcon className={cn("text-toxic-600", className)} />
   ),
+  "register-source": (className: string) => (
+    <GlobeAltIcon className={cn("text-sky-500", className)} />
+  ),
   "schedule-interval": (className: string) => (
-    <ScheduleIcon className={cn("text-sky-500", className)} />
+    <ClockIcon className={cn("text-sky-500", className)} />
   ),
   "schedule-cron": (className: string) => (
     <ScheduleIcon className={cn("text-sky-500", className)} />
@@ -224,6 +242,7 @@ const icons = {
 };
 
 export type IconNames = keyof typeof icons;
+export type IconNamesOrString = IconNames | (string & {});
 export const iconNames = Object.keys(icons) as IconNames[];
 
 export function NamedIcon({
@@ -231,7 +250,7 @@ export function NamedIcon({
   className,
   fallback,
 }: {
-  name: string;
+  name: IconNamesOrString;
   className: string;
   fallback?: JSX.Element;
 }) {
@@ -241,7 +260,7 @@ export function NamedIcon({
 
   if (hasIcon(name)) {
     return (
-      <div
+      <span
         className={cn(
           "grid aspect-square min-h-fit place-items-center",
           className
@@ -255,7 +274,7 @@ export function NamedIcon({
             shapeRendering: "geometricPrecision",
           }}
         />
-      </div>
+      </span>
     );
   }
 

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

@@ -50,7 +50,7 @@ export function PageTitle({ title, backButton }: PageTitleProps) {
           >
             <ChevronLeftIcon className="h-6" />
             <Header1
-              variant="dimmed"
+              textColor="dimmed"
               className="transition group-hover:text-white"
             >
               {backButton.text}
@@ -120,11 +120,7 @@ export function PageInfoProperty({
           {label}:
         </Paragraph>
       )}
-      {typeof value === "string" || typeof value === "number" ? (
-        <Paragraph variant="small">{value}</Paragraph>
-      ) : (
-        value
-      )}
+      <Paragraph variant="small">{value}</Paragraph>
     </div>
   );
 }