Latest lockfile

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

.changeset/config.json

@@ -14,6 +14,8 @@
   "ignore": [
     "webapp",
     "emails",
+    "proxy",
+    "yalt",
     "@trigger.dev/database"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {

.github/workflows/publish-docker.yml

@@ -3,7 +3,12 @@ on:
   workflow_call:
 jobs:
   publish:
-    runs-on: buildjet-4vcpu-ubuntu-2204
+    strategy:
+      fail-fast: true # when a job fails, all remaining ones will be cancelled
+      matrix:
+        runs-on: [buildjet-4vcpu-ubuntu-2204, buildjet-4vcpu-ubuntu-2204-arm]
+    name: ${{matrix.runs-on}}
+    runs-on: ${{matrix.runs-on}}
     outputs:
       version: ${{ steps.get_version.outputs.version }}
       short_sha: ${{ steps.get_commit.outputs.sha_short }}
@@ -36,6 +41,9 @@ jobs:
             echo "Invalid reference: ${GITHUB_REF}"
             exit 1
           fi
+          if [[ ${{matrix.runs-on}} == *-arm ]]; then
+            IMAGE_TAG="${IMAGE_TAG}-arm"
+          fi
           echo "::set-output name=version::${IMAGE_TAG}"
       - name: 🔢 Get the commit hash
         id: get_commit
@@ -65,8 +73,12 @@ jobs:
       - name: 🐙 Push 'latest' to GitHub Container Registry
         if: startsWith(github.ref, 'refs/tags/v.docker')
         run: |
-          docker tag release_build_image $REGISTRY/$REPOSITORY:latest
-          docker push $REGISTRY/$REPOSITORY:latest
+          LATEST=latest
+          if [[ ${{matrix.runs-on}} == *-arm ]]; then
+            LATEST="${LATEST}-arm"
+          fi
+          docker tag release_build_image $REGISTRY/$REPOSITORY:$LATEST
+          docker push $REGISTRY/$REPOSITORY:$LATEST
         env:
           REGISTRY: ghcr.io/triggerdotdev
           REPOSITORY: trigger.dev

.github/workflows/unit-tests.yml

@@ -22,6 +22,16 @@ jobs:
           node-version: 18
           cache: "pnpm"
 
+      - name: ⎔ Setup Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: ⎔ Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: "1.0.15"
+
       - name: 📥 Download deps
         run: pnpm install --frozen-lockfile
 

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "deno.enablePaths": ["references/deno-reference"],
+  "deno.enablePaths": ["references/deno-reference", "runtime_tests/tests/deno"],
   "debug.toolBarLocation": "commandCenter"
 }

apps/proxy/CHANGELOG.md

@@ -1,5 +1,55 @@
 # proxy
 
+## 0.0.11
+
+### Patch Changes
+
+- @trigger.dev/core@2.3.5
+
+## 0.0.10
+
+### Patch Changes
+
+- @trigger.dev/core@2.3.4
+
+## 0.0.9
+
+### Patch Changes
+
+- @trigger.dev/core@2.3.3
+
+## 0.0.8
+
+### Patch Changes
+
+- @trigger.dev/core@2.3.2
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [f3efcc0c]
+  - @trigger.dev/core@2.3.1
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [17f6f29d]
+  - @trigger.dev/core@2.3.0
+
+## 0.0.5
+
+### Patch Changes
+
+- @trigger.dev/core@2.2.11
+
+## 0.0.4
+
+### Patch Changes
+
+- @trigger.dev/core@2.2.10
+
 ## 0.0.3
 
 ### Patch Changes

apps/proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxy",
-  "version": "0.0.3",
+  "version": "0.0.11",
   "private": true,
   "scripts": {
     "deploy": "wrangler deploy",

apps/webapp/app/components/DefinitionTooltip.tsx

@@ -0,0 +1,33 @@
+import { Header3 } from "./primitives/Headers";
+import { Paragraph } from "./primitives/Paragraph";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip";
+
+export function DefinitionTip({
+  content,
+  children,
+  title,
+}: {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  title: React.ReactNode;
+}) {
+  return (
+    <TooltipProvider>
+      <Tooltip disableHoverableContent>
+        <TooltipTrigger>
+          <span className="underline decoration-slate-600 decoration-dashed underline-offset-4 transition hover:decoration-slate-500">
+            {children}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent align="end" side="right" variant="dark" className="w-[16rem] min-w-[16rem]">
+          <Header3 className="mb-1">{title}</Header3>
+          {typeof content === "string" ? (
+            <Paragraph variant="small">{content}</Paragraph>
+          ) : (
+            <div>{content}</div>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

apps/webapp/app/components/Feedback.tsx

@@ -1,12 +1,15 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
+import { DiscordIcon } from "@trigger.dev/companyicons";
 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 { Header2 } from "./primitives/Headers";
 import { InputGroup } from "./primitives/InputGroup";
 import { Label } from "./primitives/Label";
 import { Paragraph } from "./primitives/Paragraph";
@@ -20,8 +23,6 @@ import {
 } from "./primitives/Select";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "./primitives/Sheet";
 import { TextArea } from "./primitives/TextArea";
-import { DiscordIcon } from "@trigger.dev/companyicons";
-import { ChevronRightIcon } from "@heroicons/react/24/solid";
 
 type FeedbackProps = {
   button: ReactNode;
@@ -55,19 +56,16 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild={true}>{button}</SheetTrigger>
-      <SheetContent size="sm">
-        <SheetHeader className="justify-between">Help & feedback</SheetHeader>
-        <SheetBody>
+      <SheetContent>
+        <SheetHeader className="justify-between">How can we help?</SheetHeader>
+        <SheetBody className="flex h-full flex-col justify-between">
           <DiscordBanner />
-          <Paragraph variant="small" className="mb-4 border-t border-slate-800 pt-3">
-            Or 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>
+          <hr className="mb-3" />
+          <Header2 className="mb-4">Send us a message</Header2>
           <Form method="post" action="/resources/feedback" {...form.props}>
             <Fieldset className="max-w-full">
               <input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
               <InputGroup className="max-w-full">
-                <Label>How can we help?</Label>
                 <SelectGroup>
                   <Select {...conform.input(feedbackType)} defaultValue={defaultValue}>
                     <SelectTrigger size="medium" width="full">
@@ -90,14 +88,19 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
                 <FormError id={message.errorId}>{message.error}</FormError>
               </InputGroup>
               <FormError>{form.error}</FormError>
-              <FormButtons
-                className="w-full"
-                confirmButton={
-                  <Button type="submit" variant="primary/medium">
-                    Send
-                  </Button>
-                }
-              />
+              <div className="flex w-full items-center justify-between">
+                <Paragraph variant="small" className="w-full">
+                  We read every message and respond quickly.
+                </Paragraph>
+                <FormButtons
+                  className="m-0 w-max"
+                  confirmButton={
+                    <Button type="submit" variant="primary/medium">
+                      Send
+                    </Button>
+                  }
+                />
+              </div>
             </Fieldset>
           </Form>
         </SheetBody>
@@ -109,7 +112,7 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
 function DiscordBanner() {
   return (
     <a
-      href="https://discord.gg/nkqV9xBYWy"
+      href="https://trigger.dev/discord"
       target="_blank"
       className="group mb-4 flex w-full items-center justify-between rounded-md border border-slate-600 bg-gradient-to-br from-blue-400/30 to-indigo-400/50 p-4 transition hover:border-indigo-400"
     >
@@ -120,13 +123,11 @@ function DiscordBanner() {
           <br />
           Discord community
         </h2>
-        <Paragraph variant="small">
+        <Paragraph variant="small/bright">
           Get help or answer questions from the Trigger.dev community.
         </Paragraph>
       </div>
-      <div className="h-full">
-        <ChevronRightIcon className="h-5 w-5 text-slate-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
-      </div>
+      <ChevronRightIcon className="h-5 w-5 text-slate-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
     </a>
   );
 }

apps/webapp/app/components/PageGradient.tsx

@@ -1,12 +0,0 @@
-import gradientBackground from "~/assets/images/gradient-background.png";
-
-export function PageGradient({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      className="-mt-4 h-full w-full bg-cover bg-no-repeat pt-20"
-      style={{ backgroundImage: `url("${gradientBackground}")` }}
-    >
-      {children}
-    </div>
-  );
-}

apps/webapp/app/components/billing/ConcurrentRunsChart.tsx

@@ -0,0 +1,114 @@
+import {
+  Label,
+  Line,
+  LineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Paragraph } from "../primitives/Paragraph";
+
+const tooltipStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  borderRadius: "0.25rem",
+  border: "1px solid #1A2434",
+  backgroundColor: "#0B1018",
+  padding: "0.3rem 0.5rem",
+  fontSize: "0.75rem",
+  color: "#E2E8F0",
+};
+
+type DataItem = { date: Date; maxConcurrentRuns: number };
+
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+});
+
+export function ConcurrentRunsChart({
+  concurrentRunsLimit,
+  data,
+  hasConcurrencyData,
+}: {
+  concurrentRunsLimit?: number;
+  data: DataItem[];
+  hasConcurrencyData: boolean;
+}) {
+  return (
+    <div className="relative">
+      {!hasConcurrencyData && (
+        <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          No concurrent Runs to show
+        </Paragraph>
+      )}
+      <ResponsiveContainer width="100%" height="100%" className="relative min-h-[20rem]">
+        <LineChart
+          data={data}
+          margin={{
+            top: 20,
+            right: 0,
+            left: 0,
+            bottom: 10,
+          }}
+          className="-ml-8"
+        >
+          <XAxis
+            stroke="#94A3B8"
+            fontSize={12}
+            tickLine={false}
+            axisLine={false}
+            dataKey={(item: DataItem) => {
+              if (item.date.getDate() === 1) {
+                return dateFormatter.format(item.date);
+              }
+              return `${item.date.getDate()}`;
+            }}
+            className="text-xs"
+          >
+            <Label value="Last 30 days" offset={-8} position="insideBottom" fill="#94A3B8" />
+          </XAxis>
+          <YAxis stroke="#94A3B8" fontSize={12} tickLine={false} axisLine={false} />
+          <Tooltip
+            cursor={{ fill: "rgba(255,255,255,0.05)" }}
+            contentStyle={tooltipStyle}
+            labelFormatter={(value, data) => {
+              const date = data.at(0)?.payload.date;
+              if (!date) {
+                return "";
+              }
+              return dateFormatter.format(date);
+            }}
+          />
+          {concurrentRunsLimit && (
+            <ReferenceLine
+              y={concurrentRunsLimit}
+              stroke="#F43F5E"
+              strokeWidth={1}
+              strokeDasharray={5}
+              ifOverflow="extendDomain"
+              className="text-xs"
+            >
+              <Label
+                value="Concurrent Runs limit"
+                offset={8}
+                position="insideTopLeft"
+                fill="#F43F5E"
+              />
+            </ReferenceLine>
+          )}
+          <Line
+            dataKey="maxConcurrentRuns"
+            name="Concurrent runs"
+            stroke="#16A34A"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

apps/webapp/app/components/billing/FreePlanUsage.tsx

@@ -0,0 +1,40 @@
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { motion, useMotionValue, useTransform } from "framer-motion";
+import { Paragraph } from "../primitives/Paragraph";
+import { Link } from "@remix-run/react";
+import { cn } from "~/utils/cn";
+
+export function FreePlanUsage({ to, percentage }: { to: string; percentage: number }) {
+  const cappedPercentage = Math.min(percentage, 1);
+  const widthProgress = useMotionValue(cappedPercentage * 100);
+  const color = useTransform(
+    widthProgress,
+    [0, 74, 75, 95, 100],
+    ["#22C55E", "#22C55E", "#F59E0B", "#F43F5E", "#F43F5E"]
+  );
+
+  return (
+    <div className="rounded border border-slate-900 bg-[#101722] p-2.5">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1">
+          <ArrowUpCircleIcon className="h-5 w-5 text-dimmed" />
+          <Paragraph className="text-2sm text-bright">Free Plan</Paragraph>
+        </div>
+        <Link to={to} className="text-2sm text-indigo-500">
+          Learn more
+        </Link>
+      </div>
+      <div className="relative mt-3 h-1 rounded-full bg-[#0B1018]">
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: cappedPercentage * 100 + "%" }}
+          style={{
+            backgroundColor: color,
+          }}
+          transition={{ duration: 1, type: "spring" }}
+          className={cn("absolute left-0 top-0 h-full rounded-full")}
+        />
+      </div>
+    </div>
+  );
+}

apps/webapp/app/components/billing/PricingCalculator.tsx

@@ -0,0 +1,259 @@
+import * as Slider from "@radix-ui/react-slider";
+import { Plans, estimate } from "@trigger.dev/billing";
+import { useCallback, useState } from "react";
+import { DefinitionTip } from "../DefinitionTooltip";
+import { Header2 } from "../primitives/Headers";
+import { Paragraph } from "../primitives/Paragraph";
+import { formatCurrency, formatNumberCompact } from "~/utils/numberFormatter";
+import { cn } from "~/utils/cn";
+
+export function PricingCalculator({ plans }: { plans: Plans }) {
+  const [selectedConcurrencyIndex, setSelectedConcurrencyIndex] = useState(0);
+  const concurrentRunTiers = [
+    { code: "free", upto: plans.free.concurrentRuns?.freeAllowance! },
+    ...(plans.paid.concurrentRuns?.pricing?.tiers ?? []),
+  ];
+  const [runs, setRuns] = useState(0);
+  const runBrackets = [
+    ...(plans.paid.runs?.pricing?.brackets.map((b, index, arr) => ({
+      unitCost: b.unitCost,
+      from: index === 0 ? 0 : arr[index - 1].upto! + 1,
+      upto: b.upto ?? arr[index - 1].upto! * 10,
+    })) ?? []),
+  ];
+
+  const result = estimate({
+    usage: { runs, concurrent_runs: concurrentRunTiers[selectedConcurrencyIndex].upto - 1 },
+    plans: [plans.free, plans.paid],
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <ConcurrentRunsSlider
+        options={concurrentRunTiers}
+        selectedIndex={selectedConcurrencyIndex}
+        setSelectedIndex={setSelectedConcurrencyIndex}
+        cost={result?.cost.concurrentRunCost ?? 0}
+      />
+      <RunsSlider
+        brackets={runBrackets}
+        runs={runs}
+        setRuns={setRuns}
+        cost={result?.cost.runsCost ?? 0}
+      />
+      <GrandTotal cost={result?.cost.total ?? 0} />
+    </div>
+  );
+}
+
+function ConcurrentRunsSlider({
+  options,
+  selectedIndex,
+  setSelectedIndex,
+  cost,
+}: {
+  options: {
+    code: string;
+    upto: number;
+  }[];
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  cost: number;
+}) {
+  const selectedOption = options[selectedIndex];
+
+  return (
+    <div>
+      <div className="flex">
+        <div className="flex w-full flex-col">
+          <div className="flex items-center justify-between">
+            <Header2>
+              <DefinitionTip
+                content="The number of runs that can be executed at the same time. Get in touch if you need more than 100."
+                title="Concurrent runs"
+              >
+                Concurrent runs
+              </DefinitionTip>
+            </Header2>
+            <Header2>Up to {selectedOption.upto}</Header2>
+          </div>
+          <Slider.Root
+            className="relative mb-2 mt-4 flex h-5 w-full touch-none select-none items-center"
+            value={[selectedIndex]}
+            onValueChange={(value) => setSelectedIndex(value[0])}
+            max={options.length - 1}
+            step={1}
+          >
+            <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
+              <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+            </Slider.Track>
+            <Slider.Thumb
+              className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              aria-label="Concurrent runs slider"
+            />
+          </Slider.Root>
+          <div className="ml-1.5 flex w-[99.85%] items-center justify-between">
+            {options.map((tier, i) => {
+              return (
+                <Paragraph variant="extra-small" className="text-slate-600" key={i}>
+                  {tier.upto}
+                </Paragraph>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex h-full items-start">
+          <span className="ml-6 text-dimmed">=</span>
+          <Header2 className="min-w-[8ch] text-right text-dimmed">
+            {formatCurrency(cost, true)}
+          </Header2>
+        </div>
+      </div>
+      <hr className="mt-6 border-border" />
+    </div>
+  );
+}
+
+const runIncrements = 10_000;
+function RunsSlider({
+  brackets,
+  runs,
+  setRuns,
+  cost,
+}: {
+  brackets: {
+    from: number;
+    upto: number;
+    unitCost: number;
+  }[];
+  runs: number;
+  setRuns: (value: number) => void;
+  cost: number;
+}) {
+  const [value, setValue] = useState(0);
+
+  const updateRuns = useCallback((value: number) => {
+    setValue(value);
+    const r = calculateRuns(value / runIncrements, brackets);
+    setRuns(r);
+  }, []);
+
+  return (
+    <div>
+      <div className="flex">
+        <div className="flex w-full flex-col">
+          <div className="flex items-center justify-between">
+            <Header2>
+              <DefinitionTip content="A single execution of a Job." title="Runs">
+                Runs
+              </DefinitionTip>
+            </Header2>
+            <Header2>{formatNumberCompact(runs)}</Header2>
+          </div>
+          <Slider.Root
+            className="relative mb-2 mt-4 flex h-5 w-full touch-none select-none items-center"
+            value={[value]}
+            onValueChange={(value) => updateRuns(value[0])}
+            max={runIncrements}
+            step={1}
+          >
+            <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
+              <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+            </Slider.Track>
+            <Slider.Thumb
+              className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              aria-label="Concurrent runs slider"
+            />
+          </Slider.Root>
+          <div className="relative w-full">
+            {brackets.map((bracket, i, arr) => {
+              const percentagePerBracket = 1 / arr.length;
+              return (
+                <SliderMarker
+                  key={i}
+                  percentage={(i / (arr.length - 1)) * percentagePerBracket * (arr.length - 1)}
+                  alignment={i === 0 ? "left" : "center"}
+                  text={formatNumberCompact(bracket.from)}
+                />
+              );
+            })}
+            <SliderMarker
+              percentage={1}
+              alignment={"right"}
+              text={formatNumberCompact(brackets[brackets.length - 1].upto)}
+            />
+          </div>
+        </div>
+        <div className="flex h-full items-start">
+          <span className="ml-6 text-dimmed">=</span>
+          <Header2 className="min-w-[8ch] text-right text-dimmed">
+            {formatCurrency(cost, true)}
+          </Header2>
+        </div>
+      </div>
+      <hr className="mt-6 border-border" />
+    </div>
+  );
+}
+
+function calculateRuns(percentage: number, brackets: { from: number; upto: number }[]) {
+  //first we find which bucket we're in
+  const buckets = brackets.length;
+  const bucket = Math.min(Math.floor(percentage * buckets), brackets.length - 1);
+  const percentagePerBucket = 1 / buckets;
+
+  //relevant bracket
+  let bracket = brackets[bucket];
+  const from = bracket.from;
+  const upto = bracket.upto;
+
+  //how far as we into the bracket
+  const percentageIntoBracket = (percentage - bucket * percentagePerBucket) / percentagePerBucket;
+
+  //calculate the runs
+  const runs = Math.floor(from + (upto - from) * percentageIntoBracket);
+  return runs;
+}
+
+function GrandTotal({ cost }: { cost: number }) {
+  return (
+    <div className="flex justify-between">
+      <Header2>Total monthly estimate</Header2>
+      <Header2>{formatCurrency(cost, true)}</Header2>
+    </div>
+  );
+}
+
+function SliderMarker({
+  percentage,
+  alignment,
+  text,
+}: {
+  percentage: number;
+  alignment: "left" | "center" | "right";
+  text: string;
+}) {
+  return (
+    <div
+      className="absolute top-0 h-4"
+      style={{
+        left: `${percentage * 100}%`,
+      }}
+    >
+      <div
+        className={cn(
+          "absolute flex items-center",
+          alignment === "left"
+            ? "left-0 justify-start"
+            : alignment === "center"
+            ? "-translate-x-1/2 justify-center"
+            : "justify-middle right-0"
+        )}
+      >
+        <Paragraph variant="extra-small" className="text-slate-600">
+          {text}
+        </Paragraph>
+      </div>
+    </div>
+  );
+}

apps/webapp/app/components/billing/PricingTiers.tsx

@@ -0,0 +1,519 @@
+import { useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { CheckIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { Form, useActionData, useNavigation } from "@remix-run/react";
+import { ActiveSubscription, Plan, Plans, SetPlanBodySchema } from "@trigger.dev/billing";
+import { useState } from "react";
+import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+import { cn } from "~/utils/cn";
+import { formatNumberCompact } from "~/utils/numberFormatter";
+import { DefinitionTip } from "../DefinitionTooltip";
+import { Feedback } from "../Feedback";
+import { Button, LinkButton } from "../primitives/Buttons";
+import SegmentedControl from "../primitives/SegmentedControl";
+import { RunsVolumeDiscountTable } from "./RunsVolumeDiscountTable";
+import { Spinner } from "../primitives/Spinner";
+
+const pricingDefinitions = {
+  concurrentRuns: {
+    title: "Concurrent runs",
+    content: "The number of runs that can be executed at the same time.",
+  },
+  jobRuns: {
+    title: "Job runs",
+    content: "A single execution of a job.",
+  },
+  jobs: {
+    title: "Jobs",
+    content: "A durable function that can be executed on a schedule or in response to an event.",
+  },
+  tasks: {
+    title: "Tasks",
+    content: "The individual building blocks of a job run.",
+  },
+  events: {
+    title: "Events",
+    content: "Events trigger jobs to start running.",
+  },
+  integrations: {
+    title: "Integrations",
+    content: "Easily subscribe to webhooks and perform actions using APIs.",
+  },
+};
+
+export function PricingTiers({
+  organizationSlug,
+  plans,
+  className,
+  showActionText = true,
+  freeButtonPath,
+}: {
+  organizationSlug: string;
+  plans: Plans;
+  className?: string;
+  showActionText?: boolean;
+  freeButtonPath?: string;
+}) {
+  const currentPlan = useCurrentPlan();
+  //if they've canceled, we set the subscription to undefined so they can re-upgrade
+  let currentSubscription = currentPlan?.subscription;
+  if (currentPlan?.subscription?.canceledAt) {
+    currentSubscription = undefined;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex min-w-full flex-col items-start justify-center gap-4 md:flex-row",
+        className
+      )}
+    >
+      <TierFree
+        plan={plans.free}
+        currentSubscription={currentSubscription}
+        organizationSlug={organizationSlug}
+        showActionText={showActionText}
+        buttonPath={freeButtonPath}
+      />
+      <TierPro
+        plan={plans.paid}
+        currentSubscription={currentSubscription}
+        organizationSlug={organizationSlug}
+        showActionText={showActionText}
+      />
+      <TierEnterprise />
+    </div>
+  );
+}
+
+export function TierFree({
+  plan,
+  organizationSlug,
+  showActionText,
+  currentSubscription,
+  buttonPath,
+}: {
+  plan: Plan;
+  organizationSlug: string;
+  showActionText: boolean;
+  currentSubscription?: ActiveSubscription;
+  buttonPath?: string;
+}) {
+  const lastSubmission = useActionData();
+  const [form] = useForm({
+    id: "subscribe",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    onValidate({ formData }) {
+      return parse(formData, { schema: SetPlanBodySchema });
+    },
+  });
+
+  const navigation = useNavigation();
+  const isLoading =
+    (navigation.state === "submitting" || navigation.state === "loading") &&
+    navigation.formData?.get("type") === "free";
+
+  const isCurrentPlan =
+    currentSubscription?.isPaying === undefined || currentSubscription?.isPaying === false;
+
+  let actionText = "Select plan";
+
+  if (showActionText) {
+    if (isCurrentPlan) {
+      actionText = "Current Plan";
+    } else {
+      actionText = "Downgrade";
+    }
+  }
+
+  return (
+    <TierContainer>
+      <Form action={`/resources/${organizationSlug}/subscribe`} method="post" {...form.props}>
+        <Header title={plan.title} cost={0} />
+        <TierLimit>
+          Up to {plan.concurrentRuns?.freeAllowance}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.concurrentRuns.title}
+            content={pricingDefinitions.concurrentRuns.content}
+          >
+            {pricingDefinitions.concurrentRuns.title}
+          </DefinitionTip>
+        </TierLimit>
+        <input type="hidden" name="type" value="free" />
+        <div className="py-6">
+          {buttonPath ? (
+            <LinkButton
+              variant="secondary/large"
+              fullWidth
+              className="text-md font-medium"
+              to={buttonPath}
+            >
+              {actionText}
+            </LinkButton>
+          ) : (
+            <Button
+              variant="secondary/large"
+              fullWidth
+              className="text-md font-medium"
+              disabled={isLoading || isCurrentPlan}
+            >
+              {isLoading ? (
+                <div className="flex items-center gap-2">
+                  <Spinner color="white" />
+                  Updating plan
+                </div>
+              ) : (
+                actionText
+              )}
+            </Button>
+          )}
+        </div>
+        <ul className="flex flex-col gap-2.5">
+          <FeatureItem checked>
+            Up to {plan.runs?.freeAllowance ? formatNumberCompact(plan.runs.freeAllowance) : ""}{" "}
+            <DefinitionTip
+              title={pricingDefinitions.jobRuns.title}
+              content={pricingDefinitions.jobRuns.content}
+            >
+              {pricingDefinitions.jobRuns.title}
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>
+            Unlimited{" "}
+            <DefinitionTip
+              title={pricingDefinitions.jobs.title}
+              content={pricingDefinitions.jobs.content}
+            >
+              jobs
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>
+            Unlimited{" "}
+            <DefinitionTip
+              title={pricingDefinitions.tasks.title}
+              content={pricingDefinitions.tasks.content}
+            >
+              tasks
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>
+            Unlimited{" "}
+            <DefinitionTip
+              title={pricingDefinitions.events.title}
+              content={pricingDefinitions.events.content}
+            >
+              events
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>Unlimited team members</FeatureItem>
+          <FeatureItem checked>24 hour log retention</FeatureItem>
+          <FeatureItem checked>Community support</FeatureItem>
+          <FeatureItem>Custom integrations</FeatureItem>
+          <FeatureItem>Role-based access control</FeatureItem>
+          <FeatureItem>SSO</FeatureItem>
+          <FeatureItem>On-prem option</FeatureItem>
+        </ul>
+      </Form>
+    </TierContainer>
+  );
+}
+
+export function TierPro({
+  plan,
+  organizationSlug,
+  showActionText,
+  currentSubscription,
+}: {
+  plan: Plan;
+  organizationSlug: string;
+  showActionText: boolean;
+  currentSubscription?: ActiveSubscription;
+}) {
+  const lastSubmission = useActionData();
+  const [form] = useForm({
+    id: "subscribe",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    onValidate({ formData }) {
+      return parse(formData, { schema: SetPlanBodySchema });
+    },
+  });
+
+  const navigation = useNavigation();
+  const isLoading =
+    (navigation.state === "submitting" || navigation.state === "loading") &&
+    navigation.formData?.get("planCode") === plan.code;
+
+  const currentConcurrencyTier = currentSubscription?.plan.concurrentRuns.pricing?.code;
+  const [concurrentBracketCode, setConcurrentBracketCode] = useState(
+    currentConcurrencyTier ?? plan.concurrentRuns?.pricing?.tiers[0].code
+  );
+
+  const concurrencyTiers = plan.concurrentRuns?.pricing?.tiers ?? [];
+  const selectedTier = concurrencyTiers.find((c) => c.code === concurrentBracketCode);
+
+  const freeRunCount = plan.runs?.pricing?.brackets[0].upto ?? 0;
+  const mostExpensiveRunCost = plan.runs?.pricing?.brackets[1]?.unitCost ?? 0;
+
+  const isCurrentPlan = currentConcurrencyTier === concurrentBracketCode;
+
+  let actionText = "Select plan";
+
+  if (showActionText) {
+    if (isCurrentPlan) {
+      actionText = "Current Plan";
+    } else {
+      const currentTierIndex = concurrencyTiers.findIndex((c) => c.code === currentConcurrencyTier);
+      const selectedTierIndex = concurrencyTiers.findIndex((c) => c.code === concurrentBracketCode);
+      actionText = currentTierIndex < selectedTierIndex ? "Upgrade" : "Downgrade";
+    }
+  }
+
+  return (
+    <TierContainer isHighlighted>
+      <Form action={`/resources/${organizationSlug}/subscribe`} method="post" {...form.props}>
+        <Header title={plan.title} isHighlighted cost={selectedTier?.tierCost} />
+
+        <div className="mb-2 mt-6 font-sans text-sm font-normal text-bright">
+          <DefinitionTip
+            title={pricingDefinitions.concurrentRuns.title}
+            content={pricingDefinitions.concurrentRuns.content}
+          >
+            {pricingDefinitions.concurrentRuns.title}
+          </DefinitionTip>
+        </div>
+        <input type="hidden" name="type" value="paid" />
+        <input type="hidden" name="planCode" value={plan.code} />
+        <SegmentedControl
+          name="concurrentRunBracket"
+          options={concurrencyTiers.map((c) => ({ label: `Up to ${c.upto}`, value: c.code }))}
+          fullWidth
+          value={concurrentBracketCode}
+          onChange={(v) => setConcurrentBracketCode(v)}
+        />
+        <div className="py-6">
+          <Button
+            variant="primary/large"
+            fullWidth
+            className="text-md font-medium"
+            type="submit"
+            disabled={isLoading || isCurrentPlan}
+          >
+            {isLoading ? (
+              <div className="flex items-center gap-2">
+                <Spinner color="white" />
+                Updating plan
+              </div>
+            ) : (
+              actionText
+            )}
+          </Button>
+        </div>
+        <ul className="flex flex-col gap-2.5">
+          <FeatureItem checked>
+            Includes {freeRunCount ? formatNumberCompact(freeRunCount) : ""}{" "}
+            <DefinitionTip
+              title={pricingDefinitions.jobRuns.title}
+              content={pricingDefinitions.jobRuns.content}
+            >
+              {pricingDefinitions.jobRuns.title}
+            </DefinitionTip>
+            , then{" "}
+            <DefinitionTip
+              title="Runs volume discount"
+              content={
+                <RunsVolumeDiscountTable hideHeader brackets={plan.runs?.pricing?.brackets ?? []} />
+              }
+            >
+              {"<"} ${(mostExpensiveRunCost * 1000).toFixed(2)}/1K runs
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>
+            Unlimited{" "}
+            <DefinitionTip
+              title={pricingDefinitions.jobs.title}
+              content={pricingDefinitions.jobs.content}
+            >
+              jobs
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>
+            Unlimited{" "}
+            <DefinitionTip
+              title={pricingDefinitions.tasks.title}
+              content={pricingDefinitions.tasks.content}
+            >
+              tasks
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>
+            Unlimited{" "}
+            <DefinitionTip
+              title={pricingDefinitions.events.title}
+              content={pricingDefinitions.events.content}
+            >
+              events
+            </DefinitionTip>
+          </FeatureItem>
+          <FeatureItem checked>Unlimited team members</FeatureItem>
+          <FeatureItem checked>7 day log retention</FeatureItem>
+          <FeatureItem checked>Dedicated Slack support</FeatureItem>
+          <FeatureItem>Custom integrations</FeatureItem>
+          <FeatureItem>Role-based access control</FeatureItem>
+          <FeatureItem>SSO</FeatureItem>
+          <FeatureItem>On-prem option</FeatureItem>
+        </ul>
+      </Form>
+    </TierContainer>
+  );
+}
+
+export function TierEnterprise() {
+  return (
+    <TierContainer>
+      <Header title="Enterprise" />
+      <TierLimit>
+        Flexible{" "}
+        <DefinitionTip
+          title={pricingDefinitions.concurrentRuns.title}
+          content={pricingDefinitions.concurrentRuns.content}
+        >
+          {pricingDefinitions.concurrentRuns.title}
+        </DefinitionTip>
+      </TierLimit>
+      <div className="py-6">
+        <Feedback
+          button={
+            <Button variant="secondary/large" fullWidth className="text-md font-medium">
+              Contact us
+            </Button>
+          }
+          defaultValue="enterprise"
+        />
+      </div>
+      <ul className="flex flex-col gap-2.5">
+        <FeatureItem checked>
+          Flexible{" "}
+          <DefinitionTip
+            title={pricingDefinitions.jobRuns.title}
+            content={pricingDefinitions.jobRuns.content}
+          >
+            {pricingDefinitions.jobRuns.title}
+          </DefinitionTip>
+        </FeatureItem>
+        <FeatureItem checked>
+          Unlimited{" "}
+          <DefinitionTip
+            title={pricingDefinitions.jobs.title}
+            content={pricingDefinitions.jobs.content}
+          >
+            jobs
+          </DefinitionTip>
+        </FeatureItem>
+        <FeatureItem checked>
+          Unlimited{" "}
+          <DefinitionTip
+            title={pricingDefinitions.tasks.title}
+            content={pricingDefinitions.tasks.content}
+          >
+            tasks
+          </DefinitionTip>
+        </FeatureItem>
+        <FeatureItem checked>
+          Unlimited{" "}
+          <DefinitionTip
+            title={pricingDefinitions.events.title}
+            content={pricingDefinitions.events.content}
+          >
+            events
+          </DefinitionTip>
+        </FeatureItem>
+        <FeatureItem checked>Unlimited team members</FeatureItem>
+        <FeatureItem checked>30 day log retention</FeatureItem>
+        <FeatureItem checked>Priority support</FeatureItem>
+        <FeatureItem checked>
+          Custom{" "}
+          <DefinitionTip
+            title={pricingDefinitions.integrations.title}
+            content={pricingDefinitions.integrations.content}
+          >
+            {pricingDefinitions.integrations.title}
+          </DefinitionTip>
+        </FeatureItem>
+        <FeatureItem checked>Role-based access control</FeatureItem>
+        <FeatureItem checked>SSO</FeatureItem>
+        <FeatureItem checked>On-prem option</FeatureItem>
+      </ul>
+    </TierContainer>
+  );
+}
+
+function TierContainer({
+  children,
+  isHighlighted,
+}: {
+  children: React.ReactNode;
+  isHighlighted?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-[16rem] flex-col rounded-md border p-6",
+        isHighlighted ? "border-indigo-500" : "border-border"
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Header({
+  title,
+  cost: flatCost,
+  isHighlighted,
+}: {
+  title: string;
+  cost?: number;
+  isHighlighted?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <h2 className={cn("text-xl font-medium", isHighlighted ? "text-indigo-500" : "text-dimmed")}>
+        {title}
+      </h2>
+      {flatCost === 0 || flatCost ? (
+        <h3 className="text-4xl font-medium">
+          ${flatCost}
+          <span className="text-2sm font-normal tracking-wide text-dimmed">/month</span>
+        </h3>
+      ) : (
+        <h2 className="text-4xl font-medium">Custom</h2>
+      )}
+    </div>
+  );
+}
+
+function TierLimit({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <hr className="my-[1.9rem]" />
+      <div className="mb-[0.6rem] mt-6 font-sans text-sm font-normal text-bright">{children}</div>
+    </div>
+  );
+}
+
+function FeatureItem({ checked, children }: { checked?: boolean; children: React.ReactNode }) {
+  return (
+    <li className="flex items-center gap-2">
+      {checked ? (
+        <CheckIcon className="h-4 w-4 text-green-500" />
+      ) : (
+        <XMarkIcon className="h-4 w-4 text-slate-500" />
+      )}
+      <div className={cn("font-sans text-sm font-normal", checked ? "text-bright" : "text-dimmed")}>
+        {children}
+      </div>
+    </li>
+  );
+}

apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx

@@ -0,0 +1,64 @@
+import { RunPriceBracket } from "@trigger.dev/billing";
+import { Header2 } from "../primitives/Headers";
+import { Paragraph } from "../primitives/Paragraph";
+import { formatNumberCompact } from "~/utils/numberFormatter";
+
+export function RunsVolumeDiscountTable({
+  className,
+  hideHeader = false,
+  brackets,
+}: {
+  className?: string;
+  hideHeader?: boolean;
+  brackets: RunPriceBracket[];
+}) {
+  const runsVolumeDiscountRow =
+    "flex justify-between whitespace-nowrap border-b gap-16 border-border last:pb-0 last:border-none py-2";
+
+  const bracketData = bracketInfo(brackets);
+
+  return (
+    <div className={className}>
+      {hideHeader ? null : <Header2 className="mb-2">Runs volume discount</Header2>}
+      <ul>
+        {bracketData.map((bracket, index) => (
+          <li key={index} className={runsVolumeDiscountRow}>
+            <Paragraph variant="small">{bracket.range}</Paragraph>
+            <Paragraph variant="small">{bracket.costLabel}</Paragraph>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function bracketInfo(brackets: RunPriceBracket[]) {
+  return brackets.map((bracket, index) => {
+    const { upto, unitCost } = bracket;
+
+    if (index === 0) {
+      return {
+        range: `First ${formatNumberCompact(upto!)}/mo`,
+        costLabel: "Free",
+      };
+    }
+
+    const from = brackets[index - 1].upto;
+    const fromFormatted = formatNumberCompact(from!);
+    const toFormatted = upto ? formatNumberCompact(upto) : undefined;
+
+    const costLabel = `$${(unitCost * 1000).toFixed(2)}/1,000`;
+
+    if (!upto) {
+      return {
+        range: `${fromFormatted} +`,
+        costLabel,
+      };
+    }
+
+    return {
+      range: `${fromFormatted}–${toFormatted}`,
+      costLabel,
+    };
+  });
+}

apps/webapp/app/components/billing/UpgradePrompt.tsx

@@ -0,0 +1,36 @@
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { MatchedOrganization } from "~/hooks/useOrganizations";
+import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+import { formatNumberCompact } from "~/utils/numberFormatter";
+import { plansPath } from "~/utils/pathBuilder";
+import { LinkButton } from "../primitives/Buttons";
+import { Paragraph } from "../primitives/Paragraph";
+
+type UpgradePromptProps = {
+  organization: MatchedOrganization;
+};
+
+export function UpgradePrompt({ organization }: UpgradePromptProps) {
+  const currentPlan = useCurrentPlan();
+
+  if (!currentPlan || !currentPlan.usage.exceededRunCount || !currentPlan.usage.runCountCap) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full w-full items-center gap-4 bg-gradient-to-r from-transparent to-indigo-900/50 pr-1.5">
+      <Paragraph variant="extra-small" className="text-rose-500">
+        You have exceeded the monthly {formatNumberCompact(currentPlan.usage.runCountCap)} runs
+        limit
+      </Paragraph>
+      <LinkButton
+        variant={"primary/small"}
+        LeadingIcon={ArrowUpCircleIcon}
+        leadingIconClassName="px-0"
+        to={plansPath(organization)}
+      >
+        Upgrade
+      </LinkButton>
+    </div>
+  );
+}

apps/webapp/app/components/billing/UsageBar.tsx

@@ -0,0 +1,167 @@
+import { cn } from "~/utils/cn";
+import { formatNumberCompact } from "~/utils/numberFormatter";
+import { Paragraph } from "../primitives/Paragraph";
+import { SimpleTooltip } from "../primitives/Tooltip";
+import { motion } from "framer-motion";
+
+type UsageBarProps = {
+  numberOfCurrentRuns: number;
+  billingLimit?: number;
+  tierRunLimit?: number;
+  projectedRuns: number;
+  subscribedToPaidTier?: boolean;
+};
+
+export function UsageBar({
+  numberOfCurrentRuns,
+  billingLimit,
+  tierRunLimit,
+  projectedRuns,
+  subscribedToPaidTier = false,
+}: UsageBarProps) {
+  const getLargestNumber = Math.max(
+    numberOfCurrentRuns,
+    tierRunLimit ?? -Infinity,
+    projectedRuns,
+    billingLimit ?? -Infinity
+  );
+  //creates a maximum range for the progress bar, add 10% to the largest number so the bar doesn't reach the end
+  const maxRange = Math.round(getLargestNumber * 1.1);
+  const tierRunLimitPercentage = tierRunLimit ? Math.round((tierRunLimit / maxRange) * 100) : 0;
+  const projectedRunsPercentage = Math.round((projectedRuns / maxRange) * 100);
+  const billingLimitPercentage =
+    billingLimit !== undefined ? Math.round((billingLimit / maxRange) * 100) : 0;
+  const usagePercentage = Math.round((numberOfCurrentRuns / maxRange) * 100);
+
+  //cap the usagePercentage to the freeRunLimitPercentage
+  const usageCappedToLimitPercentage = Math.min(usagePercentage, tierRunLimitPercentage);
+
+  return (
+    <div className="h-fit w-full py-16">
+      <div className="relative h-3 w-full rounded-sm bg-slate-800">
+        {billingLimit && (
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: billingLimitPercentage + "%" }}
+            transition={{ duration: 1.5, type: "spring" }}
+            style={{ width: `${billingLimitPercentage}%` }}
+            className="absolute h-3 rounded-l-sm"
+          >
+            <Legend
+              text="Billing limit:"
+              value={formatNumberCompact(billingLimit)}
+              position="bottomRow2"
+              percentage={billingLimitPercentage}
+              tooltipContent={`Billing limit: ${formatNumberCompact(billingLimit)}`}
+            />
+          </motion.div>
+        )}
+        {tierRunLimit && (
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: tierRunLimitPercentage + "%" }}
+            transition={{ duration: 1.5, type: "spring" }}
+            style={{ width: `${tierRunLimitPercentage}%` }}
+            className="absolute h-3 rounded-l-sm bg-green-900/50"
+          >
+            <Legend
+              text={`${subscribedToPaidTier ? "Included free:" : "Free tier limit:"}`}
+              value={formatNumberCompact(tierRunLimit)}
+              position="bottomRow1"
+              percentage={tierRunLimitPercentage}
+              tooltipContent={`${
+                subscribedToPaidTier
+                  ? `Runs included free: ${formatNumberCompact(tierRunLimit)}`
+                  : `Free tier runs limit: ${formatNumberCompact(tierRunLimit)}`
+              }`}
+            />
+          </motion.div>
+        )}
+        {projectedRuns !== 0 && (
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: projectedRunsPercentage + "%" }}
+            transition={{ duration: 1.5, type: "spring" }}
+            style={{ width: `${projectedRunsPercentage}%` }}
+            className="absolute h-3 rounded-l-sm"
+          >
+            <Legend
+              text="Projected:"
+              value={formatNumberCompact(projectedRuns)}
+              position="topRow2"
+              percentage={projectedRunsPercentage}
+              tooltipContent={`Projected runs: ${formatNumberCompact(projectedRuns)}`}
+            />
+          </motion.div>
+        )}
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: usagePercentage + "%" }}
+          transition={{ duration: 1.5, type: "spring" }}
+          style={{ width: `${usagePercentage}%` }}
+          className={cn(
+            "absolute h-3 rounded-l-sm",
+            subscribedToPaidTier ? "bg-green-600" : "bg-rose-600"
+          )}
+        >
+          <Legend
+            text="Current:"
+            value={formatNumberCompact(numberOfCurrentRuns)}
+            position="topRow1"
+            percentage={usagePercentage}
+            tooltipContent={`Current run count: ${formatNumberCompact(numberOfCurrentRuns)}`}
+          />
+        </motion.div>
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: usageCappedToLimitPercentage + "%" }}
+          transition={{ duration: 1.5, type: "spring" }}
+          style={{ width: `${usageCappedToLimitPercentage}%` }}
+          className="absolute h-3 rounded-l-sm bg-green-600"
+        />
+      </div>
+    </div>
+  );
+}
+
+const positions = {
+  topRow1: "bottom-0 h-9",
+  topRow2: "bottom-0 h-14",
+  bottomRow1: "top-0 h-9 items-end",
+  bottomRow2: "top-0 h-14 items-end",
+};
+
+type LegendProps = {
+  text: string;
+  value: number | string;
+  percentage: number;
+  position: keyof typeof positions;
+  tooltipContent: string;
+};
+
+function Legend({ text, value, position, percentage, tooltipContent }: LegendProps) {
+  const flipLegendPositionValue = 80;
+  const flipLegendPosition = percentage > flipLegendPositionValue ? true : false;
+  return (
+    <div
+      className={cn(
+        "absolute left-full z-10 flex border-slate-400",
+        positions[position],
+        flipLegendPosition === true ? "-translate-x-full border-r" : "border-l"
+      )}
+    >
+      <SimpleTooltip
+        button={
+          <Paragraph className="mr-px h-fit whitespace-nowrap bg-background px-1.5 text-xs text-dimmed">
+            {text}
+            <span className="ml-1 text-bright">{value}</span>
+          </Paragraph>
+        }
+        variant="dark"
+        side="top"
+        content={tooltipContent}
+        className="z-50 h-fit"
+      />
+    </div>
+  );
+}

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

@@ -5,9 +5,11 @@ type Environment = Pick<RuntimeEnvironment, "type">;
 
 export function EnvironmentLabel({
   environment,
+  userName,
   className,
 }: {
   environment: Environment;
+  userName?: string;
   className?: string;
 }) {
   return (
@@ -18,19 +20,19 @@ export function EnvironmentLabel({
         className
       )}
     >
-      {environmentTitle(environment)}
+      {environmentTitle(environment, userName)}
     </span>
   );
 }
 
-export function environmentTitle(environment: Environment) {
+export function environmentTitle(environment: Environment, username?: string) {
   switch (environment.type) {
     case "PRODUCTION":
       return "Prod";
     case "STAGING":
       return "Staging";
     case "DEVELOPMENT":
-      return "Dev";
+      return username ? `Dev: ${username}` : "Dev";
     case "PREVIEW":
       return "Preview";
   }

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

@@ -3,37 +3,10 @@ import { CodeExample } from "~/routes/resources.codeexample";
 import { Api } from "~/services/externalApis/apis.server";
 import { cn } from "~/utils/cn";
 import { Feedback } from "../Feedback";
-import { Header1, Header2 } from "../primitives/Headers";
+import { Header1, Header2, Header3 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
 
-const fallbackExamples = [
-  {
-    title: "Post to Slack when meetings are booked or cancelled.",
-    slug: "cal-slack-meeting-alert",
-    version: "1.0.0",
-    codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/cal-http-endpoint.ts",
-  },
-  {
-    title: "Translate some text with DeepL.",
-    slug: "translate-text-with-deepl",
-    version: "1.0.0",
-    codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/deepl.ts",
-  },
-  {
-    title: "Create a Discord bot and send a message to a channel.",
-    slug: "discord-bot-send-message",
-    version: "1.0.0",
-    codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/discord.ts",
-  },
-  {
-    title: "Retrieve a Notion page by ID.",
-    slug: "retrieve-notion-page",
-    version: "1.0.0",
-    codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/notion.ts",
-  },
-];
-
 export function CustomHelp({ api }: { api: Api }) {
   const [selectedExample, setSelectedExample] = useState(0);
 
@@ -43,7 +16,7 @@ export function CustomHelp({ api }: { api: Api }) {
 
   return (
     <div className="mt-4">
-      <Header1 className="mb-2">Using an API with an SDK or requests</Header1>
+      <Header1 className="mb-2">Using {api.name} with an SDK or requests</Header1>
       <Paragraph spacing>
         You can use Trigger.dev with any existing Node SDK or even just using fetch. You can
         subscribe to any API with{" "}
@@ -87,9 +60,13 @@ export function CustomHelp({ api }: { api: Api }) {
         </>
       ) : (
         <>
-          <Header2 className="mb-2">Example code using fetch / an existing SDK</Header2>
+          <Header2 className="mb-2">Getting started with {api.name}</Header2>
+          <Paragraph spacing className="mb-4">
+            We recommend searching for the official {api.name} Node SDK. If they have one, you can
+            install it and then use their API documentation to get started and create tasks. If they
+            don't, there are often third party SDKs you can use instead.
+          </Paragraph>
           <Paragraph spacing className="mb-4">
-            You can use one of our examples below as a starting point / reference for your projects.
             Please{" "}
             <Feedback
               button={
@@ -99,24 +76,9 @@ export function CustomHelp({ api }: { api: Api }) {
               }
               defaultValue="help"
             />{" "}
-            if you're having any issues.
+            if you're having any issues connecting to {api.name}, we'll help you get set up as
+            quickly as possible.
           </Paragraph>
-
-          <div className=" flex w-full flex-row gap-4 overflow-x-scroll	scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700 sm:h-full">
-            {fallbackExamples.map((example, index) => (
-              <button
-                onClick={() => changeCodeExample(index)}
-                key={example.codeUrl}
-                className={cn(
-                  "w-64 min-w-[16rem] p-2 transition-colors duration-300 sm:w-full sm:rounded",
-                  "border-px focus:border-px cursor-pointer border border-slate-900 bg-slate-900 text-slate-300 transition duration-300 hover:bg-slate-800 focus:border focus:border-indigo-600"
-                )}
-              >
-                {example.title}
-              </button>
-            ))}
-          </div>
-          <CodeExample example={fallbackExamples[selectedExample]} />
         </>
       )}
     </div>

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

@@ -1,42 +1,8 @@
 import { cn } from "~/utils/cn";
-import gradientPath from "./app-container-gradient.svg";
 
 /** This container is used to surround the entire app, it correctly places the nav bar */
-export function AppContainer({
-  children,
-  showBackgroundGradient,
-}: {
-  children: React.ReactNode;
-  showBackgroundGradient?: boolean;
-}) {
-  return (
-    <BackgroundGradient showBackgroundGradient={showBackgroundGradient}>
-      <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{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>
-  );
+export function AppContainer({ children }: { children: React.ReactNode }) {
+  return <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{children}</div>;
 }
 
 /** This container should be placed around the content on a page */

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

@@ -1,9 +1,10 @@
 import { useNavigation } from "@remix-run/react";
 import { Spinner } from "../primitives/Spinner";
+import { cn } from "~/utils/cn";
 
-export function PageNavigationIndicator() {
+export function PageNavigationIndicator({ className }: { className?: string }) {
   const navigation = useNavigation();
   if (navigation.state === "loading") {
-    return <Spinner color="muted" className="h-4 w-4" />;
+    return <Spinner color="muted" className={cn("h-4 w-4", className)} />;
   }
 }

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

@@ -1,5 +1,6 @@
 import {
   AcademicCapIcon,
+  ArrowRightIcon,
   ArrowRightOnRectangleIcon,
   ChartBarIcon,
   EllipsisHorizontalIcon,
@@ -7,11 +8,14 @@ import {
 import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
 import { useNavigation } from "@remix-run/react";
 import { IconExclamationCircle } from "@tabler/icons-react";
+import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { AnchorHTMLAttributes, Fragment, useEffect, useRef, useState } from "react";
+import { useFeatures } from "~/hooks/useFeatures";
 import { MatchedOrganization } from "~/hooks/useOrganizations";
 import { usePathName } from "~/hooks/usePathName";
 import { MatchedProject } from "~/hooks/useProject";
 import { User } from "~/models/user.server";
+import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { cn } from "~/utils/cn";
 import {
   accountPath,
@@ -33,8 +37,12 @@ import {
 import { Feedback } from "../Feedback";
 import { ImpersonationBanner } from "../ImpersonationBanner";
 import { LogoIcon } from "../LogoIcon";
-import { UserAvatar, UserProfilePhoto } from "../UserProfilePhoto";
+import { StepContentContainer } from "../StepContentContainer";
+import { UserProfilePhoto } from "../UserProfilePhoto";
+import { FreePlanUsage } from "../billing/FreePlanUsage";
 import { Button, LinkButton } from "../primitives/Buttons";
+import { ClipboardField } from "../primitives/ClipboardField";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
 import { Icon } from "../primitives/Icon";
 import { type IconNames } from "../primitives/NamedIcon";
 import { Paragraph } from "../primitives/Paragraph";
@@ -46,8 +54,8 @@ import {
   PopoverMenuItem,
   PopoverSectionHeader,
 } from "../primitives/Popover";
+import { StepNumber } from "../primitives/StepNumber";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
-import { useFeatures } from "~/hooks/useFeatures";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 type SideMenuProject = Pick<
@@ -66,6 +74,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
   const borderRef = useRef<HTMLDivElement>(null);
   const [showHeaderDivider, setShowHeaderDivider] = useState(false);
   const { isManagedCloud } = useFeatures();
+  const currentPlan = useCurrentPlan();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -138,7 +147,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
             <SideMenuItem
               name="HTTP endpoints"
               icon="http-endpoint"
-              iconColor="text-green-500"
+              iconColor="text-pink-500"
               count={project.httpEndpointCount}
               to={projectHttpEndpointsPath(organization, project)}
               data-action="httpendpoints"
@@ -185,12 +194,78 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               name={isManagedCloud ? "Usage & Billing" : "Usage"}
               icon={ChartBarIcon}
               to={organizationBillingPath(organization)}
-              iconColor="text-pink-500"
+              iconColor="text-green-600"
               data-action="usage & billing"
             />
           </div>
         </div>
         <div className="flex flex-col gap-1 border-t border-border p-1">
+          {currentPlan?.subscription?.isPaying === true ? (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={SlackIcon}
+                  data-action="join our slack"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Join our Slack
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>Join our Slack</DialogHeader>
+                <div className="mt-2 flex flex-col gap-4">
+                  <div className="flex items-center gap-4">
+                    <Icon icon={SlackIcon} className="h-10 w-10 min-w-[2.5rem]" />
+                    <Paragraph variant="base/bright">
+                      As a subscriber, you have access to a dedicated Slack channel for 1-to-1
+                      support with the Trigger.dev team.
+                    </Paragraph>
+                  </div>
+                  <hr className="border-slate-800" />
+                  <div>
+                    <StepNumber stepNumber="1" title="Create a new Slack channel" />
+                    <StepContentContainer>
+                      <Paragraph>
+                        In your Slack app, create a new channel from the main menu by going to File{" "}
+                        <ArrowRightIcon className="inline h-4 w-4 text-dimmed" /> New Channel
+                      </Paragraph>
+                    </StepContentContainer>
+                    <StepNumber stepNumber="2" title="Setup your channel" />
+                    <StepContentContainer>
+                      <Paragraph>
+                        Name your channel, set its visibility and click 'Create'.
+                      </Paragraph>
+                    </StepContentContainer>
+                    <StepNumber stepNumber="3" title="Invite Trigger.dev" />
+                    <StepContentContainer>
+                      <Paragraph>
+                        Invite this email address to your channel:{" "}
+                        <ClipboardField
+                          variant="primary/medium"
+                          value="james@trigger.dev"
+                          className="my-2"
+                        />
+                      </Paragraph>
+                      <Paragraph>
+                        As soon as we can, we'll accept your invitation and say hello!
+                      </Paragraph>
+                    </StepContentContainer>
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+          ) : (
+            <SideMenuItem
+              name="Join our Discord"
+              icon={DiscordIcon}
+              to="https://trigger.dev/discord"
+              data-action="join our discord"
+              target="_blank"
+            />
+          )}
+
           <SideMenuItem
             name="Documentation"
             icon="docs"
@@ -219,6 +294,12 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               </Button>
             }
           />
+          {currentPlan && !currentPlan.subscription?.isPaying && currentPlan.usage.runCountCap && (
+            <FreePlanUsage
+              to={organizationBillingPath(organization)}
+              percentage={currentPlan.usage.currentRunCount / currentPlan.usage.runCountCap}
+            />
+          )}
         </div>
       </div>
     </div>
@@ -409,8 +490,8 @@ function SideMenuItem({
         isActive ? "bg-slate-850 text-bright" : "group-hover:text-bright"
       )}
     >
-      <div className="flex w-full items-center justify-between overflow-hidden">
-        <span className="truncate">{name}</span>
+      <div className="flex w-full items-center justify-between">
+        {name}
         <div className="flex items-center gap-1">
           {count !== undefined && count > 0 && <MenuCount count={count} />}
           {typeof hasWarning === "string" ? (

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

@@ -82,16 +82,16 @@ const variant = {
   "primary/large": {
     textColor: "text-bright group-hover:text-white transition group-disabled:text-dimmed/80 px-1",
     button:
-      "h-10 px-2 text-sm font-medium bg-indigo-600 group-hover:bg-indigo-500/90 group-disabled:opacity-50",
+      "h-10 px-2 text-sm font-medium bg-indigo-600 group-hover:bg-indigo-500/90 group-disabled:opacity-50 group-disabled:group-hover:bg-indigo-600",
     icon: "h-5",
     iconSpacing: "gap-x-0.5",
     shortcutVariant: undefined,
     shortcut: undefined,
   },
   "secondary/large": {
-    textColor: "text-dimmed px-1",
+    textColor: "text-bright group-disabled:text-dimmed px-1",
     button:
-      "h-10 px-2 text-sm text-dimmed group-hover:text-bright transition font-medium bg-slate-800 group-hover:bg-slate-700/70 disabled:opacity-50",
+      "h-10 px-2 text-sm transition font-medium bg-slate-800 group-hover:bg-slate-700/70 group-disabled:opacity-40 group-disabled:group-hover:bg-slate-800",
     icon: "h-5",
     iconSpacing: "gap-x-0.5",
     shortcutVariant: undefined,

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

@@ -7,6 +7,7 @@ import {
 import {
   ArrowTopRightOnSquareIcon,
   BookOpenIcon,
+  ChartBarIcon,
   CheckCircleIcon,
   ChevronRightIcon,
 } from "@heroicons/react/24/solid";
@@ -58,6 +59,12 @@ export const variantClasses = {
     textColor: "text-blue-300",
     linkClassName: "transition hover:bg-blue-400/40",
   },
+  pricing: {
+    className: "border-indigo-400/20 bg-indigo-800/30",
+    icon: <ChartBarIcon className="h-5 w-5 shrink-0 text-indigo-500" />,
+    textColor: "text-indigo-200",
+    linkClassName: "transition hover:bg-indigo-400/40",
+  },
 } as const;
 
 export type CalloutVariant = keyof typeof variantClasses;
@@ -66,12 +73,14 @@ export function Callout({
   children,
   className,
   icon,
+  cta,
   variant,
   to,
 }: {
   children?: React.ReactNode;
   className?: string;
   icon?: React.ReactNode;
+  cta?: React.ReactNode;
   variant: CalloutVariant;
   to?: string;
 }) {
@@ -84,13 +93,13 @@ export function Callout({
           href={to}
           target="_blank"
           className={cn(
-            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+            `flex w-full items-center justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
             variantDefinition.className,
             variantDefinition.linkClassName,
             className
           )}
         >
-          <div className={"flex w-full items-start gap-x-2"}>
+          <div className={"flex w-full items-center gap-x-2"}>
             {icon ? icon : variantDefinition.icon}
 
             {typeof children === "string" ? (
@@ -135,20 +144,24 @@ export function Callout({
   return (
     <div
       className={cn(
-        `flex w-full items-start gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+        "flex w-full items-center gap-2 rounded-md border pl-2 pr-2 shadow-md backdrop-blur-sm",
+        cta ? "py-2" : "py-2.5",
         variantDefinition.className,
         className
       )}
     >
-      {icon ? icon : variantDefinition.icon}
+      <div className={cn(`flex w-full items-center gap-2.5`)}>
+        {icon ? icon : variantDefinition.icon}
 
-      {typeof children === "string" ? (
-        <Paragraph variant={"small"} className={variantDefinition.textColor}>
-          {children}
-        </Paragraph>
-      ) : (
-        children
-      )}
+        {typeof children === "string" ? (
+          <Paragraph variant={"small"} className={variantDefinition.textColor}>
+            {children}
+          </Paragraph>
+        ) : (
+          children
+        )}
+      </div>
+      {cta && cta}
     </div>
   );
 }

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

@@ -5,14 +5,26 @@ type DateTimeProps = {
   date: Date | string;
   timeZone?: string;
   includeSeconds?: boolean;
+  includeTime?: boolean;
 };
 
-export const DateTime = ({ date, timeZone = "UTC", includeSeconds = true }: DateTimeProps) => {
+export const DateTime = ({
+  date,
+  timeZone = "UTC",
+  includeSeconds = true,
+  includeTime = true,
+}: DateTimeProps) => {
   const locales = useLocales();
 
   const realDate = typeof date === "string" ? new Date(date) : date;
 
-  const initialFormattedDateTime = formatDateTime(realDate, timeZone, locales, includeSeconds);
+  const initialFormattedDateTime = formatDateTime(
+    realDate,
+    timeZone,
+    locales,
+    includeSeconds,
+    includeTime
+  );
 
   const [formattedDateTime, setFormattedDateTime] = useState<string>(initialFormattedDateTime);
 
@@ -20,26 +32,27 @@ export const DateTime = ({ date, timeZone = "UTC", includeSeconds = true }: Date
     const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
 
     setFormattedDateTime(
-      formatDateTime(realDate, resolvedOptions.timeZone, locales, includeSeconds)
+      formatDateTime(realDate, resolvedOptions.timeZone, locales, includeSeconds, includeTime)
     );
   }, [locales, includeSeconds, realDate]);
 
   return <Fragment>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</Fragment>;
 };
 
-function formatDateTime(
+export function formatDateTime(
   date: Date,
   timeZone: string,
   locales: string[],
-  includeSeconds: boolean
+  includeSeconds: boolean,
+  includeTime: boolean
 ): string {
   return new Intl.DateTimeFormat(locales, {
     year: "numeric",
     month: "short",
     day: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: includeSeconds ? "numeric" : undefined,
+    hour: includeTime ? "numeric" : undefined,
+    minute: includeTime ? "numeric" : undefined,
+    second: includeTime && includeSeconds ? "numeric" : undefined,
     timeZone,
   }).format(date);
 }

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

@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-background/90 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-midnight-800 px-4 pb-6 pt-3 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background px-4 pb-6 pt-3 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}

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

@@ -1,72 +0,0 @@
-import { RadioGroup } from "@headlessui/react";
-import { cn } from "~/utils/cn";
-
-type Options = {
-  label: string;
-  value: string;
-};
-
-type FormSegmentedControlProps = {
-  name: string;
-  defaultValue?: string;
-  options: Options[];
-  onChange?: (value: string) => void;
-};
-
-export default function FormSegmentedControl({
-  name,
-  defaultValue,
-  options,
-  onChange,
-}: FormSegmentedControlProps) {
-  return (
-    <div className="flex h-8 w-fit rounded bg-slate-800 p-1">
-      <RadioGroup
-        defaultValue={defaultValue ?? options[0].value}
-        name={name}
-        onChange={(c: string) => {
-          if (onChange) {
-            onChange(c);
-          }
-        }}
-      >
-        <div className="flex gap-x-1.5">
-          {options.map((option) => (
-            <RadioGroup.Option
-              key={option.value}
-              value={option.value}
-              className={({ active, checked }) =>
-                cn(
-                  "relative flex cursor-pointer rounded-[2px] px-3 py-[0.13rem] shadow-md focus:outline-none",
-                  active
-                    ? "focus-visible:ring focus-visible:ring-indigo-500 focus-visible:ring-opacity-60"
-                    : "",
-                  checked
-                    ? "bg-slate-700 text-bright"
-                    : "bg-transparent transition hover:bg-slate-750"
-                )
-              }
-            >
-              {({ checked }) => (
-                <>
-                  <div className="flex w-full items-center justify-between">
-                    <div className="flex items-center">
-                      <div className="text-sm">
-                        <RadioGroup.Label
-                          as="p"
-                          className={cn("font-normal", checked ? "text-bright" : "text-dimmed")}
-                        >
-                          {option.label}
-                        </RadioGroup.Label>
-                      </div>
-                    </div>
-                  </div>
-                </>
-              )}
-            </RadioGroup.Option>
-          ))}
-        </div>
-      </RadioGroup>
-    </div>
-  );
-}

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

@@ -0,0 +1,79 @@
+import { RadioGroup } from "@headlessui/react";
+import { motion } from "framer-motion";
+import { cn } from "~/utils/cn";
+
+type Options = {
+  label: string;
+  value: string;
+};
+
+type SegmentedControlProps = {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  options: Options[];
+  fullWidth?: boolean;
+  onChange?: (value: string) => void;
+};
+
+export default function SegmentedControl({
+  name,
+  value,
+  defaultValue,
+  options,
+  fullWidth,
+  onChange,
+}: SegmentedControlProps) {
+  return (
+    <div className={cn("flex h-10 rounded bg-slate-850", fullWidth ? "w-full" : "w-fit")}>
+      <RadioGroup
+        value={value}
+        defaultValue={defaultValue ?? options[0].value}
+        name={name}
+        onChange={(c: string) => {
+          if (onChange) {
+            onChange(c);
+          }
+        }}
+        className="w-full"
+      >
+        <div className="flex h-full w-full items-center justify-between gap-x-1 p-1">
+          {options.map((option) => (
+            <RadioGroup.Option
+              key={option.value}
+              value={option.value}
+              className={({ active, checked }) =>
+                cn(
+                  "relative flex h-full grow cursor-pointer text-center font-normal focus:outline-none",
+                  active
+                    ? "ring-offset-2 focus-visible:ring focus-visible:ring-indigo-500 focus-visible:ring-opacity-60"
+                    : "",
+                  checked
+                    ? "text-bright"
+                    : "rounded-[2px] text-dimmed transition hover:bg-slate-750/50 hover:text-bright"
+                )
+              }
+            >
+              {({ checked }) => (
+                <>
+                  <div className="relative flex h-full w-full items-center justify-between px-3 py-[0.13rem]">
+                    <div className="z-10 flex h-full w-full items-center justify-center text-sm">
+                      <RadioGroup.Label as="p">{option.label}</RadioGroup.Label>
+                    </div>
+                    {checked && (
+                      <motion.div
+                        layoutId={`segmented-control-${name}`}
+                        transition={{ duration: 0.4, type: "spring" }}
+                        className="absolute inset-0 rounded-[2px] bg-indigo-600 shadow-md"
+                      ></motion.div>
+                    )}
+                  </div>
+                </>
+              )}
+            </RadioGroup.Option>
+          ))}
+        </div>
+      </RadioGroup>
+    </div>
+  );
+}

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

@@ -5,6 +5,7 @@ import { Toaster, toast } from "sonner";
 import { useTypedLoaderData } from "remix-typedjson";
 import { loader } from "~/root";
 import { useEffect } from "react";
+import { Paragraph } from "./Paragraph";
 
 const defaultToastDuration = 5000;
 const permanentToastDuration = 60 * 60 * 24 * 1000;
@@ -38,26 +39,23 @@ export function ToastUI({
 }) {
   return (
     <div
-      className={`self-end rounded-lg border border-slate-750 bg-midnight-900 shadow-md`}
+      className={`self-end rounded-md border border-border bg-background`}
       style={{
         width: toastWidth,
       }}
     >
-      <div
-        className="flex w-full gap-2 rounded-lg bg-no-repeat p-4 text-bright"
-        style={{
-          background:
-            "radial-gradient(at top, hsla(271, 91%, 65%, 0.18), hsla(221, 83%, 53%, 0.18)) hsla(221, 83%, 53%, 0.18)",
-        }}
-      >
+      <div className="flex w-full items-start gap-2 rounded-lg p-3">
         {variant === "success" ? (
-          <CheckCircleIcon className="h-6 w-6 text-green-600" />
+          <CheckCircleIcon className="mt-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] text-green-600" />
         ) : (
-          <ExclamationCircleIcon className="h-6 w-6 text-rose-600" />
+          <ExclamationCircleIcon className="mt-1 h-6 w-6 min-w-[1.5rem] text-rose-600" />
         )}
-        {message}
-        <button className="ms-auto p-1" onClick={() => toast.dismiss(t)}>
-          <XMarkIcon className="h-4 w-4 text-bright" />
+        <Paragraph className="py-1 text-dimmed">{message}</Paragraph>
+        <button
+          className="ms-auto rounded p-2 text-dimmed transition hover:bg-midnight-800 hover:text-bright"
+          onClick={() => toast.dismiss(t)}
+        >
+          <XMarkIcon className="h-4 w-4" />
         </button>
       </div>
     </div>

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

@@ -1,9 +1,15 @@
-"use client";
-
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "~/utils/cn";
 
+const variantClasses = {
+  basic:
+    "bg-popover border border-slate-800 rounded-md px-3 py-1.5 text-sm text-bright shadow-md fade-in-50",
+  dark: "bg-background border border-border rounded px-3 py-2 text-sm text-bright shadow-md fade-in-50",
+};
+
+type Variant = keyof typeof variantClasses;
+
 const TooltipProvider = TooltipPrimitive.Provider;
 
 const TooltipArrow = React.forwardRef<
@@ -22,15 +28,20 @@ Tooltip.displayName = TooltipPrimitive.Root.displayName;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+type TooltipContentProps = {
+  variant?: Variant;
+} & React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  TooltipContentProps
+>(({ className, sideOffset = 4, variant = "basic", ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-slate-800 bg-popover px-3 py-1.5 text-sm text-bright shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      variantClasses[variant],
       className
     )}
     {...props}
@@ -43,17 +54,26 @@ function SimpleTooltip({
   content,
   side,
   hidden,
+  variant,
+  className,
 }: {
   button: React.ReactNode;
   content: React.ReactNode;
   side?: React.ComponentProps<typeof TooltipContent>["side"];
   hidden?: boolean;
+  variant?: Variant;
+  className?: string;
 }) {
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger>{button}</TooltipTrigger>
-        <TooltipContent side={side} hidden={hidden} className="text-xs">
+        <TooltipTrigger className="h-fit">{button}</TooltipTrigger>
+        <TooltipContent
+          side={side}
+          hidden={hidden}
+          className={cn("text-xs", className)}
+          variant={variant}
+        >
           {content}
         </TooltipContent>
       </Tooltip>

apps/webapp/app/components/run/RunOverview.tsx

@@ -10,7 +10,7 @@ import {
   useNavigate,
   useNavigation,
 } from "@remix-run/react";
-import { RuntimeEnvironmentType } from "@trigger.dev/database";
+import { RuntimeEnvironmentType, User } from "@trigger.dev/database";
 import { useMemo } from "react";
 import { usePathName } from "~/hooks/usePathName";
 import type { RunBasicStatus } from "~/models/jobRun.server";
@@ -27,6 +27,7 @@ import { Button } from "../primitives/Buttons";
 import { Callout } from "../primitives/Callout";
 import { DateTime } from "../primitives/DateTime";
 import { Header2 } from "../primitives/Headers";
+import { Icon } from "../primitives/Icon";
 import { NamedIcon } from "../primitives/NamedIcon";
 import {
   PageButtons,
@@ -65,11 +66,12 @@ type RunOverviewProps = {
     run: string;
     runsPath: string;
   };
+  currentUser: User;
 };
 
 const taskPattern = /\/tasks\/(.*)/;
 
-export function RunOverview({ run, trigger, showRerun, paths }: RunOverviewProps) {
+export function RunOverview({ run, trigger, showRerun, paths, currentUser }: RunOverviewProps) {
   const navigate = useNavigate();
   const pathName = usePathName();
 
@@ -89,6 +91,9 @@ export function RunOverview({ run, trigger, showRerun, paths }: RunOverviewProps
     }
   }, [pathName]);
 
+  const usernameForEnv =
+    currentUser.id !== run.environment.userId ? run.environment.userName : undefined;
+
   return (
     <PageContainer>
       <PageHeader>
@@ -135,7 +140,7 @@ export function RunOverview({ run, trigger, showRerun, paths }: RunOverviewProps
             <PageInfoProperty icon={"property"} label={"Version"} value={`v${run.version}`} />
             <PageInfoProperty
               label={"Env"}
-              value={<EnvironmentLabel environment={run.environment} />}
+              value={<EnvironmentLabel environment={run.environment} userName={usernameForEnv} />}
             />
             <PageInfoProperty
               icon={"clock"}
@@ -143,18 +148,18 @@ export function RunOverview({ run, trigger, showRerun, paths }: RunOverviewProps
               value={formatDuration(run.startedAt, run.completedAt, { style: "short" })}
             />
             <PageInfoProperty
-              icon={"hourglass"}
+              icon={<Icon icon="alarm-filled" className="h-4 w-4 text-blue-500" />}
               label={"Execution Time"}
               value={formatDurationMilliseconds(run.executionDuration, { style: "short" })}
             />
             <PageInfoProperty
-              icon={"list-numbers"}
+              icon={<Icon icon="list-numbers" className="h-4 w-4 text-yellow-500" />}
               label={"Execution Count"}
-              value={run.executionCount}
+              value={<>{run.executionCount}</>}
             />
           </PageInfoGroup>
           <PageInfoGroup alignment="right">
-            <Paragraph variant="extra-small" className="text-slate-600">
+            <Paragraph variant="extra-small" className="whitespace-nowrap text-slate-600">
               RUN ID: {run.id}
             </Paragraph>
           </PageInfoGroup>

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

@@ -1,6 +1,6 @@
 import { StopIcon } from "@heroicons/react/24/outline";
 import { CheckIcon } from "@heroicons/react/24/solid";
-import { JobRunStatus, RuntimeEnvironmentType } from "@trigger.dev/database";
+import { JobRunStatus, RuntimeEnvironmentType, User } from "@trigger.dev/database";
 import { formatDuration, formatDurationMilliseconds } from "~/utils";
 import { EnvironmentLabel } from "../environments/EnvironmentLabel";
 import { DateTime } from "../primitives/DateTime";
@@ -23,6 +23,8 @@ type RunTableItem = {
   number: number | null;
   environment: {
     type: RuntimeEnvironmentType;
+    userId?: string;
+    userName?: string;
   };
   job: { title: string; slug: string };
   status: JobRunStatus;
@@ -41,6 +43,7 @@ type RunsTableProps = {
   runs: RunTableItem[];
   isLoading?: boolean;
   runsParentPath: string;
+  currentUser: User;
 };
 
 export function RunsTable({
@@ -50,6 +53,7 @@ export function RunsTable({
   isLoading = false,
   showJob = false,
   runsParentPath,
+  currentUser,
 }: RunsTableProps) {
   return (
     <Table>
@@ -73,17 +77,19 @@ export function RunsTable({
       <TableBody>
         {total === 0 && !hasFilters ? (
           <TableBlankRow colSpan={showJob ? 10 : 9}>
-            <NoRuns title="No Runs found" />
+            <NoRuns title="No runs found" />
           </TableBlankRow>
         ) : runs.length === 0 ? (
           <TableBlankRow colSpan={showJob ? 10 : 9}>
-            <NoRuns title="No Runs match your filters" />
+            <NoRuns title="No runs match your filters" />
           </TableBlankRow>
         ) : (
           runs.map((run) => {
             const path = showJob
               ? `${runsParentPath}/jobs/${run.job.slug}/runs/${run.id}/trigger`
               : `${runsParentPath}/${run.id}/trigger`;
+            const usernameForEnv =
+              currentUser.id !== run.environment.userId ? run.environment.userName : undefined;
             return (
               <TableRow key={run.id}>
                 <TableCell to={path}>
@@ -91,7 +97,7 @@ export function RunsTable({
                 </TableCell>
                 {showJob && <TableCell to={path}>{run.job.slug}</TableCell>}
                 <TableCell to={path}>
-                  <EnvironmentLabel environment={run.environment} />
+                  <EnvironmentLabel environment={run.environment} userName={usernameForEnv} />
                 </TableCell>
                 <TableCell to={path}>
                   <RunStatus status={run.status} />

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

@@ -61,11 +61,11 @@ export function WebhookDeliveryRunsTable({
       <TableBody>
         {total === 0 && !hasFilters ? (
           <TableBlankRow colSpan={8}>
-            <NoRuns title="No Runs found for this Job" />
+            <NoRuns title="No runs found for this job" />
           </TableBlankRow>
         ) : runs.length === 0 ? (
           <TableBlankRow colSpan={8}>
-            <NoRuns title="No Runs match your filters" />
+            <NoRuns title="No runs match your filters" />
           </TableBlankRow>
         ) : (
           runs.map((run) => {

apps/webapp/app/components/stories/FreePlanUsage.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FreePlanUsage } from "../billing/FreePlanUsage";
+import { organizationBillingPath } from "~/utils/pathBuilder";
+import { MatchedOrganization } from "~/hooks/useOrganizations";
+
+const meta: Meta<typeof FreePlanUsageBar> = {
+  title: "Billing/FreePlanUsage",
+  component: FreePlanUsageBar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FreePlanUsageBar>;
+
+const mockOrganization: MatchedOrganization = {
+  id: "mockID",
+  title: "mockTitle",
+  slug: "mockSlug",
+  projects: [
+    { id: "mockId1", slug: "mockSlug1", name: "mockName1", jobCount: 1 },
+    { id: "mockId2", slug: "mockSlug2", name: "mockName2", jobCount: 2 },
+  ],
+  hasUnconfiguredIntegrations: false,
+  memberCount: 1,
+};
+
+export const ProgressBar: Story = {
+  args: {
+    organization: mockOrganization,
+  },
+  render: (args) => <FreePlanUsageBar {...args} />,
+};
+
+type FreePlanUsageBarProps = {
+  organization: MatchedOrganization;
+};
+
+function FreePlanUsageBar({ organization }: FreePlanUsageBarProps) {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center p-12">
+      <div className="w-fit">
+        <FreePlanUsage to={organizationBillingPath(organization)} percentage={0.75} />
+      </div>
+    </div>
+  );
+}

apps/webapp/app/components/stories/PricingCallout.stories.tsx

@@ -0,0 +1,39 @@
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import type { Meta, StoryObj } from "@storybook/react";
+import { LinkButton } from "../primitives/Buttons";
+import { Callout } from "../primitives/Callout";
+
+const meta: Meta<typeof PricingCallouts> = {
+  title: "Billing/PricingCallouts",
+  component: PricingCallouts,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PricingCallouts>;
+
+export const Callouts: Story = {
+  render: (args) => <PricingCallouts />,
+};
+
+function PricingCallouts() {
+  return (
+    <div className="mx-4 flex h-screen flex-col items-center justify-center gap-4">
+      <Callout
+        variant={"pricing"}
+        cta={
+          <LinkButton
+            variant={"primary/small"}
+            LeadingIcon={ArrowUpCircleIcon}
+            leadingIconClassName="pr-0 pl-0.5"
+            to="#"
+          >
+            Upgrade
+          </LinkButton>
+        }
+      >
+        Some of your runs are being queued because your run concurrency is limited to 50.
+      </Callout>
+    </div>
+  );
+}

apps/webapp/app/components/stories/SegmentedControl.stories.tsx

@@ -1,19 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-import FormSegmentedControl from "../primitives/FormSegmentedControl";
 import { MainCenteredContainer } from "../layout/AppLayout";
+import SegmentedControl from "../primitives/SegmentedControl";
 
-const meta: Meta = {
-  title: "Primitives/FormSegmentedControl",
+const meta: Meta<typeof StyledSegmentedControl> = {
+  title: "Primitives/SegmentedControl",
   decorators: [withDesign],
+  component: StyledSegmentedControl,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof FormSegmentedControl>;
+type Story = StoryObj<typeof StyledSegmentedControl>;
 
 export const Basic: Story = {
-  render: () => <SegmentedControl />,
+  render: () => <StyledSegmentedControl />,
 };
 
 Basic.parameters = {
@@ -28,10 +29,10 @@ const options = [
   { label: "Label 2", value: "Users" },
 ];
 
-function SegmentedControl() {
+function StyledSegmentedControl() {
   return (
     <MainCenteredContainer>
-      <FormSegmentedControl name="name" options={options} />
+      <SegmentedControl name="name" options={options} />
     </MainCenteredContainer>
   );
 }

apps/webapp/app/components/stories/ToastUI.stories.tsx

@@ -20,6 +20,11 @@ function Collection() {
     <div className="flex flex-col items-start gap-y-4 p-4">
       <ToastUI variant="success" message="Success UI" t="-" />
       <ToastUI variant="error" message="Error UI" t="-" />
+      <ToastUI
+        variant="success"
+        message="This is a long error message that wraps over multiple lines so we can test the UI."
+        t="-"
+      />
       <br />
       <Button
         variant="primary/large"
@@ -41,6 +46,7 @@ function Collection() {
       >
         Error
       </Button>
+
       <Toaster />
     </div>
   );

apps/webapp/app/components/stories/UsageBar.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UsageBar } from "../billing/UsageBar";
+import { Paragraph } from "../primitives/Paragraph";
+
+const meta: Meta<typeof UsageProgressBar> = {
+  title: "Billing/UsageBar",
+  component: UsageProgressBar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UsageProgressBar>;
+
+export const JobsUsageBar: Story = {
+  render: () => <UsageProgressBar />,
+};
+
+function UsageProgressBar() {
+  return (
+    <div className="flex flex-col justify-center gap-4 p-12">
+      <UsageBarWrapper title="Usage within the free tier limit">
+        <UsageBar numberOfCurrentRuns={30000} tierRunLimit={50000} projectedRuns={120000} />
+      </UsageBarWrapper>
+      <UsageBarWrapper title="Usage over the free tier limit">
+        <UsageBar numberOfCurrentRuns={90000} tierRunLimit={50000} projectedRuns={120000} />
+      </UsageBarWrapper>
+      <UsageBarWrapper title="Billing limit set">
+        <UsageBar
+          numberOfCurrentRuns={35674}
+          tierRunLimit={50000}
+          projectedRuns={120000}
+          billingLimit={180000}
+        />
+      </UsageBarWrapper>
+      <UsageBarWrapper title="Paid subscriber under the free included Runs">
+        <UsageBar
+          numberOfCurrentRuns={10000}
+          tierRunLimit={50000}
+          billingLimit={180000}
+          projectedRuns={120000}
+          subscribedToPaidTier
+        />
+      </UsageBarWrapper>
+      <UsageBarWrapper title="Paid subscriber over the free included Runs">
+        <UsageBar
+          numberOfCurrentRuns={90000}
+          tierRunLimit={50000}
+          billingLimit={180000}
+          projectedRuns={120000}
+          subscribedToPaidTier
+        />
+      </UsageBarWrapper>
+      <UsageBarWrapper title="Brand new user usage">
+        <UsageBar numberOfCurrentRuns={0} tierRunLimit={50000} projectedRuns={0} />
+      </UsageBarWrapper>
+      <UsageBarWrapper title="Overlapping UI example">
+        <UsageBar
+          numberOfCurrentRuns={95000}
+          tierRunLimit={50000}
+          billingLimit={55000}
+          projectedRuns={93132}
+          subscribedToPaidTier
+        />
+      </UsageBarWrapper>
+    </div>
+  );
+}
+
+function UsageBarWrapper({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="rounded-md border border-border p-6">
+      <Paragraph>{title}</Paragraph>
+      {children}
+    </div>
+  );
+}

apps/webapp/app/consts.ts

@@ -8,4 +8,4 @@ export const EXECUTE_JOB_RETRY_LIMIT = 10;
 export const MAX_RUN_YIELDED_EXECUTIONS = 100;
 export const RUN_CHUNK_EXECUTION_BUFFER = 350;
 export const MAX_RUN_CHUNK_EXECUTION_LIMIT = 120000; // 2 minutes
-export const RESPONSE_TIMEOUT_STATUS_CODES = [408, 504];
+export const VERCEL_RESPONSE_TIMEOUT_STATUS_CODES = [408, 504];

apps/webapp/app/env.server.ts

@@ -64,6 +64,9 @@ const EnvironmentSchema = z.object({
 
   DEFAULT_ORG_EXECUTION_CONCURRENCY_LIMIT: z.coerce.number().int().default(10),
   DEFAULT_DEV_ENV_EXECUTION_ATTEMPTS: z.coerce.number().int().positive().default(1),
+
+  TUNNEL_HOST: z.string().optional(),
+  TUNNEL_SECRET_KEY: z.string().optional(),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/features.server.ts

@@ -12,6 +12,7 @@ export function featuresForRequest(request: Request): TriggerFeatures {
   const isManagedCloud =
     url.host === "cloud.trigger.dev" ||
     url.host === "test-cloud.trigger.dev" ||
+    url.host === "internal.trigger.dev" ||
     process.env.CLOUD_ENV === "development";
 
   return {

apps/webapp/app/hooks/useNewCustomerSubscribed.ts

@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+
+export function useNewCustomerSubscribed() {
+  useEffect(() => {
+    if ("confetti" in window && typeof window.confetti !== "undefined") {
+      const duration = 3.5 * 1000;
+      const animationEnd = Date.now() + duration;
+      const defaults = {
+        startVelocity: 30,
+        spread: 360,
+        ticks: 60,
+        zIndex: 0,
+        colors: [
+          "#E7FF52",
+          "#41FF54",
+          "rgb(245 158 11)",
+          "rgb(22 163 74)",
+          "rgb(37 99 235)",
+          "rgb(67 56 202)",
+          "rgb(219 39 119)",
+          "rgb(225 29 72)",
+          "rgb(217 70 239)",
+        ],
+      };
+      function randomInRange(min: number, max: number): number {
+        return Math.random() * (max - min) + min;
+      }
+      // @ts-ignore
+      const interval = setInterval(function () {
+        const timeLeft = animationEnd - Date.now();
+
+        if (timeLeft <= 0) {
+          return clearInterval(interval);
+        }
+
+        const particleCount = 60 * (timeLeft / duration);
+        // since particles fall down, start a bit higher than random
+        // @ts-ignore
+        window.confetti(
+          Object.assign({}, defaults, {
+            particleCount,
+            origin: { x: randomInRange(0.1, 0.4), y: Math.random() - 0.2 },
+          })
+        );
+        // @ts-ignore
+        window.confetti(
+          Object.assign({}, defaults, {
+            particleCount,
+            origin: { x: randomInRange(0.6, 0.9), y: Math.random() - 0.2 },
+          })
+        );
+      }, 250);
+    }
+  }, []);
+}

apps/webapp/app/hooks/useOrganizations.ts

@@ -1,9 +1,8 @@
-import { UseDataFunctionReturn, useTypedRouteLoaderData } from "remix-typedjson";
+import { UIMatch } from "@remix-run/react";
+import { UseDataFunctionReturn } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import type { loader as orgLoader } from "~/routes/_app.orgs.$organizationSlug/route";
-import { hydrateObject, useMatchesData } from "~/utils";
 import { useChanged } from "./useChanged";
-import { UIMatch } from "@remix-run/react";
 import { useTypedMatchesData } from "./useTypedMatchData";
 
 export type MatchedOrganization = UseDataFunctionReturn<typeof orgLoader>["organizations"][number];

apps/webapp/app/hooks/usePostHog.ts

@@ -17,7 +17,7 @@ export const usePostHog = (apiKey?: string, logging = false, debug = false): voi
     if (postHogInitialized.current === true) return;
     if (logging) console.log("Initializing PostHog");
     posthog.init(apiKey, {
-      api_host: "https://app.posthog.com",
+      api_host: "https://eu.posthog.com",
       opt_in_site_apps: true,
       debug,
       loaded: function (posthog) {

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

@@ -1,4 +1,4 @@
-import { RESPONSE_TIMEOUT_STATUS_CODES } from "~/consts";
+import { VERCEL_RESPONSE_TIMEOUT_STATUS_CODES } from "~/consts";
 import { prisma } from "~/db.server";
 import { Prettify } from "~/lib.es5";
 
@@ -20,13 +20,33 @@ export async function findEndpoint(id: string) {
   });
 }
 
-export function detectResponseIsTimeout(response?: Response) {
+export function detectResponseIsTimeout(rawBody: string, response?: Response) {
   if (!response) {
     return false;
   }
 
   return (
-    RESPONSE_TIMEOUT_STATUS_CODES.includes(response.status) ||
+    isResponseVercelTimeout(response) ||
+    isResponseDenoDeployTimeout(rawBody, response) ||
+    isResponseCloudflareTimeout(rawBody, response)
+  );
+}
+
+function isResponseCloudflareTimeout(rawBody: string, response: Response) {
+  return (
+    response.status === 503 &&
+    rawBody.includes("Worker exceeded resource limits") &&
+    typeof response.headers.get("cf-ray") === "string"
+  );
+}
+
+function isResponseVercelTimeout(response: Response) {
+  return (
+    VERCEL_RESPONSE_TIMEOUT_STATUS_CODES.includes(response.status) ||
     response.headers.get("x-vercel-error") === "FUNCTION_INVOCATION_TIMEOUT"
   );
 }
+
+function isResponseDenoDeployTimeout(rawBody: string, response: Response) {
+  return response.status === 502 && rawBody.includes("TIME_LIMIT");
+}

apps/webapp/app/platform/zodWorker.server.ts

@@ -148,7 +148,7 @@ export class ZodWorker<TMessageCatalog extends MessageCatalogSchema> {
       return true;
     }
 
-    this.#logDebug("Initializing worker queue with options", {
+    this.#logDebug("Initializing graphile worker queue with options", {
       runnerOptions: this.#runnerOptions,
     });
 
@@ -163,7 +163,7 @@ export class ZodWorker<TMessageCatalog extends MessageCatalogSchema> {
     });
 
     if (!this.#runner) {
-      throw new Error("Failed to initialize worker queue");
+      throw new Error("Failed to initialize graphile worker queue");
     }
 
     this.#runner?.events.on("pool:create", ({ workerPool }) => {

apps/webapp/app/presenters/OrgBillingPlanPresenter.ts

@@ -0,0 +1,60 @@
+import { PrismaClient, prisma } from "~/db.server";
+import { logger } from "~/services/logger.server";
+import { BillingService } from "../services/billing.server";
+
+export class OrgBillingPlanPresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({ slug, isManagedCloud }: { slug: string; isManagedCloud: boolean }) {
+    const billingPresenter = new BillingService(isManagedCloud);
+    const plans = await billingPresenter.getPlans();
+
+    if (plans === undefined) {
+      return;
+    }
+
+    const organization = await this.#prismaClient.organization.findFirst({
+      where: {
+        slug,
+      },
+    });
+
+    if (!organization) {
+      return;
+    }
+
+    const maxConcurrency = await this.#prismaClient.$queryRaw<
+      { organization_id: string; max_concurrent_runs: BigInt }[]
+    >`WITH events AS (
+      SELECT
+        re.event_time,
+        re.organization_id,
+        re.event_type,
+        SUM(re.event_type) OVER (PARTITION BY re.organization_id ORDER BY re.event_time) AS running_total
+      FROM
+        triggerdotdev_events.run_executions re
+      WHERE
+        re.organization_id = ${organization.id}
+        AND re.event_time >= DATE_TRUNC('month',
+        CURRENT_DATE)
+    )
+    SELECT
+      organization_id, MAX(running_total) AS max_concurrent_runs
+    FROM
+      events
+    GROUP BY
+      organization_id;`;
+
+    return {
+      plans,
+      maxConcurrency:
+        maxConcurrency.at(0) !== undefined
+          ? Number(maxConcurrency[0].max_concurrent_runs)
+          : undefined,
+    };
+  }
+}

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

@@ -1,4 +1,8 @@
+import { estimate } from "@trigger.dev/billing";
+import { formatDateTime } from "~/components/primitives/DateTime";
 import { PrismaClient, prisma } from "~/db.server";
+import { featuresForRequest } from "~/features.server";
+import { BillingService } from "~/services/billing.server";
 import { logger } from "~/services/logger.server";
 
 export class OrgUsagePresenter {
@@ -8,7 +12,7 @@ export class OrgUsagePresenter {
     this.#prismaClient = prismaClient;
   }
 
-  public async call({ userId, slug }: { userId: string; slug: string }) {
+  public async call({ userId, slug, request }: { userId: string; slug: string; request: Request }) {
     const organization = await this.#prismaClient.organization.findFirst({
       where: {
         slug,
@@ -24,9 +28,6 @@ export class OrgUsagePresenter {
       return;
     }
 
-    const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
-    const startOfLastMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1); // this works for January as well
-
     // Get count of runs since the start of the current month
     const runsCount = await this.#prismaClient.jobRun.count({
       where: {
@@ -38,18 +39,6 @@ export class OrgUsagePresenter {
       },
     });
 
-    // Get the count of runs for last month
-    const runsCountLastMonth = await this.#prismaClient.jobRun.count({
-      where: {
-        organizationId: organization.id,
-        createdAt: {
-          gte: startOfLastMonth,
-          lt: startOfMonth,
-        },
-        internal: false,
-      },
-    });
-
     // Get the count of the runs for the last 6 months, by month. So for example we want the data shape to be:
     // [
     //   { month: "2021-01", count: 10 },
@@ -61,100 +50,121 @@ export class OrgUsagePresenter {
     // ]
     // This will be used to generate the chart on the usage page
     // Use prisma queryRaw for this since prisma doesn't support grouping by month
-    const chartDataRaw = await this.#prismaClient.$queryRaw<
+    const monthlyRunsDataRaw = await this.#prismaClient.$queryRaw<
       {
         month: string;
         count: number;
       }[]
     >`SELECT TO_CHAR("createdAt", 'YYYY-MM') as month, COUNT(*) as count FROM "JobRun" WHERE "organizationId" = ${organization.id} AND "createdAt" >= NOW() - INTERVAL '6 months' AND "internal" = FALSE GROUP BY month ORDER BY month ASC`;
 
-    const chartData = chartDataRaw.map((obj) => ({
+    const hasMonthlyRunData = monthlyRunsDataRaw.length > 0;
+    const monthlyRunsData = monthlyRunsDataRaw.map((obj) => ({
       name: obj.month,
       total: Number(obj.count), // Convert BigInt to Number
     }));
 
-    const totalJobs = await this.#prismaClient.job.count({
-      where: {
-        organizationId: organization.id,
-        internal: false,
-      },
-    });
+    const monthlyRunsDataDisplay = fillInMissingRunMonthlyData(monthlyRunsData, 6);
 
-    const totalJobsLastMonth = await this.#prismaClient.job.count({
-      where: {
-        organizationId: organization.id,
-        createdAt: {
-          lt: startOfMonth,
-        },
-        deletedAt: null,
-        internal: false,
-      },
-    });
+    // Max concurrency each day over past 30 days
+    const concurrencyChartRawData = await this.#prismaClient.$queryRaw<
+      { day: Date; max_concurrent_runs: BigInt }[]
+    >`
+      WITH time_boundaries AS (
+        SELECT generate_series(
+            NOW() - interval '30 days', 
+            NOW(), 
+            interval '1 day'
+        ) AS day_start
+      ),
+      events AS (
+          SELECT
+              day_start,
+              event_time,
+              event_type,
+              SUM(event_type) OVER (ORDER BY event_time) AS running_total
+          FROM
+              time_boundaries
+          JOIN
+              triggerdotdev_events.run_executions
+          ON
+              event_time >= day_start AND event_time < day_start + interval '1 day'
+          WHERE triggerdotdev_events.run_executions.organization_id = ${organization.id}
+      ),
+      max_concurrent_per_day AS (
+          SELECT
+              date_trunc('day', event_time) AS day,
+              MAX(running_total) AS max_concurrent_runs
+          FROM
+              events
+          GROUP BY day
+      )
+      SELECT
+          day,
+          max_concurrent_runs
+      FROM
+          max_concurrent_per_day
+      ORDER BY
+          day;`;
 
-    const totalIntegrations = await this.#prismaClient.integration.count({
-      where: {
-        organizationId: organization.id,
-      },
-    });
+    const ThirtyDaysAgo = new Date();
+    ThirtyDaysAgo.setDate(ThirtyDaysAgo.getDate() - 30);
+    ThirtyDaysAgo.setHours(0, 0, 0, 0);
 
-    const totalIntegrationsLastMonth = await this.#prismaClient.integration.count({
-      where: {
-        organizationId: organization.id,
-        createdAt: {
-          lt: startOfMonth,
-        },
-      },
-    });
+    const hasConcurrencyData = concurrencyChartRawData.length > 0;
+    const concurrencyChartRawDataFilledIn = fillInMissingConcurrencyDays(
+      ThirtyDaysAgo,
+      31,
+      concurrencyChartRawData
+    );
 
-    const totalMembers = await this.#prismaClient.orgMember.count({
-      where: {
-        organizationId: organization.id,
-      },
-    });
+    const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1);
+    endOfMonth.setDate(endOfMonth.getDate() - 1);
+    const projectedRunsCount = Math.round(
+      runsCount / (new Date().getDate() / endOfMonth.getDate())
+    );
 
-    const jobs = await this.#prismaClient.job.findMany({
-      where: {
-        organizationId: organization.id,
-        deletedAt: null,
-        internal: false,
-      },
-      select: {
-        id: true,
-        slug: true,
-        _count: {
-          select: {
-            runs: {
-              where: {
-                createdAt: {
-                  gte: startOfMonth,
-                },
-              },
-            },
-          },
-        },
-        project: {
-          select: {
-            id: true,
-            name: true,
-            slug: true,
-          },
-        },
-      },
-    });
+    const { isManagedCloud } = featuresForRequest(request);
+    const billingPresenter = new BillingService(isManagedCloud);
+    const plans = await billingPresenter.getPlans();
 
-    const chartDataDisplay = fillInMissingMonthlyData(chartData, 6);
+    let runCostEstimation: number | undefined = undefined;
+    let projectedRunCostEstimation: number | undefined = undefined;
+
+    if (plans) {
+      const estimationResult = estimate({
+        usage: { runs: runsCount },
+        plans: [plans.free, plans.paid],
+      });
+      runCostEstimation = estimationResult?.cost.runsCost;
+
+      const projectedEstimationResult = estimate({
+        usage: { runs: projectedRunsCount },
+        plans: [plans.free, plans.paid],
+      });
+      projectedRunCostEstimation = projectedEstimationResult?.cost.runsCost;
+    }
+
+    const periodStart = new Date();
+    periodStart.setDate(1);
+    periodStart.setHours(0, 0, 0, 0);
+
+    const periodEnd = new Date();
+    periodEnd.setDate(1);
+    periodEnd.setMonth(periodEnd.getMonth() + 1);
+    periodEnd.setHours(0, 0, 0, 0);
 
     return {
       id: organization.id,
       runsCount,
-      runsCountLastMonth,
-      chartData: chartDataDisplay,
-      totalJobs,
-      totalJobsLastMonth,
-      totalIntegrations,
-      totalIntegrationsLastMonth,
-      totalMembers,
-      jobs,
+      projectedRunsCount,
+      monthlyRunsData: monthlyRunsDataDisplay,
+      hasMonthlyRunData,
+      concurrencyData: concurrencyChartRawDataFilledIn,
+      hasConcurrencyData,
+      runCostEstimation,
+      projectedRunCostEstimation,
+      periodStart,
+      periodEnd,
     };
   }
 }
@@ -163,7 +173,7 @@ export class OrgUsagePresenter {
 // So for example, if data is [{ name: "2021-01", total: 10 }, { name: "2021-03", total: 30 }] and the totalNumberOfMonths is 6
 // And the current month is "2021-04", then this function will return:
 // [{ name: "2020-11", total: 0 }, { name: "2020-12", total: 0 }, { name: "2021-01", total: 10 }, { name: "2021-02", total: 0 }, { name: "2021-03", total: 30 }, { name: "2021-04", total: 0 }]
-function fillInMissingMonthlyData(
+function fillInMissingRunMonthlyData(
   data: Array<{ name: string; total: number }>,
   totalNumberOfMonths: number
 ): Array<{ name: string; total: number }> {
@@ -187,6 +197,33 @@ function fillInMissingMonthlyData(
   return completeData;
 }
 
+function fillInMissingConcurrencyDays(
+  startDate: Date,
+  days: number,
+  data: Array<{ day: Date; max_concurrent_runs: BigInt }>
+) {
+  const outputData: Array<{ date: Date; maxConcurrentRuns: number }> = [];
+  for (let i = 0; i < days; i++) {
+    const date = new Date(startDate);
+    date.setDate(date.getDate() + i);
+
+    const foundData = data.find((d) => d.day.toISOString() === date.toISOString());
+    if (!foundData) {
+      outputData.push({
+        date,
+        maxConcurrentRuns: 0,
+      });
+    } else {
+      outputData.push({
+        date,
+        maxConcurrentRuns: Number(foundData.max_concurrent_runs),
+      });
+    }
+  }
+
+  return outputData;
+}
+
 // Start month will be like 2023-03 and endMonth will be like 2023-10
 // The result should be an array of months between these two months, including the start and end month
 // So for example, if startMonth is 2023-03 and endMonth is 2023-10, the result should be:
@@ -212,11 +249,3 @@ function getMonthsBetween(startMonth: string, endMonth: string): string[] {
 
   return result;
 }
-
-function getLastSecondOfMonth(endMonth: string) {
-  const [year, month] = endMonth.split("-").map(Number);
-  const nextMonthFirstDay = new Date(year, month, 1);
-  nextMonthFirstDay.setDate(0);
-  nextMonthFirstDay.setHours(23, 59, 59);
-  return nextMonthFirstDay;
-}

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

@@ -1,6 +1,8 @@
+import { JobRunStatus, RuntimeEnvironmentType } from "@trigger.dev/database";
 import { z } from "zod";
 import { PrismaClient, prisma } from "~/db.server";
 import { DirectionSchema } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
+import { getUsername } from "~/utils/username";
 
 export type Direction = z.infer<typeof DirectionSchema>;
 
@@ -10,6 +12,8 @@ type RunListOptions = {
   organizationSlug: string;
   projectSlug: string;
   direction?: Direction;
+  filterStatus?: JobRunStatus[];
+  filterEnvironment?: RuntimeEnvironmentType;
   cursor?: string;
   pageSize?: number;
 };
@@ -30,6 +34,8 @@ export class RunListPresenter {
     jobSlug,
     organizationSlug,
     projectSlug,
+    filterEnvironment,
+    filterStatus,
     direction = "forward",
     cursor,
     pageSize = DEFAULT_PAGE_SIZE,
@@ -44,7 +50,6 @@ export class RunListPresenter {
       },
     });
 
-
     // Find the project scoped to the organization
     const project = await this.#prismaClient.project.findFirstOrThrow({
       where: {
@@ -57,19 +62,17 @@ export class RunListPresenter {
     const environments = await this.#prismaClient.runtimeEnvironment.findMany({
       where: {
         projectId: project.id,
-        OR: [
-          { orgMember: { userId } },
-          { orgMemberId: null },
-        ]
-      }
+      },
     });
 
-    const job = jobSlug ? await this.#prismaClient.job.findFirstOrThrow({
-      where: {
-        slug: jobSlug,
-        projectId: project.id,
-      },
-    }) : undefined;
+    const job = jobSlug
+      ? await this.#prismaClient.job.findFirstOrThrow({
+          where: {
+            slug: jobSlug,
+            projectId: project.id,
+          },
+        })
+      : undefined;
 
     const runs = await this.#prismaClient.jobRun.findMany({
       select: {
@@ -87,7 +90,13 @@ export class RunListPresenter {
             slug: true,
             orgMember: {
               select: {
-                userId: true,
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    displayName: true,
+                  },
+                },
               },
             },
           },
@@ -111,6 +120,8 @@ export class RunListPresenter {
         environmentId: {
           in: environments.map((environment) => environment.id),
         },
+        status: filterStatus ? { in: filterStatus } : undefined,
+        environment: filterEnvironment ? { type: filterEnvironment } : undefined,
       },
       orderBy: [{ id: "desc" }],
       //take an extra record to tell if there are more
@@ -119,8 +130,8 @@ export class RunListPresenter {
       skip: cursor ? 1 : 0,
       cursor: cursor
         ? {
-          id: cursor,
-        }
+            id: cursor,
+          }
         : undefined,
     });
 
@@ -163,7 +174,8 @@ export class RunListPresenter {
         environment: {
           type: run.environment.type,
           slug: run.environment.slug,
-          userId: run.environment.orgMember?.userId,
+          userId: run.environment.orgMember?.user.id,
+          userName: getUsername(run.environment.orgMember?.user),
         },
         job: run.job,
       })),

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

@@ -8,6 +8,7 @@ import { PrismaClient, prisma } from "~/db.server";
 import { isRunCompleted, runBasicStatus } from "~/models/jobRun.server";
 import { mergeProperties } from "~/utils/mergeProperties.server";
 import { taskListToTree } from "~/utils/taskListToTree";
+import { getUsername } from "~/utils/username";
 
 type RunOptions = {
   id: string;
@@ -79,6 +80,8 @@ export class RunPresenter {
       environment: {
         type: run.environment.type,
         slug: run.environment.slug,
+        userId: run.environment.orgMember?.user.id,
+        userName: getUsername(run.environment.orgMember?.user),
       },
       event: this.#prepareEventData(run.event),
       tasks,
@@ -130,6 +133,17 @@ export class RunPresenter {
           select: {
             type: true,
             slug: true,
+            orgMember: {
+              select: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    displayName: true,
+                  },
+                },
+              },
+            },
           },
         },
         event: {

apps/webapp/app/root.tsx

@@ -25,7 +25,7 @@ export const links: LinksFunction = () => {
 
 export const meta: TypedMetaFunction<typeof loader> = (args) => {
   return metaV1(args, {
-    title: `Trigger.dev${appEnvTitleTag(args.data.appEnv)}`,
+    title: `Trigger.dev${appEnvTitleTag(args.data?.appEnv)}`,
     charset: "utf-8",
     viewport: "width=1024, initial-scale=1",
   });
@@ -71,7 +71,7 @@ export function ErrorBoundary() {
           <Links />
         </head>
         <body className="h-full overflow-hidden bg-darkBackground">
-          <AppContainer showBackgroundGradient={true}>
+          <AppContainer>
             <MainCenteredContainer>
               <RouteErrorDisplay />
             </MainCenteredContainer>

apps/webapp/app/routes/_app.orgs.$organizationId.subscription.canceled/route.tsx

@@ -0,0 +1,32 @@
+import { LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { redirectWithErrorMessage } from "~/models/message.server";
+import { plansPath } from "~/utils/pathBuilder";
+
+const ParamsSchema = z.object({
+  organizationId: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const { organizationId } = ParamsSchema.parse(params);
+
+  const org = await prisma.organization.findUnique({
+    select: {
+      slug: true,
+    },
+    where: {
+      id: organizationId,
+    },
+  });
+
+  if (!org) {
+    throw new Response(null, { status: 404 });
+  }
+
+  return redirectWithErrorMessage(
+    `${plansPath({ slug: org.slug })}`,
+    request,
+    "You didn't complete your details on Stripe. Please try again."
+  );
+};

apps/webapp/app/routes/_app.orgs.$organizationId.subscription.complete/route.tsx

@@ -0,0 +1,32 @@
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { redirectWithSuccessMessage } from "~/models/message.server";
+import { subscribedPath } from "~/utils/pathBuilder";
+
+const ParamsSchema = z.object({
+  organizationId: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const { organizationId } = ParamsSchema.parse(params);
+
+  const org = await prisma.organization.findUnique({
+    select: {
+      slug: true,
+    },
+    where: {
+      id: organizationId,
+    },
+  });
+
+  if (!org) {
+    throw new Response(null, { status: 404 });
+  }
+
+  return redirectWithSuccessMessage(
+    `${subscribedPath({ slug: org.slug })}`,
+    request,
+    "You are now subscribed to Trigger.dev"
+  );
+};

apps/webapp/app/routes/_app.orgs.$organizationId.subscription.failed/route.tsx

@@ -0,0 +1,34 @@
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { redirectWithErrorMessage } from "~/models/message.server";
+import { plansPath } from "~/utils/pathBuilder";
+
+const ParamsSchema = z.object({
+  organizationId: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const { organizationId } = ParamsSchema.parse(params);
+
+  const org = await prisma.organization.findUnique({
+    select: {
+      slug: true,
+    },
+    where: {
+      id: organizationId,
+    },
+  });
+
+  if (!org) {
+    throw new Response(null, { status: 404 });
+  }
+
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+  const reason = searchParams.get("reason");
+
+  let errorMessage = reason ? decodeURIComponent(reason) : "Subscribing failed to complete";
+
+  return redirectWithErrorMessage(`${plansPath({ slug: org.slug })}`, request, errorMessage);
+};

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

@@ -0,0 +1,193 @@
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { Bar, BarChart, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { ConcurrentRunsChart } from "~/components/billing/ConcurrentRunsChart";
+import { UsageBar } from "~/components/billing/UsageBar";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
+import { Header2, Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { OrgUsagePresenter } from "~/presenters/OrgUsagePresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { formatCurrency, formatNumberCompact } from "~/utils/numberFormatter";
+import { OrganizationParamsSchema, plansPath } from "~/utils/pathBuilder";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { DateTime, formatDateTime } from "~/components/primitives/DateTime";
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { organizationSlug } = OrganizationParamsSchema.parse(params);
+
+  const presenter = new OrgUsagePresenter();
+
+  const data = await presenter.call({ userId, slug: organizationSlug, request });
+
+  if (!data) {
+    throw new Response(null, { status: 404 });
+  }
+
+  return typedjson(data);
+}
+
+const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
+  if (active && payload) {
+    return (
+      <div className="flex gap-1 rounded border border-border bg-background px-3 py-2 text-xs text-bright">
+        <p>{label}:</p>
+        <p>{payload[0].value}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default function Page() {
+  const organization = useOrganization();
+  const loaderData = useTypedLoaderData<typeof loader>();
+  const currentPlan = useCurrentPlan();
+
+  const hitConcurrencyLimit = currentPlan?.subscription?.limits.concurrentRuns
+    ? loaderData.concurrencyData.some(
+        (c) => c.maxConcurrentRuns >= (currentPlan.subscription?.limits.concurrentRuns ?? Infinity)
+      )
+    : false;
+
+  const hitsRunLimit = currentPlan?.usage?.runCountCap
+    ? currentPlan.usage.currentRunCount > currentPlan.usage.runCountCap
+    : false;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <Header2 spacing>Concurrent runs</Header2>
+        <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
+          {hitConcurrencyLimit && (
+            <Callout
+              variant={"pricing"}
+              cta={
+                <LinkButton
+                  variant="primary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                  leadingIconClassName="px-0"
+                  to={plansPath(organization)}
+                >
+                  Increase concurrent runs
+                </LinkButton>
+              }
+            >
+              {`Some of your runs are being queued because the number of concurrent runs is limited to
+            ${currentPlan?.subscription?.limits.concurrentRuns}.`}
+            </Callout>
+          )}
+          <ConcurrentRunsChart
+            data={loaderData.concurrencyData}
+            concurrentRunsLimit={currentPlan?.subscription?.limits.concurrentRuns}
+            hasConcurrencyData={loaderData.hasConcurrencyData}
+          />
+        </div>
+      </div>
+
+      <div className="@container">
+        <Header2 spacing>Runs</Header2>
+        <div className="flex flex-col gap-5 rounded border border-border p-6">
+          {hitsRunLimit && (
+            <Callout
+              variant={"pricing"}
+              cta={
+                <LinkButton
+                  variant="primary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                  leadingIconClassName="px-0"
+                  to={plansPath(organization)}
+                >
+                  Upgrade
+                </LinkButton>
+              }
+            >
+              <Paragraph variant="small">
+                You have exceeded the monthly{" "}
+                {formatNumberCompact(currentPlan?.subscription?.limits.runs ?? 0)} runs limit.
+                Upgrade to a paid plan before{" "}
+                <DateTime date={loaderData.periodEnd} includeSeconds={false} includeTime={false} />.
+              </Paragraph>
+            </Callout>
+          )}
+          <div className="flex flex-col gap-x-8 @4xl:flex-row">
+            <div className="flex w-full flex-col gap-4">
+              {loaderData.runCostEstimation !== undefined &&
+                loaderData.projectedRunCostEstimation !== undefined && (
+                  <div className="flex w-full items-center gap-6">
+                    <div className="flex flex-col gap-2">
+                      <Header3 className="">Month-to-date</Header3>
+                      <p className="text-3xl font-medium text-bright">
+                        {formatCurrency(loaderData.runCostEstimation, false)}
+                      </p>
+                    </div>
+                    <ArrowRightIcon className="h-6 w-6 text-dimmed/50" />
+                    <div className="flex flex-col gap-2 text-dimmed">
+                      <Header3 className="text-dimmed">Projected</Header3>
+                      <p className="text-3xl font-medium">
+                        {formatCurrency(loaderData.projectedRunCostEstimation, false)}
+                      </p>
+                    </div>
+                  </div>
+                )}
+              <UsageBar
+                numberOfCurrentRuns={loaderData.runsCount}
+                tierRunLimit={
+                  currentPlan?.usage.runCountCap ??
+                  currentPlan?.subscription?.plan.runs?.pricing?.brackets.at(0)?.upto
+                }
+                projectedRuns={loaderData.projectedRunsCount}
+              />
+            </div>
+            <div className="relative w-full">
+              <Header3 className="mb-4">Monthly runs</Header3>
+              {!loaderData.hasMonthlyRunData && (
+                <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+                  No runs to show
+                </Paragraph>
+              )}
+              <ResponsiveContainer width="100%" height={200}>
+                <BarChart
+                  data={loaderData.monthlyRunsData}
+                  margin={{
+                    top: 0,
+                    right: 0,
+                    left: 0,
+                    bottom: 0,
+                  }}
+                  className="-ml-7"
+                >
+                  <XAxis
+                    dataKey="name"
+                    stroke="#94A3B8"
+                    fontSize={12}
+                    tickLine={false}
+                    axisLine={false}
+                  />
+                  <YAxis
+                    stroke="#94A3B8"
+                    fontSize={12}
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(value) => `${value}`}
+                  />
+                  <Tooltip
+                    cursor={{ fill: "rgba(255,255,255,0.05)" }}
+                    content={<CustomTooltip />}
+                  />
+                  <Bar dataKey="total" fill="#16A34A" radius={[3, 3, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { useActionData } from "@remix-run/react";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { SetPlanBodySchema } from "@trigger.dev/billing";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { PricingCalculator } from "~/components/billing/PricingCalculator";
+import { PricingTiers, TierEnterprise, TierFree, TierPro } from "~/components/billing/PricingTiers";
+import { RunsVolumeDiscountTable } from "~/components/billing/RunsVolumeDiscountTable";
+import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
+import { Callout } from "~/components/primitives/Callout";
+import { Header2 } from "~/components/primitives/Headers";
+import { featuresForRequest } from "~/features.server";
+import { useFeatures } from "~/hooks/useFeatures";
+import { OrgBillingPlanPresenter } from "~/presenters/OrgBillingPlanPresenter";
+import { Handle } from "~/utils/handle";
+import { OrganizationParamsSchema, organizationBillingPath } from "~/utils/pathBuilder";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { formatNumberCompact } from "~/utils/numberFormatter";
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const { organizationSlug } = OrganizationParamsSchema.parse(params);
+
+  const { isManagedCloud } = featuresForRequest(request);
+  if (!isManagedCloud) {
+    return redirect(organizationBillingPath({ slug: organizationSlug }));
+  }
+
+  const presenter = new OrgBillingPlanPresenter();
+  const result = await presenter.call({ slug: organizationSlug, isManagedCloud });
+  if (!result) {
+    throw new Response(null, { status: 404 });
+  }
+
+  return typedjson({
+    plans: result.plans,
+    maxConcurrency: result.maxConcurrency,
+    organizationSlug,
+  });
+}
+
+export const handle: Handle = {
+  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Plans" />,
+};
+
+export default function Page() {
+  const { plans, maxConcurrency, organizationSlug } = useTypedLoaderData<typeof loader>();
+  const currentPlan = useCurrentPlan();
+
+  const hitConcurrencyLimit =
+    currentPlan?.subscription?.limits.concurrentRuns && maxConcurrency
+      ? maxConcurrency >= currentPlan.subscription!.limits.concurrentRuns!
+      : false;
+
+  const hitRunLimit = currentPlan?.usage?.runCountCap
+    ? currentPlan.usage.currentRunCount > currentPlan.usage.runCountCap
+    : false;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {hitConcurrencyLimit && (
+        <Callout variant={"pricing"}>
+          Some of your runs are being queued because your run concurrency is limited to{" "}
+          {currentPlan?.subscription?.limits.concurrentRuns}.
+        </Callout>
+      )}
+      {hitRunLimit && (
+        <Callout variant={"pricing"}>
+          {`You have exceeded the monthly
+          ${formatNumberCompact(currentPlan!.subscription!.limits.runs!)} runs limit. Upgrade so you
+          can continue to perform runs.`}
+        </Callout>
+      )}
+      <PricingTiers organizationSlug={organizationSlug} plans={plans} />
+      <div>
+        <Header2 spacing>Estimate your usage</Header2>
+        <div className="flex h-full w-full rounded-md border border-border p-6">
+          <PricingCalculator plans={plans} />
+          <div className="mx-6 min-h-full w-px bg-border" />
+          <RunsVolumeDiscountTable brackets={plans.paid.runs?.pricing?.brackets ?? []} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,198 +1,132 @@
-import { ArrowRightIcon } from "@heroicons/react/20/solid";
-import {
-  ForwardIcon,
-  SquaresPlusIcon,
-  UsersIcon,
-  WrenchScrewdriverIcon,
-} from "@heroicons/react/24/solid";
-import { Bar, BarChart, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";
+import { CalendarDaysIcon, ReceiptRefundIcon } from "@heroicons/react/20/solid";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { Outlet } from "@remix-run/react";
+import { ActiveSubscription } from "@trigger.dev/billing";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Header2 } from "~/components/primitives/Headers";
-import { Paragraph } from "~/components/primitives/Paragraph";
-import { TextLink } from "~/components/primitives/TextLink";
-import { useOrganization } from "~/hooks/useOrganizations";
-import {
-  OrganizationParamsSchema,
-  jobPath,
-  newProjectPath,
-  organizationTeamPath,
-} from "~/utils/pathBuilder";
-import { Link } from "@remix-run/react/dist/components";
-import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { OrgUsagePresenter } from "~/presenters/OrgUsagePresenter.server";
-import { requireUserId } from "~/services/session.server";
-import { LinkButton } from "~/components/primitives/Buttons";
-import {
-  PageHeader,
-  PageTitleRow,
-  PageTitle,
-  PageButtons,
-} from "~/components/primitives/PageHeader";
-import { Handle } from "~/utils/handle";
 import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-
-export async function loader({ params, request }: LoaderFunctionArgs) {
-  const userId = await requireUserId(request);
-  const { organizationSlug } = OrganizationParamsSchema.parse(params);
-
-  const presenter = new OrgUsagePresenter();
-
-  const data = await presenter.call({ userId, slug: organizationSlug });
-
-  if (!data) {
-    throw new Response(null, { status: 404 });
-  }
-
-  return typedjson(data);
-}
-
-const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
-  if (active && payload) {
-    return (
-      <div className="flex items-center gap-2 rounded border border-border bg-slate-900 px-4 py-2 text-sm text-dimmed">
-        <p className="text-white">{label}:</p>
-        <p className="text-white">{payload[0].value}</p>
-      </div>
-    );
-  }
-
-  return null;
-};
+import { LinkButton } from "~/components/primitives/Buttons";
+import { DateTime } from "~/components/primitives/DateTime";
+import {
+  PageButtons,
+  PageHeader,
+  PageInfoGroup,
+  PageInfoProperty,
+  PageInfoRow,
+  PageTabs,
+  PageTitle,
+  PageTitleRow,
+} from "~/components/primitives/PageHeader";
+import { useFeatures } from "~/hooks/useFeatures";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { formatDurationInDays } from "~/utils";
+import { Handle } from "~/utils/handle";
+import { plansPath, stripePortalPath, usagePath } from "~/utils/pathBuilder";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 
 export const handle: Handle = {
   breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Usage & Billing" />,
 };
 
+function planLabel(subscription: ActiveSubscription | undefined, periodEnd: Date) {
+  if (!subscription) {
+    return "You're currently on the Free plan";
+  }
+  if (!subscription.isPaying) {
+    return `You're currently on the ${subscription.plan.title} plan`;
+  }
+  const costDescription = subscription.plan.concurrentRuns.pricing
+    ? `\$${subscription.plan.concurrentRuns.pricing?.tierCost}/mo`
+    : "";
+  if (subscription.canceledAt) {
+    return (
+      <>
+        You're on the {costDescription} {subscription.plan.title} plan until{" "}
+        <DateTime includeTime={false} date={periodEnd} /> when you'll be on the Free plan
+      </>
+    );
+  }
+
+  return `You're currently on the ${costDescription} ${subscription.plan.title} plan`;
+}
+
 export default function Page() {
   const organization = useOrganization();
-  const loaderData = useTypedLoaderData<typeof loader>();
+  const { isManagedCloud } = useFeatures();
+  const currentPlan = useCurrentPlan();
 
   return (
     <PageContainer>
-      <PageHeader>
+      <PageHeader hideBorder>
         <PageTitleRow>
-          <PageTitle title="Usage & Billing" />
-        </PageTitleRow>
-      </PageHeader>
-      <PageBody>
-        <div className="mb-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          <div className="rounded border border-border p-6">
-            <div className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <Header2>Total Runs this month</Header2>
-              <ForwardIcon className="h-6 w-6 text-dimmed" />
-            </div>
-            <div>
-              <p className="text-3xl font-bold">{loaderData.runsCount.toLocaleString()}</p>
-              <Paragraph variant="small" className="text-dimmed">
-                {loaderData.runsCountLastMonth} runs last month
-              </Paragraph>
-            </div>
-          </div>
-          <div className="rounded border border-border p-6">
-            <div className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <Header2>Total Jobs</Header2>
-              <WrenchScrewdriverIcon className="h-6 w-6 text-dimmed" />
-            </div>
-            <div>
-              <p className="text-3xl font-bold">{loaderData.totalJobs.toLocaleString()}</p>
-              <Paragraph variant="small" className="text-dimmed">
-                {loaderData.totalJobs === loaderData.totalJobsLastMonth ? (
-                  <>No change since last month</>
-                ) : loaderData.totalJobs > loaderData.totalJobsLastMonth ? (
-                  <>+{loaderData.totalJobs - loaderData.totalJobsLastMonth} since last month</>
-                ) : (
-                  <>-{loaderData.totalJobsLastMonth - loaderData.totalJobs} since last month</>
-                )}
-              </Paragraph>
-            </div>
-          </div>
-          <div className="rounded border border-border p-6">
-            <div className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <Header2>Total Integrations</Header2>
-              <SquaresPlusIcon className="h-6 w-6 text-dimmed" />
-            </div>
-            <div>
-              <p className="text-3xl font-bold">{loaderData.totalIntegrations.toLocaleString()}</p>
-              <Paragraph variant="small" className="text-dimmed">
-                {loaderData.totalIntegrations === loaderData.totalIntegrationsLastMonth ? (
-                  <>No change since last month</>
-                ) : loaderData.totalIntegrations > loaderData.totalIntegrationsLastMonth ? (
+          <PageTitle title={isManagedCloud ? "Usage & Billing" : "Usage"} />
+          <PageButtons>
+            {isManagedCloud && (
+              <>
+                {currentPlan?.subscription?.isPaying && (
                   <>
-                    +{loaderData.totalIntegrations - loaderData.totalIntegrationsLastMonth} since
-                    last month
-                  </>
-                ) : (
-                  <>
-                    -{loaderData.totalIntegrationsLastMonth - loaderData.totalIntegrations} since
-                    last month
+                    <LinkButton to={stripePortalPath(organization)} variant="secondary/small">
+                      Invoices
+                    </LinkButton>
+                    <LinkButton to={stripePortalPath(organization)} variant="secondary/small">
+                      Manage card details
+                    </LinkButton>
                   </>
                 )}
-              </Paragraph>
-            </div>
-          </div>
-          <div className="rounded border border-border p-6">
-            <div className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <Header2>Team members</Header2>
-              <UsersIcon className="h-6 w-6 text-dimmed" />
-            </div>
-            <div>
-              <p className="text-3xl font-bold">{loaderData.totalMembers.toLocaleString()}</p>
-              <TextLink
-                to={organizationTeamPath(organization)}
-                className="group text-sm text-dimmed hover:text-bright"
-              >
-                Manage
-                <ArrowRightIcon className="-mb-0.5 ml-0.5 h-4 w-4 text-dimmed transition group-hover:translate-x-1 group-hover:text-bright" />
-              </TextLink>
-            </div>
-          </div>
-        </div>
-        <div className="flex max-h-[500px] gap-x-4">
-          <div className="w-1/2 rounded border border-border py-6 pr-2">
-            <Header2 className="mb-8 pl-6">Job Runs per month</Header2>
-            <ResponsiveContainer width="100%" height={400}>
-              <BarChart data={loaderData.chartData}>
-                <XAxis
-                  dataKey="name"
-                  stroke="#888888"
-                  fontSize={12}
-                  tickLine={false}
-                  axisLine={false}
-                />
-                <YAxis
-                  stroke="#888888"
-                  fontSize={12}
-                  tickLine={false}
-                  axisLine={false}
-                  tickFormatter={(value) => `${value}`}
-                />
-                <Tooltip cursor={{ fill: "rgba(255,255,255,0.05)" }} content={<CustomTooltip />} />
-                <Bar dataKey="total" fill="#DB2777" radius={[4, 4, 0, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-          <div className="w-1/2 overflow-y-auto rounded border border-border px-3 py-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
-            <div className="mb-2 flex items-baseline justify-between border-b border-border px-3 pb-4">
-              <Header2 className="">Jobs</Header2>
-              <Header2 className="">Runs</Header2>
-            </div>
-            <div className="space-y-2">
-              {loaderData.jobs.map((job) => (
-                <Link
-                  to={jobPath(organization, job.project, job)}
-                  className="flex items-center rounded px-4 py-3 transition hover:bg-slate-850"
-                  key={job.id}
+                <LinkButton
+                  to={plansPath(organization)}
+                  variant="primary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                  leadingIconClassName="px-0"
                 >
-                  <div className="space-y-1">
-                    <p className="text-sm font-medium leading-none">{job.slug}</p>
-                    <p className="text-sm text-muted-foreground">Project: {job.project.name}</p>
-                  </div>
-                  <div className="ml-auto font-medium">{job._count.runs.toLocaleString()}</div>
-                </Link>
-              ))}
-            </div>
-          </div>
+                  Upgrade
+                </LinkButton>
+              </>
+            )}
+          </PageButtons>
+        </PageTitleRow>
+
+        <PageInfoRow>
+          <PageInfoGroup>
+            {currentPlan?.subscription && (
+              <PageInfoProperty
+                icon={<ReceiptRefundIcon className="h-4 w-4 text-green-600" />}
+                value={planLabel(currentPlan.subscription, currentPlan.usage.periodEnd)}
+              />
+            )}
+            {currentPlan?.subscription?.isPaying && (
+              <PageInfoProperty
+                icon={<CalendarDaysIcon className="h-4 w-4 text-green-600" />}
+                label={"Billing period"}
+                value={
+                  <>
+                    <DateTime date={currentPlan.usage.periodStart} includeTime={false} /> to{" "}
+                    <DateTime date={currentPlan.usage.periodEnd} includeTime={false} /> (
+                    {formatDurationInDays(currentPlan.usage.periodRemainingDuration)} remaining)
+                  </>
+                }
+              />
+            )}
+          </PageInfoGroup>
+        </PageInfoRow>
+        {isManagedCloud && (
+          <PageTabs
+            tabs={[
+              {
+                label: "Usage",
+                to: usagePath(organization),
+              },
+              {
+                label: "Plans",
+                to: plansPath(organization),
+              },
+            ]}
+            layoutId="usage-and-billing"
+          />
+        )}
+      </PageHeader>
+      <PageBody scrollable={false}>
+        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <Outlet />
         </div>
       </PageBody>
     </PageContainer>

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

@@ -10,6 +10,7 @@ import { RunsTable } from "~/components/runs/RunsTable";
 import { useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { useUser } from "~/hooks/useUser";
 import { RunListPresenter } from "~/presenters/RunListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
@@ -57,6 +58,7 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const job = useJob();
+  const user = useUser();
 
   return (
     <>
@@ -81,6 +83,7 @@ export default function Page() {
                 runs={list.runs}
                 isLoading={isLoading}
                 runsParentPath={jobRunsParentPath(organization, project, job)}
+                currentUser={user}
               />
               <ListPagination list={list} className="mt-2 justify-end" />
             </div>

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

@@ -10,6 +10,7 @@ import { jobMatchId, useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { Handle } from "~/utils/handle";
@@ -63,6 +64,7 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const job = useJob();
+  const user = useUser();
 
   const revalidator = useRevalidator();
   const events = useEventSource(runStreamingPath(organization, project, job, run), {
@@ -86,6 +88,7 @@ export default function Page() {
         run: runPath(organization, project, job, run),
         runsPath: jobRunsParentPath(organization, project, job),
       }}
+      currentUser={user}
     />
   );
 }

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

@@ -1,4 +1,4 @@
-import { useNavigation } from "@remix-run/react";
+import { useLocation, useNavigate, useNavigation } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -13,11 +13,72 @@ import {
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { useUser } from "~/hooks/useUser";
 import { RunListPresenter } from "~/presenters/RunListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { ProjectParamSchema, docsPath, projectPath } from "~/utils/pathBuilder";
 import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
 import { RunListSearchSchema } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/primitives/Select";
+import { JobRunStatus, RuntimeEnvironmentType } from "@trigger.dev/database";
+import {
+  CheckCircleIcon,
+  ClockIcon,
+  ExclamationTriangleIcon,
+  PauseCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/solid";
+import { ChartBarIcon } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
+import { Spinner } from "~/components/primitives/Spinner";
+import { NoSymbolIcon } from "@heroicons/react/20/solid";
+
+// Filter -> status types
+const ExtendedJobRunStatus = {
+  ALL: "ALL" as const,
+  ...JobRunStatus,
+} as const;
+type ExtendedJobRunStatusKey = keyof typeof ExtendedJobRunStatus;
+
+type FilterableStatus =
+  | "ALL"
+  | "QUEUED"
+  | "IN_PROGRESS"
+  | "WAITING"
+  | "COMPLETED"
+  | "FAILED"
+  | "CANCELED"
+  | "TIMEDOUT";
+
+const filterableStatuses: Record<FilterableStatus, ExtendedJobRunStatusKey[]> = {
+  ALL: ["ALL"],
+  QUEUED: ["QUEUED", "WAITING_TO_EXECUTE", "PENDING", "WAITING_ON_CONNECTIONS"],
+  IN_PROGRESS: ["STARTED", "EXECUTING", "PREPROCESSING"],
+  WAITING: ["WAITING_TO_CONTINUE"],
+  COMPLETED: ["SUCCESS"],
+  FAILED: ["FAILURE", "UNRESOLVED_AUTH", "INVALID_PAYLOAD", "ABORTED"],
+  TIMEDOUT: ["TIMED_OUT"],
+  CANCELED: ["CANCELED"],
+};
+
+const statusKeys: FilterableStatus[] = Object.keys(filterableStatuses) as FilterableStatus[];
+
+// Filter -> Environment types
+const ExtendedRuntimeEnvironment = {
+  ALL: "ALL" as const,
+  ...RuntimeEnvironmentType,
+} as const;
+type ExtendedRuntimeEnvironmentType = keyof typeof ExtendedRuntimeEnvironment;
+const environmentKeys: ExtendedRuntimeEnvironmentType[] = Object.keys(
+  ExtendedRuntimeEnvironment
+) as ExtendedRuntimeEnvironmentType[];
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -27,9 +88,29 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const s = Object.fromEntries(url.searchParams.entries());
   const searchParams = RunListSearchSchema.parse(s);
 
+  const status = url.searchParams.get("status");
+  const environment = url.searchParams.get("environment");
+
+  let filterStatus: JobRunStatus[] | undefined;
+  if (status && status !== "ALL") {
+    if (filterableStatuses.hasOwnProperty(status)) {
+      filterStatus = filterableStatuses[status as FilterableStatus] as JobRunStatus[];
+    }
+  }
+
+  let filterEnvironment: RuntimeEnvironmentType | undefined;
+  if (environment && environment !== "ALL") {
+    if (environmentKeys.includes(environment)) {
+      filterEnvironment = environment as RuntimeEnvironmentType;
+    }
+  }
+
   const presenter = new RunListPresenter();
+
   const list = await presenter.call({
     userId,
+    filterEnvironment: filterEnvironment,
+    filterStatus: filterStatus,
     projectSlug: projectParam,
     organizationSlug,
     direction: searchParams.direction,
@@ -48,12 +129,34 @@ export default function Page() {
   const isLoading = navigation.state !== "idle";
   const organization = useOrganization();
   const project = useProject();
+  const user = useUser();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const url = new URLSearchParams(location.search);
+
+  const selectedEnvironment = url.get("environment") || ExtendedRuntimeEnvironment.ALL;
+  const selectedStatus = url.get("status") || ExtendedJobRunStatus.ALL;
+
+  const handleFilterChange = (filterType: string, value: string) => {
+    url.set(filterType, value);
+    url.delete("cursor");
+    url.delete("direction");
+    navigate(`${location.pathname}?${url.toString()}`);
+  };
+
+  const handleStatusChange = (value: FilterableStatus) => {
+    handleFilterChange("status", value);
+  };
+
+  const handleEnvironmentChange = (value: string) => {
+    handleFilterChange("environment", value);
+  };
 
   return (
     <PageContainer>
       <PageHeader>
         <PageTitleRow>
-          <PageTitle title={`${project.name} Runs`} />
+          <PageTitle title={`${project.name} runs`} />
           <PageButtons>
             <LinkButton
               LeadingIcon={"docs"}
@@ -64,12 +167,73 @@ export default function Page() {
             </LinkButton>
           </PageButtons>
         </PageTitleRow>
-        <PageDescription>All Job Runs in this project</PageDescription>
+        <PageDescription>All job runs in this project</PageDescription>
       </PageHeader>
 
       <PageBody scrollable={false}>
         <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
-          <div className="mb-2 flex items-center justify-end gap-x-2">
+          <div className="mb-2 flex items-center justify-between gap-x-2">
+            <div className="flex flex-row justify-between gap-x-2">
+              {/* environment filter */}
+              <SelectGroup>
+                <Select
+                  name="environment"
+                  value={selectedEnvironment}
+                  onValueChange={handleEnvironmentChange}
+                >
+                  <SelectTrigger size="secondary/small" width="full">
+                    <SelectValue placeholder="Select environment" className="ml-2 p-0" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {environmentKeys.map((env) => (
+                      <SelectItem key={env} value={env}>
+                        <div className="flex gap-x-2">
+                          {env !== "ALL" && (
+                            <span
+                              className={cn(
+                                "inline-flex h-4 items-center justify-center rounded-[2px] px-1 text-xxs font-medium uppercase tracking-wider text-midnight-900",
+                                filterEnvironmentColorClassName(env)
+                              )}
+                            >
+                              {filterEnvironmentTitle(env)}
+                            </span>
+                          )}
+                          <span
+                            className={cn(
+                              "inline-flex h-4 items-center justify-center pl-1 text-xxs font-medium uppercase tracking-wider text-dimmed"
+                            )}
+                          >
+                            {env === "ALL" ? env + " Environments" : env}
+                          </span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </SelectGroup>
+
+              {/* status filter */}
+              <SelectGroup>
+                <Select name="status" value={selectedStatus} onValueChange={handleStatusChange}>
+                  <SelectTrigger size="secondary/small" width="full">
+                    <SelectValue placeholder="Select environment" className="ml-2 p-0" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {statusKeys.map((status) => (
+                      <SelectItem key={status} value={status}>
+                        {
+                          <span className="flex items-center gap-1 text-xxs font-medium uppercase tracking-wider">
+                            <FilterStatusIcon status={status} className="h-4 w-4" />
+                            <FilterStatusLabel status={status} />
+                          </span>
+                        }
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </SelectGroup>
+            </div>
+
             <ListPagination list={list} />
           </div>
           <RunsTable
@@ -79,6 +243,7 @@ export default function Page() {
             runs={list.runs}
             isLoading={isLoading}
             runsParentPath={projectPath(organization, project)}
+            currentUser={user}
           />
           <ListPagination list={list} className="mt-2 justify-end" />
         </div>
@@ -86,3 +251,120 @@ export default function Page() {
     </PageContainer>
   );
 }
+
+function filterEnvironmentTitle(environment: ExtendedRuntimeEnvironmentType) {
+  switch (environment) {
+    case "ALL":
+      return "All";
+    case "PRODUCTION":
+      return "Prod";
+    case "STAGING":
+      return "Staging";
+    case "DEVELOPMENT":
+      return "Dev";
+    case "PREVIEW":
+      return "Preview";
+  }
+}
+
+function filterEnvironmentColorClassName(environment: ExtendedRuntimeEnvironmentType) {
+  switch (environment) {
+    case "ALL":
+      return "bg-indigo-500";
+    case "PRODUCTION":
+      return "bg-green-500";
+    case "STAGING":
+      return "bg-amber-500";
+    case "DEVELOPMENT":
+      return "bg-pink-500";
+    case "PREVIEW":
+      return "bg-yellow-500";
+  }
+}
+
+export function FilterStatusLabel({ status }: { status: FilterableStatus }) {
+  return <span className={filterStatusClassNameColor(status)}>{filterStatusTitle(status)}</span>;
+}
+
+export function FilterStatusIcon({
+  status,
+  className,
+}: {
+  status: FilterableStatus;
+  className: string;
+}) {
+  switch (status) {
+    case "ALL":
+      return <span className="w-[0.0625rem]"></span>;
+    case "COMPLETED":
+      return <CheckCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "WAITING":
+      return <ClockIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "QUEUED":
+      return <PauseCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "IN_PROGRESS":
+      return <Spinner className={cn(filterStatusClassNameColor(status), className)} />;
+    case "TIMEDOUT":
+      return (
+        <ExclamationTriangleIcon className={cn(filterStatusClassNameColor(status), className)} />
+      );
+    case "CANCELED":
+      return <NoSymbolIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "FAILED":
+      return <XCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    default: {
+      const _exhaustiveCheck: never = status;
+      throw new Error(`Non-exhaustive match for value: ${status}`);
+    }
+  }
+}
+
+export function filterStatusTitle(status: FilterableStatus): string {
+  switch (status) {
+    case "ALL":
+      return "All Status";
+    case "QUEUED":
+      return "Queued";
+    case "IN_PROGRESS":
+      return "In progress";
+    case "WAITING":
+      return "Waiting";
+    case "COMPLETED":
+      return "Completed";
+    case "FAILED":
+      return "Failed";
+    case "CANCELED":
+      return "Canceled";
+    case "TIMEDOUT":
+      return "Timed out";
+    default: {
+      const _exhaustiveCheck: never = status;
+      throw new Error(`Non-exhaustive match for value: ${status}`);
+    }
+  }
+}
+
+export function filterStatusClassNameColor(status: FilterableStatus): string {
+  switch (status) {
+    case "ALL":
+      return "text-dimmed";
+    case "QUEUED":
+      return "text-slate-500";
+    case "IN_PROGRESS":
+      return "text-blue-500";
+    case "WAITING":
+      return "text-blue-500";
+    case "COMPLETED":
+      return "text-green-500";
+    case "FAILED":
+      return "text-rose-500";
+    case "CANCELED":
+      return "text-slate-500";
+    case "TIMEDOUT":
+      return "text-amber-300";
+    default: {
+      const _exhaustiveCheck: never = status;
+      throw new Error(`Non-exhaustive match for value: ${status}`);
+    }
+  }
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam/route.tsx

@@ -44,6 +44,7 @@ import { z } from "zod";
 import { ActivateSourceService } from "~/services/sources/activateSource.server";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { nanoid } from "nanoid";
+import { useUser } from "~/hooks/useUser";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
@@ -130,6 +131,7 @@ export default function Page() {
   const { trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
+  const user = useUser();
   const navigation = useNavigation();
   const lastSubmission = useActionData();
 
@@ -234,6 +236,7 @@ export default function Page() {
                 total={trigger.runList.runs.length}
                 hasFilters={false}
                 runsParentPath={externalTriggerRunsParentPath(organization, project, trigger)}
+                currentUser={user}
               />
               <ListPagination list={trigger.runList} className="mt-2 justify-end" />
             </>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam_.runs.$runParam/route.tsx

@@ -10,6 +10,7 @@ import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { Handle } from "~/utils/handle";
@@ -97,6 +98,7 @@ export default function Page() {
   const { run, trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
+  const user = useUser();
 
   const revalidator = useRevalidator();
   const events = useEventSource(
@@ -124,6 +126,7 @@ export default function Page() {
           id: trigger.id,
         }),
       }}
+      currentUser={user}
     />
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam._index/route.tsx

@@ -9,6 +9,7 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { useUser } from "~/hooks/useUser";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { Handle } from "~/utils/handle";
@@ -105,10 +106,7 @@ export const handle: Handle = {
         <BreadcrumbIcon />
         <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Webhook Triggers" />
         <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={trimTrailingSlash(match.pathname)}
-          title={data.trigger.key}
-        />
+        <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title={data.trigger.key} />
       </Fragment>
     );
   },
@@ -118,6 +116,7 @@ export default function Page() {
   const { trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
+  const user = useUser();
   const navigation = useNavigation();
   const lastSubmission = useActionData();
 
@@ -135,17 +134,17 @@ export default function Page() {
   return (
     <>
       <Paragraph variant="small" spacing>
-        Webhook Triggers need to be registered with the external service. You can see the list
-        of attempted registrations below.
+        Webhook Triggers need to be registered with the external service. You can see the list of
+        attempted registrations below.
       </Paragraph>
 
-      {!trigger.active &&
+      {!trigger.active && (
         <Form method="post" {...form.props}>
-        <Callout variant="error" className="justiy-between mb-4 items-center">
-          <Paragraph variant="small" className={cn(variantClasses.error.textColor, "grow")}>
-            Registration hasn't succeeded yet, check the runs below.
-          </Paragraph>
-          {/* <input
+          <Callout variant="error" className="justiy-between mb-4 items-center">
+            <Paragraph variant="small" className={cn(variantClasses.error.textColor, "grow")}>
+              Registration hasn't succeeded yet, check the runs below.
+            </Paragraph>
+            {/* <input
             {...conform.input(jobId, { type: "hidden" })}
             defaultValue={trigger.registrationJob?.id}
           />
@@ -159,8 +158,9 @@ export default function Page() {
           >
             {isLoading ? "Retrying…" : "Retry now"}
           </Button> */}
-        </Callout>
-      </Form>}
+          </Callout>
+        </Form>
+      )}
 
       {trigger.runList ? (
         <>
@@ -170,6 +170,7 @@ export default function Page() {
             total={trigger.runList.runs.length}
             hasFilters={false}
             runsParentPath={webhookTriggerRunsParentPath(organization, project, trigger)}
+            currentUser={user}
           />
           <ListPagination list={trigger.runList} className="mt-2 justify-end" />
         </>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.$runParam/route.tsx

@@ -10,6 +10,7 @@ import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { Handle } from "~/utils/handle";
@@ -103,6 +104,7 @@ export default function Page() {
   const { run, trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
+  const user = useUser();
 
   const revalidator = useRevalidator();
   const events = useEventSource(
@@ -130,6 +132,7 @@ export default function Page() {
           id: trigger.id,
         }),
       }}
+      currentUser={user}
     />
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.delivery.$runParam/route.tsx

@@ -10,6 +10,7 @@ import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { Handle } from "~/utils/handle";
@@ -83,7 +84,10 @@ export const handle: Handle = {
           title={`${data.trigger.integration.title}: ${data.trigger.integration.slug}`}
         />
         <BreadcrumbIcon />
-        <BreadcrumbLink to={webhookDeliveryPath(org, project, { id: data.trigger.id })} title="Deliveries" />
+        <BreadcrumbLink
+          to={webhookDeliveryPath(org, project, { id: data.trigger.id })}
+          title="Deliveries"
+        />
         <BreadcrumbIcon />
         {data && data.run && (
           <BreadcrumbLink
@@ -100,6 +104,7 @@ export default function Page() {
   const { run, trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
+  const user = useUser();
 
   const revalidator = useRevalidator();
   const events = useEventSource(
@@ -127,6 +132,7 @@ export default function Page() {
           id: trigger.id,
         }),
       }}
+      currentUser={user}
     />
   );
 }

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

@@ -1,17 +1,19 @@
-import { Outlet } from "@remix-run/react";
+import { Outlet, UIMatch } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
+import { UpgradePrompt } from "~/components/billing/UpgradePrompt";
 import { Breadcrumb, BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { PageNavigationIndicator } from "~/components/navigation/PageNavigationIndicator";
 import { SideMenu } from "~/components/navigation/SideMenu";
+import { featuresForRequest } from "~/features.server";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useOptionalProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useTypedMatchData, useTypedMatchesData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
+import { BillingService } from "~/services/billing.server";
 import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
-import { getCurrentProjectId } from "~/services/currentProject.server";
 import { getImpersonationId } from "~/services/impersonation.server";
 import { requireUserId } from "~/services/session.server";
 import { telemetry } from "~/services/telemetry.server";
@@ -23,6 +25,14 @@ const ParamsSchema = z.object({
   projectParam: z.string().optional(),
 });
 
+export function useCurrentPlan(matches?: UIMatch[]) {
+  const data = useTypedMatchesData<typeof loader>({
+    id: "routes/_app.orgs.$organizationSlug",
+    matches,
+  });
+  return data?.currentPlan;
+}
+
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const impersonationId = await getImpersonationId(request);
@@ -39,11 +49,16 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   telemetry.organization.identify({ organization });
 
+  const { isManagedCloud } = featuresForRequest(request);
+  const billingPresenter = new BillingService(isManagedCloud);
+  const currentPlan = await billingPresenter.currentPlan(organization.id);
+
   return typedjson({
     organizations,
     organization,
     currentProject: project,
     isImpersonating: !!impersonationId,
+    currentPlan,
   });
 };
 
@@ -74,9 +89,12 @@ export default function Organization() {
           organizations={organizations}
         />
         <div className="grid grid-rows-[2.25rem_1fr] overflow-hidden">
-          <div className="flex w-full items-center justify-between border-b border-ui-border pr-2">
+          <div className="flex w-full items-center justify-between border-b border-ui-border">
             <Breadcrumb />
-            <PageNavigationIndicator />
+            <div className="flex h-full items-center gap-4">
+              <PageNavigationIndicator className="mr-2" />
+              <UpgradePrompt organization={organization} />
+            </div>
           </div>
           <Outlet />
         </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx

@@ -0,0 +1,89 @@
+import { ChartBarIcon } from "@heroicons/react/20/solid";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { PricingCalculator } from "~/components/billing/PricingCalculator";
+import { PricingTiers } from "~/components/billing/PricingTiers";
+import { RunsVolumeDiscountTable } from "~/components/billing/RunsVolumeDiscountTable";
+import { Button } from "~/components/primitives/Buttons";
+import { Header1 } from "~/components/primitives/Headers";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+} from "~/components/primitives/Sheet";
+import { featuresForRequest } from "~/features.server";
+import { useOptionalProject, useProject } from "~/hooks/useProject";
+import { OrgBillingPlanPresenter } from "~/presenters/OrgBillingPlanPresenter";
+import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import {
+  OrganizationParamsSchema,
+  organizationBillingPath,
+  organizationPath,
+  projectPath,
+} from "~/utils/pathBuilder";
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { organizationSlug } = OrganizationParamsSchema.parse(params);
+
+  const { isManagedCloud } = featuresForRequest(request);
+  if (!isManagedCloud) {
+    return redirect(organizationBillingPath({ slug: organizationSlug }));
+  }
+
+  const presenter = new OrgBillingPlanPresenter();
+  const result = await presenter.call({ slug: organizationSlug, isManagedCloud });
+  if (!result) {
+    throw new Response(null, { status: 404 });
+  }
+
+  const orgsPresenter = new OrganizationsPresenter();
+  const { organizations, organization, project } = await orgsPresenter.call({
+    userId,
+    request,
+    organizationSlug,
+  });
+
+  return typedjson({ plans: result.plans, organizationSlug, projectSlug: project.slug });
+}
+
+export default function ChoosePlanPage() {
+  const { plans, organizationSlug, projectSlug } = useTypedLoaderData<typeof loader>();
+  const project = useOptionalProject();
+
+  return (
+    <div className="mx-auto flex h-full w-full max-w-[80rem] flex-col items-center justify-center gap-12 overflow-y-auto px-12">
+      <Header1>Subscribe for full access</Header1>
+      <PricingTiers
+        organizationSlug={organizationSlug}
+        plans={plans}
+        showActionText={false}
+        freeButtonPath={projectPath({ slug: organizationSlug }, { slug: projectSlug })}
+      />
+
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="tertiary/small" LeadingIcon={ChartBarIcon} leadingIconClassName="px-0">
+            Estimate usage
+          </Button>
+        </SheetTrigger>
+        <SheetContent size="lg">
+          <SheetHeader className="justify-between">
+            <div className="flex items-center gap-4">
+              <Header1>Estimate your usage</Header1>
+            </div>
+          </SheetHeader>
+          <SheetBody>
+            <PricingCalculator plans={plans} />
+            <div className="mt-8 rounded border border-border p-6">
+              <RunsVolumeDiscountTable brackets={plans.paid.runs?.pricing?.brackets ?? []} />
+            </div>
+          </SheetBody>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx

@@ -0,0 +1,96 @@
+import { CheckBadgeIcon } from "@heroicons/react/24/solid";
+import { RunsVolumeDiscountTable } from "~/components/billing/RunsVolumeDiscountTable";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { FormTitle } from "~/components/primitives/FormTitle";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { useNewCustomerSubscribed } from "~/hooks/useNewCustomerSubscribed";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { Handle } from "~/utils/handle";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { requireUserId } from "~/services/session.server";
+import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
+import { OrganizationParamsSchema } from "~/utils/pathBuilder";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { featuresForRequest } from "~/features.server";
+import { BillingService } from "~/services/billing.server";
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+
+  const { organizationSlug } = OrganizationParamsSchema.parse(params);
+
+  const orgsPresenter = new OrganizationsPresenter();
+  const { organization } = await orgsPresenter.call({
+    userId,
+    request,
+    organizationSlug,
+  });
+
+  const { isManagedCloud } = featuresForRequest(request);
+  const billingPresenter = new BillingService(isManagedCloud);
+  const currentPlan = await billingPresenter.currentPlan(organization.id);
+  const plans = await billingPresenter.getPlans();
+
+  return typedjson({
+    currentPlan,
+    plans,
+  });
+};
+
+export const handle: Handle = {
+  scripts: () => [
+    {
+      src: "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js",
+      crossOrigin: "anonymous",
+    },
+  ],
+};
+
+export default function Subscribed() {
+  const { currentPlan, plans } = useTypedLoaderData<typeof loader>();
+  useNewCustomerSubscribed();
+
+  return (
+    <MainCenteredContainer className="max-w-[22rem]">
+      <FormTitle
+        LeadingIcon={<CheckBadgeIcon className="h-7 w-7 text-green-600" />}
+        title="You're subscribed!"
+        className="mb-0"
+      />
+      <ul>
+        <PlanItem item="Your plan" value={currentPlan?.subscription?.plan.title ?? "–"} />
+        <PlanItem
+          item="Concurrent runs/mo"
+          value={`${currentPlan?.subscription?.plan.concurrentRuns.pricing?.upto}`}
+        />
+        <PlanItem item="Runs/mo" value="Volume discounted" />
+      </ul>
+
+      <RunsVolumeDiscountTable
+        hideHeader
+        className="mb-4 border-b border-border pb-2 pl-4"
+        brackets={plans?.paid.runs?.pricing?.brackets ?? []}
+      />
+      <FormButtons
+        confirmButton={
+          <LinkButton to={"/"} variant={"primary/small"} TrailingIcon={"arrow-right"}>
+            Continue
+          </LinkButton>
+        }
+      />
+    </MainCenteredContainer>
+  );
+}
+
+function PlanItem({ item, value }: { item: string; value: string }) {
+  return (
+    <li className="flex items-center justify-between border-b border-border py-2">
+      <Paragraph>{item}</Paragraph>
+      <Paragraph variant="base/bright" className="font-medium">
+        {value}
+      </Paragraph>
+    </li>
+  );
+}

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -17,12 +17,13 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { RadioGroupItem } from "~/components/primitives/RadioButton";
+import { featuresForRequest } from "~/features.server";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
 import { commitCurrentProjectSession, setCurrentProjectId } from "~/services/currentProject.server";
 import { requireUserId } from "~/services/session.server";
-import { projectPath, rootPath } from "~/utils/pathBuilder";
+import { plansPath, projectPath, rootPath, selectPlanPath } from "~/utils/pathBuilder";
 
 const schema = z.object({
   orgName: z.string().min(3).max(50),
@@ -61,10 +62,20 @@ export const action: ActionFunction = async ({ request }) => {
     const project = organization.projects[0];
     const session = await setCurrentProjectId(project.id, request);
 
+    const { isManagedCloud } = featuresForRequest(request);
+
+    const headers = {
+      "Set-Cookie": await commitCurrentProjectSession(session),
+    };
+
+    if (isManagedCloud) {
+      return redirect(selectPlanPath(organization), {
+        headers,
+      });
+    }
+
     return redirect(projectPath(organization, project), {
-      headers: {
-        "Set-Cookie": await commitCurrentProjectSession(session),
-      },
+      headers,
     });
   } catch (error: any) {
     return json({ errors: { body: error.message } }, { status: 400 });

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

@@ -3,7 +3,6 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson } from "remix-typedjson";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
 import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
-import { useIsOrgChildPage } from "~/hooks/useIsOrgChildPage";
 import { clearRedirectTo, commitSession } from "~/services/redirectTo.server";
 import { requireUser } from "~/services/session.server";
 import { confirmBasicDetailsPath } from "~/utils/pathBuilder";
@@ -22,11 +21,8 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 };
 
 export default function App() {
-  const isOrgChildPage = useIsOrgChildPage();
-  const showBackgroundGradient = !isOrgChildPage;
-
   return (
-    <AppContainer showBackgroundGradient={showBackgroundGradient}>
+    <AppContainer>
       <Outlet />
     </AppContainer>
   );
@@ -35,7 +31,7 @@ export default function App() {
 export function ErrorBoundary() {
   return (
     <>
-      <AppContainer showBackgroundGradient={true}>
+      <AppContainer>
         <MainCenteredContainer>
           <RouteErrorDisplay />
         </MainCenteredContainer>

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

@@ -123,7 +123,7 @@ export default function Page() {
   });
 
   return (
-    <AppContainer showBackgroundGradient={true}>
+    <AppContainer>
       <MainCenteredContainer>
         <FormTitle LeadingIcon="user" title="Profile" />
         <Form method="post" {...form.props} className="max-w-md">

apps/webapp/app/routes/api.v1.jobs.$jobSlug.cancel-runs.ts

@@ -0,0 +1,48 @@
+import type { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { authenticateApiRequest } from "~/services/apiAuth.server";
+import { logger } from "~/services/logger.server";
+import { CancelRunsForJobService } from "~/services/jobs/cancelRunsForJob.server";
+
+const ParamsSchema = z.object({
+  jobSlug: z.string(),
+});
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  // Ensure this is a POST request
+  if (request.method.toUpperCase() !== "POST") {
+    return { status: 405, body: "Method Not Allowed" };
+  }
+
+  // Next authenticate the request
+  const authenticationResult = await authenticateApiRequest(request);
+
+  if (!authenticationResult) {
+    return json({ error: "Invalid or Missing API key" }, { status: 401 });
+  }
+
+  const authenticatedEnv = authenticationResult.environment;
+
+  const parsed = ParamsSchema.safeParse(params);
+
+  if (!parsed.success) {
+    return json({ error: "Invalid or Missing jobSlug" }, { status: 400 });
+  }
+
+  const { jobSlug } = parsed.data;
+
+  const service = new CancelRunsForJobService();
+  try {
+    const res = await service.call(authenticatedEnv, jobSlug);
+
+    if (!res) {
+      return json({ error: "Job not found" }, { status: 404 });
+    }
+
+    return json(res);
+  } catch (err) {
+    logger.error("CancelRunsForJobService.call() error", { error: err });
+    return json({ error: "Internal Server Error" }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,69 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { env } from "~/env.server";
+import { authenticateApiRequest } from "~/services/apiAuth.server";
+import { YaltApiClient } from "@trigger.dev/yalt";
+import { logger } from "~/services/logger.server";
+import { prisma } from "~/db.server";
+
+// This is for HEAD requests to check if the API supports tunneling
+export async function loader({ request }: LoaderFunctionArgs) {
+  // Next authenticate the request
+  const authenticationResult = await authenticateApiRequest(request);
+
+  if (!authenticationResult) {
+    return json({ error: "Invalid or Missing API key" }, { status: 401 });
+  }
+
+  if (!env.TUNNEL_HOST || !env.TUNNEL_SECRET_KEY) {
+    return json({ error: "Tunneling is not supported" }, { status: 501 });
+  }
+
+  return json({ ok: true });
+}
+
+export async function action({ request }: LoaderFunctionArgs) {
+  // Next authenticate the request
+  const authenticationResult = await authenticateApiRequest(request);
+
+  if (!authenticationResult) {
+    return json({ error: "Invalid or Missing API key" }, { status: 401 });
+  }
+
+  if (authenticationResult.environment.type !== "DEVELOPMENT") {
+    return json({ error: "Tunneling is only supported in development" }, { status: 501 });
+  }
+
+  if (!env.TUNNEL_HOST || !env.TUNNEL_SECRET_KEY) {
+    return json({ error: "Tunneling is not supported" }, { status: 501 });
+  }
+
+  const yaltClient = new YaltApiClient(env.TUNNEL_HOST, env.TUNNEL_SECRET_KEY);
+
+  let tunnelId = authenticationResult.environment.tunnelId;
+
+  if (!tunnelId) {
+    try {
+      tunnelId = await yaltClient.createTunnel();
+
+      await prisma.runtimeEnvironment.update({
+        where: {
+          id: authenticationResult.environment.id,
+        },
+        data: {
+          tunnelId,
+        },
+      });
+    } catch (error) {
+      logger.error("Failed to create tunnel", { error });
+
+      return json({ error: "Failed to create tunnel" }, { status: 500 });
+    }
+  }
+
+  if (!tunnelId) {
+    return json({ error: "Failed to create tunnel" }, { status: 500 });
+  }
+
+  return json({ url: yaltClient.connectUrl(tunnelId) });
+}

apps/webapp/app/routes/confirm-basic-details.tsx

@@ -137,7 +137,7 @@ export default function Page() {
   const shouldShowConfirm = user.email !== enteredEmail || user.email === "";
 
   return (
-    <AppContainer showBackgroundGradient={true}>
+    <AppContainer>
       <MainCenteredContainer className="max-w-[22rem]">
         <Form method="post" {...form.props}>
           <FormTitle

apps/webapp/app/routes/healthcheck.tsx

@@ -1,24 +1,9 @@
-// learn more: https://fly.io/docs/reference/configuration/#services-http_checks
 import { prisma } from "~/db.server";
 import type { LoaderFunction } from "@remix-run/node";
 
 export const loader: LoaderFunction = async ({ request }) => {
-  const host = request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
-
   try {
-    const url = new URL("/", `http://${host}`);
-
-    if (request.headers.get("x-forwarded-proto") === "https") {
-      url.protocol = "https:";
-    }
-    // if we can connect to the database and make a simple query
-    // and make a HEAD request to ourselves, then we're good.
-    await Promise.all([
-      prisma.user.count(),
-      fetch(url.href, { method: "HEAD" }).then((r) => {
-        if (!r.ok) return Promise.reject(r);
-      }),
-    ]);
+    await prisma.user.count();
     return new Response("OK");
   } catch (error: unknown) {
     console.log("healthcheck ❌", { error });

apps/webapp/app/routes/invites.tsx

@@ -97,7 +97,7 @@ export default function Page() {
   });
 
   return (
-    <AppContainer showBackgroundGradient={true}>
+    <AppContainer>
       <MainCenteredContainer>
         <div>
           <FormTitle

apps/webapp/app/routes/resources.$organizationSlug.subscribe.ts

@@ -0,0 +1,79 @@
+import { parse } from "@conform-to/zod";
+import { ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { SetPlanBodySchema } from "@trigger.dev/billing";
+import { redirect } from "remix-typedjson";
+import { prisma } from "~/db.server";
+import { redirectWithSuccessMessage } from "~/models/message.server";
+import { BillingService } from "~/services/billing.server";
+import { logger } from "~/services/logger.server";
+import { requireUser } from "~/services/session.server";
+import {
+  OrganizationParamsSchema,
+  organizationBillingPath,
+  subscribedPath,
+} from "~/utils/pathBuilder";
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const user = await requireUser(request);
+
+  const { organizationSlug } = OrganizationParamsSchema.parse(params);
+
+  const formData = await request.formData();
+  const submission = parse(formData, { schema: SetPlanBodySchema });
+  if (!submission.value || submission.intent !== "submit") {
+    return json(submission);
+  }
+
+  try {
+    const org = await prisma.organization.findUnique({
+      select: {
+        id: true,
+      },
+      where: {
+        slug: organizationSlug,
+        members: {
+          some: {
+            userId: user.id,
+          },
+        },
+      },
+    });
+
+    if (!org) {
+      submission.error.message = "Invalid organization";
+      return json(submission);
+    }
+
+    const billingPresenter = new BillingService(true);
+    const result = await billingPresenter.setPlan(org.id, submission.value);
+    if (result === undefined) {
+      submission.error.message = "No billing client";
+      return json(submission);
+    }
+
+    if (!result.success) {
+      submission.error.message = result.error;
+      return json(submission);
+    }
+
+    switch (result.action) {
+      case "create_subscription_flow_start": {
+        return redirect(result.checkoutUrl);
+      }
+      case "canceled_subscription": {
+        return redirectWithSuccessMessage(
+          organizationBillingPath({ slug: organizationSlug }),
+          request,
+          "Your subscription has been canceled."
+        );
+      }
+      case "updated_subscription": {
+        return redirect(subscribedPath({ slug: organizationSlug }), request);
+      }
+    }
+  } catch (e) {
+    logger.error("Error setting plan", { error: e });
+    submission.error.message = e instanceof Error ? e.message : JSON.stringify(e);
+    return json(submission);
+  }
+}

apps/webapp/app/routes/resources.$organizationSlug.subscription.portal.ts

@@ -0,0 +1,47 @@
+import { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { redirect } from "remix-typedjson";
+import { prisma } from "~/db.server";
+import { redirectBackWithErrorMessage, redirectWithErrorMessage } from "~/models/message.server";
+import { BillingService } from "~/services/billing.server";
+import { requireUser } from "~/services/session.server";
+import { OrganizationParamsSchema, usagePath } from "~/utils/pathBuilder";
+
+export async function loader({ request, params }: ActionFunctionArgs) {
+  const user = await requireUser(request);
+  const { organizationSlug } = OrganizationParamsSchema.parse(params);
+
+  const org = await prisma.organization.findUnique({
+    select: {
+      id: true,
+    },
+    where: {
+      slug: organizationSlug,
+      members: {
+        some: {
+          userId: user.id,
+        },
+      },
+    },
+  });
+
+  if (!org) {
+    return redirectWithErrorMessage(
+      usagePath({ slug: organizationSlug }),
+      request,
+      "Something went wrong. Please try again later."
+    );
+  }
+
+  const billingPresenter = new BillingService(true);
+  const result = await billingPresenter.customerPortalUrl(org.id, organizationSlug);
+
+  if (!result || !result.success || !result.customerPortalUrl) {
+    return redirectWithErrorMessage(
+      usagePath({ slug: organizationSlug }),
+      request,
+      "Something went wrong. Please try again later."
+    );
+  }
+
+  return redirect(result.customerPortalUrl);
+}

apps/webapp/app/routes/resources.feedback.ts

@@ -14,6 +14,7 @@ export const feedbackTypeLabel = {
   feature: "Feature request",
   help: "Help me out",
   integration: "Request an Integration",
+  enterprise: "Enterprise enquiry",
 };
 
 export type FeedbackType = keyof typeof feedbackTypeLabel;

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

@@ -0,0 +1,111 @@
+import { BillingClient, SetPlanBody } from "@trigger.dev/billing";
+import { PrismaClient, prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { logger } from "~/services/logger.server";
+import { organizationBillingPath } from "~/utils/pathBuilder";
+
+export class BillingService {
+  #billingClient: BillingClient | undefined;
+  #prismaClient: PrismaClient;
+
+  constructor(isManagedCloud: boolean, prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+    if (isManagedCloud && process.env.BILLING_API_URL && process.env.BILLING_API_KEY) {
+      this.#billingClient = new BillingClient({
+        url: process.env.BILLING_API_URL,
+        apiKey: process.env.BILLING_API_KEY,
+      });
+      console.log(`Billing client initialized: ${process.env.BILLING_API_URL}`);
+    } else {
+      console.log(`Billing client not initialized`);
+    }
+  }
+
+  async currentPlan(orgId: string) {
+    if (!this.#billingClient) return undefined;
+    try {
+      const result = await this.#billingClient.currentPlan(orgId);
+
+      const firstDayOfMonth = new Date();
+      firstDayOfMonth.setDate(1);
+      firstDayOfMonth.setHours(0, 0, 0, 0);
+
+      const firstDayOfNextMonth = new Date();
+      firstDayOfNextMonth.setDate(1);
+      firstDayOfNextMonth.setMonth(firstDayOfNextMonth.getMonth() + 1);
+      firstDayOfNextMonth.setHours(0, 0, 0, 0);
+
+      const currentRunCount = await this.#prismaClient.jobRun.count({
+        where: {
+          organizationId: orgId,
+          createdAt: {
+            gte: firstDayOfMonth,
+          },
+        },
+      });
+
+      if (!result.success) {
+        logger.error("Error getting current plan", { orgId, error: result.error });
+        return undefined;
+      }
+
+      const periodStart = firstDayOfMonth;
+      const periodEnd = firstDayOfNextMonth;
+      const periodRemainingDuration = periodEnd.getTime() - new Date().getTime();
+
+      const usage = {
+        currentRunCount,
+        runCountCap: result.subscription?.plan.runs?.freeAllowance,
+        exceededRunCount: result.subscription?.plan.runs?.freeAllowance
+          ? currentRunCount > result.subscription?.plan.runs?.freeAllowance
+          : false,
+        periodStart,
+        periodEnd,
+        periodRemainingDuration,
+      };
+
+      return { ...result, usage };
+    } catch (e) {
+      logger.error("Error getting current plan", { orgId, error: e });
+      return undefined;
+    }
+  }
+
+  async customerPortalUrl(orgId: string, orgSlug: string) {
+    if (!this.#billingClient) return undefined;
+    try {
+      return this.#billingClient.createPortalSession(orgId, {
+        returnUrl: `${env.APP_ORIGIN}${organizationBillingPath({ slug: orgSlug })}`,
+      });
+    } catch (e) {
+      logger.error("Error getting customer portal Url", { orgId, error: e });
+      return undefined;
+    }
+  }
+
+  async getPlans() {
+    if (!this.#billingClient) return undefined;
+    try {
+      const result = await this.#billingClient.plans();
+      if (!result.success) {
+        logger.error("Error getting plans", { error: result.error });
+        return undefined;
+      }
+      return result;
+    } catch (e) {
+      logger.error("Error getting plans", { error: e });
+      return undefined;
+    }
+  }
+
+  async setPlan(orgId: string, plan: SetPlanBody) {
+    if (!this.#billingClient) return undefined;
+    try {
+      const result = await this.#billingClient.setPlan(orgId, plan);
+      return result;
+    } catch (e) {
+      logger.error("Error setting plan", { orgId, error: e });
+      return undefined;
+    }
+  }
+}

apps/webapp/app/services/db/pgListen.server.ts

@@ -1,9 +1,9 @@
+import { Logger } from "@trigger.dev/core-backend";
 import type { PoolClient } from "pg";
 import { z } from "zod";
-import { Logger } from "@trigger.dev/core";
 import { logger } from "~/services/logger.server";
-import { NotificationCatalog, NotificationChannel, notificationCatalog } from "./types";
 import { safeJsonParse } from "~/utils/json";
+import { NotificationCatalog, NotificationChannel, notificationCatalog } from "./types";
 
 export class PgListenService {
   #poolClient: PoolClient;

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

@@ -123,6 +123,7 @@ export class EndpointApi {
         "x-trigger-api-key": this.apiKey,
         "x-trigger-action": "INDEX_ENDPOINT",
       },
+      redirect: "manual",
     });
 
     return {
@@ -444,6 +445,7 @@ function addStandardRequestOptions(options: RequestInit) {
       ...options.headers,
       "user-agent": "triggerdotdev-server/2.0.0",
       "x-trigger-version": API_VERSIONS.LAZY_LOADED_CACHED_TASKS,
+      accept: "application/json",
     },
   };
 }

apps/webapp/app/services/endpoints/performEndpointIndexService.ts

@@ -13,6 +13,7 @@ import { fromZodError } from "zod-validation-error";
 import { IndexEndpointStats } from "@trigger.dev/core";
 import { RegisterHttpEndpointService } from "../triggers/registerHttpEndpoint.server";
 import { RegisterWebhookService } from "../triggers/registerWebhook.server";
+import { EndpointIndex } from "@trigger.dev/database";
 
 export class PerformEndpointIndexService {
   #prismaClient: PrismaClient;
@@ -29,7 +30,7 @@ export class PerformEndpointIndexService {
     this.#prismaClient = prismaClient;
   }
 
-  public async call(id: string) {
+  public async call(id: string, redirectCount = 0): Promise<EndpointIndex> {
     const endpointIndex = await this.#prismaClient.endpointIndex.update({
       where: {
         id,
@@ -66,6 +67,39 @@ export class PerformEndpointIndexService {
       });
     }
 
+    if (isRedirect(response.status)) {
+      // Update the endpoint URL with the response.headers.location
+      logger.debug("Endpoint is redirecting", {
+        headers: Object.fromEntries(response.headers.entries()),
+      });
+
+      const location = response.headers.get("location");
+
+      if (!location) {
+        return updateEndpointIndexWithError(this.#prismaClient, id, {
+          message: `Endpoint ${endpointIndex.endpoint.url} is redirecting but no location header is present`,
+        });
+      }
+
+      if (redirectCount > 5) {
+        return updateEndpointIndexWithError(this.#prismaClient, id, {
+          message: `Endpoint ${endpointIndex.endpoint.url} is redirecting too many times`,
+        });
+      }
+
+      await this.#prismaClient.endpoint.update({
+        where: {
+          id: endpointIndex.endpoint.id,
+        },
+        data: {
+          url: location,
+        },
+      });
+
+      // Re-run the endpoint index
+      return await this.call(id, redirectCount + 1);
+    }
+
     if (response.status === 401) {
       const body = await safeBodyFromResponse(response, errorParser);
 
@@ -378,3 +412,10 @@ async function updateEndpointIndexWithError(
     },
   });
 }
+
+const redirectStatus = [301, 302, 303, 307, 308];
+const redirectStatusSet = new Set(redirectStatus);
+
+function isRedirect(status: number) {
+  return redirectStatusSet.has(status);
+}

apps/webapp/app/services/endpoints/probeEndpoint.server.ts

@@ -1,4 +1,4 @@
-import { MAX_RUN_CHUNK_EXECUTION_LIMIT, RESPONSE_TIMEOUT_STATUS_CODES } from "~/consts";
+import { MAX_RUN_CHUNK_EXECUTION_LIMIT } from "~/consts";
 import { prisma, PrismaClient } from "~/db.server";
 import { EndpointApi } from "../endpointApi.server";
 import { logger } from "../logger.server";
@@ -46,8 +46,10 @@ export class ProbeEndpointService {
       },
     });
 
+    const rawBody = await response.text();
+
     // If the response is a 200, or it was a timeout, we can assume the endpoint is up and update the runChunkExecutionLimit
-    if (response.status === 200 || detectResponseIsTimeout(response)) {
+    if (response.status === 200 || detectResponseIsTimeout(rawBody, response)) {
       await this.#prismaClient.endpoint.update({
         where: {
           id,

apps/webapp/app/services/externalApis/apis.server.ts

@@ -48,18 +48,25 @@ export const apisList = [
     identifier: "anthropic",
     name: "Anthropic",
   },
-  {
-    identifier: "appsmith",
-    name: "Appsmith",
-  },
-  {
-    identifier: "appwrite",
-    name: "Appwrite",
-  },
+  // {
+  //   identifier: "appsmith",
+  //   name: "Appsmith",
+  // },
+  // {
+  //   identifier: "appwrite",
+  //   name: "Appwrite",
+  // },
   {
     identifier: "asana",
     name: "Asana",
     examples: [
+      {
+        title: "A job that is triggered by a Asana webhook.",
+        slug: "asana-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/asana-http-endpoint.ts",
+      },
       {
         title: "Get user details from Asana",
         slug: "get-user-details",
@@ -68,10 +75,6 @@ export const apisList = [
       },
     ],
   },
-  {
-    identifier: "atlassian",
-    name: "Atlassian",
-  },
   {
     identifier: "aws",
     name: "AWS",
@@ -82,12 +85,26 @@ export const apisList = [
         version: "1.0.0",
         codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/aws.ts",
       },
+      {
+        title: "A job that is triggered by an AWS webhook.",
+        slug: "aws-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/aws-http-endpoint.ts",
+      },
     ],
   },
   {
     identifier: "brex",
     name: "Brex",
     examples: [
+      {
+        title: "A job that is triggered by a Brex webhook.",
+        slug: "brex-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/brex-http-endpoint.ts",
+      },
       {
         title: "Create a new title in a Brex account.",
         slug: "create-new-brex-title",
@@ -151,38 +168,66 @@ export const apisList = [
       },
     ],
   },
+
+  {
+    identifier: "digitalocean",
+    name: "DigitalOcean",
+    examples: [
+      {
+        title: "DigitalOcean create Uptime",
+        slug: "digitalocean-create-uptime",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/digitalocean.ts",
+      },
+    ],
+  },
   {
     identifier: "discord",
     name: "Discord",
     examples: [
+      {
+        title: "A job that is triggered by a Discord webhook.",
+        slug: "discord-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/discord-http-endpoint.ts",
+      },
       {
         title: "Create a Discord bot and send a message to a channel.",
         slug: "discord-bot-send-message",
         version: "1.0.0",
         codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/discord.ts",
       },
+      {
+        title: "A job that is triggered by a Discord webhook.",
+        slug: "discord-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/discord-http-endpoint.ts",
+      },
     ],
   },
-  {
-    identifier: "documenso",
-    name: "Documenso",
-  },
-  {
-    identifier: "dropbox",
-    name: "Dropbox",
-  },
-  {
-    identifier: "facebook",
-    name: "Facebook",
-  },
-  {
-    identifier: "fastify",
-    name: "Fastify",
-  },
-  {
-    identifier: "flickr",
-    name: "Flickr",
-  },
+  // {
+  //   identifier: "documenso",
+  //   name: "Documenso",
+  // },
+  // {
+  //   identifier: "dropbox",
+  //   name: "Dropbox",
+  // },
+  // {
+  //   identifier: "facebook",
+  //   name: "Facebook",
+  // },
+  // {
+  //   identifier: "fastify",
+  //   name: "Fastify",
+  // },
+  // {
+  //   identifier: "flickr",
+  //   name: "Flickr",
+  // },
   {
     identifier: "github",
     name: "GitHub",
@@ -233,6 +278,13 @@ export const apisList = [
         version: "1.0.0",
         codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/gmail.ts",
       },
+      {
+        title: "A job that is triggered by a Gmail webhook.",
+        slug: "gmail-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/gmail-http-endpoint.ts",
+      },
     ],
   },
   {
@@ -250,11 +302,27 @@ export const apisList = [
   {
     identifier: "googledocs",
     name: "Google Docs",
+    examples: [
+      {
+        title: "A job that is triggered by a Google Docs webhook.",
+        slug: "google-docs-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/google-docs-http-endpoint.ts",
+      },
+    ],
   },
   {
     identifier: "googledrive",
     name: "Google Drive",
     examples: [
+      {
+        title: "A job that is triggered by a Google Drive webhook.",
+        slug: "google-drive-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/google-drive-http-endpoint.ts",
+      },
       {
         title: "Update a filename in Google Drive.",
         slug: "update-google-drive-filename",
@@ -279,6 +347,13 @@ export const apisList = [
     identifier: "googlesheets",
     name: "Google Sheets",
     examples: [
+      {
+        title: "A job that is triggered by a Google Sheets webhook.",
+        slug: "google-sheets-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/google-sheets-http-endpoint.ts",
+      },
       {
         title: "Insert data into a row in Google Sheets.",
         slug: "insert-data-into-google-sheets",
@@ -333,6 +408,13 @@ export const apisList = [
     identifier: "instagram",
     name: "Instagram",
     examples: [
+      {
+        title: "A job that is triggered by a Instagram webhook.",
+        slug: "instagram-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/instagram-http-endpoint.ts",
+      },
       {
         title: "Post an image to Instagram",
         slug: "post-image-to-instagram",
@@ -341,14 +423,14 @@ export const apisList = [
       },
     ],
   },
-  {
-    identifier: "instabug",
-    name: "Instabug",
-  },
-  {
-    identifier: "keep",
-    name: "Keep",
-  },
+  // {
+  //   identifier: "instabug",
+  //   name: "Instabug",
+  // },
+  // {
+  //   identifier: "keep",
+  //   name: "Keep",
+  // },
   {
     identifier: "lemonsqueezy",
     name: "Lemon Squeezy",
@@ -361,10 +443,10 @@ export const apisList = [
       },
     ],
   },
-  {
-    identifier: "linkedin",
-    name: "LinkedIn",
-  },
+  // {
+  //   identifier: "linkedin",
+  //   name: "LinkedIn",
+  // },
   {
     identifier: "linear",
     name: "Linear",
@@ -404,10 +486,10 @@ export const apisList = [
       },
     ],
   },
-  {
-    identifier: "lotus",
-    name: "Lotus",
-  },
+  // {
+  //   identifier: "lotus",
+  //   name: "Lotus",
+  // },
   {
     identifier: "mailchimp",
     name: "Mailchimp",
@@ -434,6 +516,15 @@ export const apisList = [
   {
     identifier: "microsoftazure",
     name: "Microsoft Azure",
+    examples: [
+      {
+        title: "A job that is triggered by a Microsoft Azure webhook.",
+        slug: "microsoft-azure-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/azure-http-endpoint.ts",
+      },
+    ],
   },
   {
     identifier: "monday",
@@ -503,6 +594,22 @@ export const apisList = [
   {
     identifier: "pagerduty",
     name: "PagerDuty",
+    examples: [
+      {
+        title: "A job that is triggered by a PagerDuty webhook.",
+        slug: "pagerduty-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/pagerduty-http-endpoint.ts",
+      },
+      {
+        title: "Install an addon in PagerDuty",
+        slug: "pagerduty-install-addon",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/pagerduty.ts",
+      },
+    ],
   },
   {
     identifier: "plain",
@@ -517,10 +624,10 @@ export const apisList = [
       },
     ],
   },
-  {
-    identifier: "posthog",
-    name: "Posthog",
-  },
+  // {
+  //   identifier: "posthog",
+  //   name: "Posthog",
+  // },
   {
     identifier: "raycast",
     name: "Raycast",
@@ -573,6 +680,13 @@ export const apisList = [
     identifier: "salesforce",
     name: "Salesforce",
     examples: [
+      {
+        title: "A job that is triggered by a Salesforce webhook.",
+        slug: "salesforce-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/salesforce-http-endpoint.ts",
+      },
       {
         title: "Create a new contact in Salesforce.",
         slug: "salesforce-create-contact",
@@ -585,6 +699,13 @@ export const apisList = [
     identifier: "segment",
     name: "Segment",
     examples: [
+      {
+        title: "A job that is triggered by a Segment webhook.",
+        slug: "segment-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/segment-http-endpoint.ts",
+      },
       {
         title: "Get source information from Segment.",
         slug: "segment-get-source-information",
@@ -671,6 +792,13 @@ export const apisList = [
     identifier: "snyk",
     name: "Snyk",
     examples: [
+      {
+        title: "A job that is triggered by a Snyk webhook.",
+        slug: "snyk-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/snyk-http-endpoint.ts",
+      },
       {
         title: "Get user details from Snyk.",
         slug: "snyk-get-user-details",
@@ -679,6 +807,19 @@ export const apisList = [
       },
     ],
   },
+  {
+    identifier: "square",
+    name: "Square",
+    examples: [
+      {
+        title: "A job that is triggered by a Square webhook.",
+        slug: "square-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/square-http-endpoint.ts",
+      },
+    ],
+  },
   {
     identifier: "spotify",
     name: "Spotify",
@@ -739,6 +880,16 @@ export const apisList = [
     identifier: "svix",
     name: "Svix",
     examples: [
+      {
+        title: "A job that is triggered by a Svix webhook.",
+        slug: "svix-http-endpoint",
+        version: "1.0.0",
+        exampleType: ["http-endpoint"],
+        apisUsed: ["svix"],
+        tags: ["dev-ops"],
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/svix-http-endpoint.ts",
+      },
       {
         title: "Create an application in Svix",
         slug: "svix-create-application",
@@ -751,6 +902,13 @@ export const apisList = [
     identifier: "todoist",
     name: "Todoist",
     examples: [
+      {
+        title: "A job that is triggered by a Todoist webhook.",
+        slug: "todoist-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/todoist-http-endpoint.ts",
+      },
       {
         title: "Add a new project in Todoist.",
         slug: "todoist-add-new-project",
@@ -774,6 +932,13 @@ export const apisList = [
         version: "1.0.0",
         codeUrl: "https://github.com/triggerdotdev/api-reference/raw/main/src/twilio.ts",
       },
+      {
+        title: "A job that is triggered by a Twilio webhook.",
+        slug: "twilio-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/twilio-http-endpoint.ts",
+      },
     ],
   },
   {
@@ -825,6 +990,13 @@ export const apisList = [
     identifier: "youtube",
     name: "YouTube",
     examples: [
+      {
+        title: "A job that is triggered by a YouTube webhook.",
+        slug: "youtube-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/youtube-http-endpoint.ts",
+      },
       {
         title: "Search for a YouTube video",
         slug: "youtube-search-video",
@@ -833,6 +1005,25 @@ export const apisList = [
       },
     ],
   },
+  {
+    identifier: "zapier",
+    name: "Zapier",
+    examples: [
+      {
+        title: "Store name in Zapier",
+        slug: "zapier-store-name",
+        version: "1.0.0",
+        codeUrl: "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/zapier.ts",
+      },
+      {
+        title: "A job that is triggered by a Zapier webhook.",
+        slug: "zapier-http-endpoint",
+        version: "1.0.0",
+        codeUrl:
+          "https://raw.githubusercontent.com/triggerdotdev/api-reference/main/src/zapier-http-endpoint.ts",
+      },
+    ],
+  },
   {
     identifier: "zbd",
     name: "ZBD",

apps/webapp/app/services/externalApis/integrations/supabase.ts

@@ -9,7 +9,7 @@ const supabase = new SupabaseManagement({
   id: "__SLUG__",
 });
 
-new Job(client, {
+client.defineJob({
   id: "on-new-todos",
   name: "On New Todos",
   version: "0.1.1",
@@ -32,7 +32,7 @@ const supabase = new SupabaseManagement({
   apiKey: process.env.SUPABASE_API_KEY!,
 });
 
-new Job(client, {
+client.defineJob({
   id: "on-new-todos",
   name: "On New Todos",
   version: "0.1.1",
@@ -136,7 +136,7 @@ const supabase = new Supabase<Database>({
   supabaseKey: process.env.SUPABASE_API_KEY!,
 });
 
-new Job(client, {
+client.defineJob({
   id: "on-new-users",
   name: "On New Users",
   version: "0.1.1",

apps/webapp/app/services/jobs/cancelRunsForJob.server.ts

@@ -0,0 +1,73 @@
+import { $transaction, PrismaClient, prisma } from "~/db.server";
+import { AuthenticatedEnvironment } from "../apiAuth.server";
+import { JobRunStatus } from "@trigger.dev/database";
+import { CancelRunService } from "../runs/cancelRun.server";
+import { logger } from "../logger.server";
+import { CancelRunsForJob } from "@trigger.dev/core";
+
+const CANCELLABLE_JOB_RUN_STATUS: JobRunStatus[] = [
+  JobRunStatus.PENDING,
+  JobRunStatus.QUEUED,
+  JobRunStatus.WAITING_ON_CONNECTIONS,
+  JobRunStatus.PREPROCESSING,
+  JobRunStatus.STARTED,
+  JobRunStatus.EXECUTING,
+  JobRunStatus.WAITING_TO_CONTINUE,
+  JobRunStatus.WAITING_TO_EXECUTE,
+];
+
+export class CancelRunsForJobService {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call(environment: AuthenticatedEnvironment, jobSlug: string) {
+    return await $transaction<CancelRunsForJob | undefined>(this.#prismaClient, async (tx) => {
+      const job = await tx.job.findUnique({
+        where: {
+          projectId_slug: {
+            projectId: environment.projectId,
+            slug: jobSlug,
+          },
+        },
+      });
+
+      if (!job) {
+        return;
+      }
+
+      const jobRuns = await tx.jobRun.findMany({
+        where: {
+          jobId: job.id,
+          status: {
+            in: CANCELLABLE_JOB_RUN_STATUS,
+          },
+        },
+        select: {
+          id: true,
+        },
+      });
+
+      const cancelRunService = new CancelRunService(this.#prismaClient);
+      const cancelledRunIds: string[] = [];
+      const failedToCancelRunIds: string[] = [];
+
+      for (const jobRun of jobRuns) {
+        try {
+          await cancelRunService.call({ runId: jobRun.id });
+          cancelledRunIds.push(jobRun.id);
+        } catch (err) {
+          logger.debug(`failed to cancel job run with id ${jobRun.id} for job ${jobSlug}`);
+          failedToCancelRunIds.push(jobRun.id);
+        }
+      }
+
+      return {
+        cancelledRunIds: cancelledRunIds,
+        failedToCancelRunIds: failedToCancelRunIds,
+      };
+    });
+  }
+}

apps/webapp/app/services/jobs/registerJob.server.ts

@@ -435,6 +435,7 @@ export class RegisterJobService {
             title: jobIntegration.metadata.name,
             authSource: "LOCAL",
             connectionType: "DEVELOPER",
+            setupStatus: "COMPLETE",
             definition: {
               connectOrCreate: {
                 where: {
@@ -513,6 +514,7 @@ export class RegisterJobService {
             title: jobIntegration.metadata.name,
             authSource: "RESOLVER",
             connectionType: "EXTERNAL",
+            setupStatus: "COMPLETE",
             definition: {
               connectOrCreate: {
                 where: {

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

@@ -1,5 +1,5 @@
-import type { LogLevel } from "@trigger.dev/core";
-import { Logger } from "@trigger.dev/core";
+import type { LogLevel } from "@trigger.dev/core-backend";
+import { Logger } from "@trigger.dev/core-backend";
 import { sensitiveDataReplacer } from "./sensitiveDataReplacer";
 import { AsyncLocalStorage } from "async_hooks";
 

apps/webapp/app/services/runs/performRunExecutionV3.server.ts

@@ -202,9 +202,14 @@ export class PerformRunExecutionV3Service {
       forceYieldCoordinator.deregisterRun(run.id);
 
       if (!response) {
-        return await this.#failRunExecutionWithRetry(run, input.lastAttempt, {
-          message: `Connection could not be established to the endpoint (${run.endpoint.url})`,
-        });
+        return await this.#failRunExecutionWithRetry(
+          run,
+          input.lastAttempt,
+          {
+            message: `Connection could not be established to the endpoint (${run.endpoint.url})`,
+          },
+          durationInMs
+        );
       }
 
       // Update the endpoint version if it has changed
@@ -285,6 +290,8 @@ export class PerformRunExecutionV3Service {
           status: response.status,
           runId: run.id,
           endpoint: run.endpoint.url,
+          headers: rawHeaders,
+          rawBody,
         });
 
         const errorBody = safeJsonZodParse(errorParser, rawBody);
@@ -294,7 +301,12 @@ export class PerformRunExecutionV3Service {
           if (response.status >= 400 && response.status <= 499) {
             return await this.#failRunExecution(this.#prismaClient, run, errorBody.data);
           } else {
-            return await this.#failRunExecutionWithRetry(run, input.lastAttempt, errorBody.data);
+            return await this.#failRunExecutionWithRetry(
+              run,
+              input.lastAttempt,
+              errorBody.data,
+              durationInMs
+            );
           }
         }
 
@@ -311,7 +323,7 @@ export class PerformRunExecutionV3Service {
           );
         } else {
           // If the error is a timeout, we should mark this execution as succeeded (by not throwing an error) and enqueue a new execution
-          if (detectResponseIsTimeout(response)) {
+          if (detectResponseIsTimeout(rawBody, response)) {
             return await this.#resumeRunExecutionAfterTimeout(
               this.#prismaClient,
               run,
@@ -319,9 +331,14 @@ export class PerformRunExecutionV3Service {
               durationInMs
             );
           } else {
-            return await this.#failRunExecutionWithRetry(run, input.lastAttempt, {
-              message: `Endpoint responded with ${response.status} status code`,
-            });
+            return await this.#failRunExecutionWithRetry(
+              run,
+              input.lastAttempt,
+              {
+                message: `Endpoint responded with ${response.status} status code`,
+              },
+              durationInMs
+            );
           }
         }
       }
@@ -834,6 +851,7 @@ export class PerformRunExecutionV3Service {
             ],
           },
           forceYieldImmediately: false,
+          status: "WAITING_TO_EXECUTE",
         },
         select: {
           executionCount: true,
@@ -995,6 +1013,9 @@ export class PerformRunExecutionV3Service {
           executionDuration: {
             increment: durationInMs,
           },
+          executionCount: {
+            increment: 1,
+          },
           endpoint: {
             update: {
               // Never allow the execution limit to be less than 10 seconds or more than MAX_RUN_CHUNK_EXECUTION_LIMIT
@@ -1005,6 +1026,7 @@ export class PerformRunExecutionV3Service {
             },
           },
           forceYieldImmediately: false,
+          status: "WAITING_TO_EXECUTE",
         },
       });
 
@@ -1016,20 +1038,31 @@ export class PerformRunExecutionV3Service {
   async #failRunExecutionWithRetry(
     run: FoundRun,
     lastAttempt: boolean,
-    output: Record<string, any>
+    output: Record<string, any>,
+    durationInMs: number = 0
   ): Promise<void> {
     if (lastAttempt) {
       return await this.#failRunExecution(this.#prismaClient, run, output);
     }
 
-    await this.#prismaClient.jobRun.update({
+    const updatedJob = await this.#prismaClient.jobRun.update({
       where: { id: run.id },
       data: {
         status: "WAITING_TO_EXECUTE",
+        executionFailureCount: {
+          increment: 1,
+        },
       },
     });
 
-    throw new Error(JSON.stringify(output));
+    if (updatedJob.executionFailureCount >= 10) {
+      return await this.#failRunExecution(this.#prismaClient, run, output);
+    }
+
+    // Use the job.executionFailureCount to determine how long to wait before retrying, using an exponential backoff
+    const runAt = new Date(Date.now() + Math.pow(1.5, updatedJob.executionFailureCount) * 500); // 500ms, 750ms, 1125ms, 1687ms, 2531ms, 3796ms, 5694ms, 8541ms, 12812ms, 19218ms
+
+    await ResumeRunService.enqueue(run, this.#prismaClient, runAt);
   }
 
   async #failRunExecution(
@@ -1050,6 +1083,9 @@ export class PerformRunExecutionV3Service {
           executionDuration: {
             increment: durationInMs,
           },
+          executionCount: {
+            increment: 1,
+          },
           tasks: {
             updateMany: {
               where: {

apps/webapp/app/services/tasks/performTaskOperation.server.ts

@@ -214,8 +214,8 @@ export class PerformTaskOperationService {
         const abortController = new AbortController();
 
         // calculate the actual timeout. If timeoutInMs is undefined, we use the default of 120s
-        // Also make sure the timeout is at least 1s, but not bigger than 120s
-        const actualTimeoutInMs = Math.min(Math.max(timeout?.durationInMs ?? 120000, 1000), 120000);
+        // Also make sure the timeout is at least 1s, but not bigger than 300s
+        const actualTimeoutInMs = Math.min(Math.max(timeout?.durationInMs ?? 120000, 1000), 300000);
 
         const timeoutId = setTimeout(() => {
           abortController.abort();

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

@@ -22,7 +22,7 @@ class Telemetry {
 
   constructor({ postHogApiKey, trigger }: Options) {
     if (postHogApiKey) {
-      this.#posthogClient = new PostHog(postHogApiKey, { host: "https://app.posthog.com" });
+      this.#posthogClient = new PostHog(postHogApiKey, { host: "https://eu.posthog.com" });
     } else {
       console.log("No PostHog API key, so analytics won't track");
     }

apps/webapp/app/utils.ts

@@ -141,6 +141,16 @@ export function formatDurationMilliseconds(
   return duration;
 }
 
+export function formatDurationInDays(milliseconds: number): string {
+  let duration = humanizeDuration(milliseconds, {
+    maxDecimalPoints: 0,
+    largest: 2,
+    units: ["d"],
+  });
+
+  return duration;
+}
+
 export function titleCase(original: string): string {
   return original
     .split(" ")
@@ -163,5 +173,5 @@ export function appEnvTitleTag(appEnv?: string): string {
     return "";
   }
 
-  return ` (${appEnv})`
+  return ` (${appEnv})`;
 }

apps/webapp/app/utils/numberFormatter.ts

@@ -0,0 +1,21 @@
+const compactFormatter = Intl.NumberFormat("en", { notation: "compact", compactDisplay: "short" });
+
+export const formatNumberCompact = (num: number): string => {
+  return compactFormatter.format(num);
+};
+
+const roundedCurrencyFormatter = Intl.NumberFormat("en-US", {
+  style: "currency",
+  currencyDisplay: "symbol",
+  maximumFractionDigits: 0,
+  currency: "USD",
+});
+const currencyFormatter = Intl.NumberFormat("en-US", {
+  style: "currency",
+  currencyDisplay: "symbol",
+  currency: "USD",
+});
+
+export const formatCurrency = (num: number, rounded: boolean): string => {
+  return rounded ? roundedCurrencyFormatter.format(num) : currencyFormatter.format(num);
+};

apps/webapp/app/utils/pathBuilder.ts

@@ -105,6 +105,10 @@ export function newOrganizationPath() {
   return `/orgs/new`;
 }
 
+export function selectPlanPath(organization: OrgForPath) {
+  return `${organizationPath(organization)}/select-plan`;
+}
+
 export function organizationTeamPath(organization: OrgForPath) {
   return `${organizationPath(organization)}/team`;
 }
@@ -117,6 +121,22 @@ export function organizationBillingPath(organization: OrgForPath) {
   return `${organizationPath(organization)}/billing`;
 }
 
+export function usagePath(organization: OrgForPath) {
+  return `${organizationPath(organization)}/billing`;
+}
+
+export function stripePortalPath(organization: OrgForPath) {
+  return `/resources/${organization.slug}/subscription/portal`;
+}
+
+export function plansPath(organization: OrgForPath) {
+  return `${organizationPath(organization)}/billing/plans`;
+}
+
+export function subscribedPath(organization: OrgForPath) {
+  return `${organizationPath(organization)}/subscribed`;
+}
+
 function organizationParam(organization: OrgForPath) {
   return organization.slug;
 }

apps/webapp/app/utils/username.ts

@@ -0,0 +1,22 @@
+import type { User as DBUser } from "~/models/user.server";
+
+type User = Pick<DBUser, "name" | "displayName">;
+
+// remove `null` from username
+export function getUsername(user?: User): string | undefined {
+  if (!user) {
+    return;
+  }
+
+  // user.displayName is of type `string | null`
+  if (user.displayName) {
+    return user.displayName;
+  }
+
+  // user.name is of type `string | null`
+  if (user.name) {
+    return user.name;
+  }
+
+  return;
+}

apps/webapp/package.json

@@ -9,6 +9,7 @@
     "build:remix": "remix build",
     "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build",
     "dev": "cross-env PORT=3030 remix dev",
+    "dev:manual": "cross-env PORT=3030 remix dev -c \"node ./build/server.js\"",
     "format": "prettier --write .",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "cross-env NODE_ENV=production node --max-old-space-size=8192 ./build/server.js",
@@ -52,6 +53,7 @@
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
@@ -62,12 +64,15 @@
     "@remix-run/server-runtime": "2.1.0",
     "@remix-run/v1-meta": "^0.1.3",
     "@tabler/icons-react": "^2.39.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@team-plain/typescript-sdk": "^3.5.0",
-    "@trigger.dev/companyicons": "^1.5.32",
+    "@trigger.dev/companyicons": "^1.5.35",
+    "@trigger.dev/billing": "^1.0.10",
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/core-backend": "workspace:*",
     "@trigger.dev/database": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
+    "@trigger.dev/yalt": "workspace:*",
     "@types/pg": "8.6.6",
     "@uiw/react-codemirror": "^4.19.5",
     "@whatwg-node/fetch": "^0.9.14",
@@ -94,8 +99,8 @@
     "nanoid": "^3.3.4",
     "ohash": "^1.1.3",
     "postcss-import": "^14.1.0",
-    "posthog-js": "^1.83.0",
-    "posthog-node": "^3.1.1",
+    "posthog-js": "^1.93.3",
+    "posthog-node": "^3.1.3",
     "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.29.0",
     "random-words": "^2.0.0",
@@ -188,4 +193,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

apps/webapp/remix.config.js

@@ -14,6 +14,8 @@ module.exports = {
     "@trigger.dev/core",
     "@trigger.dev/core-backend",
     "@trigger.dev/sdk",
+    "@trigger.dev/billing",
+    "@trigger.dev/yalt",
     "emails",
     "highlight.run",
     "random-words",
@@ -23,6 +25,7 @@ module.exports = {
       "../../packages/core/src/**/*",
       "../../packages/core-backend/src/**/*",
       "../../packages/trigger-sdk/src/**/*",
+      "../../packages/yalt/src/**/*",
       "../../packages/emails/src/**/*",
     ];
   },

apps/webapp/tailwind.config.js

@@ -76,7 +76,7 @@ module.exports = {
       fontFamily: {
         sans: ["Inter", "sans-serif"],
         mono: ["Roboto Mono", "monospace"],
-        title: ["Poppins", "sans-serif"]
+        title: ["Poppins", "sans-serif"],
       },
       fontSize: {
         xxs: [
@@ -201,10 +201,11 @@ module.exports = {
     },
   },
   plugins: [
+    require("@tailwindcss/container-queries"),
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("tailwindcss-animate"),
     require("tailwind-scrollbar"),
-    require('tailwind-scrollbar-hide')
+    require("tailwind-scrollbar-hide"),
   ],
 };

apps/webapp/tsconfig.json

@@ -27,6 +27,8 @@
       "@trigger.dev/core-backend/*": ["../../packages/core-backend/src/*"],
       "@trigger.dev/database": ["../../packages/database/src/index"],
       "@trigger.dev/database/*": ["../../packages/database/src/*"],
+      "@trigger.dev/yalt": ["../../packages/yalt/src/index"],
+      "@trigger.dev/yalt/*": ["../../packages/yalt/src/*"],
       "emails": ["../../packages/emails/src/index"],
       "emails/*": ["../../packages/emails/src/*"]
     },