Fix pnpm lock file for package release

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

.changeset/config.json

@@ -2,10 +2,10 @@
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [],
+  "fixed": [["@trigger.dev/*"]],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["wss", "webapp"]
+  "ignore": ["webapp", "emails", "@trigger.dev/database"]
 }

.docker/pizzly-server.env.example

@@ -1,8 +0,0 @@
-# You need to stop and re-run docker to switch, `pnpm run docker:db`
-# To login using GitHub and connect via OAuth with most integrations
-AUTH_CALLBACK_URL=http://localhost:3004/oauth/callback
-# To connect with Slack
-# AUTH_CALLBACK_URL=https://<ngrok subdomain>.eu.ngrok.io/oauth/callback
-
-# You only need to use this locally if you specify PIZZLY_SECRET_KEY in the webapp .env file
-# PIZZLY_SECRET_KEY=<secret_key>

.dockerignore

@@ -3,6 +3,7 @@
 .github
 # editor
 .idea
+.vscode
 # dependencies
 node_modules
 .pnp
@@ -34,4 +35,11 @@ cypress/screenshots
 cypress/videos
 
 apps/**/styles/tailwind.css
-packages/**/styles/tailwind.css
+packages/**/styles/tailwind.css
+
+.changeset
+examples
+CHANGESETS.md
+CONTRIBUTING.md
+README.md
+LICENSE

.env.example

@@ -0,0 +1,33 @@
+# YOU MIGHT LIKE TO MODIFY THESE VARIABLES
+SESSION_SECRET=abcdef1234
+MAGIC_LINK_SECRET=abcdef1234
+ENCRYPTION_KEY=ae13021afef0819c3a307ad487071c06 # Must be a random 16 byte hex string. You can generate an encryption key by running `openssl rand -hex 16` in your terminal
+LOGIN_ORIGIN=http://localhost:3030
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres?schema=public 
+REMIX_APP_PORT=3030
+APP_ENV=development
+APP_ORIGIN=http://localhost:3030
+NODE_ENV=development
+
+# OPTIONAL VARIABLES
+# This is used for logging in via GitHub. You can leave these commented out if you don't want to use GitHub for authentication.
+# AUTH_GITHUB_CLIENT_ID=
+# AUTH_GITHUB_CLIENT_SECRET=
+
+# Resend is an email service used for signing in to Trigger.dev via a Magic Link.
+# Emails will print to the console if you leave these commented out
+### Visit https://resend.com, create an account and get your API key. Then insert it below along with your From and Reply To email addresses. Visit https://resend.com/docs for more information.
+# RESEND_API_KEY=<api_key>
+# FROM_EMAIL=
+# REPLY_TO_EMAIL=
+
+# CLOUD VARIABLES
+POSTHOG_PROJECT_KEY=
+PLAIN_API_KEY= 
+CLOUD_AIRTABLE_CLIENT_ID=
+CLOUD_AIRTABLE_CLIENT_SECRET=
+CLOUD_GITHUB_CLIENT_ID=
+CLOUD_GITHUB_CLIENT_SECRET=
+CLOUD_SLACK_APP_HOST=
+CLOUD_SLACK_CLIENT_ID=
+CLOUD_SLACK_CLIENT_SECRET= 

.github/workflows/publish.yml

@@ -0,0 +1,211 @@
+name: 🚀 Publish Trigger.dev Docker
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "v.docker.*"
+    paths:
+      - ".github/workflows/publish.yml"
+      - "packages/**"
+      - "!packages/**/*.md"
+      - "!packages/**/*.eslintrc"
+      - "apps/**"
+      - "!apps/**/*.md"
+      - "!apps/**/*.eslintrc"
+      - "integrations/**"
+      - "!integrations/**/*.md"
+      - "!integrations/**/*.eslintrc"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "turbo.json"
+      - "docker/Dockerfile"
+      - "docker/scripts/**"
+
+permissions:
+  id-token: write
+  packages: write
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+env:
+  AWS_REGION: us-east-1
+
+jobs:
+  typecheck:
+    name: ʦ TypeScript
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: ⎔ Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.18
+
+      - name: ⎔ Setup node
+        uses: buildjet/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: 📥 Download deps
+        run: pnpm install --frozen-lockfile
+
+      - name: 📀 Generate Prisma Client
+        run: pnpm run generate
+
+      - name: 🔎 Type check
+        run: pnpm run typecheck --filter webapp
+
+  unitTests:
+    name: Unit Tests
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: ⎔ Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.18
+
+      - name: ⎔ Setup node
+        uses: buildjet/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: 📥 Download deps
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Unit Tests
+        run: |
+          pnpm run test
+
+  e2e:
+    name: e2e Tests
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: ⎔ Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.18
+
+      - name: ⎔ Setup node
+        uses: buildjet/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: 📥 Download deps
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: |
+          # Setup environment variables
+          cp ./.env.example ./.env
+          cp ./examples/nextjs-test/.env.example ./examples/nextjs-test/.env.local
+          cp ./packages/database/.env.example ./packages/database/.env
+
+          # Build packages
+          pnpm run build --filter @examples/nextjs-test^...
+          pnpm --filter @trigger.dev/database generate
+
+          # Move trigger-cli bin to correct place
+          pnpm install --frozen-lockfile
+
+          # Execute tests
+          pnpm run docker
+          pnpm run db:migrate
+          pnpm run db:seed
+          pnpm run test:e2e
+
+          # Cleanup
+          pnpm run docker:stop
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+  publish:
+    needs: [typecheck, unitTests, e2e]
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    outputs:
+      version: ${{ steps.get_version.outputs.version }}
+      short_sha: ${{ steps.get_commit.outputs.sha_short }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: 🆚 Get the version
+        id: get_version
+        run: |
+          IMAGE_TAG="${GITHUB_REF#refs/tags/}"
+          if [[ $GITHUB_REF == refs/tags/* ]]; then
+            if [[ $IMAGE_TAG == v.docker.* ]]; then
+              ORIGINAL_VERSION="${IMAGE_TAG#v.docker.}"
+              IMAGE_TAG="v${ORIGINAL_VERSION}"
+            fi
+            echo "IMAGE_TAG=${IMAGE_TAG}"
+          elif [[ $GITHUB_REF == refs/heads/* ]]; then
+            IMAGE_TAG="${GITHUB_REF#refs/heads/}"
+            echo "IMAGE_TAG=${IMAGE_TAG}"
+          else
+            echo "Invalid reference: ${GITHUB_REF}"
+            exit 1
+          fi
+          echo "::set-output name=version::${IMAGE_TAG}"
+      - name: 🔢 Get the commit hash
+        id: get_commit
+        run: |
+          echo ::set-output name=sha_short::$(echo ${{ github.sha }} | cut -c1-7)
+
+      - name: 🐳 Build Docker Image
+        run: |
+          docker build -t release_build_image -f ./docker/Dockerfile .
+
+      - name: 🐙 Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🐙 Push to GitHub Container Registry
+        run: |
+          docker tag release_build_image $REGISTRY/$REPOSITORY:$IMAGE_TAG
+          docker push $REGISTRY/$REPOSITORY:$IMAGE_TAG
+        env:
+          REGISTRY: ghcr.io/triggerdotdev
+          REPOSITORY: trigger.dev
+          IMAGE_TAG: ${{ steps.get_version.outputs.version }}
+
+      - name: 🐙 Push 'latest' to GitHub Container Registry
+        if: startsWith(github.ref, 'refs/tags/')
+        run: |
+          docker tag release_build_image $REGISTRY/$REPOSITORY:latest
+          docker push $REGISTRY/$REPOSITORY:latest
+        env:
+          REGISTRY: ghcr.io/triggerdotdev
+          REPOSITORY: trigger.dev

.github/workflows/release.yml

@@ -0,0 +1,77 @@
+name: 🦋 Changesets Release
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - ".github/workflows/release.yml"
+      - "packages/**"
+      - "!packages/**/*.md"
+      - "changesets/**"
+      - "integrations/**"
+      - "!integrations/**/*.md"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "turbo.json"
+
+jobs:
+  release:
+    name: 🦋 Changesets Release
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    if: |
+      github.repository == 'triggerdotdev/trigger.dev'
+    outputs:
+      published_packages: ${{ steps.changesets.outputs.publishedPackages }}
+      published: ${{ steps.changesets.outputs.published }}
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: ⎔ Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.18
+
+      - name: ⎔ Setup node
+        uses: buildjet/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: 📥 Download deps
+        run: pnpm install --frozen-lockfile
+
+      - name: 📀 Generate Prisma Client
+        run: pnpm run generate
+
+      - name: 🔎 Type check
+        run: pnpm run typecheck
+
+      - name: 🔐 Setup npm auth
+        run: |
+          echo "registry=https://registry.npmjs.org" >> ~/.npmrc
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
+
+        # This action has two responsibilities. The first time the workflow runs
+        # (initial push to the `main` branch) it will create a new branch and
+        # then open a PR with the related changes for the new version. After the
+        # PR is merged, the workflow will run again and this action will build +
+        # publish to npm.
+      - name: 🚀 PR / Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: pnpm run changeset:version
+          commit: "chore: Update version for release"
+          title: "chore: Update version for release"
+          publish: pnpm run changeset:release
+          createGithubReleases: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -45,4 +45,10 @@ yarn-error.log*
 .output
 apps/**/public/build
 .tests-container-id.txt
-.sentryclirc
+.sentryclirc
+.buildt
+
+**/tmp/
+/test-results/
+/playwright-report/
+/playwright/.cache/

.infisical.json

@@ -0,0 +1 @@
+{ "workspaceId": "63e5e42daf9a537ba8d9503c" }

.npmrc

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

.nvmrc

@@ -1 +1 @@
-v16.19.0
+v18.12.1

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.env
+.env.local
+pnpm-lock.yaml
+tailwind.css
+.babelrc.json
+**/.react-email/
+**/storybook-static/
+**/.changeset/
+**/build/
+**/dist/

.vscode/launch.json

@@ -17,6 +17,17 @@
       "name": "Chrome webapp",
       "url": "http://localhost:3000",
       "webRoot": "${workspaceFolder}/apps/webapp/app"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Current Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal"
     }
   ]
 }

.warp/triggerdotdev.yaml.example

@@ -1,61 +0,0 @@
-# Warp Launch Configuration
-#
-#
-# Use this to start a certain configuration of windows, tabs, and panes
-# Open the launch configuration palette to access and open any launch configuration
-#
-# This file defines your launch configuration
-# More on how to do so here:
-# https://docs.warp.dev/features/session-management/launch-configurations
-#
-# All launch configurations are stored under ~/.warp/launch_configurations/
-# Edit them anytime!
-#
-# You can also add commands that run on-start for your launch configurations like so:
-# ---
-# name: Example with Command
-# windows:
-#  - tabs:
-#      - layout:
-#          cwd: /Users/warp-user/project
-#          commands:
-#            - exec: code .
-
----
-name: Triggerdotdev
-windows:
-  - tabs:
-      - title: webapp
-        layout:
-          split_direction: vertical
-          panes:
-            - cwd: /Users/eric/code/triggerdotdev/trigger.dev
-              commands:
-                - exec: pnpm run dev --filter webapp
-            - cwd: /Users/eric/code/triggerdotdev/trigger.dev/apps/webapp
-      - title: ngrok
-        layout:
-          split_direction: horizontal
-          panes:
-            - cwd: /Users/eric/code/triggerdotdev/trigger.dev
-              commands:
-                - exec: ./scripts/proxy-webapp.sh <your-trigger-dev>
-            - cwd: /Users/eric/code/triggerdotdev/trigger.dev
-              commands:
-                - exec: ./scripts/proxy-pizzly.sh <your-pizzly-dev>
-      - title: wss and examples
-        layout:
-          split_direction: horizontal
-          panes:
-            - cwd: /Users/eric/code/triggerdotdev/trigger.dev/apps/wss
-              commands:
-                - exec: LOG_LEVEL=debug pnpm run dev
-            - cwd: /Users/eric/code/triggerdotdev/trigger.dev/examples
-      - title: emails
-        layout:
-          split_direction: horizontal
-          panes:
-            - cwd: /Users/eric/Work/Git/APIHero/trigger.dev/packages/emails
-              commands:
-                - exec: pnpm run dev
-            - cwd: /Users/eric/Work/Git/APIHero/trigger.dev/packages/emails

CHANGESETS.md

@@ -4,23 +4,26 @@ Trigger.dev uses [changesets](https://github.com/changesets/changesets) to manag
 
 ## Adding a changeset
 
-To add a changeset, use `pnpm run changeset:add` and follow the instructions [here](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md). Please only ever select one of our public packages when adding a changeset, which currently are:
+To add a changeset, use `pnpm run changeset:add` and follow the instructions [here](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md). Please only ever select one of our public packages when adding a changeset.
 
-- `@trigger.dev/sdk`
-- `@trigger.dev/integration-sdk`
-- `@trigger.dev/github`
-- `@trigger.dev/slack`
-- `@trigger.dev/shopify`
-- `@trigger.dev/resend`
-
-## Release instructions
+## Release instructions (local only)
 
 Based on the instructions [here](https://github.com/changesets/changesets/blob/main/docs/intro-to-using-changesets.md)
 
 1. Run `pnpm run changeset:version`
 2. Run `pnpm run changeset:release`
 
+## Release instructions (CI)
+
+Please follow the best-practice of adding changesets in the same commit as the code making the change with `pnpm run changeset:add`, as it will allow our release.yml CI workflow to function properly:
+
+- Anytime new changesets are added in a commit in the `main` branch, the [release.yml](./.github/workflows/release.yml) workflow will run and will automatically create/update a PR with a fresh run of `pnpm run changeset:version`.
+- When the version PR is merged into `main`, the release.yml workflow will automatically run `pnpm run changeset:release` to build and release packages to npm.
+
 ## Pre-release instructions
 
-- Switch into pre-release mode by running `pnpm run changeset:next`.
-- Switch back into normal mode by running `pnpm run changeset:normal`.
+1. Add changesets as usual `pnpm run changeset:add`
+2. Switch to pre-release mode by running `pnpm run changeset:next`
+3. Create version `pnpm run changeset:version`
+4. Release `pnpm run changeset:release`
+5. Switch back to normal mode by running `pnpm run changeset:normal`

CONTRIBUTING.md

@@ -0,0 +1,291 @@
+# 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 generate a new value for `ENCRYPTION_KEY`:
+
+   `ENCRYPTION_KEY` is used to two-way encrypt OAuth access tokens and so you'll probably want to actually generate a unique value, and it must be a random 16 byte hex string. You can generate one with the following command:
+
+   ```sh
+   openssl rand -hex 16
+   ```
+
+   Feel free to update `SESSION_SECRET` and `MAGIC_LINK_SECRET` as well using the same method.
+
+6. Start Docker. This starts the required services like Postgres. If this is your first time using Docker, consider going through this [guide](DOCKER_INSTALLATION.md)
+   ```
+   pnpm run docker
+   ```
+7. Migrate the database
+   ```
+   pnpm run db:migrate
+   ```
+8. Build the app
+   ```
+   pnpm run build --filter webapp
+   ```
+9. Run the seed script
+   ```
+   pnpm run db:seed
+   ```
+10. 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 as following:
+
+   ```sh
+   webapp:dev: Log in to Trigger.dev
+   webapp:dev:
+   webapp:dev: Click here to log in with this magic link
+   webapp:dev: [http://localhost:3030/magic?token=U2FsdGVkX18OvB0JxgaswTLCSbaRz%2FY82TN0EZWhSzFyZYwgG%2BIzKVTkeiaOtWfotPw7F8RwFzCHh53aBpMEu%2B%2B%2FItb%2FcJYh89MSjc3Pz92bevoEjqxSQ%2Ff%2BZbks09JOpqlBbYC3FzGWC8vuSVFBlxqLXxteSDLthZSUaC%2BS2LaA%2BJgp%2BLO7hgjAaC2lXbCHrM7MTgTdXOFt7i0Dvvuwz6%2BWY25RnfomZOPqDsyH0xz8Q2rzPTz0Xu53WSXrZ1hd]
+   webapp:dev:
+   webapp:dev: If you didn't try to log in, you can safely ignore this email.
+   ```
+
+   Paste the magic link shown in your terminal into your browser to login.
+
+## Adding and running migrations
+
+1. Modify packages/database/prisma/schema.prisma file
+2. Change directory to the packages/database folder
+   ```sh
+   cd packages/database
+   ```
+3. Generate the Prisma client
+
+   ```sh
+   pnpm run generate
+   ```
+
+   The above updates the prisma client generated into node_modules/.prisma/client folder. This helps with typing of relevant prisma models. It ensures typescript
+   recognizes fields added or removed from a model and type-checks appropriately.
+
+4. Create and apply the migrations
+
+   ```
+   pnpm run db:migrate:dev
+   ```
+
+   This creates a migration file and executes the migrations against your database and applies changes to the database schema(s)
+
+5. Commit generated migrations as well as changes to the schema.prisma file
+6. If you're using VSCode you may need to restart the Typescript server in the webapp to get updated type inference. Open a TypeScript file, then open the Command Palette (View > Command Palette) and run `TypeScript: Restart TS server`.
+
+## Testing CLI changes
+
+To test CLI changes, follow the steps below:
+
+1. Build the CLI and watch for changes
+
+```sh
+cd packages/cli
+pnpm run dev
+```
+
+2. Open a new Terminal window and run the webapp locally and then create a new project in the dashboard. Copy out the dev API key.
+
+3. Create a new temporary Next.js app in examples directory
+
+```sh
+pnpm create next-app@latest
+```
+
+Follow the prompts to create a TypeScript project using the App Directory.
+
+4. Then once that's finished, add the `@trigger.dev/cli` to the `devDependencies` of the newly created Next.js app's `package.json` file, like so:
+
+```json
+{
+  "devDependencies": { "@trigger.dev/cli": "workspace:*" }
+}
+```
+
+5. Open a new terminal window, navigate into the example, and initialize the CLI:
+
+```sh
+cd examples/your-newly-created-nextjs-project
+pnpm i
+pnpm exec trigger-cli init
+```
+
+6. When prompted, select `self-hosted` and enter `localhost:3030` for your local version of the webapp. When asked for an API key, use the key you copied earlier.
+
+7. Run the CLI
+
+```sh
+pnpm exec trigger-cli dev
+```
+
+8. After running the CLI, start your newly created Next.js project. You should now be able to see the changes.
+
+9. Please remember to delete the temporary project you created after you've tested the changes, and before you raise a PR.
+
+## Running end-to-end webapp tests
+
+To run the end-to-end tests, follow the steps below:
+
+1. Set up environment variables (copy example envs into the correct place)
+
+```sh
+cp ./.env.example ./.env
+cp ./examples/nextjs-test/.env.example ./examples/nextjs-test/.env.local
+cp ./packages/database/.env.example ./packages/database/.env
+```
+
+2. Set up dependencies
+
+```sh
+# Build packages
+pnpm run build --filter @examples/nextjs-test^...
+pnpm --filter @trigger.dev/database generate
+
+# Move trigger-cli bin to correct place
+pnpm install --frozen-lockfile
+```
+
+3. Set up the database
+
+```sh
+pnpm run docker
+pnpm run db:migrate
+pnpm run db:seed
+```
+
+4. Run the end-to-end tests
+
+```sh
+pnpm run test:e2e
+```
+
+### Cleanup
+
+The end-to-end tests use a `setup` and `teardown` script to seed the database with test data. If the test runner doesn't exit cleanly, then the database can be left in a state where the tests can't run because the `setup` script will try to create data that already exists. If this happens, you can manually delete the `users` and `organizations` from the database using prisma studio:
+
+```sh
+# With the database running (i.e. pnpm run docker)
+pnpm run db:studio
+```
+
+## Add sample jobs
+
+The [examples/jobs-starter](./examples/jobs-starter/) project defines simple jobs you can get started with.
+
+1. `cd` into `examples/jobs-starter`
+2. Create a `.env.local` file with the following content,
+   replacing `[TRIGGER_DEV_API_KEY]` with an actual key:
+
+```env
+TRIGGER_API_KEY=[TRIGGER_DEV_API_KEY]
+TRIGGER_API_URL=http://localhost:3030
+```
+
+`TRIGGER_API_URL` is used to configure the URL for your Trigger.dev instance,
+where the jobs will be registered.
+
+3. Run the `jobs-starter` app:
+
+```sh
+pnpm dev
+```
+
+4. Navigate to your trigger.dev instance ([http://localhost:3030](http://localhost:3030/)), to see the jobs.
+   You can use the test feature to trigger them.
+
+## 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.
+
+## Adding changesets
+
+We use [changesets](https://github.com/changesets/changesets) to manage our package versions and changelogs. If you've never used changesets before, first read [their guide here](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
+
+If you are contributing a change to any packages in this monorepo (anything in either the `/packages` or `/integrations` directories), then you will need to add a changeset to your Pull Requests before they can be merged.
+
+To add a changeset, run the following command in the root of the repo
+
+```sh
+pnpm run changeset:add
+```
+
+Here's an example of creating a `patch` changeset for the `@trigger.dev/github` and `@trigger.dev/slack` packages (click to view):
+
+[![asciicast](https://asciinema.org/a/599228.svg)](https://asciinema.org/a/599228)
+
+You will be prompted to select which packages to include in the changeset. Only select the packages that you have made changes for.
+
+Most of the time the changes you'll make are likely to be categorized as patch releases. If you feel like there is the need for a minor or major release of the package based on the changes being made, add the changeset as such and it will be discussed during PR review.
+
+## Troubleshooting
+
+### EADDRINUSE: address already in use :::3030
+
+When receiving the following error message:
+
+```sh
+webapp:dev: Error: listen EADDRINUSE: address already in use :::3030
+```
+
+The process running on port `3030` should be destroyed.
+
+1. Get the `PID` of the process running on PORT `3030`
+   ```sh
+   lsof -i :3030
+   ```
+2. Kill the process
+   ```sh
+   sudo kill -9 <PID>
+   ```

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,229 +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, pulsar, and pizzly server
-
-   ```bash
-   pnpm run docker:db
-   ```
-
-   > **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:db
-```
-
-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.

DOCKER_INSTALLATION.md

@@ -0,0 +1,126 @@
+This guide covers installing Docker and Docker Compose. If you're looking for instructions for running Trigger.dev in docker, [see here](https://github.com/triggerdotdev/docker).
+
+## Setting up Docker for the first time.
+
+In the contributing guide of Trigger.dev, there's a section that requires you to start Docker.
+
+If you don't have Docker installed on your machine, you'll run into some complications (errors).
+
+Below are the steps on how you can avoid that.
+
+First you need to setup docker-compose as it is an underlying tool that this command: `pnpm run docker` fires behind the scene.
+
+## Linux
+
+To install Docker Compose on Linux Ubuntu via the terminal, you can follow these steps:
+
+1. Update the package index on your system by running the following command:
+
+   ```shell
+   sudo apt update
+   ```
+
+2. Install the required dependencies by running the following command:
+
+   ```shell
+   sudo apt install curl
+   ```
+
+3. Download the Docker Compose binary into the `/usr/local/bin` directory using the `curl` command:
+
+   ```shell
+   sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+   ```
+
+4. Set the appropriate permissions to make the `docker-compose` binary executable:
+
+   ```shell
+   sudo chmod +x /usr/local/bin/docker-compose
+   ```
+
+5. Verify that Docker Compose has been successfully installed by running the following command:
+
+   ```shell
+   docker-compose --version
+   ```
+
+   This command should display the version information of Docker Compose without any errors.
+
+After following these steps, you should have Docker Compose installed on your Ubuntu system, and you can use it by running `docker-compose` commands in the terminal.
+
+When you've verified that the `docker-compose` package is installed and you proceed to start Docker with `pnpm run docker`.
+
+You'll probably get an error similar to the one below:
+
+```shell
+Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
+ ELIFECYCLE  Command failed with exit code 1.
+```
+
+The error message suggests that the Docker daemon is not running on your system. The Docker daemon is responsible for managing and running Docker containers.
+
+To resolve this issue, you may need to install Docker properly on your Ubuntu system. Here are the steps to install Docker on Ubuntu:
+
+1. Update the package index on your system by running the following command:
+
+   ```shell
+   sudo apt update
+   ```
+
+2. Install the necessary packages to allow apt to use repositories over HTTPS:
+
+   ```shell
+   sudo apt install apt-transport-https ca-certificates curl software-properties-common
+   ```
+
+3. Add the official Docker GPG key to your system by running the following command:
+
+   ```shell
+   curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
+   ```
+
+4. Add the Docker repository to the APT sources list:
+
+   ```shell
+   echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+   ```
+
+5. Update the package index again:
+
+   ```shell
+   sudo apt update
+   ```
+
+6. Install Docker by running the following command:
+
+   ```shell
+   sudo apt install docker-ce docker-ce-cli containerd.io
+   ```
+
+7. After the installation is complete, verify that Docker is installed correctly by running the following command:
+
+   ```shell
+   docker --version
+   ```
+
+   This command should display the version information of Docker without any errors.
+
+Once Docker is installed and verified, you should be able to start the Docker daemon and run the `pnpm run docker` command without encountering any issues.
+
+## Windows
+
+1. Download the Docker Desktop installer from the Docker website: [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)
+
+2. Run the installer and follow the instructions to install Docker Desktop.
+
+3. After installation, Docker Desktop should be running automatically.
+
+## macOS
+
+1. Download the Docker Desktop installer from the Docker website: [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop)
+
+2. Run the installer and follow the instructions to install Docker Desktop.
+
+3. After installation, Docker Desktop should be running automatically.
+
+Please note that the instructions provided above are for the most common scenarios. For specific versions or different distributions, it's always a good idea to consult the official Docker documentation for the respective operating systems.

LICENSE

@@ -1,25 +1,201 @@
-Copyright (c) 2022 API Hero Inc.
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
 
-Portions of this software are licensed as follows:
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 
-- All content that resides under any "ee/" directory of this repository, if such directories exists, are licensed under the license defined in "ee/LICENSE".
-- All third party components incorporated into the Trigger.dev Software are licensed under the original license provided by the owner of the applicable component.
-- Content outside of the above mentioned directories or restrictions above is available under the "MIT Expat" license as defined below.
+   1. Definitions.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,205 +1,65 @@
 <div align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/a45d1fa2-0ae8-4a39-4409-f4f934bfae00/public">
+  <source media="(prefers-color-scheme: light)" srcset="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/3f5ad4c1-c4c8-4277-b622-290e7f37bd00/public">
+  <img alt="Trigger.dev logo" src="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/a45d1fa2-0ae8-4a39-4409-f4f934bfae00/public">
+</picture>
+  
+### The background jobs framework for Next.js
 
-![Hero](https://raw.githubusercontent.com/triggerdotdev/trigger.dev/eebe37109e33beae6390ee19029fce8a5934c84b/apps/webapp/public/images/logo-banner.png)
+[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) [![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCu-PdxpWtIrrd7vW0N5T6ZA?style=social)](https://www.youtube.com/@triggerdotdev)
+[![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)
 
-[Website](https://trigger.dev) | [Community](https://discord.gg/JtBAxBr2m3) | [Docs](https://docs.trigger.dev)
 </div>
 
+# About Trigger.dev
 
-# **⚡️ Trigger.dev**
-### **The developer-first open source Zapier alternative.**
+Create long-running jobs directly in your codebase with features like API integrations, webhooks, scheduling and delays.
 
+### Long running Jobs on serverless
 
-Trigger.dev is an open source platform that makes it easy for developers to create event-driven background tasks directly in their code. Build, test and run workflows locally using our SDK. Subscribe to webhooks, schedule jobs, run background jobs and add long delays easily and reliably. In our web app you get full visibility of every run your workflow has ever made making it easier to monitor and debug.
+Reliably run jobs and don’t worry about function timeouts, we handle those for you.
 
-&nbsp;
+- Auto-resume after a function timeout
+- Auto-resume after a server outage
+- Add delays of up to a year
 
-# **⭐️ Features:**
+### In your codebase
 
-- 👂 Easily subscribe to [webhooks](https://docs.trigger.dev/triggers/webhooks)
-  — they work locally without tunnelling.
-- 🔥 Fire your own [custom events](https://docs.trigger.dev/triggers/custom-events)—a single event can trigger multiple workflows.
-- 📆 [Schedule workflows](https://docs.trigger.dev/triggers/scheduled)—easily repeat tasks or use CRON syntax for advanced cases.
-- 🚦 Add [long delays](https://docs.trigger.dev/functions/delays) inside workflows (up to a year) and they will pick up where they left off.
-- 🤝 When your server goes down [it’s not a problem](https://docs.trigger.dev/guides/resumability), workflows will reconnect and continue.
-- 🪧 [View every step of every run](https://docs.trigger.dev/viewing-runs), with data, previews and errors.
-- 👋 Connect to and authenticate with APIs using our custom integrations.
-- 🚗 If you have a custom use case, we support [Fetch for calling any HTTP endpoint](https://docs.trigger.dev/functions/fetch) or [webhooks](https://docs.trigger.dev/triggers/webhooks) for subscribing to events from APIs.
-- 📡 All API calls are automatically retried with exponential back off.
-- 😀 TypeScript SDK, so whether you’re using JavaScript or TypeScript you will have a great experience.
+Create Jobs where they belong: in your codebase. Version control, localhost, test, review, and deploy like you're already used to.
 
-&nbsp;
+### Secure by design
 
-# **🌱 Documentation:**
+We only receive Triggers and the data you choose to send to us. You can even completely self-host the entire platform.
 
-- [Getting Started with Trigger.dev](https://docs.trigger.dev/getting-started)
-- Example workflows
-  - [Welcome email drip campaign using Resend and Slack](https://docs.trigger.dev/examples/resend)
-  - [Post to Slack when a GitHub issue is created or modified](https://docs.trigger.dev/examples/slack)
-  - [Create a new product on Shopify](https://docs.trigger.dev/examples/shopify)
-  - [When a GitHub repo is starred, post information about the user to Slack](https://docs.trigger.dev/examples/github)
-- Triggers:
-  - [Webhooks](https://docs.trigger.dev/triggers/webhooks)
-  - [Custom events](https://docs.trigger.dev/triggers/custom-events)
-  - [Scheduled](https://docs.trigger.dev/triggers/scheduled)
-- Functions:
-  - [Fetch](https://docs.trigger.dev/functions/fetch)
-  - [Logging](https://docs.trigger.dev/functions/logging)
-  - [Delays](https://docs.trigger.dev/functions/delays)
-  - [Send event](https://docs.trigger.dev/functions/send-event)
-  - [Loops, conditionals, etc](https://docs.trigger.dev/functions/loops-conditionals-etc)
+### Don't worry about deployment
 
-&nbsp;
+Just use our SDK to write Jobs in your Next.js codebase. There's nothing extra to deploy and no CI to configure, your Jobs just connect to our cloud. Or you can always self-host.
 
-# 🔬 **Anatomy of a workflow**
+### Full visibility of every job run
 
-* You create workflows in code on your server using our SDK
-* Each API integration is a separate package, e.g. `@trigger.dev/slack`
-* Each workflow has an event that triggers it, e.g. `github.events.newStarEvent`, `scheduleEvent`, `customEvent`
-* Each workflow has a `run` function that is called when the event is triggered
-* If we don't have an integration for the API you want to use, you can use `fetch` to call any HTTP endpoint and `webhookEvent` to subscribe to webhooks
+View every Task in every Run so you can tell exactly what happened.
 
-## **Example workflows**
+![image](https://www.trigger.dev/build/_assets/web-app-2QFKXFLW.png)
 
-<details open><summary> Post to Slack when a GitHub issue is created or modified
-</summary>
+### Built-in integrations
 
-_Integrations required: Slack, GitHub_
+Easily integrate with hundreds of third-party APIs – including your own. Use API keys (which never leave your server) or let us handle OAuth for you. Install our integration packages and easily subscribe to webhooks and perform common tasks, or you can easily use your existing favorite Node.JS SDKs and get resumability and idempotency through our `runTask` function.
 
-```ts
-import { Trigger } from "@trigger.dev/sdk";
-import * as github from "@trigger.dev/github";
-import * as slack from "@trigger.dev/slack";
+### Trigger.dev Connect (coming soon)
 
-new Trigger({
-  id: "new-github-star-to-slack",
-  name: "New GitHub Star: triggerdotdev/trigger.dev",
-  apiKey: "<my_api_key>",
-  on: github.events.newStarEvent({
-    repo: "triggerdotdev/trigger.dev",
-  }),
-  run: async (event) => {
-    await slack.postMessage("github-stars", {
-      channelName: "github-stars",
-      text: `New GitHub star from \n<${event.sender.html_url}|${event.sender.login}>`,
-    });
-  },
-}).listen();
-```
+Easily add integrations for your users.
 
-</details>
+# Getting started
 
-<details><summary>Welcome email drip campaign
-</summary>
+Visit our docs [here](https://trigger.dev/docs).
 
-_Integrations required: Slack, Resend_
+## Self-host
 
-```ts
-import { customEvent, Trigger, sendEvent } from "@trigger.dev/sdk";
-import * as resend from "@trigger.dev/resend";
-import * as slack from "@trigger.dev/slack";
-import React from "react";
-import { z } from "zod";
-import { getUser } from "../db";
-import { InactiveEmail, TipsEmail, WelcomeEmail } from "./email-templates";
+We provide an official trigger.dev docker image you can use to easily self-host the platform. We're working on more extensive guides but we currently provide a [Fly.io example repository](https://github.com/triggerdotdev/fly.io) with instructions in the README for deploying and using a self-hosted instance of Trigger.dev on Fly.io.
 
-new Trigger({
-  id: "welcome-email-campaign",
-  name: "Welcome email drip campaign",
-  apiKey: "<my_api_key>",
-  on: customEvent({
-    name: "user.created",
-    schema: z.object({
-      userId: z.string(),
-    }),
-  }),
-  async run(event, context) {
-    //get the user data from the database
-    const user = await getUser(event.userId);
+## Development
 
-    await slack.postMessage("send-to-slack", {
-      channelName: "new-users",
-      text: `New user signed up: ${user.name} (${user.email})`,
-    });
-
-    //Send the first email
-    const welcomeResponse = await resend.sendEmail("welcome-email", {
-      from: "Trigger.dev <james@email.trigger.dev>",
-      replyTo: "James <james@trigger.dev>",
-      to: user.email,
-      subject: "Welcome to Trigger.dev",
-      react: <WelcomeEmail name={user.name} />,
-    });
-    await context.logger.debug(
-      `Sent welcome email to ${welcomeResponse.to} with id ${welcomeResponse.id}`
-    );
-
-    //wait 1 day, check if the user has created a workflow and send the appropriate email
-    await context.waitFor("wait-a-while", { days: 1 });
-    const updatedUser = await getUser(event.userId);
-
-    if (updatedUser.hasOnboarded) {
-      await resend.sendEmail("onboarding-complete", {
-        from: "Trigger.dev <james@email.trigger.dev>",
-        replyTo: "James <james@trigger.dev>",
-        to: updatedUser.email,
-        subject: "Pro tips for workflows",
-        react: <TipsEmail name={updatedUser.name} />,
-      });
-    } else {
-      await resend.sendEmail("onboarding-incomplete", {
-        from: "Trigger.dev <james@email.trigger.dev>",
-        replyTo: "James <james@trigger.dev>",
-        to: updatedUser.email,
-        subject: "Help with your first workflow",
-        react: <InactiveEmail name={updatedUser.name} />,
-      });
-    }
-  },
-}).listen();
-```
-
-</details>
-
-[More examples here](https://docs.trigger.dev/examples/examples)
-
-&nbsp;
-
-# 👀 **Viewing runs:**
-
-One of the most powerful features of Trigger.dev is the [runs page](https://docs.trigger.dev/viewing-runs). All of the steps in a workflow, including the initial event, can be viewed in detail. See the status / output of each step, the logs, rich previews, errors and much more.
-
-![Viewing runs](https://mintlify.s3-us-west-1.amazonaws.com/api-hero/images/run-succeeded.png)
-
-
-&nbsp;
-
-# **🏠 Running Trigger.dev locally:**
-
-To run Trigger.dev locally, [follow these steps](https://github.com/triggerdotdev/trigger.dev/blob/main/DEVELOPMENT.md).
-
-&nbsp;
-
-# **👏 Contributing:**
-
-We are open source and love contributions!
-
-- Request a feature in our [Discord community](https://discord.gg/JtBAxBr2m3)
-- Open a PR
-
-&nbsp;
-
-# **🧘‍♂️ Self-hosting guide:**
-
-Please subscribe to the [GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues/48) to be notified when it's live.
-
-&nbsp;
-
-
-# **📧 Support & contact:**
-
-- Join our [Discord community](https://discord.gg/JtBAxBr2m3)
-- If you have any other questions, get in touch at [hello@trigger.dev](mailto:hello@trigger.dev)
+To setup and develop locally or contribute to the open source project, follow our [developement guide](./CONTRIBUTING.md).

apps/webapp/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

apps/webapp/.env.example

@@ -1,24 +0,0 @@
-DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres
-SESSION_SECRET=<random string>
-MAGIC_LINK_SECRET=<random string>
-GITHUB_CLIENT_ID=<random string>
-GITHUB_SECRET=<random string>
-FROM_EMAIL=<your email address>
-REPLY_TO_EMAIL=<your email address>
-RESEND_API_KEY=<RESEND_API_KEY>
-MERGENT_KEY=<Mergent key>
-LOGIN_ORIGIN=http://localhost:3000
-APP_ORIGIN=http://localhost:3000
-
-# Production Pulsar
-# PULSAR_SERVICE_URL="pulsar+ssl://<cluster>.<orgId>.snio.cloud:6651"
-# PULSAR_CLIENT_ID="<client id>"
-# PULSAR_CLIENT_SECRET="<client secret>"
-# PULSAR_ISSUER_URL="https://auth.streamnative.cloud/"
-# PULSAR_AUDIENCE="urn:sn:pulsar:<orgId>:<instanceName>"
-# PULSAR_TENANT="triggerdotdev"
-# PULSAR_WORKFLOWS_NAMESPACE="workflows"
-# PULSAR_QUEUES_NAMESPACE="queues"
-
-# Dev Pulsar
-PULSAR_SERVICE_URL="pulsar://localhost:6650"

apps/webapp/.eslintrc

@@ -1,7 +1,13 @@
 {
-  "extends": [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "prettier"
-  ]
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "prettier"],
+  "rules": {
+    "@typescript-eslint/strict-boolean-expressions": [
+      "error",
+      {
+        "allowNullableBoolean": true,
+        "allowNullableString": true,
+        "allowNullableNumber": true
+      }
+    ]
+  }
 }

apps/webapp/.gitignore

@@ -7,4 +7,14 @@ node_modules
 /cypress/screenshots
 /cypress/videos
 
-/app/styles/tailwind.css
+/app/styles/tailwind.css
+
+
+
+# Storybook build outputs
+build-storybook.log
+.out
+.storybook-out
+storybook-static
+
+/prisma/seed.js

apps/webapp/.storybook/main.ts

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+
+const root = path.resolve(__dirname, "../app");
+
+const config: StorybookConfig = {
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...(config.resolve?.alias ?? {}),
+          "~": root,
+        },
+        extensions: [
+          ...(config.resolve?.extensions ?? []),
+          ...[".ts", ".tsx", ".js", ".jsx", ".mdx"],
+        ],
+      },
+    };
+  },
+  stories: ["../app/**/stories/*.mdx", "../app/**/stories/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-variants",
+    "storybook-addon-designs",
+    "@storybook/addon-docs",
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
+        // For more details on this addon's options.
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: [path.resolve("public")],
+};
+export default config;

apps/webapp/.storybook/preview.tsx

@@ -0,0 +1,47 @@
+import type { Preview } from "@storybook/react";
+import "../app/tailwind.css";
+import { unstable_createRemixStub } from "@remix-run/testing";
+import React from "react";
+import { LocaleContextProvider } from "../app/components/primitives/LocaleProvider";
+import { OperatingSystemContextProvider } from "../app/components/primitives/OperatingSystemProvider";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      default: "App background",
+      values: [
+        {
+          name: "App background",
+          value: "#0B1018",
+        },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      const RemixStub = unstable_createRemixStub([
+        {
+          path: "/*",
+          element: <Story />,
+        },
+      ]);
+
+      return (
+        <OperatingSystemContextProvider platform="mac">
+          <LocaleContextProvider locales={window.navigator.languages as string[]}>
+            <RemixStub initialEntries={["/"]} />
+          </LocaleContextProvider>
+        </OperatingSystemContextProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

apps/webapp/Dockerfile

@@ -1,73 +0,0 @@
-FROM node:16-bullseye AS pruner
-RUN apt-get update && apt-get install openssl -y
-WORKDIR /app
-RUN npm install turbo@1.7.0 -g
-COPY . .
-RUN turbo prune --scope=webapp --docker
-RUN find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
-
-# Base strategy to have layer caching
-FROM node:16-bullseye AS base
-RUN apt-get update && apt-get install openssl ca-certificates g++ make wget python3 -y
-ENV PULSAR_CPP_CLIENT_VERSION=2.10.3
-RUN wget https://archive.apache.org/dist/pulsar/pulsar-${PULSAR_CPP_CLIENT_VERSION}/DEB/apache-pulsar-client.deb -q
-RUN wget https://archive.apache.org/dist/pulsar/pulsar-${PULSAR_CPP_CLIENT_VERSION}/DEB/apache-pulsar-client-dev.deb -q
-RUN dpkg -i ./apache-pulsar-client*.deb
-WORKDIR /app
-COPY .gitignore .gitignore
-COPY --from=pruner /app/out/json/ .
-COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
-COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
-
-FROM base AS production-deps
-WORKDIR /app
-RUN npm install turbo@1.7.0 -g
-RUN corepack enable
-ENV NODE_ENV production
-RUN npm config set python /usr/bin/python3
-COPY --from=pruner /app/out/full/apps/webapp/prisma/schema.prisma /app/apps/webapp/prisma/schema.prisma
-RUN pnpm install --prod --frozen-lockfile
-RUN pnpx prisma generate --schema /app/apps/webapp/prisma/schema.prisma
-
-FROM base AS builder
-WORKDIR /app
-RUN npm install turbo@1.7.0 -g
-COPY turbo.json turbo.json
-RUN corepack enable
-COPY --from=pruner /app/out/full/ .
-RUN npm config set python /usr/bin/python3
-ENV NODE_ENV development
-RUN pnpm install --ignore-scripts --frozen-lockfile
-ENV NODE_ENV production
-RUN pnpm run generate
-RUN pnpm run build --filter=webapp...
-RUN pnpx prisma migrate deploy --schema apps/webapp/prisma/schema.prisma
-
-# Runner
-FROM node:16-bullseye AS runner
-RUN apt-get update && apt-get install openssl ca-certificates g++ make wget python3 -y
-ENV PULSAR_CPP_CLIENT_VERSION=2.10.3
-RUN wget https://archive.apache.org/dist/pulsar/pulsar-${PULSAR_CPP_CLIENT_VERSION}/DEB/apache-pulsar-client.deb -q
-RUN wget https://archive.apache.org/dist/pulsar/pulsar-${PULSAR_CPP_CLIENT_VERSION}/DEB/apache-pulsar-client-dev.deb -q
-RUN dpkg -i ./apache-pulsar-client*.deb
-RUN npm install turbo -g
-WORKDIR /app
-RUN corepack enable
-ENV NODE_ENV production
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 remixjs
-RUN chown -R remixjs:nodejs /app
-USER remixjs
-
-COPY --from=pruner --chown=remixjs:nodejs /app/out/full/ .
-COPY --from=production-deps --chown=remixjs:nodejs /app .
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/app/styles/tailwind.css ./apps/webapp/app/styles/tailwind.css
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/build/server.js ./apps/webapp/build/server.js
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/build ./apps/webapp/build
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/public ./apps/webapp/public
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/prisma/schema.prisma ./apps/webapp/build/schema.prisma
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/prisma/migrations ./apps/webapp/build/migrations
-COPY --from=builder --chown=remixjs:nodejs /app/apps/webapp/node_modules/.prisma/client/libquery_engine-debian-openssl-1.1.x.so.node ./apps/webapp/build/libquery_engine-debian-openssl-1.1.x.so.node
-
-# release_command = "pnpx prisma migrate deploy --schema apps/webapp/prisma/schema.prisma"
-ENTRYPOINT ["pnpm", "--filter", "webapp", "run", "start"]

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

@@ -0,0 +1,12 @@
+export function DynamicTriggerIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.0151 4C2.01629 2.89543 2.91269 2.00097 4.01726 2.00216L16.0172 2.0151C17.1218 2.01629 18.0163 2.91269 18.0151 4.01726L18.0021 16.0172C18.001 17.1218 17.1046 18.0163 16 18.0151L4 18.0021C2.89543 18.001 2.00097 17.1046 2.00216 16L2.0151 4ZM9.26429 4.75782C9.26473 4.34361 9.60088 4.00818 10.0151 4.00863C10.4293 4.00907 10.7647 4.34522 10.7643 4.75944L10.7606 8.1988L13.1952 5.76942C13.4884 5.47684 13.9633 5.47735 14.2559 5.77056C14.5484 6.06377 14.5479 6.53864 14.2547 6.83122L11.8201 9.26058L15.2594 9.26429C15.6736 9.26473 16.0091 9.60088 16.0086 10.0151C16.0082 10.4293 15.672 10.7647 15.2578 10.7643L11.8185 10.7606L14.2478 13.1952C14.5404 13.4884 14.5399 13.9633 14.2467 14.2558C13.9535 14.5484 13.4786 14.5479 13.186 14.2547L10.7567 11.8201L10.753 15.2594C10.7525 15.6736 10.4164 16.0091 10.0022 16.0086C9.58794 16.0082 9.25252 15.672 9.25296 15.2578L9.25667 11.8185L6.82209 14.2478C6.52888 14.5404 6.05401 14.5399 5.76143 14.2467C5.46885 13.9535 5.46937 13.4786 5.76258 13.186L8.19718 10.7567L4.75782 10.753C4.34361 10.7525 4.00818 10.4164 4.00863 10.0022C4.00907 9.58794 4.34522 9.25252 4.75944 9.25296L8.19877 9.25667L5.76942 6.82207C5.47684 6.52886 5.47735 6.05399 5.77056 5.76141C6.06377 5.46883 6.53864 5.46935 6.83122 5.76255L9.26058 8.19716L9.26429 4.75782Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,13 @@
+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/assets/icons/ScheduleIcon.tsx

@@ -0,0 +1,6 @@
+import { CalendarDaysIcon } from "@heroicons/react/24/solid";
+import { cn } from "~/utils/cn";
+
+export function ScheduleIcon({ className }: { className?: string }) {
+  return <CalendarDaysIcon className={cn("text-sky-500", className)} />;
+}

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

@@ -0,0 +1,12 @@
+export function WebhookIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 190 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M97.1775 62.8673C96.7903 62.892 96.4025 62.9043 96.0145 62.9042C86.0767 62.9042 78.008 54.8167 78.008 44.8556C78.008 34.8946 86.0767 26.807 96.0145 26.807C105.952 26.807 114.021 34.8946 114.021 44.8556C114.027 48.9969 112.605 53.0129 109.996 56.2245L129.9 92.8984C134.805 91.1113 139.984 90.1972 145.203 90.1972C169.928 90.1972 190 110.317 190 135.099C190 159.881 169.928 180 145.203 180C136.454 179.997 127.896 177.435 120.577 172.628C119.792 172.117 119.128 171.439 118.632 170.642C118.136 169.846 117.82 168.95 117.706 168.019C117.593 167.087 117.684 166.141 117.974 165.249C118.263 164.356 118.745 163.538 119.384 162.851C119.397 162.837 119.411 162.822 119.437 162.819C120.511 161.665 121.955 160.925 123.518 160.727C125.08 160.53 126.662 160.888 127.989 161.738C133.116 165.067 139.095 166.838 145.203 166.838C162.68 166.838 176.868 152.616 176.868 135.099C176.868 117.581 162.68 103.36 145.203 103.36C139.151 103.36 130.562 106.013 125.398 109.298C125.132 109.498 124.826 109.639 124.502 109.71C124.177 109.781 123.841 109.781 123.516 109.711C123.191 109.64 122.885 109.5 122.619 109.301C122.352 109.101 122.132 108.846 121.973 108.554L97.1775 62.8673ZM88.9103 140.885C88.0018 146.036 86.2022 150.988 83.5926 155.517C71.2305 176.98 43.8113 184.345 22.3993 171.954C0.987294 159.563 -6.35938 132.079 6.0019 110.616C10.3798 103.023 16.8727 96.8744 24.6848 92.9248C25.5195 92.4994 26.4369 92.2623 27.3727 92.2302C28.3085 92.1981 29.24 92.3718 30.1017 92.739C30.9639 93.1059 31.7354 93.6575 32.3621 94.3552C32.9888 95.0529 33.4555 95.8797 33.7294 96.7775C33.7346 96.7969 33.7399 96.8153 33.7294 96.8391C34.1899 98.3489 34.1078 99.9727 33.4973 101.428C32.8868 102.883 31.7866 104.078 30.3881 104.804C24.9482 107.59 20.4286 111.894 17.3741 117.197C8.63613 132.367 13.829 151.795 28.9642 160.554C44.0994 169.313 63.4824 164.107 72.2204 148.936C75.2464 143.683 77.2482 134.9 76.9926 128.775C76.9519 128.444 76.9829 128.108 77.0835 127.79C77.1841 127.473 77.3519 127.18 77.5754 126.934C77.799 126.687 78.073 126.491 78.3788 126.36C78.6846 126.229 79.015 126.166 79.3475 126.175L131.219 127.494C131.39 127.148 131.573 126.805 131.769 126.466C136.737 117.84 147.759 114.879 156.366 119.859C164.974 124.841 167.926 135.888 162.957 144.515C157.988 153.141 146.966 156.101 138.359 151.12C134.778 149.055 132.019 145.813 130.548 141.943L88.9103 140.885ZM67.1689 79.2862C63.1721 75.9215 59.7926 71.8828 57.1827 67.3521C44.8205 45.8901 52.1672 18.4061 73.5792 6.01594C94.9912 -6.3742 122.411 0.98963 134.773 22.4507C139.144 30.0472 141.21 38.757 140.717 47.5127C140.667 48.4501 140.414 49.3652 139.973 50.1937C139.533 51.0222 138.917 51.7442 138.169 52.3088C137.421 52.8734 136.559 53.2671 135.643 53.4622C134.727 53.6572 133.779 53.649 132.866 53.438C132.847 53.4336 132.828 53.4283 132.812 53.4072C131.278 53.0521 129.916 52.169 128.964 50.9115C128.012 49.654 127.53 48.1018 127.602 46.5249C127.915 40.4094 126.456 34.3338 123.4 29.031C114.662 13.8614 95.2802 8.65544 80.145 17.4139C65.0107 26.1731 59.8161 45.6005 68.5549 60.771C71.5809 66.0244 78.1687 72.1539 83.5882 74.9942C83.8943 75.1245 84.1687 75.3194 84.3928 75.5657C84.617 75.8119 84.7855 76.1036 84.8871 76.421C84.9886 76.7384 85.0207 77.074 84.9812 77.405C84.9417 77.7359 84.8315 78.0544 84.6581 78.3389L57.5815 122.706C57.7958 123.027 58.0005 123.357 58.1963 123.696C63.1644 132.324 60.2113 143.371 51.6042 148.352C42.9979 153.332 31.9762 150.372 27.0072 141.745C22.0383 133.119 24.9914 122.071 33.5976 117.091C37.173 115.015 41.3538 114.241 45.4328 114.9L67.1689 79.2862Z"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/images/logo.svg

@@ -1,64 +1,192 @@
-<svg width="751" height="131" viewBox="0 0 751 131" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M195.022 16.2694H135.445H137.799V32.5133H157.858V102.411H174.84V32.5133H195.022V16.2694Z" fill="url(#paint0_linear_228_1439)"/>
-<path d="M211.265 51.4645V40.8814H195.391V102.411H211.265V73C211.265 60.0787 221.726 56.3868 229.971 57.3713V39.6508C222.218 39.6508 214.465 43.0964 211.265 51.4645Z" fill="url(#paint1_linear_228_1439)"/>
-<path d="M246.954 33.4978C252.368 33.4978 256.799 29.0676 256.799 23.7761C256.799 18.4845 252.368 13.9313 246.954 13.9313C241.662 13.9313 237.232 18.4845 237.232 23.7761C237.232 29.0676 241.662 33.4978 246.954 33.4978ZM239.078 102.411H254.953V40.8814H239.078V102.411Z" fill="url(#paint2_linear_228_1439)"/>
-<path d="M315.253 40.8814V48.5111C310.946 42.7273 304.301 39.1586 295.563 39.1586C278.089 39.1586 264.922 53.4335 264.922 70.6618C264.922 88.0133 278.089 102.165 295.563 102.165C304.301 102.165 310.946 98.5964 315.253 92.8126V99.4579C315.253 109.18 309.1 114.594 299.132 114.594C289.657 114.594 285.596 110.779 283.011 105.98L269.475 113.733C274.889 123.701 285.473 128.746 298.64 128.746C314.884 128.746 330.759 119.64 330.759 99.4579V40.8814H315.253ZM298.025 87.5211C288.057 87.5211 280.796 80.5066 280.796 70.6618C280.796 60.9401 288.057 53.9257 298.025 53.9257C307.992 53.9257 315.253 60.9401 315.253 70.6618C315.253 80.5066 307.992 87.5211 298.025 87.5211Z" fill="url(#paint3_linear_228_1439)"/>
-<path d="M390.936 40.8814V48.5111C386.629 42.7273 379.983 39.1586 371.246 39.1586C353.772 39.1586 340.604 53.4335 340.604 70.6618C340.604 88.0133 353.772 102.165 371.246 102.165C379.983 102.165 386.629 98.5964 390.936 92.8126V99.4579C390.936 109.18 384.783 114.594 374.815 114.594C365.339 114.594 361.278 110.779 358.694 105.98L345.157 113.733C350.572 123.701 361.155 128.746 374.323 128.746C390.566 128.746 406.441 119.64 406.441 99.4579V40.8814H390.936ZM373.707 87.5211C363.74 87.5211 356.479 80.5066 356.479 70.6618C356.479 60.9401 363.74 53.9257 373.707 53.9257C383.675 53.9257 390.936 60.9401 390.936 70.6618C390.936 80.5066 383.675 87.5211 373.707 87.5211Z" fill="url(#paint4_linear_228_1439)"/>
-<path d="M432.9 78.1685H479.294C479.663 76.0765 479.909 73.9845 479.909 71.6464C479.909 53.5566 466.988 39.1586 448.775 39.1586C429.454 39.1586 416.287 53.3105 416.287 71.6464C416.287 89.9822 429.331 104.134 450.005 104.134C461.819 104.134 471.049 99.3348 476.832 90.9667L464.034 83.5832C461.327 87.1519 456.404 89.7361 450.251 89.7361C441.883 89.7361 435.115 86.2904 432.9 78.1685ZM432.654 65.8625C434.5 57.9867 440.284 53.4335 448.775 53.4335C455.42 53.4335 462.065 57.0022 464.034 65.8625H432.654Z" fill="url(#paint5_linear_228_1439)"/>
-<path d="M505.199 51.4645V40.8814H489.324V102.411H505.199V73C505.199 60.0787 515.659 56.3868 523.904 57.3713V39.6508C516.151 39.6508 508.398 43.0964 505.199 51.4645Z" fill="url(#paint6_linear_228_1439)"/>
-<path d="M529.934 104.011C535.717 104.011 540.394 99.3347 540.394 93.5509C540.394 87.7671 535.717 83.0909 529.934 83.0909C524.15 83.0909 519.474 87.7671 519.474 93.5509C519.474 99.3347 524.15 104.011 529.934 104.011Z" fill="url(#paint7_linear_228_1439)"/>
-<path d="M596.632 16.2694V48.1419C592.202 42.4811 585.68 39.1586 576.696 39.1586C560.206 39.1586 546.67 53.3104 546.67 71.6463C546.67 89.9822 560.206 104.134 576.696 104.134C585.68 104.134 592.202 100.811 596.632 95.1507V102.411H612.507V16.2694L596.632 16.2694ZM579.65 88.9977C569.805 88.9977 562.544 81.9833 562.544 71.6463C562.544 61.3093 569.805 54.2948 579.65 54.2948C589.371 54.2948 596.632 61.3093 596.632 71.6463C596.632 81.9833 589.371 88.9977 579.65 88.9977Z" fill="url(#paint8_linear_228_1439)"/>
-<path d="M637.98 78.1685H684.374C684.743 76.0765 684.989 73.9845 684.989 71.6464C684.989 53.5566 672.068 39.1586 653.855 39.1586C634.534 39.1586 621.367 53.3105 621.367 71.6464C621.367 89.9823 634.411 104.134 655.085 104.134C666.899 104.134 676.129 99.3348 681.912 90.9667L669.114 83.5832C666.407 87.1519 661.484 89.7362 655.331 89.7362C646.963 89.7362 640.195 86.2905 637.98 78.1685ZM637.734 65.8625C639.58 57.9867 645.364 53.4335 653.855 53.4335C660.5 53.4335 667.145 57.0022 669.114 65.8625H637.734Z" fill="url(#paint9_linear_228_1439)"/>
-<path d="M732.859 40.8814L717.846 83.9523L702.956 40.8814H685.481L708.863 102.411H726.952L750.334 40.8814H732.859Z" fill="url(#paint10_linear_228_1439)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35.664 42.3995L59.4114 1.26865L118.264 103.206H0.558823L24.3062 62.0734L41.1046 71.7723L34.157 83.8065H84.6658L59.4114 40.0656L52.4638 52.0998L35.664 42.3995Z" fill="url(#paint11_linear_228_1439)"/>
-<defs>
-<linearGradient id="paint0_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint1_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint2_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint3_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint4_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint5_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint6_linear_228_1439" x1="329.675" y1="150.096" x2="329.675" y2="13.9313" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-<linearGradient id="paint7_linear_228_1439" x1="634.904" y1="139.733" x2="651.44" y2="25.9754" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2563EB"/>
-<stop offset="1" stop-color="#A855F7"/>
-</linearGradient>
-<linearGradient id="paint8_linear_228_1439" x1="634.904" y1="139.733" x2="651.44" y2="25.9754" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2563EB"/>
-<stop offset="1" stop-color="#A855F7"/>
-</linearGradient>
-<linearGradient id="paint9_linear_228_1439" x1="634.904" y1="139.733" x2="651.44" y2="25.9754" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2563EB"/>
-<stop offset="1" stop-color="#A855F7"/>
-</linearGradient>
-<linearGradient id="paint10_linear_228_1439" x1="634.904" y1="139.733" x2="651.44" y2="25.9754" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2563EB"/>
-<stop offset="1" stop-color="#A855F7"/>
-</linearGradient>
-<linearGradient id="paint11_linear_228_1439" x1="95.8594" y1="103.206" x2="94.7605" y2="31.2414" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41FF54"/>
-<stop offset="1" stop-color="#E7FF52"/>
-</linearGradient>
-</defs>
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="751"
+  height="131"
+  fill="none"
+  viewBox="0 0 751 131"
+>
+  <path
+    fill="url(#paint0_linear_228_1439)"
+    d="M195.022 16.27h-59.577 2.354v16.243h20.059v69.898h16.982V32.513h20.182V16.27z"
+  ></path>
+  <path
+    fill="url(#paint1_linear_228_1439)"
+    d="M211.265 51.465V40.88h-15.874v61.53h15.874V73c0-12.921 10.461-16.613 18.706-15.629v-17.72c-7.753 0-15.506 3.445-18.706 11.813z"
+  ></path>
+  <path
+    fill="url(#paint2_linear_228_1439)"
+    d="M246.954 33.498c5.414 0 9.845-4.43 9.845-9.722 0-5.291-4.431-9.845-9.845-9.845-5.292 0-9.722 4.554-9.722 9.845 0 5.292 4.43 9.722 9.722 9.722zm-7.876 68.913h15.875v-61.53h-15.875v61.53z"
+  ></path>
+  <path
+    fill="url(#paint3_linear_228_1439)"
+    d="M315.253 40.881v7.63c-4.307-5.784-10.952-9.352-19.69-9.352-17.474 0-30.641 14.275-30.641 31.503 0 17.351 13.167 31.503 30.641 31.503 8.738 0 15.383-3.569 19.69-9.352v6.645c0 9.722-6.153 15.136-16.121 15.136-9.475 0-13.536-3.815-16.121-8.614l-13.536 7.753c5.414 9.968 15.998 15.013 29.165 15.013 16.244 0 32.119-9.106 32.119-29.288V40.88h-15.506zm-17.228 46.64c-9.968 0-17.229-7.014-17.229-16.86 0-9.72 7.261-16.735 17.229-16.735 9.967 0 17.228 7.014 17.228 16.736 0 9.845-7.261 16.86-17.228 16.86z"
+  ></path>
+  <path
+    fill="url(#paint4_linear_228_1439)"
+    d="M390.936 40.881v7.63c-4.307-5.784-10.953-9.352-19.69-9.352-17.474 0-30.642 14.275-30.642 31.503 0 17.351 13.168 31.503 30.642 31.503 8.737 0 15.383-3.569 19.69-9.352v6.645c0 9.722-6.153 15.136-16.121 15.136-9.476 0-13.537-3.815-16.121-8.614l-13.537 7.753c5.415 9.968 15.998 15.013 29.166 15.013 16.243 0 32.118-9.106 32.118-29.288V40.88h-15.505zm-17.229 46.64c-9.967 0-17.228-7.014-17.228-16.86 0-9.72 7.261-16.735 17.228-16.735 9.968 0 17.229 7.014 17.229 16.736 0 9.845-7.261 16.86-17.229 16.86z"
+  ></path>
+  <path
+    fill="url(#paint5_linear_228_1439)"
+    d="M432.9 78.168h46.394c.369-2.092.615-4.184.615-6.522 0-18.09-12.921-32.487-31.134-32.487-19.321 0-32.488 14.151-32.488 32.487 0 18.336 13.044 32.488 33.718 32.488 11.814 0 21.044-4.8 26.827-13.167l-12.798-7.384c-2.707 3.569-7.63 6.153-13.783 6.153-8.368 0-15.136-3.446-17.351-11.568zm-.246-12.306c1.846-7.875 7.63-12.428 16.121-12.428 6.645 0 13.29 3.568 15.259 12.428h-31.38z"
+  ></path>
+  <path
+    fill="url(#paint6_linear_228_1439)"
+    d="M505.199 51.465V40.88h-15.875v61.53h15.875V73c0-12.921 10.46-16.613 18.705-15.629v-17.72c-7.753 0-15.506 3.445-18.705 11.813z"
+  ></path>
+  <path
+    fill="url(#paint7_linear_228_1439)"
+    d="M529.934 104.011c5.783 0 10.46-4.676 10.46-10.46 0-5.784-4.677-10.46-10.46-10.46a10.451 10.451 0 00-10.46 10.46c0 5.784 4.676 10.46 10.46 10.46z"
+  ></path>
+  <path
+    fill="url(#paint8_linear_228_1439)"
+    d="M596.632 16.27v31.872c-4.43-5.66-10.952-8.983-19.936-8.983-16.49 0-30.026 14.151-30.026 32.487 0 18.336 13.536 32.488 30.026 32.488 8.984 0 15.506-3.323 19.936-8.983v7.26h15.875V16.269h-15.875zM579.65 88.997c-9.845 0-17.106-7.015-17.106-17.352s7.261-17.351 17.106-17.351c9.721 0 16.982 7.014 16.982 17.351s-7.261 17.352-16.982 17.352z"
+  ></path>
+  <path
+    fill="url(#paint9_linear_228_1439)"
+    d="M637.98 78.168h46.394c.369-2.092.615-4.184.615-6.522 0-18.09-12.921-32.487-31.134-32.487-19.321 0-32.488 14.151-32.488 32.487 0 18.336 13.044 32.488 33.718 32.488 11.814 0 21.044-4.8 26.827-13.167l-12.798-7.384c-2.707 3.569-7.63 6.153-13.783 6.153-8.368 0-15.136-3.446-17.351-11.568zm-.246-12.306c1.846-7.875 7.63-12.428 16.121-12.428 6.645 0 13.29 3.568 15.259 12.428h-31.38z"
+  ></path>
+  <path
+    fill="url(#paint10_linear_228_1439)"
+    d="M732.859 40.881l-15.013 43.071-14.89-43.07h-17.475l23.382 61.529h18.089l23.382-61.53h-17.475z"
+  ></path>
+  <path
+    fill="url(#paint11_linear_228_1439)"
+    fillRule="evenodd"
+    d="M35.664 42.4L59.411 1.269l58.853 101.937H.559l23.747-41.133 16.799 9.7-6.948 12.034h50.509L59.41 40.066 52.464 52.1l-16.8-9.7z"
+    clipRule="evenodd"
+  ></path>
+  <defs>
+    <linearGradient
+      id="paint0_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint4_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint5_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint6_linear_228_1439"
+      x1="329.675"
+      x2="329.675"
+      y1="150.096"
+      y2="13.931"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint7_linear_228_1439"
+      x1="634.904"
+      x2="651.44"
+      y1="139.733"
+      y2="25.975"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#2563EB"></stop>
+      <stop offset="1" stopColor="#A855F7"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint8_linear_228_1439"
+      x1="634.904"
+      x2="651.44"
+      y1="139.733"
+      y2="25.975"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#2563EB"></stop>
+      <stop offset="1" stopColor="#A855F7"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint9_linear_228_1439"
+      x1="634.904"
+      x2="651.44"
+      y1="139.733"
+      y2="25.975"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#2563EB"></stop>
+      <stop offset="1" stopColor="#A855F7"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint10_linear_228_1439"
+      x1="634.904"
+      x2="651.44"
+      y1="139.733"
+      y2="25.975"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#2563EB"></stop>
+      <stop offset="1" stopColor="#A855F7"></stop>
+    </linearGradient>
+    <linearGradient
+      id="paint11_linear_228_1439"
+      x1="95.859"
+      x2="94.76"
+      y1="103.206"
+      y2="31.241"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stopColor="#41FF54"></stop>
+      <stop offset="1" stopColor="#E7FF52"></stop>
+    </linearGradient>
+  </defs>
+</svg>

apps/webapp/app/components/ComingSoon.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { MainCenteredContainer } from "./layout/AppLayout";
+import { Header2 } from "./primitives/Headers";
+import { NamedIconInBox } from "./primitives/NamedIcon";
+import { Paragraph } from "./primitives/Paragraph";
+
+type ComingSoonProps = {
+  title: string;
+  description: string;
+  icon: ReactNode;
+};
+
+export function ComingSoon({ title, description, icon }: ComingSoonProps) {
+  return (
+    <MainCenteredContainer>
+      <div className="flex flex-col justify-center rounded border border-slate-800 bg-slate-850">
+        <div className="flex items-center gap-2 border-b border-slate-750 px-4 py-4">
+          {typeof icon === "string" ? (
+            <NamedIconInBox name={icon} className={"h-10 w-10 bg-midnight-800"} />
+          ) : (
+            icon
+          )}
+          <div className="mt-0.5 flex flex-col gap-y-1">
+            <Paragraph variant="extra-extra-small/caps">Coming soon</Paragraph>
+            <Header2 className="-mt-0.5">{title}</Header2>
+          </div>
+        </div>
+        <Paragraph variant="small" className="p-4">
+          {description}
+        </Paragraph>
+      </div>
+    </MainCenteredContainer>
+  );
+}

apps/webapp/app/components/CopyText.tsx

@@ -1,28 +0,0 @@
-import React, { useCallback } from "react";
-
-export type CopyTextProps = {
-  children?: React.ReactNode;
-  value: string;
-  className?: string;
-  onCopied?: () => void;
-};
-
-export function CopyText({
-  children,
-  value,
-  className,
-  onCopied,
-}: CopyTextProps) {
-  const onClick = useCallback(() => {
-    navigator.clipboard.writeText(value);
-    if (onCopied) {
-      onCopied();
-    }
-  }, [value, onCopied]);
-
-  return (
-    <div onClick={onClick} className={`${className}`}>
-      {children}
-    </div>
-  );
-}

apps/webapp/app/components/CopyTextButton.tsx

@@ -1,59 +0,0 @@
-import { ClipboardIcon } from "@heroicons/react/24/outline";
-import classNames from "classnames";
-import { useCallback, useState } from "react";
-import { CopyText } from "./CopyText";
-
-const variantStyle = {
-  slate:
-    "bg-slate-800 text-white rounded px-2 py-1 transition hover:text-slate-700 hover:bg-slate-700 hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
-  blue: "text-sm bg-indigo-700 rounded px-3 py-2 transition text-white hover:bg-indigo-600 active:bg-indigo-800 active:text-indigo-100 focus-visible:outline-indigo-600",
-  darkTransparent:
-    "bg-black/10 text-slate-900 rounded px-2 py-1 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
-  lightTransparent:
-    "bg-white/10 text-white-900 rounded px-2 py-1 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
-  text: "text-sm text-slate-300 transition hover:text-slate-400",
-};
-
-export type CopyTextButtonProps = {
-  value: string;
-  className?: string;
-  variant?: "slate" | "blue" | "darkTransparent" | "lightTransparent" | "text";
-};
-
-export function CopyTextButton({
-  value,
-  className,
-  variant = "blue",
-}: CopyTextButtonProps) {
-  const [copied, setCopied] = useState(false);
-  const onCopied = useCallback(() => {
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 1500);
-  }, [setCopied]);
-  return (
-    <CopyText className={`${className}`} value={value} onCopied={onCopied}>
-      {copied ? (
-        <div
-          className={classNames(
-            "flex items-center hover:cursor-pointer",
-            variantStyle[variant]
-          )}
-        >
-          <p className="font-sans">Copied!</p>
-        </div>
-      ) : (
-        <div
-          className={classNames(
-            "flex items-center hover:cursor-pointer",
-            variantStyle[variant]
-          )}
-        >
-          <ClipboardIcon className="mr-[2px] h-4 w-4" />
-          <p className="font-sans">Copy</p>
-        </div>
-      )}
-    </CopyText>
-  );
-}

apps/webapp/app/components/CreateNewWorkflow.tsx

@@ -1,73 +0,0 @@
-import { Tab } from "@headlessui/react";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
-import { Underlined, UnderlinedList } from "~/components/primitives/Tabs";
-import { useCurrentOrganization } from "~/hooks/useOrganizations";
-import CodeBlock from "./code/CodeBlock";
-import { PrimaryLink, SecondaryA } from "./primitives/Buttons";
-import { SubTitle } from "./primitives/text/SubTitle";
-
-export function CreateNewWorkflow() {
-  const currentOrganization = useCurrentOrganization();
-  if (currentOrganization === undefined) {
-    return <></>;
-  }
-  return (
-    <>
-      <SubTitle>Create a new workflow</SubTitle>
-      <div className="flex gap-2">
-        <PrimaryLink
-          to={`/orgs/${currentOrganization.slug}/workflows/new`}
-          rel="noreferrer"
-        >
-          Create a workflow
-        </PrimaryLink>
-        <SecondaryA
-          href="https://docs.trigger.dev"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-          <span>Documentation</span>
-        </SecondaryA>
-      </div>
-    </>
-  );
-}
-
-export function InstallPackages({ packages }: { packages: string }) {
-  return (
-    <Tab.Group>
-      <UnderlinedList>
-        <Underlined>npm</Underlined>
-        <Underlined>pnpm</Underlined>
-        <Underlined>yarn</Underlined>
-      </UnderlinedList>
-      <Tab.Panels className="flex-grow">
-        <Tab.Panel className="relative h-full">
-          <CodeBlock
-            code={`npm install ${packages}`}
-            language="bash"
-            align="top"
-            showLineNumbers={false}
-          />
-        </Tab.Panel>
-        <Tab.Panel className="relative h-full">
-          <CodeBlock
-            code={`pnpm add ${packages}`}
-            language="bash"
-            align="top"
-            showLineNumbers={false}
-          />
-        </Tab.Panel>
-        <Tab.Panel className="relative h-full">
-          <CodeBlock
-            code={`yarn add ${packages}`}
-            language="bash"
-            align="top"
-            showLineNumbers={false}
-          />
-        </Tab.Panel>
-      </Tab.Panels>
-    </Tab.Group>
-  );
-}

apps/webapp/app/components/ErrorDisplay.tsx

@@ -0,0 +1,50 @@
+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/Feedback.tsx

@@ -0,0 +1,103 @@
+import { conform, useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
+import { ReactNode, useState } from "react";
+import { FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
+import { Button } from "./primitives/Buttons";
+import { Fieldset } from "./primitives/Fieldset";
+import { FormButtons } from "./primitives/FormButtons";
+import { FormError } from "./primitives/FormError";
+import { InputGroup } from "./primitives/InputGroup";
+import { Label } from "./primitives/Label";
+import { Paragraph } from "./primitives/Paragraph";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./primitives/Select";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "./primitives/Sheet";
+import { TextArea } from "./primitives/TextArea";
+
+type FeedbackProps = {
+  button: ReactNode;
+  defaultValue?: FeedbackType;
+};
+
+export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+  const lastSubmission = useActionData();
+  const navigation = useNavigation();
+
+  const [form, { path, feedbackType, message }] = useForm({
+    id: "accept-invite",
+    lastSubmission,
+    onValidate({ formData }) {
+      return parse(formData, { schema });
+    },
+  });
+
+  if (
+    open &&
+    navigation.formAction === "/resources/feedback" &&
+    form.error === undefined &&
+    form.errors.length === 0
+  ) {
+    setOpen(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild={true}>{button}</SheetTrigger>
+      <SheetContent size="sm">
+        <SheetHeader className="justify-between">Help & feedback</SheetHeader>
+        <SheetBody>
+          <Paragraph variant="small" className="mb-4">
+            Use this form to ask for help or give us feedback. We read every message and will get
+            back to you as soon as we can.
+          </Paragraph>
+          <Form method="post" action="/resources/feedback" {...form.props}>
+            <Fieldset>
+              <input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
+              <InputGroup>
+                <Label>How can we help?</Label>
+                <SelectGroup>
+                  <Select {...conform.input(feedbackType)} defaultValue={defaultValue}>
+                    <SelectTrigger size="medium" width="full">
+                      <SelectValue placeholder="Type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(feedbackTypeLabel).map(([key, value]) => (
+                        <SelectItem key={key} value={key}>
+                          {value}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </SelectGroup>
+                <FormError id={feedbackType.errorId}>{feedbackType.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label>Message</Label>
+                <TextArea {...conform.textarea(message)} />
+                <FormError id={message.errorId}>{message.error}</FormError>
+              </InputGroup>
+              <FormError>{form.error}</FormError>
+              <FormButtons
+                className="max-w-md"
+                confirmButton={
+                  <Button type="submit" variant="primary/medium">
+                    Send
+                  </Button>
+                }
+              />
+            </Fieldset>
+          </Form>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/webapp/app/components/GitHubLoginButton.tsx

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import { cn } from "~/utils/cn";
 
 type GitHubLoginButtonProps = {
   label?: string;
@@ -13,8 +13,8 @@ export function GitHubLoginButton({
 }: GitHubLoginButtonProps) {
   return (
     <button
-      className={classNames(
-        "flex items-center justify-center gap-2 rounded-md bg-indigo-800 py-3 pl-5 pr-6 text-lg font-medium text-white hover:bg-indigo-700 transition",
+      className={cn(
+        "flex items-center justify-center gap-2 rounded-md bg-indigo-800 py-3 pl-5 pr-6 text-lg font-medium text-white transition hover:bg-indigo-700",
         className
       )}
       onClick={onClick}

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/ImpersonationBanner.tsx

@@ -1,20 +1,28 @@
-import { TertiaryA } from "./primitives/Buttons";
-import { Body } from "./primitives/text/Body";
+import { Form } from "@remix-run/react";
+import { Paragraph } from "./primitives/Paragraph";
+import { Button } from "./primitives/Buttons";
 
-export function ImpersonationBanner() {
+export function ImpersonationBanner({ impersonationId }: { impersonationId: string }) {
   return (
-    <div className="grid grid-cols-3 items-center bg-gradient-to-r from-amber-500 via-amber-400 to-amber-500 text-center px-4">
+    <div className="grid h-8 grid-cols-3 items-center bg-gradient-to-r from-amber-500 via-amber-400 to-amber-500 px-4 text-center">
       <span></span>
-      <Body size="small" className="text-slate-800">
-        You are impersonating{" "}
-        <span className="font-semibold">James Ritchie</span>
-      </Body>
-      <TertiaryA
-        href="/api/auth/logout"
-        className="justify-self-end text-slate-700 hover:!text-slate-900"
+      <Paragraph variant="small">
+        You are impersonating <span className="font-semibold">{impersonationId}</span>
+      </Paragraph>
+      <Form
+        action="/resources/impersonation"
+        method="delete"
+        reloadDocument
+        className="justify-self-end"
       >
-        Stop impersonating
-      </TertiaryA>
+        <Button
+          type="submit"
+          className="!text-slate-700 transition hover:!text-slate-900"
+          variant="secondary/small"
+        >
+          Stop impersonating
+        </Button>
+      </Form>
     </div>
   );
 }

apps/webapp/app/components/LoginPromoPanel.tsx

@@ -1,73 +0,0 @@
-import {
-  EyeIcon,
-  BoltIcon,
-  BanknotesIcon,
-  BellAlertIcon,
-  WrenchScrewdriverIcon,
-  BeakerIcon,
-  CloudArrowUpIcon,
-} from "@heroicons/react/24/outline";
-
-export function LoginPromoPanel() {
-  return (
-    <div className="hidden lg:flex flex-col justify-center p-12 max-w-[30vw] h-full bg-slate-950 border-r border-black/20">
-      <ul>
-        <li className="flex gap-2 text-white">
-          <div className="flex flex-col items-center gap-2 mt-1.5">
-            <WrenchScrewdriverIcon className="h-8 w-8 text-toxic" />
-            <div className="w-0.5 h-full bg-toxic/50"></div>
-          </div>
-
-          <div className="mb-1">
-            <h2 className="font-semibold text-2xl mb-2">Create</h2>
-            <p className="mb-10 text-white/60">
-              Write workflows by creating triggers directly in your code. These
-              can be 3rd-party integrations, custom events or on a schedule.
-            </p>
-          </div>
-        </li>
-        <li className="flex gap-2 text-white">
-          <div className="flex flex-col items-center gap-2 mt-1.5">
-            <BoltIcon className="h-8 w-8 text-toxic" />
-            <div className="w-0.5 h-full bg-toxic/50"></div>
-          </div>
-
-          <div className="mb-1">
-            <h2 className="font-semibold text-2xl mb-2">Run</h2>
-            <p className="mb-10 text-white/60">
-              When your server runs, your workflow will be registered and you
-              can authenticate with any APIs you’re using.
-            </p>
-          </div>
-        </li>
-        <li className="flex gap-2 text-white">
-          <div className="flex flex-col items-center gap-2 mt-1.5">
-            <BeakerIcon className="h-8 w-8 text-toxic" />
-            <div className="w-0.5 h-full bg-toxic/50"></div>
-          </div>
-          <div className="mb-1">
-            <h2 className="font-semibold text-2xl mb-2">Test</h2>
-            <p className="mb-10 text-white/60">
-              Test your workflow by triggering them manually in your dashboard.
-              Follow it as it runs step-by-step.
-            </p>
-          </div>
-        </li>
-
-        <li className="flex gap-3 text-white">
-          <div className="flex flex-col items-center gap-2 mt-1.5">
-            <CloudArrowUpIcon className="ml-0.5 h-7 w-7 text-toxic" />
-          </div>
-
-          <div className="mb-1">
-            <h2 className="font-semibold text-2xl mb-2">Deploy</h2>
-            <p className="mb-10 text-white/60">
-              Deploy your new workflow as you would any other code commit and
-              inspect each workflow run in real time.
-            </p>
-          </div>
-        </li>
-      </ul>
-    </div>
-  );
-}

apps/webapp/app/components/Logo.tsx

@@ -1,209 +0,0 @@
-import logoImage from "../assets/images/logo.png";
-
-export function Logo({
-  className,
-  width = "100%",
-}: {
-  className?: string;
-  width?: string;
-}) {
-  return <img src={logoImage} alt="Logo" className={className} width={width} />;
-}
-
-export function LogoSvg({ className }: { className?: string }) {
-  return (
-    <svg
-      width="751"
-      height="131"
-      viewBox="0 0 751 131"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M195.022 16.2694H135.445H137.799V32.5133H157.858V102.411H174.84V32.5133H195.022V16.2694Z"
-        fill="url(#paint0_linear_228_1439)"
-      />
-      <path
-        d="M211.265 51.4645V40.8814H195.391V102.411H211.265V73C211.265 60.0787 221.726 56.3868 229.971 57.3713V39.6508C222.218 39.6508 214.465 43.0964 211.265 51.4645Z"
-        fill="url(#paint1_linear_228_1439)"
-      />
-      <path
-        d="M246.954 33.4978C252.368 33.4978 256.799 29.0676 256.799 23.7761C256.799 18.4845 252.368 13.9313 246.954 13.9313C241.662 13.9313 237.232 18.4845 237.232 23.7761C237.232 29.0676 241.662 33.4978 246.954 33.4978ZM239.078 102.411H254.953V40.8814H239.078V102.411Z"
-        fill="url(#paint2_linear_228_1439)"
-      />
-      <path
-        d="M315.253 40.8814V48.5111C310.946 42.7273 304.301 39.1586 295.563 39.1586C278.089 39.1586 264.922 53.4335 264.922 70.6618C264.922 88.0133 278.089 102.165 295.563 102.165C304.301 102.165 310.946 98.5964 315.253 92.8126V99.4579C315.253 109.18 309.1 114.594 299.132 114.594C289.657 114.594 285.596 110.779 283.011 105.98L269.475 113.733C274.889 123.701 285.473 128.746 298.64 128.746C314.884 128.746 330.759 119.64 330.759 99.4579V40.8814H315.253ZM298.025 87.5211C288.057 87.5211 280.796 80.5066 280.796 70.6618C280.796 60.9401 288.057 53.9257 298.025 53.9257C307.992 53.9257 315.253 60.9401 315.253 70.6618C315.253 80.5066 307.992 87.5211 298.025 87.5211Z"
-        fill="url(#paint3_linear_228_1439)"
-      />
-      <path
-        d="M390.936 40.8814V48.5111C386.629 42.7273 379.983 39.1586 371.246 39.1586C353.772 39.1586 340.604 53.4335 340.604 70.6618C340.604 88.0133 353.772 102.165 371.246 102.165C379.983 102.165 386.629 98.5964 390.936 92.8126V99.4579C390.936 109.18 384.783 114.594 374.815 114.594C365.339 114.594 361.278 110.779 358.694 105.98L345.157 113.733C350.572 123.701 361.155 128.746 374.323 128.746C390.566 128.746 406.441 119.64 406.441 99.4579V40.8814H390.936ZM373.707 87.5211C363.74 87.5211 356.479 80.5066 356.479 70.6618C356.479 60.9401 363.74 53.9257 373.707 53.9257C383.675 53.9257 390.936 60.9401 390.936 70.6618C390.936 80.5066 383.675 87.5211 373.707 87.5211Z"
-        fill="url(#paint4_linear_228_1439)"
-      />
-      <path
-        d="M432.9 78.1685H479.294C479.663 76.0765 479.909 73.9845 479.909 71.6464C479.909 53.5566 466.988 39.1586 448.775 39.1586C429.454 39.1586 416.287 53.3105 416.287 71.6464C416.287 89.9822 429.331 104.134 450.005 104.134C461.819 104.134 471.049 99.3348 476.832 90.9667L464.034 83.5832C461.327 87.1519 456.404 89.7361 450.251 89.7361C441.883 89.7361 435.115 86.2904 432.9 78.1685ZM432.654 65.8625C434.5 57.9867 440.284 53.4335 448.775 53.4335C455.42 53.4335 462.065 57.0022 464.034 65.8625H432.654Z"
-        fill="url(#paint5_linear_228_1439)"
-      />
-      <path
-        d="M505.199 51.4645V40.8814H489.324V102.411H505.199V73C505.199 60.0787 515.659 56.3868 523.904 57.3713V39.6508C516.151 39.6508 508.398 43.0964 505.199 51.4645Z"
-        fill="url(#paint6_linear_228_1439)"
-      />
-      <path
-        d="M529.934 104.011C535.717 104.011 540.394 99.3347 540.394 93.5509C540.394 87.7671 535.717 83.0909 529.934 83.0909C524.15 83.0909 519.474 87.7671 519.474 93.5509C519.474 99.3347 524.15 104.011 529.934 104.011Z"
-        fill="url(#paint7_linear_228_1439)"
-      />
-      <path
-        d="M596.632 16.2694V48.1419C592.202 42.4811 585.68 39.1586 576.696 39.1586C560.206 39.1586 546.67 53.3104 546.67 71.6463C546.67 89.9822 560.206 104.134 576.696 104.134C585.68 104.134 592.202 100.811 596.632 95.1507V102.411H612.507V16.2694L596.632 16.2694ZM579.65 88.9977C569.805 88.9977 562.544 81.9833 562.544 71.6463C562.544 61.3093 569.805 54.2948 579.65 54.2948C589.371 54.2948 596.632 61.3093 596.632 71.6463C596.632 81.9833 589.371 88.9977 579.65 88.9977Z"
-        fill="url(#paint8_linear_228_1439)"
-      />
-      <path
-        d="M637.98 78.1685H684.374C684.743 76.0765 684.989 73.9845 684.989 71.6464C684.989 53.5566 672.068 39.1586 653.855 39.1586C634.534 39.1586 621.367 53.3105 621.367 71.6464C621.367 89.9823 634.411 104.134 655.085 104.134C666.899 104.134 676.129 99.3348 681.912 90.9667L669.114 83.5832C666.407 87.1519 661.484 89.7362 655.331 89.7362C646.963 89.7362 640.195 86.2905 637.98 78.1685ZM637.734 65.8625C639.58 57.9867 645.364 53.4335 653.855 53.4335C660.5 53.4335 667.145 57.0022 669.114 65.8625H637.734Z"
-        fill="url(#paint9_linear_228_1439)"
-      />
-      <path
-        d="M732.859 40.8814L717.846 83.9523L702.956 40.8814H685.481L708.863 102.411H726.952L750.334 40.8814H732.859Z"
-        fill="url(#paint10_linear_228_1439)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M35.664 42.3995L59.4114 1.26865L118.264 103.206H0.558823L24.3062 62.0734L41.1046 71.7723L34.157 83.8065H84.6658L59.4114 40.0656L52.4638 52.0998L35.664 42.3995Z"
-        fill="url(#paint11_linear_228_1439)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint2_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint3_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint4_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint5_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint6_linear_228_1439"
-          x1="329.675"
-          y1="150.096"
-          x2="329.675"
-          y2="13.9313"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-        <linearGradient
-          id="paint7_linear_228_1439"
-          x1="634.904"
-          y1="139.733"
-          x2="651.44"
-          y2="25.9754"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#2563EB" />
-          <stop offset="1" stopColor="#A855F7" />
-        </linearGradient>
-        <linearGradient
-          id="paint8_linear_228_1439"
-          x1="634.904"
-          y1="139.733"
-          x2="651.44"
-          y2="25.9754"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#2563EB" />
-          <stop offset="1" stopColor="#A855F7" />
-        </linearGradient>
-        <linearGradient
-          id="paint9_linear_228_1439"
-          x1="634.904"
-          y1="139.733"
-          x2="651.44"
-          y2="25.9754"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#2563EB" />
-          <stop offset="1" stopColor="#A855F7" />
-        </linearGradient>
-        <linearGradient
-          id="paint10_linear_228_1439"
-          x1="634.904"
-          y1="139.733"
-          x2="651.44"
-          y2="25.9754"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#2563EB" />
-          <stop offset="1" stopColor="#A855F7" />
-        </linearGradient>
-        <linearGradient
-          id="paint11_linear_228_1439"
-          x1="95.8594"
-          y1="103.206"
-          x2="94.7605"
-          y2="31.2414"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#41FF54" />
-          <stop offset="1" stopColor="#E7FF52" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-}

apps/webapp/app/components/LogoIcon.tsx

@@ -0,0 +1,32 @@
+export function LogoIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="321"
+      height="282"
+      viewBox="0 0 321 282"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M96.1017 113.4L160.679 4.57764e-05L320.718 281.045H0.638916L65.2159 167.642L110.896 194.382L92.0035 227.561H229.354L160.679 106.965L141.786 140.144L96.1017 113.4Z"
+        fill="url(#paint0_linear_465_1663)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_465_1663"
+          x1="320.718"
+          y1="140.687"
+          x2="0.638918"
+          y2="140.687"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#41FF54" />
+          <stop offset="1" stopColor="#E7FF52" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

apps/webapp/app/components/NoMobileOverlay.tsx

@@ -1,19 +1,19 @@
 import { XMarkIcon, DevicePhoneMobileIcon } from "@heroicons/react/24/outline";
-import { PrimaryA } from "./primitives/Buttons";
-import { Body } from "./primitives/text/Body";
+import { Paragraph } from "./primitives/Paragraph";
+import { LinkButton } from "./primitives/Buttons";
 
 export function NoMobileOverlay() {
   return (
     <>
       <div className="fixed inset-0 z-[9999] flex items-center justify-center sm:hidden">
-        <div className="relative bg-black opacity-90 h-full w-full"></div>
-        <div className="absolute flex flex-col gap-6 mx-8 items-center bg-slate-850 px-8 py-10 text-center rounded-lg">
+        <div className="relative h-full w-full bg-black opacity-90"></div>
+        <div className="absolute mx-8 flex flex-col items-center gap-6 rounded-lg bg-slate-850 px-8 py-10 text-center">
           <XMarkIcon className="absolute top-14 h-8 w-8 text-rose-600" />
           <DevicePhoneMobileIcon className="h-16 w-16 text-slate-500" />
-          <Body className="text-slate-300">
-            Trigger.dev is currently only available on desktop.
-          </Body>
-          <PrimaryA href="https://trigger.dev">Back Home</PrimaryA>
+          <Paragraph>Trigger.dev is currently only available on desktop.</Paragraph>
+          <LinkButton to="https://trigger.dev" variant="primary/medium">
+            Back Home
+          </LinkButton>
         </div>
       </div>
     </>

apps/webapp/app/components/ProductHuntBanner.tsx

@@ -0,0 +1,24 @@
+import productHuntLogo from "../assets/images/producthunt.png";
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { Paragraph } from "./primitives/Paragraph";
+import { LinkButton } from "./primitives/Buttons";
+
+export function ProductHuntBanner() {
+  return (
+    <div className="flex h-8 items-center justify-center gap-2 bg-[#ff6154]">
+      <Paragraph variant="small" className="text-white">
+        We're live on{" "}
+      </Paragraph>
+      <img src={productHuntLogo} alt="Product Hunt" className="h-6 w-[122px]" />
+      <ArrowRightIcon className="h-4 w-4 text-white" />
+      <LinkButton
+        to="https://www.producthunt.com/posts/trigger-dev"
+        target="_blank"
+        className="!text-white underline underline-offset-2 transition hover:decoration-slate-100 hover:decoration-2"
+        variant="tertiary/small"
+      >
+        Vote for us today only!
+      </LinkButton>
+    </div>
+  );
+}

apps/webapp/app/components/UserProfileMenu.tsx

@@ -1,59 +0,0 @@
-import { Menu, Transition } from "@headlessui/react";
-import classnames from "classnames";
-import type { User } from "~/models/user.server";
-import { Body } from "./primitives/text/Body";
-import { UserProfilePhoto } from "./UserProfilePhoto";
-
-const userNavigation = [{ name: "Logout", href: "/logout" }];
-
-export function UserProfileMenu({ user }: { user: User }) {
-  return (
-    <Menu as="div" className="relative z-50 ml-1">
-      <div>
-        <Menu.Button className="transitions flex max-w-xs items-center rounded-full bg-white text-sm">
-          <span className="sr-only">Open user menu</span>
-          <UserProfilePhoto user={user} className="h-7 w-7" />
-        </Menu.Button>
-      </div>
-      <Transition
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 mt-2 w-48 origin-top-right rounded-md overflow-hidden bg-slate-700 pb-1 pt-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          {user.name ? (
-            <Body
-              size="small"
-              className="mb-1 block border-b border-slate-800 py-2 pl-4 pr-1 font-semibold"
-            >
-              {user.name}
-            </Body>
-          ) : (
-            <Body className="mb-1 block border-b border-slate-800 py-2 pl-4 pr-1 font-semibold">
-              {user.email}
-            </Body>
-          )}
-
-          {userNavigation.map((item) => (
-            <Menu.Item key={item.name}>
-              {({ active }) => (
-                <a
-                  href={item.href}
-                  className={classnames(
-                    active ? "bg-rose-200 text-rose-700" : "",
-                    "mx-1 block rounded p-2 pl-3 text-sm text-slate-300"
-                  )}
-                >
-                  {item.name}
-                </a>
-              )}
-            </Menu.Item>
-          ))}
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-}

apps/webapp/app/components/UserProfilePhoto.tsx

@@ -1,21 +1,30 @@
 import { UserCircleIcon } from "@heroicons/react/24/solid";
-import classNames from "classnames";
-import type { User } from "~/models/user.server";
+import { useOptionalUser } from "~/hooks/useUser";
+import { cn } from "~/utils/cn";
 
-export function UserProfilePhoto({
-  user,
+export function UserProfilePhoto({ className }: { className?: string }) {
+  const user = useOptionalUser();
+  return <UserAvatar avatarUrl={user?.avatarUrl} name={user?.name} className={className} />;
+}
+
+export function UserAvatar({
+  avatarUrl,
+  name,
   className,
 }: {
-  user: User;
+  avatarUrl?: string | null;
+  name?: string | null;
   className?: string;
 }) {
-  return user.avatarUrl ? (
-    <img
-      className={classNames("rounded-full", className)}
-      src={user.avatarUrl}
-      alt={user.name ?? user.displayName ?? "User"}
-    />
+  return avatarUrl ? (
+    <div className={cn("grid aspect-square place-items-center", className)}>
+      <img
+        className={cn("aspect-square rounded-full p-[7%]")}
+        src={avatarUrl}
+        alt={name ?? "User"}
+      />
+    </div>
   ) : (
-    <UserCircleIcon className={classNames("text-gray-400", className)} />
+    <UserCircleIcon className={cn("aspect-square text-slate-400", className)} />
   );
 }

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

@@ -1,59 +0,0 @@
-type Props = Omit<
-  React.DetailedHTMLProps<
-    React.ImgHTMLAttributes<HTMLImageElement>,
-    HTMLImageElement
-  >,
-  "src" | "alt"
-> & {
-  integration?: { icon: string; name: string };
-  size?: Size;
-};
-
-type Size =
-  | "extra-small"
-  | "small"
-  | "regular"
-  | "large"
-  | "extra-large"
-  | "custom";
-
-export function ApiLogoIcon({
-  className,
-  integration,
-  size = "extra-large",
-  ...props
-}: Props) {
-  if (!integration) {
-    return null;
-  }
-  return (
-    <img
-      className={`
-        rounded bg-slate-850
-        ${getSizeClassName(size)}
-        ${className}
-      `}
-      src={integration.icon}
-      alt={integration.name}
-      {...props}
-    />
-  );
-}
-
-function getSizeClassName(size: Size) {
-  switch (size) {
-    case "extra-small":
-      return "h-6 w-6 p-2";
-    case "small":
-      return "h-8 w-8 p-2";
-    case "large":
-      return "h-16 w-16 p-2";
-    case "extra-large":
-      return "h-20 w-20 p-2";
-    case "custom":
-      return "";
-    case "regular":
-    default:
-      return "h-10 w-10 p-2";
-  }
-}

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

@@ -1,83 +1,353 @@
-import { useEffect, useRef, useState } from "react";
-import Prism from "prismjs";
-import "prismjs/components/prism-typescript";
-import "prismjs/components/prism-json";
-import "prismjs/components/prism-bash";
-import "prismjs/plugins/line-numbers/prism-line-numbers";
-import "prismjs/plugins/line-numbers/prism-line-numbers.css";
-import { CopyTextButton } from "../CopyTextButton";
-import classNames from "classnames";
+import type { Language, PrismTheme } from "prism-react-renderer";
+import Highlight, { defaultProps } from "prism-react-renderer";
+import { forwardRef, useCallback, useState } from "react";
+import { cn } from "~/utils/cn";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { ClipboardDocumentCheckIcon, ClipboardIcon } from "@heroicons/react/24/solid";
+import { Clipboard, ClipboardCheck, ClipboardCheckIcon } from "lucide-react";
 
-Prism.manual = true;
+//This is a fork of https://github.com/mantinedev/mantine/blob/master/src/mantine-prism/src/Prism/Prism.tsx
+//it didn't support highlighting lines by dimming the rest of the code, or animations on the highlighting
 
 type CodeBlockProps = {
+  /** Code which will be highlighted */
   code: string;
-  language?: "typescript" | "json" | "bash";
+
+  /** Programming language that should be highlighted */
+  language?: Language;
+
+  /** Show copy to clipboard button */
   showCopyButton?: boolean;
-  align?: "top" | "center";
-  maxHeight?: string;
+
+  /** Display line numbers */
   showLineNumbers?: boolean;
+
+  /** Highlight line at given line number with color from theme.colors */
+  highlightedRanges?: [number, number][];
+
+  /** Add/override classes on the overall element */
   className?: string;
+
+  /** Add/override code theme */
+  theme?: PrismTheme;
+
+  /** Max lines */
+  maxLines?: number;
+
+  /** Whether to show the chrome, if you provide a string it will be used as the title, */
+  showChrome?: boolean;
+
+  /** filename */
+  fileName?: string;
 };
 
-export default function CodeBlock({
-  code,
-  language = "typescript",
-  showCopyButton = true,
-  align = "center",
-  maxHeight,
-  showLineNumbers = true,
-  className,
-}: CodeBlockProps) {
-  const codeRef = useRef<HTMLPreElement>(null);
-  const [isCollapsed, setIsCollapsed] = useState(
-    maxHeight === undefined ? false : true
-  );
-  useEffect(() => {
-    if (!codeRef.current) {
-      return;
-    }
-    Prism.highlightAllUnder(codeRef.current);
-  }, [code, language, codeRef]);
+const dimAmount = 0.5;
+const extraLinesWhenClipping = 0.35;
 
-  return (
-    <div
-      className={classNames(
-        "relative rounded-md bg-[#0F172A] pl-2",
-        className,
-        isCollapsed ? "overflow-hidden" : ""
-      )}
-      style={{ maxHeight: isCollapsed ? maxHeight : undefined }}
-    >
-      <pre
-        className={classNames(showLineNumbers && `line-numbers`)}
-        ref={codeRef}
+const defaultTheme: PrismTheme = {
+  plain: {
+    color: "#9CDCFE",
+    backgroundColor: "#0e1521",
+  },
+  styles: [
+    {
+      types: ["prolog"],
+      style: {
+        color: "rgb(0, 0, 128)",
+      },
+    },
+    {
+      types: ["comment"],
+      style: {
+        color: "rgb(106, 153, 85)",
+      },
+    },
+    {
+      types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+      style: {
+        color: "rgb(86, 156, 214)",
+      },
+    },
+    {
+      types: ["number", "inserted"],
+      style: {
+        color: "rgb(181, 206, 168)",
+      },
+    },
+    {
+      types: ["constant"],
+      style: {
+        color: "rgb(100, 102, 149)",
+      },
+    },
+    {
+      types: ["attr-name", "variable"],
+      style: {
+        color: "rgb(156, 220, 254)",
+      },
+    },
+    {
+      types: ["deleted", "string", "attr-value", "template-punctuation"],
+      style: {
+        color: "rgb(206, 145, 120)",
+      },
+    },
+    {
+      types: ["selector"],
+      style: {
+        color: "rgb(215, 186, 125)",
+      },
+    },
+    {
+      // Fix tag color
+      types: ["tag"],
+      style: {
+        color: "rgb(78, 201, 176)",
+      },
+    },
+    {
+      // Fix tag color for HTML
+      types: ["tag"],
+      languages: ["markup"],
+      style: {
+        color: "rgb(86, 156, 214)",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "rgb(212, 212, 212)",
+      },
+    },
+    {
+      // Fix punctuation color for HTML
+      types: ["punctuation"],
+      languages: ["markup"],
+      style: {
+        color: "#808080",
+      },
+    },
+    {
+      types: ["function"],
+      style: {
+        color: "rgb(220, 220, 170)",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "rgb(78, 201, 176)",
+      },
+    },
+    {
+      types: ["char"],
+      style: {
+        color: "rgb(209, 105, 105)",
+      },
+    },
+  ],
+};
+
+export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
+  (
+    {
+      showCopyButton = true,
+      showLineNumbers = true,
+      highlightedRanges,
+      code,
+      className,
+      language = "typescript",
+      theme = defaultTheme,
+      maxLines,
+      showChrome = false,
+      fileName,
+      ...props
+    }: CodeBlockProps,
+    ref
+  ) => {
+    const [mouseOver, setMouseOver] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const onCopied = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 1500);
+      },
+      [code]
+    );
+
+    code = code.trim();
+    const lineCount = code.split("\n").length;
+    const maxLineWidth = lineCount.toString().length;
+    let maxHeight: string | undefined = undefined;
+    if (maxLines && lineCount > maxLines) {
+      maxHeight = `calc(${(maxLines + extraLinesWhenClipping) * 0.75 * 1.625}rem + 1.5rem )`;
+    }
+
+    const highlightLines = highlightedRanges?.flatMap(([start, end]) =>
+      Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    );
+
+    return (
+      <div
+        className={cn("relative overflow-hidden rounded-md border border-slate-800", className)}
+        style={{
+          backgroundColor: theme.plain.backgroundColor,
+        }}
+        ref={ref}
+        {...props}
+        translate="no"
       >
-        <code
-          className={`language-${language}`}
-          dangerouslySetInnerHTML={{ __html: code }}
-        ></code>
-      </pre>
-      {showCopyButton === true && (
-        <CopyTextButton
-          className={classNames(
-            "absolute my-2 mx-2 text-sm",
-            align === "center" ? " top-1/2 right-0" : "top-0 right-0"
+        {showChrome && <Chrome title={fileName} />}
+        {showCopyButton && (
+          <TooltipProvider>
+            <Tooltip open={copied || mouseOver}>
+              <TooltipTrigger
+                onClick={onCopied}
+                onMouseEnter={() => setMouseOver(true)}
+                onMouseLeave={() => setMouseOver(false)}
+                className={cn(
+                  "absolute  right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
+                  showChrome ? "top-10" : "top-3",
+                  copied ? "text-emerald-500" : "text-slate-500 hover:text-slate-300"
+                )}
+              >
+                {copied ? (
+                  <ClipboardCheck className="h-5 w-5" />
+                ) : (
+                  <Clipboard className="h-5 w-5" />
+                )}
+              </TooltipTrigger>
+              <TooltipContent side="left" className="text-xs">
+                {copied ? "Copied" : "Copy"}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
+        <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+          {({
+            className: inheritedClassName,
+            style: inheritedStyle,
+            tokens,
+            getLineProps,
+            getTokenProps,
+          }) => (
+            <div
+              dir="ltr"
+              className="overflow-auto px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+              style={{
+                maxHeight,
+              }}
+            >
+              <pre
+                className={cn(
+                  "relative mr-2 font-mono text-xs leading-relaxed",
+                  inheritedClassName
+                )}
+                style={inheritedStyle}
+                dir="ltr"
+              >
+                {tokens
+                  .map((line, index) => {
+                    if (
+                      index === tokens.length - 1 &&
+                      line.length === 1 &&
+                      line[0].content === "\n"
+                    ) {
+                      return null;
+                    }
+
+                    const lineNumber = index + 1;
+                    const lineProps = getLineProps({ line, key: index });
+
+                    let hasAnyHighlights = highlightLines ? highlightLines.length > 0 : false;
+
+                    let shouldDim = hasAnyHighlights;
+                    if (hasAnyHighlights && highlightLines?.includes(lineNumber)) {
+                      shouldDim = false;
+                    }
+
+                    return (
+                      <div
+                        key={lineProps.key}
+                        {...lineProps}
+                        className={cn(
+                          "flex w-full justify-start transition-opacity duration-500",
+                          lineProps.className
+                        )}
+                        style={{
+                          opacity: shouldDim ? dimAmount : undefined,
+                          ...lineProps.style,
+                        }}
+                      >
+                        {showLineNumbers && (
+                          <div
+                            className={
+                              "mr-2 flex-none select-none text-right text-slate-500 transition-opacity duration-500"
+                            }
+                            style={{
+                              width: `calc(8 * ${maxLineWidth / 16}rem)`,
+                            }}
+                          >
+                            {lineNumber}
+                          </div>
+                        )}
+
+                        <div className="flex-1">
+                          {line.map((token, key) => {
+                            const tokenProps = getTokenProps({ token, key });
+                            return (
+                              <span
+                                key={tokenProps.key}
+                                {...tokenProps}
+                                style={{
+                                  color: tokenProps?.style?.color as string,
+                                  ...tokenProps.style,
+                                }}
+                              />
+                            );
+                          })}
+                        </div>
+                        <div className="w-4 flex-none" />
+                      </div>
+                    );
+                  })
+                  .filter(Boolean)}
+              </pre>
+            </div>
           )}
-          value={code}
-          variant="slate"
-        />
-      )}
-      {maxHeight && (
-        <div className="absolute left-0 bottom-0 flex w-full items-center justify-center bg-gradient-to-b from-transparent to-[#0F172A]">
-          <button
-            className="mb-1 rounded-full bg-slate-800 py-2 px-3.5 text-xs transition hover:bg-slate-700"
-            onClick={(e) => setIsCollapsed((s) => !s)}
-          >
-            {isCollapsed ? "Expand" : "Collapse"}
-          </button>
+        </Highlight>
+      </div>
+    );
+  }
+);
+
+CodeBlock.displayName = "CodeBlock";
+
+function Chrome({ title }: { title?: string }) {
+  return (
+    <div className="grid h-7 grid-cols-[100px_auto_100px] border-b border-slate-800 bg-slate-900">
+      <div className="ml-2 flex items-center gap-2">
+        <div className="h-3 w-3 rounded-full bg-slate-700" />
+        <div className="h-3 w-3 rounded-full bg-slate-700" />
+        <div className="h-3 w-3 rounded-full bg-slate-700" />
+      </div>
+      <div className="flex items-center justify-center">
+        <div
+          className={cn(
+            "rounded-sm px-3 py-0.5 text-xs text-slate-500",
+            title && "bg-midnight-900"
+          )}
+        >
+          {title}
         </div>
-      )}
+      </div>
+      <div></div>
     </div>
   );
 }

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

@@ -1,8 +1,23 @@
-import type { ReactNode } from "react";
+import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 text-sm bg-slate-700 border border-slate-900 rounded text-slate-200";
+  "px-1 py-0.5 rounded border border-slate-800 bg-midnight-850 text-sky-200 font-mono";
 
-export function InlineCode({ children }: { children: ReactNode }) {
-  return <code className={inlineCode}>{children}</code>;
+const variants = {
+  "extra-extra-small": "text-xxs",
+  "extra-small": "text-xs",
+  small: "text-sm",
+  base: "text-base",
+};
+
+type InlineCodeProps = {
+  children: React.ReactNode;
+};
+
+type VariantProps = InlineCodeProps & {
+  variant?: keyof typeof variants;
+};
+
+export function InlineCode({ variant = "small", children }: VariantProps) {
+  return <code className={cn(inlineCode, variants[variant])}>{children}</code>;
 }

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

@@ -1,17 +1,14 @@
 import { json as jsonLang } from "@codemirror/lang-json";
 import type { ViewUpdate } from "@codemirror/view";
-import type {
-  ReactCodeMirrorProps,
-  UseCodeMirror,
-} from "@uiw/react-codemirror";
+import type { ReactCodeMirrorProps, UseCodeMirror } from "@uiw/react-codemirror";
 import { useCodeMirror } from "@uiw/react-codemirror";
-import classNames from "classnames";
 import { useRef, useEffect } from "react";
 import { getEditorSetup } from "./codeMirrorSetup";
-import { darkTheme, lightTheme } from "./codeMirrorTheme";
+import { darkTheme } from "./codeMirrorTheme";
+import { cn } from "~/utils/cn";
 
 export interface JSONEditorProps extends Omit<ReactCodeMirrorProps, "onBlur"> {
-  content: string;
+  defaultValue?: string;
   language?: "json";
   readOnly?: boolean;
   onChange?: (value: string) => void;
@@ -33,13 +30,14 @@ const defaultProps: JSONEditorDefaultProps = {
 
 export function JSONEditor(opts: JSONEditorProps) {
   const {
-    content,
+    defaultValue = "",
     language,
     readOnly,
     onChange,
     onUpdate,
     onBlur,
     basicSetup,
+    autoFocus,
   } = {
     ...defaultProps,
     ...opts,
@@ -59,15 +57,15 @@ export function JSONEditor(opts: JSONEditorProps) {
     extensions,
     editable: !readOnly,
     contentEditable: !readOnly,
-    value: content,
-    autoFocus: false,
+    value: defaultValue,
+    autoFocus,
     theme: darkTheme(),
     indentWithTab: false,
     basicSetup,
     onChange,
     onUpdate,
   };
-  const { setContainer } = useCodeMirror(settings);
+  const { setContainer, state } = useCodeMirror(settings);
 
   useEffect(() => {
     if (editor.current) {
@@ -75,9 +73,21 @@ export function JSONEditor(opts: JSONEditorProps) {
     }
   }, [setContainer]);
 
+  //if the defaultValue changes update the editor
+  useEffect(() => {
+    if (state !== undefined) {
+      state.update({
+        changes: { from: 0, to: state.doc.length, insert: defaultValue },
+      });
+    }
+  }, [defaultValue, state]);
+
   return (
     <div
-      className={classNames("no-scrollbar overflow-y-auto", opts.className)}
+      className={cn(
+        "overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700",
+        opts.className
+      )}
       ref={editor}
       onBlur={() => {
         if (!onBlur) return;

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

@@ -1,79 +0,0 @@
-import { javascript } from "@codemirror/lang-javascript";
-import type { ViewUpdate } from "@codemirror/view";
-import type {
-  ReactCodeMirrorProps,
-  UseCodeMirror,
-} from "@uiw/react-codemirror";
-import { useCodeMirror } from "@uiw/react-codemirror";
-import classNames from "classnames";
-import { useRef, useEffect } from "react";
-import { getEditorSetup } from "./codeMirrorSetup";
-import { darkTheme } from "./codeMirrorTheme";
-
-export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, "onBlur"> {
-  content: string;
-  language?: "typescript" | "shell";
-  showLineNumbers?: boolean;
-  showHighlights?: boolean;
-  readOnly?: boolean;
-  onChange?: (value: string) => void;
-  onUpdate?: (update: ViewUpdate) => void;
-  onBlur?: (code: string) => void;
-}
-
-type CodeEditorDefaultProps = Partial<CodeEditorProps>;
-
-const defaultProps: CodeEditorDefaultProps = {
-  language: "typescript",
-  showLineNumbers: true,
-  showHighlights: true,
-  readOnly: true,
-  basicSetup: false,
-};
-
-export function CodeEditor(opts: CodeEditorProps) {
-  const { content, readOnly, onChange, onUpdate, onBlur } = {
-    ...defaultProps,
-    ...opts,
-  };
-
-  const extensions = getEditorSetup(opts.showLineNumbers, opts.showHighlights);
-
-  if (opts.language === "typescript") {
-    extensions.push(javascript({ typescript: true }));
-  }
-
-  const editor = useRef<HTMLDivElement>(null);
-  const settings: Omit<UseCodeMirror, "onBlur"> = {
-    ...opts,
-    container: editor.current,
-    extensions,
-    editable: !readOnly,
-    contentEditable: !readOnly,
-    value: content,
-    autoFocus: false,
-    theme: darkTheme(),
-    indentWithTab: false,
-    basicSetup: false,
-    onChange,
-    onUpdate,
-  };
-  const { setContainer } = useCodeMirror(settings);
-
-  useEffect(() => {
-    if (editor.current) {
-      setContainer(editor.current);
-    }
-  }, [setContainer]);
-
-  return (
-    <div
-      className={classNames("no-scrollbar overflow-y-auto", opts.className)}
-      ref={editor}
-      onBlur={() => {
-        if (!onBlur) return;
-        onBlur(editor.current?.textContent ?? "");
-      }}
-    />
-  );
-}

apps/webapp/app/components/code/codeMirrorSetup.ts

@@ -30,10 +30,7 @@ export function getViewerSetup(): Array<Extension> {
   return [drawSelection(), dropCursor(), bracketMatching(), lineNumbers()];
 }
 
-export function getEditorSetup(
-  showLineNumbers = true,
-  showHighlights = true
-): Array<Extension> {
+export function getEditorSetup(showLineNumbers = true, showHighlights = true): Array<Extension> {
   const options = [
     drawSelection(),
     dropCursor(),

apps/webapp/app/components/code/codeMirrorTheme.ts

@@ -36,8 +36,9 @@ export function darkTheme(): Extension {
       },
 
       ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
-      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-        { backgroundColor: selection },
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: selection,
+      },
 
       ".cm-panels": { backgroundColor: darkBackground, color: ivory },
       ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
@@ -101,13 +102,7 @@ export function darkTheme(): Extension {
   const jsonHeroHighlightStyle = HighlightStyle.define([
     { tag: tags.keyword, color: violet },
     {
-      tag: [
-        tags.name,
-        tags.deleted,
-        tags.character,
-        tags.propertyName,
-        tags.macroName,
-      ],
+      tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
       color: coral,
     },
     { tag: [tags.function(tags.variableName), tags.labelName], color: malibu },
@@ -194,8 +189,9 @@ export function lightTheme(): Extension[] {
       },
 
       ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
-      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-        { backgroundColor: selection },
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: selection,
+      },
 
       ".cm-panels": { backgroundColor: darkBackground, color: ivory },
       ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
@@ -259,13 +255,7 @@ export function lightTheme(): Extension[] {
   const jsonHeroHighlightStyle = tagHighlighter([
     { tag: tags.keyword, class: violet },
     {
-      tag: [
-        tags.name,
-        tags.deleted,
-        tags.character,
-        tags.propertyName,
-        tags.macroName,
-      ],
+      tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
       class: variableColor,
     },
     {

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

@@ -0,0 +1,50 @@
+import { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
+import { cn } from "~/utils/cn";
+
+type Environment = Pick<RuntimeEnvironment, "type">;
+
+export function EnvironmentLabel({
+  environment,
+  className,
+}: {
+  environment: Environment;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "flex h-4 items-center justify-center rounded-[2px] px-1 text-xxs font-medium uppercase tracking-wider text-midnight-900",
+        environmentColorClassName(environment),
+        className
+      )}
+    >
+      {environmentTitle(environment)}
+    </span>
+  );
+}
+
+export function environmentTitle(environment: Environment) {
+  switch (environment.type) {
+    case "PRODUCTION":
+      return "Prod";
+    case "STAGING":
+      return "Staging";
+    case "DEVELOPMENT":
+      return "Dev";
+    case "PREVIEW":
+      return "Preview";
+  }
+}
+
+export function environmentColorClassName(environment: Environment) {
+  switch (environment.type) {
+    case "PRODUCTION":
+      return "bg-green-500";
+    case "STAGING":
+      return "bg-amber-500";
+    case "DEVELOPMENT":
+      return "bg-pink-500";
+    case "PREVIEW":
+      return "bg-yellow-500";
+  }
+}

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

@@ -0,0 +1,393 @@
+import { Link } from "@remix-run/react";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { StepNumber } from "~/components/primitives/StepNumber";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
+import { useDevEnvironment } from "~/hooks/useEnvironments";
+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 { CodeBlock } from "../code/CodeBlock";
+import { InlineCode } from "../code/InlineCode";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+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 { Header2 } from "../primitives/Headers";
+import { TextLink } from "../primitives/TextLink";
+import integrationButton from "./integration-button.png";
+import selectEnvironment from "./select-environment.png";
+import selectExample from "./select-example.png";
+
+export function HowToSetupYourProject() {
+  const devEnvironment = useDevEnvironment();
+  const appOrigin = useAppOrigin();
+  return (
+    <>
+      <StepNumber stepNumber="1" title="Run the CLI 'init' command in a Next.js project" />
+      <StepContentContainer>
+        <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"
+              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/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 dlx @trigger.dev/cli@latest init -k ••••••••• -t ${appOrigin}`}
+              value={`yarn dlx @trigger.dev/cli@latest init -k ${devEnvironment?.apiKey} -t ${appOrigin}`}
+            />
+          </ClientTabsContent>
+        </ClientTabs>
+
+        <Paragraph spacing>
+          You’ll notice a new folder in your project called 'jobs'. We’ve added a very simple
+          example Job in <InlineCode>examples.ts</InlineCode> to help you get started.
+        </Paragraph>
+      </StepContentContainer>
+      <StepNumber stepNumber="2" title="Run your Next.js app" />
+      <StepContentContainer>
+        <Paragraph>Ensure your app is running locally.</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={`npm run dev`} />
+          </ClientTabsContent>
+          <ClientTabsContent value={"pnpm"}>
+            <ClipboardField variant="primary/medium" className="mb-4" value={`pnpm run dev`} />
+          </ClientTabsContent>
+          <ClientTabsContent value={"yarn"}>
+            <ClipboardField variant="primary/medium" className="mb-4" value={`yarn run dev`} />
+          </ClientTabsContent>
+        </ClientTabs>
+      </StepContentContainer>
+      <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
+      <StepContentContainer>
+        <Paragraph spacing>
+          In a <strong className="text-bright">separate 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 dlx @trigger.dev/cli@latest dev`}
+            />
+          </ClientTabsContent>
+        </ClientTabs>
+        <Paragraph spacing variant="small">
+          If you’re not running on port 3000 you can specify the port by adding{" "}
+          <InlineCode>--port 3001</InlineCode> to the end.
+        </Paragraph>
+        <Paragraph spacing variant="small">
+          You should leave the <InlineCode>dev</InlineCode> command running when you're developing.
+        </Paragraph>
+      </StepContentContainer>
+      <StepNumber stepNumber="4" title="Check for Jobs" />
+      <StepContentContainer>
+        <Paragraph>
+          Once you've run the CLI command, click Refresh to view your example Job in the list.
+        </Paragraph>
+        <Button
+          variant="primary/medium"
+          className="mt-4"
+          LeadingIcon="refresh"
+          onClick={() => window.location.reload()}
+        >
+          Refresh
+        </Button>
+      </StepContentContainer>
+    </>
+  );
+}
+
+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="Select an environment
+"
+      />
+      <StepContentContainer>
+        <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>
+    </>
+  );
+}
+
+export function HowToConnectAnIntegration() {
+  return (
+    <>
+      <StepNumber stepNumber="1" title="Select an API from the list" />
+      <StepContentContainer>
+        <Paragraph>
+          APIs marked with a
+          <span className="mx-2 -mt-1 inline-flex" aria-label="Trigger.dev Integration icon">
+            <IntegrationIcon />
+          </span>
+          are Trigger.dev Integrations. These Integrations make connecting to the API easier by
+          offering OAuth or API key authentication. All APIs can also be used with fetch or an SDK.
+        </Paragraph>
+        <img src={integrationButton} className="mt-2 h-10" />
+      </StepContentContainer>
+      <StepNumber stepNumber="2" title="Choose how you want to connect" />
+      <StepContentContainer>
+        <Paragraph>
+          Follow the instructions for your chosen connection method in the popover form. If no
+          Integration exists yet, you can request one by clicking the "I want an Integration"
+          button.
+        </Paragraph>
+      </StepContentContainer>
+      <StepNumber stepNumber="3" title="Your connection will appear in the list" />
+      <StepContentContainer>
+        <Paragraph>
+          Once you've connected your API, it will appear in the list of Integrations below. You can
+          view details and manage your connection by selecting it from the table.
+        </Paragraph>
+      </StepContentContainer>
+      <Callout variant={"docs"} 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.
+      </Callout>
+    </>
+  );
+}
+
+export function HowToUseThisIntegration({ integration, help, integrationClient }: HelpPanelProps) {
+  return (
+    <>
+      <StepNumber stepNumber="1" title="Install the package" />
+      <StepContentContainer>
+        <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 API Keys associated with it. The Server API Key is used to authenticate
+        your Jobs with the Trigger.dev platform.
+      </Paragraph>
+      <Paragraph spacing>
+        The Server 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 Server DEV API Key locally,
+  //and your Server 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>
+    </>
+  );
+}
+
+function StepContentContainer({ children }: { children: React.ReactNode }) {
+  return <div className="mb-6 ml-9 mt-1">{children}</div>;
+}

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

@@ -1,160 +0,0 @@
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import type {
-  APIKeyAuthentication,
-  IntegrationMetadata,
-} from "@trigger.dev/integration-sdk";
-import { marked } from "marked";
-import { Fragment, useEffect, useState } from "react";
-import { useTypedFetcher } from "remix-typedjson";
-import type { Response as CreateResponse } from "~/routes/resources/connection";
-import { PrimaryButton, SecondaryButton } from "../primitives/Buttons";
-import { StyledDialog } from "../primitives/Dialog";
-import { FormError } from "../primitives/FormError";
-import { Input } from "../primitives/Input";
-import { InputGroup } from "../primitives/InputGroup";
-import { Label } from "../primitives/Label";
-import { Body } from "../primitives/text/Body";
-
-type Status = "loading" | "idle";
-
-export function AddApiKeyButton({
-  integration,
-  authentication,
-  organizationId,
-  sourceId,
-  serviceId,
-  className,
-  children,
-}: {
-  integration: IntegrationMetadata;
-  authentication: APIKeyAuthentication;
-  organizationId: string;
-  sourceId?: string;
-  serviceId?: string;
-  className?: string;
-  children: (status: Status) => React.ReactNode;
-}) {
-  const fetcher = useTypedFetcher<CreateResponse>();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const errors =
-    fetcher.type === "done" && !fetcher.data.success
-      ? fetcher.data.errors
-      : undefined;
-
-  useEffect(() => {
-    if (
-      fetcher.type === "done" &&
-      fetcher.state === "idle" &&
-      fetcher.data?.success === true
-    ) {
-      setIsOpen(false);
-    }
-  }, [fetcher.type, fetcher.state, fetcher.data]);
-
-  return (
-    <>
-      <button onClick={(e) => setIsOpen(true)} className={className}>
-        {children(fetcher.state === "idle" ? "idle" : "loading")}
-      </button>
-
-      <StyledDialog.Dialog
-        onClose={(e) => setIsOpen(false)}
-        appear
-        show={isOpen}
-        as={Fragment}
-      >
-        <StyledDialog.Panel>
-          <StyledDialog.Title>
-            Add your {integration.name} API keys
-          </StyledDialog.Title>
-          <div className="overflow-hidden overflow-y-auto max-h-40 mb-3 mt-4 bg-slate-700/50 rounded px-4 pb-3 pt-4">
-            <div className="flex gap-0.5 items-center -m-0.5 mb-1 text-slate-400">
-              <InformationCircleIcon className="h-5 w-5" />
-              <Body size="small" className="uppercase tracking-wide">
-                Instructions
-              </Body>
-            </div>
-            <p
-              className="prose prose-sm prose-invert"
-              dangerouslySetInnerHTML={{
-                __html: marked(authentication.documentation),
-              }}
-            />
-          </div>
-
-          <fetcher.Form method="post" action="/resources/connection?index">
-            <input type="hidden" name="type" value="api_key" />
-            <input type="hidden" name="organizationId" value={organizationId} />
-            <input type="hidden" name="service" value={integration.slug} />
-            {sourceId && (
-              <input type="hidden" name="sourceId" value={sourceId} />
-            )}
-            {serviceId && (
-              <input type="hidden" name="serviceId" value={serviceId} />
-            )}
-            <InputGroup>
-              <Label htmlFor="title">Name</Label>
-              <div className="flex">
-                <img
-                  src={integration.icon}
-                  alt={integration.icon}
-                  className="flex pointer-events-none z-10 -mr-7 ml-2.5 mt-2.5 w-5 h-5"
-                />
-                <Input
-                  id="title"
-                  name="title"
-                  placeholder="Name this integration"
-                  spellCheck={false}
-                  defaultValue={integration.name}
-                  className="pl-9"
-                />
-              </div>
-              {errors && <FormError errors={errors} path={["title"]} />}
-            </InputGroup>
-
-            <InputGroup>
-              <Label htmlFor="api_key">API Key</Label>
-              <Input
-                id="api_key"
-                name="api_key"
-                placeholder="<api_key>"
-                spellCheck={false}
-                type="password"
-              />
-              {errors && <FormError errors={errors} path={["api_key"]} />}
-            </InputGroup>
-
-            {authentication.additionalFields?.map((field) => {
-              const fieldName = `additionalFields[${field.key}]`;
-              return (
-                <InputGroup key={field.key}>
-                  <Label htmlFor={fieldName}>{field.name}</Label>
-                  <Input
-                    id={fieldName}
-                    name={fieldName}
-                    placeholder={field.placeholder}
-                    spellCheck={false}
-                  />
-                  {errors && (
-                    <FormError
-                      errors={errors}
-                      path={["additionalFields", field.key]}
-                    />
-                  )}
-                </InputGroup>
-              );
-            })}
-
-            <div className="mt-4 flex justify-between">
-              <SecondaryButton type="button" onClick={(e) => setIsOpen(false)}>
-                Cancel
-              </SecondaryButton>
-              <PrimaryButton type="submit">Save</PrimaryButton>
-            </div>
-          </fetcher.Form>
-        </StyledDialog.Panel>
-      </StyledDialog.Dialog>
-    </>
-  );
-}

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

@@ -0,0 +1,34 @@
+import { Help, Integration } from "~/services/externalApis/types";
+import { InlineCode } from "../code/InlineCode";
+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, help, integrationClient }: HelpPanelProps) {
+  return (
+    <div className="mt-4">
+      <Header1 className="mb-2">How to use {integration.name} with API keys</Header1>
+      <Paragraph spacing>
+        You can use API keys to authenticate with {integration.name}. Your API keys won't leave your
+        server, we'll never see them.
+      </Paragraph>
+      <Paragraph spacing>
+        First install the <InlineCode>{integration.packageName}</InlineCode> package using your
+        preferred package manager. For example:
+      </Paragraph>
+      <HelpInstall packageName={integration.packageName} />
+      {help && (
+        <HelpSamples help={help} integration={integration} integrationClient={integrationClient} />
+      )}
+    </div>
+  );
+}

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

@@ -1,83 +0,0 @@
-import type { IntegrationMetadata } from "@trigger.dev/integration-sdk";
-import { AddApiKeyButton } from "./AddApiKeyButton";
-import { ConnectOAuthButton } from "./ConnectOAuthButton";
-import { IntegrationIcon } from "./IntegrationIcon";
-
-export type Status = "loading" | "idle";
-
-export function ConnectButton({
-  integration,
-  organizationId,
-  sourceId,
-  serviceId,
-  children,
-  className,
-}: {
-  integration: IntegrationMetadata;
-  organizationId: string;
-  sourceId?: string;
-  serviceId?: string;
-  children: (status: Status) => React.ReactNode;
-  className?: string;
-}) {
-  switch (integration.authentication.type) {
-    case "oauth":
-      return (
-        <ConnectOAuthButton
-          integration={integration}
-          organizationId={organizationId}
-          sourceId={sourceId}
-          serviceId={serviceId}
-          children={children}
-          className={className}
-        />
-      );
-    case "api_key":
-      return (
-        <AddApiKeyButton
-          integration={integration}
-          authentication={integration.authentication}
-          organizationId={organizationId}
-          sourceId={sourceId}
-          serviceId={serviceId}
-          children={children}
-          className={className}
-        />
-      );
-    default:
-      throw new Error("Unsupported authentication type");
-  }
-}
-
-export function BasicConnectButton({
-  integration,
-  organizationId,
-  sourceId,
-  serviceId,
-}: {
-  integration: IntegrationMetadata;
-  organizationId: string;
-  sourceId?: string;
-  serviceId?: string;
-}) {
-  return (
-    <ConnectButton
-      integration={integration}
-      organizationId={organizationId}
-      sourceId={sourceId}
-      serviceId={serviceId}
-      className="flex items-center gap-3 rounded bg-indigo-700 py-2 pl-3 pr-4 text-sm text-white shadow-md transition hover:bg-indigo-600 disabled:opacity-50"
-    >
-      {(status) => (
-        <>
-          <IntegrationIcon integration={integration} />
-          {status === "loading" ? (
-            <span className="">Connecting…</span>
-          ) : (
-            <span>Connect to {integration.name}</span>
-          )}
-        </>
-      )}
-    </ConnectButton>
-  );
-}

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

@@ -1,156 +0,0 @@
-import Pizzly from "@nangohq/pizzly-frontend";
-import { useFetcher } from "@remix-run/react";
-import type { IntegrationMetadata } from "@trigger.dev/integration-sdk";
-import { useCallback, useEffect } from "react";
-import invariant from "tiny-invariant";
-import type { Response as CreateResponse } from "~/routes/resources/connection";
-import type {
-  Request as UpdateRequest,
-  Response as UpdateResponse,
-} from "~/routes/resources/connection/$connectionId";
-import type { Status } from "./ConnectButton";
-
-export function ConnectOAuthButton({
-  integration,
-  organizationId,
-  sourceId,
-  serviceId,
-  className,
-  children,
-}: {
-  integration: IntegrationMetadata;
-  organizationId: string;
-  sourceId?: string;
-  serviceId?: string;
-  className?: string;
-  children: (status: Status) => React.ReactNode;
-}) {
-  const { createFetcher, status } = useCreateConnection(sourceId, serviceId);
-
-  return (
-    <createFetcher.Form
-      method="post"
-      action="/resources/connection?index"
-      className="flex"
-    >
-      <input type="hidden" name="type" value="oauth" />
-      <input type="hidden" name="organizationId" value={organizationId} />
-      <input type="hidden" name="service" value={integration.slug} />
-      <button
-        type="submit"
-        disabled={status === "loading"}
-        className={className}
-      >
-        {children(status)}
-      </button>
-    </createFetcher.Form>
-  );
-}
-
-export function useCreateConnection(sourceId?: string, serviceId?: string) {
-  const createConnectionFetcher = useFetcher<CreateResponse>();
-  const completeConnectionFetcher = useFetcher<UpdateResponse>();
-  const status: Status =
-    createConnectionFetcher.state === "idle" &&
-    completeConnectionFetcher.state === "idle"
-      ? "idle"
-      : "loading";
-
-  const completeFlow = useCallback(
-    async ({
-      pizzlyHost,
-      connectionId,
-      service,
-      sourceId,
-      serviceId,
-    }: {
-      pizzlyHost: string;
-      connectionId: string;
-      service: string;
-      sourceId?: string;
-      serviceId?: string;
-    }) => {
-      try {
-        const pizzly = new Pizzly(pizzlyHost);
-        await pizzly.auth(service, connectionId);
-
-        let completeData: UpdateRequest = {
-          connectionId: connectionId,
-        };
-
-        if (sourceId) {
-          completeData = {
-            ...completeData,
-            sourceId,
-          };
-        }
-
-        if (serviceId) {
-          completeData = {
-            ...completeData,
-            serviceId,
-          };
-        }
-
-        completeConnectionFetcher.submit(completeData, {
-          method: "put",
-          action: `/resources/connection/${connectionId}`,
-        });
-      } catch (error: any) {
-        console.error(
-          `There was an error in the OAuth flow for integration "${error.providerConfigKey}" and connection-id "${error.connectionId}": ${error.error.type} - ${error.error.message}`,
-          error
-        );
-      }
-    },
-    [completeConnectionFetcher]
-  );
-
-  useEffect(() => {
-    if (
-      createConnectionFetcher.state !== "idle" ||
-      createConnectionFetcher.type !== "done"
-    )
-      return;
-    if (
-      completeConnectionFetcher.state !== "idle" ||
-      completeConnectionFetcher.type !== "init"
-    )
-      return;
-    if (createConnectionFetcher.data === undefined) return;
-
-    completeConnectionFetcher.type = "init";
-
-    if (!createConnectionFetcher.data.success) {
-      throw new Error(
-        `There was an error creating the connection: ${createConnectionFetcher.data.errors}`
-      );
-    }
-
-    invariant(
-      createConnectionFetcher.data.pizzlyHost,
-      "pizzlyHost is required for oauth"
-    );
-
-    completeFlow({
-      pizzlyHost: createConnectionFetcher.data.pizzlyHost,
-      connectionId: createConnectionFetcher.data.connectionId,
-      service: createConnectionFetcher.data.service,
-      sourceId,
-      serviceId,
-    });
-  }, [
-    completeConnectionFetcher,
-    completeConnectionFetcher.data,
-    completeConnectionFetcher.submit,
-    completeFlow,
-    createConnectionFetcher,
-    serviceId,
-    sourceId,
-  ]);
-
-  return {
-    createFetcher: createConnectionFetcher,
-    status,
-  };
-}

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

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { ApiAuthenticationMethodApiKey, Integration } from "~/services/externalApis/types";
+import { docsIntegrationPath } from "~/utils/pathBuilder";
+import { LinkButton } from "../primitives/Buttons";
+import { Header1, Header2 } from "../primitives/Headers";
+import { NamedIconInBox } from "../primitives/NamedIcon";
+import { Paragraph } from "../primitives/Paragraph";
+import { RadioGroup, RadioGroupItem } from "../primitives/RadioButton";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../primitives/Sheet";
+import { ApiKeyHelp } from "./ApiKeyHelp";
+import { CustomHelp } from "./CustomHelp";
+import { SelectOAuthMethod } from "./SelectOAuthMethod";
+
+type IntegrationMethod = "apikey" | "oauth2" | "custom";
+
+export function ConnectToIntegrationSheet({
+  integration,
+  organizationId,
+  button,
+  className,
+  callbackUrl,
+  icon,
+}: {
+  integration: Integration;
+  organizationId: string;
+  button: React.ReactNode;
+  callbackUrl: string;
+  className?: string;
+  icon?: string;
+}) {
+  const [integrationMethod, setIntegrationMethod] = useState<IntegrationMethod | undefined>(
+    undefined
+  );
+
+  const authMethods = Object.values(integration.authenticationMethods);
+  const hasApiKeyOption = authMethods.some((s) => s.type === "apikey");
+  const hasOAuth2Option = authMethods.some((s) => s.type === "oauth2");
+
+  return (
+    <Sheet>
+      <SheetTrigger className={className}>{button}</SheetTrigger>
+      <SheetContent size="lg" className="relative">
+        <SheetHeader>
+          <NamedIconInBox name={icon ?? 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"
+            target="_blank"
+          >
+            View docs
+          </LinkButton>
+        </SheetHeader>
+        <SheetBody>
+          <Header2 className="mb-2">Choose an integration method</Header2>
+          <RadioGroup
+            name="method"
+            className="flex gap-2"
+            value={integrationMethod}
+            onValueChange={(v) => setIntegrationMethod(v as IntegrationMethod)}
+          >
+            {hasOAuth2Option && (
+              <RadioGroupItem
+                id="oauth2"
+                value="oauth2"
+                label="OAuth"
+                description="We handle OAuth for you or your users."
+                variant="description"
+              />
+            )}
+            {hasApiKeyOption && (
+              <RadioGroupItem
+                id="apikey"
+                value="apikey"
+                label="API Key"
+                description="Use API keys in your code. They never leave your server."
+                variant="description"
+              />
+            )}
+            <RadioGroupItem
+              id="custom"
+              value="custom"
+              label="Fetch/Existing SDK"
+              description={`Alternatively, use ${integration.name} without our integration.`}
+              variant="description"
+            />
+          </RadioGroup>
+
+          {integrationMethod && (
+            <SelectedIntegrationMethod
+              integration={integration}
+              organizationId={organizationId}
+              method={integrationMethod}
+              callbackUrl={callbackUrl}
+            />
+          )}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function SelectedIntegrationMethod({
+  integration,
+  organizationId,
+  method,
+  callbackUrl,
+}: {
+  integration: Integration;
+  organizationId: string;
+  method: IntegrationMethod;
+  callbackUrl: string;
+}) {
+  const authMethods = Object.values(integration.authenticationMethods);
+
+  switch (method) {
+    case "apikey":
+      const apiAuth = authMethods.find((a) => a.type === "apikey");
+      if (!apiAuth) return null;
+      return <ApiKeyHelp integration={integration} help={apiAuth.help} />;
+    case "oauth2":
+      return (
+        <SelectOAuthMethod
+          integration={integration}
+          organizationId={organizationId}
+          callbackUrl={callbackUrl}
+        />
+      );
+    case "custom":
+      return <CustomHelp name={integration.name} />;
+  }
+}

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

@@ -0,0 +1,247 @@
+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 cuid from "cuid";
+import { useState } from "react";
+import simplur from "simplur";
+import { useFeatures } from "~/hooks/useFeatures";
+import { useTextFilter } from "~/hooks/useTextFilter";
+import { createSchema } from "~/routes/resources.connection.$organizationId.oauth2";
+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 { Hint } from "../primitives/Hint";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Label } from "../primitives/Label";
+import { Paragraph } from "../primitives/Paragraph";
+
+export type Status = "loading" | "idle";
+
+export function ConnectToOAuthForm({
+  integration,
+  authMethod,
+  authMethodKey,
+  organizationId,
+  clientType,
+  callbackUrl,
+}: {
+  integration: Integration;
+  authMethod: ApiAuthenticationMethodOAuth2;
+  authMethodKey: string;
+  organizationId: string;
+  clientType: ConnectionType;
+  callbackUrl: string;
+}) {
+  const [id] = useState<string>(cuid());
+  const transition = useNavigation();
+  const fetcher = useFetcher();
+  const { isManagedCloud } = useFeatures();
+
+  const [form, { title, slug, scopes, hasCustomClient, customClientId, customClientSecret }] =
+    useForm({
+      lastSubmission: fetcher.data,
+      shouldRevalidate: "onSubmit",
+      onValidate({ formData }) {
+        return parse(formData, {
+          // Create the schema without any constraint defined
+          schema: createSchema(),
+        });
+      },
+    });
+
+  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="post"
+      action={`/resources/connection/${organizationId}/oauth2`}
+      {...form.props}
+      className="flex h-full max-h-full flex-grow flex-col"
+    >
+      <Fieldset>
+        <input type="hidden" name="id" value={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>
+          <Input
+            type="text"
+            fullWidth
+            {...conform.input(slug)}
+            placeholder={`e.g. ${integration.identifier}`}
+          />
+          <Hint>
+            This is used in your code to reference this connection. It must be unique for this
+            project.
+          </Hint>
+          <FormError>{slug.error}</FormError>
+        </InputGroup>
+        <InputGroup fullWidth>
+          <Label variant="large">Name</Label>
+          <Input
+            type="text"
+            fullWidth
+            {...conform.input(title)}
+            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>
+        {authMethod.scopes.length > 0 && (
+          <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.icon ?? integration.identifier}
+        >
+          Connect to {integration.name}
+        </Button>
+      </div>
+    </fetcher.Form>
+  );
+}

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

@@ -1,147 +0,0 @@
-import { Popover, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
-import { useFetcher } from "@remix-run/react";
-import type { IntegrationMetadata } from "@trigger.dev/integration-sdk";
-import classNames from "classnames";
-import { Fragment } from "react";
-import type { APIConnection } from "~/models/apiConnection.server";
-import { BasicConnectButton } from "./ConnectButton";
-
-type Props = {
-  type: "source" | "service";
-  sourceServiceId: string;
-  organizationId: string;
-  integration: IntegrationMetadata;
-  connections: Pick<APIConnection, "id" | "title">[];
-  selectedConnectionId?: string;
-  className?: string;
-  popoverAlign: Align;
-};
-
-type Align = "left" | "right" | "center";
-
-export function ConnectionSelector({
-  type,
-  sourceServiceId,
-  integration,
-  connections,
-  selectedConnectionId,
-  organizationId,
-  className,
-  popoverAlign = "left",
-}: Props) {
-  const fetcher = useFetcher();
-
-  if (connections.length === 0) {
-    return (
-      <BasicConnectButton
-        integration={integration}
-        organizationId={organizationId}
-        sourceId={type === "source" ? sourceServiceId : undefined}
-        serviceId={type === "service" ? sourceServiceId : undefined}
-      />
-    );
-  }
-
-  const selectedConnection = connections.find(
-    (c) => c.id === selectedConnectionId
-  );
-
-  return (
-    <div className={`w-full max-w-max ${className}`}>
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className={`
-          ${open ? "" : ""}
-          inline-flex justify-between items-center rounded text-slate-300 bg-slate-700 shadow pl-4 pr-3 py-2 gap-2 text-sm hover:bg-slate-600/80 transition focus:outline-none`}
-            >
-              <span className="transition text-sm text-slate-200">
-                {selectedConnection ? (
-                  <span>{selectedConnection.title}</span>
-                ) : (
-                  <span className="text-slate-200">
-                    Select {integration.name} connection
-                  </span>
-                )}
-              </span>
-              <ChevronUpDownIcon
-                className={`${open ? "" : ""}
-            ml-1 h-5 w-5 transition duration-150 ease-in-out text-slate-400`}
-                aria-hidden="true"
-              />
-            </Popover.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel
-                className={`absolute z-10 mt-3 w-screen min-w-max max-w-xs transform sm:px-0 ${getPopoverAlignment(
-                  popoverAlign
-                )}`}
-              >
-                <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                  <div className="flex flex-col items-stretch gap-y-1 py-1 px-1 bg-slate-700">
-                    {connections.map((connection) => {
-                      return (
-                        <fetcher.Form
-                          key={connection.id}
-                          action={`/resources/${
-                            type === "source" ? "sources" : "services"
-                          }/${sourceServiceId}`}
-                          method="put"
-                        >
-                          <input
-                            type="hidden"
-                            name={"connectionId"}
-                            value={connection.id}
-                          />
-
-                          <Popover.Button
-                            className={classNames(
-                              "flex items-center w-full justify-between gap-1.5 py-2 px-3 text-white rounded hover:bg-slate-800 transition",
-                              connection.id === selectedConnectionId &&
-                                "!bg-slate-800"
-                            )}
-                            type="submit"
-                          >
-                            <div className="flex items-center gap-2">
-                              <span className="block truncate">
-                                {connection.title}
-                              </span>
-                            </div>
-                            {connection.id === selectedConnectionId && (
-                              <CheckIcon className="h-5 w-5 text-blue-600" />
-                            )}
-                          </Popover.Button>
-                        </fetcher.Form>
-                      );
-                    })}
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
-  );
-}
-
-function getPopoverAlignment(alignment: Align) {
-  switch (alignment) {
-    case "right":
-      return "right-0";
-    case "center":
-      return "left-full -translate-x-1/2";
-    case "left":
-    default:
-      return "left-0";
-  }
-}

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

@@ -0,0 +1,79 @@
+import { CodeBlock } from "../code/CodeBlock";
+import { Header1, Header2 } from "../primitives/Headers";
+import { Paragraph } from "../primitives/Paragraph";
+
+export function CustomHelp({ name }: { name: string }) {
+  return (
+    <div className="mt-4">
+      <Header1 className="mb-2">You can use any API with requests or an SDK</Header1>
+      <Header2 className="mb-2">How to use an SDK</Header2>
+      <Paragraph spacing>
+        You can call SDK methods from inside the run function, but you should wrap them in a Task to
+        make sure they're resumable.
+      </Paragraph>
+      <Paragraph spacing>Here's an example with the official GitHub SDK</Paragraph>
+      <CodeBlock
+        code={`
+client.defineJob({
+  id: "scheduled-job-1",
+  name: "Scheduled Job 1",
+  version: "0.1.1",
+  trigger: cronTrigger({
+    cron: "*/5 * * * *", // every 5 minutes
+  }),
+  run: async (payload, io, ctx) => {
+    //wrap an SDK call in io.runTask so it's resumable and displays in logs
+    const repo = await io.runTask(
+      "Get repo",
+      //you can add metadata to the task to improve the display in the logs
+      { name: "Get repo", icon: "github" },
+      async () => {
+        //this is the regular GitHub SDK
+        const response = await octokit.rest.repos.get({
+          owner: "triggerdotdev",
+          repo: "trigger.dev",
+        });
+        return response.data;
+      }
+    );
+  },
+});
+      `}
+        highlightedRanges={[[9, 22]]}
+        className="mb-4"
+      />
+      <Header2 className="mb-2">How to use fetch</Header2>
+      <Paragraph spacing>
+        You can use the fetch API to make requests to any API. Or a different request library like
+        axios if you'd prefer. Again wrapping the request in a Task will make sure it's resumable.
+      </Paragraph>
+      <CodeBlock
+        code={`
+client.defineJob({
+  id: "scheduled-job-1",
+  name: "Scheduled Job 1",
+  version: "0.1.1",
+  trigger: cronTrigger({
+    cron: "*/5 * * * *", // every 5 minutes
+  }),
+  run: async (payload, io, ctx) => {
+    //wrap anything in io.runTask so it's resumable and displays in logs
+    const repo = await io.runTask(
+      "Get org",
+      //you can add metadata to the task to improve the display in the logs
+      { name: "Get org", icon: "github" },
+      async () => {
+        //you can use fetch, axios, or any other library to make requests
+        const response = await fetch('https://api.github.com/orgs/nodejs');
+        return response.json();
+      }
+    );
+  },
+});
+      `}
+        highlightedRanges={[[9, 19]]}
+        className="mb-4"
+      />
+    </div>
+  );
+}

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 add ${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,47 @@
+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/IntegrationIcon.tsx

@@ -1,15 +0,0 @@
-import type { IntegrationMetadata } from "@trigger.dev/integration-sdk";
-
-export function IntegrationIcon({
-  integration,
-}: {
-  integration: IntegrationMetadata;
-}) {
-  return (
-    <img
-      src={integration.icon}
-      alt={integration.name}
-      className="h-5 w-5 shadow-lg group-hover:opacity-80 transition"
-    />
-  );
-}

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

@@ -0,0 +1,58 @@
+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"
+            target="_blank"
+          >
+            View docs
+          </LinkButton>
+        </SheetHeader>
+        <SheetBody>
+          <SelectOAuthMethod
+            integration={integration}
+            organizationId={organizationId}
+            callbackUrl={callbackUrl}
+            existingIntegration={existingIntegration}
+          />
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { Api } from "~/services/externalApis/apis";
+import { Button } from "../primitives/Buttons";
+import { Callout } from "../primitives/Callout";
+import { Header1 } from "../primitives/Headers";
+import { NamedIconInBox } from "../primitives/NamedIcon";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../primitives/Sheet";
+import { CustomHelp } from "./CustomHelp";
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { useFetcher } from "@remix-run/react";
+import { Paragraph } from "../primitives/Paragraph";
+
+export function NoIntegrationSheet({
+  api,
+  requested,
+  button,
+}: {
+  api: Api;
+  requested: boolean;
+  button: React.ReactNode;
+}) {
+  const fetcher = useFetcher();
+  const isLoading = fetcher.state !== "idle";
+
+  return (
+    <Sheet>
+      <SheetTrigger>{button}</SheetTrigger>
+      <SheetContent size="lg">
+        <SheetHeader className="justify-between">
+          <div className="flex items-center gap-4">
+            <NamedIconInBox name={api.identifier} className="h-9 w-9" />
+            <Header1>{api.name}</Header1>
+          </div>
+          {requested ? (
+            <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.
+              </Paragraph>
+            </div>
+          ) : (
+            <fetcher.Form method="post" action={`/resources/apivote/${api.identifier}`}>
+              <Button
+                variant="primary/small"
+                disabled={isLoading}
+                LeadingIcon={isLoading ? "spinner-white" : undefined}
+              >
+                {isLoading ? "Saving…" : `I want an Integration for ${api.name}`}
+              </Button>
+            </fetcher.Form>
+          )}
+        </SheetHeader>
+        <SheetBody>
+          <CustomHelp name={api.name} />
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { ApiAuthenticationMethodOAuth2, Integration } from "~/services/externalApis/types";
+import { RadioGroup, RadioGroupItem } from "../primitives/RadioButton";
+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,
+  existingIntegration,
+}: {
+  existingIntegration?: Client;
+  integration: Integration;
+  organizationId: string;
+  callbackUrl: string;
+}) {
+  const oAuthMethods = Object.entries(integration.authenticationMethods).filter(
+    (a): a is [string, ApiAuthenticationMethodOAuth2] => a[1].type === "oauth2"
+  );
+
+  const [oAuthKey, setOAuthKey] = useState<string | undefined>(
+    oAuthMethods.length === 1 ? oAuthMethods[0][0] : undefined
+  );
+  const [connectionType, setConnectionType] = useState<ConnectionType | undefined>();
+
+  const selectedOAuthMethod = oAuthKey
+    ? (integration.authenticationMethods[oAuthKey] as ApiAuthenticationMethodOAuth2)
+    : undefined;
+
+  return (
+    <>
+      {oAuthMethods.length > 1 && (
+        <>
+          <Header2 className="mb-2 mt-4">Select an OAuth option</Header2>
+          <RadioGroup
+            name="oauth-method"
+            className="flex gap-2"
+            value={oAuthKey}
+            onValueChange={(v: any) => setOAuthKey(v)}
+          >
+            {oAuthMethods.map(([key, auth]) => (
+              <RadioGroupItem
+                key={key}
+                id={key}
+                value={key}
+                label={auth.name}
+                description={auth.description}
+                variant="description"
+              />
+            ))}
+          </RadioGroup>
+        </>
+      )}
+      {selectedOAuthMethod && (
+        <>
+          <Header2 className="mb-2 mt-4">Who is connecting to {integration.name}</Header2>
+          <RadioGroup
+            name="connection-type"
+            className="flex gap-2"
+            value={connectionType}
+            onValueChange={(v: any) => setConnectionType(v as ConnectionType)}
+          >
+            <RadioGroupItem
+              id="DEVELOPER"
+              value="DEVELOPER"
+              label="Developers"
+              description={`You will connect using an internal ${integration.name} account.`}
+              variant="description"
+            />
+            <RadioGroupItem
+              id="EXTERNAL"
+              value="EXTERNAL"
+              label="Your users"
+              description="We will give you OAuth React components so you can connect as your users."
+              variant="description"
+            />
+          </RadioGroup>
+        </>
+      )}
+      {selectedOAuthMethod &&
+        connectionType &&
+        oAuthKey &&
+        (connectionType === "DEVELOPER" ? (
+          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>
+            <Paragraph spacing>
+              End-user OAuth is going to be released soon. If you are interested in being an early
+              beta tester then please{" "}
+              <a href="mailto:founders@trigger.dev" className="text-indigo-500 underline">
+                message us
+              </a>
+              .
+            </Paragraph>
+          </>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,237 @@
+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>
+        {authMethod.scopes.length > 0 && (
+          <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/integrations/WorkflowConnections.tsx

@@ -1,86 +0,0 @@
-import invariant from "tiny-invariant";
-import { useConnectionSlots } from "~/hooks/useConnectionSlots";
-import { useCurrentOrganization } from "~/hooks/useOrganizations";
-import { ApiLogoIcon } from "../code/ApiLogoIcon";
-import { List } from "../layout/List";
-import { Body } from "../primitives/text/Body";
-import { Header3 } from "../primitives/text/Headers";
-import { SubTitle } from "../primitives/text/SubTitle";
-import { ConnectionSelector } from "./ConnectionSelector";
-
-export function WorkflowConnections() {
-  const organization = useCurrentOrganization();
-  invariant(organization, "Organization not found");
-  const connectionSlots = useConnectionSlots();
-  invariant(connectionSlots, "Connection slots not found");
-  const allApisCount =
-    connectionSlots.services.length + (connectionSlots.source ? 1 : 0);
-  const connectedApisCount =
-    connectionSlots.services.filter((c) => c.connection).length +
-    (connectionSlots.source?.connection ? 1 : 0);
-  const unconnectedApisCount = allApisCount - connectedApisCount ? 1 : 0;
-  const unconnectedApisCountCopy = `, ${unconnectedApisCount} to connect`;
-
-  return (
-    <>
-      <SubTitle>
-        <>
-          {connectedApisCount} API
-          {connectedApisCount > 1
-            ? "s"
-            : connectedApisCount === 0
-            ? "s"
-            : ""}{" "}
-          connected
-          {unconnectedApisCount === 0 ? "" : unconnectedApisCountCopy}
-        </>
-      </SubTitle>
-      <List>
-        {connectionSlots.source && (
-          <li className="flex gap-4 w-full px-4 py-4">
-            <ApiLogoIcon
-              integration={connectionSlots.source.integration}
-              size="regular"
-            />
-            <div className="flex items-center justify-between gap-1 w-full">
-              <Body>{connectionSlots.source.integration.name}</Body>
-              <ConnectionSelector
-                type="source"
-                sourceServiceId={connectionSlots.source.id}
-                organizationId={organization.id}
-                integration={connectionSlots.source.integration}
-                connections={connectionSlots.source.possibleConnections}
-                selectedConnectionId={connectionSlots.source.connection?.id}
-                className="mr-1"
-                popoverAlign="right"
-              />
-            </div>
-          </li>
-        )}
-        {connectionSlots.services.map((slot) => (
-          <li
-            key={slot.id}
-            className="flex gap-4 items-center w-full px-4 py-4"
-          >
-            <ApiLogoIcon integration={slot.integration} size="regular" />
-            <div className="flex items-center justify-between w-full">
-              <Header3 size="small" className="truncate text-slate-300">
-                {slot.integration?.name}
-              </Header3>
-              <ConnectionSelector
-                type="service"
-                sourceServiceId={slot.id}
-                organizationId={organization.id}
-                integration={slot.integration}
-                connections={slot.possibleConnections}
-                selectedConnectionId={slot.connection?.id}
-                className="mr-1"
-                popoverAlign="right"
-              />
-            </div>
-          </li>
-        ))}
-      </List>
-    </>
-  );
-}

apps/webapp/app/components/integrations/connectionType.ts

@@ -0,0 +1,10 @@
+import type { ConnectionType } from "@trigger.dev/database";
+
+export function connectionType(type: ConnectionType) {
+  switch (type) {
+    case "DEVELOPER":
+      return "Developer";
+    case "EXTERNAL":
+      return "Your users";
+  }
+}

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

@@ -0,0 +1,20 @@
+export function JobSkeleton() {
+  return (
+    <div className={"flex w-full gap-x-4 bg-midnight-850 p-4 pr-5 "}>
+      <div className="aspect-square h-6 w-6 rounded border border-slate-800 bg-slate-900 p-1.5 md:h-10 md:w-10 lg:h-12 lg:w-12" />
+      <div className="flex w-full">
+        <div className="flex w-full flex-col justify-between gap-y-1">
+          <div className="flex items-baseline justify-between gap-x-3 pr-3 md:justify-start md:pr-0">
+            <div className="h-5 w-1/4 rounded border border-slate-800 bg-slate-900" />
+          </div>
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+            <div className="h-2.5 w-1/2 rounded border border-slate-800 bg-slate-900" />
+          </div>
+          <div className="flex flex-wrap gap-x-4 gap-y-1">
+            <div className="h-1 w-1/5 rounded border border-slate-800 bg-slate-900" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,170 @@
+import { jobPath } from "~/utils/pathBuilder";
+import { DateTime } from "../primitives/DateTime";
+import { LabelValueStack } from "../primitives/LabelValueStack";
+import { NamedIcon } from "../primitives/NamedIcon";
+import { Paragraph } from "../primitives/Paragraph";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableCellChevron,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "../primitives/Table";
+import { SimpleTooltip } from "../primitives/Tooltip";
+import { runStatusTitle } from "../runs/RunStatuses";
+import { ProjectJob } from "~/hooks/useJobs";
+import { useProject } from "~/hooks/useProject";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { JobRunStatus } from "~/models/job.server";
+import { cn } from "~/utils/cn";
+
+export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResultsText: string }) {
+  const organization = useOrganization();
+  const project = useProject();
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Job</TableHeaderCell>
+          <TableHeaderCell>ID</TableHeaderCell>
+          <TableHeaderCell>Integrations</TableHeaderCell>
+          <TableHeaderCell>Properties</TableHeaderCell>
+          <TableHeaderCell>Last run</TableHeaderCell>
+          <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {jobs.length > 0 ? (
+          jobs.map((job) => {
+            const path = jobPath(organization, project, job);
+            return (
+              <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" />
+                    <LabelValueStack
+                      label={job.title}
+                      value={
+                        job.dynamic ? (
+                          <span className="flex items-center gap-0.5">
+                            <NamedIcon name="dynamic" className="h-4 w-4" />{" "}
+                            <span className="uppercase">Dynamic:</span> {job.event.title}
+                          </span>
+                        ) : (
+                          job.event.title
+                        )
+                      }
+                      variant="primary"
+                    />
+                  </span>
+                </TableCell>
+                <TableCell to={path}>
+                  <LabelValueStack label={job.slug} value={`v${job.version}`} variant="primary" />
+                </TableCell>
+                <TableCell to={path}>
+                  {job.integrations.map((integration) => (
+                    <SimpleTooltip
+                      key={integration.key}
+                      button={
+                        <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>
+                      }
+                    />
+                  ))}
+                </TableCell>
+                <TableCell to={path}>
+                  {job.properties && (
+                    <SimpleTooltip
+                      button={
+                        <div className="flex max-w-[200px] items-start justify-start gap-5 truncate">
+                          {job.properties.map((property, index) => (
+                            <LabelValueStack
+                              key={index}
+                              label={property.label}
+                              value={property.text}
+                              className=" last:truncate"
+                            />
+                          ))}
+                        </div>
+                      }
+                      content={
+                        <div className="flex flex-col gap-2">
+                          {job.properties.map((property, index) => (
+                            <LabelValueStack
+                              key={index}
+                              label={property.label}
+                              value={property.text}
+                            />
+                          ))}
+                        </div>
+                      }
+                    />
+                  )}
+                </TableCell>
+                <TableCell to={path}>
+                  {job.lastRun ? (
+                    <LabelValueStack
+                      label={
+                        <span className={classForJobStatus(job.lastRun.status)}>
+                          {runStatusTitle(job.lastRun.status)}
+                        </span>
+                      }
+                      value={
+                        <span className={classForJobStatus(job.lastRun.status)}>
+                          <DateTime date={job.lastRun.createdAt} />
+                        </span>
+                      }
+                    />
+                  ) : (
+                    <LabelValueStack label={"Never run"} value={"–"} />
+                  )}
+                </TableCell>
+                <TableCellChevron to={path} />
+              </TableRow>
+            );
+          })
+        ) : (
+          <TableBlankRow colSpan={6}>
+            <Paragraph variant="small" className="flex items-center justify-center">
+              {noResultsText}
+            </Paragraph>
+          </TableBlankRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+
+function classForJobStatus(status: JobRunStatus) {
+  switch (status) {
+    case "FAILURE":
+    case "TIMED_OUT":
+    case "WAITING_ON_CONNECTIONS":
+    case "PENDING":
+      return "text-rose-500";
+    default:
+      return "";
+  }
+}

apps/webapp/app/components/layout/AppLayout.tsx

@@ -1,26 +1,69 @@
-import classNames from "classnames";
-import { ImpersonationBanner } from "../ImpersonationBanner";
+import { cn } from "~/utils/cn";
+import gradientPath from "./app-container-gradient.svg";
 
-export function AppLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="grid grid-rows-[3rem_auto_2rem] w-full h-full">
-      {children}
-    </div>
-    // <div className="grid grid-rows-[2rem_3rem_auto_2rem] w-full h-full">
-    //   <ImpersonationBanner />
-    //   {children}
-    // </div>
-  );
-}
-
-export function AppBody({
+/** This container is used to surround the entire app, it correctly places the nav bar */
+export function AppContainer({
   children,
-  className = "bg-slate-850",
+  showBackgroundGradient,
 }: {
   children: React.ReactNode;
-  className?: string;
+  showBackgroundGradient?: boolean;
 }) {
   return (
-    <div className={classNames("overflow-y-auto", className)}>{children}</div>
+    <BackgroundGradient showBackgroundGradient={showBackgroundGradient}>
+      <div className={cn("grid h-full w-full grid-rows-[2.75rem_auto]")}>{children}</div>
+    </BackgroundGradient>
+  );
+}
+
+export function BackgroundGradient({
+  children,
+  showBackgroundGradient,
+}: {
+  children: React.ReactNode;
+  showBackgroundGradient?: boolean;
+}) {
+  return (
+    <div
+      className={cn("h-full w-full bg-contain bg-right-top bg-no-repeat")}
+      style={
+        showBackgroundGradient
+          ? {
+              backgroundImage: `url(${gradientPath})`,
+            }
+          : undefined
+      }
+    >
+      {children}
+    </div>
+  );
+}
+
+/** This container should be placed around the content on a page */
+export function PageContainer({ children }: { children: React.ReactNode }) {
+  return <div className={cn("grid h-full grid-rows-[auto_1fr]")}>{children}</div>;
+}
+
+export function PageBody({
+  children,
+  scrollable = true,
+}: {
+  children: React.ReactNode;
+  scrollable?: boolean;
+}) {
+  return (
+    <div className={cn(scrollable ? "overflow-y-auto p-4 " : "overflow-hidden")}>{children}</div>
+  );
+}
+
+export function PageBodyPadding({ children }: { children: React.ReactNode }) {
+  return <div className="p-4">{children}</div>;
+}
+
+export function MainCenteredContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-full w-full">
+      <div className="mx-auto mt-[30vh] max-w-xs">{children}</div>
+    </div>
   );
 }

apps/webapp/app/components/layout/Container.tsx

@@ -1,17 +0,0 @@
-import classNames from "classnames";
-
-const baseClasses = "px-12 py-10";
-
-export function Container({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={classNames("overflow-y-auto", baseClasses, className)}>
-      {children}
-    </div>
-  );
-}

apps/webapp/app/components/layout/Footer.tsx

@@ -1,49 +0,0 @@
-export function Footer() {
-  const linkStyle =
-    "text-xs font-medium text-slate-400 whitespace-nowrap bg-transparent text-slate-500 transition hover:text-indigo-500";
-
-  return (
-    <div className="flex w-full items-center justify-between border-t border-slate-800 bg-slate-950 pl-2 pr-3 py-1 flex-row gap-0">
-      <p className="text-xs text-slate-500">
-        &copy; {new Date().getFullYear()} Trigger.dev{" "}
-        <span className="text-slate-600">|</span>{" "}
-        <a
-          className="transition hover:text-indigo-500"
-          href="https://trigger.dev/legal/terms"
-        >
-          Terms
-        </a>{" "}
-        <span className="text-slate-600">|</span>{" "}
-        <a
-          className="transition hover:text-indigo-500"
-          href="https://trigger.dev/legal/privacy"
-        >
-          Privacy
-        </a>
-      </p>
-
-      <div className="flex gap-3">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://discord.gg/kA47vcd8P6"
-          className={linkStyle}
-        >
-          Discord
-        </a>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://twitter.com/triggerdotdev"
-          className={linkStyle}
-        >
-          Twitter
-        </a>
-
-        <a href="mailto:hello@trigger.dev" className={linkStyle}>
-          Get in touch
-        </a>
-      </div>
-    </div>
-  );
-}

apps/webapp/app/components/layout/Header.tsx

@@ -1,69 +0,0 @@
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
-import { Link } from "@remix-run/react";
-import { useOptionalUser } from "~/hooks/useUser";
-import { Logo } from "../Logo";
-import { EnvironmentMenu } from "../../routes/resources/environment";
-import { OrganizationMenu } from "../navigation/OrganizationMenu";
-import { WorkflowMenu } from "../navigation/WorkflowMenu";
-import { TertiaryA } from "../primitives/Buttons";
-import { UserProfileMenu } from "../UserProfileMenu";
-
-type HeaderProps = {
-  children?: React.ReactNode;
-};
-
-export function Header({ children }: HeaderProps) {
-  const user = useOptionalUser();
-
-  return (
-    <div className="flex w-full gap-2 items-center border-b border-slate-800 bg-slate-950 py-1 pl-4 pr-3">
-      <Link to="/" aria-label="Trigger" className="flex shrink-0 mr-2 w-28">
-        <Logo className="" />
-      </Link>
-      <OrganizationMenu />
-      <WorkflowMenu />
-      <EnvironmentMenu />
-
-      <div className="flex flex-1 justify-center">{children}</div>
-
-      <div className="flex items-center gap-4">
-        <TertiaryA href="https://docs.trigger.dev" target="_blank">
-          <DocumentTextIcon className="h-5 w-5" />
-          Docs
-        </TertiaryA>
-        {user ? (
-          <UserProfileMenu user={user} />
-        ) : (
-          <Link
-            to="/login"
-            className="text-gray-700 transition hover:text-black"
-          >
-            Login
-          </Link>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function BreadcrumbDivider() {
-  return (
-    <svg
-      width="9"
-      height="20"
-      viewBox="0 0 9 26"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <line
-        x1="8.32382"
-        y1="0.6286"
-        x2="0.6286"
-        y2="24.6762"
-        opacity={0.3}
-        stroke="white"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}

apps/webapp/app/components/layout/List.tsx

@@ -1,11 +0,0 @@
-export type ListProps = {
-  children: React.ReactNode;
-};
-
-export function List({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="bg-slate-800 shadow-md sm:rounded-md mb-4">
-      <ul className="divide-y divide-slate-850">{children}</ul>
-    </div>
-  );
-}

apps/webapp/app/components/layout/Panel.tsx

@@ -1,20 +0,0 @@
-export type PanelProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export function Panel({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={`bg-slate-800 w-full shadow-md rounded-md p-3 ${className}`}
-    >
-      {children}
-    </div>
-  );
-}

apps/webapp/app/components/layout/PanelHeader.tsx

@@ -1,76 +0,0 @@
-import { ArrowRightIcon } from "@heroicons/react/24/outline";
-import type { ReactNode } from "react";
-import { dateDifference, formatDateTime } from "~/utils";
-import { Body } from "../primitives/text/Body";
-
-const workflowNodeFlexClasses = "flex gap-1 items-baseline";
-const workflowNodeUppercaseClasses = "uppercase text-slate-400";
-
-export function PanelHeader({
-  icon,
-  title,
-  startedAt,
-  finishedAt,
-  integration,
-  runId,
-  name,
-}: {
-  icon: ReactNode;
-  title: string;
-  startedAt?: Date | null;
-  finishedAt?: Date | null;
-  integration?: string;
-  runId?: string;
-  name?: string;
-}) {
-  return (
-    <div className="flex mb-4 pb-3 justify-between items-center border-b border-slate-850">
-      <div className="flex gap-1 items-center">
-        {icon}
-        <Body size="small" className="uppercase text-slate-400 font-semibold">
-          {title}
-        </Body>
-        {name && (
-          <div className="flex gap-3 items-center ml-2">
-            <span className="block h-5 border-l border-slate-850"></span>
-            <Body size="small" className="text-slate-400">
-              {name}
-            </Body>
-          </div>
-        )}
-      </div>
-      <ul className="flex justify-end items-center gap-4">
-        <div className={workflowNodeFlexClasses}>
-          {startedAt && (
-            <Body size="small">{formatDateTime(startedAt, "long")}</Body>
-          )}
-          {startedAt &&
-            finishedAt &&
-            dateDifference(startedAt, finishedAt) > 1000 && (
-              <>
-                <Body
-                  size="extra-small"
-                  className={workflowNodeUppercaseClasses}
-                >
-                  <ArrowRightIcon className="h-3 w-3" />
-                </Body>
-                <Body size="small">{formatDateTime(finishedAt, "long")}</Body>
-              </>
-            )}
-        </div>
-
-        {integration && (
-          <li className="flex gap-2 items-center">
-            <Body size="small">{integration}</Body>
-          </li>
-        )}
-
-        {runId && (
-          <li className="flex gap-2 items-center">
-            <Body size="small">{runId}</Body>
-          </li>
-        )}
-      </ul>
-    </div>
-  );
-}

apps/webapp/app/components/layout/PanelInfo.tsx

@@ -1,29 +0,0 @@
-import { InformationCircleIcon } from "@heroicons/react/24/solid";
-import { Body } from "../primitives/text/Body";
-
-export type PanelInfoProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export function PanelInfo({
-  children,
-  className,
-  message,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  message?: string;
-}) {
-  return (
-    <div
-      className={`flex w-full justify-between gap-4 rounded-md border border-slate-600 bg-slate-400/10 py-3 pl-3 pr-3 shadow-md ${className}`}
-    >
-      <div className="flex items-center justify-start gap-2.5">
-        <InformationCircleIcon className="h-6 w-6 min-w-[24px] text-blue-500" />
-        <Body className="text-slate-300">{message}</Body>
-      </div>
-      {children}
-    </div>
-  );
-}

apps/webapp/app/components/layout/PanelWarning.tsx

@@ -1,29 +0,0 @@
-import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
-import { Body } from "../primitives/text/Body";
-
-export type PanelWarningProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export function PanelWarning({
-  children,
-  className,
-  message,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-  message: string;
-}) {
-  return (
-    <div
-      className={`flex w-full items-center rounded-md border border-amber-500 bg-amber-400/10 p-3 shadow-md ${className}`}
-    >
-      <div className="flex items-center gap-2.5">
-        <ExclamationTriangleIcon className="h-6 w-6 min-w-[24px] text-amber-500" />
-        <Body className="">{message}</Body>
-      </div>
-      {children}
-    </div>
-  );
-}

apps/webapp/app/components/layout/app-container-gradient.svg

@@ -0,0 +1,16 @@
+<svg width="1210" height="898" viewBox="0 0 1210 898" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.1" filter="url(#filter0_f_2981_55177)">
+<path d="M220 0H1210V779H860C506.538 779 220 492.462 220 139V0Z" fill="url(#paint0_linear_2981_55177)"/>
+</g>
+<defs>
+<filter id="filter0_f_2981_55177" x="0" y="-220" width="1430" height="1219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="110" result="effect1_foregroundBlur_2981_55177"/>
+</filter>
+<linearGradient id="paint0_linear_2981_55177" x1="220" y1="779" x2="1358.02" y2="423.315" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2563EB"/>
+<stop offset="1" stop-color="#A855F7"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,26 @@
+import { RouteMatch, useMatches } from "@remix-run/react";
+import { Fragment, ReactNode } from "react";
+import { BreadcrumbIcon } from "../primitives/BreadcrumbIcon";
+
+export type BreadcrumbItem = (match: RouteMatch, allMatches: RouteMatch[]) => ReactNode;
+
+export function Breadcrumb() {
+  const matches = useMatches();
+
+  return (
+    <div className="hidden items-center md:flex">
+      {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>
+  );
+}

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

@@ -0,0 +1,65 @@
+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 { useJobs } from "~/hooks/useJobs";
+import { cn } from "~/utils/cn";
+import { jobPath } from "~/utils/pathBuilder";
+import { LabelValueStack } from "../primitives/LabelValueStack";
+import { NamedIcon } from "../primitives/NamedIcon";
+import {
+  Popover,
+  PopoverArrowTrigger,
+  PopoverContent,
+  PopoverSectionHeader,
+} from "../primitives/Popover";
+
+export function JobsMenu({ matches }: { matches: RouteMatch[] }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const organization = useOrganization(matches);
+  const project = useProject(matches);
+  const projectJobs = useJobs(matches);
+  const currentJob = useJob(matches);
+
+  return (
+    <>
+      <Popover onOpenChange={(open) => setIsOpen(open)}>
+        <PopoverArrowTrigger isOpen={isOpen}>
+          {currentJob?.title ?? "Select a job"}
+        </PopoverArrowTrigger>
+        <PopoverContent
+          className="min-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+          align="start"
+          collisionPadding={20}
+        >
+          <PopoverSectionHeader title="Jobs" />
+          <div className="flex flex-col gap-1 p-1">
+            {projectJobs.map((job) => {
+              const isSelected = job.id === currentJob?.id;
+              return (
+                <Link
+                  key={job.id}
+                  to={jobPath(organization, project, job)}
+                  className={cn(
+                    "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-8 w-8" />
+                  <LabelValueStack
+                    label={job.title}
+                    value={job.slug}
+                    variant="primary"
+                    className="w-full"
+                  />
+                  {isSelected && <NamedIcon name="check" className="mr-1 h-6 w-6" />}
+                </Link>
+              );
+            })}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}